3.
Wolfgang Ziegler // fago
Twitter: @the_real_fago
Core contributions:
Drupal 8 Entity API & Typed Data API
Contrib:
Rules, Entity API, Field Collection, Profile2
CEO / CTO of drunomics GmbH
About me
5. Why to pre-render?
●
Performance – static sites are fast!
●
Easy way to decouple
- without SEO concerns
- while keeping hosting cost &
complexity down!
7. Why Vue.js?
●
Approachable
– Tries to stick HTML , JavaScript, CSS standards
– Great documentation!
●
Versatile
– easy to get started
– incrementally adoptable (router, store, …)!
●
Performant!
– 20kB gzipped, Virtual DOM
8. ●
follows Vue.js principles
●
includes all needed for fully-fledged applications
– Transpilation, CSS (Pre-)Processors
– Routes, with automatic code splitting, ...
●
Modular (PWA, Axios, ...)
●
Performant & Enjoyable
9. Nuxt.js Rendering
●
Single Page Application (SPA)
– Small initial page → JavasScript + APIs
●
Server Side Rendered
– „universal“ or „isomorphic“ mode
●
Statically generated
– It‘s pre-rendered – no need for a server!
– Can be combined with API requests
10. Netlify
●
All-in-one (hosting) platform for static
sites
●
Automatic deployment after Git
commits
●
Builds your app per branch / PR
●
Atomic deployments, SSL, automatically
managed CDN, free tier
11. Netlify + Nuxt.js
●
npx create-nuxt-app ams-demo
●
Push to Github
●
Log into netlify.com and connect it
●
Configure build command:
npm run generate
●
Deploy!
13. Great setup for serving content
●
Drupal serves as editoral application
●
After changes, the Netlify builds gets
triggered! (via API)
●
Deployment happens fully-automated!
●
Fast and reliable CDN powered site!
14. … but how do you
●
deal with instant updates?
●
handle large amounts of content?
●
handle personalized content?
15. Personalization via API
●
Have a general pre-rendered site
●
Login via API
●
Fetch personalized data via API
●
Let Vue.js handle DOM updates
16. Instant updates
●
Regularly pre-generating static sites!
●
but still…
pre-rendered pages might be not fresh
enough!
●
Use APIs to fetch latest updates!
→ Apply changes via Vue.js
17. Massive amount of content
●
Pre-rendering huge amount of content and
pages takes time!
~12.000 pages takes about 20min!
●
Incremental pre-rendering is not there!
●
Thus: Pre-render parts & deliver main
content via Drupal
18. Pre-render the page shell
+ Main content
=
Pre-rendered content
Dynamic content
Pre-rendered page Drupal provided
content
Complete page
19. So rendering on the backend again?
●
Only render simplified markup using
„Custom Elements“
●
Render custom elements client-side with Vue.js!
<pg-quote>
<p>Rendering custom elements is as easy as pie!</p>
<span slot="author">fago</span>
</pg-quote>
<pg-twitter src="#the-twitter-post-link">
<h3 slot="title">The title value</h3>
</pg-twitter>
21. Pre-render the page shell
+ Main content
=
Pre-rendered content
Dynamic content
Pre-rendered page Drupal provided
content
Complete page
22. Frontproxy: Pre-build page response
●
Make Drupal provide the main content via API
+ needed page metadata via API
●
Handle requests by
– fetching pre-generated page shell
– Main content from API
●
Form-submissions, sessions etc. all working as
usual!
●
github.com/drunomics/lupus-frontproxy
24. Lupus CE Renderer module
●
Switches main content renderer to deliver it
via API
●
Only handles main content – no block layout!
●
Adds page metadata (title, breadcrumbs,
metatags)
●
https://drupal.org/project/lupus_ce_renderer
25. Client-side route changes!
●
First page request → Handled by the
frontproxy!
●
Subsequent page requests:
– Client-side application fetches main content from
API
– Apply changes (Page content, Page metadata)
→ Better UX and performance by avoiding
full page reloads!
26. Custom Elements
●
Enable client-side rendering via Vue.js /
Web / or React components
●
SEO-friendly without pre-rendering:
– HTML responses with regular content in slots!
– Custom Elements are standardized by the
W3C as part of the web components spec
●
Simplified and more semantic markup!
27. Custom Elements & SEO
●
render essential data with standard HTML
tags and attribtues
●
Keep links between your pages!
<a is="teaser-wide" href="/your-article">
<h2 slot="title">Article title</h2>
<div slot="excerpt">Some excerpt....</div>
</a>
28. Custom elements module
●
Renders entities into Custom Element
markup
●
Comes with „Custom elements everywhere“
●
Provides a Symfony Serializer-like API
generating Custom Elements markup
●
Layout-builder compatible
●
https://drupal.org/project/custom_elements
29. A novel approach to
progressively decoupled Drupal
●
Decouples frontend rendering from the
backend!
●
Backend stays in control of routing &
URLs,
form processing, sessions, …
●
Easy caching & scalability at the backend!
→ Cache your API requests!
30. Conclusions
●
Advantages of decoupled frontend!
●
Editors & site managers stay in control!
●
Performance – less issues with cache tags!
●
No Node.js hosting required
●
Con: Team needs to understand it!
31. Nuxt.js rendering options!
Option to turn on Nuxt.js SSR and replace
the frontproxy!
●
Still easy to scale (but cache page shell?)
●
Less worrying about SEO friendly markup
●
One more service to run & pay hosting
cost
33. Join us for
contribution opportunities
Thursday, October 31, 2019
9:00-18:00
Room: Europe Foyer 2
Mentored
Contribution
First Time
Contributor Workshop
General
Contribution
#DrupalContributions
9:00-14:00
Room: Diamond Lounge
9:00-18:00
Room: Europe Foyer 2
34. What did you think?
Locate this session at the DrupalCon Amsterdam website:
https://drupal.kuoni-congress.info/2019/program/
Take the Survey!
https://www.surveymonkey.com/r/DrupalConAmsterdam
