Co to jest Angular? Historia do 202X

Historia Ciężko jest zrozumieć, co się stało w ostatnich latach w technologii. Co trzeba wiedzieć ,aby zrozumieć Angulara w kontekście obecnych czasów? 

Najpierw musimy się cofnąć o 10 lat, gdy w świecie JavaScript istniały takie biblioteki jak jQuery. W międzyczasie pierwsze frameworki JavaScript jak : Dojo, Backbone.js, Knockout.js walczyły o popularność i adaptacje w firmach.

React i Vue.js oczywiście wtedy nie istniało. 

Historia Angulara zaczyna się od AngularaJS w 2009 roku. Misko Hevery i Adam Abrons pracowali razem nad pewnym projektem pobocznym.

Miało to być narzędzie oferującą łatwą komunikację pomiędzy usługami REST, zabawą z JSON-em oraz budowaniem HTML-a.  Opublikowali swój projekt pod domeną internetową GetAngular.com

W tym samym czasie Hevery, który już pracował w Google, dostał zadanie stworzenia projektu Google Feedback, przez innych pracowników. Razem napisali ponad 17 tysięcy linijek kodu w 6 miesięcy i zaczęli  tonąć z kodem JavaScript coraz bardziej. Jak to testować? Jak to rozwiać dalej? Sytuacja wyglądała koszmarnie

Hevery spytał swojego szefa czy może napisać cały kod jeszcze raz, używając GetAngular. By pokazać, że ma to sens, postanowił przepisać cały kod w 2 tygodnie. 

Hevery przegrał zakład i nie napisał tego projektu w 2 tygodnie tylko w 3, ale...

Ta nowa aplikacja zamiast 17.000 linijek kodu zajęła już tylko 1500. To wystarczyło, aby sam Google zainteresował się nowym frameworkiem. Ten framework nazwali Angular, który teraz nazywa się AngularJS, ale o tym później.

Pełna historia jest tutaj : 

AngularJS

Pierwsza stabilna wersja AngularaJS (w wersji 0.9.0) został oficjalnie pokazana na GitHubie w październiku 2010 roku pod licencją MIT. 

AngularJS w czerwcu w 2012 w wersji 1.0.0 i już zdominował wszelkie grupy programistów na całym świecie. Dlaczego? Wyjaśnimy, co takie ten framework robił w tym czasie:

• Dependency injection: AngularJs był pierwszym frameworkiem, który oferował wstrzykiwanie zależności. Daje to dużą przewagę na pewno nad obecną konkurencją jQuerowo podobną. Z AngularemJS mogłeś więc pisać testy oraz odizolowane od siebie komponenty. 
• Directives, czyli dyrektywy : Dekorowanie HTML specjalnymi dyrektywam,i aby modyfikować ich style, atrybuty, elementy przy pomocy małej ilości kodu JavaScript. Podobna logika kontroli powiązania między obiektem JavaScript a widokiem HTML w innym frameworku jak jQuery zajmowałaby kosmiczną ilość kodu.
• Two-way data binding : Automatyczna synchronizacja pomiędzy obiektami JavaScript a widokiem HTML.
• Single-page-approach : AngularJS był pierwszym frameworkiem, który całkowicie usunął potrzebę przeładowania strony. Dla serwera to dobra wiadomość, ponieważ przesyłasz mniej danych. Dla przeglądarki natomiast plus był taki, że mogłeś pokazać fajne animacje przejścia pomiędzy stronami. Single Page Application później zostanie zaadaptowany przez React. Vue.js i inne frameworki.
• Dużo logiki AngularJS mogło być później przechowane w pamięci przeglądarki. 

Angular 2

Nowa wersja AngularaJS pojawiła się we wrześniu 2016 roku i jest nazwana Angularem 2. 

Angular 2 został kompletnie przepisany od nowa korzystając z nowej specyfikacji języka JavaScript ECMAScript 6 (ECMAScript 2016) . Warto pamiętać o tym, że przed tą specyfikacją klasy w JavaScript nie były takie popularne.

