Nuxt – Die Zukunft der Webentwicklung

In diesem Talk geht es darum, wie der nahtloser Übergang zwischen Vue.js Components, welche sowohl am Server als auch am Client ausgeführt werden können, die Entwicklung von Web Apps erleichtert.

Schritt für Schritt, vom Prototyping, über den Frontend Code, bis zur Entwicklung des Backends, durchlaufen wir den Prozess um eine kleine Web-App mit Vue.js Components und ein bisschen Node.js umzusetzen. Du wirst sehen, wie einfach es sein kann, wenn sowohl am Server als auch am Client der selbe Code laufen kann!

Transcript

1. NUXT.JS DIE ZUKUNFT DER WEB-ENTWICKLUNG
2. ING. CHRISTOPH HOCHSTRASSER twitter.com/hochchristoph github.com/CHH facebook.com/christoph.hochstrasser
3. REACT? WER KENNT HIER…
4. VUE.JS WER KENNT HIER…
5. WEB ANWENDUNGEN ALS SINGLE PAGE APP BAUEN IST LEIWAND
6. PERFEKTE SEPARATION OF CONCERNS
7. DIE TOLLSTE UX
8. WARUM NICHT ALLES ALS SINGLE PAGE APP BAUEN?
9. SEO & SINGLE PAGE APP VERTRAGEN SICH NICHT 100% WARUM NICHT ALLES ALS SPA BAUEN?
10. SCHLECHTERE TIME-TO-INTERACTIVE WARUM NICHT ALLES ALS SPA BAUEN?
11. GROßE JS BUNDLES WARUM NICHT ALLES ALS SPA BAUEN?
12. LANGSAME JS ENGINES AUF MOBILE WARUM NICHT ALLES ALS SPA BAUEN?
13. WAS WENN ES EINEN AUSWEG AUS DIESEM DILEMMA GÄBE?
14. 25.10.2016 HTTPS://ZEIT.CO/BLOG/NEXT
16. SO UND JETZT BITTE DAS SELBE — NUR IN VUE
17. NUXT EIN VUE.JS WEB-FRAMEWORK
18. + WEBPACK + APP STRUCTURE + VUE.JS + VUE ROUTER + VUE SERVER SIDE RENDERING + VUEX + LAYOUTS + PAGES + PLUGINS + MODULES NUXT =
19. NUXT Struktur • components • pages • /index.vue • /users/_user.vue • layouts • middleware • store • plugins • modules
20. SERVER SIDE RENDERING KEINE SEO ABSTRICHE UND SCHNELLE TIME-TO- INTERACTIVE
21. WEBPACK CODE-SPLITTING PRO ROUTE NUR DER CODE – DER AUCH WIRKLICH AUF DER PAGE BENÖTIGT WIRD – WIRD VOM BROWSER GELADEN
22. Perfekte Separation of Concerns • Backend kümmert sich nur um Business Logic und das Bereitstellen von APIs • Keine Vermischung mit Frontend Concerns, wie Components, CSS Klassen, Markup • Frontend kümmert sich rein um Präsentation • Keine Vermischung mit Models und Datenbank-Code • Nur Markup, CSS, JS
23. ÜBERSICHT ÜBER DIE NUXT APP & EINFACHES BEISPIEL
24. DEMO
25. EIN KOMPLEXERES BEISPIEL WIR BAUEN EINE BIKESHARING PLATTFORM
27. COMPONENTS
28. DEMO
29. BACKEND CODE
30. DEMO
31. RECAP
32. NUXT ERMÖGLICHT DIE SELBEN VUE COMPONENTS AM CLIENT UND AM SERVER AUSZUFÜHREN
33. NUXT STELLT EINE STANDARDISIERTE VERZEICHNISSTRUKTUR FÜR VUE APPS BEREIT
34. NUXT IST EIN FRAMEWORK FÜR ALLE VUE.JS APPS UM VUE, VUE-ROUTER, VUEX & WEBPACK ZUSAMMENZUBRINGEN
35. FÜR MICH IST NUXT DAS IDEALE FRAMEWORK FÜR DAS PROGRESSIVE WEB
36. WELCHE FRAGEN HABT IHR?
37. Links • Nuxt Website • Nuxt Modules • Create Nuxt App • Awesome Nuxt • Next.js
38. ÜBER MICH
39. •Freelancer aus Waidhofen/Ybbs •Ab Frühjahr 2019 wieder für Freelancing verfügbar •Design Systeme und Component Based Design •Vue.js & Laravel •Agile Projekte werden bevorzugt •Neu: Mentoring von Junior Developers auf Anfrage ÜBER MICH ING. CHRISTOPH HOCHSTRASSER
40. ONE MORE THING
41. Freelancer Meetup Amstetten • Monatlicher Erfahrungsaustausch für alle Freelancer aus und rund um Amstetten • Pro Treffen eine 30 Minuten Präsentation • Meetup: https://www.meetup.com/Amstetten-Freelancer-Meetup/ • Voraussichtlicher Start im Herbst 2018 • Wir suchen: • Location • Vortragende • Eventuell Sponsoren • (Keine Verkaufspräsentationen)
42. FIN