An Angular Roadmap – The Past, Present, and Future of Angular

Angular Updates: Co je nového ve verzi 11

Od listopadu 2020 je k dispozici verze 11.0.0 aplikace Angular. Tato verze přináší mnoho novinek platformy, mezi nejvýznamnější funkce však patří rychlejší sestavení pomocí jazyka TypeScript 4.0, testovací svazky komponent a aktualizace ESLint.

Paleolitický JavaScript – SproutCore

Na začátku byl SproutCore. Byl to první komplexní framework jazyka JavaScript zaměřený na snadné vytváření jednostránkových webových aplikací v desktopové kvalitě. Ne že by to dříve nebylo možné. Když Google vydal Gmail, ukázal světu, že webové aplikace skutečně mohou nahradit složité desktopové aplikace. Google dokonce otevřel sadu nástrojů Closure – sadu knihoven a optimalizačního překladače, které použil k vytvoření Gmailu.

Problém byl v tom, že nástroje Closure společnosti Google nebyly příliš přívětivé pro vývojáře. Spoléhaly do značné míry na Javu, což odradilo webové vývojáře, kteří byli zvyklí pracovat s jazyky JavaScript, PHP, Ruby a Python. Gmail byl skvělou ukázkou toho, co je možné, ale vývoj podobných aplikací byl pro mnohé stále nedostupný.

Někteří odvážní vývojáři dokázali pomocí kombinace jQuery, lepicí pásky a naděje vytvořit úžasné jednostránkové aplikace. Zatímco pro koncové uživatele vypadaly tyto aplikace úžasně, pro vývojáře, kteří na nich pracovali, se rychle proměnily v obrovské hromady technických dluhů, kvůli kterým se tým vývojářů bál jít ráno do práce.

Na základě toho začalo několik podnikavých vývojářů pracovat na frameworcích, které by aplikace podobné Gmailu přiblížily webovým vývojářům na dosah. SproutCore byl prvním z těchto frameworků, který se prosadil. Přišel s kompletní sadou widgetů, které umožnily vytvářet komplexní webové aplikace, aniž by se dotkly jazyka HTML nebo CSS.

To se nakonec skvěle hodilo bývalým desktopovým vývojářům, kteří byli s kopáním a křikem přetaženi na web. S podobnými cíli se objevilo několik dalších frameworků; nejvýraznější byly GWT a Cappuccino. Tyto frameworky se dokonce vyhýbaly JavaScriptu tím, že transponovaly jiné jazyky do JS. To bylo opět skvělé pro desktopové vývojáře. Ale vášnivé webové vývojáře to nechávalo chladnými a vyvolávalo to v nich pocit, že jejich těžce nabyté dovednosti v jazycích HTML, CSS a JavaScript nemají žádnou cenu.

Zůstal tak prostor pro framework, který by web skutečně obsáhl, místo aby se ho snažil omítnout a předstírat, že je to něco jiného. Objevilo se několik raných frameworků (Backbone a Knockout), které dosáhly mírného úspěchu. V té době se objevil také Ember. Ten vzal SproutCore, obnažil ho až na kost a pokusil se ho přebudovat na něco skutečně webově přívětivého. Ember chtěl být Six Million Dollar Man světa JavaScriptu: přestavěný lépe, silněji a rychleji.

Žádný z těchto frameworků nezískal raketovou popularitu. Svět čekal na něco lepšího. V roce 2010 se to něco lepšího objevilo – jmenovalo se to Angular.

Zlatý věk Angularu

Ještě před vydáním verze 1.0 vzal Angular svět vývoje front-endů útokem. Konečně jsme se dočkali snadno použitelného frameworku v jazyce JavaScript, který s jazykem HTML zacházel jako s občanem první třídy. Vývojáři a návrháři nyní mohli společně vytvářet úžasné jednostránkové aplikace. To přišlo jako úleva pro designéry, kteří byli otrávení a uražení, protože starší frameworky považovaly HTML a CSS za nástroje pro barbary, nástroje, kterých by se žádný civilizovaný vývojář neměl dotknout.

