Component Based Development

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

Thank YouBen McCormick Windsor Circle

@ben336 benmccormick.org