Back in the S.S.R

Back in the S.S.R: An Intro to Nuxt.js, SSR in Vue.js

Transcript

1. Back in the S.S.R - @ianaya89 1
2. ! Nacho Anaya @ianaya89 • Full Stack Developer, Tech Trainer & Speaker • Embajador @Auth0 • Organizador @Vuenos_Aires Back in the S.S.R - @ianaya89 2
3. ! Back in the S.S.R - @ianaya89 3
4. ! Historia Back in the S.S.R - @ianaya89 4
5. Server Side Scrip*ng !""# Back in the S.S.R - @ianaya89 5
6. XmlHttpRequest !""# Back in the S.S.R - @ianaya89 6
7. AJAX !""# Back in the S.S.R - @ianaya89 7
8. SPA !"#" Back in the S.S.R - @ianaya89 8
9. ! Problemas Back in the S.S.R - @ianaya89 9
10. Back in the S.S.R - @ianaya89 10
11. Back in the S.S.R - @ianaya89 11
12. Back in the S.S.R - @ianaya89 12
13. Server Side Scrip*ng Rendering !"#! Back in the S.S.R - @ianaya89 13
14. Back in the S.S.R - @ianaya89 14
15. ! Que es S.S.R.? Back in the S.S.R - @ianaya89 15
16. ! Ventajas • SEO • Menor Tiempo de Carga • Contenido Más Rapido • Mejor Cacheo • Mas control sobre UX Back in the S.S.R - @ianaya89 16
17. ! Desventajas • Deploy mas complejo • Algunas restricciones • Mas carga en el servidor Back in the S.S.R - @ianaya89 17
18. ! SSR en Vue.js > Na%vo > Nuxt.js Back in the S.S.R - @ianaya89 18
19. Back in the S.S.R - @ianaya89 19
20. ! Numeros 1.0.0-rc11 • ✨ ~8.5K • " 14 Repos • # Coverage • ⬇ ~85k Descargas Back in the S.S.R - @ianaya89 20
21. ! Dependencia package.json { "name": "ssr-app", "version": "1.0.0", "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start" }, "dependencies": { "nuxt": "^1.0.0-rc11" } } Back in the S.S.R - @ianaya89 21
22. !" Op$mización Gzip - Code Spli-ng - Preload - HTTP2 Back in the S.S.R - @ianaya89 22
23. ! Estructura Back in the S.S.R - @ianaya89 23
24. Back in the S.S.R - @ianaya89 24
25. ! Vue Components *.vue Back in the S.S.R - @ianaya89 25
26. ! vue-loader Transpilacion - Bundling - HMR - Preprocesadores - Linter Back in the S.S.R - @ianaya89 26
27. ! vue-router pages/*.vue Back in the S.S.R - @ianaya89 27
28. ! vue-router <nuxt-link to="/"> Back in the S.S.R - @ianaya89 28
29. ! " " Rutas Está)cas pages/ --| user/ -----| index.vue -----| one.vue --| index.vue Back in the S.S.R - @ianaya89 29
30. ! " # Rutas Dinámicas pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id.vue --| index.vue Back in the S.S.R - @ianaya89 30
31. ! " Async Data asyncData(context) Back in the S.S.R - @ianaya89 31
32. ! Layouts layouts/default.vue Back in the S.S.R - @ianaya89 32
33. ! Layouts layouts/desktop.vue Back in the S.S.R - @ianaya89 33
34. ! Store store/index.js Back in the S.S.R - @ianaya89 34
35. ! Store pages/index.vue Back in the S.S.R - @ianaya89 35
36. ! Middleware middleware/auth.js Back in the S.S.R - @ianaya89 36
37. ! Middleware pages/secret-page.vue Back in the S.S.R - @ianaya89 37
38. ♻ Flujo Back in the S.S.R - @ianaya89 38
39. ! Head head() Back in the S.S.R - @ianaya89 39
40. ⚙ Configuracion nuxt.config.js Back in the S.S.R - @ianaya89 40
41. ! Plugins Liberias - Codigo Isomorfico - Plugins - Filters - Mixins - Components Back in the S.S.R - @ianaya89 41
42. ! Components components/*.vue Back in the S.S.R - @ianaya89 42
43. ! Deploy npm run build Back in the S.S.R - @ianaya89 43
44. ! Sta%c Deploy npm run generate Back in the S.S.R - @ianaya89 44
45. ! Starters Basic - Express - Koa - Adonis - TS - PWA Back in the S.S.R - @ianaya89 45
46. ! Starters Back in the S.S.R - @ianaya89 46
47. ! Demo Back in the S.S.R - @ianaya89 47
48. ! Mas! • Nuxt API • next-cli ! • Modulos • Express Back in the S.S.R - @ianaya89 48
49. ! Take Away • ! Aplicaciones Universales • " "Sin" Configuracion • # SEO • ⏱ Performance • % Ecosistema Completo Back in the S.S.R - @ianaya89 49
50. ! Gracias! @ianaya89 bit.ly/back-ssr Back in the S.S.R - @ianaya89 50