První věc, která se vývojářům zkoušejícím Angular poprvé zdála kouzelná, bylo obousměrné vázání dat. Předtím se většina vývojářů s tímto druhem datové vazby setkala pouze v desktopových frameworcích jako WPF a Windows Forms. Bylo skvělé mít možnost vázat formuláře a další prvky uživatelského rozhraní na objekty modelu JavaScriptu. Obousměrná datová vazba sice mohla při nadměrném používání způsobovat výkonnostní problémy, ale týmy, které ji používaly uvážlivě, zjistily, že Angular jim umožňuje vytvářet komplexní front-endové aplikace mnohem rychleji než kdykoli předtím.

Angular se ukázal být oblíbený nejen pro snadné vázání dat na prvky HTML. Direktivy Angularu poskytovaly snadný způsob vytváření opakovaně použitelných komponent HTML + CSS. Ačkoli to před Angularem poskytovaly i jiné frameworky JavaScriptu, Angular byl první, který se stal mimořádně populárním. Opakovaně použitelné komponenty se již dlouho používaly ve frameworcích na straně serveru. Uživatelské ovládací prvky ASP.NET a dílčí šablony v Rails a Django jsou jen několika
příklady.

Konec Angular zpopularizoval vstřikování závislostí ve světě front-endového vývoje. Dependency injection bylo dlouho populární v podnikových aplikacích, což je možná důvod, proč se ve světě JavaScriptu neuchytilo. Front-endoví vývojáři měli dlouho odpor k tomu, co považovali za zbytečně složité návrhové vzory podnikového softwaru. Tato obava není bezdůvodná. Už jste si někdy při psaní aplikace řekli: „To, co tady opravdu potřebuji, je „SimpleBeanFactoryAwareAspectInstanceFactory?“

Dependency injection se však osvědčilo. A Angular usnadnil použití dependency injection pro publikum, které ji v minulosti příliš nepoužívalo. Potřebujete klienta HTTP? Nebo byste snad chtěli udělat nějakou animaci? Žádný problém. Angular pro ně měl vestavěné služby. Stačilo o ně požádat a Angular je injektoval do vašich komponent. Nemusíte nic sami instancovat.

Nebo jste snad chtěli používat objekty prohlížeče window nebo location, aniž byste znemožnili unit testování svých komponent mimo prohlížeč? Angular vás pokryl i v tomto případě, a to díky vestavěným službám $window a $location. Za běhu byste získali objekty prohlížeče, které jste očekávali. A při spouštění unit testů na straně serveru v Node.js jste mohli do svých komponent předávat mock služby, abyste se ujistili, že se v různých scénářích chovají podle očekávání.

Pokud by vám to všechno nestačilo, Angular také umožňoval snadno registrovat a injektovat vlastní služby. Pro vývojáře, kteří byli zvyklí vázat všechna svá data na DOM a doufat v to nejlepší, to bylo úžasné. Pokud byste psali novou front-endovou aplikaci, která by volala API, jež by v případě nadužívání stála vaši firmu spoustu peněz, pravděpodobně byste raději měli možnost napsat si dopředu testy, které by zajistily, že se vaše aplikace nepokusí udělat něco takového jako 800 milionkrát zavolat API Twilio.

Takže byste vytvořili službu Twilio, která se injektuje za běhu. V době testování byste vytvořili maketu služby, která by zaznamenávala náklady na každé volání API, které se vaše aplikace pokouší provést. Napsali byste testy, které by pokrývaly běžné scénáře použití, a zajistili byste, aby tyto scénáře nevedly k tomu, že vaše společnost obdrží sedmimístný účet. Celkově většina vývojářů zjistila, že direktivy Angular v kombinaci se vstřikováním závislostí umožňují psát modulární, testovatelné front-endové aplikace pomocí osvědčených technik softwarového inženýrství. Mnoho vývojových týmů usoudilo, že to vede ke šťastnému stavu, a rozhodlo se přejít na Angular se vším všudy.

