DrupalCon Amsterdam 2019:Progressive decoupling in action: using Vue.js to ...
Room: Auditorium
Title: Progressive decoupling in action: using Vue.js to add rich application-like functionality to the course pages of a UK Higher Education institution's Drupal 8 site
Presenter: Phil Wolstenholme
Description: This session will:
– Provide real-world examples of using Vue for adding rich application-like functionality to parts of an otherwise standard (‘coupled’) Drupal 8 site
– Discuss why Vue is a particularly good fit for a lightly or progressively decoupled site compared to other options such as React
– Run through some Vue fundamentals in a Drupal context, including…
–– Passing data to Vue’s data object from Drupal
–– Moving away from jQuery-style DOM manipulation, and instead taking advantage of Vue’s reactivity, computed properties and watchers for less bug-prone and easier to maintain code
–– Interacting with existing non-Vue JS on the same page, for example Foundation tabs or jQuery
– Highlight how Vue’s HTML-based templating makes adding Vue functionality to a Drupal site easy and accessible to a wide range of skill sets, and how this approach to templating works very well with Twig. As part of this I’ll demonstrate how I used a custom Twig macro and the Bamboo Twig module to render fields from Drupal in a specific format for our Vue application to consume.
– Discuss the accessibility and SEO implications of this approach compared to fully server rendered pages, and how to start to address these issues.
I’ll finish up with some tips and tricks learnt from this project, including a demonstration of Vue’s excellent developer tools, a tip to prevent Vue from stripping Drupal’s theme suggestions HTML comments, and how to use hook_library_info_alter to switch between different builds of Vue to get the best balance of developer experience in development, and performance in production.
Title: Progressive decoupling in action: using Vue.js to add rich application-like functionality to the course pages of a UK Higher Education institution's Drupal 8 site
Presenter: Phil Wolstenholme
Description: This session will:
– Provide real-world examples of using Vue for adding rich application-like functionality to parts of an otherwise standard (‘coupled’) Drupal 8 site
– Discuss why Vue is a particularly good fit for a lightly or progressively decoupled site compared to other options such as React
– Run through some Vue fundamentals in a Drupal context, including…
–– Passing data to Vue’s data object from Drupal
–– Moving away from jQuery-style DOM manipulation, and instead taking advantage of Vue’s reactivity, computed properties and watchers for less bug-prone and easier to maintain code
–– Interacting with existing non-Vue JS on the same page, for example Foundation tabs or jQuery
– Highlight how Vue’s HTML-based templating makes adding Vue functionality to a Drupal site easy and accessible to a wide range of skill sets, and how this approach to templating works very well with Twig. As part of this I’ll demonstrate how I used a custom Twig macro and the Bamboo Twig module to render fields from Drupal in a specific format for our Vue application to consume.
– Discuss the accessibility and SEO implications of this approach compared to fully server rendered pages, and how to start to address these issues.
I’ll finish up with some tips and tricks learnt from this project, including a demonstration of Vue’s excellent developer tools, a tip to prevent Vue from stripping Drupal’s theme suggestions HTML comments, and how to use hook_library_info_alter to switch between different builds of Vue to get the best balance of developer experience in development, and performance in production.