Angular +a - rubrika: Programování: JavaScript

6 kohven
položil/-a 2.8.2015
 
upravil/-a 2.8.2015

Inspirovala mě otázka http://devel.cz/otazka/react-js-a
Co by ste uvedli jako + a - přechodu z jquery na angular? Plusy jsou jistě zajímavé a často zřejmé, ale nejzajímavější budou asi mínusy. Pro mě je např. plus, že to nedovolí začátečníkům příliš prasit a to díky relativně omezeným možnostem šablonování. To ale zase souvisí se složitější optimalizací výkonu.

odkaz
5 Víťa Plšek - an...
odpověděl/-a 7.8.2015

Přiznám se, že jsem nikdy nenapsal Single page application v jQuery. S jQuery jsem dřív dělal věci stylem - server vyrenderuje šablonu, já vytvořil pageobject, který si osahá potřebné elementy a pak jsem pomocí něj získával a opět měnil data. V ideálním případě jsem iniciální stav předal v jsonu. Což ale v aplikacích co vídám ještě dnes není uplně pravidlem a model je vlastně "utopen" v html. SPA jsem začal psát až právě s příchodem Angularu.

Ne každý chápe podstatný rozdíl mezi oběma uvedenýma

  • jQuery je v první řadě knihovna pro manipulaci s DOM, řízení eventů a s určitou podporou pro odesílání Ajax requestů
  • Angular je framework pro tvorbu Single page aplikací.

Plusy

  • ucelený framework který Tě vede a obsahuje všechno co pro SPA potřebuješ - dependenci injection, šablonový systém, routing, komunikaci se serverem ...
  • výborná a aktuální dokumentace - z dokumentace se můžeš často hned prokliknout na funkční příklad a zkoušet jej
  • v současné době opravdu velká komunita - abys zvládl přečíst všechny články co vycházejí, chce to skoro plný úvazek :)
  • většinu věcí uděláš bez problémů bez cizích komponent - vlastní direktivy jsou opravdu mocné, když je pochopíš
  • skvělá podpora formulářů - včetně validací a dobré obsluhy stavu jednotlivých prvků
  • html je hlavní vyjadřovací platforma pro view - v podstatě angular rozšiřuje html
  • model není "uložen" v html ale je od view oddělený.
  • aplikace je datově orientována - můžeš určit deklarativně vazbu na data a databinding za Tebe udělá zbytek
  • interceptory - toto je pro mě jedna z killing feature - jsou to v podstatě java filtery na frontendu
  • vynikající testovatelnost - nechci říkat, že se testování v javascriptu díky němu rozmohlo, ale rozhodně bylo na svou dobu hodně pokrokové
  • framework navržený pro programátory - Miško Hevery je původně Java vývojář
  • pro začátečníky s javascriptem je příjemné odstínění od častých problémům
  • nástroj na e2e testy angular aplikací Protractor - rozšíření nad seleniem o možnost vázat se na strukturu dat místo na html, výborná pomoc pro Automatizační testery
  • dvoucestný databinding - dobrý sluha a zlý pán kvůli použití dirty checkingu. Pokud víš jak funguje a co nesmíš dělat tak na problém s výkonem pravděpodobně nenarazíš

To, že se jedná o ucelený framework, je pro velké firmy často zásadní výhoda proti jiným frameworkům. Je to framework pro programátory, jde z něj i dost poznat to, že jej tvořili právě backend vývojáři. Je tak hodně příjemný zejména Javistům, kteří často přecházejí na SPA z komponentových frameworků. Právě ve velkých firmách je vnímání webové aplikace jako další externí aplikace dost přínosné, protože hlavní systém není jen web a vystavuje api velké spoustě jiných systémů. Jestli máš zájem, podívej se na naše shrnutí výhod Angularu právě pro Javisty na březnovém CZJUGU v Brně. Je tam nejen video, ale i zdrojáky aplikace o které jsme povídali.
http://www.angular.cz/akce/jug-24-03-2015/
Vidím oblibu taky u kódérů a implementátorů, kteří hodně pracují s šablonami, pro ně je angular vcelku intuitivní, rychle se naučí direktivy pro ovládání view a jsou schopni udělat velké množství věcí sami, když jako programátor dopíšeš novou, dokážou jí použít bez zásahů do kódu.

