- A Shopify declarou há 5 anos que o React Native (RN) era o futuro do desenvolvimento mobile e, desde então, fez a transição com sucesso de todos os seus apps para RN
- Principais motivos para adotar React Native
- Escrever uma vez, dar suporte a duas plataformas: para eliminar a ineficiência de desenvolver a mesma funcionalidade duas vezes, para iOS e Android
- Maior mobilidade de talentos: para permitir que desenvolvedores transitem livremente entre iOS, Android e Web
- Entregar mais valor: reduzir o tempo gasto para garantir paridade de funcionalidades e entregar mais valor aos usuários
- Resultados bem-sucedidos da transição
- A produtividade aumentou bastante ao não ser mais necessário desenvolver a mesma funcionalidade duas vezes
- Como os engenheiros passaram a atuar tanto na web quanto no mobile, foi possível fazer mais com o mesmo time e criar novas oportunidades de crescimento
- Manter a paridade de funcionalidades entre iOS e Android deixou de ser um problema, permitindo entregar mais valor
- O tempo de carregamento de telas no app ficou abaixo de 500 ms, e mais de 99,9% das sessões se mantêm estáveis
- Continuam usando código nativo quando ele é a melhor ferramenta para o trabalho, aproveitando o melhor dos dois mundos
Principais aprendizados
Apps em React Native são rápidos
- A Shopify dá muita importância à performance, e o CEO Tobi Lutke enfatiza que “nem todo software rápido é excelente, mas todo software excelente é rápido”
- Antes da migração para React Native (RN), a maior pergunta era se o RN conseguiria atender às metas de desempenho
- Por isso, antes de decidir pela migração, validaram essa possibilidade com ampla prototipagem
- Analisaram o trabalho em andamento da Meta para remover gargalos de performance e identificaram áreas, como listas, nas quais poderiam contribuir
- Com a avaliação de que o RN ficaria mais rápido em breve, decidiram adotá-lo de forma abrangente
- Cinco anos depois, os apps em RN são rápidos e atingem tempo de carregamento de tela abaixo de 500 ms (P75) no app da Shopify
- Metas de desempenho semelhantes também foram alcançadas com sucesso nos demais apps
- Aplicar bons padrões e técnicas para eliminar gargalos de performance é essencial
- Nativo não é sempre mais rápido, e RN também não é sempre mais lento
- O RN evoluiu muito nos últimos anos e se consolidou como uma plataforma capaz de criar apps de nível mundial
- À medida que o framework RN amadurece, a expectativa é que fique cada vez mais fácil desenvolver apps rápidos
- Com o aumento da especialização dos times, também cresce o espaço para criar apps ainda melhores
As vantagens do hot reloading
- O hot reloading do React Native (RN) foi um recurso transformador para o ambiente de desenvolvimento, refletindo mudanças imediatamente
- Um dos maiores problemas no desenvolvimento nativo era que, dependendo do tamanho do codebase, até pequenas mudanças podiam levar vários minutos para compilar e rodar no emulador ou em dispositivos reais
- Isso desperdiçava tempo e interrompia o fluxo de trabalho dos desenvolvedores
- O hot reloading do RN resolveu esse problema por completo, melhorando bastante a produtividade e a experiência de desenvolvimento
Mobilidade de talentos graças ao Typescript
- Com a ampla adoção de Typescript, a movimentação de desenvolvedores entre React Web e React Native (RN) ficou fluida
- Desenvolvedores web: conseguem começar a trabalhar com mobile de forma muito mais fácil pelo RN do que com desenvolvimento nativo em iOS e Android
- Desenvolvedores mobile: conseguem participar com facilidade do trabalho web por meio do RN
- Vantagens da mobilidade de talentos
- Oferece mais oportunidades de crescimento para engenheiros e aumenta a flexibilidade na alocação de pessoas
- Reforça a capacidade de realizar mais trabalho com a mesma equipe de desenvolvimento
- Gera mais eficiência e produtividade por meio do compartilhamento de código entre web e mobile
- Desenvolvedores capazes de atuar em várias plataformas aceleram lançamentos e conseguem trocar ideias entre tecnologias e aplicá-las de novas formas
- Isso ajuda a formar uma cultura que vê tecnologia como ferramenta, amplia a visão do time e incentiva a escolha da ferramenta mais adequada para cada trabalho
Desenvolvedores nativos são essenciais
- Engenheiros mobile especializados em iOS e Android são essenciais para criar ótimos apps mobile
- A experiência acumulada ao desenvolver diversos produtos mobile e a compreensão profunda de usabilidade e convenções são insubstituíveis
- Tarefas como acessar a camada de plataforma, escrever bindings, dominar build e deploy, e gerenciar atualizações de versão do React Native exigem conhecimento nativo
- Desenvolvedores nativos também são essenciais para otimizar o desempenho do app em diferentes modelos de dispositivo e oferecer uma experiência consistente para todos os usuários
- Também são indispensáveis para acompanhar novos recursos, APIs e mudanças de tooling em iOS e Android, além de gerenciar atualizações de versão do React Native
- Desenvolvimento de um curso de treinamento em React Native para desenvolvedores mobile nativos:
- Estruturado como aprendizado autodirigido para permitir escrever código em nível de produção
- Com suporte adicional por meio de sessões de perguntas e respostas, pair programming e code review com desenvolvedores experientes em React Native
- Alocação adicional de desenvolvedores web (especialistas em JavaScript, TypeScript e React) nos times mobile:
- Mantendo um equilíbrio forte entre especialização em nativo e em React Native
- Ao longo do tempo, isso elevou o nível técnico do time como um todo
- Uma composição de equipe bem equilibrada entre desenvolvedores nativos e web é a chave para criar ótimos apps mobile com React Native
Código nativo é essencial
- Evite usar 100% React Native: RN é uma ferramenta eficiente porque permite desenvolver a funcionalidade uma única vez, mas não é a tecnologia ideal para todas as situações
- Casos em que código nativo é necessário
- Desenvolvimento de recursos avançados: funcionalidades que usam hardware, como escaneamento 2D/3D e execução de modelos de IA on-device
- Recursos com restrições de memória: widgets de tela inicial e de bloqueio, apps e complications para Apple Watch, App Intents, Siri Shortcuts etc.
- Tarefas em background de longa duração:
- Ex.: o app Point of Sale da Shopify baixa e sincroniza grandes volumes de dados em background para conseguir processar transações mesmo offline
- Foi projetado para usar código nativo e fazer offload completo do trabalho em background, de modo a não impactar a performance do app
- O RN é adequado para desenvolver a maioria das funcionalidades uma única vez, mas, nas áreas em que nativo funciona melhor, o ideal é usar código nativo
- A forte interoperabilidade com nativo oferecida por padrão pelo RN facilita a combinação das duas tecnologias
- É importante enxergar a relação não como RN ‘ou’ nativo, mas como RN ‘e’ nativo
- Uma equipe com conhecimento nativo é essencial para implementar bem esse equilíbrio
Dificuldades de depuração
- A depuração no React Native (RN) tem aspectos instáveis e exige trabalho adicional para ser configurada corretamente no VSCode
- iOS e Android oferecem, por padrão, recursos de depuração fortes e estáveis
- A Meta reescreveu recentemente toda a stack de debugger do RN e vem promovendo melhorias, e o novo debugger mostra resultados promissores
- A Shopify está trabalhando junto com a Meta para elevar a experiência de depuração do RN a um nível de classe mundial
Atualizações do React Native não são seamless
- Atualizar um app para novas versões do React Native (RN) exige muito trabalho e frequentemente requer reorganização do codebase
- Para lidar com isso, a Shopify formou um pequeno grupo rotativo de desenvolvedores dedicado às atualizações, permitindo que o restante do time se concentre no desenvolvimento de funcionalidades
- À medida que o framework RN amadurece, espera-se que o processo de atualização fique cada vez mais fácil
- Quando a New Architecture for adotada mais amplamente, espera-se que a complexidade do trabalho relacionado a atualizações diminua
Maior dependência de bibliotecas de terceiros
- O framework React Native (RN) é menos abrangente do que o nativo, o que leva ao uso de mais bibliotecas de terceiros
- Como o ecossistema amadureceu nos últimos anos, hoje é fácil encontrar bibliotecas bem mantidas para praticamente qualquer funcionalidade necessária
- Porém, isso exige manter atualizações contínuas dessas bibliotecas e amplia a superfície para ataques à cadeia de suprimentos
- A Shopify adotou atualizações automáticas de dependências com Dependabot
- Com escaneamento automático de código para detectar e impedir código malicioso
- A expectativa é que o framework RN evolua com uma direção mais clara e passe a oferecer mais funcionalidades de forma nativa
Grandes ganhos com o uso de uma base compartilhada
- Quando adotou React Native (RN) pela primeira vez, a Shopify ainda tinha pouca experiência em criar apps mobile com RN e também não podia aproveitar a base compartilhada acumulada no desenvolvimento nativo
- No início, cada time resolvia seus próprios problemas ao desenvolver apps, o que foi eficaz para começar rapidamente e migrar os apps
- Porém, isso gerou duplicação ineficiente de trabalho, já que times diferentes resolviam os mesmos problemas várias vezes
- Houve investimento de tempo e esforço para construir expertise em RN, e foi feita uma escolha deliberada pelo trade-off de priorizar velocidade em vez de consistência
- Depois de 2023, com todos os apps mais maduros, a empresa começou a reforçar a consistência
- Componentes comuns, como Identity, monitoramento em tempo real e medição de performance, foram extraídos para bibliotecas compartilhadas e usados em todos os apps
- Isso permite que os times usem soluções existentes sem precisar resolver novamente problemas já solucionados
- Em 2025, a empresa vai ampliar ainda mais o compartilhamento de código para
- Disseminar conhecimento e expertise entre os times
- Fazer com que todos os apps se beneficiem automaticamente de melhorias em componentes compartilhados
- Economizar recursos de engenharia para focar no trabalho de entregar valor aos usuários
O futuro do React Native
- O futuro do React Native (RN) é promissor, e a Meta tem sido uma ótima mantenedora do projeto, entregando melhorias regulares
- A cada release, o feedback dos desenvolvedores se reflete fortemente no roadmap, e a expectativa é que criar apps rápidos fique cada vez mais fácil
- A Shopify planeja continuar apoiando a evolução do RN enquanto adota a New Architecture
- Diversas grandes empresas, como Microsoft, Amazon, Tesla, SpaceX e Coinbase, usam RN, e bibliotecas e frameworks de terceiros de alta qualidade continuam sendo lançados
- A Shopify também contribui com a web aberta, open source e padrões abertos por meio de
- Contribuições de código para RN
- Atuação como co-release captain de releases do RN
- Patrocínio de projetos open source de alto impacto, como React Native Skia e Reanimated
- Publicação de projetos open source como Flashlist, Restyle e Tophat
- Além disso, em 2025, reiniciará o React Native Working Group
- O objetivo é reunir líderes principais das organizações que apoiam o RN para identificar os grandes desafios do ecossistema, definir prioridades de investimento, promover colaboração e reduzir trabalho duplicado
- Empresas participantes anteriormente: Meta, Twitter, Coinbase, Microsoft etc.
- Se tiver interesse em participar, entre em contato
- O RN evoluiu muito nos últimos 5 anos, e muitas das limitações que antes faziam as empresas hesitar em adotá-lo agora desapareceram
- Se você não usa RN há algum tempo, este é um ótimo momento para dar uma nova chance ao RN
9 comentários
Adotamos o RN mais ou menos na mesma época e por motivos parecidos, e estamos usando bem.
Tenho um pouco de dificuldade em concordar com a questão de performance, mas isso provavelmente é um problema que deve ser resolvido no nível do
react-dom.A maior vantagem parece ser conseguir fazer muita coisa com uma equipe pequena.
Fico curioso para saber quais funcionalidades nativas não conseguem ser cobertas pela API nativa do RN.
É um compartilhamento de experiência impressionante. Hoje trabalho desenvolvendo apps Android com Kotlin, e às vezes penso nisso. Será que é realmente necessário ir obrigatoriamente para o nativo...? (No meu caso, havia coisas que precisavam trabalhar em estreita integração com a plataforma, então acabei indo para o nativo de qualquer jeito.) Se for possível, acho que também vale a pena seguir por um caminho com suporte a multiplataforma, como React Native ou Flutter.
A Shopify é incrível@.@
"100% React Native should be an anti-goal. It is great for building features just once, but is not the right technology for everything."
"Em vez de pensar em nativo ou React Native, pense em nativo e React Native."
Na engenharia, não existe 100% (cuidado com títulos caça-cliques do tipo "A é sempre melhor").
Cada opção tem seus prós e contras, e há ferramentas adequadas para cada situação.
Também é um texto muito bom porque dá para ver a filosofia de formação de equipe da Shopify.
Mesmo assim, eu vou continuar elogiando o Flutter.
Migrar todos os apps para RN... impressionante mesmo, muito mesmo
@shopify/flash-listé bom demais. Obrigado. ShopifyA Shopify também desempenha um papel central no ecossistema Ruby on Rails,
e vem mostrando uma trajetória impressionante no ecossistema RN. É uma empresa incrível.