The future of web! – Object Oriented Html - WebComponents! – HTML elements

View Github Repository Open presentation in a new window

kpthree

See all presentation from kpthree

The future of web! – Object Oriented Html - WebComponents! – HTML elements

0 0

slides.kpthree.com

On Github kpthree / slides.kpthree.com

The future of web!

Object Oriented Html - WebComponents!

Created by Kunal Parekh / @kunalparekh1987

HTML elements

Elements are encapsulated

Simple select box

SokratiTBSLGetit

Elements are configurable

Simple select box

SokratiTBSLGetit

Elements are composable

Grouping in select box

SokratiGetitTBSL

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:

Shadow DOM Templates Custom Elements 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