Novosti v ECMAScript 2015 (ES6) – 2. del

V prvem delu bloga smo pregledali nekaj novosti ES6. Preden nadaljujemo, še enkrat naštejmo predelana poglavja:

  1. nova rezervirana beseda za deklaracijo spremenljivk »let«,
  2. vpeljava deklaracij konstant z rezervirano besedo »const«,
  3. enostavnejše ustvarjanje objektov,
  4. prirejanje vrednosti  spremenljivkam iz objektov (destrukturiranje),
  5. spremembe na področju privzetih parametrov in vrednosti,
  6. vpeljava nove sintakse rest-operatorja.

V drugem delu si bomo ogledali še nekaj uporabnih novosti. Prva med njimi je gotovo uporaba razredov in dedovanja, ki jih do zdaj v JavaScriptu ni bilo. Za vse, ki smo se pred razvojem z JavaScriptom ukvarjali z objektno orientiranimi jeziki, je ta novica izredno spodbudna.

Razredi in dedovanje

Poglejmo si primer deklaracije razreda:ES6 - class

Na zgornji sliki lahko vidimo, da razrede označimo z rezervirano besedo »class«. Vsak razred potrebuje posebno metodo, imenovano (konstruktor), ki je klicana pri ustvarjanju razreda. Če je ne implementiramo, se implementira sama brez vhodnih parametrov. Za primer smo želeli izdelati podjetje, ki potrebuje ime, zato je potreben tudi vhodni parameter »name«, kot je razvidno iz primera. V razred smo dopisali tudi metodo »toString«, ki jo je možno poklicati preko ustvarjene instance razreda. Seveda pa lahko uporabimo tudi statične metode, ki jih je mogoče klicati neposredno preko imena razreda. Razredi lahko imajo tudi metode »getters« in »setters«:es6 - class2

Kot smo omenili že prej, nam razredi prinašajo tudi možnost dedovanja. Dedovanje v praksi uporabimo kot kaže primer:ES6 - class3

V tem primeru lahko vidite tudi, kako se uporablja metoda »super« v konstruktorju ali obični metodi za dosego metod in spremenljivk iz nadrejenih razredov.

Asinhrono nalaganje in obljube

Nekaj sprememb je tudi pri asinhronem nalaganju in uporabi obljub (angl. promise). Po novem se sintaksa malenkost spremeni, in sicer, poklicati je treba razred »Promise«. Ta ima konstruktor, ki pričakuje dva parametra: prvi parameter je »resolve«, drugi pa »reject«. Primer ustvarjanja obljube:ES6 - promises

In še primer, kako obljubo uporabiti, hkrati pa preveriti, ali je uspešno zaključena:ES6 - promises2

Kot vidimo na primeru zgoraj, lahko preverjamo za vsako obljubo posebej ali za vse obljube hkrati. Obljube si je vredno še posebej ogledati, saj se boste z njimi srečevali v novejših API-jih in knjižnicah.

Metode debele puščice

Naslednja uporabna novost je sintaksa »arrow function«, za katero se uporablja debela puščica (=>). Izredno uporabna je pri povratnih klicih (angl. callbacks) in anonimnih metodah (angl. anonymous functions). Poglejmo si, kako bi bil videti zgornji primer obljub s pomočjo »arrow function«:

ES6 - arrowfunction

Kadar imamo blok, pa je treba dopisati še katero vrednost, vračamo. Prednost »arrow function« pred običajnimi metodami je, da ni omejena z rezervirano besedo »this«. Spodaj si lahko ogledate primer, kako bi bila videti ena izmed implementacij v ES5 in kako je videti zdaj v ES6 z uporabo »arrow function«.ES6 - arrowfunction2