Úpadek systému Angular? Vzestup Reactu

Ačkoli to ve světě Angularu bylo většinou skvělé, nebylo všechno jen slunce a lízátka. Vývojáři začali narážet na vážné výkonnostní problémy, když se snažili navázat příliš mnoho objektů modelu na příliš mnoho prvků DOM. Některé aplikace se zpomalovaly. K dosažení přijatelného výkonu začalo být nutné přímé volání $digest a další černá kouzla. Přibližně ve stejné době se objevil nový vyzyvatel: React. Zpočátku se zdálo, že React nepředstavuje pro Angular příliš velké nebezpečí. Koneckonců, tihle podivíni z Reactu si dali tu práci a vymysleli JSX, který vypadal jako způsob, jak do kódu přimíchat značkování. Nedali jsme si náhodou práci s vynálezem šablonovacích jazyků právě proto, abychom se vyhnuli míchání značek a kódu?

Jak se ukázalo, přístup Reactu byl v komunitě vývojářů front-endu docela populární. Jeho popularita však nebyla raketová. Angular byl stále dominantní a vypadalo to, že to tak zůstane. Tedy až do chvíle, kdy popularita Angularu dostala pořádnou ránu do zubů z nečekaného zdroje: od samotného týmu Angular.

Představení Angularu 2

Angular 2 byl poprvé oznámen na konferenci ng-europe v roce 2014. Plány týmu Angular byly pro komunitu Angular přinejmenším šokem. Reakce vývojářů systému Angular byla rychlá a negativní… a ne bezdůvodně. Angular 2 by se zbavil mnoha známých konceptů z Angularu 1, zavedl by nový, nekompatibilní šablonovací jazyk (a mimochodem) by se také programoval pomocí zcela nového jazyka.

AngularJS

Ačkoli se Angular 1 i Angular 2 nazývaly „Angular“, ve skutečnosti šlo o velmi odlišné frameworky, které měly několik věcí společných. Aby se předešlo záměně, začal tým Angular označovat starou verzi Angularu jako „AngularJS“ a novou verzi jednoduše jako „Angular“. To dává intuitivní smysl, protože AngularJS byl napsán v jazyce JavaScript a Angular nikoli. Aby byl rozdíl mezi frameworky jasný, budu od této chvíle Angular 1 označovat jako AngularJS.

V důsledku toho všeho vývojáři AngularJS ztratili víru v budoucnost frameworku. Hrozili, že u budoucích projektů přejdou na nový framework, a přesně to mnozí z nich udělali. Z hromadného odchodu od AngularJS nejvíce profitoval React.

Ačkoli toho React neudělal tolik jako AngularJS, svým způsobem to bylo pozitivní. Pokud používáte knihovnu pohledů, která se nesnaží zahrnout všechno plus kuchyňský dřez, je pro vývojáře této knihovny mnohem těžší vám v budoucnu vytrhnout trn z paty. Ze začátku bylo používání Reactu ve srovnání s AngularJS trochu utrpení. Museli jste skládat dohromady mozaiku knihoven, jen abyste pokryli funkčnost, kterou AngularJS poskytoval z krabice.

Mnoho týmů to považovalo za dobrý způsob, jak snížit riziko, protože bylo nepravděpodobné, že by se vývojáři všech těchto knihoven rozhodli provést zpětně nekompatibilní rozbíjející změny najednou, což v podstatě udělal Angular.

Vznik Vue

K tomu, aby se problémy AngularJS ještě prohloubily, se přibližně ve stejné době, kdy probíhalo drama kolem Angularu 2, objevil další framework jménem Vue. Vue bylo inspirováno AngularJS, ale jeho cílem bylo zjednodušit jej a zbavit se toho, co tvůrce Vue považoval za zbytečnou složitost (takže Vue bylo stávajícím vývojářům AngularJS velmi povědomé). Vue poskytlo bezpečné útočiště mnoha vývojářům AngularJS, kteří nechtěli přejít na React.

