Component Based Development
Ben McCormick Software Developer at Windsor Circle
Twitter: @ben336 benmccormick.org
So What Is Component Based Development?
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”
Component Based Development
A Front End Development approach focused on reusable, composable elements with an
abstracted, semantic public interface
Component Based Development
Reusable
Composable
Abstracted
Semantic
Motivation
Reusable front-end code is hard
Single points of truth make development easier
We’re losing readable markup
Side Effects make scaling hard
Web Components
Official W3C Spec
Complete implementation in Chrome now
Partial implementation in Firefox
Custom Elements
Templates HTML Imports
Shadow DOM
<progress-bar value =“30”></progress-bar>
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)
Custom Element Life-Cycle
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback
Custom Elements
Templates HTML Imports
Shadow DOM
Shadow DOM
Provides Encapsulation of styles and selectors
Prevents naming conflicts and related errors
Can be overridden when necessary
Shadow Dom API
createShadowRoot()
::shadow
<content></content>
Custom Elements
Templates HTML Imports
Shadow DOM
Templates
As Simple as <template></template>
Reusable DOM Chunks
No side effects
Custom Elements
Templates HTML Imports
Shadow DOM
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
The Bad News
Compatibility
http://jonrimmer.github.io/are-we-componentized-yet/
The Here And Now
Polymer
Knockout Ember
React
Polymer
Web Components +
Polyfills for the WC spec
Also includes helper methods and it’s own syntax for creating components
“Everything is an element”
Polymer
Just Web Components
Easy transition to the “future”
Backed by Google
Polyfills large/incomplete
Performance is a concern on polyfilled browsers
Polymer
Knockout Ember
React
My Most Popular Tweet Ever
React
An alternative components implementation
Focused on UI (the V in MVC)
Uses a virtual DOM to track changes
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
Polymer
Knockout Ember
React
Knockout
Released in 2010
Recently added components as a recommended development style
Inspired by, but not strictly following Web Component Syntax
Polymer
Knockout Ember
React
Ember
Released in 2011
Provide a Web Component-like API based on Handlebars
Meant to ease the transition to Web Components in the future.
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
Component Based Development Tomorrow
Web Components
3rd Party Libraries
Possibilities
Truly Reusable Code
Readable, Meaningful Markup
Simple to use widgets without side-effects
Recommended
