JEE Conf 2015: Less JS!

Less JS!for backend developers

About me

Olga Semeniuk,Java developerhttps://plus.google.com/+OlgaKorichkovskaya

Agenda

● Web components● Polymer ● JSF: PrimeFaces

Goals:● Reducing amount of code● Readability● Composability (being able to create whole

sites and apps by putting different elements together)

Web Componentsset standards from Google

WebComponents.org

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

Web Components: aims

● Simplification

● Reusability

● Robustness

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

Bower

● A package manager for the web● Search for dependencies and install

them as packages ● Created by Twitter ● Open Source

www.bower.io

Bower$ npm install -g bower

www.bower.io

$ bower init

$ bower install --save webcomponentsjs

Web Components

Shadow DOM

HTML Imports

HTML Templates

Custom Elements

Shadow DOM

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

Shadow DOM: benefits

● Encapsulate content by creating document fragments.

● Separate content from presentation thereby eliminating naming conflicts and improving code expression

Shadow DOM: hide presentation Details

Shadow DOM: separating content from presentation

25+,Android 41+ None None None 4.4+ 15+

Browser support

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

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

HTML Imports

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

HTML Imports: benefits

● Decomposition● Combining several resources (JS,

CSS, ..) in one● Reuse

Browser support

36+,Android 41+

None None None 40+ 23+

Custom Elements

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

Custom Elements

Define own element types with custom tag names.

As with any element, element can also be created in JavaScript.

Custom Elements

Define own Polymer element

Custom Elements

Types of elements:● UI elements, which render UI to the

screen.● Non-UI elements, which provide

other utilities.

Custom Elements: benefits

● Reduce the amount of code● Express the function of the code● Encapsulation, inheritance

Browser support

33+,Android

41+

None 22+ 7.1+,iOS Safari 8+

Android Browser 4.4.4+

20+

Web Components

● Increase productivity● Declarative● Composability● Implement APIs per element type

PolymerLibrary 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

Created & supported by Google

Polymer

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

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

● 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

● Browser support● Not production ready, so far● Client side technology - many similar

things to JS - frameworks, such experience is very helpful

Polymer : cons

JSF: PrimeFaces

primefaces.org

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

Who uses PrimeFaces?

PrimeFaces: 100+ UI Components

Themes

Hide ComplexityJS CSS JSON AJAX

Keep Flexibility

JS API CSSOverride

ClientCallbacks

AjaxCallbacks

Templates

JSF 2 Templating with Faceletsui:insert ui:define ui:includeui:composition

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

Custom Elements

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

Pros

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

members

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

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

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 frameworkJava based, but JavaScript, CSS is very useful● A lot of documentation,

books, strong community● Looks more modest, but

has attractive paid theme

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

Polymer demo1. Project skeleton (Spring-Boot, index.html)2. Add Polymer, core-, paper-elements3. Create component4. - add data5. - style6. Style for welcome page7. Add paper-input, paper-button and core-ajax8. Backend service

PrimeFaces demo

1. Generate project skeleton from archetype (https://github.com/bprager/spring-boot-primefaces)

2. Welcome page layout3. Add polymer components4. Add interaction with Spring Been

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

<questions></questions>

Thanks!