Typescript, React șI Redux. Să alegem cele mai bune tooluri pentru aplicaţiile web

Paul Suciu
UI Technical Lead @ SDL

În momentul de faţă, dezvoltarea aplicaţiilor web client nu seamănă deloc cu dezvoltarea de acum câţiva ani.Deoarece viteza engine-urilor JavaScript a crescut, așteptările utilizatorilor pentru aplicaţiile care rulează în browser au crescut. Utilizatorii sunt obișnuiţi cu site-uri care au interfeţe de utilizator complexe: Facebook, Gmail sau Google maps. Pentru a putea crea astfel de interfeţe, trebuie să tragem cu ochiul la ceea ce folosesc ceilalţi pentru a rezolva acesta lucru.

Alegerea toolurilor, a limbajelor de programare și a librăriilor a explodat în ceea ce privește opţiunile, în ultimii ani, fapt ce a dus la așa-zisa "oboseală JavaScript" ("JavaScript fatigue").

În acest articol, încercăm să navigăm prin acest peisaj, având în vedere că totul este din ce în ce mai dominat și mai mediat de JavaScript. JavaScript devine un fundament universal pentru un ecosistem divers de tooluri noi, limbaje și librării care vizează  JavaScript într-o manieră trans-platformă.

Nu există formulă generică care să garanteze succesul indiferent de aplicaţie, dar puteţi alege cele mai bune tooluri pentru aplicaţiile voastre.

Limbajul

Peisajul JavaScript include multe limbaje care au drept punct comun codul JavaScript.

Există limbaje dinamice precum: ES2015(JavaScript), CoffeeScript, ClosureScript; limbaje strongly typed precum: Typescript sau Dart; strongly typed and functional precum Elm sau PureScript. Acestea sunt doar câteva din opţiunile disponibile.

Limbajele strongly typed precum TypeScript sunt extrem de utile deoarece ajută la eliminarea a clase întregi de buguri care, altfel, ar putea fi detectate doar la runtime.

Acestea aduc cu ele un efort de scriere deoarece trebuie să specificaţi tipurile de clase, de variabile și de semnături pentru funcţii, dar, în același timp, ele pot ajuta în procesul de documentare, deoarece implică o remodelare mai facilă a codului. Valoarea acestei investiţii iniţiale va crește doar în măsura în care codul crește.

Un feature bun în Typescript este că acesta este un superset al JavaScript, deci puteţi începe să scrieţi cod  JavaScript normal, iar apoi doar să adăugaţi adnotări legate de tip,  în mod gradual, dacă doriţi acest lucru.

În acest moment, Typescript este unul dintre cele mai populare limbaje trans-platformă, fiind, de asemenea, utilizat activ în dezvoltarea librăriilor Angular sau a altor librării.

Librăria/frameworkul interfeţei de utilizator(UI)

Când se alege o librărie UI, este important să ne uităm și la ecosistemul, și la comunitatea din jurul acesteia.

Este un mare avantaj dacă puteţi utiliza componentele existente și dacă puteţi găsi ușor ajutor în mediul online când vă împotmoliţi.

Google folosește frameworkul Angular, în timp ce Facebook are propria librărie numită React. Acestea sunt doar două dintre cele mai influente librării.

Prima versiune de Angular a fost lansată în 2010 de Google. De atunci, a fost rescrisă complet, iar a doua versiune a fost lansată în 2016. React a apărut în 2013 și a avut o evoluţie mai puţin dureroasă decât Angular.

Angular este un framework complet, în timp ce React este doar o librărie de tip view layer (vedere la nivel de strat) cu o suprafaţă API mai mică.

Abordarea React minimizează noile concepte care trebuie învăţate, în timp ce puteţi în continuare să aderaţi la standardele JavaScript. Un exemplu este introducerea la clasele ES2015. React își devalorizează propria metodă createClass pentru a se alinia standardelor JavaScript ce evoluează permanent.

Pe de altă parte, când se utilizează un framework complet, precum Angular, suprafaţa API de care dispuneţi este mai mare de la început.

Unul din lucrurile bune ale React este că views templates (șabloanele de vederi) sunt create în JavaScript sau fișiere JSX. Acest lucru presupune că React încearcă să aducă HTML în JavaScript, în timp ce alte frameworkuri tind să aducă JavaScript în HTML.

