<puzzle-maker background=”grade” from=”#333” to=”#aaa”>
<puzzle-maker background=”metal” col1=”#333” col2=”#aaa”>
<music-player type=”mobile-a” platforms=”ios, android”>
<music-player type=”mobile-b” platforms=”ios, android”>
Introduction to Web Components
and Polymer
@gursesl
The Landscape
Web Components
Web Components consist of four pieces that let web application developers
define widgets with a level of vi...
Templates
Decorators
Shadow DOM
Custom Elements
customelements.io
Polymer
Polymer is a library for building modular web
applications. It is built on new web platform primitives
called Web ...
But, The Question Is...
Is Polymer
production-ready?
No.
Browser
Support
Polymer Designer
Material design is a unified
system of visual, motion,
and interaction design that
adapts across different
devices. Materi...
Lifecycle Methods
Data Binding
Polymer supports two-way data binding. Data binding extends HTML
and the DOM APIs to support a sensible separ...
Polyfills
Custom JavaScript methods inside webcomponents.js designed to make
non-native browsers (Everything other than Ch...
Polyfill Functionality
● Web Components
○ Custom Elements . Define new elements in HTML
○ HTML Imports. Load element defin...
Scoped Styles
<div>
<style scoped>
h1 {
background-color: #333;
color: #FFF;
}
</style>
<h1 id="foo">Scoped</h1>
</div>
<h...
Routing
By combining data-binding, core-scaffold, core-
pages/core-animated-pages, and <flatiron-director>
(an element for...
The Stack
● Polymer (WC) is not a full stack application framework
● It needs a back end
○ Rails/MVC/Sinatra
○ ...Or Java,...
Build & Packaging
● Build
○ Gulp
○ Grunt
● Packaging
○ Bower
○ Wcpack
Polymer vs. Angular
● Open standards vs. front-end framework
● SPA vs. MPA
● Self-contained, reusable elements are more po...
Demo
References
● Web Components Explained
● Browser Compatibility Matrix
● Material Design Specification
● Polymer Designer
● ...
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
Levent-Gurses' Introduction to Web Components & Polymer
of 38

Levent-Gurses' Introduction to Web Components & Polymer

This is in a developer-focused session on developing iOS apps with Web Components and Google Polymer. Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Published on: Mar 4, 2016
Published in: Internet      
Source: www.slideshare.net


Transcripts - Levent-Gurses' Introduction to Web Components & Polymer

  • 1. <puzzle-maker background=”grade” from=”#333” to=”#aaa”>
  • 2. <puzzle-maker background=”metal” col1=”#333” col2=”#aaa”>
  • 3. <music-player type=”mobile-a” platforms=”ios, android”>
  • 4. <music-player type=”mobile-b” platforms=”ios, android”>
  • 5. Introduction to Web Components and Polymer @gursesl
  • 6. The Landscape
  • 7. Web Components Web Components consist of four pieces that let web application developers define widgets with a level of visual richness not possible with CSS alone, and ease of composition and reuse not possible with script libraries today. ● Templates - blocks of markup that are inert but can be activated for use later ● Decorators - which apply templates to let CSS affect visual and behavioral changes ● Shadow DOM which defines how presentation and behavior of decorators and custom elements fit together in the DOM tree ● Custom elements - let developers define their own reusable custom elements Decorators and custom elements are called components.
  • 8. Templates
  • 9. Decorators
  • 10. Shadow DOM
  • 11. Custom Elements
  • 12. customelements.io
  • 13. Polymer Polymer is a library for building modular web applications. It is built on new web platform primitives called Web Components. Web Components are easier to develop, compose, connect and use on the web. The result is an increase in developer productivity.
  • 14. But, The Question Is... Is Polymer production-ready? No.
  • 15. Browser Support
  • 16. Polymer Designer
  • 17. Material design is a unified system of visual, motion, and interaction design that adapts across different devices. Material design is inspired by tactile materials, such as paper and ink. Polymer’s paper elements collection implements material design for the web. The Polymer core elements collection provides a number of unthemed elements that you can use to achieve material design app layouts, transitions, and scrolling effects.
  • 18. Lifecycle Methods
  • 19. Data Binding Polymer supports two-way data binding. Data binding extends HTML and the DOM APIs to support a sensible separation between the UI (DOM) of an application and its underlying data (model). Updates to the model are reflected in the DOM and user input into the DOM is immediately assigned to the model.
  • 20. Polyfills Custom JavaScript methods inside webcomponents.js designed to make non-native browsers (Everything other than Chrome) support web components. webcomponents.js is a set of polyfills built on top of the web components specifications. It makes it possible for developers to use these standards today across all modern browsers.
  • 21. Polyfill Functionality ● Web Components ○ Custom Elements . Define new elements in HTML ○ HTML Imports. Load element definitions and other resources declaratively ○ Shadow DOM. Encapsulate DOM subtrees and the associated CSS ● DOM ○ WeakMap. Shim for ES6 WeakMap type ○ Mutation Observers. Efficiently watch for changes in the DOM
  • 22. Scoped Styles <div> <style scoped> h1 { background-color: #333; color: #FFF; } </style> <h1 id="foo">Scoped</h1> </div> <h1 id="bar">Not Scoped</h1> Ability to scope styles allows for full encapsulation, especially when used in templates and decorators.
  • 23. Routing By combining data-binding, core-scaffold, core- pages/core-animated-pages, and <flatiron-director> (an element for routing), it is possible to create a responsive SPA with deep linking.
  • 24. The Stack ● Polymer (WC) is not a full stack application framework ● It needs a back end ○ Rails/MVC/Sinatra ○ ...Or Java, .Net, PHP ○ ...Or Node ● Can be used with Angular on the front end
  • 25. Build & Packaging ● Build ○ Gulp ○ Grunt ● Packaging ○ Bower ○ Wcpack
  • 26. Polymer vs. Angular ● Open standards vs. front-end framework ● SPA vs. MPA ● Self-contained, reusable elements are more portable ● Web Components vs. Angular Directives ● The future of Angular - 2.0 will implement web components
  • 27. Demo
  • 28. References ● Web Components Explained ● Browser Compatibility Matrix ● Material Design Specification ● Polymer Designer ● Polymer FAQs ● React vs. Web Components ● The Problem With Using HTML Imports For Dependency Management ● Mobile Chrome Apps ● Code Samples - https://github.com/mobiledc/polymer

Related Documents