This is Part 3 of a series. Part 1 is The Journey to a Content Mesh and Part 2 is Unbundling of the CMS.
Developing for the web is hard. With millions of properties on the Internet, website developers have to create experiences that are compelling enough to engage audiences when new destinations are only a few keystrokes away.
And while creating rich user experiences is never an easy task, walled-garden CMS development environments introduce additional challenges. Teams are forced to work around them, but ultimately deliver less rich experiences at higher cost.
Traditional CMS development presents challenges
Some challenges of traditional CMS development environments include:
- Walled-garden development. Work on projects across CMS systems often requires reimplementing basic functionality like carousels or banners. Development can be blocked due to CMS access restrictions or code freezes. Upgrade paths can be challenging when CMSs don’t support component UI versioning.
- Maintaining local environments. Setting up a local app server and database and keeping it up to date with team members’ changes is time-consuming, especially when switching between projects or returning after a gap in development.
- Project organization. Reliably installing and managing third-party dependencies, including cross-compatibility and handling bugs in upstream, is challenging. Vanilla JavaScript offers no standard project organization or code bundling patterns.
- A difficult target environment. Cross-browser API incompatibilities, global DOM application state, and imperative DOM APIs make it easy to inadvertently introduce bugs.
The rise of modern frameworks
Luckily, we know how to fix these problems. Over the last five years, two modern web frameworks, React and Angular, have taken the web world by storm.
Source: Google Trends
Modern frameworks offer stability and faster development
Modern frameworks offer built-in performance and testing patterns/tools, encourage componentized/modular code, enable code reuse across teams, enable monolithic apps to be broken into smaller, more maintainable services, and offer a rich ecosystem to allow developers to quickly solve common problems instead of wasting cycles reinventing wheels.
Their ubiquity adds stability to the landscape; React and Angular have become universal. With ubiquity comes an ecosystem of high-quality components — tables, forms, date-pickers, whole design systems — that are open-source and available for plugging into any site.
Modern frameworks also represent a core technology advance over previous solutions that make it much easier to create visually rich, low-defect frontends:
- Reusable UIs. Key UI elements, such as headers, dropdowns, typeaheads, buttons, tables and so forth may be reused across the application, without copy-pasta.
- Local application state. Previous methods of modifying web page display relied on global state. When code at any place can modify state everywhere, the result at scale is spaghetti code. In React/Angular’s component model, components cannot modify outside state without being granted explicit permission.
- A declarative virtual DOM. Instead of imperatively changing specific page elements’ state in reaction to specific user actions, developers can specify desired UI state as a “view” on application state, making code more readable and less buggy.
React and Angular, along with mature ES2015+ JavaScript, and stable dependency/bundling solutions like npm and webpack, are blowing away conceptions of JS as an unserious language. They are in production of leading Fortune 500 companies, including Facebook, Twitter, Microsoft, Autodesk, Airbnb, and McDonald’s.
Modern frameworks enable compelling content experiences
While React and Angular were originally created as web app solutions, with the rise of the headless CMS, usage of React and Angular on websites has skyrocketed, growing 5-10X since early 2017.
Source: React, Angular (builtwith.com)
Headless & decoupled setups allow a modern frontend to be placed over a 2000s-era ASP.NET/J2EE/C#/PHP CMS and present a fresh user experience — without sacrificing the powerful content management workflows that established these CMS platforms as industry leaders in the first place.
And the evidence? Increasingly, award-winning websites such as the leading “corporate” website winners of the 2018 Webby awards, are powered by modern frontend JavaScript frameworks.
Modern web development frameworks like React and Angular are the latest step transforming the content web from its original simple, document-based model to a complex, rich web experience and app platform — and it’s happening fast.
In the next blog post, Why Mobile Performance is Crucial, we’ll move on to the final piece of the changing content landscape puzzle.
We’ll discuss how growing smartphone usage both in the US and globally has made mobile performance crucial — as well as suddenly easier to optimize in the headless CMS world. We’ll also explore two modern, complementary trends for improving web performance and how website teams can get the best of both out of the box.