Dar și despre Node.JS și npm.

Astăzi vom povesti despre niște unelte de web development care ne fac viața mult mai ușoară și cu ajutorul cărora putem să grăbim extraordinar de mult procesul de development, pentru ca ulterior să povestim despre Angular, un web application framework.

Node.js

JavaScript este un limbaj de programare care este folosit majoritar pentru scriptarea paginilor web, oferind interactivitate avansată. Asta înseamnă că codul respectiv este rulat în browser, sau cum mai zicem noi, pe client. De unde denumirea de client-side scripting. Ei bine, un băiat s-a gândit prin 2009 că ce fain ar fi dacă ai putea să folosești JavaScript-ul pentru server-side scripting. Și așa băiatul acesta, pe nume Ryan, a creeat ceea ce noi numit astăzi Node.js. Pe scurt, a luat engine-ul de la Google (browserul Chrome folosește în spate un "motor" care rulează codul de JavaScript, numit V8) și împreună cu alte unelte care se ocupă de magie, a lansat ceea ce astăzi numim Node.js.

Pentru a instala Node.js pe Windows, descărcați executabilul corespunzător de aici (.msi):

https://nodejs.org/en/download/

Pentru a instala pe Ubuntu:

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt-get install -y nodejs

Puteți verifica dacă acesta s-a instalat corect rulând node --version.

npm

Un an mai târziu, un alt băiat pe nume Isaac introduce ceea ce astăzi numim npm, un "package manager" pentru Node.js. Acesta permite ca programatorii să își publice și să share-uiască librăriile scrise cu ajutorul lui Node.js. Acesta se dezvoltă într-o platformă de tip "registry", care practic este o bază de date online care conține toate pachetele publicate. Prin comparație, putem să ne gândim la acesta ca și registry-ul pypi pentru Python (pip).

npm este instalat împreună cu Node.js pe Windows.

Pentru Ubuntu, mai trebuie să rulați:

sudo apt-get install -y npm

Puteți verifica dacă acesta s-a instalat corect rulând npm --version.

Ok, și cu ce mă ajută Node sau npm?

În primul rând, Node.js îți permite să rulezi cod JS pe mașina ta (laptopul tău). Acest lucru este extraordinar, deoarece permite JavaScriptului să fie folosit pe partea de server, lucru care era îndeplinit în mod normal de alte limbaje precum PHP, Python, C# (cu ASP.NET), Ruby (on Rails), Java (cu JSP), etc. Astfel putem să construim o grămadă de librarii și framework-uri interesante cu ajutorul JavaScriptului, și putem chiar să pornim servere care gestionează să răspundă request-urilor web sau să servească fișiere statice.

A new world full of oportunities opens before our eyes.

În al doilea rând, npm colecționează toate pachetele (librării, framework-uri, aplicații, etc) pe care altcineva le-a scris și le-a publicat pe npm (sub licențe open-source, desigur). Desigur, nu toate pachetele sunt revoluționare, dar majoritatea îndeplinesc o anumită funcție sau chiar multiple funcționalități. Astfel, noi nu mai trebuie să stăm și să reinventăm roata de fiecare dată când ne apucăm de un proiect nou. Vrem să lucrăm cu date sau ore, putem să folosim moment.js. Vrem să facem un site responsive, și să îi adăugăm și un pic de culoare? Instalăm bootstrap. Vrem să facem grafice? probabil chart.js.

Astfel, cu câteva comenzi de npm install ... putem să ne apucăm de treabă.

Dar probabil cel mai important, ne permite să luăm toate aceste pachete de care avem nevoie, să le folosim în orice mod putem noi (și permit ele), iar la final, împreună cu niște script-uri bine scrise, alături de ceva ce numim noi un bundler, să le împachetăm și să obținem exact ce avem nevoie pentru o aplicație web: un index.html, și niște fișiere .js și .css. Iar cu ajutorul a ceva ce se numește tree-shaking, putem să renunțăm la tot codul pe care nu îl folosim din pachetele instalate, iar astfel fișierele aplicației vor fi din ce în ce mai mici ca și dimensiune.

Angular și porția lui de magie

