Skip to toolbar
Test

Modular Front End: Angular Directives and Web Components

Drew Machat / @negativev / alleyinteractive.com

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


Fancy Post with Slider

The Reality

DIV soup



            

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?

<img src="http://samples.5doc.org/wp-content/uploads/sites/5/logo.png" alt="Alley Interactive" id="logo" /