Acesta este un feature foarte important care are două beneficii majore:

• Nu trebuie să inventăm și să învăţăm noi structuri de controale pentru a manipula HTML, a se vedea directiva "for" din Angular.  Putem folosi cod JavaScript normal, precum array.map pentru a realiza iteraţii într-o colecţie.

• Când compilaţi codul JavaScript sau TypeScript, deoarece view-urile, în React, sunt doar JavaScript, orice eroare de sintaxă va fi remarcată timpuriu la compilare.

State management/Management-ul de stare

Librării precum React fac managementul de stare explicit și vă forţează să vă gândiţi la starea aplicaţiei de la bun început.

Managementul de stare este dificil și poate deveni sursa a multe buguri din aplicaţiile voastre.

Pentru a face management de stare în React, puteţi folosi librăria Redux.

Redux operează asupra principiului fluxului de date unidirecţional promovat de React, în același timp încercând să fie un container predictibil de stare pentru aplicaţiile JavaScript.

Se poate folosi cu React, Angular și alte frameworkuri UI.

Redux se bazează pe trei principii simple:

• întreaga stare a aplicaţiei este stocată într-un obiect arbore (object tree) într-un singur loc de stocare.

• Singura modalitate prin care se poate schimba arborele de stare (state tree) este emiterea unei acţiuni, un obiect ce descrie ce s-a întâmplat.

• Pentru a specifica modul în care acţiunile transformă arborele de stare, scrieţi reductori puri (pure reducers).

Orice schimbare de stare din aplicaţie va fi transmisă ca un mesaj către funcţiile reducer, fapt ce va genera o nouă stare de aplicaţie care să conţină informaţie nouă combinată cu informaţie veche.

În Redux, cheia/soluția rezidă într-o locaţie unică de depozitare; starea nu suferă modificări, una nouă fiind generată de fiecare dată. Acest mecanism simplu și centralizat face ușoară identificarea zonei de unde vin schimbările și care sunt zonele afectate de aceste schimbări.

Când starea se decuplează de UI, rularea în medii diferite devine mai ușoară: client, server sau nativ, și poate oferi o bună experienţă de codare, cum ar fi: hot reloading sau time traveling debugger.

Tooluri pentru Build

Când folosim limbaje care merg spre JavaScript sau când folosim noul standard ES2015 JavaScript, este bine să avem un tool de build care să considere modulele aplicaţiei voastre și care să genereze elemente statice pe care să le folosiţi la runtime.

Acest lucru vă permite să programaţi la un standard JavaScript mai înalt, și să transgresaţi codul pentru ca acesta să ruleze pentru elementele pentru care browserele pot oferi susținere și găzduire în zilele noastre.

Un tool bun, disponibil este Webpack Module Bundler.

Când facem build cu Webpack, este, de cele mai multe ori, suficient să pointaţi către pagina de start a aplicaţiei voastre de o pagină, iar, dacă folosiţi module cu elemente importate, unitatea care agreghează sub formă de pachet (the bundler) va considera toate dependinţele și le va include în pachetul rezultant  în mod automat.

Puteţi folosi Webpack și pentru a încărca și a agrega alte resurse decât codul, precum stilurile CSS. Webpack este folosit și pentru minification pentru pachete agregate, pentru producţie sau pentru generarea de hărţi-sursă pentru cod.

Concluzie

Utilizarea Typescript, React, Redux și a Webpack poate aduce multe beneficii proiectului vostru:

• Scriere de cod utilizând ultimele standarde JavaScript  in a type safe way, cu beneficiul suplimentar al remodelărilor ușoare;

• Utilizarea unei librării UI adoptate de mulţi programatori, o librărie bine documentată, cu resurse, exemple și comunitate aferente;

• Management de stare predictibil care este ușor de adoptat și de înţeles chiar de către programatorii care sunt noi în echipă;

• Un tool de build care descoperă dependinţele pe care le adăugaţi la cod și care creează elemente pe fundal.

Aceasta nu este singura modalitate disponibilă, dar aceasta se adaptează bine la proiecte mari și echipe mari, în același timp susţinând o bună arhitectură a aplicaţiei și oferind securitate adiţională la compilare.

Să scrieţi cod fericiţi!