Como criar aplicações da noite pro dia
Tags: javascript, firebase, hackathon, iniciante
Published: 2020-08-24 00:30:40

**_TL;DR_**

Neste post falo um pouco da minha evolução como desenvolvedor web, especialmente sobre o "primeiro release" (ou [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product)) de uma aplicação. Também comento sobre _no-code_ e escalabilidade, explicando algumas decisões que tomei nos meus últimos projetos pessoais.

As tecnologias que recomendarei serão:
- [Codesandbox](https://codesandbox.io/)
- [React.js](https://reactjs.org/)
- [Tachyons](https://tachyons.io/)
- [Firebase](https://firebase.google.com)
- [React JSON Schema Form](https://react-jsonschema-form.readthedocs.io/en/latest/)
- [Netlify](https://netlify.com/)

## Contexto 

Um dos maiores prazeres que tenho como programador é implementar soluções para problemas das comunidades que pertenço, e provavelmente você também se identifica com isso. Sabe quando você usa o seu conhecimento técnico para ajudar alguém da família com um problema? Essa sensação é um dos grandes motivadores para mim, sendo, até hoje, responsável por vários ensinamentos.

Quando você é o dono de uma solução, logo começa a entender e sentir os problemas que a literatura de Engenharia de Software tanto pesquisa, e é assim que você, como profissional, realmente amadurece.

Mas hoje eu quero falar sobre uma fase específica de um projeto: **o começo**.

Um grande pensador, Frank Sherman Land, falava que *"O início é o que mais importa"* se tratando dos anos de nossa vida. Mas, quando o assunto é _software_ (ou soluções em _software_), é ainda mais fundamental o que você faz no começo e quão rápido você o faz.

## [Time to market](https://en.wikipedia.org/wiki/Time_to_market)

Saindo da Engenharia e analisando esta fase no campo de Produto, o "começo" e todas decisões relacionadas são cruciais e determinantes para o futuro de uma ideia. Não pretendo discorrer muito sobre isso (principalmente por desconhecimento), mas, se você está interessado em se aprofundar nessa análise, os livros [The Lean Startup](http://theleanstartup.com/) e [Inspired](https://www.amazon.com.br/INSPIRED-Create-Products-Customers-English-ebook/dp/B077NRB36N/ref=asc_df_B077NRB36N/?tag=googleshopp00-20&linkCode=df0&hvadid=379787267723&hvpos=&hvnetw=g&hvrand=5797173220937812343&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1001655&hvtargid=pla-406131090225&psc=1) são boas referências.

Para uma introdução mais branda, você pode ler alguns textos do Marty Cagan que estão no seu site *[Silicon Valley Product Group](https://svpg.com/),* especialmente [Product Fail](https://svpg.com/product-fail/) e [The Four Big Risks.](https://svpg.com/four-big-risks/)

## O primeiríssimo passo

Vamos lá: você identificou um problema que quer resolver e, no mesmo instante, já visualiza as telas da sua solução. Provavelmente, já começa a rabiscar os fluxos da aplicação. No mesmo momento que você sente aquele *boost* de motivação, também já começa a modelar arquiteturalmente o seu *software*. Aqui, é crucial que você **não se perca!**

Uma coisa que eu sempre senti medo nessa fase inicial foi de **errar na mão**, querendo fazer tudo da melhor maneira possível: modelando o sistema **como se ele já começasse com milhões de usuários**; ou então tendo usuários com diversas necessidades.

O conselho é: pense bem qual a **funcionalidade-chave** da sua solução e foque nela.

Assim, uma dica muito importante é evitar [otimizações prematuras](https://stackify.com/premature-optimization-evil/). Existem [vários problemas que são bons para ter](https://davnicwil.com/if-its-a-nice-problem-to-have-dont-solve-it-now/) e, na minha opinião, tentar resolver tudo no começo pode potencialmente lhe desmotivar.

## Caixa de ferramentas

Ciente sobre o que falei acima _(e também acessado os links das entrelinhas)_, falemos sobre como por as mãos na massa.

**Disclaimer:** leia toda frase aqui com um "_na minha humilde e sincera opinião"_ logo antes. Caso discorde de alguma coisa, fique a vontade para comentar no post. Estou cada dia errando um pouco mais, e ainda bem :)

### CodeSandbox
A palavra-chave para desenvolvimento de soluções "do zero" é **iteração**. Dificilmente você será capaz de programar 20 minutos sem parar e só depois ver como ficou. Escolher uma ferramenta que lhe ajude nesse processo é essencial. 

Ao longo dos anos, já experimentei várias formas diferentes de começar minhas soluções, e hoje não tenho dúvida: o melhor lugar para começar a fazer algo é o **CodeSandbox**.

![Codesandbox](https://codesandbox.io/static/hero-ide-home-4ca67e8548248798ba899468ba3fa64e.png)

Pra quem não conhece, o [CodeSandbox](https://codesandbox.io/) é um ambiente de desenvolvimento que **roda no navegador** e possibilita que você programe sua solução, veja ela rodando lado-a-lado, compartilhe facilmente com outras pessoas e **itere muito rápido**, ainda mais quando você usa  uma tecnologia com *hot-reload*. Eles suportam a maioria das tecnologias atuais de _frontend_.

Olha algumas coisas que dá pra fazer no CSB:
- Sincronização com o Github (você pode criar novas branchs por lá, e o CSB cria Pull Requests automaticamente).
- Usar suas configurações do VSCode *(inclusive o VSCodeVim).*
- Projetos backend (como API's REST ou GraphQL)

Para começar a usar o Codesandbox _(com React)_, basta digitar na sua barra de endereço **[react.new](react.new)** e é isso!

### React.js

É difícil que você não tenha ouvido falar de React, mas vale ressaltar que é uma das tecnologias para construir interfaces web [mais usadas](https://stateofjs.com/) e com mais demanda no mercado. **React é uma escolha fácil**, e ao menos que você queira muito experimentar algo diferente, é o que eu lhe indico.

Mesmo após escolher o React, existem algumas opções sobre como usá-lo, e irei comentar sobre minhas recomendações.

#### Framework: [Gatsby.js]([https://www.gatsbyjs.org/](https://www.gatsbyjs.org/))

É muito rápido começar um projeto com o Gatsby, e tem sido uma tecnologia muito comentada nos últimos meses. Aqui ele funciona como uma alternativa ao famoso [Create React App](https://github.com/facebook/create-react-app), e a vantagem que você tem é que, caso parte da sua solução inclua páginas estáticas, o Gatsby consegue ser bem mais rápido (assunto pra outro post).

#### UI Framework: [Material UI](https://ant.design/https://material-ui.com/)

Um UI framework vai ter oferecer um **conjunto de componentes customizáveis** e acelerar bastante o desenvolvimento do seu produto. Coisas como _datepickers, modais e drag-n-drop_ são fáceis de usar e têm uma UI consistente. O MaterialUI segue os princípios do [Material Design](https://material.io/design/) da Google, além de permitir [várias customizações](https://material-ui.com/styles/basics/#getting-started) para deixar sua aplicação com sua cara (o que eu também recomendo).

#### Linguagem:  [Typescript]([https://www.typescriptlang.org/](https://www.typescriptlang.org/))

Por mim, não tem discussão: não há muitos motivos para começar um projeto em Javascript puro hoje em dia. _Typescript_ consegue lhe acelerar como desenvolvedor de várias maneiras possíveis, e a maioria das tecnologias que comento aqui funcionam perfeitamente utilizando a versão tipada do Javascript.

Eu já defendi que _"Typescript é só pra projetos grandes"_, depois passei pro time de _"comece com Javascript e no futuro migre"_, e hoje, com a adoção por vários _frameworks_ e ferramentas, não consigo mais usar um dado sem o editor jogar na minha cara o seu tipo.

### Tachyons

Já faz muito tempo que eu acompanho o mundo do desenvolvimento Web, e uma das coisas que parece que ninguém achou a resposta certa ainda é: **como usar CSS**. Já sabemos há anos que é a única forma de estilizar os elementos de uma página na internet, mas volta e meia alguém fala que estamos usando errado até então.

Dentre essas soluções, uma que me conquistou foi o [Tachyons](https://tachyons.io/), e vou explicar como ele funciona. Basicamente, o Tachyons é um **conjunto de definições de classes CSS**, porém definições **atômicas** e baseadas em
[Design Tokens](https://css-tricks.com/what-are-design-tokens/). Ao invés de classes como `.card` ou `.box`, temos `b` para `{ font-weight: bold }` ou `flex-column` para `{ flex-direction: column }`, e fazemos a estilização dos componentes **usando várias dessas definições**.

Uma das maiores vantagens do Tachyons é que **é muito fácil testar as variações direto no navegador**, coisa que sou acostumado a fazer. Com o _autocomplete_ de classes CSS do Dev Tools do Chrome, é uma experiência rápida e eficaz de criar seus layouts. 

![Tachyons](https://user-images.githubusercontent.com/18706156/90984179-c3e29080-e549-11ea-815a-5827a717b7cb.png)

### Firebase

De longe, esta é a tecnologia que eu mais sou apaixonado! O [Firebase](https://firebase.google.com/) é um serviço _serverless_ da Google para desenvolver aplicações, oferecendo banco de dados, autenticação e muito mais. Além disso, o **plano gratuito** do Firebase dá acesso a vários recursos, talvez suficientes para uma aplicação "média" por muito tempo. Você pode verificar [aqui](https://firebase.google.com/pricing) a política de preço deles e também entender como funciona a cobrança caso os limites básicos sejam ultrapassados.

![Firebase](https://user-images.githubusercontent.com/18706156/90992636-6ff69c80-e587-11ea-9e48-0b8b31beaa07.png)

Os projetos mais legais que já fiz usaram o Firebase, e é impressionante como sempre há algo novo no produto deles. A principal funcionalidade que evidencio aqui é o **Firestore**, solução de banco de dados _NoSQL as a service_ bastante completa, oferecendo transmissão de dados em tempo real. Além do Firestore, existem vários outros serviços que podem ser muito úteis para MVPs:
- **Authentication:** serviço de autenticação que permite oferecer login por Google, Facebook ou até número de celular na sua aplicação.
- **Cloud Functions**: serviço que roda na infa da Google Cloud e permite que você **rode código backend**, permitindo reagir a mudanças no banco de dados ou criar uma API.
- **Messaging**: serviço de mensageria com envio ilimitado de notificações para usuários.
- **Storage**: serviço de armazenamento que permite até 5GB de arquivos estáticos no plano gratuito. Ótimo para apps que precisam de upload de imagens.

### React JSON Schema Form

Esse ano foi a primeira vez que usei essa solução e, por mais que pareça algo "que não pertence", é uma peça fundamental da minha caixa de ferramentas. O [React JSON Schema Form](https://react-jsonschema-form.readthedocs.io/en/latest/) é uma biblioteca capaz de **gerar formulários completos** a partir de um [JSON Schema](https://json-schema.org/), que é uma espécie de "linguagem" que te permite definir um modelo de dado. 

Todo desenvolvedor sabe **como pode ser complicado** criar e gerenciar formulários, e essa _lib_ permite que você automatize esse trabalho **sem abrir mão do controle**. Caso você queira adicionar uma validação específica para um campo, você pode, e esse foi exatamente o que precisei. Na minha opinião, o React JSON Schema Form está na linha tênue entre as tecnologias _"no-code"_, que são rápidas, porém te impedem de tomar o controle quando você precisa de algo específico, e as formas "tradicionais" de criar formulários que requerem conectar vários objetos e gerenciar estado.

![image](https://user-images.githubusercontent.com/18706156/90990903-6bc48200-e57b-11ea-98b4-7677d5cc4cee.png)

Eu escolhi essa biblioteca porque foi a maneira mais rápida de criar um formulário de cadastro com **vários campos e validações importantes.** Com poucas linhas, consigo um formulário da criação e edição que já me entrega o dado do jeito que eu quero.

Eventualmente, quando a aplicação vai crescendo e preciso melhor a experiência do usuário, vou substituindo os formulários por componentes próprios para cada seção (talvez usando o seu UI Framework).

Você pode verificar o que o RJSF é capaz de fazer no [playground da ferramenta](https://rjsf-team.github.io/react-jsonschema-form/), que é bastante divertido! Outra possibilidade que ele oferece é [usar o estilo do UI Framework](https://stackoverflow.com/questions/49037130/how-to-use-react-jsonschema-form-with-material-ui), e também, através do `uiSchema`, configurar como alguns campos automáticos são renderizados.

### Netlify

Agora que você já montou sua aplicação e quer logo compartilhar com as pessoas, é necessário **hospedá-la**. Todos os serviços que mencionei têm a vantagem de **não precisarem de servidor**, o que torna o _deploy_ fácil e muito barato; afinal, você só precisa servir arquivos HTML, JS e CSS. É exatamente o [Netlify](https://www.netlify.com/) que pode te ajudar com isso, integrando-se com o seu repositório no Github e, automaticamente, **colocando sua aplicação online**. O serviço configura automaticamente o certificado HTTPS do seu site e também serve os arquivos em uma CDN.

Na [página inicial do Netlify](https://www.netlify.com/) é fácil entender como usá-lo, e também pode checar outros serviços oferecidos (como o Netlify Forms para guardar dados de formulário). Caso você queira **usar o seu próprio dominio.com.br**, também é fácil de configurar!

## É isso

E foi mais ou menos com essa *stack* que fiz em poucas horas a primeira versão do [Alt](https://github.com/alt-zap/alt-zap), um dos meus últimos projetos de *hobbie*. Inicialmente, criei para resolver um problema específico de alguns amigos, mas desde então tenho desenvolvido uma solução completa para ajudar pequenos negócios venderem online. Inclusive, chega lá se quiser contribuir :)

Um outro serviço bem legal que usei no Alt e vale mencionar aqui, foi o [Here](https://developer.here.com/). Ele é uma solução para desenvolvedores lidarem com mapas e localização, também com um plano gratuito bastante generoso. Caso você queira fazer um novo Uber, o Here é uma ótima opção. 

Então é isso, fiquem a vontade para comentar e talvez adicionar aquela ferramenta que você acha que se encaixa aqui!