9 minutos de leitura

Seu MVP já não está mais dando conta? Conheça as linguagens e tecnologias em alta para você criar seu próximo produto digital.

Se esse assunto desperta seu interesse, provavelmente já passou da fase de validação do seu modelo de negócios. O momento para startups no Brasil tem se mostrado mais maduro, pronto para empresas de tecnologia baseadas em produtos digitais que resolvem problemas reais e já entenderam as melhores formas de fazê-lo através de um MVP.

Nesse texto, o objetivo é falar quais são as linguagens, bibliotecas e frameworks em alta para você aplicar em seu produto, as características principais de cada uma e por que o uso dessas tecnologias tem crescido.

Se a sua empresa já transpassou a barreira mais complexa de entender seu market-fit, ICP e funcionalidades de um produto que melhor ajudam seus clientes, é hora de dar o próximo passo: criar um produto digital de alta performance. Que tenha um alto nível de modularização, processamento e potencial de escala — escala não só do negócio, mas do seu produto em si, no sentido dele ser capaz de acompanhar o nível de escala que seu modelo potencialmente terá, sem causar frustrações à empresa e aos usuários com um produto que não os atenda, enquanto sua startup dá os passos mais importantes após o momento de validação e, muitas vezes, de captação de investimento para cumprir esse objetivo de profissionalização do software principal.

Para que isso seja possível, é imprescindível que você escolha as melhores linguagens, frameworks e tecnologias para o desenvolvimento do seu software. E para isso, é necessário avaliar uma série de variáveis que ajudarão você a saber o que é melhor para o tipo de software que seu modelo, base de usuários, equipe e estrutura de dados requerem.

Essa avaliação deve ir desde o layout, produto legado, nível técnico da equipe até processamento e arquitetura de dados, quantidade de usuários e qualidade que você espera ter no seu produto ideal.

Para isso, você precisa entender das duas principais “áreas” do seu produto — o front-end e o back-end — e algumas linguagens, bibliotecas e tecnologias referentes a elas, para você poder se aprofundar nas pesquisas que já deve ter iniciado. Nesse primeiro texto, falaremos sobre o front-end. E garanto que já vai ser bastante informação um pouco técnica e de início meio complexa de compreender. Mas, você, como founder, precisa entender de programação para não ser programado, hehe. Aposto que concorda.

Brincadeiras à parte, vamos lá:

O crescimento do JavaScript (JS)

Das alternativas que trataremos aqui, todas têm como base o JavaScript. O uso dessa linguagem de programação tem crescido muito nos últimos anos., e os frameworks e bibliotecas de que falaremos aqui (Angular, Vue e React) alavancam esse crescimento. De 2016 para 2017 o JS cresceu 20% em termos de utilização — lembrando que se trata de uma das três linguagens essenciais do desenvolvimento web.

O crescimento da utilização dessas alternativas baseadas em JS faz com que os casos de uso aumentem, consequentemente facilitando o uso e a resolução de problemas em meio ao desenvolvimento. Assim como a comunidade, que ao se tornar maior, educa melhor os profissionais que dominam a linguagem mas ainda não trabalharam com nenhuma library ou framework delas, diminuindo a curva de aprendizado e aumentando os hacks que farão com o que o trabalho dessas pessoas tenha cada vez mais valor e seja mais produtivo.

Bibliotecas (ou “libs”) e Frameworks de Front-end

Os frameworks e libs de front que hoje estão mais em alta, segundo a Unicorn.Supplies, são React, Vue e Angular. Todas essas tecnologias são bibliotecas e/ou frameworks baseados em JavaScript. E como já dito, das três linguagens utilizadas em toda página web (HTML, CSS e JavaScript) foi a que mais evoluiu nos últimos tempos, sendo hoje em dia, a mais utilizada por desenvolvedores(as) — segundo StackOverflow Survey 2017.

Alguns aspectos importantes para escolher uma das três opções:

• Quão maduras são essas tecnologias?
• Quanto as comunidades irão corresponder às dúvidas e ajudar?
• É complexo encontrar desenvolvedores(as) aptos a desenvolver uma aplicação nessas stacks?
• Quais são os conceitos básicos de desenvolvimento dessas opções?
• É fácil usar essas bibliotecas/frameworks para aplicações de diferentes tamanhos?
• Qual é a curva de aprendizado delas?
• Que nível de performance você espera dessa stack?

React.js

