Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue Nuxt Gridsome - The three flavors of Vue.js

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.

Avatar for Emre Karaca

Emre Karaca

July 09, 2019
Tweet

Other Decks in Technology

Transcript

  1. @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
  2. @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 !)
  3. @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 !)
  4. @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
  5. @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
  6. @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
  7. @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
  8. @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
  9. @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
  10. @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
  11. @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
  12. @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
  13. @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
  14. @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
  15. @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
  16. @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
  17. @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!
  18. @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!
  19. @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