Polymer / WebComponents
-
Upload
arnaud-kervern -
Category
Internet
-
view
358 -
download
0
Transcript of Polymer / WebComponents
![Page 1: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/1.jpg)
<nuxeo />Taking our UI Framework to the Client
![Page 2: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/2.jpg)
Us, Ourselves and Nuxeo
https://github.com/dmetzler & https://github.com/akervern
Nuxeo | Paris / SF / NYC / Lisbon
60 people ⊃ 35 devs
Platform Dev + Support
https://github.com/nuxeo
![Page 3: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/3.jpg)
Our UI HistoryFrom ZPT to...
![Page 4: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/4.jpg)
Technology
2000 2006 2012
Zope+
ZPT
Java
JSF 1.0+
FreeMarker
JSF 2.0
ReactJS, Polymer….
AngularJS
And...
![Page 5: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/5.jpg)
Nuxeo current UI
![Page 6: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/6.jpg)
Custom UI?
Nah...
AngularJS
Backbone
ReactJS - Polymer
http://nuxeo.github.io/nuxeo-js-client
![Page 7: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/7.jpg)
BACKBONE.JS, Ember, ...
}
![Page 8: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/8.jpg)
AngularJS
![Page 9: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/9.jpg)
Build Yourself User Interface
![Page 10: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/10.jpg)
ReactJS / Polymer
![Page 11: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/11.jpg)
React VS Polymer VS ….
- Set of standards: Web Components (Custom Elements, HTML Templates & imports, Shadow DOM).
- Polymer should just be an implementation: our elements could be used with any framework.I DON’T ENDORSE
:)
- No commitment to a framework
![Page 12: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/12.jpg)
… Web Components ?
![Page 13: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/13.jpg)
Web Components
Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. They are part of the browser, and so they do not need external libraries like jQuery or Dojo.
Source: MDN
![Page 14: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/14.jpg)
Web Components
Custom Elements
<nuxeo-layout type="File" doc="/root" />
![Page 15: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/15.jpg)
Web Components
HTML Templates
<template id="myTemplate">
...
</template>
![Page 16: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/16.jpg)
Web Components
Shadow DOM
let s = document.querySelector('#id').createShadowRoot();
![Page 17: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/17.jpg)
Web Components
HTML Imports
<link rel="import" href="layout.html">
![Page 18: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/18.jpg)
PAF!
![Page 19: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/19.jpg)
What About Polymer?And cool stuff...
![Page 20: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/20.jpg)
Helps building new custom elements
Adds elegance / Removes boilerplate
➔ Element registration
➔ Life cycle callbacks
➔ Observers
➔ Data binding
Polymer Framework
Sugar, not magic!
![Page 21: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/21.jpg)
<dom-module id="my-element"> <link rel="import" href="element-behavior.html"> <template> <style><!-- local CSS --></style> <!-- local DOM --> </template> <script> Polymer({ is: "my-element", // add properties and methods on the element's prototype properties: { // declare properties for the element's public API ... }, observers: [], created: () => {...} ... }); </script></dom-module>
Polymer Element
Shadow D
OM
Template
![Page 23: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/23.jpg)
Quest To Validate Polymer
Why? A First Approach
![Page 24: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/24.jpg)
Polymer
New discovery but where do we start ?
Testing, starting but not breaking UI contributions!
Let’s override the only screen not configurable!
![Page 25: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/25.jpg)
Polymer 0.5
![Page 26: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/26.jpg)
Polymer 0.5
![Page 27: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/27.jpg)
Nuxeo Data Visualization - Search
![Page 28: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/28.jpg)
Salesforce
![Page 29: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/29.jpg)
Time Off
![Page 30: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/30.jpg)
Nuxeo Elements<nuxeo />
![Page 31: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/31.jpg)
Old Fashioned UI
Simple
Configurable
Pluggable
![Page 32: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/32.jpg)
Nuxeo Elements
Simple
Reusable
Composable
![Page 33: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/33.jpg)
Nuxeo Elements
<nuxeo-connection>Nuxeo client singleton
<nuxeo-resource>REST resources
<nuxeo-document>Document resource
![Page 34: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/34.jpg)
Nuxeo Elements
<nuxeo-operation>Call an operation
<nuxeo-page-provider>Paginated results
![Page 35: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/35.jpg)
New Web UI
![Page 36: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/36.jpg)
➔DOM as the framework (+ Polymer)
➔Nuxeo Elements
◆ Data elements
➔Nuxeo UI Elements
◆ UI building blocks
➔Layouts ⇔ Custom elements
◆ Convention based dynamic loading
importHref(`nuxeo-${document.type}-${mode}.html`,...)
Web UI
![Page 37: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/37.jpg)
➔Unit testing
◆ WCT (web-component-tester + wct-local)
➔Integration testing
◆ nuxeo-ftest
◆ Chimp
● BDD with Cucumber.js
● WebdriverIO
Web UI - Testing
![Page 39: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/39.jpg)
QABuild #xxx (again!)
![Page 40: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/40.jpg)
Build Process & QA
We’re a Java shop!
Maven Ant exec:⇒ ⇒ > npm install ⇒ npm ERR! network *
> bower install ⇒ ECONFLICT Unable to find suitable version for *
> grunt/gulp… OK! (once we actually get here)⇒
![Page 41: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/41.jpg)
![Page 42: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/42.jpg)
Release Cycle & Support
“Need reproducible builds in maintenance branches, ASAP!”
LTS yearly releases + 3 years maintenance⇒
FT quarterly releases⇒
“Sure!”
> npm shrinkwrap> bower install …#x.x.x
{ "name": "paper-elements", "version": "1.0.x", ... "dependencies": { "paper-*": "PolymerElements/paper-*#^1.0.0", … }}
![Page 43: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/43.jpg)
Fix It!
Nexus npm registry
Uber bower packages
<bower-fetch artifact="polymerelements:iron-elements:1.0.9" />
<bower-fetch artifact="polymerelements:paper-elements:1.0.7" />
Frontend maven plugin
npm uninstall -g bowernpm install @polymer/*npm shrinkwrap
![Page 44: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/44.jpg)
Nuxeo View
Designer
![Page 45: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/45.jpg)
Polymer Designer 0.5.0
![Page 46: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/46.jpg)
Polymer Designer 1.0
?
![Page 47: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/47.jpg)
Nuxeo View Designer
➔Customization tool
◆ Nuxeo Web UI
◆ Custom application (BYOUI)
➔Scaffolding
➔WYSIWYG & HTML
➔Explorer
➔Catalog
➔Properties
➔Data Binding
![Page 48: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/48.jpg)
➔No Bower, just npm
➔ES6
➔Everything is an element
➔Build and package for deployment
Nuxeo View Designer
![Page 49: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/49.jpg)
Scaffolding
➔ Full customization
◆ We can not plan for everything
◆ People already override templates
◆ Not built with that use case in mind
◆ Not that simple
➔ Runtime metamodel comes at a cost
◆ Need a simpler/shallower component tree
➔ BYOUI + Studio
![Page 51: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/51.jpg)
Q/Ahttps://answers.nuxeo.com
![Page 52: Polymer / WebComponents](https://reader036.fdocuments.us/reader036/viewer/2022062400/5871abf51a28abda6a8b59b3/html5/thumbnails/52.jpg)
<merci/>