Tendências sobre Frameworks Javascript em 2019

Preciso tomar decisões racionais em prol do negócio no papel de gestor que isentam gostos pessoais ou Feeling.

Coordenar junto ao time de tecnologia a escolha de ferramentas na estratégia da empresa para orientar que essa decisão seja sensata, é uma delas.

O mundo Front-end é o mais cruel, a cada dois ou três anos você praticamente precisa se programar pra reescrever tudo, sempre!


Como escolher corretamente para a organização?

Entre os fatores que preciso orientar, estão: facilidade de contratação (oferta abundante de bons profissionais), produtividade na tecnologia (quantidade de materiais, tutoriais e libs), evolução da plataforma (qualidade do ecossistema).

Como o Front-end é extremament volátil, quando você começa a decidir qual plataforma será utilizada para a próxima meia década já está pelo menos um ano atrasado no mundo corporativo que é mais lento pelo próprio tamanho das empresas.

Foco na entrega

Dado um entregável em um intervalo de tempo e o planejamento de sua sustentação com seguida evolução, preciso estabelecer dados para me guiar nessa escolha.

Alguns indicadores famosos no mercado Javascript como State of Js, The State of Developer Ecosystem (da Jetbrains) e Developer Surveys (da Stackoverflow) determinam que praticamente os 3 maiores na preferência e uso são Angular, React e Vuejs.

Coletando informações do Google Trends para essas 3 libs, temos:

Google Trends com filtro global https://trends.google.com/trends/explore?q=%2Fg%2F11c6w0ddw9,%2Fm%2F012l1vxv,Vuejs

Observo ainda uma constante busca na contínua preferência para o React que grandes players mundiais usam como o grupo Facebook (Facebook, Instagram e WhatsApp), AirBnb, Netflix, Twitter, Walmart (USA), etc.

Tendências do mercado local

Google Trends com filtro Brazil https://trends.google.com/trends/explore?geo=BR&q=%2Fg%2F11c6w0ddw9,%2Fm%2F012l1vxv,Vuejs

Vuejs parece ter um crescimento maior no Br do que no resto do mundo, apesar de menor em relação aos outros dois concorrentes, tem uma lista de empresas que utilizam por aqui que você pode acompanhar nessa conta do Github.

Não conferi a acurácia, mas a primeira grande empresa da lista que peguei pra conferir (O Boticário) não está em produção condizente com a lista.

Boticário em produção usa React na Home

Grandes Players no Brasil?

Um ecossistema moderno requer SPA e Server Side Renderer. Um grande Player na gritante maioria das vezes precisa integrar ferramentas internas e produtos de terceiros, espere poucos que serão homogêneos.

Filtrando pelos maiores varejistas generalistas para estabelecer um grupo de controle nessas condições, temos Magazine Luiza, B2W (Americanas e Submarino), Mercado Livre, Carrefour e Walmart. Deixei o grupo Via Varejo de fora (Casas Bahia, Ponto Frio e Extra.com) dessa análise rápida.

Existe também uma lista de empresas que usam React mantido pela comunidade de desenvolvedores nessa conta do Github.

Carrefour e Walmart Brasil não parecem ter algum desses 3 escolhidos, a não ser que seja apenas no SSR, não consegui identificar (foi muito superficial a análise). Magazine, B2W e Mercado Livre escolheram React seguindo essa tendência mundial e local.

Aqui não entrei no juízo de valores sobre o que é feito em casa ou de terceiros, afinal a contratação será de profissionais que entendam a tecnologia para construir ou no mínimo para integrar.

Magazine Luiza já tem alguns módulos e páginas construídos com React

Inclusive parece ter legado de estrutura feita em React

Americanas (B2W) também está em produção com React

Submarino (B2W)

Mercado Livre também

Siga o Mestre e Apelo a autoridade

Não se trata de falácia ao observar tendências, mas elementos óbvios que se o mercado onde você atua tem uma maior gama de profissionais em uma dada tecnologia, terá mais gente treinada disponível para contratação que por consequência deve impor um mercado de treinamento junto. Além de utilização de bibliotecas em comum que estarão mais maduras.

Se um número isolado fosse determinante, todo mundo seguiria com Angular por ter mais tempo e o que tem mais profissionais no mercado, é o cruzamento das informações.