To však neznamená, že by vývojáři AngularJS trpělivě nečekali, až se objeví Angular 2. Vue se tak stalo v roce 2010. Je však jasné, že kvůli nejistotě způsobené plány na Angular 2 došlo k hromadnému odchodu od AngularJS k Reactu a Vue.

Povstání z popela s Angular 2

Koneckonců byl Angular 2 vydán. Podle očekávání se zbavil mnoha známých konceptů z AngularJS, ale zachoval několik nejlepších kousků, jako jsou služby a vstřikování závislostí. Naštěstí pro zdravý rozum vývojářů Angular používá obyčejný TypeScript, a ne fork, jak bylo původně plánováno.

Aby to bylo ještě nepřehlednější, tým Angular udržoval fork nového frameworku, který místo jazyka TypeScript používal programovací jazyk Dart. Zpočátku byly verze TypeScript a Dart vyvíjeny synchronizovaně, generovány z jedné kódové základny. Nakonec se verze Angularu TS a Dart rozhodly jít vlastní cestou a Angular Dart nyní existuje samostatně.

I přes tento zmatek začala popularita Angularu po vydání Angularu 2 opět stoupat. Dělo se tak pomalu. Jak už to ve vývoji softwaru bývá, trendy se měnily. Vývojáři si uvědomili, že velký framework s bateriemi může být skutečně užitečný. Koneckonců, když se vaše aplikace dostatečně rozroste, nakonec všechny ty baterie skutečně potřebujete.

Zejména podnikoví vývojáři se začali vracet k Angularu. To dává smysl. Když začínáte vytvářet podnikovou webovou aplikaci, obvykle víte, že bude složitá. Nemá smysl začínat s malým MVP, když od začátku víte všech 87 věcí, které se od vaší aplikace budou očekávat.

Kde je Angular 3?“

Ačkoli Angular 2 nebyl dokonalý, mnoho vývojářů komplexních webových aplikací si začalo uvědomovat, že nový a vylepšený Angular je pro jejich potřeby vhodný. Naštěstí pro ně měl Angular v zásobě několik zajímavých vylepšení. A co je ještě důležitější, tým Angularu prokázal, že dokáže důsledně publikovat nové verze frameworku s několika málo zlomovými změnami mezi verzemi

V kroku, který se v té době zdál zvláštní, se tým Angularu rozhodl zcela vynechat verzi 3 a přejít na verzi 4. To se mu podařilo. Učinil tak z dobrého důvodu: tým pracující na balíčku routerů Angularu se již posunul dopředu a vydal verzi 3, zatímco zbytek Angularu byl stále ve verzi 2.3. Rozhodli se, že všechny verze balíčků Angular budou nadále synchronizovány, a přechod na verzi 4 pro příští vydání byl nejjednodušší způsob, jak toho dosáhnout.

Angular 4

Angular 4 měl několik významných změn, včetně přidané kompilace dopředu, což mělo za následek malé produkční balíčky JavaScriptu a kratší dobu načítání aplikace. Byla přidána podpora vykreslování na straně serveru, což byla podpora pro týmy, které chtěly vykreslovat své aplikace s předstihem, aby zlepšily počáteční výkon načítání. V celém frameworku bylo přidáno mnoho dalších vylepšení, ale upgrade aplikací z Angularu 2 na 4 byl ve většině případů rychlý a bezbolestný.

Angular 4.3 a Angular 5

Angular 4.3 přidal nového klienta HTTP, který se používal snadněji než stará služba HTTP. V Angularu 5 byla stará služba HTTP zastaralá a v příští verzi bude zrušena. I přes tuto nepříjemnost se ozývalo poměrně málo reptání, protože upgrade byl ve většině případů jednoduchý. Angular 5 také přidal lepší podporu internacionalizace a další optimalizace sestavení.

Angular 6 a 7

