Downloaded 19 times
![Polymer: data-binding
<!-- Create an element by composition -->
<dom-module id="input-echo">
<template>
<!-- Bidirectional data binding -->
<paper-input label="Type your name" value="{{name}}"></paper-input>
<!-- One way data binding with function execution -->
<div>Your name is: [[_format(name)]]</div>
<!-- Native elements do not have two-way binding support built in,
use Polymer's event-observer syntax instead -->
<label>Type your name: </label>
<input type="text" value="{{name::keyup}}">
</template>
</dom-module>
<!-- Register the element -->
<script>
Polymer({
is: "input-echo",
_format: function(name) {
return name.toUpperCase();
}
});
</script>](https://image.slidesharecdn.com/voxxeddaysviennapolymer-160301124946/75/Intro-to-Web-Components-Polymer-Vaadin-Elements-22-2048.jpg)
![<input-echo value="Manolo">
Polymer: bound directions
<input-echo value="{{name}}">
<div>Your name is: [[_format
(name)]]</div>
<paper-input value="{{name}}">
<input value="{{name::keyup}}">](https://image.slidesharecdn.com/voxxeddaysviennapolymer-160301124946/75/Intro-to-Web-Components-Polymer-Vaadin-Elements-23-2048.jpg)
![Polymer: events, observers, notifiers<dom-module id="input-echo">
<template>
...
<div on-tap="_onTap">Your name is: [[_format(name)]]</div>
...
</template>
</dom-module>
<script>
Polymer({
is: "input-echo",
...
properties: {
foo: {
type: Object,
notify: true,
reflectToAttribute: true,
value: {}
}
},
observers: [
'_onChange(foo.*)'
],
_onTap: function(e) {
this.set('foo.bar', this.name);
},
_onChange: function(path, object) {
this.fire('foo-changed-event', this.foo);
}
});
</script>](https://image.slidesharecdn.com/voxxeddaysviennapolymer-160301124946/75/Intro-to-Web-Components-Polymer-Vaadin-Elements-24-2048.jpg)
Uploaded byManuel Carrasco Moñino
Intro to Web Components, Polymer & Vaadin Elements
The document provides an introduction to web components, Polymer, and Vaadin elements, highlighting their motivations, functionalities, and applications. It explains the benefits of web components, the role of Polymer as a library for creating UI components, and how to build applications using these technologies. Additionally, the document includes a demo of a full-stack application and discusses progressive web applications, which enhance responsiveness and offline functionality.
More Related Content
Similar to Intro to Web Components, Polymer & Vaadin Elements
Intro to Web Components, Polymer & Vaadin Elements
- 1. Intro to WebComponents, Polymer & Vaadin Elements Manuel Carrasco Moñino Senior GWT Expert at Vaadin
- 2. 1. Motivations 2. Whatare web components. 3. What’s polymer. 4. Introducing Polymer-Elements & Vaadin-Elements 5. Demo: full-stack app using Polymer 6. Progresive apps Agenda
- 3.
- 4. Motivations Former Ui Development -Verbose code - Difficult to share - No mobile in mind Web Components - Standard specs. - Prod. ready collections - Active Development - Google - Vaadin
- 5. What are WebComponents? 1. It’s a new TAG for your browser ‘<my-ui- component>’ 2. Based on standard specifications. 3. Advantages: a. Goodbye to browser plugins (WC + HTML5) b. Isolated from other elemens in DOM c. Easy to share (bower) d. Easy to integrate
- 6. Problem -> DOMunique tree body { background-color: white; }
- 7. Solution -> Shadow/ShadyDOM body { background-color: white; }
- 8.
- 9.
- 10.
- 11. Web Components State ofthe art
- 12.
- 13.
- 14.
- 15.
- 16. Polymer - Polymer isa library that allows us to use Web Components, even though some APIs for are missing in some browsers. - Polymer makes easier and faster create anything from a button to a complete application across desktop, mobile, and beyond. - Polymer platform enables sharing UI components between developers. - JS: estable API - polyfills: lightweight shim for Web Components. - Documentation system - Production ready components
- 17. Polymer Elements A catalogof ready to use elements built with polymer: - Iron Elements (layout, ajax, icons …) - Paper Elements (Material Design) - Neon Elements (Animations) - Gold Elements (Ecomerce) - Platinum Elements (offline, push …) - Google Elements (google apis) - Vaadin Core Elements (enterprise components) - Vaadin Chart Elements (charts) - And much more ...
- 18. 1. It’s NOTa framework but a small library a. polymer-micro.html (16K - 7K) b. polymer-mini.html (54K - 11K) c. polymer.html (122K - 29K) 2. Polymer Elements are not part of the library, but developed by the team and contributions. 3. Neither the optional Polyfill is part of it. a. webcomponents-lite.min.js (40K - 12K) b. webcomponents.min.js (118K - 33K) Polymer is the library
- 19. 1. HTML isthe Component Model 2. … and a powerful Declarative Language 3. Data flow is handled with a. attributes <input value=”foo”> b. properties myInput.value = “foo” c. events myInput.addEventListener(‘foo’, bar) 4. Web Components is for missing HTML pieces. 5. Polymer facilitates creating and manipulating them. DOM is the framework
- 20. 1. Composition 2. Encapsulation 3.Mediator pattern An object that encapsulates how a set of objects interact Build Apps with elements
- 21.
- 22. Polymer: data-binding <!-- Createan element by composition --> <dom-module id="input-echo"> <template> <!-- Bidirectional data binding --> <paper-input label="Type your name" value="{{name}}"></paper-input> <!-- One way data binding with function execution --> <div>Your name is: [[_format(name)]]</div> <!-- Native elements do not have two-way binding support built in, use Polymer's event-observer syntax instead --> <label>Type your name: </label> <input type="text" value="{{name::keyup}}"> </template> </dom-module> <!-- Register the element --> <script> Polymer({ is: "input-echo", _format: function(name) { return name.toUpperCase(); } }); </script>
- 23. <input-echo value="Manolo"> Polymer: bounddirections <input-echo value="{{name}}"> <div>Your name is: [[_format (name)]]</div> <paper-input value="{{name}}"> <input value="{{name::keyup}}">
- 24. Polymer: events, observers,notifiers<dom-module id="input-echo"> <template> ... <div on-tap="_onTap">Your name is: [[_format(name)]]</div> ... </template> </dom-module> <script> Polymer({ is: "input-echo", ... properties: { foo: { type: Object, notify: true, reflectToAttribute: true, value: {} } }, observers: [ '_onChange(foo.*)' ], _onTap: function(e) { this.set('foo.bar', this.name); }, _onChange: function(path, object) { this.fire('foo-changed-event', this.foo); } }); </script>
- 25. let’s build a ProgressiveFull-stack Application
- 26. Architecture Elements Polymer PouchDB CouchDB - Responsive -Material Design - Online/Offline - Real Time
- 27. Components - PolymerElements &VaadinCoreElements - Polymer platform - CouchDB is a database that completely embraces the web. - Store your data with JSON documents - Access your data via HTTP - Serve pages directly - PouchDB is database inspired by Apache CouchDB that is designed to run well within the browser.
- 28. - atom: justanother text editor. It’s built on top of Chrome by github. - node.js: a JS runtime based on V8 the Chrome JS engine - npm: the node package manager - gulp: a make like for javascript projects - bower: a dependency manager for web projects - git: npm and bower packages and stored in git repos. Usual Tools for Polymer
- 29. Demo Checkout the Code(each commit is one step) http://manolo.github.io/polymer-robots Run the live App https://github.com/manolo/polymer-robots Tip: open it in Chrome-Android and from the menu select ‘Add to the home Screen’
- 30.
- 31.
- 32. - A webapplication that has a responsive layout, works offline and can be installed on the home screen of a device. - It is different from a ‘classic hybrid app’, which is an HTML5 application contained in a native wrapper installed from an app store. - Polymer is perfect for modularize and hidde stuff inside web components (web-workers, localstorage, database access, offline cache …) - Try to Progressive Apps
- 33. Progressive Apps 1. Responsive:to fit any form factor 2. Connectivity independent: Progressively-enhanced to let them work offline 3. Fresh: Transparently always up-to-date 4. Discoverable: Are identifiable as “applications” thanks to W3C Manifests 5. Installable: to the home screen through browser- provided prompts 6. Linkable: zero-install, and easy to share.
- 34. Additional tools api-generator: It’sa code generator to produce GWT wrappers & Vaadin Connectors, for JS components. a. Scrapes source documentation b. Right now polymer, but considering other sources. c. Uses standard JS libraries to parse components. - node.js, npm, bower, gulp - hydrolysis parser + lodash.template JsInterop: GWT Export java code and use JS without boiler-plate.
- 35.