JSF versus AngularJS

1
JSF versus AngularJS

• client-server 2.0

in samenwerking met HowITsDone
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)

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmlnsh"http//java.sun.com/jsf/html"
  xmlnsui"http//java.sun.com/jsf/facelets" gt  
• lthheadgt
• lttitlegtBoekenlt/titlegt
• lthoutputStylesheet nameboek.css"
  library"css" /gt
• lt/hheadgt  
• lthbodygt  
• ltdiv id"header"gt
• ltuiinsert name"header" gt
• ltuiinclude src"/template/common/commonHe
  ader.xhtml" /gt
• lt/uiinsertgt
• lt/divgt  
• ltdiv id"content"gt
• ltuiinsert name"content" gt
• ltuiinclude src"/template/common/commonCo
  ntent.xhtml" /gt
• lt/uiinsertgt
• lt/divgt  
• ltdiv id"footer"gt

5
JSF voorbeeld (2)

• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmlnsui"http//java.sun.com/jsf/facelets" gt
• ltbodygt
• ALL TAGS ABOVE THIS LINE AND THIS LINE WILL
  BE REMOVED BY JSF
• ltuicompositiongt  
• lth1gtThis is default headerlt/h1gt  
• lt/uicompositiongt
• ALL TAGS BELOW THIS LINE AND THSI LINE WILL
  BE REMOVED BY JSF
• lt/bodygt
• lt/htmlgt

6
JSF voorbeeld (3)

• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmlnsh"http//java.sun.com/jsf/html"
  xmlnsui"http//java.sun.com/jsf/facelets" gt
• ltbodygt
• ltuicomposition template"/template/common/com
  monLayout.xhtml"gt  
• ltuidefine name"content"gt
• lth2gtVoeg boek toelt/h2gt
• lthformgt
• ltdiv class"veld"gt
• lthoutputLabel value"Titel"/gt
• lthinputText value"boekHandler.boek
  .titel"/gt
• lt/divgt
• lthcommandButton action"boekHandler.v
  oegToe valueVoeg toe/gt
• lt/hformgt
• lt/uidefinegt  
• lt/uicompositiongt  
• lt/bodygt
• lt/htmlgt

7
JSF voorbeeld (4)

• _at_Named
• _at_RequestScoped
• public class BoekHandler  
•     _at_Inject
• BoekRepository boekRepository 
•     _at_TransactionAttribute(REQUIRES_NEW)
• _at_RolesAllowed(klant")
•     public void voegToe()
• ...
•  
• public Boek getBoek()
•  

8
JSF voorbeeld (5)

• web.xml
• ltcontext-paramgt
• ltparam-namegtjavax.faces.PROJECT_STAGElt/param-n
  amegt
• lt!-- ltparam-valuegtProductionlt/param-valuegt
  --gt
• ltparam-valuegtDevelopmentlt/param-valuegt
• lt/context-paramgt
• ltcontext-paramgt
• ltparam-namegtjavax.faces.STATE_SAVING_METHODlt/p
  aram-namegt
• ltparam-valuegtserverlt/param-valuegt
• lt/context-paramgt
• ltcontext-paramgt
• ltparam-namegtcom.sun.faces.writeStateAtFormEndlt
  /param-namegt lt!-- workaround bug JSF --gt
• ltparam-valuegtfalselt/param-valuegt
• lt/context-paramgt
• ltservletgt
• ltservlet-namegtFaces Servletlt/servlet-namegt
• ltservlet-classgtjavax.faces.webapp.FacesServlet
  lt/servlet-classgt
• lt/servletgt

9
JSF architectuur

• Pagina (HTTP GET)
• (kies en bewaar view) Facelet -gt 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 -gt 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)

• lt!doctype htmlgt
• lthtml ng-appboekMVCgt
• ltheadgt
• ltmeta charset"utf-8"gt
• lttitlegtBoekenlt/titlegt
• ltlink rel"stylesheet" hrefcss/boek.css"gt
• lt/headgt
• ltbodygt
• ltsection ng-controllerboekController"gt
  
• ltheadergt
• lth1gtVoeg boek toelt/h1gt
• ltform ng-submit"addBoek()"gt
• ltlabelgtTitellt/labelgt
• ltinput placeholderTitel"
  ng-modelboekTitel"gt
• ltinput typesubmit valueVoeg toe/gt
• lt/formgt
• lt/headergt
• lt/sectiongt
• ltscript src"js/libs/angular/angular.js"gtlt/scr
  iptgt

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
• ltservletgt
• ltservlet-namegtspring-jsonlt/servlet-namegt
• ltservlet-classgtorg.springframework.web.servl
  et.DispatcherServletlt/servlet-classgt
• ltinit-paramgt
• ltparam-namegtcontextConfigLocationlt/param
  -namegt
• ltparam-valuegtclasspathspring/spring-jso
  n-servlet.xmllt/param-valuegt
• lt/init-paramgt
• lt/servletgt
• ltservlet-mappinggt
• ltservlet-namegtspring-jsonlt/servlet-namegt
• lturl-patterngt/json/lt/url-patterngt
• lt/servlet-mappinggt

14
AngularJS voorbeeld (4)

• spring-json-servlet.xml
• lt!-- Configures support for _at_Controllers --gt
• ltcontextcomponent-scan base-package"nl.mycompany
  .myapp.web.json" /gt
• ltbean class"org.springframework.web.servlet.view.
  ContentNegotiatingViewResolver"gt
• ltproperty name"order" value"1" /gt
• ltproperty name"mediaTypes"gt
• ltmapgt
• ltentry key"json" value"application/json"
  /gt
• lt/mapgt
• lt/propertygt
• ltproperty name"defaultViews"gt
• ltlistgt
• ltref bean"jsonView" /gt
• lt/listgt
• lt/propertygt
• lt/beangt

15
AngularJS voorbeeld (5)

• _at_Controller
• public class BoekController
• _at_RequestMapping(value "/voegtoe")
• public void voegToe( _at_RequestParam(boekTitel"
  ) String boekTitel)

16
AngularJS architectuur

• http//code.angularjs.org/1.0.5/docs/guide/concept
  s
• 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 boundary
• The Module specified in ng-app (if any) is used
  to configure the injector
• The injector is used to create
  the compileservice as well as rootScope
• The compile service is used to compile the DOM
  and link it with rootScope
• The name interpolates the expression toHello
  World!

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 APIs of
  Spring)
• AngularJS Servlet JSON framework
  SpringMVC(in combi met andere JEE APIs 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
criterium weging JSF 2 AngularJS toelichting
andere devices 3 5 Beide geen native support (IOS/ Android) JS zit dichter op HTML5 mogelijkheden