The future of web!

Object Oriented Html - WebComponents!

Created by Kunal Parekh / @kunalparekh1987

HTML elements

Elements are encapsulated

Simple select box

Elements are configurable

Simple select box

Elements are composable

Grouping in select box

Elements are programmable

Web demands Rich UIs

Tab component code

Tab component code

We copy/paste someone elses code

$("something").doSomething();

Plain old typical jQuery code

Current html structure

There's nothing modern about <div>

And yet,…this is how we build web apps.

It's sad. Shouldn't we demand more from web?

Can we do better?

It's easy to write code a browser understands.
Good developers write code people can understand.

Introducing
Web Components!

A set of emerging standards that allow developers to extend HTML

It is comprised of four parts:

  1. Shadow DOM
  2. Templates
  3. Custom Elements
  4. Packaging (HTML imports)

1. Shadow DOM & 2. Templates

  • Shadow DOM addresses the DOM tree encapsulation problem
  • With Shadow DOM, elements can get a new kind of node associated with them known as Shadow Root
  • Hide Presentation Details using templates
## 1. Shadow DOM
## 2. Template

3. Custom Elements

  • Allows web developers to define new types of HTML elements
  • Defines new HTML/DOM elements
  • Create elements that extend from other elements
  • Logically bundle together custom functionality into a single tag
  • Extends the API of existing DOM elements

4. Packaging (HTML imports)

  • A way to include HTML documents in other HTML documents

Importing a file in html is like importing a jar in java

Any tool/lib available:

  • Bosonic
  • Polymer
  • Polymer.Dart
  • X-TAG

Browser support

Demo

Questions?

Lets start creating a better web!