Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JEE Conf 2015: Less JS!


Published on

Encapsulating functionality: Web Components – set of new standards from Google. It’s time to adopt or maybe look back? It’s seems, we have had something similar, or it is absolutely different? JSF components – Oh, no! Or give a chance? Go forward to a client’s browser or review new features in server? How to start using Polymer under Spring Boot or maybe it will be PrimeFaces. Glance from back-end (and slightly manager) perspectives.

  • Login to see the comments

JEE Conf 2015: Less JS!

  1. 1. Less JS! for backend developers
  2. 2. About me Olga Semeniuk, Java developer
  3. 3. Agenda ● Web components ● Polymer ● JSF: PrimeFaces
  4. 4. Goals: ● Reducing amount of code ● Readability ● Composability (being able to create whole sites and apps by putting different elements together)
  5. 5. Web Components set standards from Google
  6. 6. Goals: ● Build widgets ● …which can be reused reliably ● …and which won’t break pages if the next version of the component changes internal implementation details
  7. 7. Web Components: aims ● Simplification ● Reusability ● Robustness
  8. 8. 2008 - W3C start working on spec ... 2013 - Working draft is published 2014 - Polymer presentation on Google I/O 2015, May - Polymer 0.9 released Timeline
  9. 9. Bower ● A package manager for the web ● Search for dependencies and install them as packages ● Created by Twitter ● Open Source
  10. 10. Bower $ npm install -g bower $ bower init $ bower install --save webcomponentsjs
  11. 11. Web Components Shadow DOM HTML Imports HTML Templates Custom Elements
  12. 12. Shadow DOM Method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document
  13. 13. Shadow DOM: benefits ● Encapsulate content by creating document fragments. ● Separate content from presentation thereby eliminating naming conflicts and improving code expression
  14. 14. Shadow DOM: hide presentation Details
  15. 15. Shadow DOM: separating content from presentation
  16. 16. 25+, Android 41+ None None None 4.4+ 15+ Browser support
  17. 17. Polyfills webcomponents.js is a set of polyfills built on top of the Web Components specifications, enable Web Components in browsers that lack native support It makes it possible for developers to use these standards today
  18. 18. HTML Imports Imports let include and reuse HTML docs in other HTML docs. for html <link rel="import" href=".."> We have <script src>, <link rel="stylesheet">, <img>, <video>, <audio>...
  19. 19. HTML Imports The URL is called an import location. To load content from another domain, the import location needs to be CORS-enabled
  20. 20. HTML Imports: benefits ● Decomposition ● Combining several resources (JS, CSS, ..) in one ● Reuse
  21. 21. Browser support 36+, Android 41+ None None None 40+ 23+
  22. 22. Custom Elements “Everything is an element” philosophy: web app becomes a collection of well- defined, reusable components.
  23. 23. Custom Elements Define own element types with custom tag names. As with any element, element can also be created in JavaScript.
  24. 24. Custom Elements Define own Polymer element
  25. 25. Custom Elements Types of elements: ● UI elements, which render UI to the screen. ● Non-UI elements, which provide other utilities.
  26. 26. Custom Elements: benefits ● Reduce the amount of code ● Express the function of the code ● Encapsulation, inheritance
  27. 27. Browser support 33+, Android 41+ None 22+ 7.1+, iOS Safari 8+ Android Browser 4.4.4+ 20+
  28. 28. Web Components ● Increase productivity ● Declarative ● Composability ● Implement APIs per element type
  29. 29. Polymer Library built with some extra sugar, provides a declarative syntax for defining custom elements, special features including ● two-way data binding, ● declarative event handling, ● declarative inheritance ● property observation
  30. 30. Created & supported by Google Polymer
  31. 31. Polymer elements Core-elements are a set of visual and non-visual utility elements for working with layout, user input, selection, and scaffolding apps. Polymer's paper collection implements material design, highly visual, highly interactive elements that include things like controls, layouts, hero transitions, and scrolling effects.
  32. 32. Material design ● Material is the metaphor ● Bold, graphic, intentional ● Motion provides meaning “Visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.” © Google Principles:
  33. 33. ● Browser integrated: declarative event handlers, mutation observers, query selector ● Interoperability - every framework is compatible with DOM Polymer : pros ● Write script in a scripting language, write styles in a styling language, write markup in a markup language. ● DevTools support
  34. 34. ● Browser support ● Not production ready, so far ● Client side technology - many similar things to JS - frameworks, such experience is very helpful Polymer : cons
  35. 35. JSF: PrimeFaces
  36. 36. PrimeFaces ● Component library for JavaServer Faces (JSF) based applications ● Standard part of the Java EE stack, so you can’t do anything wrong ● The most popular JSF framework
  37. 37. Who uses PrimeFaces?
  38. 38. PrimeFaces: 100+ UI Components
  39. 39. Themes
  40. 40. Hide Complexity JS CSS JSON AJAX Keep Flexibility JS API CSS Override Client Callbacks Ajax Callbacks
  41. 41. Templates JSF 2 Templating with Facelets ui:insert ui:define ui:include ui:composition
  42. 42. PrimeFaces Selectors An alternative, flexible, grouping based approach to reference components to partially process and update. update=”@(form)” update=”@(form.first)” update=”@(.mystyle)” update=”@(.ui-datatable)” update=”@(:input:not(select))” update=”@(:input:disabled))”
  43. 43. Custom Elements PrimeFaces contains API to build custom components. But custom components is often difficult to maintain.
  44. 44. Pros ● Mature and cross browser compatible ● Very large and helpful community ● Easy to understand even for novice team members
  45. 45. and cons ● Tightly coupled: Layout, Design, Logic, Communication with the server ● Need some time to make components look right together ● Easy to make mistakes related to a misunderstanding of the request- response lifecycle
  46. 46. and cons ● Not suitable for heavily consumer oriented website ● Final HTML page is generated from pseudo-html (xhtml) ● and resulting HTML is often atrocious ● Generation take time ● JSF concept is outdated
  47. 47. Polymer vs PrimeFaces ● Future, based on modern web technology ● Client side framework ● Requery strong knowledge in JavaScript and CSS ● Specification is in progress ● Looks modern, easy build single page application ● Past, part of Java EE ● Server side framework Java based, but JavaScript, CSS is very useful ● A lot of documentation, books, strong community ● Looks more modest, but has attractive paid theme
  48. 48. Polymer and PrimeFaces ● Powerful frameworks to simplify writing code for the UI ● Contains set of ready components with styles ● Allow to create own components ● Keep page templating ● Have own search in DOM ● Encapsulate complexity ● Responsive Design ● Extendable
  49. 49. Polymer demo 1. Project skeleton (Spring-Boot, index.html) 2. Add Polymer, core-, paper-elements 3. Create component 4. - add data 5. - style 6. Style for welcome page 7. Add paper-input, paper-button and core-ajax 8. Backend service
  50. 50. PrimeFaces demo 1. Generate project skeleton from archetype (https: // 2. Welcome page layout 3. Add polymer components 4. Add interaction with Spring Been
  51. 51. Links ● Web Components ● Polymer ● Material-design com/design/spec/material-design/ ● PrimeFaces ● SpringBoot/PrimeFaces Maven-Archetype https://github. com/bprager/spring-boot-primefaces ● Slides
  52. 52. <questions></questions>
  53. 53. Thanks!