Modular Front End: Angular Directives and Web Components – Web Components – ~=

View Github Repository Open presentation in a new window

alleyinteractive

See all presentation from alleyinteractive

Modular Front End: Angular Directives and Web Components – Web Components – ~=

1 0

learn-stuff-frontend-components

Slides for Alley Learn Stuff: Modular Frontend

On Github alleyinteractive / learn-stuff-frontend-components

Modular Front End: Angular Directives and Web Components

Drew Machat / @negativev / alleyinteractive.com

Web Components

~=

  • select
  • input
  • video
  • etc

The Dream

Webpages made up a bunch of small, semantic, and encapsulated building blocks.

<article>
  <header>
    <h2>Fancy Post with Slider</h2>
    <time is="time-ago" datetime="2012-04-01T16:30:00-08:00" format="micro"></time>
    <author author="author"></author>
  </header>
  <carousel images="images"></carousel>
  <p></p>
</article>

The Reality

DIV soup

<div id="carousel">
  <div id="items">
    <div id="overflow">
      <div class="inner">
        <img src="image1.png">
        <img src="image2.png">
        <img src="image3.png">
      </div>
    </div>
  </div>
</div>

Node-like

  • Do one thing
  • Large, accessible library
  • Composable

What about those "Real" Web Components

Like everything else relating to browser standards, we have no idea when they will become usable (or how they'll look, or how performant they'll be, or...).

Polyfills

implemented against Web Component spec

  • Polymer
  • Brick
  • x-tag
  • Bosonic

Componetized Frameworks

  • ember
  • React
  • riot
  • Angular

Tools to the Rescue (again)

  • Webpack/Browserify/ES6
  • CSS-modules

Angular Directives

  • Built to sit on top of browser api
  • Isolate Everything* — Scope ~= Shadow DOM
  • Test Everything
  • Plug it in

*except styles, for now

Simple Example

Slideshow Directive

Advanced Example

Data visualization components

Angular 2.0

Inching closer to being component-centric. 2.0 is an attempt to trim the API and focus the developer experience, while mapping closely to browser API.

1.4.x, 1.5 have a much better component API.

2.0 takes advantage of ES6 and element API to do more things natively

Questions?