Angular 6 a 7 byly pro některé vývojáře zklamáním. Nedošlo k žádným velkým změnám, ale bylo zde mnoho drobných zlepšení kvality života, zejména v nástrojích Angular CLI. Klesající počet viditelných změn není známkou toho, že tým Angular přestal inovovat. Naopak to ukazuje, že framework je vyzrálý, takže vývojový tým může nyní více pracovat v zákulisí, opravovat chyby a zlepšovat výkon.

Stabilita frameworku od vydání Angularu 2 přilákala některé vývojáře ze staré školy AngularJS zpět do světa Angularu. Přitáhl také pozornost podnikových vývojových týmů. Když vytváříte podnikové aplikace, které mohou žít desítky let, je ideální používat framework, který dostává nové verze podle předvídatelného plánu, ale nemění se příliš rychle. Vývojář, který doposud používal pouze Angular 2, může během několika minut začít pracovat a přispívat do aplikace Angular 7.

Angular 8 a Angular Ivy

A tím se dostáváme k dnešku. Jak jsme viděli, Angular ušel dlouhou cestu. Od doby, kdy jej weboví vývojáři milovali, se dostal k obdivu, i když zatím není opět milován tak, jako tomu bylo v jeho počátcích.

Na obzoru se objevil Angular 8. V Angularu 8 byla odvedena spousta práce, aby se dal snadno používat se systémem sestavení Bazel, což je naprosto úžasná zpráva pro všechny 3 vývojáře, kteří ho používají mimo Google. Přečtěte si o změnách v Angularu 8.

Ještě zajímavější však je, že tým Angularu usilovně pracuje na novém vykreslování s názvem Angular Ivy. Má být drop-in náhradou současného renderu. Současné aplikace nebudou muset z větší části provádět žádné změny, aby mohly Angular Ivy používat.

Jestliže je Angular Ivy drop-in náhradou, proč by se o něj měli vývojáři starat? Dva důležité důvody: rychlost a velikost balíčku – dva velmi důležité problémy. Několik let se zdálo, že se weboví vývojáři trochu zbláznili. Týmy dodávaly svazky JavaScriptu o velikosti 5 MB, 10 MB nebo dokonce větší a myslely si, že to není žádný problém. Koneckonců, aplikace fungovaly perfektně na MacBoocích Pro vývojářů s procesorem i7, takže by měly fungovat dobře pro všechny, ne?

Naneštěstí v reálném světě ne každý používá nejnovější a nejlepší hardware. Stovky milionů lidí přistupují k internetu výhradně na starších telefonech s Androidem s výpočetním výkonem o něco větším než brambora, a to prostřednictvím internetového připojení jen o málo rychlejšího než vytáčené připojení. Těmto uživatelům trvá načtení obrovského balíčku JavaScriptu celou věčnost a ještě déle trvá, než ho jejich zařízení zpracuje a spustí. I v méně extrémních případech existuje po celém světě nespočet uživatelů, kteří nepoužívají nejnovější a nejlepší hardware. Pro ně jsou masivní aplikace JavaScriptu použitelné (ale bolestivé).

Angular Ivy

Renderer Angular Ivy pomůže v několika ohledech:

1. Je psán s ohledem na efektivitu, takže bude plnit stejné úkoly při vykonávání mnohem méně instrukcí procesoru. To zlepší výdrž baterie i duševní zdraví uživatelů s méně výkonnými zařízeními.
2. Renderer bude napsán mnohem modulárněji než současný renderer. Díky tomu bude mnohem přívětivější k přetřásání stromů a odstraňování mrtvého kódu. Výsledkem bude, že váš produkční balíček JavaScriptu bude obsahovat pouze kód, který je potřebný ke spuštění aplikace, namísto toho, aby v něm bylo všechno plus kuchyňský dřez, jak se často stává u současného vykreslovače.
3. Kromě zmenšení velikosti balíčku a zvýšení rychlosti vykreslování má Angular Ivy pro vývojáře Angularu ještě několik dalších vylepšení kvality života. Doba obnovení je výrazně rychlejší. Pokud tedy spouštíte aplikaci v režimu vývoje a čekáte, až se zobrazí vaše změny, strávíte nyní čekáním mnohem méně času.
4. Zlepšila se kontrola typů šablon, což znamená, že více chyb zachytíte při kompilaci místo za běhu. Chyby šablon za běhu jsou nepříjemné, protože se buď zakousnou do vás během testování, nebo do vašich uživatelů, když se snaží vaši aplikaci používat.
5. Kompilátor šablon Angular Ivy bude generovat kód, který je čitelný pro člověka, což současný kompilátor View Engine neumí. To se bude hodit, když se budete snažit vystopovat náročné chyby šablon.

