In samenwerking met HowITsDone JSF versus AngularJS client-server 2.0.

Presentatie over: "In samenwerking met HowITsDone JSF versus AngularJS client-server 2.0."— Transcript van de presentatie:

1 in samenwerking met HowITsDone JSF versus AngularJS client-server 2.0

2 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

3 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

4 JSF voorbeeld (1) Boeken

5 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

6 JSF voorbeeld (3) Voeg boek toe

7 JSF voorbeeld (4) @Named @RequestScoped public class BoekHandler { @Inject BoekRepository boekRepository; @TransactionAttribute(REQUIRES_NEW) @RolesAllowed(“klant") public void voegToe() {... } public Boek getBoek() { … } }

8 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

9 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

10 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?)

11 AngularJS voorbeeld (1) Boeken Voeg boek toe Titel

12 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 }

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

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

15 AngularJS voorbeeld (5) @Controller public class BoekController { @RequestMapping(value = "/voegtoe") public void voegToe( @RequestParam(“boekTitel") String boekTitel) { … }

16 AngularJS architectuur http://code.angularjs.org/1.0.5/doc 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

17 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)

18 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)

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