Old-school Drupal users remember the pain of creating a truly good UI/UX just a few years ago. This is why stakeholders at 2017 DrupalCon agreed on one thing: it was time to implement support of JavaScript front-end frameworks to bring UI/UX to a qualitatively new level. Choosing a front-end framework for a Drupal website became possible due to a new trend in web development: “headless,” or “decoupled” API-first architecture, which means that you build the front-end on your own without using Drupal with a JS framework.
As of now, there are three main frameworks to choose from for decoupled Drupal websites: React, Vue.js and Angular. All of these JS frameworks have their supporters and opponents when there is a need to choose front-end framework for a Drupal website. This is the proof that all of the three top options have their pros and cons, just like anything else. So let’s compare them to find out which Drupal 8 front-end framework you should opt for when you plan your project.
React
React was the preferred and the most promising option for developers, Core committers, and the JavaScript subsystem maintainers at DrupalCon 2017.
We can see ReactJS at work every day: this is the framework developed by Facebook for the Facebook UI/UX. After becoming open-source, it quickly gained popularity due to several key advantages:
- Virtual DOM: virtual DOM is what allows React to process large amounts of data more efficiently. React monitors which parts of a more lightweight virtual DOM have been altered one way or another and updates these parts in the real DOM.
- Component structure: you can divide the JavaScript code you’ve written into numerous components, run tests for every component, reuse and configure them however you like, and put them together to develop a full-fledged UI.
- Constant maintenance and support: as Facebook continues to contribute to the development of React, React developers can enjoy tons of documentation, add-ons, and tools.
However, React has been criticized for being hard to start working with. Many junior developers are quickly discouraged by how hard React is to master, especially compared to Vue. React may seem too complex to grasp at first sight to newcomers. Besides, it lacks a state management system and database query tools.
Experience has shown that React is perfect for large-scale websites that have to deal with a huge amount of data that needs quick updating in real time. Considering that it is characterized by a steep learning curve, React is a good choice if your development team is either already familiar with it or has enough time to learn it.
Vue.js
Another option is Vue, created by former Google employee Evan You. Often called a “one-man project”, it quickly gained recognition among developers due to being incrementally adoptable in terms of integration with other JavaScript libraries and its low learning curve over the past four years of its existence. Let’s take a closer look at why developers may like or hate Vue and what it means for your Drupal website.
What is Vue praised for?
- Virtual DOM and two-way data binding. Vue combines the best of React and Angular to improve the performance of websites.
- It is simple to use for development. The structure is the old-fashioned template one, so it allows you to build large-scale templates without having to waste a lot of time dividing the components into tiny micro-components the way you have to if you use React. With Vue, you are free to choose whether or not to split components into those micro-components based on your further development needs.
- State management system is built-in. Thus, it is possible to monitor the development progress in real time.
- It is easy to adopt for people who have never used it before. Its syntax is simple as it is based on HTML markup and CSS.
What is Vue criticized for?
- Small support community: unlike React, Vue doesn’t have a vast variety of extensions or documentation. Besides, a significant number of comments on Vue are written in Chinese as it grows in popularity among Chinese developers. However, some may argue that Vue's ecosystem is growing, which is an advantage.
- Runtime errors. This is the main pain of Vue developers: runtime errors are not descriptive, which means that you may have to spend a lot of time figuring out what went wrong and how to fix it. It is worth noting that Vue shows a lot of other handy warnings when you misuse methods, for instance.
To sum up, Vue.js is best used as a tool for creating UI for single-pagers or lightweight static websites of small scale due to its simplicity. It is easy to adopt, so you will not need much time to master it, and it uses the old-style template structure for development that is oh-so-familiar.
Angular
Angular is the most mature front-end framework on our list as its first release took place eight years ago. This is why its community has stayed strong for many years. Supported by another world-scale corporation, Google, it remains an open-source framework for developing user interfaces. Let’s take a closer look at this framework’s advantages and disadvantages.
What do developers love about Angular?
- A wide scope of features. Apart from two-way data binding, Angular allows you to use directives to get rid of the distracting mess and keep your code structured and organized.
- Plain HTML templates. They can be easily manipulated, reused, or extended, which makes the overall front-end development a lot simpler. Besides that, those templates are compiled as DOM elements instead of strings.
-
Well-developed documentation and community support. It is possible to find any tutorials, answers or use cases you need thanks to a considerably vast community and being many years in use.
What can’t developers stand about Angular?
- Steep learning curve. Angular is not the best choice for a novice developer. However, the latest TypeScript version is often referred to as the least complex one to master.
- Low performance for large-scale websites. In case your website is a dynamic one and will contain thousands of pages, its size is going to be too big to be handled smoothly.
So, Angular suits development of those websites that are dynamic but not large, and it is perfect for dynamic single-pagers that need to be developed quickly. However, your development team should be proficient in using it or have enough time to learn it from scratch (the latter is extremely rare).
What You Need to Know Before Making a Final Decision
Following our conclusion about both frameworks above, we suggest you ask yourself several questions in order to choose the front-end framework for Drupal website wisely.
- What is the scale of your website? Is it a one-page website or does it contains thousands of pages? Do you need your website to be scalable?
- Do you have enough time either to find a development team that is already proficient in using a certain framework or to let the members of the team learn how to use a new one?
- Are there going to be many dynamically changing UI elements that need to be updated in real time? Or it is going to be a static website?
The Bottom Line: Choosing a Javascript Framework for Drupal Website
Of course, React, Angular and Vue are not the only JavaScript front-end frameworks in the world. However, when it comes to choosing a JavaScript framework for Drupal website, they are the most widely used ones. Considering that every project’s requirements are unique and vary significantly, you need to analyze them first before you choose the front-end framework that will shape the future success of your Drupal website.
