enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Polymer & ES6 in action
<link rel="import" href="/bower_components/polymer/polymer.html">
<dom-module id="my-element">
<template>
<p>I'm a DOM element. This is my local DOM!</p>
</template>
</dom-module>
<script>
Polymer({
is: "my-element"
});
</script>
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
About me
Lars Gersmann
AngularJS, Node.js, Gulp, ES6, HTML5 / Less.js, Sass / Docker / Bleeding edge browser technologies
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
What is Polymer ?
- a library for creating web components
- exposes declarative syntax
- provides a
web components polyfill API to create custom elements working with or without native web components browser support
- Databinding support
- Template expressions
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
WTF are web components ?
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
a little bit of Polymer history
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Polymer 1.0
-
is a complete rewrite. Everything has changed.
- JS API
- Declaration syntax
- Styling
- Databinding
- Template syntax
- ...
-
Everything.
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Polymer 1.0 features
- much lighter runtime (
polyfill wrapper API)
- Speed (Templating, Databinding)
- workaround different browser behaviours
- proprietary but consistent component styling
- A stable API
-
Attention : Cling together, swing together !
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
What is ES6 ?
-
ES6 is the evolutionary next step of Javascript
- Modules
- Template strings
- new keywords (let, const, ...)
- new classes (Map, Promise, ...)
- Generators/Iterators
- Arrow functions
- syntactic sugar (rest, spread, computed properties)
- many more ...
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Why ES6 + Polymer ?
- shorter/readable/understandable/maintainable source code
- better tooling (Editing, Linting, Packaging)
- =>less error prone
- less network traffic
- faster execution time
- build libraries/apps ready for the future.
-
ES6 just rocks !
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
The dark side
- web component standards not yet fully supported in browsers
- only evergreen browsers supported by web component polyfills
- ES6 is
notonly partially supported today (in both browser and nodejs)
- requires polyfills
- not all browser features are available by polyfills
- ES6 build configuration is quite tricky and complex
- transpiled ES6 might run slower than to optimized ES5 code
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
the bright side
-
You can use web components and ES6 today !!
- Polyfills upgrade browser capabilites
- ES6 to ES5 transpilation tools available
- Use JS Classes available in the future now
- Once upon ES6 & web components are established browser standards ...
Your code base is up to date without touching them !
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Tooling - what we want
- build tool
- es6 to es5 transpiler
- linting
- testing
- watch/autobuild
- packaging
- deployment/compression/serve to browser
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Tooling
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Build Dependencies
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Fluent Build Workflow
- start build whenever a file changes
- Build : test/lint and clean/prepare/compile/build/serve in parallel
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
ES6 to ES5
-
require
-
transform ES6
- to ES5 syntax by using Babel(ify)
- merge transpiled (cjs module) sources into self contained file using Browserify
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Build script
Use ES6 in Gulpfile !
shorter/readable Gulp scripts
// Gulpfile.js
require("babel/register")({ extensions: ['.es6'] });
require('./tasks.es6');
// tasks.es6
...
gulp.task('clean', pfy(`rm -rf ${DIST}`));
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex: Hello world
Basic Polymer control in ES6
- lesscss
- Polymer Usage
- Polymer readonly Template references
- Polymer Scoped Styling
- Polymer
ready handler as ES6 arrow function
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex : Dynamic Hello
Dynamic Polymer control in ES6
- Polymer
properties
- attribute mapping
- default values
- computed properties
- Polymer Templating caveats
- ES6 Template strings
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex : Hello events
Events in Polymer
- imported content using
<content select="">
- declarative vs 'listeners' event registration
- advanced ES6 Templating
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex : Hello ES6 modules
Behaviours in Polymer
- ES6 module syntax / Polymer behaviours
- ES6 keywords
const, export and import
Polymer.dom API usage - Polymer Theming (variables, global styles)
- Polymer property observer
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex : Hello Promise
ES6 Promise usage in Polymer
- ES6 Promise
window.fetch() - the new native $.ajax()- ES6 arrow functions
- Polymer bidirectional databinding + Chrome console debugging (aka
$0.ascending=!$0.ascending)
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Ex : Testing
Testing Polymer
- ESLint
- ES6 Functional testing using Jasmine
- Polymer component testing using Polymer
web-component-tester
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Questions ?
enterJS 2015 - Polymer & ES6 in action (hosted by Lars Gersmann)
Fini
Thank you !!