Dev 7 min readface Niccolò Cantùfolder Coding 23 Mar 2017

React JS, un'introduzione



React è una libreria Javascript per creare interfacce grafiche, anche chiamate View, tramite un sistema efficiente di componenti. Questa libreria ha avuto un enorme successo, tanto da aver creato attorno a sé un vero e proprio ecosistema di sviluppatori e aziende che lo utilizzano e rilasciano tramite NPM ulteriori moduli e componenti. La natura di React è fortemente descrittiva, tanto da essere stata la prima libreria a sfruttare veramente con successo le API funzionali di Javascript; i componenti React infatti sono la rappresentazione in una sorta di HTML.

Per dare una definizione più precisa possiamo dire che in React V = f(S), ossia che il componente (View) varia in funzione di un certo input S che chiamiamo stato del componente. Quindi non solo lo stato determina come apparirà il componente, ma ci garantisce che in qualsiasi momento io gli passi lo stesso input otterrò lo stesso output. Nella pratica sappiamo bene che non funziona sempre così, spesso il codice javascript si appoggia a variabili globali, che possono essere modificate in altre parti di codice rendendo molto imprevedibile il risultato.

Ad esempio vogliamo creare un componente che carichi una lista di articoli da un endpoint. Naturalmente quando il componente verrà mostrato sarà vuoto, quindi vogliamo che durante il caricamento mostri uno spinner e solo quando gli articoli saranno stati scaricati li mostri al lettore. In questa casistica possiamo definire due stati: caricato e non caricato, a ciascuno di essi corrisponde una visualizzazione.

Il vantaggio vero e proprio di React si intuisce nel momento in cui si vogliono collegare tra loro più componenti per creare una webapp. Torniamo indietro di qualche anno, quando i framework MV* (tra cui Angular, Ember, Backbone) ebbero molto successo, tra i motivi principali c'era la tecnica del two-way data binding, che garantisce la possibilità di avere dei modelli di dati che si aggiornino automaticamente a seconda dei cambiamenti nelle view. Questo sistema è ottimo per applicazioni con poche view e pochi modelli, ma nel momento in cui se ne combinano molte tra loro il risultato è la totale perdita della prevedibilità nel flusso dei dati e il conseguente debug più complicato.

React invece si presenta con un'architettura scalabile e a stati finiti, che mette al centro lo stato dei singoli blocchi. Tramite un'estensione per il browser è possibile ispezionare i componenti, il loro stato attuale e le loro proprietà.

react devtools

React DOM

React si compone di più pacchetti, quello base è 'react' che implementa il sistema di componenti, in aggiunta, a seconda della piattaforma per cui si vuole realizzare l'app si ha a disposizione un ulteriore pacchetto, per le pagine Web si utilizza React DOM. Questo pacchetto implementa l'effettivo funzionamento della funzione di render, ossia fa da intermediario tra il componente e il DOM, dicendo come il secondo debba essere cambiato a seconda dei cambiamenti del primo. Tutto questo viene fatto nel modo più ottimizzato possibile, dal momento che le mutazioni del DOM sono operazioni costose in termini di performance, usando un algoritmo di diff-patch che apporta il minor numero di modifiche possibili al DOM. Questa funzionalità è anche nota come Virtual Dom e potete trovarla anche in altre librerie.

React Native

Come dicevo prima non esiste solo React DOM e il Web non è l'unica piattaforma suportata da React. Tramite React Native è possibile realizzare app Android e iOS native utilizzando comunque Javascript come linguaggio. Quanto detto per il DOM nel paragrafo precedente vale anche per iOS e Android, che avendo una base diversa dal DOM non potranno utilizzare componenti come <h1 /> oppure <a />, ma avranno a disposizione altri componenti nativi come <ScollView /> e <Text />.

architettura react native

Cambiando piattaforma tra Web e Android/iOS è possibile riutilizzare totalmente la parte di codice relativa alla logica dell'applicazione, mentre invece i componenti vanno riscritti.

we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere".


Non stiamo inseguendo il motto "scrivi il codice una volta sola e eseguilo ovunque". Piattaforme diverse hanno un aspetto diverso, danno sensazioni diverse e hanno possibilità diverse, per questo noi vogliamo sviluppare comunque buone app per ogni piattaforma, ma uno stesso gruppo di ingegneri dovrebbe essere in grado di sviluppare applicazioni per qualsiasi piattaforma scelgano, senza aver bisogno di imparare un set fondamentalmente diverso di tecnologie per ciascuna. Chiamiamo questo approccio "impara una volta sola e scrivi codice per qualsiasi piattaforma".

Chi lo usa?

"credo che il mio latte sia durato più di alcuni framework Javascript"

Bisogna sempre tenere conto di chi sviluppa il codice e di chi lo utilizza perché in alcuni casi garantisce la sopravvivenza del framework. React è sviluppato da Facebook, ma a differenza di Angular, è utilizzato in moltissime parti del social network e di altri prodotti Facebook, garantendo un ottima stabilità e l'assenza di bug catastrofici (prima di ogni release React viene testato su facebook.com).

Tra i grandi nomi che utilizzano React in produzione troviamo Facebook, Whatsapp, Instagram, Airbnb, Netflix, Yahoo, Atlassian, Khan Academy, Dailymotion, eBay, IMDb, New York Times, Paypal, Periscope, Reddit, Twitter Mobile, Wordpress.com. Le app scritte con React Native sono Facebook, Instagram, Soundcloud, Tesla, Airbnb, Baidu, Vogue, Bloomberg. Se siete curiosi ne potete trovare molti altri qui.


js react react-native react-vr facebook
  • Telegram
  • Whatsapp
chat

Commenti