Production-ready HTML5: Der perfekte Frontend Build

Ob HTML, JavaScript oder CSS, in Frontend-Anwendungen gibt es sehr viel zu tun, damit Ihre Anwendungen in den produktiven Betrieb gehen können. gulp stellt ein einfaches, aber dennoch mächtiges Build-Framework bereit. Lernen Sie in diesem Talk, wie Sie Frontend-Anwendungen für Web, Desktop und Mobile kompilieren und alles automatisieren, um Ihre Performance auf ein neues Level zu heben und manuelle Fehler zu beseitigen.

Transcript

1. Was Sie erwartet • GulpJS 101 • Frontend Apps ”bauen” • Mobile Apps / Desktop Apps / Web Apps • Viele Node Packages (npm) 1 Was Sie nicht erwartet • JavaScript Intro Production-ready HTML5 Der perfekte Build mit GulpJS
2. Der perfekte Build mit Gulp Production-ready HTML5 2
3. Thorsten Hans • Developer / Consultant • Thinktecture AG • thorsten.hans@thinktecture.com • @ThorstenHans • www.xplatform.rocks 3
4. Talking Points • Build Tools in der .NET Welt betrachtet • Build Tools für Web Projekte und SPAs • Was ist dieses Gulp und was kann es? • Hands On – Vom reinen Source Code bis in die Produktionsumgebung 4
5. Build Automatisierung in .NET Was sind (oder waren) die üblichen Verdächtigen 5
6. 6 MSBuild Psake NAnt Fake
7. Ein Blick in Richtung Webentwicklung 7
9. Nachteile der Tools wie MSBuild • JavaScript Optimierungen grundsätzlich möglich • Schlecht lesbar • Sogar hoher Wiedereinarbeitungsaufwand • Allerdings lange Adaptionszyklen für – “neue” Web Frameworks – Sprachen 9
10. Anforderungen für SPAs • Optimieren • Minimieren • Zusammenführen • uvm…. • Für Sprachen wie – HTML – JavaScript – CSS 10
11. Adaption von neuen Sprachen - Frameworks • Frameworks wie – Angular2 – React • Sprachen wie – TypeScript – Jade – LESS – SCSS 11
12. Bestandsaufnahme Was gibt es sinnvolles am Markt? 12
13. 13 GruntJS Brocoli WebPack Gulp
14. Gulp • Node.js basierter Task-Runner • Asynchrone Ausführung • Verarbeitung von Dateien und Ordnern auf Grundlage von Streams • Installation mit dem Node Package Manager (npm) • Aktuell verfügbar in Version 3 – Version 4.0 ist in Arbeit – Kann bereits jetzt in seperatem Branch angesehen und verwedent werden • Enormes Plugin Ökosystem 14
16. DEMO Perfekte Builds mit Gulp 16
17. BoardZ! https://github.com/thinktecture/boardz- cross-platform-sample oder https://goo.gl/lJ99tN 17
18. Detailierte Artikelserie zu GulpJS https://www.xplatform.rocks/gulp-article-series/ 18
19. Q & A 19