Zer da Web Components?

Web Component-ak W3C-k garatutako estandar multzo bat dira, gaur egun nabigatzaile berrienetarako garatzen ari direna. Hala ere, nabigatzaile zaharretan erabili ahal dira, JavaScript bidez eraman behar da honen kontrola polyfill-ak erabilita. Hau, webcomponents.js izeneko fitxategi bat gehituz lortzen da, bera arduratuko da natiboki garatuak ez dauden elementuak ordezkatzeaz. Chrome 36-tik aurrera adibidez, ez da honen beharrik osagaien API-a guztiz garatua baitago. Mozilla-n bestalde, lautik batek bakarrik dauka egonkortasuna, ondorengo grafikoan erakusten den bezala.

Web Component-ak 4 elementu nagusiz osatua daude.

  • HTML Imports. Html fitxategiak html fitxategien barnean txertatzeko erabiltzen da.
  • Custom Elements. Dom-eko elementu berriak nola sortu adierazten du.

  • Shadow DOM. Elementu bateko kodea enkapsulatu eta bere portaera definitzeko baliagarria da.

  • HTML Templates. Itxurari dagozkion azalpenak eskaintzen ditu.

Zein aukera daude Web Component-ak egiteko?

Enpresa handiak ari dira estandarra erabiltzeko liburutegiak lantzen. Polymer da Google-k ematen digun soluzioa eta X-Tags berriz, Mozillarena. Polymer-ek goian aipaturiko lau elementuak erabiltzen dituen bitartean X-Tag custom element-en zatian eta import-etan zentratzen da, erabiltzailea libreago uzten du norberaren aukera egin ahal izateko. Hori da gainetik begiratuta bien arteko ezberdintasun nagusia. Kodeari begira, hemen duzue adibide bat, gauza bera bi liburutegiekin egina:

 

<polymer-element name="proba" noscript>
 <template>
   <p>Kaixo mundua!</p>
 </template>
</polymer-element>

edo itxura inportatu daiteke:

<link rel="import" href="proba.html">
 

eta X-Tag-ekin adibide bera

xtag.register('proba’, { content:

  'Kaixo mundua'

 });

Polymer aukeratzea erabaki dugu, estandarraren gainean eraikita dagoelako eta osatuagoa baita. Gainera, Chromen oso ongi funtzionatzen du.

Proba azkar bat egiteko, Yeoman erabilita Polymer-en proiektu bat sortzea gomendatzen dizuet. Horretarako komenigarria da lehenagotik npm, Bower eta Gulp instalatuta edukitzea. Hemen behean azalduko ditut eman ditudan pausuak.

Yeoman instalatu npm bidez

npm install -g yo

Proiektua sortu ahal izateko Yeoman-eko generator-a instalatu behar da.

npm install -g generator-polymer

Proiektua sortu.

mkdir polymer

cd polymer

yo polymer

Proiektua sortu ondoren pakete guztiak instalatu behar dira.

npm install

bower install

Zerbitzaria martxan jartzeko kasu hontan Gulp erabiltzen da.

gulp serve

Hau egin ondotik adibidea martxan jarrita egongo da. Oinarri gisa hartu daiteke proiektu bat hasteko momentuan. Zalantzarik gabe, zeresan handia emango duen gaia izango da Web osagaiena eta segur aski honi buruz gehiagotan solasteko parada izango dugu.