AngularJs jest jednym z najpopularniejszych framework\u00f3w JavaScriptowych umo\u017cliwiaj\u0105cym tworzenie zar\u00f3wno prostych jak i skomplikowanych aplikacji client side w oparciu o architektur\u0119 MVC.<\/p>\n\n\n\n
W ci\u0105gu kilku lat oka\u017ce si\u0119 czy jest kolejn\u0105 zabawk\u0105 wujka Google czy stabilnym i wspieranym produktem, w kt\u00f3ry warto inwestowa\u0107 czas i pieni\u0105dze, jednak z ca\u0142\u0105 pewno\u015bci\u0105 jest powa\u017cnym graczem na rynku i warto mu si\u0119 bli\u017cej przyjrze\u0107.<\/p>\n\n\n\n
Du\u017co kontrowersji pojawi\u0142o si\u0119 wraz z rozpocz\u0119ciem prac nad wersj\u0105 2.0 opart\u0105 o AtScript (rozszerzenie MS TypeScript), przewiduj\u0105c\u0105 ca\u0142kowite przebudowanie frameworka i now\u0105 sk\u0142adni\u0119. Nie jest to zbyt dobra informacja dla firm, kt\u00f3re zainwestowa\u0142y w du\u017ce projekty, wymagaj\u0105ce utrzymania i rozwoju przez najbli\u017csze lata, poniewa\u017c nie mo\u017cna p\u0142ynnie przeprowadzi\u0107 migracji wersji 1.X do wersji drugiej. Na pocieszenie Google zapowiada mo\u017cliwo\u015b\u0107 mixowania obu wersji w ramach jednej aplikacji i supportu wersji 1.X.<\/p>\n\n\n\n
W tym artykule skupi\u0119 si\u0119 na wersji 1.3, z kt\u00f3r\u0105 mia\u0142em okazj\u0119 pracowa\u0107 rok przy dw\u00f3ch projektach. Jak ka\u017cdy framework angularJS nie jest pozbawiony wad, tote\u017c postaram si\u0119 przedstawi\u0107 dobre i ciemne strony mocy, z kt\u00f3rymi warto si\u0119 zapozna\u0107 przed rozpocz\u0119ciem prac i wyborze technologii.<\/p>\n\n\n\n
Zastosowanie<\/strong> Wstrzykiwanie zale\u017cno\u015bci<\/strong> Dyrektywy i szablony<\/strong> Obustronne bindowanie<\/strong> Wsp\u00f3\u0142praca z REST<\/strong> Wsp\u00f3\u0142praca z zewn\u0119trznymi bibliotekami<\/strong> Wydajno\u015b\u0107<\/strong> Nauka i dokumentacja Reasumuj\u0105c, wyb\u00f3r frameworka aplikacji SPA to kwestia kompromis\u00f3w, na rynku istnieje ich wiele, mi\u0119dzy innymi: DurandalJS, KnockoutJS, Aurelia, React, Flux, BackboneJS, Ember. <\/p>\n\n\n\n Istotne jest, aby zrozumie\u0107 pozytywne i negatywne cechy ka\u017cdego z nich i efektywnie je wykorzysta\u0107, tu niestety nie ma drogi na skr\u00f3ty. Z ca\u0142\u0105 pewno\u015bci\u0105 angularJS znajduje si\u0119 w \u015bcis\u0142ej czo\u0142\u00f3wce kr\u00f3lewskiej kategorii framework\u00f3w JavaScript, przy czym wersja 2.0 wzbudza szczeg\u00f3lne emocje i oczekiwania jako produkt Google z bardzo du\u017c\u0105 spo\u0142eczno\u015bci\u0105 i wsparciem.<\/p>\n\n\n\n ***<\/p>\n\n\n\n Wi\u0119cej o Angular mo\u017cesz dowiedzie\u0107 si\u0119 r\u00f3wnie\u017c z innych artyku\u0142\u00f3w naszych ekspert\u00f3w<\/a>. <\/p>\n\n\n
Niew\u0105tpliwie mo\u017cemy budowa\u0107 z\u0142o\u017cone aplikacje SPA zar\u00f3wno webowe jak i mobilne, odci\u0105\u017caj\u0105c backend od renderowania kodu html a skupieniu si\u0119 na operacjach biznesowych. Wykorzystuj\u0105c bootstrapp, css3 czy animacje mo\u017cemy zaskoczy\u0107 klienta efektem „wow”.<\/p>\n\n\n\n
Dependency Injection zdecydowanie u\u0142atwia testowanie, umo\u017cliwia \u0142atwe przekazywanie i wsp\u00f3\u0142prac\u0119 komponent\u00f3w w ramach z\u0142o\u017conego systemu. Warto tu zwr\u00f3ci\u0107 na uwag\u0119 na kwesti\u0119 minifikacji przy bezpo\u015brednim przekazywaniu parametr\u00f3w, kt\u00f3ra zmieniaj\u0105c nazwy, potrafi przerwa\u0107 dzia\u0142anie aplikacji z racji specyfiki dzia\u0142ania kontenera DI w wersji 1.X. Przy czym istnieje pewne ma\u0142o eleganckie rozwi\u0105zanie tego problemu.<\/p>\n\n\n\n
Dyrektywy, przyjmuj\u0105ce posta\u0107 atrybut\u00f3w DOM, s\u0105 jednym z ciekawszych element\u00f3w frameworka, mog\u0105 by\u0107 wielokrotnie u\u017cywane zgodnie z zasad\u0105 DRY. Ponadto istnieje mo\u017cliwo\u015b\u0107 wykorzystania tych wbudowanych (np.ngClick, ngSubmit, ngShow, ngModel) jak i stworzenia w\u0142asnych, pocz\u0105wszy od prostych walidacji na widoku, po budowanie z\u0142o\u017conych komponent\u00f3w wype\u0142nionych logik\u0105 biznesow\u0105, co pozwala na odchudzenie kontroler\u00f3w.<\/p>\n\n\n\n
Dzi\u0119ki tej funkcjonalno\u015bci interfejs jest automatycznie uaktualniany pod wp\u0142ywem zmian modelu danych u\u017cytkownika czy tych pochodz\u0105cych z serwera bez konieczno\u015bci bezpo\u015bredniej obs\u0142ugi programisty. Zapewnia wygod\u0119 kosztem wydajno\u015bci.<\/p>\n\n\n\n
Niew\u0105tpliw\u0105 zaleta jest wbudowana komunikacja REST za pomoc\u0105 serwis\u00f3w $http i $resource.<\/p>\n\n\n\n
AngularJS \u015bwietnie wsp\u00f3\u0142pracuje z wieloma frameworkami mi\u0119dzy innymi: JQuery, UnderscoreJS czy Ionic framework.<\/p>\n\n\n\nWady AngularJS 1.X<\/strong><\/h3>\n\n\n\n
Pr\u0119dko\u015b\u0107 nie jest mocn\u0105 stron\u0105 angulara, niew\u0105tpliwie spora wad\u0119 stanowi natywny brak „Lazy loading” i konieczno\u015b\u0107 \u0142adowania wszystkich skrypt\u00f3w naraz przy starcie aplikacji! P\u00f3ki co, mo\u017cemy si\u0119 ratowa\u0107 bundlingiem i minifikacj\u0105, ale jest to materia\u0142 na osobny artyku\u0142. W kolejnych wersjach (1.5 i 2.0) ma powsta\u0107 mechanizm routingu pozwalaj\u0105cy na do\u0142\u0105czanie skrypt\u00f3w pod konkretn\u0105 sekcj\u0119 aplikacji.
Niew\u0105tpliwy wp\u0142yw na zapotrzebowanie pami\u0119ci ma dodatkowa kopia ka\u017cdego obiektu, kt\u00f3ra umo\u017cliwia por\u00f3wnanie w „dirty check”, przy czym kosztowne cykle „dirty check” dotycz\u0105 wszystkich danych powi\u0105zanych z widokiem.
Z ca\u0142\u0105 pewno\u015bci\u0105 powinni\u015bmy si\u0119 dwa razy zastanowi\u0107, rozpoczynaj\u0105c projekt o wysokich wymaganiach wydajno\u015bciowych. Zach\u0119cam do zapoznania si\u0119 z artyku\u0142em 11 tips to improve angularjs performance.<\/span>
<\/a>
SEO i indeksowanie<\/strong>
WebCrawlery kiepsko radz\u0105 sobie z JavaScriptem, w celu pe\u0142nej indeksacji nale\u017cy wykorzysta\u0107 zewn\u0119trzne narz\u0119dzia np. prerender.io, kt\u00f3re zwr\u00f3c\u0105 w\u0142a\u015bciwy kod html.<\/p>\n\n\n\n
<\/strong>Podstawy frameworka s\u0105 stosunkowo proste, jednak skomplikowane procesy implikuj\u0105 wykorzystanie bardziej zaawansowanych technik i tu mog\u0105 pojawi\u0107 si\u0119 problemy. Istnieje ryzyko, \u017ce zaczynaj\u0105ce swoj\u0105 przygod\u0119 zespo\u0142y spal\u0105 czas na walk\u0119 z niuansami frameworka. Z dokumentacj\u0105 jest coraz lepiej i w sieci pojawia si\u0119 coraz wi\u0119cej materia\u0142\u00f3w, jednak nie zawsze tak by\u0142o, wej\u015bcie na poziom eksperta wci\u0105\u017c jest wyzwaniem i wymaga du\u017cego nak\u0142adu czasu.<\/p>\n\n\n\nPodsumowanie<\/strong><\/h2>\n\n\n\n