Upload
dewy
View
64
Download
1
Tags:
Embed Size (px)
Citation preview
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!