Por que o Mason e o front-end como serviço serão um divisor de águas para o desenvolvimento de produtos

Publicados: 2022-03-10
Resumo rápido ↬ O desenvolvimento e manutenção de software tem, em geral, sido um processo demorado e árduo para desenvolvedores e engenheiros que carregam o peso do trabalho. No entanto, com a introdução do front-end-as-a-service e uma empresa como a Mason pioneira, tudo isso pode mudar. Aqui está o que você precisa saber sobre FEaaS.

(Este é um artigo patrocinado.) Dê uma olhada nos aplicativos e softwares com os quais você interage regularmente. Cada um tem seu próprio design exclusivo, certo? E, no entanto, há algo semelhante em cada um deles. Barras de navegação, formulários de contato, caixas de recursos, CTAs – certos elementos tendem a estar presentes, não importa onde você vá.

Isso porque esses elementos desempenham um papel crucial na forma como os usuários interagem com os produtos que você criou. Do lado dos usuários, isso é uma coisa boa. Ao incluir esses elementos reconhecíveis e previsíveis na estrutura de front-end de um aplicativo, o foco do usuário está no conteúdo diante dele; não em tentar resolver o mistério da interface do usuário.

Do lado dos desenvolvedores de software, porém, isso é uma dor. Você sabe que tipos de componentes precisam ser incluídos em um produto. No entanto, até agora, você teve que construí-los do zero uma e outra vez. Pior, sempre que algo precisa ser atualizado, depende de você para implementar a atualização e enviá-la para o site ativo - e não é sempre que você tem largura de banda para fazer essas alterações imediatamente.

É por isso que o que Mason está fazendo com front-end como serviço (FEaaS) é tão interessante. Neste artigo, vou dar uma olhada mais de perto no FEaaS, para quem é e por que capacitar as equipes de produto e marketing com ele é um grande negócio.

O que é FEaaS?

Você sabe o que é software como serviço (SaaS). Mas você já ouviu falar de componentes de software como serviço (SCaaS)?

Houve alguns resmungos leves em torno do SCaaS alguns anos atrás. A ideia básica era que você pudesse criar e manter facilmente componentes e widgets de interface do usuário reutilizáveis ​​para o seu software. No entanto, ele nunca pegou – e isso é provavelmente porque era muito restritivo no que permitia que os desenvolvedores fizessem.

Com o FEaaS, porém, você tem uma solução muito mais valiosa e poderosa. Essencialmente, a solução de front-end como serviço da Mason permite que você construa de forma rápida e eficaz os aspectos visuais e a funcionalidade do seu software.

Isso significa que você está criando recursos complexos e fazendo com que eles conversem com as APIs. Um exemplo de diferentes formas complexas projetadas conectadas ao Airtable como fonte de dados pode ser encontrada aqui.

Além disso, cada recurso que você cria com o Mason vive na mesma base de código que o restante do seu produto. Vamos dar uma olhada em um chatbot personalizável com tecnologia Apixu que foi feito com Mason:

Demonstração da lista de tarefas Mason Airtable
Um exemplo dos tipos de conteúdo dinâmico que você pode criar com o FEaaS. (Fonte: Mason) (Visualização grande)

E este é um banner de herói que criei para um sorteio de e-book usando um modelo Mason:

Modelo de herói de pedreiro
Um exemplo de modelo de imagem de herói, personalizado e publicado com Mason. (Fonte: Mason) (Visualização grande)

Não se engane: este não é um construtor de sites. A Mason permite que você e sua equipe criem componentes individuais e recursos totalmente funcionais; nem todos os sites ou produtos de hospedagem gerenciada. Dessa forma, você não fica mais restrito pelos recursos da sua solução de construtor de sites.

Você pode criar seu site, aplicativo ou outro produto de software na ferramenta de sua escolha. Em seguida, projete e exporte recursos realmente complexos do Mason para serem integrados à sua base de código. É importante ressaltar que, diferentemente de uma plataforma que bloqueia você e os dados de seus clientes, o Mason permite que as equipes de produtos aumentem seus produtos atuais e possuam tudo (não como alguns construtores de sites que possuem todo o seu site e negócios).

