O que o Designer deve considerar na hora de escolher um Framework Javascript?

Publicado Originalmente em Codesigners.cc

Essa é uma pergunta recorrente quando você começa neste mundo de Frameworks: O que o designer deve considerar na hora de escolher um Framework Javascript para aprender?

A maior parte dos reviews e testes comparativos que você vai encontrar na internet são escritos pelo viés de um programador, e a ênfase geralmente é em performance, sintaxe, paradigma, plugins/packages disponíveis, etc.

Por isso, quando me peguei nesta posição de ter que escolher um framework, foi necessário primeiro entender a coisa toda com o meu próprio background de designer. E não teve outro jeito, tive que ‘cair pra dentro’ e olhar de perto o que cada framework faz, como ele faz e qual seria interessante para mim como designer. Uma das coisas mais importantes que pude aprender nesse período de testes é que no mundo do Javascript tudo é possível, e por esse mesmo motivo, tudo é meio bagunçado.

Nós designers não sabemos quais perguntas fazer. Sem saber o que perguntar, fica difícil saber o que analisar, o que comparar, e qual a relevância do que estamos aprendendo para o objetivo final que queremos atingir. E é exatamente as respostas para essas perguntas que vou tentar apresentar daqui pra frente neste artigo.

O que devo considerar na hora de escolher um framework javascript?

Vou considerar os 3 frameworks que testei, Angular 2, Vue e React. Depois de muita leitura, cursos online, exercícios e testes, essas são as minhas considerações para você escolher corretamente o seu framework javascript.

1 — Até onde é possível ir e até onde você quer/precisa ir?

Como designer e leigo em programação, eu não entendia muito bem o verdadeiro sentido do termo Front End. Erroneamente eu pensava que Front End era apenas fazer coisas visuais aparecerem na tela do navegador. Entretanto, comecei a esbarrar em algumas coisas que não pareciam ir por este caminho… palavras como Webpack, NPM, Github, Node Server, API, Full-Stack e outras foram surgindo… Eu fiquei meio perdido tipo aquele gif do John Travolta… cadê as paradas de cores, forma, animação???!

O que descobri foi que dentro do universo Front End você pode ir encontrando ramificações que sem querer vão te levando ao Backend. Isso acontece porquê dentro de um Framework Javascript, em algum momento quando você estiver criando um componente visual, você terá também que se preocupar com algumas perguntas do tipo ‘Como esse componente vai receber os dados da API?‘, ou tipo ‘Como este componente vai enviar estes dados inseridos pelo usuário ao servidor?‘. E isso vai ficando cada vez mais recorrente.

Aí surge a figura do tal do Front End Developer. Quando eu entendi isso, eu percebi que estudando Front End eu posso encarar até 3 estágios dentro da programação Front End, que seriam:

1.A — Front End Designer: você seria capaz de construir componentes visualmente, porém, sem deixar ele interativo. Neste nível você precisaria aprender apenas conceitos básicos de criação de um componente, e usaria basicamente o básico de HTML, CSS e Javascript (além é lógico de ter que entender as regras do framework escolhido).

1.B — Front End Developer/Engineer: você seria capaz de construir componentes visualmente e também de programar como ele recebe dados do servidor, como/quando ele processa esses dados e renderiza na tela, e como também faz o processo inverso de receber um dado inserido pelo usuário e enviar estes mesmos dados à um servidor que irá armazenar o dado em um banco de dados. Neste nível você já teria que aprender algumas coisas mais complexas como requisições http/ajax, como funciona um CRUD (Create, Read, Update, Delete), como interagir com uma API e outras coisinhas mais.

Nota: Existe uma grande discussão sobre o termo Front End Developer VS Engineer. Os argumentos são de que o Developer faz um front end coding mais simples, tipo só um HTML+CSS+JS basicão, enquanto que o Engineer já seria esse programador front end mais contemporâneo, que manja de inúmeras ferramentas de controle de tasks, package managers, pre-processadores, compilers, fetching e um monte de outros conceitos; mas além disso, o Engineer deve também saber em qual projeto deve usar cada coisa.

1.C — Full Stack Javascript Developer: você seria capaz de fazer tudo que foi mencionado nos itens 1 e 2, mas também aqui você seria um dominador da arte de criar um Backend. Isso significa que você manjaria das duas partes envolvidas no desenvolvimento de um software. Você é quem faz o servidor, você é quem monta o banco de dados, você é quem gera a API, e depois você é quem desenvolve os componentes front-end que irão e interagir com o Backend que você criou. Este Backend geralmente é criado utilizando o Node.js como servidor.

Não entendi nada do que você falou… Traduz pra Designês por favor

