Stai leggendo il codice sorgente del tuo framework? Si, puoi farlo

Dive Into React. Tuffati in angolari. Non abbiate paura. Può essere affascinante e gratificante

La prima applicazione Web che abbia mai scritto era un sistema di forum. L'ho scritto nel dicembre 2000 usando un linguaggio di programmazione chiamato Tcl. All'epoca, le applicazioni Web consistevano principalmente di codice eseguito sul lato server. In effetti, guardando indietro al codice sorgente, vedo che conteneva solo 50 righe di codice JavaScript che eseguono la convalida del modulo. Non ho nemmeno scritto questo codice - secondo i commenti, è stato scritto dal mio amico Oshri Adler.

Quindi, 18 anni fa, non ho nemmeno prestato attenzione a JavaScript: era solo un linguaggio giocattolo il cui scopo era controllare se l'indirizzo e-mail inserito sembrava valido e gridare all'utente in caso contrario, o scambiare le immagini dei pulsanti quando il mouse è passato loro. Avanti veloce di 18 anni e JavaScript è enorme. Costruiamo enormi applicazioni, costituite da milioni di righe di codice JavaScript. E non farmi nemmeno iniziare su JavaScript e IoT.

Stranamente, Form Validation è ancora una cosa importante, ma a differenza di 18 anni fa abbiamo dei framework che ci aiutano in questo. Ci aiutano anche a suddividere le nostre applicazioni in componenti più piccoli e riutilizzabili, aggiornare lo schermo per riflettere le modifiche nel modello di dati e sostanzialmente risolvere una serie di problemi comuni a molte applicazioni Web.

Angolare, Vue.js, React - probabilmente ne hai usato almeno uno. Ma ti sei mai fermato a guardare dietro le quinte? Hai mai controllato il codice sorgente del framework che usi?

C'era una volta, il codice sorgente è stato pubblicato nei libri

Usa la fonte, Luke!

Web Frameworks espone un'API che consente di strutturare il codice e di estrarre alcune delle API Web. Quando è stata l'ultima volta che hai chiamato il metodo setAttribute () direttamente su un nodo DOM? Il framework fa questo per te.

L'astrazione è generalmente eccezionale, poiché ci aiuta a concentrarci sul problema che vogliamo risolvere, e non sui dettagli dell'implementazione, e consente anche di modificare l'implementazione sottostante mentre riutilizziamo il codice esistente. Pensa a una reazione nativa.

Tuttavia, anche l'astrazione ha un prezzo: non possiamo più essere sicuri di ciò che sta accadendo dietro le quinte. Ad esempio, quando Alex Castillo e io abbiamo preparato il nostro discorso su VR Hero, abbiamo cercato di integrare Angular con A-Frame. Ha funzionato abbastanza bene, fino a quando non abbiamo voluto passare un oggetto da Angolare a un elemento A-Frame. Angular ha alcune ipotesi su come funziona setAttribute () e quindi stava convertendo il valore in una stringa. Abbiamo dovuto scavare nel codice sorgente di Angular per capirlo (e aggirare il problema).

Scavare nel codice sorgente del framework non è utile solo quando qualcosa va storto e si desidera eseguire il debug. Puoi anche imparare molto guardando i dettagli dell'implementazione e leggendo i commenti nel codice sorgente. In effetti, è così che Max, Wizard of the Web ha avviato AngularInDepth, osservando il codice sorgente di Angular, vedendo come si comporta e documentando le sue osservazioni. Puoi dare un'occhiata al suo articolo su Reverse Engineering Web Frameworks per alcuni ottimi consigli.

E non si tratta solo di framework: al giorno d'oggi, la maggior parte degli strumenti che utilizziamo è scritta utilizzando JavaScript ed è open source. Ad esempio, quando ho progettato TypeWiz, ho basato la mia implelementazione su ciò che ho imparato guardando nel codice sorgente per tslint.

Come affrontare il codice sorgente?

Inizierai con la ricerca del codice sorgente per il tuo framework. Il googling rapido indicherà probabilmente che sei il repository GitHub corretto, ma li elencherò di seguito per farti risparmiare un po 'di tempo:

  • Angolare
  • Reagire
  • Vue.js

Il prossimo passo sarebbe clonare il codice sorgente. Certo, puoi sfogliarlo su GitHub, ma la clonazione, l'installazione delle dipendenze (usando npm o thread) e l'apertura nel tuo editor di codice familiare (Visual Studio Code, WebStorm, ecc.) Ti semplificheranno la vita navigando e cercando codice sorgente.