Była to rewolucja, która wstrząsnęła całym front endem. Pomimo tego, że częściowo stara nazwa została, to postanowili nazwać Angulara 1, AngulareJS tak, aby zaznaczyć, że są to dwa różne frameworki i nie mogą być przełączane między sobą.

Decyzja o braku kompatybilność wstecz Angulara 2 była nieunikniona. AngularJS był tylko namiastką dobrych pomysłów, ale brakowało jeszcze w nim dobrego fundamentu w postaci samego języka JavaScript. Z nową wersją JavaScript można było dużo lepiej tę filozofię zbudować od nowa w nowej bibliotece.

Nowy Angular był modularny, opierał się na komponentach, miał w w sobie lepszy model wstrzykiwania zależności. Co dało możliwość na stworzenie lepszy wzorców projektowych, które w AngularJS były niemożliwe do stworzenia.

Angular 2 postanowił też oznajmić, że każda następna wersja będzie już wersją liczbową. Co więcej, skoro stał on się tak bardzo popularny, to postanowili trzymać się systemu cyfrowego X.Y.Z gdzie X to wersja biblioteki, Y to mniejsza wersja, a Z to nagłe poprawki. W końcu taka biblioteka musi się zmieniać cały czas.

Dodatkowo Angular 2 wspierał TypeScript wynalazek Microsoftu. Kto by pomyślał, że kiedyś Google i Microsoft się dogadają i będą tak współpracować. TypeScript pozwalał na transpiracje kodu JavaScript do takiej wersji, aby każda przeglądarka ją rozumiała. To oznacza, że nadal możesz korzystać z najnowszych bajerów języka JavaScript, nie martwiąc się o to, czy to działa na jakiś kartoflu. Literały, arrow function, Promise to wszystko mogłeś użyć już wtedy

Angular 2 zaoferował także swój własny serwer back-end. Wymagało to Node.js, ale system paczek NPM także. No właśnie Angular 2 był w końcu frameworkiem, którego już nie mogłeś pobrać o tak ze strony producenta. Musiałeś go zainstalować przez system paczek jak NPM.

Co jeszcze się pojawiło:

• Angular Mobile Toolkit : zestaw narzędzi do tworzenia aplikacji mobilnych
• Command-line Interface : Angular dostał swoje narzędzie do tworzenia aplikacji i jej kontrolą przy pomocy tekstowych komendy w konsoli CMD.

...i co najważniejsze...Komponenty, które są cegłami, które budują aplikację Angular 2. Angular 1 czy AngularJS miał kontrolery i scope. Teraz to wszystko żyło w komponentach. 

Angular 4

W marcu 2017 roku Google wypuścił Angulara 4. Pominą wersję 3 ze względu na to, że dużo pod projektów krążyło pod nieoficjalną nazwą 4. Scalili to wszystko i wrzucili do wersji 4.

Pojawił się nowy system ścieżek "routing". TypeScript 2.1 dostał wsparcie i stał się wymagany. 

Dodatkowo pojawiła się do niego paczka NPM służąca do animacji UI. Wszystkie istniejące animację zostały tam wrzucone, tak by dać wybór programiście, czy ją w ogóle chce mieć.

W tej wersji mamy także Ahead-of-time compilation. Angular 4 potrafił kompilować swoje szablony w locie i tworzyć odpowiedni kod JavaScript.  Kod nie był kompilowany w trakcie działania aplikacji jak wcześnie,j to było wersji 2 i nawet 1.  Był to duży plus, ponieważ jeśli coś nie działo, to aplikacja Ci się nie przebudowała. Koniec z marnowaniem czasu i sprawdzaniem aplikacji w trakcie jej uruchomienia. 

Pojawił się także nowy Validator do formularzy. Interfejs paramMap do wysłania parametrów w adresach HTTP.

Z tą wersją Google też obiecało wpuszczać nową wersję Angulara co pół roku.

Angular 5

Uwolniony z łańcuchów w grudniu 2017 roku. Angular 5 miał wsparcie TypeScript 2.3. Do niego pojawiły się nowe funkcjonalności jak nowy klient HTTP.

