Downloaded 110 times
More Related Content
Similar to Component Based Development
Component Based Development
- 1. Component Based Development Ben McCormick Software Developer at Windsor Circle Twitter: @ben336 benmccormick.org
- 2. So What IsComponent Based Development?
- 3. Quick Web HistoryLesson 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-endcode is hard Single points of truth make development easier We’re losing readable markup Side Effects make scaling hard
- 7. Web Components OfficialW3C Spec Complete implementation in Chrome now Partial implementation in Firefox
- 8. Custom Elements ShadowDOM Templates HTML Imports
- 10.
- 11. Custom Elements Letyou 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 ShadowDOM Templates HTML Imports
- 14. Shadow DOM ProvidesEncapsulation 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 ShadowDOM Templates HTML Imports
- 17. Templates As Simpleas <template></template> Reusable DOM Chunks No side effects
- 18. Custom Elements ShadowDOM Templates HTML Imports
- 19. HTML Imports <linkrel=“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.
- 21.
- 22. The Here AndNow
- 23.
- 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 WebComponents Easy transition to the “future” Backed by Google Polyfills large/incomplete Performance is a concern on polyfilled browsers
- 26.
- 27. My Most PopularTweet Ever
- 28. React An alternativecomponents implementation Focused on UI (the V in MVC) Uses a virtual DOM to track changes
- 29. React Focus oncomposable components Take “state”, produce a section of UI Challenges best practices: Combines markup and Javascript, rerenders the whole page on each change
- 30.
- 31. Knockout Released in2010 Recently added components as a recommended development style Inspired by, but not strictly following Web Component Syntax
- 32.
- 33. Ember Released in2011 Provide a Web Component-like API based on Handlebars Meant to ease the transition to Web Components in the future.
- 34. Component Based DevelopmentToday 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 DevelopmentTomorrow Web Components 3rd Party Libraries
- 36. Possibilities Truly ReusableCode Readable, Meaningful Markup Simple to use widgets without side-effects
- 37. Thank You BenMcCormick Windsor Circle @ben336 benmccormick.org