Vue Nuxt Gridsome - The three flavors of Vue.js

So, you looked at different frontend libraries/framworks and decided to go for Vue.js (good choice, btw). But the story does not end here: Within the Vue.js-ecosystem we now have three different flavors, that all deserve attention: Vue.js, Nuxt.js and Gridsome. In this talk we will take detailed look at what the differences between the three flavors are. Specifically, we will discuss how they deal with dynamic content/data and how they differ in what they send to the browser by looking at a few easy-to-understand examples. As a result, we all are hopefully better equipped to make an informed choice when we start our next project.

Transcript

1. Vue // Nuxt // Gridsome The three flavors of Vue.js
2. Emre Karaca @HiEmreKaraca - Frontend Engineer @ Easybell - Studied Sociology and Political Science
3. @HiEmreKaraca #Vue.js // Berlin /30 Goals of the Talk ๏ Expand/Refresh knowledge about how Vue.js works in the browser ๏ Understand the differences between ๏ Traditional Server-Side-Rendering (SSR) ๏ Client-Side-Rendering (CSR) ๏ Modern Server-Side-Rendering (SSR) / Pre-Rendering ๏ Understand the key differences between Vue.js/Nuxt/Gridsome ๏ Spoiler: It’s about how they render ๏ Enable individuals/teams to make informed decisions within the Vue.js- stack !3
4. @HiEmreKaraca #Vue.js // Berlin /30 SSR => CSR => ? ๏ With Angular, React, Vue we have largely moved from traditional monolith Server-Side-Rendering to SPAs with Client-Side-Rendering ๏ For WebApps with dynamic data and higher UX-requirements ๏ Devs and teams are now comfortable using Vue and others !4 ๏ But what about static sites like marketing pages? ๏ Should we still build them with Wordpress, Drupal, Typo3? ๏ Or should we make use of our skills in Vue etc.? ๏ We should use Vue!! (But we can’t use CSR !)
5. @HiEmreKaraca #Vue.js // Berlin /30 Towards a unified stack ๏ Teams already skilled in building SPAs with modern frameworks should reuse the stack for other projects ๏ Great developer-experience and efficiency ๏ Reuse of central tooling or component libraries ๏ More flexible teams, because everyone can work on everything !5 (But we still can’t use CSR !)
6. @HiEmreKaraca #Vue.js // Berlin /30 Why can’t we use CSR ! ๏ Out of the box, React / Vue / etc only use CSR ๏ But CSR is a problem when it comes to SEO ๏ If you need SEO, you shouldn’t use „Vanilla“-Vue, because it sends „empty" HTML-files to the client ๏ Nuxt and Gridsome tackle exactly this problem ๏ They change what that first HTML-file that is served looks like ๏ Note: They also do a lot of other things, but that’s probably not why you would choose one of them !6
7. @HiEmreKaraca #Vue.js // Berlin /30 The Virtual DOM (V-DOM) ๏ Vue and others use the V-DOM-technique to render efficiently ๏ V-DOM: A JS-Object-representation of the actual DOM ๏ Many individual changes are applied to the V-DOM first ๏ The changed V-DOM is then diffed and the required changes to the actual DOM are determined ๏ All changes are applied in one batch, reducing the amount of expensive DOM-rerenders !7 ๏ V-DOM: A JS-Object-representation of the actual DOM
8. @HiEmreKaraca #Vue.js // Berlin /30 Nuxt & Gridsome !8 ๏ Higher-level frameworks on top of Vue.js ๏ Everything they do can be done manually with Vue.js ๏ But if they already do exactly what you need, use them instead ๏ Essentially very opinionated and extended versions of Vue.js ๏ They take care of a lot of boilerplate ๏ But they also create constraints
9. @HiEmreKaraca #Vue.js // Berlin /30 Nuxt - About !9
10. @HiEmreKaraca #Vue.js // Berlin /30 Nuxt - About ๏ Created by Alexandre Chopin (@alexchopin) & Sebastien Chopin (@atinux) & developed further by a great core team ๏ Releases: ๏ v0.x: 26 Oct. 2016 ๏ v1: 8 Jan 2018 ๏ v2: 21 Sep 2018 ๏ v3: ??? !10
11. @HiEmreKaraca #Vue.js // Berlin /30 Nuxt - Key aspects ๏ 3 Rendering Modes: ๏ Server Side Rendered (SSR) ๏ Statically Generated (Generate) ๏ Single Page App (SPA) ๏ SSR & Generate render HTML for all pages in their initial state ๏ SSR renders on request // Generate renders statically at build time ๏ Once all JS is fully loaded in browser, website turns into SPA ๏ => The V-DOM takes over !11
12. @HiEmreKaraca #Vue.js // Berlin /30 Gridsome - About !12
13. @HiEmreKaraca #Vue.js // Berlin /30 Gridsome - About ๏ Created by Hans-Jørgen Vedvik (@hjvedvik) & Tommy Vedvik (@tommyvevdik) ๏ Releases: ๏ v0.1: 10. Oct 2018 ๏ … ๏ v0.6: 10 May 2019 !13
14. @HiEmreKaraca #Vue.js // Berlin /30 Gridsome - Key Aspects ๏ Prerenders all HTML at build time ๏ Uses GraphQL-data-layer to combine different sources for initial data ๏ Caches all initial-data-requests - no api needed when served! ๏ Once all JS is fully loaded in browser, website turns into SPA ๏ => The V-DOM takes over !14
15. @HiEmreKaraca #Vue.js // Berlin /30 Routes in Vue ๏ Routes need to be registered manually in router.js ๏ Dynamic route is registered like any other route !15
16. @HiEmreKaraca #Vue.js // Berlin /30 Routes in Nuxt ๏ Components in /pages are automatically registered as route ๏ Page-Components for dynamic routes are named with a leading _ ๏ In SSR-Mode dynamic routes are resolved on request ๏ In Generate-Mode dynamic routes have to be defined ahead of time !16 or
17. @HiEmreKaraca #Vue.js // Berlin /30 Routes in Gridsome ๏ Components in /pages are automatically registered as route ๏ Gridsome requires you to define all dynamic routes programmatically ๏ Dynamic-Page-components are stored separately in /templates !17
18. @HiEmreKaraca #Vue.js // Berlin /30 Let’s compare! Vue // Nuxt // Gridsome !18
19. @HiEmreKaraca #Vue.js // Berlin /30 It’s all about rendering that first HTML-file !19
20. @HiEmreKaraca #Vue.js // Berlin /30 Example-App: 3 Views File Route Path Content index.vue / Static Static blog.vue /blog Static Dynamic blogpost.vue /:blogpostId Dynamic Dynamic 1 2 3 !20
21. @HiEmreKaraca #Vue.js // Berlin /30 4 Rendering Modes Framework Type Command Output Vue SPA vue-cli-service build Static files Nuxt SSR SSR nuxt build nuxt start Node server Nuxt Generate Statically Generated nuxt generate Static Files Gridsome Statically Generated & Cached gridsome build Static Files 1 2 3 4 !21
22. @HiEmreKaraca #Vue.js // Berlin /30 / (index) - Vue-SFC !22
23. @HiEmreKaraca #Vue.js // Berlin /30 / (index) - Output !23 After JS is processed 1 2 3
24. @HiEmreKaraca #Vue.js // Berlin /30 /blog - Vue-SFC !24 1st: Executed on server/at build time After: Executed on client Always: Executed on client Always: Executed at build time
25. @HiEmreKaraca #Vue.js // Berlin /30 /blog - Output !25 1 2 3
26. @HiEmreKaraca #Vue.js // Berlin /30 /post1 - Vue-SFC !26
27. @HiEmreKaraca #Vue.js // Berlin /30 /post1 - Output !27 1 2 3
28. @HiEmreKaraca #Vue.js // Berlin /30 1st route vs. 2nd route !28 1st: Request to external API 2nd: Request to external API 1st: Embedded in prerendered HTML 2nd: Request to external API 1st: Embedded in prerendered HTML 2nd: Cached Response in JSON!
29. @HiEmreKaraca #Vue.js // Berlin /30 Conclusion !29 ๏ Reuse your Vue.js-Stack for SEO-critical projects! ๏ Nuxt is very mature, moving fast and close to Vue.js ๏ Gridsome is still new, try it in side projects or very simple websites ๏ If SEO is critical, probably go with Nuxt ๏ If you can live with the Generate-build-step, use it ๏ If live-updates are important, go with SSR ๏ You can also reuse the SSR-server as a api-proxy or even implement a full express-instance!
30. @HiEmreKaraca #Vue.js // Berlin /30 Thanks! !30 You can find me on Twitter
 @HiEmreKaraca Come work with me at Easybell! https://bit.ly/easybell-frontend