Il nostro Web Team svelato — 2020

Tutto quello che avresti voluto sapere di Belka Web ma che non hai mai osato chiedere.

Autore

Luca Fedrizzi

15 lug 2020

Non abbiamo mai fatto mistero di cosa usiamo per creare prodotti web. Abbiamo sempre voglia di raccontare i nostri processi e le tecnologie che utilizziamo ma, purtroppo, non c’è sempre l’occasione di farlo.

Se dovessi incontrarci alle prossime conferenze siamo felici di fare due chiacchiere, siamo curiosi di sapere che strumenti usi! C’è sempre da imparare.

In breve:

«Belka è una “React-based” company».

È vero, ma c’è molto più di questo.

Come si intuisce dal titolo mi limiterò a parlare del settore web, che è solo uno dei team che lavora in Belka.

🗺️ Partiamo dal frontend, proseguiamo con il backend e per finire un pizzico di continuous integration.

Pronti? Iniziamo!

Frontend

Front-end

React

https://reactjs.org/

Questa libreria è il nostro marchio di fabbrica. Per creare le interfacce e le logiche che verranno utilizzate nel browser, secondo noi, non ha rivali.

React non è un framework e non offre soluzioni pronte per gestire applicazioni di grandi dimensioni. Come facciamo a farlo? Grazie alla community abbiamo a disposizione moltissime librerie, come Redux, che ci rendono la vita più semplice.

Create-react-app

https://create-react-app.dev/

Una buona parte dei progetti che dobbiamo creare da zero cominciano con il comando:

npx create-react-app my-app

Da quando è uscito questo magnifico strumento l’avvio di un nuovo progetto non coincide con la configurazione di Webpack. Webpack serve per assemblare in un unico pacchetto tutto il tuo codice JavaScript ed altri tipi di asset statici (ad esempio delle immagini). Per applicazioni che hanno più di un file uno strumento del genere è indispensabile.

Creare un ambiente di sviluppo e di produzione richiede molto tempo vista la quantità esagerata di parametri disponibili. La necessità di trovare uno standard di configurazione, accorciare i tempi per iniziare a sviluppare e la barriera all’entrata per farlo ha fatto nascere create-react-app.

Un altro punto a favore di questo strumento è la facilità con cui si rimuove dal progetto. Se hai bisogno di configurazioni particolari è possibile eseguire yarn eject e sparisce tutta la magia. Appariranno invece tutti i file di configurazione, pronti per essere modificati.

Typescript

https://www.typescriptlang.org/

Da qualche anno aggiungiamo i tipi a Javascript usando questo superset. Ha portato molti vantaggi per il lavoro di team e la stabilità del codice.

Ad ogni funzione che scrivi in typescript devi assegnare un tipo. Questo permette a te e agli altri membri del team di capire subito quali sono i parametri di input e cosa viene restituito in output. Se alla funzione vengono passati parametri con il tipo sbagliato, il transpilatore fallirà e ti aiuterà a capire la causa dell’errore.

Ci piace molto Typescript perché è un modo indiretto per documentare il codice e per spiegare il comportamento delle funzioni. Segnala subito se qualcosa non va quando lo utilizziamo.

Lo consideriamo irrinunciabile se il progetto diventa di dimensioni più grandi di un piccolo MVP.

Styled-components

https://styled-components.com/

Una new entry. Da fine 2019 stiamo sviluppando il Design System condiviso da Fatture in Cloud e Domustudio.

Al momento della scelta avevamo molte opzioni di fronte a noi. Nel nostro caso, considerato che il Design System sarebbe stato in comune tra tre diversi prodotti, volevamo uno strumento che ci permettesse di gestire le peculiarità stilistiche di ogni progetto.

Per questo motivo abbiamo scelto Styled Components, che permette di gestire lo stile di ogni componente in modo indipendente e permette la creazione di temi. Ogni tema ha un suo aspetto grafico ma mantiene la logica degli elementi in comune.

Scss → Scss modules

https://sass-lang.com/documentation/syntax https://css-tricks.com/introducing-sass-modules/

Per creare lo stile delle applicazioni usiamo spesso Sass importando le classi css con la tecnica dei “modules”. Questo consente di creare sia stili condivisi sia stili specifici per particolare componente. Quando si importa il foglio di stile, ad ogni classe viene dato un nome univoco, evitando quindi problemi di specificità dei selettori.

Storybook

https://storybook.js.org/

Usiamo Storybook principalmente per due motivi:

  • sviluppare componenti in maniera isolata
  • presentare i componenti a tutto il team.

