Sviluppatore front-end vs sviluppatore back-end - Definizione e significato nella pratica

I siti web e le applicazioni sono complessi! I pulsanti e le immagini sono solo la punta dell'iceberg. Con questo tipo di complessità, hai bisogno di persone per gestirlo, ma di quali parti sono responsabili gli sviluppatori front end e gli sviluppatori back end?

  • I molti livelli di sviluppo
  • Ma non siamo tutti full stack
  • Allora qual è la differenza tra sviluppo front-end e sviluppo back-end?
  • Cos'è lo sviluppo front-end?
  • Cos'è lo sviluppo back-end?
  • Dove le cose diventano confuse
  • Risorse per imparare

I molti livelli di sviluppo

Che tu stia lavorando su un sito Web o su un'app iOS nativa, tutti gli ambienti di sviluppo condividono un tema comune: c'è un front-end per un'applicazione e un back-end.

Questa linea può diventare sfocata, soprattutto considerando l'ascesa di javascript e il mondo senza server. Con gli strumenti in qualche modo unificati, a volte potremmo chiederci se siamo uno sviluppatore full stack.

Sviluppatore "Fullstack". pic.twitter.com/yfymQmJJgq

- Brian Holt (@holtbt) 24 marzo 2018

Ma non siamo tutti full stack

Per quanto tutti vorremmo essere, non siamo tutti sviluppatori full stack. Personalmente, mi trovo in grado di essere produttivo nel back-end di un'applicazione, ma non è il mio punto di forza e preferisco di gran lunga essere testa in giù a costruire interfacce utente.

E alcune persone sono l'opposto, dove sono più forti nella creazione di API nel back-end di un'applicazione e mentre possono costruire un'interfaccia utente, potrebbe essere più un'esperienza simile a un prototipo che un'applicazione arricchita.

Allora qual è la differenza tra sviluppo front-end e sviluppo back-end?

Anche se sei uno sviluppatore full stack, ciò non significa che non ci sia una divisione delle responsabilità.

Allora che aspetto hanno?

Cos'è lo sviluppo front-end?

Il front-end di un'applicazione si riferisce in genere al livello che rappresenta l'interfaccia utente (interfaccia utente). Questo può includere qualsiasi cosa, da un sito statico con HTML e CSS a un'app React completa che alimenta l'interfaccia utente.

Che aspetto aveva tradizionalmente lo sviluppo del front-end?

Javascript attualmente governa il web front-end, ma non è sempre stato così. Anche se avrebbe potuto essere utilizzato per aggiungere piccoli bit di interazione a un sito, in genere i front-end venivano renderizzati utilizzando linguaggi di modellazione lato server come PHP basato su framework e Template Toolkit (Perl).

Questo è diventato molto popolare nella pratica con framework o strumenti fatti in casa come Wordpress che utilizzavano PHP per guidare una massiccia comunità di sviluppatori che hanno creato i loro siti Web con quegli strumenti.

Il modo in cui ha funzionato è stato che il linguaggio di creazione dei modelli è stato in grado di ottenere i dati direttamente dal server durante il rendering. Quando un browser richiedeva la pagina direttamente dall'origine (il server stesso), qualunque dato fosse necessario al modello, la logica dell'applicazione avrebbe fornito in quel momento.

Alcuni degli strumenti front-end più tradizionali includono:

  • Librerie come jQuery o MooTools
  • Framework di siti web come Wordpress
  • CSS semplice
  • Uso abbondante di elementi Table

Ma col passare del tempo, javascript ha continuato a diventare più maturo come linguaggio ei browser hanno continuato a diventare più potenti, il che ha portato all'idea che avremmo potuto spostare più di quel lavoro nel browser per creare esperienze più veloci e interattive.

Che aspetto ha lo sviluppo del front-end ora?

Ora è comune vedere siti Web e app basati su JavaScript creati utilizzando framework dell'interfaccia utente come React, Vue e Angular. Questi strumenti forniscono astrazioni che consentono agli sviluppatori di creare interfacce utente complesse con modelli riutilizzabili come i componenti.

Quando il browser carica la pagina, la pagina riceve un documento HTML iniziale che include anche il tag di script in javascript (come sempre). Ma una volta che il javascript viene caricato, raggiunge le API utilizzando le richieste del browser che, una volta completato, aggiorna la pagina per inserire qualsiasi tipo di dati dinamici che normalmente andresti d'accordo con quel primo documento HTML.

Sebbene sembri più passaggi, in genere fornisce un caricamento e un rendering della pagina iniziale più rapidi, per non parlare del fatto che ha un'ottima esperienza di sviluppatore. Fornendo meno su quella prima richiesta e dando la priorità a ciò che viene caricato dopo, di solito si ottiene una migliore esperienza utente.

Alcuni degli strumenti di front-end più comuni e in crescita in popolarità includono:

  • Framework di interfaccia utente come React o Vue
  • Framework web come Gatsby
  • Compilatori come Babel
  • Bundlers come Webpack
  • Strumenti CSS come Sass

Ma quelle API, sia quelle che paghiamo o che creiamo noi stessi, devono essere costruite da qualche parte . È qui che entra in gioco il back-end.

