A web komponensekbe szervezve: teszteltük az Angular2-t

2016. febr. 15.

Noha még csak bétában jár az Angular2, fejlesztői csapatunk máris kipróbálta, hogy a mindennapokban felmerülő problémákat hogyan tudjuk megoldani az új keretrendszer segítségével. A tapasztalatok eddig igencsak meggyőzőek.

Modern webfejlesztés - Angular2

Az Angular2 merőben más aspektusba helyezi a webfejlesztést. A gondolkodásunknak át kell alakulnia, mindent komponensekben kell látnunk. Fejlesztői szemmel ez hatékonyabb fejlesztést, újrafelhasználható, hordozható komponensek létrehozását jelenti, amelyeket más projektekben fel tudunk használni. Üzleti szemmel nézve, a fejlesztési idő lerövidül, a költségek csökkennek.

Az elsődleges fejlesztési nyelv a TypeScript lett (az Angular2 forráskódja is TypeScript kód), ami a típusossággal vértezi fel a JavaScriptet. A különböző IDE-k által nyújtott típusellenőrzést, refaktorálást, kódkiegészítést igénybe tudjuk venni, a végeredmény pedig jobb minőségű kód, jobb minőségű termék. A fejlesztés történhet még Dart, ECMAScript 6 és ECMAScript 5 nyelveken is.

Performancia

Napjaink SPA-k (Single Page Application) nagy problémája, hogy miután az oldal betöltődött egy nagy ürességet, esetleg loading screen-t látunk. Aztán a tartalom egyszer csak megjelenik. Ez különösen mobil alkalmazások esetén probléma, amiknél ugyanis a felhasználók a folyamatossághoz vannak szokva.

Ezen segít az Angular2 a szerver oldali render funkcióval. A szerver már egy kész html oldalt küld vissza, amit a böngészőnek csak meg kell jelenítenie.
Ennek a megoldásnak a gyors startup-on kívül a másik nagy előnye, hogy a SEO problémát is megoldja, a Google le tudja indexelni a tartalmat, és releváns találatokat tud mutatni.

A működés folytonosságáról a teljesen újraírt változás-követés gondoskodik, illetve az, hogy az egész alkalmazás Web Worker-ben fut. Ez lényegében a többszálúságot hozza el a JavaScript világba, így lehetőség van a számításigény feladatokat háttérszálakba delegálni.

Jövőre hangolva

A TypeScript-nek hála a kódot a jövő JavaScript kódjaként tudjuk írni, ami biztosítja a modern kódbázisok születését. Noha a böngészők még nem, vagy csak részben támogatják ezeket a plusz nyelvi elemeket, mégis tudjuk használni azokat, mert a TypeScript forráskód olyan JavaScript-re fordul, amit már képesek értelmezni.

Az Angular2-ben minden komponensekből áll, amelyek újrafelhasználhatóak. A még ennél is jobb hír az az, hogy nem csak Angular2 komponenseket tudunk behúzni más projektekbe, hanem akár rendes, az ajánlásnak megfelelő Web komponenseket is (egyelőre Web komponensekre még csak a Chrome nyújt teljes támogatást, de a Microsoft Edge-ben folyamatos az implementálás).

Böngészőtől függetlenítve

Felmerülhet a kérdés a sok újdonság kapcsán, hogy mégis mely böngészők támogatottak. Nos, a paletta széles skálán mozog, nevezetesen a Chrome, Firefox, IE9+, Edge, Safari, Android 4.1+ a támogatottak.

Az Angular2 nincsen a böngésző DOM-jához kötve, így nem csak webes alkalmazások készíthetők vele, hanem mobilos hibrid app-ok is az Ionic2 segítségével, illetve akár natív mobil app-ok is iOS és Android platformokra Telerik NativeScript használásával.

Garancia a sikerre

A Google, a Microsoft és sokan mások vesznek részt az Angular2 fejlesztésében. Az, hogy a keretrendszer számos jövő JavaScript-jét képező technológiát használ, mindenképpen a React.js korszerű, modern versenytárssá emelik az Angular2-t.

Az sem elhanyagolható tény, hogy a Google számos belső projektjében már most használja, továbbá a népszerű, mobil alkalmazások fejlesztésre alkalmas keretrendszerek (például Ionic2 vagy Telerik NativeScript) is támogatják a technológiát.