This document discusses reducing JavaScript usage for backend developers by exploring web components, Polymer, and JavaServer Faces (JSF). It provides an overview of web components goals and standards, introduces Polymer and how it builds on web components, discusses JSF and the PrimeFaces component library, and demos how to use Polymer and PrimeFaces. The goals of web components, Polymer, and PrimeFaces are to reduce code, improve readability and reusability through composable elements. Browser support for the various web component specifications is outlined.

1. Less JS!
for backend developers

2. About me
Olga Semeniuk,
Java developer
https://plus.google.com/+OlgaKorichkovskaya

3. Agenda
● Web components
● Polymer
● JSF: PrimeFaces

5. Goals:
● Reducing amount of code
● Readability
● Composability (being able to create whole
sites and apps by putting different elements
together)

6. Web Components
set standards from Google
WebComponents.org

7. 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

8. Web Components: aims
● Simplification
● Reusability
● Robustness

9. 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

10. Bower
● A package manager for the web
● Search for dependencies and install
them as packages
● Created by Twitter
● Open Source
www.bower.io

11. Bower
$ npm install -g bower
www.bower.io
$ bower init
$ bower install --save webcomponentsjs

12. Web Components
Shadow DOM
HTML Imports
HTML Templates
Custom Elements

13. Shadow DOM
Method of combining multiple DOM trees
into one hierarchy and
how these trees interact with each other
within a document

14. Shadow DOM: benefits
● Encapsulate content by creating
document fragments.
● Separate content from presentation
thereby eliminating naming conflicts and
improving code expression

15. Shadow DOM:
hide presentation Details

16. Shadow DOM:
separating content from presentation

17. 25+,
Android 41+ None None None 4.4+ 15+
Browser support

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

19. 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>...

20. HTML Imports
The URL is called an import location. To load content from
another domain, the import location needs to be CORS-enabled

21. HTML Imports: benefits
● Decomposition
● Combining several resources (JS,
CSS, ..) in one
● Reuse

22. Browser support
36+,
Android 41+
None None None 40+ 23+

23. Custom Elements
“Everything is an element” philosophy:
web app becomes a collection of well-
defined, reusable components.

24. Custom Elements
Define own element types with custom tag
names.
As with any element, element can also be
created in JavaScript.

25. Custom Elements
Define own Polymer element

26. Custom Elements
Types of elements:
● UI elements, which render UI to the
screen.
● Non-UI elements, which provide
other utilities.

27. Custom Elements: benefits
● Reduce the amount of code
● Express the function of the code
● Encapsulation, inheritance

28. Browser support
33+,
Android
41+
None 22+ 7.1+,
iOS Safari 8+
Android
Browser
4.4.4+
20+

29. Web Components
● Increase productivity
● Declarative
● Composability
● Implement APIs per element type

30. 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

31. Created & supported by Google
Polymer

32. 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.

35. 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:
http://google.com/design/spec/material-design

36. ● 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

37. ● Browser support
● Not production ready, so far
● Client side technology - many similar
things to JS - frameworks, such
experience is very helpful
Polymer : cons

38. JSF: PrimeFaces
primefaces.org

39. 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

40. Who uses PrimeFaces?

41. PrimeFaces: 100+ UI Components

42. Themes

43. Hide Complexity
JS CSS JSON AJAX
Keep Flexibility
JS API CSS
Override
Client
Callbacks
Ajax
Callbacks

44. Templates
JSF 2 Templating with Facelets
ui:insert
ui:define
ui:include
ui:composition

45. 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))”

46. Custom Elements
PrimeFaces contains API to build custom
components.
But custom components is often difficult to
maintain.

47. Pros
● Mature and cross browser compatible
● Very large and helpful community
● Easy to understand even for novice team
members

48. 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

49. 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

50. 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

51. 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

52. 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

53. PrimeFaces demo
1. Generate project skeleton from archetype (https:
//github.com/bprager/spring-boot-primefaces)
2. Welcome page layout
3. Add polymer components
4. Add interaction with Spring Been

54. Links
● Web Components WebComponents.org
● Polymer polymer-project.org
● Material-design http://www.google.
com/design/spec/material-design/
● PrimeFaces primefaces.org
● SpringBoot/PrimeFaces Maven-Archetype https://github.
com/bprager/spring-boot-primefaces
● Slides

55. <questions></questions>

56. Thanks!