My last article, Deep Dive into Headless CMS Back-End Options, covered some excellent Headless CMS (HCMS) choices for developing the back-end, or “server-side,” architecture for your company’s website – including highly-popular, open source platforms: WordPress, Drupal and Strapi; alongside enterprise-focused platforms: Adobe Experience Manager, Contentful and Contentstack.

Before website design and development begins, it’s important to know what business applications your company wants to see integrated into your website’s HCMS system. Utilizing business applications – like Asana, Slack, and HubSpot – depend on the associated backend applications running smoothly and the database architecture cooperating with the frontend web framework. So, you’ll need to determine frontend and backend preferences, needs, and capabilities before going into the development phase. This level of pre-planning will save you time, money, and some headaches.

There is a substantial selection of frontend web frameworks and libraries available. I’m just going to cover a few of the ones I prefer, for various reasons. As I mentioned in my backend “deep dive” article, I’m not comparing each tool feature-to-feature. Instead, I’m sharing some known ‘pluses’ and ‘minuses’ that are most commonly experienced by software engineers.

React

ReactJS (aka: React.js) is a popular, free, open source, JavaScript library developed by Facebook for building web and mobile apps. React.js is supported by an engaged community of developers and Facebook. It’s a flexible frontend technology that can also be implemented on the server side (backend) and is reinforced by a dynamic collection of tools, components, and libraries. React’s reputation among developers has led to React being incorporated into the technology stacks of social media companies  like Facebook and Instagram, gig economy platforms like Uber and Airbnb, video platforms like Netflix, and SaaS systems like Asana and SendGrid.

React Pluses

• Free
• Flexible and intuitive
• Lightweight (small footprint)
• Faster UI rendering
• Modular and structured code
• Server-side rendering
• Extensive, compatible ecosystem of library and tools
• Variety of framework to speed up development time
• Good documentation
• Close relationship between the DOM structure and JS descriptors

React Minuses

• Once you get past an effortless setup, a steep learning curve follows
• Form handling can be laborious
• “View layer” format requires structuring your own framework
• Top-down, parent-to-child, hierarchy (callbacks passing through multiple children)
• Frequent changes leading to outdated code
• Compiling domain specific JSX code to JS required
• React’s JSX code uses unclear syntactic overloading of attributes 
• React renders only to the DOM state, requiring additional libraries for routing, like React Router

Vue

Vue.js (VueJS) is a lightweight, open-source, JavaScript, frontend website framework that borrowed all of the key ingredients of ReactJS and AngularJS and then made some upgrades to those features that make it more secure, highly flexible, and easier to use. The principal Vue library focuses only on the view layer. Vue.js has become the main competitor to React.js among web and app developers. Brands like Nintendo, BMW, Adobe, Zoom, and Apple are using Vue.js frameworks. Vue 3 recently released with a new set of APIs, an optional new composition API, and a custom renderer API that facilitates Vue in non-Dom environments (native/mobile).

Vue Pluses

• Built in model-view-controller (MVC), allowing easy configuration
• Easy to learn, simple
• Lightweight (small in size)
• Extensive documentation (not all in English)
• Seamless integration
• Perfect for small websites looking for speed and performance
• Flexible and adaptable

Vue Minuses

• A smaller user base than React or Angular, making for a smaller contributor community
• Lack of resources compared to React and Angular
• Single creator who makes decisions independently
• Some documentation in Chinese languages only
• Simplicity can allow for mutated object props

Angular

AngularJS in JavaScript and Angular in TypeScript are open-source, frontend website frameworks developed and supported by Google, beginning in 2010 when AngularJS was officially released. Angular 2 was released in 2016 as a comprehensive framework rewrite done by the same Google engineers. The Angular 2 version addressed the emerging requirements of the web to provide dynamic website content. Angular has since seen 8 revisions since Angular 2 was released. Angular Version 11 was released November 11, 2020. While the modernized Angular is growing in popularity, AngularJS maintains a durable web and application presence. Besides Google and their property Youtube, other websites built with Angular include Microsoft Office, Xbox, Forbes, iStock, and Lego.

Angular Pluses

• Free version
• Plenty of guides, tutorials and community resources available
• Component-based architecture that enables code readability and reusability
• Model-view-controller (MVC)
• Stable, public API
• Basic framework libraries are instantly available
• Fast server performance
• Dedicated debugging tools
• Abundant selection of third-party integrations
• Two-way data binding

