Varunkumar Nagarajan

plus.varunkumar.me

@varunkumar

varunkumar.me

• Web was just a platform for creating interactive and navigable content
  • HTML was used to define the static text and images
  • JavaScript to control the interactions and animations
  • CSS to present the content
• Capabilities on the browser were limited
• We need to depend on backend servers to accomplish most of the user tasks

MV* frameworks help us to some extent

• Organize the complexity
• Separate contents from the presentation layer
• Define Templates / views
• Associate a model with the view
• Monitor the model for changes and update the view (Data binding)
• Does it solve all the problems? Lets see.

Method #1: "offscreen" DOM using [hidden] or display:none

<div id="mytemplate" hidden>
  <img src="logo.png">
  <div class="comment"></div>
</div>

1. We're working directly w/ DOM.
2. Resources are still loaded (e.g. that <img>)
3. Other side-effects like URLs not being fully composed yet.
4. Style and theming is painful.
   • embedding page must scope all its CSS to #mytemplate.
   • no guarantees on future naming collisions.

Method #2: manipulating markup as string. Overload <script>:

<script id="mytemplate" type="text/x-handlebars-template">
  <img src="logo.png">
  <div class="comment"></div>
</script>

1. encourages run-time string parsing (via .innerHTML)
   • may include user-supplied data → XSS attacks.

Examples: handlebars.js, John Resig's micro-template script

• JavaScript Object constructor and Module patterns
• Listening to changes
  • Model - via Wrapper object. Dirty check
  • View - via event handlers, DOM Mutation events - Not efficient

• <template>
  • inert chunks of clonable DOM. Can be activated for later use
• Custom elements
  • create new HTML elements - expand HTML's existing vocabulary.
  • extend existing DOM objects with new imperative APIs
• Shadow DOM
  • building blocks for encapsulation & boundaries inside of DOM

• Style encapsulation
• Knowledge into app's state
  • DOM changes: MutationObserver
  • Model changes: Object.observe()
• CSS variables, calc()

A collection of new capabilities on the browser

Contains inert markup intended to be used later:

<template id="mytemplate">
  <img src="">
  <div class="comment"></div>
</template>

1. We're working directly w/ DOM again.
2. Parsed, not rendered
   • <script>s don't run, images aren't loaded, media doesn't play, etc.

• Appending inert DOM to a node makes it go "live":

var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'http://...';
document.body.appendChild(t.content.cloneNode(true));

Is complex! Let's cover the basics:

• Concept of Shadow DOM
• Creating Shadow DOM
• Insertion Points
• Styling
  • encapsulated styles & shadow boundaries
  • styling hooks: using CSS variables
  • @host at-rule

• DOM nodes can already "host" hidden DOM.
• It can't be accessed traversing the DOM.

So...browser vendor's have been holding out on us!

<div id="host">
  <h1>Varunkumar Nagarajan</h1>
  <h2>Hyderabad, India</h2>
  <div>...other content...</div>
</div>

var host = document.querySelector('#host');
var shadow = host.createShadowRoot();
shadow.innerHTML = '<h2>Yo, you just got replaced!</h2>' +
                   '<div>Who? Varunkumar (@varunkumar)</div>';
// host.shadowRoot;

<style>s defined in ShadowRoot are scoped.

var shadow = document.querySelector('#host').createShadowRoot();
shadow.innerHTML = '<style>h2 { color: red; }</style>' + 
                   '<h2>Yo, you got replaced!</h2>' + 
                   '<div>Who? Varunkumar (@varunkumar)</div>';

Author's styles don't cross shadow boundary by default.

Change the behavior via properties resetStyleInheritance and applyAuthorStyles

<div id="host">
  <h1>Varunkumar Nagarajan</h1>
  <h2>Hyderabad, India</h2>
  <div>...other content...</div>
</div>

that guy rendered as:

<div id="host">
  #shadow-root
    <style>h2 {color: red;}</style>
    <h2>Yo, you got replaced!</h2>
    <div>Who? Varunkumar (@varunkumar)</div>
</div>

...everything was replaced when we attached the shadow DOM

• Defined in DOM4 ( Yep. We're on DOM4! )
• Observers, not listeners
  • triggered by DOM changes rather than events (e.g. oninput, click)
• Callback triggered at the end of DOM modifications.
  • provided a list of all changes (MutationRecords)
• Replacement for MutationEvent performance / stability bottlenecks.
• Availability: Chrome, Safari, FF

var observer = new MutationObserver(function(mutations, observer) {
  mutations.forEach(function(record) {
    for (var i = 0, node; node = record.addedNodes[i]; i++) {
      console.log(node);
    }
  });
});

observer.observe(el, {
  childList: true,      // include childNode insertion/removals
  //subtree: true,        // observe the subtree root at el
  //characterData: true, // include textContent changes
  //attribute: true      // include changes to attributes within the subtree
});

// observer.disconnect() // Stop observations

MutationEvent

• Deprecated in DOM Events spec
• Adding listeners degrades app performance by 1.5-7x!
  • slow because of event propagation and synchronous nature
  • fire too often: every single change
  • removing listener(s) doesn't reverse the damage
• Inconsistencies with browser implementations.

Don't use Mutation Events!

1. Templates (<template>)
2. Shadow DOM (@host, styling hooks)
3. Mutation Observers, Object.observe()

WE DO :)

Define a declarative "API" using insertion points:

<element name="x-tabs">
  <template>
    <style>...</style>
    <content select="hgroup:first-child"></content>
  </template>
</element>

Include and use it:

<link rel="components" href="x-tabs.html">
<x-tabs>
  <hgroup>
    <h2>Title</h2>
    ...
  </hgroup>
</x-tabs>

1. Use Chrome Canary
2. Enable yourself:
   • Enable experimental WebKit features in about:flags
   • Enable experimental JavaScript in about:flags
   • Enable Show Shadow DOM in DevTools

You don't have Shadow DOM enabled

You don't have Object.observe()

You don't have MutationObservers

<x-gangnam-style></x-gangnam-style>

( hover over the bar )

• Web-Components-Polyfill
• Mozilla's x-tags Custom Elements Polyfill (works on all browsers)
• MDV - code.google.com/p/mdv/