Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Component Based Development


Published on

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

Published in: Software
  • Be the first to comment

Component Based Development

  1. 1. Component Based Development Ben McCormick Software Developer at Windsor Circle Twitter: @ben336
  2. 2. So What Is Component Based Development?
  3. 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. 4. Component Based Development A Front End Development approach focused on reusable, composable elements with an abstracted, semantic public interface
  5. 5. Component Based Development Reusable Composable Abstracted Semantic
  6. 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. 7. Web Components Official W3C Spec Complete implementation in Chrome now Partial implementation in Firefox
  8. 8. Custom Elements Shadow DOM Templates HTML Imports
  9. 9. <progress-bar value =“30”></progress-bar>
  10. 10. 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)
  11. 11. Custom Element Life-Cycle createdCallback attachedCallback detachedCallback attributeChangedCallback
  12. 12. Custom Elements Shadow DOM Templates HTML Imports
  13. 13. Shadow DOM Provides Encapsulation of styles and selectors Prevents naming conflicts and related errors Can be overridden when necessary
  14. 14. Shadow Dom API createShadowRoot() ::shadow <content></content>
  15. 15. Custom Elements Shadow DOM Templates HTML Imports
  16. 16. Templates As Simple as <template></template> Reusable DOM Chunks No side effects
  17. 17. Custom Elements Shadow DOM Templates HTML Imports
  18. 18. 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
  19. 19. The Bad News
  20. 20. Compatibility
  21. 21. The Here And Now
  22. 22. Polymer React Knockout Ember
  23. 23. Polymer Web Components + Polyfills for the WC spec Also includes helper methods and it’s own syntax for creating components “Everything is an element”
  24. 24. Polymer Just Web Components Easy transition to the “future” Backed by Google Polyfills large/incomplete Performance is a concern on polyfilled browsers
  25. 25. Polymer React Knockout Ember
  26. 26. My Most Popular Tweet Ever
  27. 27. React An alternative components implementation Focused on UI (the V in MVC) Uses a virtual DOM to track changes
  28. 28. 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
  29. 29. Polymer React Knockout Ember
  30. 30. Knockout Released in 2010 Recently added components as a recommended development style Inspired by, but not strictly following Web Component Syntax
  31. 31. Polymer React Knockout Ember
  32. 32. Ember Released in 2011 Provide a Web Component-like API based on Handlebars Meant to ease the transition to Web Components in the future.
  33. 33. 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
  34. 34. Component Based Development Tomorrow Web Components 3rd Party Libraries
  35. 35. Possibilities Truly Reusable Code Readable, Meaningful Markup Simple to use widgets without side-effects
  36. 36. Thank You Ben McCormick Windsor Circle @ben336