Definição e introdução

O React é “uma biblioteca de JavaScript para construir interfaces de usuário (UI)”. Comecemos por um importante aspecto: React é uma biblioteca, não um framework. Isso quer dizer que o React contempla um conjunto de funcionalidades relacionadas que podem ser requisitadas pelos desenvolvedores(as) na construção de interfaces do usuário (UI). O que significa que a desenvolvedora ou desenvolvedor é quem determina como são construídas as aplicações usando recursos disponíveis nesta biblioteca. No caso de um framework, há o que se chama de “Inversão de Controle”, fazendo com que quem dite “o que” e “como” será construída a aplicação seja o framework, fazendo a/o dev se adequar a como usar seu código em meio aos elementos de que dispõe o framework. Ou seja, a biblioteca resulta em maior liberdade e flexibilidade, mas acaba sendo menos “completa” em termos de módulos e recursos à disposição.

Flexibilidade e Componentes

Além desses benefícios, um dos que consideramos mais importante é a flexibilidade e a componentização. A forma de trabalhar com React para criar as interfaces do usuário é estruturada em componentes. Se você conhece as linguagens Web, sabe que um código HTML de uma página é todo mantido em um arquivo único. No React, a proposta é que cada um desses componentes fique em diferentes arquivos, de forma que esses “pedaços de código” que contém marcação (html), estilo (css) e comportamento (javascript) tornem-se extremamente reaproveitáveis — e organizados. E a grande vantagem dos web components é usá-los como tags de html customizadas ficando mais simples ler e entender como uma interface está sendo construída. Isso é o que há de mais moderno em construção de interfaces com JS.  

    Se você (dev) trabalha diretamente com React e se interessa por Web Components, preparamos um artigo sobre Docz, uma ferramenta para documentar componentes em React.js, que contém um passo-a-passo extremamente útil.

Devo escolher React?

Bom, sendo um pouco mais direto, estamos falando de algo usado e criado pelo Facebook – e também por isso, altamente disseminado no mundo de desenvolvimento – e o interessante dessa lib é que existe uma comunidade volumosa e ativa hoje no Brasil, como a React Brasil. Pelo fato do mercado estar bastante aquecido para demandas em React, há também um grande movimento de migração para a stack de JS em questão. É possível achar desenvolvedores(as) excelentes e aptos a trabalharem em produtos grandes. A curva de aprendizado do React é média – (há diversas opiniões em relação a isso, mas o objetivo aqui é adotar algum parâmetro de comparação e em se tratando do Vue.js, que falaremos a seguir, a curva é conhecidamente bem menor). E por último, é excelente para produtos de muitas páginas e que exigem alto nível de escala/performance e constante aprimoramento. Mas isso não quer dizer que React serve para todas as empresas e aplicações.

Vue.js

Definição e intro

Vue é (assim como React) uma biblioteca (lib) javascript para o desenvolvimento de componentes reativos para interfaces web modernas (Reactive Components for Modern Web Interfaces). Como há, entre as duas libs, muita similaridade, vamos (tentar) nos ater, nesse momento, às diferenças que existem entre elas, mas antes teremos que enfatizar pontos similares e importantes.

Componentes

Vue.js também é uma lib orientada à componentização, portanto, para ela também vale a reutilização dos “pedaços de código”, que ajudarão na criação da interface em diversos sentidos ao longo de sua criação e incrementos no decorrer do tempo. E como falamos disso acima, aqui vamos ilustrar um componente em Vue (que pode não significar muito para você, que não é técnico(a), mas aposto que você tem muita curiosidade sobre o tema e ver código ajuda a ter noção de como funcionam as coisas – pelo menos para mim).

Reatividade

Essa é uma característica que ficou muito ligada ao React que também a contempla, mas veremos isso aqui por não ser uma exclusividade do React, que possui uma conexão inerente de “naming” com essa propriedade. Voltando ao tecniquês, a reatividade aqui é relativa à “um formato compacto de troca de dados simples e rápida entre sistemas”. Algo que não é trivial, mas usando Vue torna-se extremamente simples. E isso também ajuda muito na adesão de devs que estão procurando sua primeira aventura com as bibliotecas de JS.

Diferenças

