component based development
DESCRIPTION
An overview of component based Web Development, covering Web Components as well as the possible implementations for using component principles today.TRANSCRIPT
![Page 1: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/1.jpg)
Component Based Development
Ben McCormick Software Developer at Windsor Circle
Twitter: @ben336 benmccormick.org
![Page 2: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/2.jpg)
So What Is Component Based Development?
![Page 3: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/3.jpg)
Quick Web History Lesson
1995-1996: Netscape and IE Introduce JavaScript
2000 - 2005: AJAX allows for Rich Web Applications
2006-2008: jQuery lowers the barriers to Web Development
2010-2013: MVC Frameworks & Single Page Apps explode
2014?: Component Based Development enters the scene
2009-2013: NodeJS and DevTools create a “Tools Revolution”
![Page 4: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/4.jpg)
Component Based Development
A Front End Development approach focused on reusable, composable elements with an
abstracted, semantic public interface
![Page 5: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/5.jpg)
Component Based Development
Reusable
Composable
Abstracted
Semantic
![Page 6: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/6.jpg)
Motivation
Reusable front-end code is hard
Single points of truth make development easier
We’re losing readable markup
Side Effects make scaling hard
![Page 7: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/7.jpg)
Web Components
Official W3C Spec
Complete implementation in Chrome now
Partial implementation in Firefox
![Page 8: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/8.jpg)
Custom Elements
Templates HTML Imports
Shadow DOM
![Page 9: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/9.jpg)
![Page 10: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/10.jpg)
<progress-bar value =“30”></progress-bar>
![Page 11: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/11.jpg)
Custom Elements
Let you register an element with the browser
Are “just” HTML elements
Provide a set of callbacks to define element behavior
Expose a public interface (attributes and properties)
![Page 12: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/12.jpg)
Custom Element Life-Cycle
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback
![Page 13: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/13.jpg)
Custom Elements
Templates HTML Imports
Shadow DOM
![Page 14: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/14.jpg)
Shadow DOM
Provides Encapsulation of styles and selectors
Prevents naming conflicts and related errors
Can be overridden when necessary
![Page 15: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/15.jpg)
Shadow Dom API
createShadowRoot()
::shadow
<content></content>
![Page 16: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/16.jpg)
Custom Elements
Templates HTML Imports
Shadow DOM
![Page 17: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/17.jpg)
Templates
As Simple as <template></template>
Reusable DOM Chunks
No side effects
![Page 18: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/18.jpg)
Custom Elements
Templates HTML Imports
Shadow DOM
![Page 19: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/19.jpg)
HTML Imports
<link rel=“import” href=“example.html”>
Allow you to load HTML like CSS and JS
Can load chains of resources including scripts and styles
Only parsed once, solving dependency issues
![Page 20: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/20.jpg)
The Bad News
![Page 21: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/21.jpg)
Compatibility
http://jonrimmer.github.io/are-we-componentized-yet/
![Page 22: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/22.jpg)
The Here And Now
![Page 23: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/23.jpg)
Polymer
Knockout Ember
React
![Page 24: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/24.jpg)
Polymer
Web Components +
Polyfills for the WC spec
Also includes helper methods and it’s own syntax for creating components
“Everything is an element”
![Page 25: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/25.jpg)
Polymer
Just Web Components
Easy transition to the “future”
Backed by Google
Polyfills large/incomplete
Performance is a concern on polyfilled browsers
![Page 26: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/26.jpg)
Polymer
Knockout Ember
React
![Page 27: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/27.jpg)
My Most Popular Tweet Ever
![Page 28: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/28.jpg)
React
An alternative components implementation
Focused on UI (the V in MVC)
Uses a virtual DOM to track changes
![Page 29: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/29.jpg)
React
Focus on composable components
Take “state”, produce a section of UI
Challenges best practices: Combines markup and Javascript, rerenders the whole page on each change
![Page 30: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/30.jpg)
Polymer
Knockout Ember
React
![Page 31: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/31.jpg)
Knockout
Released in 2010
Recently added components as a recommended development style
Inspired by, but not strictly following Web Component Syntax
![Page 32: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/32.jpg)
Polymer
Knockout Ember
React
![Page 33: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/33.jpg)
Ember
Released in 2011
Provide a Web Component-like API based on Handlebars
Meant to ease the transition to Web Components in the future.
![Page 34: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/34.jpg)
Component Based Development Today
Component Libraries like React and Polymer
Component Influenced Libraries like Knockout and Ember
Polyfills to use Web Components in today’s browsers
![Page 35: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/35.jpg)
Component Based Development Tomorrow
Web Components
3rd Party Libraries
![Page 36: Component Based Development](https://reader034.vdocuments.us/reader034/viewer/2022042607/559429ff1a28abbc5a8b462a/html5/thumbnails/36.jpg)
Possibilities
Truly Reusable Code
Readable, Meaningful Markup
Simple to use widgets without side-effects