V ES6 lahko zdaj uporabljamo tudi vnaprej definirane razrede »Map« in »Set«, ter se skozi njih sprehajamo z novo sintakso zanke »for … of«. Novost je tudi uporaba vzorcev z uporabo znaka backticks »`«, ki nam omogoča sestavljanje nizov brez vezajev »+« in večvrstičnost. Primer:ES6 - templateliterals

Zadnja novost v tem prispevku je uporaba modulov oz. sklopov, ki so velika pridobitev za dinamično nalaganje vsebine. Pred ES6 smo v ta namen uporabljali različne knjižnice za asinhrono nalaganje. Ker pa ni bilo nobenega standarda, smo se vedno spraševali, katera knjižnica je najboljša. Z vpeljavo modulov v ES6 teh težav naj ne bi bilo več. Pri pisanju modulov, ki jih želimo kasneje uporabiti v katerem izmed drugih modulov, preprosto le določimo, katere funkcionalnosti želimo prikazati navzven. To storimo z izbiro rezervirane besede »export«. Kadar želimo te module vpeljati v drugem modulu, pa jih enostavno vključimo z rezervirano besedo »import«. Spodaj lahko vidite še nekaj primerov, kako iz ločenega modula uvoziti njegove funkcionalnosti.ES6 - modules

Na primeru iz modula, zapisanega v datoteki »lib.js«, izvozimo dve metodi ter jih v glavnem modulu »main.js« uvozimo ter uporabimo. Uporabili smo tri različne načine, kako lahko dostopamo do drugih modulov in njihovih funkcionalnosti. V prvem uvozimo obe metodi po imenu metode, pri drugem uvozimo samo metodo »square« in ji priredimo lokalno ime, v tretjem primeru pa uvozimo vse, kar je mogoče, iz modula »lib.js«. Več primerov o modulih in ostalih novih oziroma posodobljenih funkcionalnostih si lahko ogledate na http://es6-features.org/.

Novosti v ECMAScript 2015 (ES6) – 1. del

Razvijate spletne aplikacije v JavaScriptu? Če še vedno uporabljate ES5 ali starejše različice, potem vam tokrat predstavljamo nekaj prednosti, ki jih prinaša ES6.

ES6 postaja vse bolj in bolj priljubljena izbira med razvijalci, saj so bile težave z brskalniki v večini primerov že odpravljene. Za podporo v starejših brskalnikih, pa tudi v nekaterih novejših, zaenkrat še vedno potrebuje »transpiler«. »Transpiler« iz vaše kode ES6 ustvari kodo ES5, ki jo podpira večina brskalnikov, istočasno pa ustvari še datoteke »source map«, ki razvijalcu omogočajo razhroščevanje kode ES6, ki jo je napisal sam. Med pogosteje uporabljene »transpilerje« sodita:

  1. Traceur, projekt, ki so ga razvili pri Googlu, in
  2. Babeljs, idejni projekt mladega Sebastiana McKenzieja.

Vsak od njiju ima svoje prednosti in slabosti, za več informacij pa si lahko ogledate njuno dokumentacijo (Traceur, Babeljs). Beri naprej

Kako nastaviti metapodatke, vidne pajkom in družbenim medijem, v aplikacijah AngularJS 1.x

Ste že poskusili razviti dinamično spletno aplikacijo z AngularJS 1.x? Mi smo jo in omenjeno ogrodje nam je zelo všeč. Večina razvijalcev se hitro po objavi dinamične spletne aplikacije začne spraševati, kako nas vidijo in indeksirajo pajki raznih iskalnikov, kot so Google, Bing, Yahoo, Baidu itd. Na žalost je realnost, da imajo pajki v tem času še težave s prebiranjem dinamične spletne vsebine. Tako smo prisiljeni poiskati rešitev, ki omogoča, da se spletna aplikacija pravilno indeksira v iskalnikih, in, v primeru objav na družbenih medijih, tudi pravilno prikaže. Beri naprej

Razvoj AngularJS 1.3, 1.4 in kaj pričakovati v AngularJS 2.0

AngularJS je trenutno eno najbolj priljubljenih JavaScript ogrodij za razvoj spletnih aplikacij na strani odjemalca. To kaže tudi dejstvo, da je na spletnem portalu github najbolj podprto s strani uporabnikov.

https://github.com/showcases/front-end-javascript-frameworks

https://github.com/showcases/front-end-javascript-frameworks

Ker se že nekaj časa govori, da prihaja med nas novejša, popolnoma spremenjena različica ogrodja AngularJS, smo se odločili, da o teh novostih nekaj malega zapišemo. V prispevku z naslovom »Prispevek s konference OTS 2015 z naslovom ‘Ogrodje AngularJS za portal COBISS/SciMet’« lahko najdete nekaj informacij o tem, kaj AngularJS sploh je in kako smo se lotili razvoja enega izmed spletnih portalov. V tokratnem prispevku bomo na kratko pogledali, kako se je AngularJS razvijal skozi zgodovino oziroma spoznali nekaj zanimivejših funkcionalnosti, ki jih je pri razvoju pridobival. Da se ne spuščamo preveč v globino, bomo začeli kar pri različici 1.3. V tej različici smo razvijalci pridobili:

  • izboljšave zmogljivosti,
  • enkratno povezovanje podatkov (angl. one-time bindings),
  • ngModel.$validators,
  • direktivo ngMessages,
  • direktivo ngModelOptions.

A hkrati smo tudi nekaj izgubili. Kaj smo izgubili? Uporabnike spletnih brskalnikov IE8 in nižje. Več o zgoraj naštetih pridobitvah lahko preberete na spletni strani.

Beri naprej

Prispevek s konference OTS 2015 z naslovom “Ogrodje AngularJS za portal COBISS/SciMet”

Na letošnji 20. konferenci OTS 2015, ki se je odvijala na Fakulteti za elektrotehniko, računalništvo in informatiko v Mariboru, smo imeli predstavnike med predavatelji tudi IZUM-ovci. Luka Juršnik - OTS 2015 - IZUM V nadaljevanju si lahko preberete povzetek prispevka.

V zadnjih dvajsetih letih je internet doživljal ogromno rast, v povprečju kar za 2 % svetovne populacije na leto. Vse se je začelo s statičnimi spletnimi stranmi, kasneje so se začeli uvajati tudi interaktivni elementi, ki jih je omogočil JavaScript, kar hitro za tem pa so se na široko odprla vrata spletnim aplikacijam, ki uporabljajo povezovanje s strežniki in omogočajo asinhrono nalaganje vsebin (AJAX). Takšne spletne aplikacije so predstavljale veliko konkurenco klasičnim namiznim aplikacijam. Intenziven tehnološki razvoj v zadnjih letih je omogočil boljši izkoristek potenciala odjemalcev pri razvoju spletnih aplikacij. Beri naprej