Introduction to Google Polymer - Web Components

View Github Repository Open presentation in a new window

charlieouyang

See all presentation from charlieouyang

Introduction to Google Polymer - Web Components

0 0

intro-to-web-components

On Github charlieouyang / intro-to-web-components

Introduction to Google Polymer - Web Components

Presented by Charlie Ou Yang / HC.JS / ver: 1.1.0

--- >

About this presentation

  • Web apps are complex
  • A solution to all this madness
  • Overview of Google Polymer
  • Sample library of web components
Presentation source at: https://github.com/charlieouyang/intro-to-web-components Issues with this presentation? Fix it and issue a pull request --- This talk will focus cover several aspects. Developing web applications are hard. Finding a solution to all the complexity. A high level overview of Google Polymer. And a open source library that my company has built using Google Polymer.

About me

  • Charlie Ou Yang, Software Engineer at MediaMath
  • I'm into full-stack JS development
  • I've spent a lot of time using web components to solve problems
--- My name is Charlie Ou Yang and I'm a Software Engineer at Mediamath. On my spare time, I primarily work on full-stack JS development. And the reason I'm giving this talk is because I've spent a lot of time using web compoenents to solve problems.

What problem are we solving?

--- As web applications get complicated, so does the development. Here are just some examples of the DOM of some popular web sites. As you can see, there are so many divs and spans all around, and developing this can become a nightmare.

Patterns of these problems?

  • Similar components in most web pages
  • Not enough semantic tags so we fall back to divs and spans
--- We have too many similar components in our web page that fall under the same semantic structure. To distinguish them from each other, we use classes, IDs, or other attributes. The available list of semantic tags are simply not enough to target the wide variety of components that constitute our design. As a result, we fall back to traditional tags like div or span.

What problem are we solving?

--- JS libs to help build HTML elements Since there are so many similar components in different sites, for example grids and tabs, we should have solutions to help us implement them. And we have! There are many JS libraries out there to help build them. Boostrap, JQuery UI, and so on.

What problem are we solving?

--- Building tabs should be easy! And they should be because they are so common.

What problem are we solving?

--- jQuery tabs

What problem are we solving?

--- KendoUI tabs

What problem are we solving?

--- Yahoo UI tabs

What problem are we solving?

--- More JS tabs (Angular)

Google Polymer

--- Less code Less confusion

The 4 Parts of a web component

  • Custom Elements
  • Templates
  • Shadow DOM
  • HTML Imports
--- Custom Elements - Create new HTML elements and extend existing ones Templates - Native templating in the browser Shadow DOM - Scoped CSS! And encapsulated markup HTML Imports - Load custom element definitions and resources

Custom Elements

  • Define new HTML/DOM elements
--- With Custom Elements, you can define your own. Just like any other HTML tag.

Custom Elements

--- Way too much code

Custom Elements

--- Much more elegant

Custom Elements

--- Event listener for core-activate is when the tab is clicked.

HTML Template

--- These let you define fragments of markup that stay consistent across web pages with the ability to inject dynamic content using JavaScript. The HTML < template > element represents a template in your markup. It contains "template contents"; essentially inert chunks of cloneable DOM. Think of templates as pieces of scaffolding that you can use (and reuse) throughout the lifetime of your app.

Shadow DOM

--- HTML Video tag

Shadow DOM

--- HTML Video tag

Shadow DOM

--- Shadow DOM is designed to abstract all the complexities from the markup by defining functional boundaries between the DOM tree and the subtrees hidden behind a shadow root.

HTML Import

--- Importing web component libraries is the same as importing css and js libraries in HTML

HTML Import

--- Similar to import one CSS file into another, these allow you to include and reuse HTML documents in other HTML documents.

The 4 Parts of a web component

  • Custom Elements
  • Templates
  • Shadow DOM
  • HTML Imports
--- Custom Elements - Create new HTML elements and extend existing ones Templates - Native templating in the browser Shadow DOM - Scoped CSS! And encapsulated markup HTML Imports - Load custom element definitions and resources

Core Elements (now known as iron-elements)

--- This is a set of web components that the Google Polymer team has built

Core Elements (now known as iron-elements)

--- This is a set of web components that the Google Polymer team has built

Core Elements (now known as iron-elements)

--- This is a set of web components that the Google Polymer team has built

Core Elements (now known as iron-elements)

--- This is a set of web components that the Google Polymer team has built

MediaMath STRAND (http://mediamath.github.io/strand/)

--- This is an open source library consisting of UI and other data components that my company has built. It consists mostly of very common UI elements that are used throughout our web applications.

MediaMath STRAND (http://mediamath.github.io/strand/)

--- This is mm-dropdown

MediaMath STRAND (http://mediamath.github.io/strand/)

--- This is mm-datepicker

MediaMath STRAND (http://mediamath.github.io/strand/)

--- This is mm-datepicker
--- Native Browser Support
--- Polyfills Browser Support

Conclusion

  • Web apps are complex
  • A solution to all this madness
  • Overview of Google Polymer
  • Core Elements and STRAND
---

Contact

  • charlieouyang on Github
  • Email: charlieouyang@gmail.com
  • About: http://charlieouyang.com