Web osagaiak (Web Components)

2015/07/28 · Julen Irazoki

Duela gutxi hasitako proiektu baten harira, analisi fasean eskakizunak aztertzen ari ginela, garapena egiteko Web Component-ak erabiltzea erabaki genuen. Kontua da, webgunean berrerabilgarriak ziren zatiak behar genituela eta gainera gailu desberdinetarako moldagarriak izan behar zutela. Web Component-ek aukera hori ematen dute, eta badirudi web garapenean azken urteetan joera hau gailentzen ari dela eta etorkizunean ere ildo hau jarraituko duela.  

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.


facebook
0
twitter
iametza interaktiboa

Zirkuitu ibilbidea 2 - 1. pabiloia
Lasarte-Oria (Gipuzkoa)

T (+34) 943 376 716

kaixo@iametza.eus

Euskarabildua Puntu eus
iametza interaktiboa iametza interaktiboa iametza interaktiboa iametza interaktiboa iametza interaktiboa iametza interaktiboa
©2015 iametza interaktiboa