The document provides an introduction to web components and the Polymer library, highlighting their modularity and ease of use for developers. It explains key concepts such as templates, decorators, shadow DOM, and custom elements, as well as Polymer's support for material design and data binding. Additionally, it discusses the need for polyfills for browser compatibility and compares Polymer with Angular, emphasizing the benefits of open standards.

5. <puzzle-maker background=”grade” from=”#333” to=”#aaa”>

6. <puzzle-maker background=”metal” col1=”#333” col2=”#aaa”>

10. <music-player type=”mobile-a” platforms=”ios, android”>

11. <music-player type=”mobile-b” platforms=”ios, android”>

12. Introduction to Web Components
and Polymer
@gursesl

13. The Landscape

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

15. Templates

16. Decorators

17. Shadow DOM

18. Custom Elements

19. customelements.io

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

22. But, The Question Is...
Is Polymer
production-ready?
No.

23. Browser
Support

24. Polymer Designer

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

28. Lifecycle Methods

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

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

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

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

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

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

35. Build & Packaging
● Build
○ Gulp
○ Grunt
● Packaging
○ Bower
○ Wcpack

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

37. Demo

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