Algo que notamos quando começou-se a falar dessas stacks baseadas em JS em todo lugar é que muitos(as) devs dizem que a curva de aprendizado do Vue é menor em relação ao React, e que a documentação da lib é excelente. Já sua comunidade ainda não é tão grande quanto à do React, mas também já é bastante expressiva e tem crescido assustadoramente. Para termos de comparação, um crescimento maior que React e bem maior que Angular. Isso é relativo ao fato de ser a mais nova, mas não seria assim se não fosse uma boa alternativa.

Por exemplo esse portal em português e as diversas comunidades listadas no GitHub.

Além disso, o crescimento do React também está ligado ao fato do Facebook ter sido um grande canal para que ele se tornasse tão conhecido assim nos dias de hoje e fosse criada essa Hype em volta dele – que é muito boa para o mercado, diga-se de passagem. Fato é, a comunidade do Vue está crescendo. Por se tratar de uma mesma linguagem-mãe, a migração de uma para outra é algo natural e temos conhecido muitas pessoas que já entendem e/ou dominam as duas. E se ainda não o fizeram, estão a caminho de pelo menos conhecer.

Algo que faz sentido para você que está em meio à definição dos próximos passos do seu produto digital é que Vue pode ser uma boa opção caso seu produto seja baseado em uma “Single Page Application”, como no caso de um Dashboard principal com uma barra de navegação, por exemplo. Mas isso não é escrito em pedra. E, por último, Vue tem uma performance excelente. Em alguns testes, melhor que React.

Um feedback que vimos em meio às pesquisas nas comunidades é de que a documentação da biblioteca em português – como ilustrado acima – é muito boa mesmo! E isso é um grande diferencial para o crescimento do uso, comunidade e adeptos no Brasil.

Angular

Definição e intro

Falar de Angular já é algo um pouco mais complicado. Se você já trabalhou ou pesquisou sobre, já deve ter percebido que muita gente se empenha em organizar a linha de pensamento no que diz respeito às diversas versões do framework. Mas, antes disso: Angular é um framework JavaScript open-source (código aberto) para aplicações front-end e mantido e lançado principalmente pelo Google e sua comunidade de indivíduos e corporações que contribuem para sua evolução.

O Angular é sempre tido como um caso à parte dado seu versionamento, que muita gente gostou do Angular 1, já no Angular 2 muitos problemas foram resolvidos mas ao mesmo tempo os adeptos da primeira versão tiveram uma nova curva de aprendizado e logo depois já lançaram o Angular 4, o que causou bastante confusão. Apesar disso, trata-se de uma ferramenta muito madura, que tenta dispor da maior parte de tudo o que você precisará para desenvolver uma boa aplicação.

Similaridades e diferenças

Angular é um framework pioneiro – entre os que estamos analisando – e essa pode ser uma das principais diferenças em relação aos outros dois exemplos. E como colocado acima, a grande vantagem é que o Angular vem com muita coisa junto, o que diminui a necessidade de procurar recursos extras. Das opções que estamos analisando aqui, o Angular é a que vai ajudar a criar uma aplicação que menos depende de recursos externos.

A comunidade em volta dele já é bastante extensa, tem o fato de ter sido criado, usado e disseminado pelo Google, que como no caso do React – criado pelo Facebook -, ajuda muito em termos de “confiança” para a adesão generalizada começar a acontecer. Para começar a utilização, a curva é mais complexa. Há outros recursos necessários, como Configuração de Módulos Node.js, NPM e Type Script. Mesmo sendo recursos relativamente simples de entender para desenvolvedores(as) de mercado, ainda se trata de uma curva alta.

Encontrar força de trabalho para produtos em Angular também é fácil por já ser bastante disseminado. É uma stack que funciona muito bem para Single Page Applications, assim como o Vue, e do ponto de vista de nível de performance não deixa a desejar em comparação com as outras.

Um ponto interessante na comparação com React, por exemplo, é que por se tratar de uma ferramenta Open-source a evolução constante existe para atender à comunidade como um todo e não prioritariamente à sua empresa criadora, como é o Facebook em relação ao React.

E, claro, Angular também é orientado aos componentes, modularização e reatividade.

Enfim, espero que esse texto tenha ajudado você a compreender, principalmente, que as 3 opções são muito interessantes e têm grandes benefícios. Não há regras, mas há vários parâmetros de escolha antes da sua decisão.

Se quiser bater um papo sobre a escolha da sua stack para a evolução do seu produto digital ou trabalhar no desenvolvimento de produtos como esses, estarei à disposição: giovanni@bossabox.com.