Slide evento Code Refactoring JavaScript
- 1. LUCA PAGLIARO CODE REFACTORING IN JAVASCRIPT Come scrivere codice che non odierai
- 2. Come funziona l'evento Appuntamento informale Argomento scelto dalla community Non ci sono guru assoluti Interagire è un valore aggiunto Confronto sulle tematiche trattate Votazione per i prossimi argomenti
- 3. Luca Pagliaro Web Developer @ TheWaveStudio.it A 18 anni collaboro con una agenzia di Padova Entro in YITH dove realizzo temi e plugin per WordPress da vendere su ThemeForest e Yithemes. Sviluppo e disegno il frontend di LovePedia, un sito di incontri con 1.7+M di utenti. Ho fondato una startup per applicare alla ristorazione un algoritmo basato sui big data. Entro in Motorsquare dove sviluppo la Web Application Collaboro con The Wave Studio in cui coordino l'area web frontend CHI SONO
- 4. COSA SIGNIFICA ENTROPIA PROLOGO E ALTRE TRISTI STORIE SUL CODICE SCRITTO A FINE PROGETTO
- 5. La teoria delle finestre rotte Alla fine degli anni ’60 lo psicologo sociale Philip Zimbardo fece un esperimento: parcheggiò un’automobile senza targa nel Bronx, a New York, e una simile a Palo Alto, in California. Lo psicologo abbandonò entrambe le automobili con il cofano aperto. L’auto nel degradato Bronx fu saccheggiata Quella parcheggiata in California non successe praticamente nulla. Successivamente lo psicologo cambiò le condizioni dell’esperimento a Palo Alto rompendo un finestrino: a quel punto le cose cambiarono e anche questa auto fu saccheggiata.
- 6. ORTOGONALITÀ & DUPLICAZIONE PROLOGO QUANDO SCRIVERE MEGLIO È MEGLIO DI SCRIVERE DI PIÙ
- 7. Duplicazione Il modo migliore per favorire l'entropia in un progetto è trovare due pezzi di informazione contraddittorie nel codice, o trovarne raffigurazioni in punti differenti. Perché succede? Duplicazione imposta, inavvertita, per impazienza o duplicazione tra diversi sviluppatori. Quando il principio DRY viene applicato con successo, una modifica di qualsiasi singolo elemento di un sistema non richiede una modifica in altri elementi logicamente non correlati D.R.Y. => Don't repeat yourself. "Ogni pezzo di conoscenza deve avere una rappresentazione unica, non ambigua e autorevole all'interno di un sistema".
- 8. Ortogonalità Viene usato in geometria per indicare due rette che si incontrano in un solo punto formando un angolo di 90°, in informatica ha preso il significato di una forma di indipendenza o disaccoppiamento tra parti di codice. Due o più moduli sono ortogonali se il cambiare di uno non influenza i restanti. Benefici: Cambiamenti localizzati portano a tempi di sviluppo e test ridotti per singoli moduli Si favorisce il riuso Guadagno in produttività quando si combinano componenti (MxN funzionalità) Bug sono isolati Non essere dipendenti da specifiche librerie/parti di codice
- 9. Documentazione Un codice che non si può odiare è un codice che si può capire!
- 10. Prima documenta poi fai La documentazione ed il sorgente dovrebbero rappresentare la stessa logica, solo che uno è scritta nella lingua corrente e l'altra in codice. Benefici: Hai una documentazione sempre aggiornata Scrivendo prima in italiano/inglese definisci meglio il concetto Ti verranno in mente possibili problemi prima di sviluppare In team, dai la possibilità di prevedere cosa farà il tuo codice agli altri sviluppatori non bloccandoli
- 11. Documentazione Generata Se vi annoiate a scrivere migliaia di righe di documentazione esiste tool che la generano a partire dai commenti alle nostre funzioni, non ci sono scuse. Benefici: Formattazione omogenea Non esci dall'IDE per scrivere la DOC Se ben impostata i commenti parlano da sé e migliorano il codice
- 12. Commenti Commenta bene solo il codice che ha un alto livello di complessità, evita il rumore di fondo.
- 13. JavaScript Cosa fare e cosa evitare
- 14. NAMING & VARIABILI JAVASCRIPT DO & DON'T
- 15. Dove dichiarare variabili Utilizzare una const o let per ogni dichiarazione. Raggruppa tutte le tue const prima e poi raggruppa le let. Assegna le variabili dove ti servono, ma inseriscile in un luogo ragionevole
- 16. L'importanza del naming In questo codice ci sono 23 parole (non includendo valori hard-coded). Il programmatore ha la responsabilità di dare un nome a di 14 di queste. Più del 60%!
- 17. Convenzioni sul naming Il codice deve poter parlare ed esprimere quello che fa solo leggendolo Evitare nomi di funzioni con una sola lettera, ogni cosa deve avere un significato camelCase per funzioni e variabili PascalCase solo per classi e costruttori Meglio evitare gli undescore Gli acronimi ed inizialismi vanno scritti con il medesimo "case" le constanti vanno scritte in UPPERCASE
- 18. Variabili con un significato 1 Il codice deve poter parlare ed esprimere quello che fa solo leggendolo Nomi significativi e pronunciabili (data) Usare constanti cercabili (time) Utilizza variabili esplicative (address)
- 19. Variabili con un significato 2 Il codice deve poter parlare ed esprimere quello che fa solo leggendolo definire boolean che si leggono bene in un if() Scegli sempre un nome descrittivo invece di uno conciso Utilizza nomi che spiegano bene cosa fa la funzione
- 21. Argomenti di una funzione Limitare il numero di argomenti di una funzione è molto importante perché ti permette di testarla più facilmente. Se la funziona accetta un oggetto come parametro, prova ad usare la sua versione destrutturata per rendere l'input prevedibile.
- 22. Un metodo deve fare una cosa... Se è possibile far eseguire al metodo una sola azione sarà più facile il suo refactor e la leggibilità del tuo codice sarà maggiore e più chiara
- 23. ...e la deve fare solo lui!
- 24. Evitare effetti inattesi Quando scriviamo una funzione stiamo attenti a quello che può succedere. Qui il carrello potrebbe essere null, e modificare direttamente quello che ci viene passato potrebbe non essere la soluzione giusta...
- 26. Quando usare le classi di ES6 Se hai bisogno di ereditarietà nel tuo codice è quasi sempre meglio usare il costrutto Class di ES6. Altrimenti utilizza piccole funzioni fintanto che non avrai bisogno di gestire oggetti più complessi
- 27. Concatena i metodi Questo pattern è molto utilizzato, anche in librerie famose come jQuery e Lodash. Permette al tuo codice di essere maggiormente espressivo e meno verboso > Diventa >
- 28. Cosa è il SOLID? In informatica, e in particolare in programmazione, l'acrostico SOLID si riferisce ai "primi cinque principi" dello sviluppo del software orientato agli oggetti. I principi SOLID sono intesi come linee guida per lo sviluppo di software leggibile, estendibile e mantenibile. La parola è un acrostico che serve a ricordare tali principi: Single responsibility (ogni classe deve avere una sola responsabilità) Open-closed (aperto ad estensioni, chiuso a modifiche) Liskov substitution (elementi di un sottoinsieme possono essere inter cambiati) Interface segregation (non forzare a dipendere da interfacce che non utilizza) Dependency inversion (classi non devono dipendere da classi ma da astrazioni)
- 30. Cosa sono i Moduli Quasi ogni linguaggio implementa il concetto di moduli, ossia un modo di includere funzionalità dichiarate in un file in un altro. I benefici di usare i moduli sono: Il codice può essere diviso in funzionalità self-contained. Lo stesso modulo può essere condiviso tra più applicazioni. Idealmente i moduli non hanno bisogno di essere esaminati perché svolgono una sola funzionalità senza rompersi. L'approccio a Moduli aiutano a risolvere i problemi di naming. Le funzioni x() in un modulo hanno uno scope diverso dalle funzioni x() nel modulo 2.
- 31. Come usarli al meglio Non esportare direttamente da un import. Esporta come "default" se la funzione è l'unica in output. Gli import vanno tutti ad inizio del documento, gli export alla fine
- 32. CONSEQUENZIALITÀ JAVASCRIPT PERCHÉ NIDIFICARE NON È BELLO :(
- 33. Promise Le funzioni di callback non sono sempre chiare e possono generare un eccessivo numero di nidificazioni. ES6 le Promise sono nativamente e globalmente accessibili
- 34. Async/Await Async/await in alcuni casi può soluzione migliore rispetto alle Promise. Per usarle basta scrivere una funzione che abbia prefisso async e puoi scrivere la tua logica senza dover concatenare con la keyword await.
- 35. Grazie Passiamo alle domande :)