Angular Minuses

• Steep learning curve to master TypeScript and MVC
• Bulky – not as lightweight as ReactJS and VueJS
• Unexceptional SEO, despite being developed by Google
• Difficult migration from AngularJS to any of the later Angular versions
• No data modeling, source control, or collaboration tools
• Larger projects result in slow compilation times

Gatsby

GatsbyJS (Gatsby.js) is a fast growing, modern, open-source, frontend website framework that exploits current web technologies, like ReactJS and GraphQL – which, when leveraged together, can create some speedy applications and websites. Gatsby is becoming a popular frontend framework choice because of how seamlessly it integrates with it’s decoupled backend partner, Drupal. Gatsby was released in 2017 and is serving up websites like Raleigh bikes, Little Caesars pizza, Youfit health clubs, and BoredPanda news.

Gatsby Pluses

• Free version
• Fast builds and deployments
• Engaged community offering tutorial help and resources
• Gatsby Preview offers real time content update views
• Over 2,000 plugins
• A plugin system that integrates with (decoupled) Drupal backend modules
• Full React app with router
• GraphQL to build data layer
• Data pre-fetching
• Automated code and data splitting
• Intelligent image and asset optimization
• Serverless rendering, increased security in a static site generator environment
• Scalable with traffic demand
• Accessible features that make your website “work for everyone.”

Gatsby Minuses

• Documentation could use some updates, especially for third-party APIs
• Some steep learning curves for setting up configuration files and troubleshooting build issues
• Requires using GraphQL, increasing the learning curve for some people

PHP (with a template engine)

PHP.net is a popular, open-source, utilitarian scripting language that is commonly used for web development. It’s fast, flexible and sensible and provides a stable foundation on which to build applications. PHP was first released for public use in 1997, three years after Rasmus Lerdorf developed it for his own website (then “personal homepage”) before sharing it with other developers on Usenet. Nearly 25 years later, PHP retains its popularity among web and app developers with version 8 (8.0.1 is the latest, as of this review). While you can build template engines with PHP, using a template engine gives you the option to separate display and source code logic using the template engine’s model-view-controller (MVC). Adding a template engine allows the web developer to separate the data and code from the view. Using a template engine tool, like Twig or Smarty, allows developers to build powerful templates, while lightening up PHP’s otherwise hefty code. Twig delivers specific error messages that make troubleshooting easy and quickly compiles your templates as classes. Smarty compiles templates into PHP scripts. Either way, there are third-party template engines to discover that meet your needs and expectations. Popular sites built on PHP include WordPress and Facebook.

PHP Pluses

• Free to use
• PHP has been thoroughly tried, tested and reviewed
• Stable, reliable and flexible programming language
• Numerous languages and frameworks that extend functionality
• Embedded HTML programming
• Good selection of documentation and tutorials
• Compatible with cloud services
• Good selection of databases (mSQL, MS-SQL, SQLite, PostgreSQL, etc.)
• Lots of PHP experts available
• Fast website and application loading speeds

PHP Minuses

• Security flaws through code vulnerabilities generated by inexperienced PHP developers
• Steeper learning curve for new developers than Python, as one example
• Error handling is more problematic than newer programming languages
• Fewer dedicated libraries for modern builds (such as for machine learning)
• Declining popularity, resulting in a decline in community-driven solutions
• PHP combines content, layout and data in view (using a template engine resolves this)
• When used to create a template, PHP can result in a lot of extraneous code (using a template engine resolves this)
• Compiling can be slow without a template engine (using a template engine resolves this)
• PHP favors long HTML tags, which may not be supported by your web host

You’re probably calculating right now that making these backend and frontend website framework decisions is complex and interdependent. They are! But experienced HCMS software engineers understand these complexities and should be able to guide you and your company’s stakeholders and decision makers through the process by asking the right questions and helping you and your team land on the right website architecture to meet your requirements and expectations. At Culture Foundry, we spearhead this discovery and decision-making process early in a client’s Headless CMS project. We know this will save our clients time, money and some painful future headaches – which is especially likely when transitioning the team roles for corporate website management. It’s important that the website technology not be unnecessarily complex or easily outdated.

You may also want to read: 

Deep Dive into Headless CMS Back-End Options and What Is the Field of Headless CMS Options?