An overview of component based Web Development, covering Web Components as well as the possible implementations for using component principles today.

1. Component Based
Development
Ben McCormick
Software Developer at Windsor Circle
Twitter: @ben336
benmccormick.org

2. So What Is Component Based Development?

3. 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
2009-2013: NodeJS and DevTools create a “Tools Revolution”
2010-2013: MVC Frameworks & Single Page Apps explode
2014?: Component Based Development enters the scene

4. Component Based
Development
A Front End Development approach focused
on reusable, composable elements with an
abstracted, semantic public interface

5. Component Based
Development
Reusable
Composable
Abstracted
Semantic

6. Motivation
Reusable front-end code is hard
Single points of truth make development easier
We’re losing readable markup
Side Effects make scaling hard

7. Web Components
Official W3C Spec
Complete implementation in Chrome now
Partial implementation in Firefox

8. Custom Elements
Shadow DOM
Templates HTML Imports

10. <progress-bar value =“30”></progress-bar>

11. 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)

12. Custom Element Life-Cycle
createdCallback
attachedCallback
detachedCallback
attributeChangedCallback

13. Custom Elements
Shadow DOM
Templates HTML Imports

14. Shadow DOM
Provides Encapsulation of styles and selectors
Prevents naming conflicts and related errors
Can be overridden when necessary

15. Shadow Dom API
createShadowRoot()
::shadow
<content></content>

16. Custom Elements
Shadow DOM
Templates HTML Imports

17. Templates
As Simple as <template></template>
Reusable DOM Chunks
No side effects

18. Custom Elements
Shadow DOM
Templates HTML Imports

19. 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

20. The Bad News

21. Compatibility
http://jonrimmer.github.io/are-we-componentized-yet/

22. The Here And Now

23. Polymer
React
Knockout Ember

24. Polymer
Web Components +
Polyfills for the WC spec
Also includes helper methods
and it’s own syntax for creating
components
“Everything is an element”

25. Polymer
Just Web Components
Easy transition to the “future”
Backed by Google
Polyfills large/incomplete
Performance is a concern on polyfilled browsers

26. Polymer
React
Knockout Ember

27. My Most Popular Tweet Ever

28. React
An alternative components
implementation
Focused on UI (the V in MVC)
Uses a virtual DOM to track
changes

29. 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

30. Polymer
React
Knockout Ember

31. Knockout
Released in 2010
Recently added components as
a recommended development
style
Inspired by, but not strictly
following Web Component
Syntax

32. Polymer
React
Knockout Ember

33. Ember
Released in 2011
Provide a Web Component-like
API based on Handlebars
Meant to ease the transition to
Web Components in the future.

34. 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

35. Component Based
Development Tomorrow
Web Components
3rd Party Libraries

36. Possibilities
Truly Reusable Code
Readable, Meaningful Markup
Simple to use widgets without side-effects

37. Thank You
Ben McCormick
Windsor Circle
@ben336
benmccormick.org