Pentru a putea da o definiție la ce este Angular, probabil ar trebui să mai scriem un articol. Dar pe scurt, Angular este o platformă care îți permite să dezvolți aplicații web foarte foarte foarte ușor. Și aici nu ne referim doar la aplicații web doar pentru desktop, ci poți să dezvolți și aplicații pentru platformele mobile.

Notice. Noi vorbim de Angular (numit și Angular 2+), a nu se confunda cu AngularJS, care este prima versiune.

Părțile forte ale lui Angular sunt multiple. Odată există o comunitate extraordinar de mare care lucrează zi de zi cu Angular. Astfel sunt mulți oameni care probabil au trecut prin aceleași probleme prin care treci și tu atunci când te lovești de o eroare sau nu știi exact cum să faci un anumit lucru. Internetul îți aduce cunoștințele acestei comunități la vârful degetelor, iar Stack Overflow îți permite de cele mai multe ori să găsești exact de ce ai nevoie.

Apoi sunt uneltele care vin la pachet cu Angular. Cel mai folosit se numește Angular-CLI și e cel mai genial lucru care s-a putut întâmpla pentru mine personal. Cu o simplă comandă, ng new, îmi creează un proiect nou de tip Angular, care instalează tot ce am nevoie, îmi permite să adaug componente sau servicii noi zicând doar ng generate component x sau ng generate service y, iar pentru a vedea ceea ce codez, îmi oferă un server live, care reîncarcă pagina de fiecare dată când dau un save, totul prin ng serve.

Angular recomandă ca codul să fie scris folosind TypeScript, care este un supraset de JavaScript ce introduce tipuri statice acolo unde îi zici să facă asta (pentru cine nu știe, JavaScript este un limbaj de programare de tip weakly-typed). Astfel, ne permite să detectăm erori din timp, la momentul "build"-ului, nu atunci când codul este rulat deja de client, când cel mai probabil este prea târziu. În timpul build-ului, codul de TypeScript este convertit înapoi la JavaScript, iar noi putem să îi zicem și la ce versiune să îl convertească. Astfel noi putem să scriem cod folosind TypeScript care se bazează pe ultima versiune de JavaScript ES2018 (sau chiar ESNext), dar să îi zicem să îl transforme în cod JavaScript, versiunea ES5, pentru ca toate browserele să ne înțeleagă codul.

Mai sunt multe alte puncte forte, precum o varietate mare de librării și pachete dezvoltate special pentru Angular, care rezolvă anumite probleme (Angular Material, Angular Fire, AngularCommerce, ngrx, nx/nrwl, etc), sau modularitatea cu care dezvolți în Angular, care îți permite o reutilizare eficientă a codului dar și tree-shaking.

Nu în ultimul rând, Angular este dezvoltat de Google, iar lui Google îi place de Angular. Atât de mult, încât îl folosește în multe din produsele sale. Peste 600 de aplicații Google folosesc Angular. ”Okeeey, și cu ce mă ajută pe mine asta?!”. Ei bine, ne ajută să știm că Angular funcționează, și va funcționa în continuare atunci când o versiune nouă apare (în momentul în care am scris articolul, Angular se află la versiunea 7). Pentru ca Google să lanseze o nouă versiune de Angular, ei o testează pe toate cele 600+ aplicații ale lor. Și doar după ce toate acestea funcționează perfect cu noua versiune, atunci o lansează și pentru noi, muritorii de rând.

So if it didn't break at Google, it won't break on my machine, for sure.

Wow, totul sună super, de unde încep?!

Chiar de aici!

https://angular.io/guide/quickstart

În partea de Getting Started sunt prezentate toate lucrurile de care ai nevoie pentru a putea dezvolta liniștit aplicația ta de Angular.

După ce îți instalezi tot ce ai nevoie, îți recomand să urmărești tutorialul lor de început.

Tutorial: Tour of Heroes

Iar pentru a înțelege cum funcționează Angular, îți recomand să arunci un ochi peste articolul care descrie arhitectura platformei.

Architecture Overview

După toate acestea, poți să te apuci liniștit să îți dezvolți aplicația ta web pe care ai dorit dintodeauna să o construiești, dar poate nu ai știut exact cum să o faci, sau să o faci eficient și rapid. Următori pași după ce o construiești -> pui pe server -> mediatizare -> aduni useri -> ceri bani =>> PROFIT!

Vă dorim spor la tutoriale!