components

web components

a little background...

  • introduced in 2011
  • Polymer 2013
  • HTML Templates <template> 2014 ( part of HTML5 Spec W3C Recommended status )
  • Other W3C Component Specs
    • HTML Imports ( Draft Status )
    • Shadow DOM ( Draft Status )
    • Custom Elements ( Draft Status )

web components

benefits

  • view encapsulation
  • templating
  • modular

angular 1.6 components

  • templating
  • modular
  • life cycle events
    • $onInit
    • $onChanges
    • $onDestroy

angular 2 components

  • view encapsulation
    • Native
    • Emulated
    • None

component structure

SRP (Single Responsibility Principle)

  • cleaner
  • easier to read  and maintain
  • more testable
  • scalable

components

single component

demo

https://jsfiddle.net/ianqueue/ojra5vru/

thanks!

Ian Quattlebaum

References

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

https://www.w3.org/

Angular & Web Components

By ianqueue

Angular & Web Components

  • 522