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
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
What problem are we solving?
Patterns of these problems?
- Similar components in most web pages
- Not enough semantic tags so we fall back to divs and spans
What problem are we solving?
What problem are we solving?
What problem are we solving?
What problem are we solving?
What problem are we solving?
What problem are we solving?
Google Polymer
The 4 Parts of a web component
- Custom Elements
- Templates
- Shadow DOM
- HTML Imports
Custom Elements
- Define new HTML/DOM elements
Custom Elements
HTML Template
Shadow DOM
HTML Import
HTML Import
The 4 Parts of a web component
- Custom Elements
- Templates
- Shadow DOM
- HTML Imports
Core Elements (now known as iron-elements)
Core Elements (now known as iron-elements)
Core Elements (now known as iron-elements)
Core Elements (now known as iron-elements)
MediaMath STRAND (http://mediamath.github.io/strand/)
MediaMath STRAND (http://mediamath.github.io/strand/)
MediaMath STRAND (http://mediamath.github.io/strand/)
MediaMath STRAND (http://mediamath.github.io/strand/)
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