Pois é, se você não estiver entendendo nada do que eu falei até aqui você teve a mesma reação que eu quando resolvi entrar neste mundo. Mas não se preocupe, demora um tempinho mesmo, e muitas coisas que eu disse acima você só vai realmente entender quando começar a aprender, quando fizer algum curso. Não precisa surtar ainda.

O que você precisa saber é que escolhendo o item A (Front End Designer), você será tipo um designer que ajuda a galera de programação economizando uma etapa que é a de fazer o componente. Geralmente os programadores odeiam fazer CSS, então você seria de grande ajuda nesta etapa, além de garantir que o componente programado no projeto será idêntico ao componente que você desenhou. Você então seria aquele designer que quebra um galhão com a galera da programação.

No item B (Front End Developer/Engineer) você já seria um designer mais considerado no rolê. Você além de ajudar criando componentes estáticos, também vai criar as interações para estes componentes. Você vai ser o dominador do client-side e vai saber analisar quando o aplicativo está com vazamento de memória, qual a melhor forma de conectar aquele componente ou funcionalidade com o backend, vai gerenciar performance e muitas outras coisas. Os programadores da sua equipe não terão que se preocupar mais com o Front End e você não terá que se preocupar em incomodar um programador para que ele faça algo que você projetou. Manipular os dados que aparecem na tela será um poder e uma responsabilidade sua a partir de agora!

No item C (Full-Stack Javascript Developer) você será um designer/programador auto-suficiente. Você conseguirá criar de projetos pequenos a médios sozinho, e entregar ao seu cliente final. Você tomará conta de tudo, sendo design, front end e backend. É um caminho muito perigoso que alguns designers já fizeram e ‘chegaram lá’. Minha preocupação com o tal do Full-Stack é que acaba sendo muito conteúdo para aprender, e o risco de não ficar realmente bom em todas as etapas é grande. Para se tornar um bom Full-Stack JS Developer, na minha opinião, levaria pelo menos uns 6 anos de estudo, com muitos projetos executados e muitos problemas resolvidos. Só depois de muita repetição é que você iria dominar todas as etapas e começar a caminhar com as próprias pernas. Recomendo ser um Full-Stack apenas se você quer ser um designer completamente independente e super foda, e se realmente for essencial para você desenvolver seus próprios aplicativos do zero até a implementação e manutenção. Muito provavelmente ao fim da jornada full-stack você passaria a maior parte do seu tempo trabalhando com linhas de códigos do que com design ou componentes visuais.

Tá, mas o que isso tem a ver coma escolha do Framework?

Para cada um destes caminhos, a Escolha do Framework correto pode influenciar, e muito.

Para os itens 1.A e 1.B, eu escolheria Vue ou React com certeza, porém, o Vue teria uma ligeira vantagem no item 1.A pois, se você vai ficar apenas no escopo visual da coisa toda, o Vue tem uma abordagem mais fácil e facilita você aplicar seus conhecimentos prévios de HTML e CSS. Já para o item 1.B o React teria uma ligeira vantagem, quase insignificante, apenas pelo fato dele ser mais próximo de um paradigma de programação chamado ‘Functional Programming’, que é algo que é recomendável para programação nos dias de hoje. Isso não significa que o Vue também não seja bom para o item 1.B, mas apenas que o Vue não tem essa abordagem de Functional Programming como premissa.
O Angular 2 também é muito bom para o item 1.B, e o uso de Typescript tem sido adotado por empresas com projetos grandes, porém, eu não me adaptei bem à sintaxe e todas as regras do framework.

Para o item 1.C, se você realmente quiser dominar o Backend, a escolha entre Vue, React ou Angular não vai fazer quase diferença alguma, haja vista que você irá trabalhar com o Node.js que é um framework de Backend, ou seja, que permite rodar javascript que é uma linguagem client-side, no server-side.

Ta, ta.. eu sei que são mais nomes estranhos e você realmente só vai se familiarizar com isso depois de fazer algum curso ou muita leitura, mas por hora, não é necessário se preocupar com o Backend. Foque-se nos frameworks Front End.

Em resumo, se você quer só o item 1.A, vá de Vue, se você quer o 1.B, vá de React. Se você quer o item 1.C, qualquer um serve, mas eu iria de React.

2 — Você quer ser Empregado ou Empreendedor?

Essa pergunta me foi feita há um bom tempo atrás, e até hoje eu não sei responder ela completamente. De tempos em tempos eu alterno a minha opinião e nunca consigo escolher uma dessas diretrizes em definitivo.

