Web Components


Rewolucja w budowaniu aplikacji internetowych



Marcin Warpechowski (@warpech)

Tech.3camp
Gdynia, 25.03.2014

Lustro w HTML


<video is="camera">

Lustro w HTML




<link rel="import" href="comp/camera.html">
<video is="camera" audio autoplay controls></video>

Odtwarzacz anim. GIFów

Odtwarzacz anim. GIFów




<link rel="import" href="comp/x-gif.html">
<x-gif src="http://i.imgur.com/5KSc0px.gif" speed="5"></x-gif>

O mnie

  • Programista JavaScript

  • Wcześniej zajmowałem się również Flashem i PHP
    (prezentacja nt. Flasha na 3campie w 2009)
  • Stworzyłem i rozwijam plugin jQuery Handsontable, obecnie we 2 osoby
  • Wdrażam Web Components w przyszłościowym projekcie, do jakiego zatrudniła mnie firma Starcounter





Jak dziś tworzy się aplikacje internetowe

Dodajmy ocenianie gwiazdkami na naszej stronie internetowej





★★★★☆

Po co tworzyć własny element? Znajdę jakiś plugin

Jest ich dużo, więc poprzeglądam jaki mam wybór

W końcu wybrałem najfajniejszy

Tylko jak to zintegrować?

Działa 


Trochę śmieci (klasy CSS, divy) - ale co tam!



Czy można prościej?



<link rel="import" href="comp/polymer-ui-ratings.html">
<polymer-ui-ratings value="3"></polymer-ui-ratings>



Web Components

1. Templates



Reużywalność - Pozwalają zdefiniować powtarzające się fragmenty DOM


<template id="tpl">
Hello world!
</template>

2. Shadow DOM


Encapsulation (pl. hermetyzacja)

Dowolny element HTML może mieć 
wewnątrz swój własny DOM.

Jego elementy i style nie wyciekają na zewnątrz.

Zewnętrzne style nie przeciekają do wewnątrz.

2. Shadow DOM


Przykładem jest tag <video>:


2. Shadow DOM

2. Shadow DOM

3. Custom Elements


=
Templates
+
Shadow DOM


Tworzenie własnych tagów HTML!

3. Custom Elements


<my-gravatar email="albert.einstein.starcounter@gmail.com"></my-gravatar>

3. Custom Elements

4. HTML Imports



<link rel="import" href="my-gravatar.html">

Nie jedna a kilka specyfikacji


Wsparcie przeglądarek


Natywnie: Google Chrome

Polyfills (Polymer):

Kto tworzy Web Components?


Google Chrome



Polymer (Google)


x-tags (Mozilla)

Brick (Mozilla)

Dlaczego Web Components to rewolucja


  1. Ustalenie standardu to koniec wojny bibliotek JavaScript
  2. Standardy rzadko się zmieniają
  3. Deklaratywne "programowanie" w HTML
  4. Zdecentralizowany katalog komponentów
  5. Reużywalność komponentów, możliwość dowolnego ich łączenia
  6. Encapsulation (hermetyzacja)

Jakie komponenty już istnieją?


Dlaczego warto zainteresować się już teraz


  • Jest to propozycja standardu, który rozwija się na naszych oczach. 
  • Po raz pierwszy programiści mają szansę testować technologię i wnosić swoje uwagi, zanim stanie się ona faktem.
  • Im więcej dowie się o tym dużo programistów, tym szybciej kula śnieżna nabierze rozpędu.

Pobawmy się jeszcze (Polymer Sandbox)





Dziękuję za uwagę!

Źródła ilustracji, linki


Web Components

By warpech

Made with Slides.com

Web Components

  • 2,661

More from warpech