Perché Mason e il front-end come servizio cambieranno le regole del gioco per lo sviluppo del prodotto

Pubblicato: 2022-03-10
Riassunto rapido ↬ Lo sviluppo e la manutenzione del software, in generale, sono stati un processo arduo e dispendioso in termini di tempo per sviluppatori e ingegneri che si occupano del peso maggiore del lavoro. Tuttavia, con l'introduzione del front-end-as-a-service e un'azienda come Mason all'avanguardia, tutto potrebbe cambiare. Ecco cosa devi sapere su FEaaS.

(Questo è un articolo sponsorizzato.) Dai un'occhiata alle app e ai software con cui interagisci regolarmente. Ognuno ha il suo design unico, giusto? Eppure, c'è qualcosa di simile in ognuno di loro. Barre di navigazione, moduli di contatto, caselle di funzionalità, CTA: alcuni elementi tendono a essere presenti ovunque tu vada.

Questo perché questi elementi svolgono un ruolo cruciale nel modo in cui gli utenti interagiscono con i prodotti che hai creato. Dal punto di vista degli utenti, questa è una buona cosa. Includendo questi elementi riconoscibili e prevedibili all'interno della struttura del frontend di un'applicazione, l'attenzione dell'utente è sul contenuto davanti a lui; non sul tentativo di risolvere il mistero dell'interfaccia utente.

Dalla fine degli sviluppatori di software, tuttavia, questo è un dolore. Sai quali tipi di componenti devono essere inclusi in un prodotto. Tuttavia, fino ad ora, hai dovuto costruirli da zero più e più volte. Peggio ancora, ogni volta che qualcosa deve essere aggiornato, è necessario implementare l'aggiornamento e inviarlo al sito live, e non capita spesso di avere la larghezza di banda per apportare subito tali modifiche.

Ecco perché ciò che Mason sta facendo con il front-end-as-a-service (FEaaS) è ​​così interessante. In questo articolo, ti darò uno sguardo più da vicino a FEaaS, a chi è rivolto e perché potenziare i team di prodotto e marketing con esso è un grosso problema.

Che cos'è FEaaS?

Sai cos'è il software-as-a-service (SaaS). Ma hai sentito parlare di componenti software come servizio (SCaaS)?

Ci sono stati dei leggeri mormorii intorno a SCaaS un certo numero di anni fa. L'idea di base era che si potevano creare e mantenere facilmente componenti dell'interfaccia utente e widget riutilizzabili per il proprio software. Tuttavia, non ha mai preso piede, e probabilmente perché era troppo restrittivo in ciò che consentiva agli sviluppatori di fare.

Con FEaaS, tuttavia, hai una soluzione molto più preziosa e potente. In sostanza, la soluzione front-end-as-a-service di Mason ti consente di creare in modo rapido ed efficace gli aspetti visivi e le funzionalità del tuo software.

Ciò significa che stai creando funzionalità complesse e facendole dialogare con le API. Un esempio di diversi moduli progettati e complessi collegati ad Airtable come origine dati può essere trovato qui.

Inoltre, ogni funzionalità che crei con Mason risiede nella stessa base di codice del resto del tuo prodotto. Diamo un'occhiata a un Chatbot personalizzabile basato su Apixu che è stato realizzato con Mason:

Demo della lista delle cose da fare di Mason Airtable
Un esempio dei tipi di contenuto dinamico che puoi creare con FEaaS. (Fonte: Mason) (Grande anteprima)

E questo è un banner eroe che ho creato per un omaggio di ebook utilizzando un modello Mason:

Modello di eroe muratore
Un esempio di modello di immagine di un eroe, personalizzato e pubblicato con Mason. (Fonte: Mason) (Grande anteprima)

Non commettere errori: questo non è un costruttore di siti web. Mason consente a te e al tuo team di creare componenti individuali e funzionalità completamente funzionali; non interi siti Web o prodotti di hosting gestiti. In questo modo, non sei più limitato dalle capacità della tua soluzione per la creazione di siti.

