Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich

234 Aufrufe

Veröffentlicht am

Dominik Mathmann & Hendrik Jungnitsch, GEDOPLAN GmbH

Expertenkreis Java, 12.5.2016

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich

  1. 1. Dominik Mathmann & Hendrik Jungnitsch GEDOPLAN GmbH Wie viel Client braucht das Web? JSF, Vaadin und AngularJS im Vergleich
  2. 2. Ziele / Inhalt Einführung in die Anwendung / Java EE Backend Vorstellung der Frameworks Java Server Faces (JSF) Vaadin AngularJS Check Up Fazit Wie viel Client braucht das Web? 2
  3. 3. Einführung in die Anwendung
  4. 4. Einführung in die Anwendung / Java EE Backend Datenbasis: Microsoft Northwind Technische Basis: Java EE 7 Fachobjekte (Customer, Order, …): JPA DB-Zugriff (CustomerRepository, …): CDI Services (OrderService, …): EJB mit Role based Security Wie viel Client braucht das Web? 4
  5. 5. Einführung in die Anwendung / Java EE Backend Browser JavaServer Faces Webservice (JAX-RS) Vaadin Services Respositories Präsentationsschic ht / Schnittstellen Geschäftslogik Datenbank JavaEEServer AngularJS (Browser) Client Wie viel Client braucht das Web? 5
  6. 6. Vorstellung der Frameworks
  7. 7. Java Server Faces (JSF) Model-View-Controller-Pattern Im Java-EE-Standard seit 2004 Komponentenmodell für das GUI von Web-Anwendungen Application-Server Renderer Views, xhtml Browser Controller, CDI Beans HTML, JavaScript Services Wie viel Client braucht das Web? 7
  8. 8. JSF - View <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:form> <h:outputLabel value="#{msg.login_name}"/> <h:inputText value="#{authenticateController.loginname}"/> <h:outputLabel value="#{msg.login_password}"/> <h:inputSecret value="#{authenticateController.password}"/> <h:commandButton action="#{authenticateController.login}" value="#{msg.login_submit}" /> </h:form> </html> Wie viel Client braucht das Web? 8
  9. 9. JSF - Controller @Named @RequestScoped public class AuthenticateController { private String loginname; private Sring password; public String login() { ... return "home"; } } Wie viel Client braucht das Web? 9
  10. 10. JSF – Vorgehensweise / Besonderheiten Model-Controller als Bindeglied zu Views CDI Beans Diverse Scopes verfügbar (Request, Session, Flow, View, …) Einbindung des Backends mittels Injektion Serverseitige View Definition Facelets (austauschbar) Bindung an Model-Controller mit EL Multipage Navigation mit zentralem Handler, wenn gewünscht Request / Rendering partiell mit AJAX ( auch SPA Wie viel Client braucht das Web? 10
  11. 11. JSF – Vorgehensweise / Besonderheiten Domänenobjekte können direkt genutzt werden ( DTOs unnötig) Zentrales Error Handling möglich I.d.R. zusätzliche Komponentenbibliotheken nötig Addieren Komplexität Addieren proprietäre Stile, JS, … JS im Browser möglich Nicht speziell unterstützt Wie viel Client braucht das Web? 11
  12. 12. Vaadin Open Source Java Framework für Rich-Internet-Applications Entwickelt von der Firma Vaadin Ltd. Aufbau der Oberflächen auf Serverseite in Java (ähnlich wie Swing) JavaScript-Engine im Browser als Thin-Client Application-Server Services Views, Java Client, Browser JavaScript Engine Widgets Komponenten Daten, Java Beans Synchronisiert durch Framework (JSON) Wie viel Client braucht das Web? 12
  13. 13. Vaadin - UI Wie viel Client braucht das Web? 13 @CDIUI("login") public class LoginUi extends UI { protected void init(VaadinRequest request) { TextField name = new TextField(…); PasswordField password = new PasswordField(…); Button login = new Button(…, e -> {login… }); FormLayout fieldLayout = new FormLayout(name, password, login); Panel loginPanel = new Panel(…, fieldLayout); VerticalLayout page = new VerticalLayout(); page.addComponent(loginPanel); setContent(page); } }
  14. 14. Vaadin – Databinding (optional) Wie viel Client braucht das Web? 14 public class LoginUi extends UI { @PropertyId("user") private TextField loginUser; @PropertyId("password") private PasswordField loginPassword; private LoginBean loginBean = new LoginBean(); protected void init(VaadinRequest request) { BeanFieldGroup<LoginBean> bfg = new BeanFieldGroup<>(LoginBean.class); bfg.buildAndBindMemberFields(this); bfg.setItemDataSource(loginBean); } } public class LoginBean { private String user; private String password; // Getter + Setter }
  15. 15. Vaadin – Vorgehensweise / Besonderheiten UI-Aufbau durch UI-Klassen Aggregation von Widget-Objekten URL-Mapping per Annotation / Servlet Listener-Konzept Service-Einbindung mittels Injektion Direkte Bindung an Domänenobjekte möglich (ohne DTOs) Clientseitiges Rendering auf Basis serverseitiger Präsentationsdaten Widgets werden initial in Browser (Tab) geladen Anschließend nur Aktualisierung von Struktur und Daten Wie viel Client braucht das Web? 15
  16. 16. Vaadin – Vorgehensweise / Besonderheiten SPA im Browser-Tab Navigation zwischen Views mit bookmarkfähigen URLs Error Handling, Converter etc. können zentral registriert werden Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Entwurf zusätzliche GWT-basierter Widgets mittels Skripting und HTML-Templates durch Komponentenbibliotheken (teilweise kommerziell) Wie viel Client braucht das Web? 16
  17. 17. Angular JS Open Source JavaScript-Webframework RIA - Rich Internet Application SPA – Single Page Application entwickelt von Google Browser JAX-RS Services Application-Server Views, html Controller, JavaScript JSON Wie viel Client braucht das Web? 17
  18. 18. AngularJS - View <form class="form-signin"> <input type="text" ng-model="vm.username" placeholder="{{'login.username' | translate}}" /> <input type="password“ ng-model="vm.password" placeholder="{{'login.password' | translate}}" /> <button ng-click="vm.login()"> {{'actions.login' | translate}} </button> </form> Wie viel Client braucht das Web? 18
  19. 19. Angular – Controller, Navigation angular.module('GedoplanWebClients.login', []) .controller("login", function (userService, $translate, $state, $timeout) { var vm = this; vm.login = function () {…}; vm.logout = function () {…}; } $stateProvider .state('login', { url: '/login', templateUrl: 'components/login/login.html', controller: 'login', controllerAs: 'vm' }) Wie viel Client braucht das Web? 19
  20. 20. Angular – Vorgehensweise / Besonderheiten UI-Aufbau durch HTML-Dateien Verwendung von Expressions Aggregation durch „directives“ Service-Einbindung mittels Schnittstelle (z.B. REST) DTOs oder JSON-Mapper notwendig Clientseitiges Rendering auf Basis statischer HTML-Seiten dynamische Manipulation durch Controller-Bindings Wie viel Client braucht das Web? 20
  21. 21. Angular – Vorgehensweise / Besonderheiten SPA Navigation zwischen Views mit bookmarkfähigen URLs Zustandstandslos Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Angular-spezifische Komponenten durch JavaScript-Komponenten Wie viel Client braucht das Web? 21
  22. 22. Check Up
  23. 23. Technologie Mix JSF HTML-ähnliche Templatesprache, Facelets CSS-Kenntnisse in aller Regel notwendig Vaadin programmatische GUI Entwicklung (ähnlich Swing) CSS- und JavaScript-Kenntnisse nur optional und für eigene Komponenten AngularJS tiefe Kenntnisse in JavaScript, CSS, HTML Wie viel Client braucht das Web? 23
  24. 24. Trennung GUI - Logik JSF Templates mit JSF-eigenen Tags Vaadin enge Verbindung durch programmatischen Ansatz Abstraktion durch Vaadin-Designer (kostenpflichtig) AngularJS reine HTML-Templates mit Angular Markup Controller der View konfigurierbar vollständige Projekt-Trennung möglich Wie viel Client braucht das Web? 24
  25. 25. Erweiterbarkeit JSF eigene Composite Components Komponenten-Frameworks (z.B. Richfaces, PrimeFaces) Vaadin Komposition durch Erweiterung der Standardklassen eigene Komponenten bspw. durch JavaScript Extensions AngularJS JavaScript-Komponenten Wie viel Client braucht das Web? 25
  26. 26. Backend Integration JSF / Vaadin Controller im Server Zugriff auf Services durch CDI Injection keine eigene Schnittstelle notwendig AngularJS Zugriff über Schnittstellen Datenaustausch z.B. über JAX-RS im JSON-Format Wie viel Client braucht das Web? 26
  27. 27. Investitionssicherheit JSF Standard Java EE Abwärtskompatibel bis Version 1.0 Ausgenommen: Komponentenframeworks Vaadin / AngularJS proprietär bei großen Versionssprüngen keine stabile API Wie viel Client braucht das Web? 27
  28. 28. Kommunikation JSF Format: HTML / XML User-Interaktionen lösen Requests aus Vaadin Format: JSON (inklusive View-Informationen) User-Interaktionen lösen Requests aus AngularJS Format: JSON (reine Daten) keine Requests bei Validierung und GUI-Logik Wie viel Client braucht das Web? 28
  29. 29. Ressourcen Nutzung JSF Rendering / View-Aufbau: Serverseitig Request-Größe durch HTML-Fragmente Vaadin View-Aufbau: Server, Rendering: Clientseitig Request-Größe durch View-Informationen AngularJS Rendering / „View-Aufbau“: Clientseitig JSON Daten-Requests + eigener HTML-Template-Cache Wie viel Client braucht das Web? 29
  30. 30. Ressourcen Nutzung Wie viel Client braucht das Web? 30
  31. 31. Build-Prozess JSF / Vaadin gleiche Build-Tools wie für das Backend Maven, Gradle AngularJS eigenständige Build-Tools / Scripte größere Anzahl an Möglichkeiten NPM, Bower, Grunt, Gulp, Webpack, Browsify Wie viel Client braucht das Web? 31
  32. 32. Lernkurve JSF Facelets Komponenten-Bibliotheken Vaadin Spezifische API AngularJS JavaScript, HTML, CSS Build Tools Wie viel Client braucht das Web? 32
  33. 33. Testing JSF / Vaadin komplexes Test-Setup Deployment auf Application Server notwendig AngularJS schnelles Setup dank Angular-spezifischem Test Framework einfaches Mocken von HTTP Requests HTTP Server ausreichend Wie viel Client braucht das Web? 33
  34. 34. Fazit Entwickler-Skills technische Anforderungen Flexibilität Wie viel Client braucht das Web? 34
  35. 35. Folien zum Vortrag http://gedoplan-it-consulting.de/expertenkreis-java/ Demo Projekt: https://github.com/GEDOPLAN/webclients-check Noch mehr Themen http://javaeeblog.wordpress.com/ dominik.mathmann@gedoplan.de hendrik.jungnitsch@gedoplan.de Wie viel Client braucht das Web?

×