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.

Z napovedjo različice 1.4 so napovedovali velike spremembe, med drugim tudi novi usmerjevalnik (angl. router) in funkcionalnosti, ki bi pripravljale aplikacije, razvite v AngularJS 1.x, na prehod v AngularJS 2. A so morali tako usmerjevalnik kot pomočnika komponentam prestaviti na naslednjo različico (1.5), saj bi se rok izida različice 1.4 preveč oddaljil. Tako smo bili v različici 1.4 deležni odprave več napak (več kot 100) in pridobitev novih funkcionalnosti(okoli 30):

  • povsem obnovljene animacije,
  • odpravljene težave in dodane novosti v $http storitvi,
  • dodani zametki internacionalizacije aplikacij (‘i18n’) – nov modul ngMessageFormat,
  • dodan prevajalnik povezav,
  • modul ngCookies,
  • dodana podpora dinamičnim sporočilom v direktivi ngMessage znotraj form,
  • ng-jq, s katerim določimo, ali želimo uporabljati prej Angularju neželen jQuery ali jqLite,
  • angular.merge,
  • limitTo filter,
  • $anchorScroll,
  • $time,
  • $timeout …

Dodanih ali dopolnjenih je bilo še precej funkcionalnosti, tudi kar zadeva dosegljivost, filtre, testiranje in ostale dele ogrodja. Seveda so tudi v tej različici pohitrili samo ogrodje, tokrat so dali poudarek na razčlenjevalnik izrazov (angl. angular expression parser) in tako pridobili kar 25 % hitrosti. Več o različici AngularJS 1.4 si lahko preberete tukaj.

Da pa prehod iz ogrodja AngularJS 1.3 na 1.4 nebi sprožil preveč vznemirjenja, so pri dokumentaciji dodali še prispevek o migraciji aplikacije(več).

angularjs2

Vse več in več se govori tudi o zloglasnem prestopu AngularJS na različico 2.x, ki bi naj prinesla drastične spremembe v razvoju AngularJS aplikacij. Kakšne spremembe so zasnovane in na kak način so se lotili izdelave ogrodja pri Googlu?

Prva in največja sprememba je vsekakor ta, da je ogrodje AngularJS 2.0 zasnovano za mobilne naprave, kar pa ne pomeni, da pri razvoju ne razmišljajo o podpori za namizne računalnike. Nasprotno: tudi tam želijo podati odlično podporo. Nam, razvijalcem pa zagotavljajo, da bo ogrodje AngularJS še vedno temeljilo na podatkovnem povezovanju, razširjanju HTML-ja in bo testno usmerjeno. Če želite soustvarjati in podajati mnenja o spremembah so na Google drive(https://drive.google.com/drive/folders/0B7Ovm8bUYiUDR29iSkEyMk5pVUk) dosegljivi dokumenti o njihovih pristopih, principih oblikovanja itd.

Oblikovanje ogrodja AngularJS 2.0 cilja na čim večjo uporabnost, tako strmijo k modernim brskalnikom in uporabi ECMAScript 6. Zaradi nepodpore ES6 s strani brskalnikov, trenutno uporabljajo Traceur prevajalnik(https://github.com/google/traceur-compiler), ki generira lep ECMAScript 5, ki pa je v brskalnikih že podprt.

Ustvarjalci ogrodja iz različice v različico izboljšujejo hitrost, v različici 2.0 želijo izboljšati predvsem zaznavanje sprememb med DOM in JS objekti. Ker postaja ogrodje vedno večje, so pristop razvoja usmerili v modularni razvoj, kar pomeni, da bomo lahko razvijalci posamezne module vključevali po potrebi in s tem optimizirali velikost ogrodja. Modularni pristop bo izjemno uporaben za mobilne naprave in za razvijalce, ki želijo uporabiti posamezne funkcionalnosti v drugih ogrodjih JavaScript. Poleg izboljšav zgoraj omenjenih zmogljivosti ogrodja so pri Angularju usmerjeni še v izboljšanje hitrosti nalaganja prve strani in splošno izboljšanje uporabniške izkušnje.

Seveda tudi v različici 2.0 ne stremijo le k zmogljivosti, ampak želijo ogrodje razviti, tako da bi bilo čim enostavnejše za uporabo. To želijo doseči z zmanjšanjem kompleksnosti dobro poznanega vrivanja odvisnosti, v mislih imajo tudi nam pogrešano, iz prejšnjih različic ogrodja, leno nalaganje JavaScript delov. Zanimivo je tudi, da bodo v ogrodju še izboljšali in olajšali uporabo že tako dobro poznanih funkcionalnosti kot sta vzorčenje in direktive. Seveda pa je tukaj še ogromno funkcionalnosti, ki jih bodo ali pa ne bodo obdelali. Več si lahko preberete na povezavi.

Da ne pozabimo omeniti še treh uporabnih posodobitev: prva so animacije na dotik, kot je recimo brisanje iz liste z pomikom levo-desno. Druga je usmerjevalnik, ki je bil velikega pomena pri razvoju različic 1.x. Novi usmerjevalnik bo ponujal možnost široke uporabe tudi izven Angular aplikacij, usmerjanje na osnovi stanj (npr. vmesna modalna okna), integracijo z avtentikacijo in avtorizacijo, opcijsko bo možno tudi ohranjanje stanj nekaterih pogledov, kar je odlično za mobilne naprave. Kot tretjo uporabno posodobitev štejemo stalnost povezave, ki razširja do sedaj uporabljeno skromno storitev $http in $resource.

Povzeto iz:

 

 

Dodaj odgovor

Vaš e-naslov ne bo objavljen.

Lahko uporabite te oznake HTML in atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>