Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
<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 peo...
Our UI History
From 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).
- Polym...
… Web Components ?
Web Components
Web Components consists of several separate
technologies. You can think of Web Components as
reusable user ...
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
➔Observ...
<dom-module id="my-element">
<link rel="import" href="element-behavior.html">
<template>
<style><!-- local CSS --></style>...
https://elements.polymer-project.org/
Polymer Elements
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...
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 ⇔ Custo...
➔Unit testing
◆ WCT (web-component-tester + wct-local)
➔Integration testing
◆ nuxeo-ftest
◆ Chimp
● BDD with Cucumber.js
●...
http://nuxeo.github.io/nuxeo-web-ui/
Nuxeo-Web-UI Demo
QA
Build #xxx (again!)
Build Process & QA
We’re a Java shop!
Maven ⇒ Ant ⇒ exec:
> npm install ⇒ npm ERR! network *
> bower install ⇒ ECONFLICT U...
Release Cycle & Support
“Need reproducible builds in maintenance branches, ASAP!”
LTS ⇒ yearly releases + 3 years maintena...
Fix It!
Nexus npm registry
Uber bower packages
<bower-fetch artifact="polymerelements:iron-
elements:1.0.9" />
<bower-fetc...
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...
➔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 tha...
http://nuxeo-designer.netlify.com/
Nuxeo Designer Demo
Q/A
https://answers.nuxeo.co
m
<merci/>
Polymer / WebComponents
Upcoming SlideShare
Loading in …5
×

Polymer / WebComponents

839 views

Published on

Presentation done on how we are moving forward with Polymer and WebComponents; given to the #7 Paris Meetup WebComponents with @dmetzler.

Published in: Internet
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ♥♥♥ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Polymer / WebComponents

  1. 1. <nuxeo /> Taking our UI Framework to the Client
  2. 2. 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
  3. 3. Our UI History From ZPT to...
  4. 4. Technology 2000 2006 2012 Zope + ZPT Java JSF 1.0 + FreeMarker JSF 2.0 ReactJS, Polymer…. AngularJS And...
  5. 5. Nuxeo current UI
  6. 6. Custom UI? Nah... AngularJS Backbone ReactJS - Polymer http://nuxeo.github.io/nuxeo-js-client
  7. 7. BACKBONE.JS, Ember, ... }
  8. 8. AngularJS
  9. 9. Build Yourself User Interface
  10. 10. ReactJS / Polymer
  11. 11. 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. - No commitment to a framework
  12. 12. … Web Components ?
  13. 13. 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
  14. 14. Web Components Custom Elements <nuxeo-layout type="File" doc="/root" />
  15. 15. Web Components HTML Templates <template id="myTemplate"> ... </template>
  16. 16. Web Components Shadow DOM let s = document.querySelector('#id').createShadowRoot();
  17. 17. Web Components HTML Imports <link rel="import" href="layout.html">
  18. 18. PAF!
  19. 19. What About Polymer? And cool stuff...
  20. 20. Helps building new custom elements Adds elegance / Removes boilerplate ➔Element registration ➔Life cycle callbacks ➔Observers Polymer Framework Sugar, not magic!
  21. 21. <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 ShadowDOM Template
  22. 22. https://elements.polymer-project.org/ Polymer Elements
  23. 23. Quest To Validate Polymer Why? A First Approach
  24. 24. Polymer New discovery but where do we start ? Testing, starting but not breaking UI contributions! Let’s override the only screen not configurable!
  25. 25. Polymer 0.5
  26. 26. Polymer 0.5
  27. 27. Nuxeo Data Visualization - Search
  28. 28. Salesforce
  29. 29. Time Off
  30. 30. Nuxeo Elements <nuxeo />
  31. 31. Old Fashioned UI Simple Configurable Pluggable
  32. 32. Nuxeo Elements Simple Reusable Composable
  33. 33. Nuxeo Elements <nuxeo-connection> Nuxeo client singleton <nuxeo-resource> REST resources <nuxeo-document> Document resource
  34. 34. Nuxeo Elements <nuxeo-operation> Call an operation <nuxeo-page-provider> Paginated results
  35. 35. New Web UI
  36. 36. ➔DOM as the framework (+ Polymer) ➔Nuxeo Elements ◆ Data elements ➔Nuxeo UI Elements ◆ UI building blocks ➔Layouts ⇔ Custom elements ◆ Convention based dynamic loading Web UI
  37. 37. ➔Unit testing ◆ WCT (web-component-tester + wct-local) ➔Integration testing ◆ nuxeo-ftest ◆ Chimp ● BDD with Cucumber.js ● WebdriverIO Web UI - Testing
  38. 38. http://nuxeo.github.io/nuxeo-web-ui/ Nuxeo-Web-UI Demo
  39. 39. QA Build #xxx (again!)
  40. 40. 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)
  41. 41. 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", … } }
  42. 42. 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 bower npm install @polymer/* npm shrinkwrap
  43. 43. Nuxeo View Designer
  44. 44. Polymer Designer 0.5.0
  45. 45. Polymer Designer 1.0 ?
  46. 46. Nuxeo View Designer ➔Customization tool ◆ Nuxeo Web UI ◆ Custom application (BYOUI) ➔Scaffolding ➔WYSIWYG & HTML ➔Explorer ➔Catalog
  47. 47. ➔No Bower, just npm ➔ES6 ➔Everything is an element ➔Build and package for deployment Nuxeo View Designer
  48. 48. 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
  49. 49. http://nuxeo-designer.netlify.com/ Nuxeo Designer Demo
  50. 50. Q/A https://answers.nuxeo.co m
  51. 51. <merci/>

×