Nesse contexto React tem uma maior procura e está na estratégia de um grupo considerável de grandes Players.

Desenvolvimento profissional

Nessa escolha alguns fatores sobre dados absolutos podem não fazer sentido, exemplo: “o sistema atual é em Angular e todos os profissionais são proeficientes nessa tecnologia”.

Contexto é tudo, dado o planejamento a médio e longo prazo, sai mais barato treinar todo mundo numa plataforma que faça sentido do que manter o Status Quo porque um número isolado indica um caminho cômodo.

Alguns profissionais podem não se adaptarem

Decisões racionais são necessárias pra empresa, não necessariamente para os profissionais, não vejo problema algum em um profissional se fixar em uma única tecnologia e determinar esse caminho pra sua carreira.

Como gestor você tem que saber que independente da escolha que fará, poderá perder alguns desses profissionais.

Como profissional você pode considerar conhecer e ser treinado na maior quantidade possível de ecossistemas que são tendências, sua expertise será aprimorada, mas como falei, vai da intenção de cada um.

Então, não devo experimentar Vuejs?

A análise que fiz no final de 2017 para o ano de 2018 ainda segue muito válida.

React e Vuejs seguem diretrizes, princípios e valores muito próximos, o que os difere é na forma em pequenos detalhes. Se a estratégia de evolução contemplar um pensamento em Microfrontends e padrões que sigam a integração entre ambos, manter um time polivalente pode render uma inovação frente aos concorrentes e uma oportunidade de investir em uma frente caso a outra entre em obsolescência.

Mas o experimento de abrir o ambiente a várias tecnologias também trás o risco de pulverizar esforço. O Tradeoff aqui requer uma dose de coragem além da experiência.

E o tl;dr?

Em um grande resumo disso tudo é, o mercado tende a continuar investindo em React, se você tem gente experiente o suficiente, vale a pena abrir mais de uma trincheira. Mas como conselho geral, treine seu time, fortaleça e construa uma arquitetura sólida primeiro em React.

Pra finalizar eu creio que vale a pena rever (se ainda não viu) essa palestra curtinha que eu e a Kete fizemos no React Brazil 2017 sobre evolução de plataformas javascript.

O que é Transformação Digital


O segredo das grandes companhias na Era Digital se resume a ser uma plataforma de tecnologia self-service que integra o físico e o online com produtos que satisfazem insights capturados no comportamento dos clientes.

Não existem mais empresas de serviços ou produtos

Não existem mais empresas de varejo, viagens, hotelaria, comidas, aluguel ou transporte.


Todas as compahias dessa nova era são empresas de tecnologias que entregam a melhor plataforma de varejo, viagens, hotelaria, comidas, aluguel ou transporte de forma transparente não importando qual canal o seu cliente acessa em busca do serviço ou produto.

Este é o momento do ponto de virada

O homem mais rico do Brasil, o bilionário Jorge Paulo Lemann, declarou no início de 2018 que era um dinossauro apavorado e acordou o mercado nacional de que a fórmula de atrair talentos, ter preços baixos e extrema eficiência na redução de custos não seriam mais suficientes.

O mundo plano dos negócios ainda entende essa fórmula como o modelo de atingir o sucesso mesmo enfrentando a mudança cultural tecnológica que chega pela concorrência.

Em um mundo de rápida inovação de produtos e diversos canais de vendas o diferencial é trazer a visão do consumidor para frente do negócio e entregar a melhor experiência Self-service.

Permita seu cliente não precisar de você

Antigamente você construía um serviço apoiado por tecnologias, agora você constrói tecnologias que entregam serviços.

As diretorias tradicionais sempre conduziram tecnologia como suporte de operações ou Core em apenas determinado ponto estratégico da empresa, isso está superado, as empresas não tem mais essa opção.

Não tem opção de não serem empresas de tecnologia.

Source: A self-driving Uber car has killed a pedestrian in Arizona

Você não pede comida falando com pessoas.

Você dá bom dia ou boa tarde por educação enquanto os carros não são ainda autoguiados quando pede um serviço particular de transporte.

Você se hospeda em uma residência particular sem precisar interagir com o proprietário e aluga um imóvel sem pisar em um cartório.

