Bringing Drupal 8 and Vue.js to the modern web
There are several reasons and approaches to decouple the presentation and data management of a Drupal website. For very large projects it can be useful to develop the UI including application logic and interfaces to the interfaces provided by Drupal for accessing the site content completely using reactive technologies, namely when the complexity of an application can no longer be addressed adequately without the help of such frameworks (this is one of the reasons). For smaller use cases the hybrid approach is more conceivable, according to certain parts of page endpoints in the user context to bring the content to presentation finally. Compared to the approach of complete decoupling, this approach is significantly less development and maintenance-intensive.
Efficient Implementation of Sophisticated Web Applications
In the modern Web, reactive frameworks such as Vue.js, React or Angular are indispensable when it comes to implementing sophisticated Web applications. In the context of decoupling, such frameworks also find their place in systems that actually have everything: Drupal 8 comes with Twig, a template engine, as well as jQuery, so that content can be – of course – loaded asynchronously and dynamically into themes or modules. Of course, even more complex applications could be realized with jQuery. But this is not a job that quickly bears fruit.
Website Project with Drupal, Bootstrap, and Vue.js
We, the sciencentric AG, have now taken the lead in a website project and developed a Drupal 8 theme in Twig as well as a Drupal module. In this case, the Drupal theme is based on our own Bootstrap 4 distribution. Both components of the website have a JavaScript part, which could have been realized with jQuery with much more complexity. Therefore we decided to use Vue.js instead of including jQuery. Vue is a modern, reactive framework.
JavaScript Development with Vue.js and Essential Build Tools
Those, who know React or Angular will find many paradigms united in Vue.js. So instead of Vanilla JavaScript or JavaScript with jQuery we write JavaScript – more precisely: ECMAScript 6 – with Vue.js. As build tools we use the usual suspects from the web developer scene: Node.js (as runtime), gulp.js, webpack, Babel. The use of these tools allows us to comfortably use all features of the Vue.js framework (for example the integrated template compiler or single file components). With webpack and Babel, an app bundle can be generated that contains transposed JavaScript to be executed even by browsers that do not yet understand ES6.
Live weather data display with
Drupal module, D3.js, and Vue.js
The Development
The Drupal module, which is being developed in this project, is used to display sophisticated live weather data from a special weather station. For this purpose, D3.js, which is also part of the bundle, is used to plot graphs as soon as new data is available. The necessary interfaces are provided by the module itself and are implemented in PHP (using Drupal APIs) so that the embedded Vue.js application can access new data via REST using HTTP clients such as Axios. Only the base framework is written in HTML, all other components are added to the page when the mini-app is run by Vue.js with its special kind of DOM manipulation (virtual DOM).
JavaScript
With this approach, we succeeded in using the very good (and very extensible) Drupal 8 as the base for content management in a very affordable timeframe, to dispense jQuery, instead using a modern, progressive JavaScript framework and our own components elegantly and sustainably.