Se andiamo con Angular per esempio, possiamo clonarlo digitando:

git clone https://github.com/angular/angular

Dopo aver ottenuto una copia locale del codice, installa le dipendenze con npm (o thread) e dedica qualche minuto a familiarizzare con la struttura del progetto. Tutti i framework comprendono diversi moduli e sia React che Angular utilizzano una struttura mono-repo.

Il modo migliore per orientarsi è consultare la documentazione. Ad esempio, il file CONTRIBUTING nel repository Vue ha una sezione specifica che spiega la struttura del progetto. React ha un'ottima guida che spiega alcuni concetti importanti e come organizzare il codice.

Che cosa sta cercando?

Una volta che hai una buona idea di come è organizzato il progetto, è tempo di chiederti cosa vuoi trovare. Forse vuoi sapere come Angular implementa ngIf, perché vuoi implementare la tua direttiva condizionale?

Guardando i documenti, possiamo dire che ngIf è definito nel modulo @ angular / common. Questo verrebbe mappato su pacchetti / common / src all'interno del repository Angular. Possiamo guardare i file lì e provare a determinare quale è probabilmente la definizione di ngIf. Sappiamo che è una direttiva, quindi guardare nella cartella delle direttive ha un senso, e poi, all'interno, vediamo un file chiamato ng_if.ts - Voila!

In alternativa, potremmo anche provare a individuare il codice sorgente per ngIf cercando il testo [ngIf] all'interno del repository, poiché potrebbe apparire nella stringa di selezione all'interno della definizione della direttiva.

Un altro esempio sarebbe trovare l'implementazione di setState () in React. Questo fa parte del pacchetto di reazione principale, quindi esamineremo i pacchetti / reazioni / src. L'esecuzione di una rapida ricerca del nome del metodo rivela la sua posizione, all'interno di un file chiamato ReactBaseClasses.js in cui è definita la classe Component. Osservando il codice sorgente per la funzione, possiamo vedere che delega il lavoro effettivo a un altro metodo, chiamato enqueueSetState.

Se cerchi enqueueSetState, troverai diverse implementazioni. Sei invitato a continuare a esplorare e condividere le tue scoperte!

Come ottenere aiuto?

Tutti questi quadri sono progetti piuttosto grandi. A volte fanno pazze ottimizzazioni, come il compilatore di Angular (e ora anche Ivy) o Virtual DOM e Fiber di React. Leggere la documentazione, i commenti nel codice sorgente e talvolta anche i post sul blog può essere un ottimo punto di partenza. Quindi, puoi cercare i test unitari per il codice che stai cercando di capire.

Ecco un bel trucco che puoi usare per capire rapidamente quali casi di unit test sono rilevanti per il pezzo di codice che stai cercando di capire: modifica semplicemente il codice per generare un'eccezione. Ciò farà fallire la maggior parte dei test unitari che dipendono da questo codice e sarete in grado di individuarli. Per me, i test unitari sono un'altra forma di documentazione: spiegano come si comporta il codice in questione, e talvolta anche perché fa quello che fa.

Infine, se hai ancora un pezzo di codice che non riesci a capire, ti suggerisco di pubblicare un breve documento che descriva ciò che hai scoperto finora. Joshua Comeau lo ha fatto qualche anno fa, quando ha esplorato il codice sorgente di reag - pubblicando le sue scoperte ogni giorno.

Ho scoperto che quando condividi ciò che già sai, le persone sono disposte a immergersi e colmare le lacune. Puoi quindi aprire un problema su Github o chiedere aiuto su StackOverflow, Reddit, Slack, ecc.

È tempo di iniziare a esplorare!

Ti ho dato alcuni consigli su come iniziare, e ora tocca a te. Quale framework usi al lavoro? Ti sfido a programmare due ore nel tuo calendario e ad analizzare il codice sorgente, osservando come vengono implementate le funzionalità che usi. Imparerai qualcosa di nuovo, lo prometto!

Come nota finale, voglio ringraziare Netta Bondy per l'idea di scrivere questo post sul blog. Mi è venuto in mente durante i suoi discorsi al Reversim Summit della scorsa settimana, Deeper Than Abstractions. Grazie Netta!

Questo è il 18 ° post della mia Postober Challenge: scrivere qualcosa di nuovo ogni singolo giorno per tutto ottobre.

Twitterò ogni volta che pubblicherò un nuovo post, prometto!