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

Tragfähige Frontend-Architekturen

Tragfähige Frontend-Architekturen

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

Till Schulte-Coerne

March 25, 2014
Tweet

Other Decks in Programming

Transcript

  1. © 2014 innoQ Deutschland GmbH Was wo hin? Rest Geschä

    slogik Daten HTML? CSS? JavaScript? PHP? JSF? Play? HTTP? ...? Frontend Backend DB
  2. © 2014 innoQ Deutschland GmbH „Klassischer Schnitt“ Klassisches Enterprise-Modell Fette

    Backend-Services Wenig Frontend-Logik Browser == Notweniges Übel ?
  3. © 2014 innoQ Deutschland GmbH MVC im Browser MVC oder

    MVP MVC, MVP oder MVVM Rich Client
  4. © 2014 innoQ Deutschland GmbH Backend-Services per Ajax (Modell) Client-seitiges

    Routing Templating Data-Binding Applikationslogik (Controller) Mögliche Features
  5. © 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“
  6. © 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
  7. © 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
  8. © 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
  9. © 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/
  10. © 2014 innoQ Deutschland GmbH Single Page Apps Neues Enterprise-Modell?

    Tragfähige Architektur Kein aufgeteiltes Frontend
  11. © 2014 innoQ Deutschland GmbH Single Page Apps Backend 2

    Backend 1 Backend 3 Frontend-App im Browser
  12. © 2014 innoQ Deutschland GmbH Multi Single Page Apps Link

    Backend 2 Backend 1 Backend 3 SPA 1 SPA 2
  13. © 2014 innoQ Deutschland GmbH Sämtliche Applikationslogik auf dem Server

    Keine Duplikation von Logik auf den Client + = Keine Applikationslogik auf dem Client!
  14. © 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(); +
  15. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend

    3 SPA Nachteile SPA Validierungen? REDUNDANZEN
  16. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend

    3 SPA Nachteile SPA ? KEINE „NATIVE“ DURCHSUCHBARKEIT
  17. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend

    3 Vorteile SPA SPA ORCHESTRIERUNG (BESTEHENDER) SERVICES
  18. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend

    3 Vorteile SPA SPA ORCHESTRIERUNG KOSTET Integrations Backend
  19. © 2014 innoQ Deutschland GmbH Nativer Mobile Client Backend 1

    Vorteile SPA EIN CLIENT UNTER VIELEN Backend 2 Backend 3 SPA
  20. © 2014 innoQ Deutschland GmbH Backend 2 Backend 1 Backend

    3 JavaScript Java PHP Scala Vorteile SPA KLARE VERANTWORT- LICHKEITEN SPA
  21. © 2014 innoQ Deutschland GmbH Nachteile ROCA HTML, JS, CSS

    Webframework SQL, Cobol-Integration, ...? VIEL KNOW-HOW
  22. © 2014 innoQ Deutschland GmbH Vielen Dank! Fragen? Anmerkungen? Till

    Schulte-Coerne, @tillsc [email protected] 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