{"id":4251369,"date":"2019-07-16T13:06:25","date_gmt":"2019-07-16T13:06:25","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/building-reactjs-web-applications-with-sdl-tridion-sites\/"},"modified":"2019-07-16T13:06:25","modified_gmt":"2019-07-16T13:06:25","slug":"building-reactjs-web-applications-with-sdl-tridion-sites","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-uki\/insight\/building-reactjs-web-applications-with-sdl-tridion-sites\/","title":{"rendered":"Building ReactJS web applications with SDL Tridion Sites"},"content":{"rendered":"
\n\t\n\t<\/svg>\n\t\t\t\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button>\n\t\tBuilding ReactJS web applications with SDL Tridion Sites\t<\/h1>\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t<\/picture>\n\t\n\t<\/div>
\n\t\t\t\n\t\n\t
\n\t\tChris Eccles\t\t
\n\t\tArchitect\n\t\t\t<\/div>\n<\/div>\n\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t16 July 2019\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\n\t\tAt DEPT\u00ae, we have a huge amount of experience building global, multilingual websites for our clients and we always like to review our processes to ensure we\u2019re building things in the best way possible.\t<\/h2>\n\n\n\t\tAs many people who work with enterprise clients know, it\u2019s really difficult to use the latest and greatest technologies and methodologies and integrate them well with enterprise CMS\u2019s. It often takes a fair bit of internal investment from the development team to investigate new technologies, POC different approaches, and work to get these integrated in a stable way into both the products and processes we use.\t<\/p>\n\n\n\t\tThe back story\t<\/h2>\n\n\n\t\tWhen it comes to our web application builds, we\u2019ve been running with a well-tested and honed process for our front end implementations for a number of years. Although we\u2019ve been adding incremental improvements, the underlying technologies have remained the same:\t<\/p>\n\n
    \n\t
  • HTML demo sites are built using standard HTML, CSS, JS<\/li>
  • Dynamic content that will be provided by the CMS content is mocked using JSON<\/li>
  • Dynamic content is integrated into the build using Handlbars.js<\/li><\/ul><\/div><\/div>\n\n\n\t\tAlthough this has always worked well, with the huge growth in SPA\u2019s and JavaScript frameworks we were keen to see how we could get these integrated into our process, to ensure we weren\u2019t falling behind the \u2018curve\u2019.\t<\/p>\n\n\n\t\tSDL\u2019s introduction of its micro services platform, in particular the Content Service, as well as the rise in use of the DXA (Digital Experience Accelerator) framework in our builds, has given us a perfect opportunity to review and improve our build processes.\t<\/p>\n\n\n\t\tIssues with the handlebars.Js approach\t<\/h2>\n\n\n\t\tWhile this approach has worked well for us over the years, we\u2019ve always found small issues that we couldn\u2019t shake off, no matter how we changed and improved the process.\t<\/p>\n\n\n\t\tThe biggest issues with the approach are the duplication of effort and good old human error.\t<\/p>\n\n\n\t\tBuilding a static HTML site to demo to a client is an excellent way of showing our clients how the build is progressing, getting early access for our QA team to spot any issues at the HTML build stage, and to simply bring the design to life.\t<\/p>\n\n\n\t\tHowever, there will always be the need to take the static HTML build and integrate it into SDL Tridion Sites; a manual process which always risks introducing human error, as well as incompatibilities between the build and the content model in use.\t<\/p>\n\n\n\t\tHow does ReactJS work with sdl tridion sites?\t<\/h2>\n\n\n\t\tReactJS is a view engine used as a clientside framework. It is written in JavaScript and has been developed by the team at Facebook.\t<\/p>\n\n\n\t\tReactJS relies on content being supplied by defined APIs in order to generate the full page. For this, we are able to use the SDL Content Service micro service which exists in SDL (Tridion) Web 8 implementations and above.\t<\/p>\n\n\n\t\tBy relying on our standard DXA implementation approach with DD4T templating in SDL Tridion, we are able to easily surface content from the CMS straight into the web application front-end, without the need for middleware of complex logic.\t<\/p>\n\n\n\t\tHow does using ReactJS help?\t<\/h2>\n\n\n\t\tUsing ReactJS templating has allowed us to remove the need for a separate HTML demo site. Although the demo site still exists, our process is to now build the demo site using ReactJS templating, which talks directly to the SDL Content Service, meaning the demo site is built using real, curated SDL Tridion Sites content.\t<\/p>\n\n\n\t\tIn addition, we\u2019ve been able to utilise React.Net to build and run the ReactJS components as views from our controllers within the application code, which allows us to share the exact same code used in both the demo site\u00a0and<\/em>\u00a0the application build; no more integration tasks between front end and back end and no more human error!\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t