Tragfähige Frontend-Architekturen

Über Web-Architekturen für Single-Page-Apps und ROCA-style Anwendungen. Vortrag von der JavaLand Konferenz 2014

Transcript

1. Wir lösen das – persönlich! Tragfähige Frontend-Architekturen Till Schulte-Coerne JavaLand 2014
2. © 2014 innoQ Deutschland GmbH Frontend-Architektur?
3. © 2014 innoQ Deutschland GmbH Frontend Backend DB Fertig! So ware-Architektur!
4. © 2014 innoQ Deutschland GmbH Was wo hin? Rest Geschä slogik Daten HTML? CSS? JavaScript? PHP? JSF? Play? HTTP? ...? Frontend Backend DB
5. © 2014 innoQ Deutschland GmbH „Realität“ Das „Internet“ Frontend Backend DB Browser
6. © 2014 innoQ Deutschland GmbH Im Großen Frontend Backend 1 Backend 2 Backend 3
7. © 2014 innoQ Deutschland GmbH Soll Frontend Backend 1 Backend 2 Backend 3
8. © 2014 innoQ Deutschland GmbH „Klassischer Schnitt“ Klassisches Enterprise-Modell Fette Backend-Services Wenig Frontend-Logik Browser == Notweniges Übel ?
9. © 2014 innoQ Deutschland GmbH Soll Backend 2 Backend 1 Backend 3 Frontend
10. © 2014 innoQ Deutschland GmbH Ist Frontend Backend 2 Backend 1 Backend 3 ?↯
11. © 2014 innoQ Deutschland GmbH Logische Weiterentwicklung? Backend 2 Backend 1 Backend 3 Frontend im Browser
12. © 2014 innoQ Deutschland GmbH Single Page Apps
13. © 2014 innoQ Deutschland GmbH MVC im Browser MVC oder MVP MVC, MVP oder MVVM Rich Client
14. © 2014 innoQ Deutschland GmbH Backend-Services per Ajax (Modell) Client-seitiges Routing Templating Data-Binding Applikationslogik (Controller) Mögliche Features
15. © 2014 innoQ Deutschland GmbH Ajax + X Backend-Services $.get("/foo.json", function(e) { machWas(e.data); }); App.Post = DS.Model.extend({ title: DS.attr('string'), content: DS.attr('string'), comments: DS.hasMany('App.Comment') }); App.Comment = DS.Model.extend({ author: DS.attr('string'), content: DS.attr('string'), post: DS.belongsTo('App.Post') }); Ember Data „plain jQuery“
16. © 2014 innoQ Deutschland GmbH Data-Binding var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; Hallo <span data-bind="text: personName"></span>! myViewModel.personName('Mary'); KnockoutJS
17. © 2014 innoQ Deutschland GmbH Templating <div data-bind="template: { name: 'person-template', foreach: people }" /> ... <script type="text/html" id="person-template"> <h3 data-bind="text: name"></h3> <p>Age: <span data-bind="text: personAge"></span></p> </script> KnockoutJS
18. © 2014 innoQ Deutschland GmbH Routing $routeProvider. when('/', {controller:ListCtrl, templateUrl:'list.html'}). when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}). when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}). otherwise({redirectTo:'/'} AngularJS History API? http://example.com/ http://example.com/edit/4711 htto://example.com/new m it http://example.com/index.html#/ http://example.com/index.html#/edit/4711 htto://example.com/index.html#/new ohne
19. © 2014 innoQ Deutschland GmbH Frameworks und Bibliotheken Typ Modelle Routing Templating Data binding AngularJS KnockoutJS EmberJS BackboneJS ⋯ Framework Ressourcen Optional Eingebaut Zentral Bibliothek — Optional Eingebaut Zentral Framework Objekte Zentral Eingebaut Re-Render Bibliothek Ressourcen Optional Wahlweise Re-Render http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
20. © 2014 innoQ Deutschland GmbH Single Page Apps Neues Enterprise-Modell? Tragfähige Architektur Kein aufgeteiltes Frontend
21. © 2014 innoQ Deutschland GmbH Single Page Apps Backend 2 Backend 1 Backend 3 Frontend-App im Browser
22. © 2014 innoQ Deutschland GmbH Multi Single Page Apps Link Backend 2 Backend 1 Backend 3 SPA 1 SPA 2
23. © 2014 innoQ Deutschland GmbH Zurück zum Anfang
24. © 2014 innoQ Deutschland GmbH Browser Frontend Backend Daten
25. © 2014 innoQ Deutschland GmbH Browser Backend Daten
26. © 2014 innoQ Deutschland GmbH Anwendung 1 Anwendung 2 Anwendung 3
27. © 2014 innoQ Deutschland GmbH Reverse Proxy Anwendung 1 Anwendung 2 Anwendung 3
28. © 2014 innoQ Deutschland GmbH ROCA
29. © 2014 innoQ Deutschland GmbH RESTful Web-Frontends
30. © 2014 innoQ Deutschland GmbH Deeplinks „Nahtlose“ Übergänge Zustandslosigkeit
31. © 2014 innoQ Deutschland GmbH Applikationslogik ausschließlich auf dem Server
32. © 2014 innoQ Deutschland GmbH Vertraue niemals dem Client Nicht-Browser Clients (z.B. Google Crawler)
33. © 2014 innoQ Deutschland GmbH Keine Duplikation von Logik auf dem Client
34. © 2014 innoQ Deutschland GmbH Sämtliche Applikationslogik auf dem Server Keine Duplikation von Logik auf den Client + = Keine Applikationslogik auf dem Client!
35. © 2014 innoQ Deutschland GmbH Unobtrusive JavaScript verwenden
36. © 2014 innoQ Deutschland GmbH <a href="javascript:doSomething();"> Ein Link </a>
37. © 2014 innoQ Deutschland GmbH <a href="/some-resource" class="whatever"> Ein Link </a>
38. © 2014 innoQ Deutschland GmbH $("a.whatever").click(function() { doSomething(this.href); }); + <a href="/some-resource" class="whatever"> Ein Link </a>
39. © 2014 innoQ Deutschland GmbH <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula ...</p> </div> <div id="tabs-2"> <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio ...</p> </div> <div id="tabs-3"> <p>Mauris eleifend est et turpis. Duis id erat ...</p> </div> </div> $("#tabs").tabs(); +
40. © 2014 innoQ Deutschland GmbH
41. © 2014 innoQ Deutschland GmbH SPA vs. ROCA
42. © 2014 innoQ Deutschland GmbH Single Page Apps
43. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 SPA Nachteile SPA MONOLITH
44. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 SPA Nachteile SPA Validierungen? REDUNDANZEN
45. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 SPA Nachteile SPA ? KEINE „NATIVE“ DURCHSUCHBARKEIT
46. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 Vorteile SPA SPA ORCHESTRIERUNG (BESTEHENDER) SERVICES
47. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 Vorteile SPA SPA ORCHESTRIERUNG KOSTET Integrations Backend
48. © 2014 innoQ Deutschland GmbH Nativer Mobile Client Backend 1 Vorteile SPA EIN CLIENT UNTER VIELEN Backend 2 Backend 3 SPA
49. © 2014 innoQ Deutschland GmbH Backend 1 Vorteile SPA OFFLINE- FÄHIGKEIT Backend 2 Backend 3 SPA
50. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend 3 JavaScript Java PHP Scala Vorteile SPA KLARE VERANTWORT- LICHKEITEN SPA
51. © 2014 innoQ Deutschland GmbH ROCA Vertikalen-Architektur
52. © 2014 innoQ Deutschland GmbH Nachteile ROCA HTML, JS, CSS Webframework SQL, Cobol-Integration, ...? VIEL KNOW-HOW
53. © 2014 innoQ Deutschland GmbH Vorteile ROCA MONOLITHEN- VERMEIDUNG
54. © 2014 innoQ Deutschland GmbH Vorteile ROCA KLARE VERANTWORT- LICHKEITEN Darstellung Business-Logik
55. © 2014 innoQ Deutschland GmbH Vorteile ROCA TECHNOLOGIE- UNABHÄNGIGKEIT Play 2 Rails Spring MVC
56. © 2014 innoQ Deutschland GmbH Vielen Dank! Fragen? Anmerkungen? Till Schulte-Coerne, @tillsc till.schulte-coerne@innoq.com innoQ Deutschland GmbH Krischerstr. 100 40789 Monheim am Rhein Germany Phone: +49 2173 3366-0 innoQ Schweiz GmbH Gewerbestr. 11 CH-6330 Cham Switzerland Phone: +41 41 743 0116 www.innoq.com Ohlauer Straße 43 10999 Berlin Germany Phone: +49 2173 3366-0 Robert-Bosch-Straße 7 64293 Darmstadt Germany Phone: +49 2173 3366-0 Radlkoferstraße 2 D-81373 München Germany Telefon +49 (0) 89 741185-270