From our Depsters August 06, 2019
Benefits of using modern JS frameworks for your CMS build
Using modern JS frameworks for the views of your CME application allows greater development speed and streamlines the development process.
For example, React.Net allows React Components to be used as views in a CME application that relies on being ran as a .Net application. This allows the same views to be used in the .Net application, and a Demo site is created for quick iterations of the components and the CSS that goes with them.
Lay out the history
Traditionally, when developing a website for a CMS, a HTML Demo site was created and signed-off. This was then integrated in to the CMS application. This causes a lot of overhead for translating views and increases the complexity of the development process.
Historically, this was needed as the tooling that the front end and back end teams used were different. The Front End (FE) team needed to make changes quickly to allow the iterations of the HTML, JS and CSS for the site to evolve together. The Back End (BE) team would then need to translate the HTML in to Razor views in a .Net application (Sitecore, Tridion Sites, Umbraco, etc) to leverage the features of the CME.
The main issue this created, was the possibility of errors occurring when the translation from one view language to another was done. Also, as this required differences to be highlighted when changes were made, there is an ongoing maintenance task to ensure that both sets of views are kept in line. It was very easy as projects progressed for the two sets of views to diverge, causing issues and delaying projects in the long run. Additionally, translating changes from one language to another was a manual process, which sapped time away from developing new features for a website.
Solution to the Problem
With the introduction of JS Frameworks like React and robust server-side rendering, the tools of FE and BE are able to be combined, making the process more cohesive.
For example, instead of using handlebars in the FE Demo site and then translating to Razor in the BE-integrated CME application, we can use React components as the view rendering for both. This means that there is no need for the translation of views from one language to another. Both FE and BE teams can share the same views, allowing faster and more reliable development of features.
To do this, we use the React.Net library that allows you to run React components as the views for your .Net application.
“ReactJS.NET makes it easier to use Facebook’s React and JSX from C# and other .NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It supports both ASP.NET 4 (with MVC 4 or 5), and ASP.NET Core MVC. It is cross-platform and can run on Linux via Mono or .NET Core. Take a look at the tutorial to see how easy it is to get started with React and ReactJS.NET!”
The FE Demo site is created and ran using Node and Webpack to allow the development of the React components. This can use the full suite of tools developed for React sites and is not connected to the CME dependencies in any way.
The Demo site has static data set up within it to mock the Data that will come out of the CME application. This allows development of the Demo site to be independent of any CME dependencies. Also, tools like Storybook can be used to host the Demos and manage the development of the React components isolated from the CME.
Webpack and hot reloading can be used on the React components when the FE team are developing them. This ensures that the FE development can be as efficient as possible using all the latest JS framework tooling.
Webpack is used to generate out the JS file for the site. We use two entry points: one for the Server side only and another for the Client side components. Only the Client side JS file is included in the assets of the site delivered to the client. The Server side version is only used on the webservers as part of the CMS application.
React.Net allows this server side JS file to be referenced, and then this can be used as a view in the MVC site. Within the MVC site there is a View renderer registered JsxViewEngine. This handles the rendering of the view using React.Net. With a simple flag the component can also be rendered as a client side component. React Hydrate is used to populate the Component with the view model data client side.
The benefits of this process is twofold:
- it is faster to develop the site as we are not translating the Demo site into the CME application;
- removes the scope for bugs to be introduced by incorrect or out-of-date integrations between the Demo site and the CME application.
Using the JS frameworks as a view engine server side also allows you to use the same language to develop complex functionality to run on the client side. Allowing the component to have an initial render server side and then be hydrated to function as React.JS components on the client side.
Further development on the application can then be done and there isn’t any divergence of the views in the Demo and the .Net applications. This makes releases and continuous delivery methods much easier to implement.