Designers tendem a ser extremamente criativos e sempre que aparece um problema de projeto para resolver a gente acaba projetando um serviço inteiro para o cliente, dando consultoria de negócio e ainda ajudando o cara a lançar o novo produto/serviço. Realizar todo esse processo acaba acendendo a chama do empreendedor dentro de nós, e daí também surge o dilema do empreender e correr riscos VS ser empregado e ter estabilidade. Esse dilema aparece geralmente quando você tem uma grande idéia de aplicativo/serviço que resolveria um grande problema.

Se você escolher o caminho de empreender você terá a opção de contratar programadores e continuar sendo o bom designer que você sempre foi, só que agora também empreendedor. Se você é quebrado de grana mas ainda quer muito colocar sua idéia em prática, a segunda coisa que lhe ocorrerá será encontrar um sócio que seja programador. Se você conseguir este sócio, ótimo, mas se não conseguir, pra onde correr? Vai abandonar sua grande idéia ou perseguir seu sonho de empreender?

Se você for perseguir o sonho e sem sócio programador, então inevitavelmente você vai cair no mundo do Front End e Full-Stack development. Nessa hora, milhões de perguntas surgirão, e como eu já passei por isso eu vou tentar lhe apresentar algumas e também as conclusões que eu cheguei.

Vale a pena aprender a programar para desenvolver o próprio produto/serviço?

Sim, vale a pena aprender a programar, mas não sei dizer necessariamente se o único motivo seria para desenvolver o próprio produto. Sinto que aprender a programar deve ser encarado pelo designer como algo maior em sua carreira. Seria mais como aprender uma nova super habilidade que de certa forma está muito linkada ao futuro do designer. Encare como uma pós-graduação ou algo do tipo, será melhor encarar dessa forma do que simplesmente aprender a programar para fazer seu super aplicativo.

No entanto, aprender a programar VAI lhe permitir desenvolver seu próprio aplicativo, e isso também é maravilhoso. A maioria dos serviços digitais que deram certo começaram com o próprio dono fazendo a versão inicial. A maioria destas pessoas era/é programador, e fazer sozinho com certeza foi o que viabilizou o negócio sair do papel, pois os custos para desenvolver um software de qualidade do zero não são muito baratos.

Apenas esteja ciente de que, o ideal é que desenvolver o próprio produto não seja o único objetivo, pois caso isso não dê certo, a coisa toda pode ser uma grande perda de tempo para você e extremamente frustrante.

O que aprender a programar vai me trazer de bom na carreira como designer?

Algumas coisas que pude observar são bastante interessantes. A primeira delas é que você começa a pensar de forma diferente no dia a dia e também em seus projetos de design. Você passa a pensar em sistemas e processos e não mais apenas em algo pontual; você passa a imaginar como reaproveitar tudo que você cria ou criar coisas com funcionalidades genéricas para que possam ser utilizadas em mais de uma situação naquele projeto.

Já no viés de mercado, se você está certo de que quer trabalhar como empregado de uma boa empresa, aprender a programar vai lhe dar uma boa vantagem sobre outros designers de UI/UX por exemplo. Vai lhe permitir ser absurdamente eficiente na hora de desenhar suas novas interfaces pois você já saberá o que é possível fazer, como é possível fazer, porquê do jeito X é melhor do que do jeito Y quando se trata de performance de código, uso de memória em servidor, uso de banco de dados, etc. Mesmo que você não escreva uma linha de código, quando você passar as especificações para o programador da sua equipe com certeza ele irá aplaudir de pé.

Outra coisa muitíssimo boa são as oportunidades de emprego. Para um designer que programa, algumas portas se abrem pois cada vez mais o mercado procura esse designer híbrido, que consegue realizar com maestria o seu trabalho como designer, mas que não deixa a desejar caso por exemplo, seja necessário que ele crie a biblioteca de componentes do aplicativo que está sendo desenvolvido.

Tá, e qual framework eu escolho para cada situação (empreender ou empregado)?

Em ambas as situações eu recomendo Vue ou React, todavia alguns critérios podem fazer você escolher o React como eu escolhi, e eu os listo abaixo:

2.A — Quantidade de Vagas de Emprego: Neste critério eu recomendo React. Se comparado ao Vue, o React tem absurdamente mais vagas de empregos disponíveis no mercado devido à sua popularidade. Outro fator que contribui para o React ter tantas vagas disponíveis é o React Native, framework que permite criar aplicativos mobile com performance de aplicativo feito em linguagem nativa do sistema operacional. Todavia, o Vue tem ganhado popularidade no mundo todo e principalmente no Brasil nos últimos tempos.

2.B — Curva de Aprendizado: Se você for desenvolver o próprio aplicativo e estiver com pressa, o Vueé a melhor opção. A curva de aprendizado é um pouco mais rápida com Vue, e provavelmente você lançará seu aplicativo mais rápido do que se escolher o React.

