Wakefly BlogThe Benefits of Using Modern JavaScript Frameworks With Your CMS

The web is an increasingly dynamic platform, and thankfully JavaScript frameworks facilitate adding interactive functionality to websites. Even websites built with content management systems can embrace JS frameworks, and thus deliver dynamic content according to modern practices. If your site has dynamic content requirements, then consider adopting a modern JS framework.

JS Framework Benefits

The main justification for a JS framework is to deliver immediate feedback as visitors interact with your site. Traditionally, website content is generated on the server, and retrieving new content requires a page reload. For many years web developers have been augmenting this traditional format with JavaScript and AJAX, which allows web browsers to dynamically transfer data with the webserver.

Modern frameworks have enhanced their techniques far past basic JavaScript/AJAX handling, improving both efficiency and code maintainability. Here are a few noteworthy modern features:

• Built-in HTML templating: Data displayed within your site's markup is cleanly formatted and easy to read.
• Component-based design: Representing site content through self-contained components is the norm. This enables content reuse and provides a standard model for content structure and behavior.
• Robust data management: The application state is managed within the framework's data models instead of scattered throughout the DOM. Faster performance: Web page content updates are only written when necessary. To-be-rendered content is maintained in a virtual DOM and is rendered to the actual DOM when content changes occur.
• Build system support: Build tools allow developers to use ES2015+ features, preprocessors such as JSX to write HTML within JS, and write code modules that are bundled and minified for fast downloads. Developers can write use new JavaScript features without fearing legacy browser incompatibility.

Integrate Your CMS

Before using a JS framework, web browsers must be able to communicate with your CMS through AJAX requests. This frontend-to-backend communication is fulfilled by creating a REST service that leverages CMS APIs. Here is an overview of the data flow:

• On the website visitor's web browser, the JS framework sends an AJAX request to the REST service.
• On the webserver, a REST service controller receives this request. The controller calls the CMS API to access and/or modify data in the CMS, and then sends a response to the visitor's browser.
• Back on the website visitor's browser, the JS framework received this response. Response data is processed to dynamically update the web page content.

These popular CMSs all offer straightforward REST service integrations, either natively or after minor configuration:

• Kentico: Using ASP.NET Web API with Kentico
• Umbraco: Web API Documentation
• Sitecore: Sitecore Services Client
• WordPress: Rest API Handbook

Developers should guarantee content editors can edit content handled by the JS framework. This can require additional accommodations, such as exposing framework configuration options in the CMS, defining CMS components (such as Kentico's web parts) that are processed as framework components, and passing translatable text labels to the framework.

Choose a Framework

There are plenty of JS frameworks to choose from, so here are a few modern options:

• Vue: Approachable and versatile, Vue's syntax is surprisingly intuitive. Developers can begin using it directly in the browser without special build tool commitments and then graduate to a more professional setup once the need arises.
• React: More library than framework due to its strict focus on creating UI components, React nonetheless possesses all the benefits of modern JS frameworks. State of the art application state management and professional tooling are two of React's foremost strengths.
• Angular: With its vast API and standardized application structure, Angular is especially suitable for web apps. Code is written in TypeScript, and many developers prefer working with this extended alternative to JS.

Learning a new JS framework can be intimidating. Of these suggestions, I currently recommend Vue due to its friendly learning curve. It is neither imposing in its conventions nor required tooling, however, seasoned developers seeking these perks are acknowledged. That said, each framework has its advantages, and the "right choice" varies by project and team.

Embrace Modern Web Development

JavaScript has evolved beyond its loose scripting roots, and modern JS frameworks exemplify the maturity and depth of the current JavaScript ecosystem. While CMSs always offer a server-side manner for structuring and rendering content, most websites need something more to support their dynamic presence. Unstructured JavaScript carelessly modifying web pages is certainly not the answer. Set up a REST service for your CMS, use a JS framework, and embrace modern web development!