in samenwerking met HowITsDone JSF versus AngularJS client-server 2.0

Geschiedenis JSF Java Servlet specificatie: HTML in code JSP: HTML template Struts: MVC framework JSF: verbeterde Struts Facelets: verbeterde JSP JSF 2.0: facelets de default

Geschiedenis gebruik JavaScript Browser HTML redelijk browser onafhankelijk Browser JavaScript niet echt browser onafhankelijk JavaScript DOM API browser onafhankelijk JQuery 2006 Desktop like GUI Dojo 2004, Backbase, … MVC/ MVVM/ MVP Backbone, Knockout, GWT, AngularJS, … RESTful JSON client-server protocol

JSF voorbeeld (1) Boeken

JSF voorbeeld (2) ALL TAGS ABOVE THIS LINE AND THIS LINE WILL BE REMOVED BY JSF This is default header ALL TAGS BELOW THIS LINE AND THSI LINE WILL BE REMOVED BY JSF

JSF voorbeeld (3) Voeg boek toe

JSF public class BoekHandler public void voegToe() {... } public Boek getBoek() { … } }

JSF voorbeeld (5) web.xml javax.faces.PROJECT_STAGE Production --> Development javax.faces.STATE_SAVING_METHOD server com.sun.faces.writeStateAtFormEnd false Faces Servlet javax.faces.webapp.FacesServlet Faces Servlet *.xhtml 30

JSF architectuur Pagina (HTTP GET) (kies en bewaar view) Facelet -> HTML Submit (HTTP POST) Bouw view op (uit serialized string) Verwerk submitted data Valideer submitted data Copieer submitted data naar Backing Bean Call action methode in Backing Bean (kies en bewaar volgende view) Facelet -> HTML

AngularJS Waarom AngularJS? Open Source Google (kennis, kunde, commitment) Samenwerking met W3C Volledig en duidelijk Single page (AJAX) + deep linking Rich widgets Simpele concepten en code Goede documentatie Stabiel Populair Zelf HTML tags maken (is dit wel handig?)

AngularJS voorbeeld (1) Boeken Voeg boek toe Titel

AngularJS voorbeeld (2) // boek.js var boekMVC = angular.module(‘boekMVC', []); boekMVC.controller(‘boekController', function boekController( $scope ) { $scope.boekTitel = ""; $scope.voegToe = function() { … HTTP POST $scope als json op url /json/voegtoe }

AngularJS voorbeeld (3) web.xml spring-json org.springframework.web.servlet.DispatcherServlet contextConfigLocation classpath:spring/spring-json-servlet.xml spring-json /json/*

AngularJS voorbeeld (4) spring-json-servlet.xml

AngularJS voorbeeld public class BoekController = "/voegtoe") public void String boekTitel) { … }

AngularJS architectuur s/guide/concepts The browser loads the HTML and parses it into a DOM The browser loads angular.js script Angular waits for DOMContentLoaded event Angular looks for ng-app directive, which designates the application boundaryng-appdirective The Module specified in ng-app (if any) is used to configure the $injectorModuleng-app$injector The $injector is used to create the $compileservice as well as $rootScope$injector$compile$rootScope The $compile service is used to compile the DOM and link it with $rootScope$compile$rootScope The {{name}} interpolates the expression toHello World!interpolates

Vergelijking JSF - AngularJS Runtime architectuur JSF: UI verdeeld over client en server AngularJS: client-server 2.0 zero install (initieel komt UI van server) UI draait op client device; data interface met server Ontwikkelarchitectuur UI JSF UI: heterogeen ‘server-talen’: Java, HTML, Facelet browser-talen: HTML, JavaScript, CSS AngularJS UI: eenduidig alleen browser talen: HTML5, JavaScript, CSS, Angular API Ontwikkelarchitectuur server-side JSF: JSF (in combi met andere JEE API’s of Spring) AngularJS: Servlet + JSON framework + SpringMVC (in combi met andere JEE API’s of Spring)

Keuze criteria Andere devices Browser independent Performance client Performance server (JSF: view save/restore; HTML gen.) Schaalbaar (JSF: session state: sticky session LB) Cloud (aantal opties; client / server ontkoppeling) Bestaande kennis en kunde ontwikkelteam Ease of development, learning curve Build-Test-Package-Deploy (hotfix) Continuus Integration & Delivery Onderhoudbaarheid (SMART maken)

Nogmaals vergelijking criteriumwegingJSF 2 Angular JS toelichting andere devices35Beide geen native support (IOS/ Android) JS zit dichter op HTML5 mogelijkheden