2.C — Manutenção de Equipe: Em ambas situações, sendo empregado ou sendo empreendedor, você estará ligado à uma equipe. Nos tempos atuais tem sido mais fácil manter uma equipe React por existir mais oferta de mão de obra. Entretanto, como mencionado anteriormente o Vue também tem ganhado bastante tração no mercado e não seria tão difícil encontrar profissionais para sua equipe Vue, mas na dúvida vá de React, pois como empregado você terá muito mais ofertas de emprego, e como dono de software você terá muito mais profissionais à disposição.

Por fim, neste quesito entre ser empregado ou empreendedor, o React acaba sendo a melhor opção para ambas as situações, porém, seguido de perto pelo Vue (muito perto mesmo). Portanto se o tempo e curva de aprendizado for mais importante pra você, vá de Vue.

3 — Quanto tempo é necessário?

Tempo, tempo, tempo, tempo…

Para quem sofre de ansiedade, aprender uma nova ciência pode ser extremamente frustrante. O tempo de aprendizado de um Framework Javascript vai depender de inúmeros fatores, tais como quanto tempo você tem disponível por dia para estudar, o quanto você já sabe de Javascript (a linguagem, não o framework), quais opções de pacotes adjacentes você vai utilizar (seu stack), etc. Enfim, daria para acrescentar mais algumas variáveis nessa equação, e o resultado final acaba sendo muito individual.

O fato é que vai demorar… sim, vai demorar pelo menos uns 2 anos pra você poder dizer “eu sei fazer algo decente com React (ou Vue, ou Angular)”. Se você for um super designer, daqueles que sempre teve um pezinho nas exatas, você pode aprender bem mais rápido, mas se você for aquela pessoa bem miçangueira que passava com nota 5 em matemática, respire fundo e entenda desde o começo que vai demorar um pouquinho, e isso é completamente normal.

Um grande problema de se aprender um framework é que a gente não consegue visualizar tudo o que é possível, quantas etapas existem, quantas eu preciso aprender dentro do objetivo que eu quero e assim por diante. Neste sentido, às vezes saber tudo que tem pela frente assusta e pode até fazer você desistir. Mas não se assuste, a maioria destas coisas tem uma função única e simples de aprender e memorizar.
Repare que estou falando especificamente de Frameworks Javascript, e não de todo o ecosistema que envolve um programador Front End. Assim, minha recomendação seria a seguinte ordem de aprendizado, considerando que você já sabe o suficiente de Javascript puro:

• Syntaxe do Framework
• Componentes
• Estilos CSS para componentes
• Props e State
• Lifecycle do Componente
• Requisições Http/Ajax
• Interagindo com o Servidor
• Routing
• Formulários,Validação e Autenticação
• Testando o Aplicativo
• Deploy e Publicação

Existem algumas etapas intermediárias à esses tópicos e também etapas posteriores, mas uma vez que você siga e aprenda estes tópicos acima, você já irá dominar muito do que é necessário para ser um Front End Developer.

Considerações Finais

Eu ainda estou percorrendo este caminho de aprendizado e já consegui ter uma boa visão geral de tudo. Feliz ou infelizmente tive que testar tanto o Vue quanto Angular e React para ter certeza do que eu queria, mas só consegui tomar minha decisão pelo React depois de ter as respostas para as perguntas que apresentei neste artigo.

Outra coisa que aprendi é que esse mundo de frameworks javascript é muito maluco e cansativo. Existem inúmeras possibilidades e jeitos de fazer a mesma coisa, e muitas vezes parece que as coisas foram feitas mais para complicar do que para resolver problemas. Vai ser comum você travar em coisas que deveriam ser simples como configurar seu ambiente de desenvolvimento. Também será comum coisas não serem compatíveis com as outras e você não saber de onde o erro está vindo, mas a parte boa é que provavelmente alguém já passou por isso e a resposta está publicada em algum forum de desenvolvimento.

Com o passar do tempo você vai se acostumando e já tendo um feeling para saber o caminho certo de resolver as coisas que dão errado. O segredo é a repetição. Faça muitos componentes, de todo tipo, depois faça vários exercícios na internet, e quando você estiver se sentindo mais à vontade com toda a parafernalha necessária para rodar um aplicativo javascript, daí você vai passar a enxergar a ‘big picture’ e com certeza vai curtir muito o que você está aprendendo e as possibilidades que se apresentarão a partir disso.

Se você leu até aqui, fico muito grato e espero que este artigo possa lhe ajudar de alguma forma. E se você já está percorrendo este caminho, eu adoraria ouvir sua opinião, seja aqui nos comentários ou por email.