Mínusy

  • angular není vhodný pro samostatné komponenty - Angular je navržen pro tvorbu SPA, pokud se snažíš použít ho "jen na část své aplikace" opravdu můžeš zaplakat.
  • nízká kvalita knihoven třetích stran - např na ngmodules.com najdeš často opravdu shity. Toto bude problém ale i u jquery
  • odstínění od javascriptu - ačkoli já to mám v plusech, toto je Angularu spíše vytýkáno, v podstatě se víc učíš framework než javascript
  • v šabloně můžeš i "programovat" - deklarativní zápis láká k přímé modifikaci modelu nebo k složitým podmínkám, to ale nechceš, logika by měla být jinde, prezentační v controlleru, aplikační v service
  • pojetí modelu je v Angularu dost vágní - musíš si rozmyslet jak s daty pracovat, pokud Ti stačí načíst dat při vstupu na routu vždy znovu, je to ok, ale jinak je to práce navíc
  • direktivy a jejich deklarativní užívání je složité pochopit - toto vede k opravdu špatně napsaným aplikacím, manipulaci s Domem v controlleru a problémům s výkonem
  • dodnes mi vadí pojmenování některých věcí - "transclude", filter "filter", service, constant ...
  • dirty checking - způsob, kterým Angular přenáší u databindingu práci z programátora na procesor, nemusí představovat problém pokud víš co nedělat
  • nemá podporu renderování na serveru - seznam jej sice zvolil pro zbozi.cz, sreality.cz a stream.cz, takže to rozhodně jde, ale musíš překonat velké množství problémů, já bych jej na takovou aplikaci spíš nepoužil
  • učící křivka vypadá tak jak píše Ben - http://a3.files.readwrite.com/image/upload/c_fit,cs_srgb,w_620/MTE5NDg0M... - nadchne Tě jednoduchost a záhy si pěkně nabiješ
  • paranoia po oznámení Angular 2 a rozpolcený názor na Angular v české javascriptové komunitě

Tys psal, že se v něm nedá prasit, to není pravda, pokud nepochopíš základní koncepty a stavební kameny, vyleze Ti z toho taky slepenec.

Musím říct, že to opravdu není náhrada jquery, je to framework na tvorbu aplikací, ne na tvorbu webových stránek. Z toho vyplývá i to, že nemá právě podporu renderování na serveru, seznam to řeší pomocí phantomJS.
Pokud jej použiješ na aplikace za přihlášením, kde je nejvíc vidět jeho použití, tak na tento problém nenarazíš. Proto ta obliba velkých firem, které dělají informační systémy.
Špatně se používá jen na část projektu. V podstatě všechny pokusy o částečnou aplikaci, které jsem viděl, skončili fiaskem. Viděl jsem problémy způsobené snahou komunikovat mezi dvěma angulařími aplikacemi, které se tvářili jako samostatné komponenty. Pokusy ovlivňovat angulaří formulář, odesílat jej postem nebo modifikovat pomocí jquery. Případně brát každou stránku jako samostatnou aplikaci a vůbec nepoužívat routing. Snahy napojit Angular na serverový komponentově orientovaný framework jako je Wicket nebo .NET MVC jinak než přes REST taky dopadají katastroficky. To jsou pak právě ty případy, na které se pak ukazuje prstem a viní se z toho Angular. Je prostě určený na to, abys v něm postavil celou aplikaci a bral ji jako externí vzhledem k backendu.

V době oznámení Angular 2 došlo k velké paranoje okolo toho, že stávající aplikace nezmigruješ. Dle mě je to předčasné. Ono to vždycky nějak půjde a autoři se tomu snaží pomoct co můžou třeba component routerem. Ale dle mě to většinou nebude nutné. Pokud pro systém zvolíš dobrou technologii, je pravděpodobné, že bude pro něj dobrá i za x let. Viz používané a poptávané technologie ve velkých firmách.

Často kritizovaný dirty checking může představovat problém pokud tvoříš "excel" nebo realtime systém kde se mění tisíce věcí naráz. Tam budeš muset vykreslování řešit nějak jinak abys předešel problémům s výkonem. V běžných informačních systémech se s tím při dodržování správných postupů nesetkáš.

