poniedziałek, 21 Wrzesień 2015

Angular 2 – nadchodzą wielkie zmiany

Najpopularniejszy front-endowy framework czeka wielka rewolucja. Angular stosowany jest do dzisiaj w wielkich projektach i stanowi podstawowe narzędzie dla licznego grona programistów z całego świata. Jednak z biegiem czasu powstało wiele wątpliwości dotyczących jego efektywności. To właśnie spowodowało, że Angular Team zdecydował się rozpocząć prace nad nowym wydaniem!

Dlaczego?

Migracja do nowej wersji frameworka niesie za sobą masę zmian, które spowodują, że aplikacje dotychczas korzystające z możliwości Angulara 1.x zmuszone będą do przeniesienia na nową wersję. Skąd decyzja tak radykalnej rewolucji? Odpowiedź jest prosta – to ręka wyciągnięta na pomoc developerom. Angular w obecnej wersji jest niewątpliwie świetnym frameworkiem, jednak jego API jest na ten moment tak rozbudowane, że przyswojenie wiedzy dotyczącej jego możliwości od podstaw jest niezwykle czasochłonne. Dodatkowo zespół programistów frameworka nie mógł pozwolić sobie na niedostosowanie do nowego standardu ES6, z którym Angular 2 może swobodnie pracować. Warto podkreślić również istotną kwestię – programiści zgłaszali wątpliwości co do mechanizmów, szybkości działania czy przede wszystkim mnogości wizji prawidłowego budowania aplikacji.

Jakie różnice?

W nowym wydaniu w zestawieniu z poprzednią wersją, autorzy zdecydowali się opuścić takie koncepcje jak:

  • kontrolery,
  • $scope,
  • angular.module,
  • ng-model

TypeScript a ECMASCript6

Drużyna projektująca Angular 2.0 silnie propaguje korzystanie z TypeScript zaproponowanego przez Microsoft. Nie bez powodu – język ten (kompilujący się do JavaScript) udostępnia nam możliwości typowych języków programowania nastawionych na projektowanie obiektowe. Daje takie możliwości jak klasy, interfejsy, silne typowanie, adnotacje i wiele, wiele innych. Już dzisiaj wiemy, że dokumentacja będzie zawierała przykłady kodów również dla TS. Jednak framework pozwala nam na dużą elastyczność – możemy korzystać również z nowego standardu ECMA6 (jak i starego es5), który powoli wchodzi do standardu przeglądarek webowych. Udostępnia on podobne narzędzia (istotna różnica – brak typowania i adnotacji) i jest równie interesującym rozwiązaniem. Jaka jest moja opinia? Nie podoba mi się fakt braku ujednolicenia koncepcji projektowania w nowym Angularze. Jest bowiem duże prawdopodobieństwo, że programiści podzielą się na tych korzystających z TS i na tych wiernie pozostających w standardach ES.

Angular 2.0 – elementy składowe

Komponent

Jak już wspomniałem, w nowej wersji popularnego frameworka zrezygnowano z koncepcji kontrolerów. Ich funkcjonalność zastąpić mają komponenty (z początku ideą były dyrektywy, które dzieliły się na 3 rodzaje – w tym właśnie dyrektywę Component). Komponenty mogą być podpięte do konkretnego selektora, przyjmować dyrektywy, zawierają widok (template lub templateUrl) oraz klasę, którą możemy rozbudowywać o kolejne funkcjonalności dla komponentu.

Również widok dla komponentu wprowadza kilka zmian w zestawieniu ze znanymi nam odpowiednikami z Angulara 1.x:

  • (zdarzenie)=”metoda()” – wiązanie do konkretnego zdarzenia (przykładowo click),
  • [właściwość] – wiązanie do właściwości elementu (np. disabled input),
  • #zmienna – lokalne zmienne z zakresu komponentu,
  • *ng-reguła – *ng-for, *ng-if…

Two-Way Data Binding

W wielu źródłach możemy przeczytać, że w nowej wersji Angulara odpuszczone zostało jedno z podstawowych założeń frameworka – podwójne wiązanie danych (automatyczna synchronizacja widoku z modelem). Nie jest to jednak prawda. Zmienia się jedynie sposób inicjalizacji takiego elementu:

<input type=”text” [(ng-model)]=”model.name” />

Dyrektywa

Komponent bez widoku – tak w skrócie można opisać jak funkcjonuje dyrektywa (jej składowe to Directive i klasa). Raz utworzona dyrektywa może być wykorzystywana w wielu komponentach. Istnieje również możliwość bezpośredniego wykorzystania dyrektywy na elemencie:

<element dyrektywa>Tekst</element>

Dependency Injection

Angular 2.0 udostępnia niezwykle przydatny mechanizm wstrzykiwania zależności. Pozwala to na m.in. na utworzenie pewnej klasy i udostępnienie jej innym poprzez dodanie słowa kluczowego export przed class. Taką klasę wystarczy następnie zaimportować przy pomocy import:

import {NazwaKlasy} from ‚nazwaplikuklasy’

Nie jest to oczywiście jedyna korzyść wynikająca z dodatku, który zaproponowali nam programiści na co dzień zajmujący się frameworkiem. Jednak póki co dokumentacja nie została uzupełniona o informacje, które pozwoliłyby mi na ich dobre zaprezentowanie.

Premiera

Ostateczna data publikacji wersji nadającej się do pracy nadal nie jest znana. Z dostępnych deklaracji wiemy, że możemy oczekiwać na efekty pracy zespołu już pod koniec tego roku. W internecie dostępnych jest kilka dat, wskazujących, że może uda się to nawet w zbliżającym się listopadzie.

Podsumowanie

Angular 2.0 został napisany praktycznie od podstaw. Różni się modułami, ogólną koncepcją jak i składnią od znanego nam Angulara w wersji 1.x. Czy przejście ze starej wersji na nową obejdzie się bezboleśnie? Na pewno nie. Migracja wymagać będzie bardzo znaczących zmian w kodzie powstałych już aplikacji i stworzy nie lada problem dla zespołów programistycznych.

Same minusy? Głównie w przypadku sytuacji takich jak powyższa. Korzyści? Bardzo wiele. Nowa wersja pozwala na szybszą edukację, łatwiejsze zrozumienie struktury, udostępnia bardziej przejrzystą składnię a przede wszystkim jest szybsza niż poprzednik.

Źródła

A curated list of helpful material to start learning Angular 2

Back to home
Flutter – Nawigacja pomiędzy widokami

Nawigacja pomiędzy widokami we frameworku Flutter.

Read more...
Alternatywne JavaScriptowe Frameworki

W JavaScriptowym świecie poza frameworkami React, Angular które podzieliły po między siebie popularność, a goniącym je Vue.js jest jeszcze miejsce na inne, mniej skompilowane frameworki, które nie zostały jeszcze dostrzeżone przez szersze grono ludzi.

Read more...
Flutter – pobieranie danych w formacie JSON

W tym wpisie zapoznamy się jak w prosty sposób pobrać dane w formacie JSON.

Read more...