home Coding


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. See the Pen Ultimi articoli L'angolo nerd by Niccolò (@nicokant) on CodePen. 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 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 />. 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? 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.

Atom a hackable text editor

Atom è un editor di testo Open Source sviluppato dal team di GitHub, è disponibile per qualsiasi piattaforma, Mac OS, Windows e Linux. Per un programmatore la scelta dell'editor di testo è fondamentale e non è una cosa banale ne semplice. Dopo qualche anno di “pellegrinaggio” tra i vari editor disponibili partendo da Gedit passando per Sublime Text sono finalmente approdato ad Atom. Il prodotto made in GitHub è uno tra gli editor di testo più flessibili che ho potuto provare, grazie alla possibilità di installare pacchetti di terze parti. Grazie a questa feature sarà possibile ampliare le funzionalità dell'editor che nella sua versione base è piuttosto minimale, quasi scarno. Ne è un esempio la mancanza della voce “open recent” nel menu che è possibile aggiungere tramite l'installazione di un pacchetto apposito. Oltre ai pacchetti dedicati all'espansione delle funzionalità e al miglioramento della produttività, ne esistono altri finalizzati a rendere la scrittura del codice più piacevole e divertente come questo. La lista di pacchetti disponibili è lunghissima potrete trovarne per gli usi più disparati e aggiungerli alla vostra “collezione” per rendere il vostro Atom unico e personale. Le possibilità di personalizzazione non finiscono qui, come per altri editor come Sublime è possibile modificare l'aspetto del nostro editor tramite dei temi (qui potete trovare la lista completa), suddivisi tra UI theme, il tema dell'interfaccia e dei menu e syntax theme, ovvero il colore dello sfondo dell'area di testo e i colori per le parole chiave della sintassi del linguaggio usato. Solitamente il creatore di un tema fornisce entrambi, nulla vieta di combinare diversi temi per ottenere un aspetto unico e totalmente personale. Passando ad aspetti più tecnici Atom è basato su Electron, un framework implementato tramite chromium e node.js, Open Source e sviluppato da Git Hub. Permette di scrivere applicazioni desktop multipiattaforma utilizzando html, css, javascript. Le applicazioni basate su Electron sono ben 304, in tema di editor di testo anche Visual Studio Code di Microsoft è basato su questo framework. Atom è Open Source informazione che magari non a tutti interessa, ma se siete tra quelli che sposano più o meno fedelmente questa filosofia sarete ben felici di poter prendere in considerazione questo editor di testo, e potrete anche collaborare allo sviluppo.