Para quem é o Mason?

Com Mason, você já deve ter um produto de software totalmente desenvolvido ou, no mínimo, uma solução para construí-lo. Mason é a ferramenta que você usará para construir e projetar os recursos (e suas funcionalidades) para o seu produto — e para fazê-lo com facilidade (ou seja, sem codificação).

Esses recursos serão então autocontidos e inseridos no produto quando estiverem prontos.

Quanto às pessoas reais para as quais Mason foi construído, Tom McLaughlin, CEO da Mason, explica:

“Hoje, o produto inteiro vive na base de código, de modo que se torna o domínio de fato da equipe de engenharia apenas, embora muitos dos recursos que compõem o produto possam ser encontrados em todas as outras bases de código do mundo - eles são apenas não tão único. O Mason permite que sua equipe de produto crie esses recursos comuns mais rapidamente, mas, mais importante, permite que qualquer pessoa na organização - técnica ou não - gerencie-os, mesmo quando estiverem em produção. ”

Sua equipe de produto - seus desenvolvedores e designers de software - são os únicos que usarão o Mason para construir seu software. No entanto, suas equipes de marketing e conteúdo terão a capacidade de atualizar os recursos que você criou no Mason depois que eles forem implantados, sem precisar esperar pela engenharia para implantar cada nova edição ou ajuste.

Isso significa que a manutenção dos recursos de front-end não depende mais apenas de você, o desenvolvedor. Qualquer pessoa da sua equipe — designers, profissionais de marketing, criadores de conteúdo etc. — pode usar a plataforma FEaaS da Mason para criar e atualizar os recursos do seu software.

Assim, além de poder criar recursos poderosos para seus produtos com mais eficiência, sua equipe pode implantar atualizações em tempo real, em vez de permitir que elas se acumulem em sua lista de tickets abertos.

Por que o FEaaS é importante

Seu cronograma de desenvolvimento, implantação ou atualização de software sofreu no passado devido a gargalos (embora completamente compreensíveis) do desenvolvedor de software? Nesse caso, o FEaaS deve soar como um sonho para você.

Até agora, não havia outra opção para engenheiros de software. Se você queria construir um produto para a web, tudo tinha que ser construído do zero e exigia um bom tempo de sua parte para fazê-lo, especialmente se seus objetivos fossem de natureza mais complexa. Durante todo o tempo, o resto de sua equipe ficou esperando nos bastidores para que você fizesse sua parte.

Com a Mason liderando a carga com sua solução FEaaS, gostaria de dar uma olhada em como seus recursos vão revolucionar seu fluxo de trabalho de desenvolvimento de produtos.

Projetar componentes de interface do usuário visualmente

O FEaaS leva engenheiros e desenvolvedores da base de código de um produto para uma interface de construção visual. Assim, você vê exatamente o que está construindo sem ter que alternar entre seu código e uma visualização visual de como ele ficará depois de implantado.

Com o construtor visual da Mason, você pode projetar componentes de interface do usuário complexos, mas essenciais, usando um sistema de contêineres, colunas, camadas e elementos pré-configurados, como texto, campos de formulário, botões e muito mais.

Construtor visual de pedreiro
Uma olhada na ferramenta de construção visual de Mason. (Fonte: Mason) (Visualização grande)

Semelhante à forma como outras ferramentas de construção modernas funcionam, há uma abundância de opções disponíveis para ajudá-lo a fazer mais sem precisar escrever uma linha de código. E graças a uma alternância conveniente entre as visualizações de desktop, celular e tablet, o design responsivo também não é problema.

Além disso, o Mason vem com um kit de interface do usuário completo que inclui uma variedade de modelos para os componentes de interface do usuário mais comuns. Ou você pode selecionar manualmente os que você precisa:

Modelos de pedreiro
A biblioteca de modelos de componentes de interface do usuário pré-construídos do Mason. (Fonte: Mason) (Visualização grande)

Cartões de recurso. Telas de login. Blocos de conteúdo do blog. Imagens de heróis. Botões de CTA. Todos os componentes principais necessários para que os visitantes se envolvam com seu produto e atuem já foram criados para você.

