Nije prošlo dugo kako sam objavio blog post o ažuriranju na Angular CLI 1.7.4, a sada smo već na verziji Angular 6.
Ako ništa drugo, napokon su objedinjeni Angular Framework, Angular Material i Angular CLI:
• @angular/angular 6.0.0
• @angular/cli 6.0.0
• @angular/material 6.0.0
Dosadašnje verzije išle su ovim redom:
• Angular 2, Angular 4, Angular 5, Angular 6
• Angular CLI 1, Angular CLI 6
• Angular Material 2, Angular Material 5, Angular Material 6
Što novoga donosi Angular 6?
The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the toolchain and on making it easier to move quickly with Angular in the future. – Version 6 of Angular Now Available
– ng update
ng update <package> je nova CLI naredba koja analizira sadržaj package.json datoteke i predlaže potrebna ažuriranja. U pozadini koristi npm/yarn čime se proces dodatno automatizira. Sada je na autorima paketa da ih prilagode novom pristupu.
– ng add
ng add <package> je također nova CLI naredba koja mi se sviđa čak i više od prethodne, a omogućava jednostavno dodavanje novih mogućnosti unutar projekta.
•
ng add @angular/pwa – pretvara ‘običnu’ Angular aplikaciju u PWA
•
ng add @ng-bootstrap/schematics – dodaje podršku za ng-bootstrap
•
ng add @angular/material – dodaje i postavlja Angular Material
– Angular Elements
Omogućava korištenje postojećih Angular komponenti izvan Angular projekta na način da ih registrira kao Custom Elements. Ovo je toliko dobra stvar da to nije za vjerovati.
Najjednostavnije rečeno, omogućava korištenje neke Angular komponente unutar nekog drugog Frameworka ili CMS-a.
– Angular Material Starter Components
Nakon pokretanja naredbe ng add @angular/material tj. dodavanja podrške za Angular Material otvara se mogućnosti korištenja 3 gotove starter komponente, čime se na brz i jednostavan način stvara lijep kostur nove Angular aplikacije.
–
ng generate @angular/material:material-nav --name=my-nav – Material Sidenav
–
ng generate @angular/material:material-dashboard --name=my-dashboard – Material Dashboard
–
ng generate @angular/material:material-table --name=my-table – Material Data Table
– CLI Workspaces
CLI v6 omogućava istovremeni rad više projekata tj. aplikacija ili biblioteka. Svaka aplikacija može imati svoju strukturu koja se nalazi unutar angular.json datoteke.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "projects": { "my-project-name": { "projectType": "application", "architect": { "build": { "configurations": { "production": {}, "demo": {}, "staging": {}, } }, "serve": {}, "extract-i18n": {}, "test": {}, } }, "my-project-name-e2e": {} }, } |
– Tree Shakable Providers
Servisi se više ne moraju navoditi unutar app.module.ts datoteke čime se automatski smanjuje veličina aplikacije.
Prije se nakon kreiranja servisa
1 2 3 4 5 6 |
import { Injectable } from '@angular/core'; @Injectable() export class MyService { constructor() { } } |
on morao navoditi unutar app.module.ts datoteke
1 2 3 4 5 |
@NgModule({ ... providers: [MyService] }) export class AppModule {} |
dok je sada dovoljno unutar servisa navesti u kojem ga modulu želimo koristiti.
1 2 3 4 5 6 7 8 |
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MyService { constructor() { } } |
Od ostalog tu su još:
– izbacivanje web animations polyfilla koji više nije potreban
– RxJS v6
– Long Term Support (LTS)
Zbog svega navedenog jedna čekam započeti nove Angular projekte i nadam se da mi ovaj početni entuzijazam neće prisjesti.
Kako ažurirati projekt na Angular 6.0.0?
Detalje je moguće pronaći na adresi https://update.angular.io/.
Postupak se može podijeliti u tri faze:
– Ažurirati @angular/cli
– Ažurirati Angular Framework pakete unutar projekta
– Ažurirati ostale pakete unutar projekta
Angular je, bio, ‘sranje’?
Sjećam se vremena kada sam bio zaljubljen u Angular 1.x i „$scope“. To su bila vremena kada je Angular život developera činio donekle jednostavnijim.
The whole idea of a good framework is that you start with the simple stuff and you make it more complicated only when and where you want it to be more complicated. While Angular team went in a completely opposite way. – Why Angular 2 (4, 5, 6) sucks
Postojala je, kao i u svemu, određena krivulja učenja, ali jednom kada se savladala stvari su išle svojim tokom. HTML kompajler, TypeScript, Webpack, CLI, angular-cli.json -> angular.json,… nisu bile stvari kojima se developer trebao opterećivati. U konačnici su sve te stvari vrlo korisne, ali početniku u svijetu developmenta kao da daju dovoljno razloga da odustane od svega.
Osobno mi odgovara TypeScript, ali to ne znači da mora odgovarati svima. Netko je možda odabrao JavaScript upravo iz razloga zato što je jednostavan za početnike (dovoljno je imati web preglednik). Nakon nekog vremena taj početnik sazna za Angular i umjesto da mu se omogući korištenje Angulara sa do sada stečenim znanjima njemu se nameće nekakav TypeScript (Type,Interface,Decorator) za kojega niti ne zna čemu služi osim da mu, u tom trenutku, stvara otpor prema učenju.
Na stranu sada i ovo gore spomenuto, ali definitivno najgora stvar koju Angular radi upornim promjenama je zastarijevanje dokumentacije. U dvije godine imali smo nekoliko verzija, svaka sa svojim ‘cakama‘ pa se ti onda snađi ‘guglajući‘.
Zaključak
Ne mislim da je Angular 6 ‘sranje’ jer donosi puno poboljšanja kojima je cilj olakšati developerima život. Smatram da je to bio cilj i svake od prethodnih verzija samo je možda sve odrađeno na pomalo nespretan način čime se stvarao kaos.
I nadam se da će Angular sada napokon prestati s tim izmjenama da stvarno ne bi postao ‘sranje’ jer ‘sranje’ nije slatko.
Ovaj blog post je primarno bio zamišljen kao uvod u Angular 6 i sve ono, novo, što on donosi. I dok sam tako razmišljao o strukturi blog posta palo mi je na pamet da ću na kraju imati više blog postova o različitim verzijama koje svako malo dolaze što za posljedicu ima zastarijevanje prijašnjih blog postova bržim tempom nego što ih ponovno mogu napisati/objaviti. Usred tog razmišljanja i ‘guglanja‘ što o tome misle drugi developeri naletio sam na članak „Why Angular 2 (4, 5, 6) sucks“ čime je ovaj blog post dobio sasvim jednu drugu notu.