Puoi creare il tuo sito Web, app o altri prodotti software nello strumento di tua scelta. Quindi, progetta ed esporta funzionalità davvero complesse da Mason da integrare nella tua base di codice. È importante sottolineare che, a differenza di una piattaforma che blocca te e i dati dei tuoi clienti, Mason consente ai team di prodotto di aumentare i loro prodotti attuali e di possedere tutto (non come alcuni costruttori di siti Web che possiedono invece l'intero sito Web e la tua attività).

Per chi è Mason?

Con Mason, dovresti già avere un prodotto software completamente sviluppato o, almeno, una soluzione con cui costruirlo. Mason è lo strumento che utilizzerai per creare e progettare le caratteristiche (e le relative funzionalità) per il tuo prodotto, e per farlo con facilità (cioè senza codifica).

Queste funzionalità saranno quindi autonome e inserite nel prodotto quando saranno a posto.

Per quanto riguarda le persone reali per cui Mason è stato costruito, Tom McLaughlin, CEO di Mason, spiega:

"Oggi, l'intero prodotto risiede nella base di codice, quindi diventa de facto solo il regno del team di ingegneri, anche se così tante delle caratteristiche che compongono il prodotto possono essere trovate in ogni altra base di codice sulla terra: sono solo non così unico. Mason consente al tuo team di prodotto di creare queste funzionalità comuni più velocemente, ma, soprattutto, consente a chiunque nell'organizzazione, tecnico o meno, di gestirle, anche una volta che sono in produzione".

Il tuo team di prodotto, gli sviluppatori e i designer di software, sono quelli che utilizzeranno Mason per creare il tuo software. Tuttavia, i tuoi team di marketing e contenuti acquisiranno la possibilità di aggiornare le funzionalità che hai creato in Mason dopo che sono state distribuite, senza dover attendere l'ingegneria per implementare ogni nuova modifica o ritocco.

Ciò significa che la manutenzione delle funzionalità front-end non dipende più esclusivamente da te, lo sviluppatore. Chiunque nel tuo team - designer, marketer, creatori di contenuti, ecc. - può utilizzare la piattaforma FEaaS di Mason per creare e aggiornare le funzionalità del tuo software.

Quindi, non solo puoi creare in modo più efficiente funzionalità potenti per i tuoi prodotti, il tuo team può distribuire gli aggiornamenti in tempo reale, piuttosto che consentire loro di accumularsi nell'elenco dei ticket aperti.

Perché FEaaS è importante

Il tuo programma di sviluppo, distribuzione o aggiornamento del software ha sofferto in passato a causa di colli di bottiglia (sebbene completamente comprensibili) degli sviluppatori di software? Se è così, allora FEaaS dovrebbe suonarti come un sogno.

Finora, non c'erano davvero altre opzioni per gli ingegneri del software. Se volevi realizzare un prodotto per il web, tutto doveva essere costruito da zero e ci voleva un bel po' di tempo per farlo, soprattutto se i tuoi obiettivi erano di natura più complessa. Per tutto il tempo, il resto della tua squadra è stato lasciato dietro le quinte per farti fare la tua parte.

Con Mason in testa con la sua soluzione FEaaS, vorrei dare un'occhiata a come le sue capacità rivoluzioneranno il flusso di lavoro di sviluppo del prodotto.

Progetta visivamente i componenti dell'interfaccia utente

FEaaS porta ingegneri e sviluppatori fuori dalla base di codice di un prodotto e in un'interfaccia di build visiva. In quanto tale, puoi vedere esattamente cosa stai creando senza dover passare avanti e indietro tra il tuo codice e un'anteprima visiva di come apparirà una volta distribuito.

Con il visual builder di Mason, puoi progettare componenti dell'interfaccia utente complessi ma essenziali utilizzando un sistema di contenitori, colonne, livelli ed elementi preconfigurati come testo, campi modulo, pulsanti e altro ancora.

Costruttore visivo muratore
Uno sguardo all'interno dello strumento di creazione visiva di Mason. (Fonte: Mason) (Grande anteprima)

Simile a come funzionano altri strumenti di costruzione moderni, sono disponibili numerose opzioni per aiutarti a fare di più senza dover mai scrivere una riga di codice. E grazie a un comodo passaggio dalla visualizzazione desktop, mobile e tablet, anche il design reattivo non è un problema.

Inoltre, Mason viene fornito con un kit di interfaccia utente completo che include una varietà di modelli per i componenti dell'interfaccia utente più comuni. Oppure puoi selezionare manualmente quelli che ti servono:

Modelli di muratore
Libreria di modelli di componenti dell'interfaccia utente predefinita di Mason. (Fonte: Mason) (Grande anteprima)

Carte caratteristiche. Schermate di accesso. Blocchi di contenuto del blog. Immagini dell'eroe. Pulsanti CTA. Tutti i componenti principali di cui hai bisogno per convincere i visitatori a interagire con il tuo prodotto e agire sono già stati creati per te.

Se sei stanco di crearli da zero in ogni prodotto che crei, questi modelli saranno di grande aiuto. Come puoi immaginare, avere la possibilità di progettare e personalizzare i componenti del prodotto in questo modo sarebbe un grande vantaggio per la produttività del tuo team.

Costruisci componenti e funzionalità più rapidamente

Ora, essere in grado di modellare visivamente i componenti è solo uno dei vantaggi dell'utilizzo di una piattaforma FEaaS come Mason. Come ci si potrebbe aspettare, uno strumento come questo è stato prodotto per la velocità.

In termini di utilizzo effettivo di Mason, è uno strumento che si carica in modo follemente veloce , il che lo renderebbe piuttosto prezioso per chiunque abbia perso tempo in passato aspettando che i propri strumenti si avviino, salvino le modifiche o si spostino da una vista all'altra.

In termini di come influisce sul tuo flusso di lavoro, aspettati di guadagnare velocità anche lì.

Con il costruttore Mason puoi:

  • Aggiungi nuovi contenitori, colonne, righe, blocchi di contenuto o elementi con codice personalizzato con un semplice trascinamento della selezione:
Scelte di Mason Design
La serie completa di layout di progettazione, componenti e opzioni di codifica di Mason. (Fonte: Mason) (Grande anteprima)
  • Rivedi, modifica, duplica, sposta o elimina i livelli del tuo componente utilizzando questa gerarchia di elementi visualizzata:
Strati di muratore
I controlli dei livelli facili da gestire di Mason. (Fonte: Mason) (Grande anteprima)
  • Non è nemmeno solo il pezzo di design dell'interfaccia utente a essere semplificato. Puoi anche collegare facilmente i tuoi componenti ad altre fonti tramite API.
origini dati muratore
Collegamento delle origini dati alle funzionalità di Mason per prepararsi alla mappatura. (Fonte: Mason) (Grande anteprima)
Mappatura dell'API Mason
Collegamento delle API ai componenti Mason tramite la mappatura. (Fonte: Mason) (Grande anteprima)

La scheda "Configura" di Mason ti consente di integrarti rapidamente con altre applicazioni, come:

  • Authy
  • Facebook
  • Punto focale
  • Banda
  • Twilio
  • E altro ancora.

Quindi, supponiamo che tu voglia vendere l'eBook promosso nel tuo banner eroe invece di raccogliere contatti con esso. La prima cosa che dovresti fare è configurare l'integrazione con Stripe.

Tutto ciò di cui hai bisogno sono le chiavi pubblicabili e segrete dalla dashboard per sviluppatori di Stripe:

Chiavi API Stripe
Recupera le chiavi API dalla dashboard per sviluppatori Stripe. (Fonte: Stripe) (Anteprima grande)

Quindi, inserisci ciascuna delle chiavi nel campo corrispondente in Mason:

Integrazioni di terze parti Mason
Integra altre applicazioni con componenti Mason come origini dati, come questo esempio di Stripe. (Fonte: Mason) (Grande anteprima)

Torna alla scheda "Design" e trascina l'elemento del modulo della carta di credito nel componente.

Elemento del modulo della carta di credito Mason
Utilizza l'elemento modulo carta di credito in Mason per accettare pagamenti tramite componenti. (Fonte: Mason) (Grande anteprima)

Con il modulo aggiunto alla pagina, è necessario eseguire un ultimo passaggio per configurare questa integrazione.

Torna alla scheda Configura. Ora vedrai una nuova opzione nella barra laterale chiamata "Moduli":

Integrazione Mason con Stripe
Configura un modulo di pagamento Stripe in pochi passaggi con Mason. (Fonte: Mason) (Grande anteprima)

Puoi vedere che tutti i dettagli pertinenti sono già stati aggiunti qui e la connessione già effettuata al tuo modulo.

Ancora una volta, Mason fa un lavoro leggero su qualcosa che in genere richiederebbe un po' di tempo agli ingegneri del software se dovessero costruire un componente da zero. Invece, ora hai tutti gli strumenti necessari per progettare e programmare rapidamente nuove funzionalità per il tuo prodotto.

Distribuisci nuove funzionalità con facilità

A dire il vero, essere in grado di progettare nuove funzionalità rapidamente è importante per i team di prodotto. Tuttavia, ciò non risolve ancora il problema della distribuzione.

I colli di bottiglia possono verificarsi in vari punti dello sviluppo di un prodotto. E quando crei un software così complesso che solo un ingegnere può avviarlo prontamente o distribuire aggiornamenti, beh, puoi solo aspettarti ulteriori ritardi nella pipeline.

Mason ha sviluppato una soluzione per questo. Per iniziare, pubblicare un componente nella libreria di Mason è un gioco da ragazzi. Basta fare clic sul pulsante "Pubblica" nell'angolo in alto a destra del builder e Mason si prenderà cura del resto.

Per ottenere il componente all'interno del tuo prodotto o app, tuttavia, uno sviluppatore deve essere coinvolto, ma solo per questa volta e non dovrebbero volerci più di cinque minuti.

Per fare ciò, usa il pulsante "< > Distribuisci" nell'angolo in alto a destra del builder. Ti verrà quindi chiesto di eseguire le seguenti operazioni:

Processo di distribuzione Mason
La distribuzione di un componente Mason richiede solo cinque minuti e quattro passaggi. (Fonte: Mason) (Grande anteprima)

In sostanza, quello che stai facendo è prendere l'identificatore univoco che Mason ha creato per la funzione che hai creato e aggiungerlo alla tua base di codice. Se configurato correttamente, il tuo prodotto richiamerà l'API Mason per eseguire il rendering del componente lato app. E quelli sul front-end del sito non saranno più saggi.

È così semplice spingere un nuovo componente e tutte le sue funzionalità dal vivo.

Consenti a tutti di apportare modifiche e aggiornamenti push

Tutti i punti che ho fatto qui sui vantaggi di FEaaS hanno ruotato attorno a questo vantaggio finale – ed enorme – che è questo:

FEaaS consente a tutti di apportare modifiche alle funzionalità e di inviarle a un'applicazione live.

Pensaci un momento.

Quanto tempo ha trascorso il tuo team ad aspettare che un ingegnere implementi le modifiche di cui ha bisogno? E cosa ha fatto in termini di arresto della capacità della tua app di coinvolgere e convertire i visitatori? Senza un'interfaccia utente dall'aspetto impressionante, senza funzionalità correttamente funzionanti, senza tutti gli elementi critici necessari per costringere i visitatori ad agire.

Alla fine stai costando i soldi dell'azienda tenendo il software in ostaggio. Finora, questo è qualcosa che i team di prodotti software non potevano aiutare. Era solo la natura del loro lavoro. Ma con FEaaS di Mason, questo finalmente cambia.

Dopo aver (1) pubblicato il componente e (2) averlo distribuito nell'applicazione, la funzione verrà visualizzata all'interno del prodotto. Ma diciamo che sono necessarie modifiche. Per esempio:

  • Il tuo designer vuole cambiare lo stile di un modulo per rispecchiare il design rinnovato della pagina di destinazione.
  • Il tuo responsabile marketing ha una nuova immagine di marca che deve sostituire l'immagine dell'eroe della home page.
  • Il tuo editore ha deciso di modificare la formulazione per l'ultima offerta di lead gen e vuole aggiornare il CTA.

Non importa chi entra nel costruttore Mason per cambiare un componente. Il secondo accade, il pulsante sbiadito "Salvato" nell'angolo in alto a destra del builder si trasforma in un pulsante verde "Vai a pubblicare".

Aggiornamenti dei componenti software Mason
L'aggiornamento dei componenti Mason può essere eseguito da chiunque. (Fonte: Mason) (Grande anteprima)

E indovina cosa? Non è necessaria alcuna esperienza tecnica per fare clic su di esso.

Mason semplifica la pubblicazione
Mason si occupa di pubblicare i tuoi componenti e i relativi aggiornamenti nella sua libreria. (Fonte: Mason) (Grande anteprima)

Mason si occupa della pubblicazione e dell'implementazione delle modifiche, quindi fintanto che la connessione è già stata stabilita tra la tua app e Mason, questi aggiornamenti dovrebbero essere immediatamente disponibili per i visitatori.

Se tu e il tuo team di prodotto vi siete impantanati con una raffica di ticket, chiedendovi di costruire nuovi componenti o di modificare quelli esistenti, questo metterà effettivamente fine a tutto ciò.

Avvolgendo

Una delle cose meravigliose della creazione di prodotti per il Web è che qualcuno sviluppa sempre un nuovo modo per aiutarci a ottenere di più e allo stesso tempo a fare di meno.

Con le applicazioni software, in generale, è passato molto tempo. Per fortuna, FEaaS è qui e sembra che Mason abbia sviluppato uno strumento estremamente prezioso per accelerare lo sviluppo del software, migliorare l'output e anche consentire a più membri del tuo team di partecipare.