Slides for talk: Web Components — SeattleJS, 5/15/2014

gistfile1.txt

Web Components bring sanity, efficiency and fun to front-end web development
============================================================================


* New HTML standards enable the creation of reusable, shareable
  web user interface components

* Can start today

* Numerous implications for front-end JavaScript development


Jan Miksovsky
Co-founder, Component Kitchen

[email protected]
@JanMiksovsky








Web component
=============

* Functional user interface fragment

* Context-independent

* Can hide implementation details

* Composable and extensible

* Generally takes the form of a custom HTML tag: <foo-bar>

* Browsers have used these internally for a while: e.g., <video>









Web component standards
=======================

* HTML Imports – like #include for the web

* Templates – quickly stamp out HTML fragments

* Shadow DOM — encapsulation boundary for hiding DOM elements & other details

* Object.observe — enables bindings

* Custom elements — register a new tag with browser









Polymer compatability library
=============================

Open source JavaScript libraries from Google

* platform.js — patches the user’s browser where necessary to emulate specs
  so you can pretend all your users have the latest browser

* polymer.html — sugar, incl. a markup syntax for creating custom elements

Chrome (desktop/Android), Firefox, IE 10+, Safari (desktop/iOS)














Let's write some code!
======================














Component Kitchen
=================

http://component.kitchen

* Catalog of all web components publicly registered today

* Component hosting

* Many designers/writers/etc. will use components at the HTML level.









How will this change JavaScript front-end development?
======================================================

* You'll spend less time (re)implementing common UI patterns.

* You'll create much of your UI declaratively in HTML instead of code.

* On a modern browser, JavaScript turns out to almost be good.

* You'll spend less time writing boilerplate code (bindings, etc.).

* Frameworks spend less time fighting browser, more time delivering value.

* You won't need frameworks for basic operations.









Modern browser + web components = less/no need for jQuery
=========================================================


                jQuery              plain JavaScript / DOM / Web Components

Selectors       $(".foo")           document.body.querySelectorAll(".foo")
Bulk ops        $.each(), etc.      .forEach(), etc.
Traversing      $.parent(), etc.    Rarely necessary
DOM manip.      $.append(), etc.    .appendChild(), etc.; less needed anyway
Events          $.on()              .addEventListener()
Effects         $.fade()            CSS transitions
Chaining        $.foo().bar()       Can easily live without it
Data            $.data()            Can extend objects, incl. prototypes
Ajax            $.ajax()            XMLHttpRequest, <core-ajax>
Plugins         $.foo()             <foo></foo>


See bit.ly/1mn44FT for more on this topic











You should totally try using web components
===========================================


* Finally, a sane way to create web user interfaces

* Incredibly efficient

* Really, really fun


Best place to start  ->  webcomponents.org
Best catalog :)      ->  component.kitchen










Thank you!
==========



Are you a Node.js developer? We want to hire you!



Jan Miksovsky
[email protected]
@JanMiksovsky