Se você está cansado de criá-los do zero em cada produto que você cria, esses modelos serão de grande ajuda. Como você pode imaginar, ter a capacidade de projetar e personalizar componentes de produtos dessa maneira seria um grande benefício para a produtividade de sua equipe.

Crie componentes e funcionalidades mais rapidamente

Agora, poder estilizar componentes visualmente é apenas um dos benefícios de usar uma plataforma FEaaS como o Mason. Como você poderia esperar, uma ferramenta como essa foi fabricada para velocidade.

Em termos de realmente usar o Mason, é uma ferramenta que carrega incrivelmente rápido - o que tornaria isso bastante valioso para quem perdeu tempo no passado esperando que suas ferramentas sejam iniciadas, salvem alterações ou mudem de uma visualização para outra.

Em termos de como isso afeta seu fluxo de trabalho, espere ganhar velocidade também.

Com o construtor Mason, você pode:

  • Adicione novos contêineres, colunas, linhas, blocos de conteúdo ou elementos com codificação personalizada com um simples arrastar e soltar:
Escolhas de design de pedreiro
O conjunto abrangente de layouts de design, componentes e opções de codificação da Mason. (Fonte: Mason) (Visualização grande)
  • Revise, edite, duplique, mova ou exclua as camadas do seu componente usando esta hierarquia de elementos visualizada:
Camadas de pedreiro
Controles de camada fáceis de gerenciar do Mason. (Fonte: Mason) (Visualização grande)
  • Não é apenas a peça de design da interface do usuário que é simplificada. Você também pode conectar seus componentes a outras fontes por meio de APIs com facilidade.
fontes de dados de pedreiro
Conectando fontes de dados a recursos Mason para se preparar para mapeamento. (Fonte: Mason) (Visualização grande)
Mapeamento da API Mason
Conectando APIs a componentes Mason por meio de mapeamento. (Fonte: Mason) (Visualização grande)

A guia “Configurar” do Mason permite a integração rápida com outros aplicativos, como:

  • Autêntico
  • o Facebook
  • Hubspot
  • Listra
  • Twilio
  • E mais.

Então, digamos que você queira vender o eBook promovido em seu banner de herói em vez de apenas coletar leads com ele. A primeira coisa que você faria é configurar a integração do Stripe.

Tudo o que você precisa são as chaves publicáveis ​​e secretas do painel do desenvolvedor do Stripe:

Chaves de API de distribuição
Recupere as chaves de API do painel do desenvolvedor do Stripe. (Fonte: Stripe) (Visualização grande)

Em seguida, insira cada uma das chaves no campo correspondente no Mason:

Integrações de terceiros Mason
Integre outros aplicativos com componentes Mason como fontes de dados, como este exemplo do Stripe. (Fonte: Mason) (Visualização grande)

Retorne à guia “Design” e arraste o elemento de formulário de cartão de crédito para o componente.

Elemento de formulário de cartão de crédito Mason
Use o elemento de formulário de cartão de crédito na Mason para aceitar pagamentos por meio de componentes. (Fonte: Mason) (Visualização grande)

Com seu formulário adicionado à página, há uma etapa final a ser executada para configurar essa integração.

Retorne à guia Configurar. Agora você verá uma nova opção na barra lateral chamada “Formulários”:

Integração Mason com Stripe
Configure um formulário de pagamento Stripe em apenas algumas etapas com o Mason. (Fonte: Mason) (Visualização grande)

Você pode ver que todos os detalhes pertinentes já foram adicionados aqui e a conexão já feita ao seu formulário.

Mais uma vez, Mason faz um trabalho leve de algo que normalmente levaria algum tempo para os engenheiros de software fazerem se eles construíssem um componente do zero. Em vez disso, agora você tem todas as ferramentas necessárias para projetar e programar rapidamente novos recursos para o seu produto.

Implante novos recursos com facilidade

Para ter certeza, ser capaz de projetar novos recursos rapidamente é importante para as equipes de produto. No entanto, isso ainda não corrige o problema de implantação.

