Oreilly - Using Web Components
by Scott Davis | Publisher: O'Reilly Media, Inc. | Release Date: March 2016 | ISBN: 9781491957264
We've been talking about "web pages" since we first started talking about the Web. However, with core changes to the web coming fast, it's time for every JavaScript developer to start thinking smaller. Much smaller. Instead of focusing on pages, web frameworks like Angular are doubling down on the use of Web Components to build reusable page elements. This video introduces you to the four core aspects of Web Components: Custom Elements, HTML Imports, Templates, and Shadow DOM. Understanding this technology will make it easier for any JS developer working in any framework - not just Angular, but Ember, React and more - to transition to the next generation of those frameworks. With every major browser advancing quickly toward implementation of native support for Web Components, the time to learn is now.“Using Web Components”, “What's New in JavaScript”, and “Getting Ready for Angular 2” comprise Scott Davis's learning trilogy about Angular, the Google led framework for mobile and desktop apps. Davis is a frequent O'Reilly contributor and the founder of ThirstyHead.com, a training and consulting company that that specializes in HTML5, mobile development, SmartTV development, NoSQL, Groovy, and Grails.
- Introduction
- Welcome to the Course 00:01:28
- Introduction 00:05:54
- Current HTML5 Web Components 00:03:03
- Web Components "State of the Union" 00:05:37
- Custom Elements
- Before Custom Elements, There Was "Tag Soup" 00:04:55
- Introduction to Custom Elements 00:02:15
- Semantic HTML Elements 00:07:15
- Your First Custom Element: <my-duration> 00:05:32
- HTML Templates
- Before Templates, There Was Handlebars 00:03:51
- Introduction to Templates 00:03:32
- Adding an HTML Template to Your Custom <my-duration> Web Component 00:03:07
- Shadow DOM
- Introduction to Shadow DOM 00:02:48
- Adding Shadow DOM Support to Your Custom <my-duration> Web Component 00:03:02
- HTML Imports
- Introduction to HTML Imports 00:06:43
- Understanding Import Documents 00:05:11
- Adding HTML Imports Support to Your Custom <my-duration> Web Component 00:03:24
- Wrap Up and Thank You 00:02:21