Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

807 views

Published on

Published in: Technology
  • Be the first to comment

Ed presents JSF 2.2 at a 2013 Gameduell Tech talk

  1. 1. 1 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  2. 2. Markup Changes Push Technologies and Resource Library Contracts Edward Burns @edburns http://slideshare.net/edburns/ Consulting Member of Staff, Oracle
  3. 3. Markup Changes Push Technologies and Resource Library Contracts Edward Burns @edburns http://slideshare.net/edburns/ Consulting Member of Staff, Oracle
  4. 4. My plan for your time investment  HTML5: Why all the fuss?  What we tried to do with HTML5 in JSF 2.2  Non HTML5 Interlude: Resource Library Contracts  Push Technologies: EventSource and WebSocket 4 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  5. 5. Speaker Qualifications – Ed Burns And non-qualifications  Involved with JSF since 2002  Spec lead since 2003 – Most fun part of the job: cleanly integrating other people’s great ideas into JSF (and hopefully improving on the in the process) – Not an expert in applying JSF in practice  Author of four books for McGraw-Hill 5 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  6. 6. Speaker Qualifications – Ed Burns Gaming credentials  Classic Game Fan  Collection – Atari 2600 VCS, Intellivision, NES, Sega Master System, TI-99/4A  Had David Crane autograph my Pitfall! and Pitfall II manuals  Ran into Warren Robinett at SFO airport  Maintain fan site for TI-99/4A Game Tunnels of Doom http://ridingthecrest.com/edburns/classic-gaming/tunnels/ 6 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  7. 7. The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 7 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  8. 8. HTML5 Why all the fuss? More cute logos at http://www.w3.org/html/logo/ 8 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  9. 9. HTML5 Why all the fuss? PAST AND PRESENT SERVER 9 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  10. 10. 10 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  11. 11. Classification A Web App is a Distributed App  Why? – Multiple Computers – Interconnections Between Them – Shared State Among Them  Today's production Web apps are extremely complex distributed applications. 11 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  12. 12. Yeah, So What?  Why does this classification matter? – Because History Matters  To understand the current state of web applications, we must go back to the history of distributed applications, and of the Internet itself. 12 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  13. 13. What Makes a Distributed App  Finding the best allocation of processing tasks to processing nodes – User Interface – Domain Logic – Application Logic – Data Persistence – Communication – Reliability, Security 13 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  14. 14. What Makes a Distributed App  Finding the best allocation of processing tasks to processing nodes – User Interface – Domain Logic – Application Logic – Data Persistence – Communication – Reliability, Security 14 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  15. 15. UI Considerations  The UI is the hardest part to get right  The technology for building the UI is changing very rapidly, and will continue to change for the forseeable future  The technology for the other aspects of application development is less volatile, more mature.  The major software stack and device vendors are competing on the basis of their UI technology, as the gateway to the rest of their stack 15 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  16. 16. 16 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  17. 17. HTML5 What’s in a name?  Remember all the fuss about Ajax in 2006? – Asynchronous – JavaScript – And – XMLHttpRequest 17 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  18. 18. HTML5 What’s in a name?  Remember all the fuss about Ajax in 2006? – Asynchronous – JavaScript – And – XMLHttpRequest  Ajax is a programming technique, not a single technology 18 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  19. 19. HTML4 What’s in a name?  What do people mean when they say HTML4? – IE6 – Not very high performance JavaScript – Lots of browser tricks – Use of native plugins is common  HTML4 is seen as a single technology 19 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  20. 20. HTML5 What’s in a name?  What do people mean when they say HTML5? – “Modern” browsers – A gigantic collection of related technologies  Canvas  Markup  Input controls  Offline storage  Web components  EventSource  Application Cache  DOM  WebSocket  JavaScript  JSON  CSS3 20 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.  Geolocation  XMLHttpRequest Level 2
  21. 21. HTML5 Is it really a big deal?  The rise of Chrome and the end of polyfill  Standards have finally won – How good is your standards body?  W3C, ECMA, IETF – HTML5: Microsoft, Google, Apple, what about Mozilla?  Aside: – Is HTML5 a bloated specification? – Is JavaEE a bloated specification? – What is bloat? A indicator of how old something is. – http://mir.aculo.us/2010/10/19/standards-bloat-and-html5/ 21 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  22. 22. HTML5 Is it really a big deal?  The death of the browser plugin: April 2010 http://www.apple.com/hotnews/thoughts-on-flash/  Where does the tension remain? – Take advantage of the power in the client – Minimize the complexity of distributing and maintaining the software 22 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  23. 23. HTML5 Putting it in context  HTML5 is a marketing term that describes a way of building the UI for a distributed system. – UI processing task resides entirely in the browser 23 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  24. 24. HTML5 Putting it in context  For JSF 2.2, HTML5 means just the markup piece  For JavaEE7 it means WebSocket and JSON 24 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  25. 25. JSF 2.2 HTML 5 Friendly Markup 25 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  26. 26. New to JSF? This is only a small part of JSF  It’s even just a small part of what’s new in JSF 2.2.  If you’re new to JSF, start by looking at JSF 2.0.  That’s the most recent big blockbuster release. 26 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  27. 27. JCP is an open process JSF is an Open Standard 27 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  28. 28. What we tried to do with HTML5 in JSF 2.2 Same thing we do with every other new thing that comes along  Integrate the new thing while staying true to our core strengths.  Two high level areas of integration – DOCTYPE: html5 doctype is the default – Markup changes  “get your hands off my markup”  Page developer vs. Web Developer 28 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  29. 29. HTML5 Friendly Markup DOCTYPE  <facelets-processing> element <faces-config-extension> <facelets-processing> <file-extension>.xhtml</file-extension> <process-as>html5</process-as> </facelets-processing> </faces-config-extension> 29 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  30. 30. HTML5 Friendly Markup DOCTYPE 30 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  31. 31. HTML5 Friendly Markup Just Passing Through Bullet Through Jack, 1964 © Dr Harold Edgerton 31 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  32. 32. HTML5 Friendly Markup The best part of Wicket comes to JSF  This is a JSF page <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:myNS="http://xmlns.jcp.org/jsf”> <form myNS:id="form"> <input name="textField" type="text" myNS:value="#{bean.text1}" /> <input type="submit" myNS:id="submitButton" value="submit" /> <p>submitted text: #{bean.text1}.</p> </form> </html> 32 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  33. 33. HTML5 Friendly Markup Let’s get back to basics  JSF Views are written in a View Declaration Language (VDL).  The standard Facelet VDL is an XML application with two kinds of elements – HTML Markup – JSF Components  HTML Markup is passed through straight to the browser  JSF Components take some action on the server, during the lifecycle 33 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  34. 34. HTML5 Friendly Markup Let the elegance of HTML shine through  Before JSF 2.2 – JSF tags hide complexity of underlying HTML+script+css+images – JSF “Renderer”:  encode: markup to browser  decode: name=value from browser <html>… <my:colorPicker value=“#{colorBean.color2}” /> <my:calendar value=“#{calendarBean.date1}” /> </html>  Context: Missing feature in browser? Write a JSF component. 34 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  35. 35. HTML5 Friendly Markup Let the elegance of HTML shine through  With JSF 2.2 – Pure HTML+script+css+images in the JSF page – JSF Renderer handles decode from browser  Leverage the strength of the JSF lifecycle  Leverage the expressiveness of HTML5 <html>… <input type=“color” jsf:value=“#{colorBean.color2}”/> <input type=“date” jsf:value=“#{calendarBean.date1}” /> </html>  Context: New feature in browser? Use “pass through elements” 35 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  36. 36. HTML5 Friendly Markup Pass Through Attributes  HTML5 users need data-* attributes (and other non-standard attributes)  Two styles – nested attribute – namespaced attribute 36 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  37. 37. HTML5 Friendly Markup Pass Through Attributes: nested attribute <h:outputText value="Simple outputText"> <f:passThroughAttributes value="#{bean.passThroughAttrs}" /> </h:outputText>  #{bean.passThroughAttrs} is assumed to be a map  Each entry in the map is output as a name=“value” pair on the enclosing element. 37 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  38. 38. HTML5 Friendly Markup Pass Through Attributes: nested attribute <h:outputText value="Simple outputText"> <f:passThroughAttribute name=“data-required” value=”true" /> </h:outputText>  Attribute data-required=“true” rendered on markup of enclosing component. 38 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  39. 39. HTML5 Friendly Markup Pass Through Attributes: namespaced attribute <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"> <h:form> <h:inputText id="email" value="#{personPage.selectedPerson.email}" pt:type="email" pt:placeholder="Enter email"> </h:inputText> </h:form> </html> 39 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  40. 40. HTML5 Friendly Markup Pass Through Attributes: nested attribute  Attributes type=“email” placeholder=“Enter email” rendered on markup of enclosing component 40 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  41. 41. HTML5 Friendly Markup Let the elegance of HTML shine through  DEMO 41 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  42. 42. Non-HTML5 Interlude Resource Library Contracts 42 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  43. 43. Resource Library Contracts Facelets Review T e Facelets Gazet e <ui:define name="headline"> Today's News </ui:define> _template.html Sit N avigat on ● Events ● D ocs ● Forums <ui:define name="story"> Facelets is now a part of JSF 2.0... </ui:define> About Contact Sit M ap 43 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. template client greeting.html
  44. 44. Resource Library Contracts Facelets Review T e Facelets Gazet e Insertion points Template File name Sit _template.html N avigat on ● Events ● D ocs ● Forums About Contact Sit M ap Resources css classes, scripts, images 44 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  45. 45. Resource Library Contracts A Contract is Born contractA • Declared Templates • Declared Insertion Points • Declared Resources 45 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  46. 46. Resource Library Contracts Loading Conventions <web-app-root>/contracts contractA contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources 46 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  47. 47. Resource Library Contracts Loading Conventions <web-app-root>/contracts contractA contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources 47 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. JAR files in WEB-INF/lib contractD contractE • Declared Templates • Declared Insertion Points contractF • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources
  48. 48. Resource Library Contracts Loading Conventions <web-app-root>/contracts contractA JAR files in WEB-INF/lib contractD contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources contractE • Declared Templates • Declared Insertion Points contractF • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources Set of available contracts 48 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  49. 49. Resource Library Contracts Loading Conventions <web-app-root>/contracts JAR files in WEB-INF/lib contractA contractD contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources contractE • Declared Templates • Declared Insertion Points contractF • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources Set of available contracts Facelet 1 49 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Facelet 2 Facelet 3
  50. 50. Resource Library Contracts Loading Configuration JAR files in WEB-INF/lib <web-app-root>/contracts contractA contractD contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources contractE • Declared Templates • Declared Insertion Points contractF • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources Set of available contracts faces-config.xml Facelet 1 50 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Facelet 2 Facelet 3
  51. 51. Resource Library Contracts Loading Configuration JAR files in WEB-INF/lib <web-app-root>/contracts contractA contractD contractB • Declared Templates • Declared Insertion Points contractC • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources contractE • Declared Templates • Declared Insertion Points contractF • Declared Templates • Declared Resources • Declared Insertion Points • Declared Templates • Declared Resources • Declared Insertion Points • Declared Resources Set of available contracts faces-config.xml Facelet 1 <f:view contracts="contractA"> ... 51 Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Facelet 2 Facelet 3
  52. 52. HTML5 Push Technologies EventSource and WebSocket 52 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  53. 53. EventSource (aka SSE) vs. WebSocket Keep in touch  What’s the difference between SSE and WebSockets? – WebSocket allows full duplex, SSE does not – WebSocket has an IETF protocol in the middle, SSE does not – Both interact with JavaScript via a W3C Standard API – Both allow the server to update the client – Both run over HTTP(s) proxy really well – EventSource not supported on IE at all (there is a polyfill) 53 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  54. 54. EventSource and JSF Stock Ticker  DEMO 54 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  55. 55. WebSocket and JSF CANVAS matrix  DEMO 55 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  56. 56. Questions? Ed Burns @edburns 56 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  57. 57. The preceding is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle. 57 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.
  58. 58. 58 Copyright © 2013, Oracle and/or its affiliates. All rights reserved.

×