Cos'è lo sviluppo back-end?

Il livello back-end è solitamente il luogo in cui si verifica la logica aziendale. Questo può essere super complesso come le regole che determinano le entrate per un'azienda di e-commerce o qualcosa di più comune come un profilo utente.

Che aspetto aveva tradizionalmente lo sviluppo back-end?

I back-end delle applicazioni sono stati storicamente costruiti utilizzando linguaggi lato server come PHP o Ruby. L'idea è che tu abbia un server su cui devi eseguire operazioni complesse, quindi il modo per farlo è con un linguaggio che il server possa capire.

Ad ogni richiesta al server, il backend esegue l'intero stack delle operazioni, incluso il rendering del front-end. Utilizzando framework o architetture fai-da-te, il back-end accetterebbe la richiesta, capirebbe cosa dovrebbe fare con quella richiesta, eseguirà qualsiasi logica di business necessaria con la richiesta e fornirà al front-end tutti i dati di cui avrebbe bisogno per visualizzare una risposta quella richiesta.

Alcuni degli strumenti di back-end più tradizionali includono:

  • Server in locale o gestiti in remoto come Rackspace
  • Server HTTP che utilizzano Apache
  • Database come MySQL
  • Linguaggi lato server come PHP o Perl
  • Framework applicativi come Ruby on Rails

Che aspetto ha lo sviluppo back-end adesso?

Gli stack back-end sembrano in qualche modo simili a come facevano prima, a parte i modelli di codice più recenti, tranne che più spesso vedrai che i back-end forniscono dati tramite API tramite richieste HTTP invece che direttamente ai modelli su cui sta lavorando il team di front-end.

Sebbene la base non sia molto diversa, in realtà diventa sempre più complessa in quanto devi affrontare diverse implicazioni di sicurezza che potrebbero compromettere il tuo sistema se non configurato correttamente, come lasciare un'API aperta al pubblico che restituisce dati utente sensibili.

Ma anche il modo in cui funziona il server può essere completamente diverso. Mentre in precedenza potevamo eseguire il nostro python sul nostro server gestito (possiamo ancora farlo), ora possiamo fare uso di funzioni senza server con strumenti come AWS Lambda che semplificano il modo in cui gestiamo il codice.

Sebbene "serverless" non significhi necessariamente che non ci siano letteralmente server, significa che come servizio, lo sviluppatore non deve preoccuparsi di mantenere quel server e può invece concentrarsi solo sul codice che deve eseguire.

Alcuni degli strumenti di back-end più comuni e in crescita in popolarità includono:

  • Server cloud come AWS EC2
  • Servizi serverless come AWS Lambda
  • Database NoSQL come MongoDB
  • Linguaggi come Python o javascript tramite NodeJS
  • Framework di applicazioni Web come Serverless Framework

Dove le cose diventano confuse

Parte della svolta con i back-end è che ora puoi scrivere il tuo back-end con javascript. Con la nascita di Node.js, agli sviluppatori è stata data la possibilità di utilizzare il loro linguaggio browser preferito per fare la maggior parte delle stesse cose a cui erano abituati e con cui avevano familiarità ma ora su un server.

Anche se non tutti amano eseguire javascript come linguaggio lato server, è diventato un po 'più facile usare lo stesso linguaggio per scrivere l'intero stack di un'applicazione. Questo ha cambiato un po 'il gioco per quanto riguarda i front-end e i back-end.

Ma ha anche iniziato a chiudere il cerchio in cui ora vedi sistemi che costruiscono API proprio accanto al front-end in modo simile a quello che potresti vedere in uno stack tradizionale.

Front-end vs back-end

Indipendentemente dallo stack, ci sarà sempre la separazione delle preoccupazioni. L'interfaccia utente e tutte le interazioni, che siano rese sul server o nel browser, sono ciò che rende il front-end il front-end e i dati e la logica di business, sia che provengano dal server nell'armadio della tua azienda o da una funzione gestita, è ciò che rende il back end il back end.

Sia che tu preferisca lavorare sulle funzionalità rivolte agli utenti o creare la logica che consente loro di fare le cose, ci sono molte risorse per iniziare.

Risorse per imparare

Fine frontale

  • freecodecamp.org Certificazione Responsive Web Design (freecodecamp.org)
  • Javascript per principianti (beginnerjavascript.com - Wes Bos)
  • React Tutorial per principianti (youtube.com - Programmazione con Mosh)
  • Front End Masters (frontendmasters.com)

Back End

  • API freecodecamp.org e certificazione dei microservizi (freecodecamp.org)
  • Inizio super semplice per serverless (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019 - Un corso video gratuito di 4 ore (freecodecamp.org)
  • Introduzione di CS50 all'informatica (edx.org)

Tutto quanto sopra

  • Come diventare uno sviluppatore web full stack nel 2020 (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 giorni di codice (100daysofcode.com)
  • Il Bootcamp per sviluppatori Web (udemy.com - Colt Steele)

Seguimi per ulteriori informazioni su Javascript, UX e altre cose interessanti!

  • ? Seguimi su Twitter
  • ? ️ Iscriviti al mio Youtube
  • ✉️ Iscriviti alla mia newsletter