To je všechno co mě k tomuto teď napadlo, kdyžtak se ptej, můžem se pobavit i o konkrétním projektu.

Komentáře

  • Anonym : Naprosty souhlas. jQuery se neda s AJS porovnavat. AJS je daleko komplexnejsi nastroj. 7.8.2015
  • kradecek : S učící křivkou a prasením mám zkušenosti. Zkoušel jsem to na jednom malém projektu a skončilo to tak, že jsem poprosil Milana Lemperu, aby to za mě dotáhl, protože narozdíl ode mne pochopil, jak to celé funguje. 11.8.2015
  • Víťa Plšek - an... : Mno chce to jít postupně, myslet jednoduše a nebát se toho. Angular je ve své podstatě poměrně jednoduchý. Jen pro někoho kdo nikdy neviděl SPA je to ze začátku trošku nezvyk. Ale Jinak Milan Lempera jako poradní orgán je rozhodně dobrá volba :) 12.8.2015
  • VirtualSkiper : Ja osobne vnimam Angular jako (samostatny) programovaci jazyk nad JS. Pro rekneme databazove programatory, kteri maji (jako ja) problem prijmout, ze zapisuju cast modelu primo do obrazovky je to "enabling technology". Uplne souhlasim s tim ze Angular (nechapu proc) rezignoval na Model. Pokud nekdo zacina urcite bych doporucil od zacatku pouzivat http://www.js-data.io/. Odpoledni prototyp se napise vuci LocalForage, Alpha se odladi na Firebasi a finalni aplikace se muze provozovat treba na mySql to vse doinstalovanim nekolika pluginu a rekneme zmenou cca peti radku konfigurace. 29.8.2015
  • kohven : Nerozumím co je myšleno tím "Angular rezignoval na Model"? Napak mi přijde, že v angularu se kolem modelu točí úplně všechno. Správně bych v angularu neměl ovládat nic jiného než model a zbytek má být deklarativně nabindovaný na ten model. Nezaměňuje se tady model a databáze? 31.8.2015
  • VirtualSkiper : O cem mluvis jako o modelu je view-model. Model je vlastne cele ovladani databazoveho jadra na ceste mezi klientem a serverem. Oficialne se rika ze "Model in AngularJS is a singleton defined by service". Ale co a jak ma servisa umet abys dostal data z disku serveru ktery bezi nekde v Amazonu do tveho view-modelu? Realne bys v servisach vubec nemel resit jak a proc se domluvit s databazi, aby ti vratila kolekci zaznamu, nebo prave jen ten jeden spravny zaznam. V Angularu si to (na rozdil od ostatnich frameforku) musis vsechno napsat sam. Znova dokola, 100x stejne a 100x spatne. Tohle resi az JSdata (drive AngularData). Do servisy si injektnu tridu DS (Data Storage), ktera mi vytvari jednotnej iterface bezici v pameti. Pak uz jenom nadefinuju strukturu modelu (ie strukturu databazove vety), nadefinuju si relace mezi jednotlivymi modely. Takto upravenou servisu injektnu do kontroleru, okamzite mam k dispozici nejakou predem definovanou mnozinu synchronnich a asynchronnich metod kterymi pak s modelem (interfacem) komunikuju a cele to zacne samo od sebe fungovat. O zbytek se nestaram. Podle toho jake doinstaluju adaptery muj common interface komunikuje s databazi. Je mi pak uplne jedno jestli ukladam do Localforage, Firebase, MongoDB, Redis, Rething, nebo standardnich SQL databazi tzn. Postgres/MySQL/MariaDB/SQLite3. V klientske aplikaci (v Angularu) se krome tri radku v .config() sekci absolutne nic nemeni. Tak tohle mi v Angularu chybi/chybelo ;) 10.10.2015

Pro zobrazení všech 6 odpovědí se prosím přihlaste:

Rychlé přihlášení přes sociální sítě:

Nebo se přihlaste jménem a heslem:

Zadejte prosím svou e-mailovou adresu.
Zadejte své heslo.