Un designer ha bisogno di sapere quali componenti esistono già? Può andare sullo Storybook di progetto, scorrere la lista dei componenti, provarli e testarli.

Jest

https://jestjs.io/

Già integrato in create-react-app, Jest offre una suite di testing molto completa. Solitamente facciamo unit testing dei punti critici delle nostre applicazioni, sfruttando però soltanto una parte del suo potenziale. Permette anche di fare end-to-end testing se accompagnato da altri strumenti.

Nel corso dell’anno vogliamo aumentare la copertura dei test, quindi Jest diventerà il nostro migliore amico, o almeno lo speriamo 😂

Gatsby

https://www.gatsbyjs.org/

Il primo sito che abbiamo fatto con Gatsby è stato quello di Belka e il risultato è stato incredibile. Non è semplice come Jekyll, ma regala delle performance straordinarie. Tutti i siti statici che farò d’ora in avanti useranno questo framework. Provatelo e non ve ne pentirete!

Netlify

https://www.netlify.com/

È sempre in allerta. Quando si muove qualcosa nella repository, lui lo scopre e fa partire un deploy.

Una volta agganciato alla tua repository non ti dovrai più preoccupare di fare le build del tuo sito statico. Funziona con la gran parte dei generatori e dei linguaggi di programmazione e l’architettura della sua rete gli consente di servire i file ad una velocità incredibile.

Contentful

https://www.contentful.com/

Per gestire i contenuti del nostro sito abbiamo scelto Contentful. Consente di gestire tutti i dati di cui abbiamo bisogno in un unico ambiente. In particolare l’hosting delle immagini e la gestione delle lingue sono ben gestiti e tolgono la necessità di dover ricorrere ad ulteriori servizi.

Polymer

https://www.polymer-project.org/

Tra il 2019 e il 2020 abbiamo avuto la necessità di creare componenti riutilizzabili in diversi siti web. I requisiti erano che fossero:

  • completamente autonomi tra loro
  • che conservassero il proprio stile indipendentemente da dove fossero stati aggiunti
  • che potessero essere configurati dall’esterno

Abbiamo creato degli iframe coi super poteri avventurandoci nel mondo dei Web Components.

Sono forse una delle tecnologie web più sottovalutate ed è un gran peccato, dato che si tratta del nuovo standard web per costruire codice riutilizzabile. Se vuoi saperne di più ne ho parlato al pubblico di Speck&Tech.

Backend

Back-end

Django

https://www.djangoproject.com/

Quando dobbiamo creare un backend e servire delle API la nostra prima scelta è sempre Django. Lo uso da molti anni e la rapidità nello sviluppo, assieme alla flessibilità di questo framework, lo rende imbattibile.

Node.js

https://nodejs.org/

Quando non usiamo Django usiamo Node.js. Nel tempo abbiamo provato diversi framework:

Tutti in Belka sanno mettere le mani su Javascript, a differenza di Python, e possono dare una mano nel risolvere problemi o scrivere nuove features.

Database

SQLite in fase di sviluppo e prototipazione. PostgreSQL quando si comincia ad andare in produzione.

Continuous Integration

DevOps & CI

Bitbucket

https://bitbucket.org/

Per gestire le versioni del codice usiamo Bitbucket. La scelta non deriva solo da motivi tecnici, ma anche organizzativi. In Belka cerchiamo di usare il più possibile tutti gli strumenti che offre Atlassian dato che lavorano in sinergia.

Ad esempio: se ad un branch su Bitbucket do lo stesso nome di una User Story creata su Jira viene subito creato un legame fra i due. Quando avverrà il merge del branch su Jira verrà aggiornato automaticamente lo stato di progressione del lavoro.

Usiamo molto anche le Pipelines, i tool di CI/CD integrati all’interno di Bitbucket. Vedere i test che vengono eseguiti in automatico da sempre molta soddisfazione, soprattutto quando passano. 🤞

CircleCi

https://circleci.com/

Quando non usiamo le Pipelines di Bitbucket usiamo CircleCi. Non tutti i progetti sono uguali ed alcuni richiedono un trattamento particolare. Essendo concentrati principalmente sull’automazione offrono servizi premium che non si trovano ovunque, come ad esempio le macchine virtuali macOS.

Grazie per l’attenzione!

Per qualsiasi domanda puoi trovarmi su Twitter con l’handle @lc_fd.

Non dimenticarti di iscriverti alla newsletter di Belka! Non vorrai mica rischiare di perderti i nuovi articoli che usciranno, vero?

Autore

Luca Fedrizzi