Gargalos podem ocorrer em vários pontos do desenvolvimento de um produto. E quando você cria um software tão complexo que apenas um engenheiro pode iniciá-lo ou implantar atualizações prontamente, bem, você só pode esperar mais atrasos no pipeline.

Mason desenvolveu uma solução para isso. Para começar, publicar um componente na biblioteca de Mason é muito fácil. Basta clicar no botão “Publicar” no canto superior direito do construtor e a Mason cuida do resto.

Para obter o componente dentro de seu produto ou aplicativo, porém, um desenvolvedor precisa se envolver – mas apenas desta vez e não deve levar mais de cinco minutos.

Para fazer isso, use o botão “< > Deploy” no canto superior direito do construtor. Em seguida, ele solicitará que você faça o seguinte:

Processo de implantação de pedreiro
A implantação de um componente Mason leva apenas cinco minutos e quatro etapas. (Fonte: Mason) (Visualização grande)

Essencialmente, o que você está fazendo é pegar o identificador exclusivo que Mason criou para o recurso que você criou e adicioná-lo à sua base de código. Quando configurado corretamente, seu produto chamará a API Mason para renderizar o componente do lado do aplicativo. E aqueles no front-end do site não serão os mais sábios.

É tão simples quanto isso colocar um novo componente e todas as suas funcionalidades ao vivo.

Capacite todos para fazer alterações e enviar atualizações

Todos os pontos que fiz aqui sobre os benefícios do FEaaS foram dançando em torno desse benefício final – e enorme – que é este:

O FEaaS permite que todos façam alterações nos recursos e os enviem para um aplicativo ativo.

Pense nisso por um momento.

Quanto tempo sua equipe passou esperando por um engenheiro para implementar as mudanças necessárias? E o que isso fez em termos de atrofiar a capacidade do seu aplicativo de engajar e converter visitantes? Sem uma interface de usuário de aparência impressionante, sem recursos que funcionem corretamente, sem todos os elementos críticos necessários para obrigar os visitantes a agir.

Em última análise, você está custando dinheiro ao negócio mantendo o software como refém. Até agora, isso era algo que as equipes de produtos de software não podiam ajudar. Era apenas a natureza de seu trabalho. Mas com o FEaaS da Mason, isso finalmente muda.

Depois de (1) publicar seu componente e (2) implantá-lo em seu aplicativo, o recurso aparecerá em seu produto. Mas digamos que mudanças são necessárias para ele. Por exemplo:

  • Seu designer deseja alterar o estilo de um formulário para espelhar o design renovado da página de destino.
  • Seu gerente de marketing tem uma nova imagem de marca que precisa substituir a imagem principal da página inicial.
  • Seu editor decidiu ajustar o texto da última oferta de geração de leads e deseja atualizar o CTA.

Não importa quem entra no construtor Mason para alterar um componente. No segundo em que isso acontece, o botão “Salvo” desbotado no canto superior direito do construtor se transforma em um botão verde “Ir para publicar”.

Atualizações de componentes de software Mason
A atualização dos componentes Mason pode ser feita por qualquer pessoa. (Fonte: Mason) (Visualização grande)

E adivinha? Nenhuma experiência técnica é necessária para clicar nele.

Mason simplifica a publicação
A Mason se encarrega de publicar seus componentes e suas atualizações em sua biblioteca. (Fonte: Mason) (Visualização grande)

A Mason se encarrega de publicar e implantar as alterações, portanto, desde que a conexão entre seu aplicativo e a Mason já tenha sido feita, essas atualizações devem ser publicadas instantaneamente para os visitantes verem.

Se você e sua equipe de produto ficaram atolados com uma enxurrada de tickets, solicitando que você construa novos componentes ou ajuste os existentes, isso efetivamente acabará com isso.

Empacotando

Uma das coisas maravilhosas sobre a criação de produtos para a web é que alguém está sempre desenvolvendo uma nova maneira de nos ajudar a realizar mais e ao mesmo tempo fazer menos.

Com aplicativos de software, em geral, já faz muito tempo. Felizmente, o FEaaS está aqui e parece que Mason desenvolveu uma ferramenta extremamente valiosa para acelerar o desenvolvimento de software, melhorar a produção e também capacitar mais membros de sua equipe para participar.