Graffiti: The Coveted Universal Web Component Format

CovetedThe

UniversaLWeb Component

Format

June 16th, 2015 - Wicked good Ember Conf

“Component” is a super Ambiguous word these days.

Ember, React, Angular, etc all have concepts of “Components”

UNIVERSAL u·ni·ver·sal [ yoo-nuh-vur-suh l ]

adjective

1. Used or understood by all

I am declaring war On all framework view layers

Jay PhelpsSenior Front end engineer | Netflix Twitter: @_jayphelps

W3c - Web Components Create custom, reusable HTML elements which allow

encapsulation and interoperability.

The Real world

What’s missing?

<div>{{value}}</div>

No Interpolation

No bindings

No Helpers/directives

{{#if foo}}

<div ng-repeat="(key, value) in myObj">

{{#each items as |item|}}

<input ng-model="value" />

No computed properties, Observers etc

What do we do?

Filling in the gaps

X-tags

MOAR

polymer

It’s awesome.

element properties can be bound in the templateDeclarative data binding

Computed Properties

Observers

Polymer 0.5 “alpha”

Complex lists, charts, etc.Bindings/renders can be slow

Shadow DOM “shady DOM”Polymer 1.0

Quite literally a ground up rewrite from 0.5So much faster

But…Not fast enough…For me…

reinventing the virtual dom wheel

via BabelEs6/7++ ???

¯\_(ツ)_/¯

what now?

*Ember 2.0 with Glimmer rendering engine

React & ember* are super fast

tl;dr

ember fast ≈ htmlbars/glimmer

With sugar, glue, and some duct tape

Can we use it?

yep.

Introducing…

es6/7++

They both use Es6/7++ with decorators

Yes, it looks a bit like angular 2.0

How bout bindings?

Like ember, will get even faster as more hybrid approach is taken

FAST!

github.com/jayphelps/graffiti

Open source

Even if it’s you telling me how crazy I am

Contributions extremely welcome

HUGE Thank you to ember core team

Particularly those who let me bug them about htmlbars/glimmer

Q/aTwitter: @_jayphelps