Ho notato che molte persone si trovano spiazzate, me compreso, quando si tratta di iniziare a utilizzare una nuova tecnologia.
Finché lo si fa per lavoro si è in un certo senso costretti (e anche in quel caso a volte risulta complicato), ma quando si tratta di passione rimane difficile soprattutto perché si spende tutto il tempo e gli sforzi nel lavoro, rimanendo ben poco per ampliare le proprie conoscenze. Come qualcuno di voi già saprà, nell’ultimo anno ho avuto la possibilità di specializzarmi in React Native costruendo diverse app, più o meno complesse e quindi, rivolgendomi a chi vuole iniziare a divertirsi con questa tecnologia, con quale miglior modo farlo se non facendosi consigliare da chi come me lo fa per lavoro? 😁
Per chi non lo sapesse React Native è un framework di Facebook, proprio come React, per lo sviluppo cross-platform di app semi-native che possono girare su iOS e Android.
Il modo in cui è costruito è intrinsecamente diverso a tool come Cordova e più simile a framework come NativeScript.
Per un intro ai dettagli sul funzionamento interno di React Native vi rimando a nella documentazione ufficiale.
come iniziare
Tutti hanno una loro risposta a questa domanda di solito. Chi consiglia dei video corsi, chi la documentazione, chi dei tutorial sia video che testuali e via dicendo.
Ovviamente non c’è una risposta giusta a questa domanda perché ognuno di noi ha un determinato background di conoscenze e un certo modo di apprendere i concetti.
I buoni insegnanti infatti sono proprio quelli che comprendono i loro studenti e si adattano di conseguenza.
In base alle tue conoscenze attuali, quindi, ti consiglierò alcune risorse ed esprimerò alcuni concetti che potranno aiutarti.
Sicuramente prendere familiarità con il tool a riga di comando e l’installazione delle dipendenze native (Android Studio, xCode e via dicendo), può togliervi il grosso della frizione iniziale.
Per fare ciò basta seguire la documentazione ufficiale.
Inizio EXTRA
Prima di iniziare voglio puntualizzare una cosa di cui molti web developer non hanno coscienza.
Bisogna che capiate che questi strumenti per quanto possano essere spacciati dai vostri colleghi, e magari anche dagli sviluppatori del framework stesso, come la soluzione definitiva che vi permetterà di riciclare la vostra carriera convertendovi in mobile developers a tutti gli effetti, non lo sono.
Non lo è Cordova, Flutter, NativeScript e nemmeno React Native perché tutto ciò che potranno fare questi framework è agevolarvi nella comunicazione tra il nativo (diverso tra le piattaforme tra l’altro) e il mondo JavaScript a cui siamo tanto avvezzi (o Dart nel caso di Flutter), ma non potranno mai sostituirsi completamente al nativo (a meno di cambi radicali nelle piattaforme chiaramente).
Quindi a cosa servono queste tecnologie?
Ci sono casi in cui non possiamo riciclare le nostre conoscenze dello sviluppo web?
Sicuramente queste tecnologie stabiliscono una sorta di lingua franca per poter gestire alcuni degli aspetti dello sviluppo di un’app mobile (non tutti chiaramente) e l’aspetto generalmente problematico è l’accesso alle funzionalità native dello smartphone.
In quel caso avrete bisogno di scrivere codice nativo (o simil nativo nel caso di NativeScript) e la qualità del framework starà nel fornire una componente di scambio tra il nativo e JavaScript (o altri linguaggi) che sia solida, comprensibile e di facile approccio… in due parole, rendere facile la creazione di questi moduli nativi.
Sicuramente ne esistono già moltissimi pronti e open source per React Native (eccovi una risorsa per scoprire le lib più usate) ma possono andar bene, come possono aver problemi.
Dove però vi danno 10, 20 marce in più è nella costruzione dei layout. Con gli ultimi framework poi, strutturalmente diversi da quelli in stile Cordova, vi permettono di raggiungere livelli di fedeltà estremi e costruire layout con un’unica codebase su più dispositivi che riproduca fedelmente le esperienze native, fidatevi, non ha prezzo… battendo anche le PWA meglio scritte.
A riguardo mi permetto di linkare una mia repo alla quale ho lavorato qualche sera fa per la costruzione veloce di layout in React Native.
Esiste una tecnologia chiamata Expo che è un prodotto costruito su React Native. Seppur può essere buono per iniziare, perché facilita alcune delle problematiche qui esposte, lo sconsiglio principalmente perché molto limitante nel breve periodo. Per saperne di più, ho scritto qualcosa nel mio blog in inglese: why I dropped expo and embraced react native.
Fine extra
Riprendendo da dove eravamo rimasti, quindi, direi che:
Se sei un web developer, sarai felice di sapere che React Native è stato pensato per te!
Essendo React una libreria nata per la gestione dello stato della UI in un browser, è ovvio che molta della struttura di React Native è basata su di esso, ergo, riprende molti (quasi tutti a dire il vero) concetti che già applichiamo quando sviluppiamo nei browser, semplificandone alcuni e complicandone altri.
Sicuramente avrai dei grandi vantaggi se già conosci React, ma anche conoscendo uno dei framework attuali nel mondo del front-end, non te la caverai troppo male.
Per te non ci sono molti consigli se non quello di sporcarti da subito le mani con un progettino di partenza e iniziare a fare le associazioni più basilari tra i componenti di React Native e i tag html e scoprire come costruire i layout in un css quasi identico a quello del browser che supporta, però, solo flexbox la cui conoscenza, quindi, è fondamentale.
Eccoti un paio di infografiche basilari per iniziare a riguardo:
Un’altra cosa spiazzante, a primo impatto almeno, è l’assenza di una gestione automatica dell’overflow grafico. Nei browser, quando il contenuto straripa l’altezza o la larghezza del display del device, appare la scrollbar che ci permette di visualizzare comunque il contenuto. Questa cosa in React Native è assente ma, con molta cautela e per usi diversi*, viene fornito il componente <ScrollView />.
* Fate attenzione e ricordate sempre quando sviluppate per mobile, che non vi trovate in un browser e lo sviluppo cambia non solo dal punto di vista tecnico, ma anche da quello della UX. Un esempio? Le posizioni degli elementi e le proporzioni delle loro distanze.
Risorse:
- Date pure un’occhiata al sito ufficiale, oltre a contenere la documentazione dei componenti, mette a disposizione diversi intro
- Per tutto ciò che riguarda lo styling queste tre pagine basteranno. Style prop, Layouting, Dimensions.
- Date una letta a queste slide introduttive (dalla numero 17) da cui provengono le immagini precedenti.
- Usate snack di expo per condividere o iniziare a giocare con react native senza dover scaricare tutti gli accrocchi necessari sul vostro pc.
- Se vi ritrovate ad avere carenze su JavaScript (o sulle ultime funzionalità introdotte), un ripasso non fa sicuramente male.
- Anche questo articolo può essere utile per il parallelismo tra il web e il nativo.
Se sei un native developer, i miei consigli ahimè non saranno oro colato di sicuro. Io stesso sono un web developer che è entrato da un po’ nel mondo della programmazione mobile, ma di sicuro una cosa posso dirtela, hai un vantaggio su tantissimi altri developer di questa piattaforma.
Infatti il mio consiglio sarebbe quello di partire dalla struttura interna di React Native e puntare a formarti per bene sul “bridge” e le sue API (java o obj-c, in base alle tue conoscenze). Per farlo ti lascerò diverse risorse, ma non dimenticare l’utilità dei progetti già presenti sul web, possono fungere da esempi complessi di come costruire dei moduli nativi.
Poi per tutto il resto non è sicuramente la strada più sensata quella di diventare un front-end developer prima di iniziare a sviluppare in React Native.
Nonostante ciò, è bene avere alcune basi di CSS (come appunto strutturare layout con flexbox), basi di JavaScript ES6 e basi di React.
Se JavaScript per te è un linguaggio del tutto nuovo, potresti provare Flutter piuttosto che React Native. Non mi esprimerò sulle differenze nè sulle qualità dell’uno e dell’altro, fattostà che nuovo per nuovo, a quel punto è bene sapere che ci sono alternative.
Risorse:
- La documentazione ufficiale di React così come quella di React Native
- Un giochino per prendere confidenza con flexbox
- Alcuni articoli per la creazione di moduli nativi, link, link
- Tutte le risorse linkate per i web developer, si applicano anche qui chiaramente
- Storie di altri sviluppatori che sono passati dal nativo a React Native possono sempre aiutare, non siete i soli 🙂: da android, da android, da ios, da ios
come Continuare
Qui chiaramente lo spazio è veramente ampio e da questa fase non si esce mai, per sottolineare, come a molte persone piace dire, che non si smette mai di imparare.
Questo varia in base alle esigenze lavorative (future o meno), alle capacità o alle curiosità dell’individuo.
Puoi affascinarti al mondo delle animazioni (ad appassionati o meno, consiglio caldamente la serie “Can it be done in React Native“), oppure costruire dei moduli nativi molto complessi per risolvere determinate problematiche presenti anche nel mondo dello sviluppo nativo (un esempio è questa sofistica libreria di geolocalizzazione), o ancora specializzarsi nelle interiora del framework per padroneggiarlo a pieno (un esempio è questo simpatico AMA fatto da un senior react native developer dove dice di aver riscritto buona parte del bridge per interfacciarsi a un HUD display di un’auto).
Un po’ di risorse utili anche qui:
- La libreria standard per la gestione di gesture (una sorta di hammerjs nel nativo): react-native-gesture-handler
- Una fantastica libreria che apporta dei miglioramenti al sistema di animazione di react native: react-native-reanimated
- Come effettuare il profiling delle applicazioni scritte in RN
- Specializzarsi nel testing di applicazioni mobile (Detox, Appium e cosi via)
Spero di essere stato utile e per qualunque cosa scrivete pure nei commenti 🙂