Zaczynając od Angulara 4.3 moduł @angular/http został zastąpiony paczką @angular/common/http  z lepszym wsparciem dla JSON-a, możliwością tworzenia interceptorów, jak i niezmiennych requestów. Ta zmiana była kompletna z wersją 5.

Dodatkowo pojawiła się nowe API, które pozwoliło zarządzać stanem aplikacji pomiędzy serwerem a klientem.

Pojawiło się też cały zestaw zdarzeń służących do lepszej kontroli nad cyklem HTTP.

Angular 6

Pół roku później, a nawet wcześniej, czyli w kwietniu 2018 została wpuszczona wersja 6 Angulara.  Chłopaki tym razem postanowili zrobić drobne zmiany, aby ulepszyć ten framework. Nie były one jednak tak gwałtowne. 

W tej wersji jednak zespół Angulara postanowił przestawić nowy silnik renderujący pod nazwą Ivy. On zwiększył szybkość i zmniejszył wielkość aplikacji.

Angular 7

W październiku 2018  pojawiła się większa aktualizacja.

• Skoro nowsze wersje Angulara mają wychodzić co pół roku to może pora trochę ten system aktualizacji ulepszyć...i tak zrobili. Z nowymi poleceniami "Command Line" aktualizację były dużo łatwiejsze.
• Command Line Angulara dostał też system podpowiadaczy, tak aby nowy programista wiedział co Angular potrafi
• Angular powiązał się z innymi bibliotekami do współpracy jak :
  • NativeScript
  • AngularFire paczka do Firebase
• Wsparcie dla TypeScript 3.1, RxJS 6.3 oraz Node 10. Był też kompatybilny wstecz z tymi technologiami.

Angular 8

W maju 2019 pojawiła się kolejna wersja Angulara. Ta zmiana dotyczy głównie kompilatora Ivy (który istniał w pewnym sensie od 5 wersji), który stanie się domyślnym kompilatorem w wersji 9. 

• Routing : Nowa składnia deklaracyjna została dodana i ona pozwala dodać leniwe ścieżki do podstron w aplikacji przy użyciu składni import() z języka TypeScript 2.4+. Prawdopodobnie niedługo deklaracje ścieżek przy pomocy napisów zostanie usunięte. Na chwilę obecną wciąż one istnieją.
• Service workers : Nowa strategia rejestrowania workerów.
• Workspace API : Zamiast modyfikować plik angular.json może pora na inny sposób modyfikacji konfiguracji projektu

Ta wersja pozbyła się ostatecznie starych paczek @angular/http, które nie były już aktualne od wersji 5.

Angular 9

W lutym 2020 roku pojawiła się kolejna wersja. Chłopaki z Googla jak widzisz, trochę spowolnili, ale żeby wypuszczać nowy framework co pół roku to moim zdaniem przesada. Po długim naborze ostatecznej wersji w końcu on się jednak pojawił.

Co się zmieniło:

Wszyscy zaczęli narzekać, że Angular jest byczą biblioteką, więc w tej wersji popracowali, aby ją zmniejszyć. Kompilator IVY jako domyślny i potężny silnik renderujący. Dodatkowo ulepszyli go w kontekście publikacji aplikacji dla wielu języków na świecie.

Dodanie na stałe funkcjonalności Selector-less binding . 

Czy jest ten kompilator Ivy i dlaczego dla wielu programistów było to aż takie ważne?  Silnik renderujący odgrywa ważną rolę w jakości/szybkości aplikacji internetowej. Jest to narzędzie, które tłumaczy komponenty Angulara na instrukcję aktualizujące strukturę strony HTML

Jeżeli rendering strony jest wydajniejszy, to być oznacza, że wykonuje on dużo mniej instrukcji niż normalnie.  A mniej instrukcji, to mniej kodu JavaScript co sprawia, że sama paczka z plikami może się skurczyć.

To była recenzja Angulara. Do zobaczenia w Angularze 10 i wtedy ten wpis zaktualizuję.