<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

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

http://nuxeo.github.io/nuxeo-web-ui/

Nuxeo-Web-UI Demo

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

http://nuxeo-designer.netlify.com/

Nuxeo Designer Demo

Q/Ahttps://answers.nuxeo.com

<merci/>