Celkový výsledek: menší aplikace, rychlejší aplikace, spokojenější vývojáři a spokojenější uživatelé.

Angular 9

Představujeme vám přehled aplikace Angular 9.

Mezi hlavní body patří:

• Vestavěné funkce Angularu
• Vyspělý vývoj s Angularem
• Pochopení motorů zobrazení Angularu
• Angular Ivy řeší dlouhodobé problémy
• Angular Ivy a mobilní zařízení
• Selek-less Directives
• Vylepšení diagnostiky Angularu
• Internacionalizace s Angular Ivy
• DI a Type-Safe v Angularu 9
• Změny v Angular Core v oblasti Dependency Injection
• Srovnávací testy Angularu (Angular 8.2.7 vs. 9.0.0-next.5)

Angular 10

Angular verze 10.0.0 byl vydán koncem června 2020. Angular 10 je významnou verzí, která obsahuje změny, jako je nový nástroj pro výběr rozsahu dat v Angular Material, aktualizace verzí jazyka TypeScript, aktualizace verzí knihoven a další.

Mezi nové funkce patří např:

• Rozhraní překladače Ngtsc
• Konfigurace asynchronních časových limitů
• Hlášení o vadných zamčených souborech
• Lazy výpočet basePaths
• Slučování překladových souborů
• Explicitní mapování

Angular 11

Angular verze 11.0.0 byla vydána v listopadu 2020. Hlavní verze Angularu 11 přináší aktualizace napříč celou platformou, včetně CLI a frameworku komponent.

Mezi významné funkce patří:

• Rychlejší sestavení pomocí jazyka TypeScript 4.0
• Spřežení pro testování komponent
• Aktualizace systému ESLint
• Aktualizovaný náhled jazykových služeb
• Aktualizovaná podpora funkce Hot Module Replacement (HMR)
• Vylepšené reporty a protokolování
• Automatické vkládání písem

Angular v minulosti, Současnost a budoucnost

Pokud používáte Angular od jeho počátků až do současnosti, pak vám gratulujeme! Přestože se objevilo mnoho drsných záplat, skončili jsme s rychlým, moderním frameworkem, který je zábavné používat.

Pokud jste byli vývojáři AngularJS, ale přešli jste na React, Vue nebo něco jiného, doporučuji vám, abyste se na Angular podívali znovu. Stojí za váš čas, i když se rozhodnete zůstat u toho, co používáte teď.

A pokud jste Angular nikdy nepoužívali, proč to nezkusit?

Právě jsme se vydali na okružní jízdu minulostí, přítomností a budoucností jazyka Angular. Bezpochyby to byla pořádná jízda. Doufám, že se vám prohlídka líbila bez ohledu na vaše znalosti jazyka Angular!

S jakým frameworkem pracujete a proč? Pokud máte otázky nebo připomínky, určitě je napište níže.

Hledáte komponenty uživatelského rozhraní nezávislé na frameworku? GrapeCity má kompletní sadu komponent uživatelského rozhraní v jazyce JavaScript, včetně datových mřížek, grafů, měřidel a vstupních ovládacích prvků. Nabízíme také výkonné komponenty tabulkových procesorů, ovládací prvky pro vytváření sestav a vylepšená prezentační zobrazení. Máme hlubokou podporu pro Angular (a také React a Vue) a věnujeme se rozšiřování našich komponent pro použití v moderních frameworcích JavaScriptu.