Ao mudar seu processo de entrega, transforma as pessoas

Você não muda as pessoas em uma transformação, você muda o processo para elas se adaptarem.

Para inverter o Mindset de criar serviços para apoiar operações precisamos automatizar todas as operações para as pessoas apoiarem as plataformas.


Não se cria processo baseado em pessoas, se cria em pessoas apoiando o processo.

Em vez de criar um processo baseado em serviços que pessoas executam, o processo automatizado precisa de pessoas na tomada final de decisão.

Além do fato das empresas tradicionais possuírem um legado que se apegam (como Mainframe) fragilizando a automação seja pelo preço ou na própria velocidade de entrega.

Olha como o Nubank nasceu com outra impressão digital, criou uma plataforma de auto-serviço pra seus clientes que desafoga a operação de atendimento.

Com um atendimento desafogado se torna muito mais humanizado, os atendentes podem ser especializados (porque diminui a vazão e pode contratar menos e melhor) que escrevem cartinhas de próprio punho aos clientes, além de resolver problemas no 1:1.

Empatia

Trazer a visão do consumidor pra frente num atendimento de auto-serviço torna os próprios funcionários nos maiores nos maiores influenciadores, quem se preocupa em atender bem e da melhor forma, cria empatia com todos os envolvidos.

Quem imaginaria que um dia amaríamos uma instituição financeira ao ponto de fazer Unboxing no youtube no recebimento do cartão?

3 Chaves da Transformação

Em resumo:

  1. Trazer o cliente pra frente da missão, o segredo é como o atender automaticamente;
  2. Criar plataformas modernas e ágeis guiadas por produtos que façam sentido pro sucesso do cliente;
  3. Direcionar os produtos por dados.

No próximo Post (esse já ficou grande) vou falar sobre a estratégia de como fazer isso.

Curso online de PWA

Após um ano trabalhando e divulgando PWA, preparei um upgrade do BeerSwarm com mais fôlego, mesclando Server-side Rendering, conteúdo e otimizações de SEO e performance que construiremos juntos nesse Workshop.

Qual o investimento?

Apenas 200 reais, que você pode se inscrever nesse link.

Quando vai ocorrer?

Acontecerá nos dias 15, 16, 17, 18 de maio de 2018 iniciando todos esses dias as 19h até as 21:00h. Dia 19 de maio de 2019 das 9h as 18h, com intervalo de 12 as 14h.

GMT-3 (Horário de Fortaleza-CE ou Mombaça, ex-capital do Brasil)

Formato online?

Utilizaremos o https://zoom.us/ para as aulas, os vídeos será disponibilizados para os inscritos após o curso.

Conteúdo

  1. Experiência SPA e Content Centered
    1.1 Criar estrutura no Heroku para Server-side Rendering
    1.2 Setup e deploy com expressjs e Babel
    1.3 Criar estrutura de views com create-react-app
    1.4 Criar engine de template com react-dom/server no server side
    1.5 Exemplo de código isomorfico usando redux
    1.6 Criar estrutura de Hosting no Firebase para SPA
  2. Mobile First e UX Design Patterns
    2.1 Conceptual model
    2.2 Complexion Reduction
    2.3 User Journey Simplification
    2.3.1 Linear User Flow com React Routes
    2.4 Progressive Disclosure
    2.5 Responsivo
    2.5.1 Responsive Logos
    2.5.2 Progressive Enhacement e Graceful degradation com Material Design
  3. Offline First
    3.1 Criando estrutura de dados no IndexedDB
    3.2 Entendendo Service Workers, upgrade e migrate de versões
    3.3 Criando Sagas (Middleware redux) para funcionar offline e online
    3.4 Configurar https local pra validação
  4. Web Instalável
    4.1 Manifest, tags e configurações
    4.2 Usando usuario anonimo com Firebase
    4.2.1 Aprendendo generators e redux-saga
    4.3 Vinculando usuario anonimo com login OAuth do Google
    4.4 Pedindo localização do usuário
    4.5 Integrando GMaps, Leaflet no App
    4.6 Acessando a câmera e salvando fotos
    4.7 Processos de sincronização e notificação com Web Workers
    4.8 Compartilhando itens com Web Share API
  5. Integração Contínua sincrona com lightghouse-ci