polymer / webcomponents
Post on 08-Jan-2017
358 Views
Preview:
TRANSCRIPT
<nuxeo />Taking our UI Framework to the Client
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
Our UI HistoryFrom ZPT to...
Technology
2000 2006 2012
Zope+
ZPT
Java
JSF 1.0+
FreeMarker
JSF 2.0
ReactJS, Polymer….
AngularJS
And...
Nuxeo current UI
Custom UI?
Nah...
AngularJS
Backbone
ReactJS - Polymer
http://nuxeo.github.io/nuxeo-js-client
BACKBONE.JS, Ember, ...
}
AngularJS
Build Yourself User Interface
ReactJS / Polymer
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
… Web Components ?
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
Web Components
Custom Elements
<nuxeo-layout type="File" doc="/root" />
Web Components
HTML Templates
<template id="myTemplate">
...
</template>
Web Components
Shadow DOM
let s = document.querySelector('#id').createShadowRoot();
Web Components
HTML Imports
<link rel="import" href="layout.html">
PAF!
What About Polymer?And cool stuff...
Helps building new custom elements
Adds elegance / Removes boilerplate
➔ Element registration
➔ Life cycle callbacks
➔ Observers
➔ Data binding
Polymer Framework
Sugar, not magic!
<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
Quest To Validate Polymer
Why? A First Approach
Polymer
New discovery but where do we start ?
Testing, starting but not breaking UI contributions!
Let’s override the only screen not configurable!
Polymer 0.5
Polymer 0.5
Nuxeo Data Visualization - Search
Salesforce
Time Off
Nuxeo Elements<nuxeo />
Old Fashioned UI
Simple
Configurable
Pluggable
Nuxeo Elements
Simple
Reusable
Composable
Nuxeo Elements
<nuxeo-connection>Nuxeo client singleton
<nuxeo-resource>REST resources
<nuxeo-document>Document resource
Nuxeo Elements
<nuxeo-operation>Call an operation
<nuxeo-page-provider>Paginated results
New Web UI
➔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
➔Unit testing
◆ WCT (web-component-tester + wct-local)
➔Integration testing
◆ nuxeo-ftest
◆ Chimp
● BDD with Cucumber.js
● WebdriverIO
Web UI - Testing
QABuild #xxx (again!)
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)⇒
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", … }}
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
Nuxeo View
Designer
Polymer Designer 0.5.0
Polymer Designer 1.0
?
Nuxeo View Designer
➔Customization tool
◆ Nuxeo Web UI
◆ Custom application (BYOUI)
➔Scaffolding
➔WYSIWYG & HTML
➔Explorer
➔Catalog
➔Properties
➔Data Binding
➔No Bower, just npm
➔ES6
➔Everything is an element
➔Build and package for deployment
Nuxeo View Designer
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
Q/Ahttps://answers.nuxeo.com
<merci/>
top related