Five features to consider when selecting a Front End Architecture for your Decoupled CMS

A megatrend in web development is the shift of program logic from the server to the clients. In instead of the web server containing most of the intelligence with the browser being a simple display client to display the processed information, browsers now run complex applications.

A majority of web development is still done with content management systems (CMS) and is essentially publishing information. But the abovementioned shift is also felt in the content management circles with the rise of the headless CMS. In this case front end applications access the CMS through a public interface.

As the server demoted to a role of being a data storage and processing, the significance of the design of the front end is increasingly important to the success of a project. In fact every headless CMS / Content as a Service project should have a dedicated Front End architect to steer the implementation to be sustainable and maintainable in the future as well.

With the rate of development of the front end technologies it can be hard to keep up. in addition it's hard to get an objective view as developers have largely dividided into camps similar to WordPress vs. Drupal. With a heavy time investment in skills in certain technologies this is natural.

There are some key technical points that anyone purchasing or designing a headless CMS project should consider. As in 2016 market leaders are Angular and React.js, so the we'll focuses on these, but they are applicable to any other frameworks and libraries as well.

  • Server side rendering
  • A Component based architecture
  • Modern JavaScript
  • Mobile development support
  • Ecosystem and Developer Adoption

Server side rendering

Server side rendering means that the first view delivered to the client is created on the server. This is especially important in content driven sites as not having this can lead to subpar search engine rankings. With mobile having overtaken desktop as a content consumption media, a server side rendered view also provides a better experience on mobile mobile networks.

Angular was one of the first wide spread front end frameworks and as such the first iteration (Angular 1) does not support server side rendering natively, but can be done with workarounds. Angular 2 is a major shift in this respect as serverside rendering is now a first class citizen through the Angular Universal project.

React has always supported server side rendering and was infact the pioneer in this respect. However it's worth noting that due to the library approach, it's not a given that any given React implementation supports this as it needs to specifically be built in.

A component based architecture

Software components are individual pieces of software that limited functional scope. This allows tried and tested code to be reused. In this case we'll use the term "web components" to describe functional components on a website or a web application. Practical examples would be website element such as navigation or an interactive piece like a loan calculator on a banking site.

Angular 1.x is not web component based. Angular 2, due later in 2016, on the other hand embraces the concept wholehartedly. This will enable easier reuse of functionalities across different applications, essentially enabling composing sites out of components. Angular's framework approach guarantees that any well designed and executed component is reusable across Angular 2 projects.

React was a forerunner in adopting a component based architecture. React has been built around the concept of components from the get-go and is likely the reason the library became so popular altogether. Architecting applications out of components is something developers versed in React do natively, but due to no guarantees of how some low-level functionalities are done - reusing React components from one application to another might not be trivial.

Modern JavaScript

All client side frameworks are written in the JavaScript programming language, which is now over twenty years old. It was originally intended to provide some interaction to web pages, but during the past five years it has enjoyed a renaissance. JavaScript now powers everything from web sites to mobile apps to car entertainment systems.

During 2015 JavaScript as a took a big step with the ECMAScript 2015 standard. This was a large update that made the language itself much more readable and capable of delivering the kind of applications that are built with it in 2016. While this was purely a developer improvement, it is significant consideration when purchasing projects for the long term.

All versions of Angular and React can be written in modern JavaScript through tooling. This won't provide any improvements to end user experience, but the long term maintenance is better. JavaScript is now a simply better programming language - a better hammer essentially.

Mobile development support

Mobile applications have reached past hype and have become everyday humdrum. Mobile apps continue to have unique advantages over web applications. While some of these require them to be written as native Android and iOS applications, the contemporary web front end frameworks offer appealing opportunities to reusing the skillset in mobile development.

For Angular developers looking to create mobile applications, Ionic is a great option. The framework builds on PhoneGap/Cordova and Angular. It allows development of hybrid applications where the UI is created using web technologies, but the framework allows developers to tap into the mobile devices native capabilities through APIs not available to browsers. Hybrid applications can be distributed through mobile channels like Google Play and iTunes App Store.

In February 2015 Facebook announced React Native, which allows React developers to target mobile operating system underpinnings instead of the browser DOM. Where as hybrid applications can never reach parity with their native counterparts, React Native allows developers to target the exact same UI components with JavaScript. This gives it an edge over hybrid solutions. For Angular developers NativeScript is an option similar to React Native - it translates APIs to native platform equivalents on the fly at runtime.

Ecosystem and Developer Adoption

The world is full of great technologies, but in the end technical superiority is not a guarantee of success. From the battle of VHS and BetaMax to HD DVD and BlueRay there have been technologies which are virtually identical in capabilities, but some gain a dominant share of the market.

The situation is similar in web development and Open Source in general. Skillful politics and good documentation is what makes a project stand out and become popular. Once a market matures and certain tools have reached lead status, it's hard to dethrone theme without a disruptive change.

In the case of front end technologies, both Angular and React are in a strong market position with a large userbase. There was some uncertaintly amidst the large scale rewrite of Angular 2, but it looks like the community is accepting the change and Angular is poised to stay relevant.

In this case the market is so large that there is room for both React and Angular 2 in the market, similar to Java and .NET in the enterprise. As for new entrants gaining the traction to catch up to the duo, it's hard to see that happening any time soon. But never say never.