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

Nuxt – Die Zukunft der Webentwicklung

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!

Christoph Hochstrasser

September 20, 2018
Tweet

More Decks by Christoph Hochstrasser

Other Decks in Programming

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

  15. None
  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

  26. None
  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