Experts in agile software engineering Mit AngularJS Projekte schnell an die Wand fahren Häufige Fehler und wie sie sich vermeiden lassen Rouven Röhrig © 2015 andrena objects ag 2 Experts in agile software engineering Agenda 1. Herausforderungen in Enterprise-JavaScript-Projekten 2. Was ist AngularJS und was bietet es 3. Wie man Projekte an die Wand fährt… und wie man es verhindert 4. Zusammenfassung und Ausblick © 2015 andrena objects ag 3 Experts in agile software engineering Agenda 1. Herausforderungen in Enterprise-JavaScript-Projekten 2. Was ist AngularJS und was bietet es 3. Wie man Projekte an die Wand fährt… und wie man es verhindert 4. Zusammenfassung und Ausblick © 2015 andrena objects ag 4 Experts in agile software engineering Herausforderungen in Enterprise-JavaScript-Projekten • Kein Compiler • Keine „natürliche“ Strukturierung • Loser Zusammenhang der Dateien • Dynamische Typisierung • Kein „Klassen“-Konzept • Asynchronität • Client-seitige Ausführung © 2015 andrena objects ag 5 Experts in agile software engineering Agenda 1. Herausforderungen in Enterprise-JavaScript-Projekten 2. Was ist AngularJS und was bietet es 3. Wie man Projekte an die Wand fährt… und wie man es verhindert 4. Zusammenfassung und Ausblick © 2015 andrena objects ag 6 Experts in agile software engineering Was ist AngularJS? JavaScript-Framework für Single-Page-Applikationen • Client-seitiges JS für interaktives HTML • Kümmert sich um die Abhängigkeiten der Dateien • Hilft beim Strukturieren (u.a.) durch das MVVM-Pattern • Entworfen für eine hohe Testbarkeit (UI- und Unit-Testing) • Ermöglicht „expressive HTML“ © 2015 andrena objects ag 7 Experts in agile software engineering Was ist eine Single-Page-Applikation? Klassische Webseite Single-Page-Applikation Webseite aufrufen Webseite aufrufen HTTP requests HTTP requests Antwort(en) mit Dateien Antwort(en) mit Dateien (HTML, CSS, JS etc.) (HTML, CSS, JS etc.) Webseite aufbauen Webseite aufbauen Link anklicken Link anklicken Send updates (HTTP requests) © 2015 andrena objects ag 8 Experts in agile software engineering Was ist „expressive HTML“? <div> <sudoku> <div> <grid> <div> <row id="row1"> <span>9</span> <cell id="r1c1">9</cell> <span>1</span > <cell id="r1c2">1</cell> ... ... </div> </row> <div> <row id="row2"> <span> </ span > <cell id="r2c1"> </cell> ... ... </div> </row> ... ... </div> </grid> </div> </sudoku> © 2015 and rena objects ag 9 Experts in agile software engineering MVW-Pattern: Model-View-Whatever-Pattern Angular ermöglicht die Trennung von View und Logik • Manche sagen Angular basiert auf dem MVC-Pattern • Andere (darunter der Referent) sagen es entspricht eher dem MVVM-Pattern • Angular sagt es ist ein Model-View-Whatever-Pattern1: • Stellen Sie es sich so vor, wie es für Sie am meisten Sinn ergibt! • … Angular sagt aber auch „[…] it's now closer to MVVM.“ 1 AngularJS: MVC vs MVVM vs MVP, https://plus.google.com/+AngularJS/posts/aZNVhj355G2, 19 Juli 2012 © 2015 andrena objects ag 10 Experts in agile software engineering Angulars wichtigste Konzepte • Dependency Injection • Two-Way-Databinding • Expressive HTML © 2015 andrena objects ag
Description: