Get best of the week

React Native: novo marco no desenvolvimento móvel do Shopify

Ou por que o Shopify está mudando para o React Native.

Após muitos anos de desenvolvimento móvel nativo, decidimos avançar a todo vapor no desenvolvimento de aplicativos móveis no React Native. Será claro abaixo que essa decisão não foi fácil para nós.

No final de cada trimestre, vemos a mesma imagem: a maioria de nossos clientes faz compras através de dispositivos móveis (no terceiro trimestre do ano passado, sua participação era de 71%). Black Friday e Cyber ​​Monday são os dias mais quentes para nossos vendedores, e a atividade dos clientes nos dias de hoje está fora de cogitação. Este ano, durante o período de desconto, os parceiros do Shopify registraram um aumento de 3% nos pedidos de dispositivos móveis, e a participação média dessas compras representou 69% do número total de transações .

Então, por que decidimos mudar para o React Native? E porque agora? O que acontecerá com nosso desenvolvimento móvel nativo agora? Responder rápida e brevemente a essas perguntas não funcionará. Vamos começar com o plano de fundo.

Shopify Mobile Development - 2019


Desenvolvemos uma prática especial no Shopify - para confiar em tecnologias relativamente jovens que estão em um estágio inicial de desenvolvimento ou estão apenas ganhando popularidade. Isso nos ajuda a crescer mais rápido.

Normalmente, nos concentramos em várias tecnologias e contamos principalmente com elas no desenvolvimento. Isso fornece vários pontos de crescimento:

  • formamos uma experiência única em um pequeno conjunto de tecnologias (e geralmente fazemos uma contribuição significativa ou até importante para seu desenvolvimento);
  • cada solução tecnológica tem seus gargalos, sutilezas, e nos aprofundamos neles;
  • , , ;.
  • .

Ao mesmo tempo, constantemente aparecem novas tecnologias que nos dão oportunidades para aumentar gradualmente a eficiência dos engenheiros ou a produtividade de nossos produtos. Estamos experimentando muito para abrir novas possibilidades e traduzir melhorias quantitativas em qualitativas, mas, finalmente, não estamos introduzindo todas as nossas conquistas no principal processo técnico.

Quando introduzimos tecnologias, idiomas ou estruturas jovens, tentamos calcular a probabilidade de sucesso ou fracasso. Em vez de evitar riscos, estudamos, pesquisamos e avaliamos vários riscos em detalhes, com base nas características individuais de nossos projetos. Como costuma acontecer, oportunidades ocultas podem ser encontradas na zona de risco. E pensamos principalmente em como neutralizar os aspectos negativos do risco:

  • , ?
  • , , ?
  • , () ?

O Ruby on Rails estava no estágio inicial de desenvolvimento e ainda não tomou forma como uma estrutura completa, quando em 2004 Toby (nosso CEO) se tornou o principal participante do projeto de código aberto. Por muitos anos, o Ruby on Rails tem sido considerado uma solução frívola e ineficiente . Mas escolher e explorar essa tecnologia em um estágio tão inicial de desenvolvimento deu ao Shopify uma vantagem competitiva, embora fosse uma escolha impopular. Usando Ruby on Rails, a equipe conseguiu criar produtos rapidamente e atrair recursos. Afinal, era uma tecnologia moderna, com um nível mais alto de abstração do que as linguagens de programação tradicionais e os frameworks que existiam na época. Da mesma forma, Paul Graham disse uma vezsobre como ele decidiu usar o Lisp para criar a Viaweb. Atualmente, 6 das 10 empresas mais caras que o Y Combinator usam Ruby on Rails (embora, novamente, a estrutura ainda não seja muito popular). Por outro lado, nenhuma das 10 empresas mais caras Y Combinator usa Java, que é considerado uma solução corporativa comprovada e bastante confiável.

Da mesma forma, há dois anos, o Shopify decidiu mudar para o Google Cloud.. Novamente, este é um empreendimento bastante arriscado para o segundo maior serviço de comércio eletrônico dos Estados Unidos (a partir de 2019) - realizar migração da nuvem para fora de seus próprios data centers em prol de um produto relativamente novo, o Google Kubernetes Engine. Vimos que a curva de valor agregado nos levou a focar no que realmente somos bons (isso está ajudando os negócios), permitindo que outras pessoas (neste caso o Google Cloud) realizem o trabalho duro de manter o equipamento funcionando condição, com garantia de capacidade, segurança, com atualização do sistema operacional etc.

Reagir nativo - o que é?


Em 2015, o Facebook anunciou e lançou o framework React Native de código aberto . Anteriormente, ele já era usado internamente para desenvolver seus aplicativos móveis. O React Native é uma estrutura para o desenvolvimento em várias plataformas de aplicativos móveis exibidos nativamente usando a biblioteca React js . Assim, torna possível usar a biblioteca js superior para criar a interface do usuário de aplicativos móveis nativos.

No Shopify, essa ideia (então, de certa forma, agora também) era cética, mas muitos a consideravam promissora. Portanto, o próximo evento do Shopify Hackdaysfoi inteiramente dedicado ao React Native. Embora a equipe tenha apreciado os benefícios da estrutura, decidimos que em 2015 não poderíamos implementar o aplicativo React Native, do qual poderíamos nos orgulhar mais tarde. Isso ocorreu principalmente devido a problemas de desempenho e à falta de suporte completo ao sistema operacional Android. Mas percebemos claramente que gostávamos do paradigma de Programação Reativa e do GraphQL . Além disso, após uma reunião com o React Native, desenvolvemos e criamos um renderizador para iOS. Em 2015, implementamos essas tecnologias em nossa pilha, mas não usamos o React Native para o desenvolvimento móvel em massa. Nossas primeiras experiências são escritas em detalhes aqui .

Até hoje, o Shopify teve o desenvolvimento móvel nativo como padrão. Criamos duas equipes, ferramentas móveis e fundações , focadas em iOS e Android, e também nos ajudaram a acelerar o processo de desenvolvimento. Apesar de terem apresentado bons resultados, parece-nos que o desenvolvimento se tornará mais eficaz se:

  • Usamos o poder do JavaScript e outras tecnologias da Web no desenvolvimento móvel;
  • introduzir o paradigma de programação reativa no desenvolvimento de aplicativos clientes;
  • combinaremos o desenvolvimento para iOS e Android no React Native em uma pilha tecnológica.

Como o React Native funciona?


O React Native permite criar aplicativos móveis exibidos em várias plataformas nativamente usando JavaScript. O React Native é semelhante ao React: também criamos declarativamente uma interface de usuário em JS com uma árvore de elementos da interface do usuário ou com um DOM virtual (VDOM), em termos do ReactJS. Se o ReactJS exibir elementos da interface em um navegador, o React Native converterá objetos VDOM em elementos visuais específicos da plataforma nativa para exibição em dispositivos móveis usando binders: componentes nativos são agrupados no React. Estamos interessados ​​apenas nas plataformas Android e iOS, mas há entusiastas interessados ​​em desenvolver o React Native para Windows, macOS e Apple tvOS.


O ReactJS interage com o navegador e o React Native interage com APIs móveis.

Quando não usamos o React Native?


Há situações em que a equipe do Shopify não usa o React Native para desenvolver aplicativos móveis. Em particular, se formos obrigados a:

  • iniciando o aplicativo no hardware antigo (CPU <1,5 GHz);
  • processamento sofisticado;
  • ultra alto desempenho;
  • muitos threads em execução em segundo plano.

Observe: as bibliotecas de baixo nível, incluindo vários SDKs de código aberto, permanecem completamente nativas. Podemos criar nossos próprios módulos nativos se quisermos estar em contato mais próximo com o hardware.

Por que estamos mudando para o React Native agora?


Temos três razões principais:

  1. Depois de adquirir o mercado Tictail (o serviço foi desenvolvido no React Native, de acordo com o princípio do mobile first) em 2018, vimos que tipo de desenvolvimento o React Native recebeu e em 2019 investimos em mais três projetos.
  2. O Shopify usa ativamente o React no desenvolvimento web, agora é hora de aplicar o nosso conhecimento no desenvolvimento de aplicativos móveis.
  3. Percebemos que a curva de desempenho subiu (por exemplo, o que podia antes e agora o que o Google Docs pode fazer em comparação com o Microsoft Office para desktop) e fizemos uma aposta no React Native a longo prazo - assim como acreditávamos em Ruby em Rails, Kubernetes e Rich Media.

Desenvolvimento móvel na Shopify em 2019


No Shopify, vendedores e compradores podem interagir de várias maneiras: via aplicativos da Web e móveis. No ano passado, nossas três equipes estavam testando o React Native e, como resultado, desenvolveram três aplicativos móveis: Chegada, Ponto de venda e Bússola.

Após nossos experimentos, fizemos as seguintes conclusões:

  • ao copiar o aplicativo Chegada para o React Native, a equipe descobriu que a produtividade dobrou em comparação com o desenvolvimento nativo, mesmo se você escrever apenas para uma plataforma;
  • testando a versão Android do aplicativo de ponto de venda com baixa energia, descobrimos que o aplicativo é executado com uma frequência de CPU mais baixa: 1.5GHz (escrito em React Native) versus 2GHz (desenvolvimento nativo);
  • Estimamos provisoriamente que a proporção de código independente de plataforma seria de ~ 80%; e ficamos surpresos quando, na realidade, ficou muito maior: 95% para o Chegada e 99% para o Compass.

Mas vale a pena fazer uma reserva: embora tenhamos decidido escrever novos aplicativos no React Native, isso não significa que reescreveremos todos os nossos aplicativos antigos.

Chegar


No final de 2018, decidimos reescrever um de nossos aplicativos clientes mais populares para React Native, Arrive . Este é um aplicativo iOS de alto desempenho e alta classificação com milhões de downloads. Escolhemos Chegar porque não possuímos sua versão Android. Então fomos conhecer os usuários de dispositivos Android. Agora, as versões iOS e Android são escritas no React Native com uma participação de 95% do código total entre plataformas.

No processo de reescrita, alcançamos os seguintes resultados:

  • ao executar a versão de plataforma cruzada para iOS, ocorrem menos falhas do que na versão nativa;
  • lançamos a versão para o sistema operacional Android;
  • Desenvolvedores móveis e não móveis puderam trabalhar no projeto.

Além disso, a equipe pôde experimentar um excelente método para executar rapidamente solicitações de recebimento de "trabalhos em andamento". Basta digitalizar o código QR do comentário do Github usando o telefone e o pacote JS do seu aplicativo é atualizado. Assim, cada vez que você pode atualizar instantaneamente o aplicativo e usar sua versão atual. Nossa estação de serviço descreveu recentemente esse processo no Twitter .

Ponto de venda


No início de 2019, realizamos um experimento de seis semanas em nosso aplicativo de ponto de venda (POS), produto emblemático, para ver se ele é um bom candidato à reescrita no React Native. Estudamos muito essa questão, pois nossos varejistas esperavam reduzir pela metade o tempo de resposta de nossa aplicação: o processo de atendimento ao cliente usando nossa aplicação deve ser fixado na memória muscular dos vendedores, e eles não devem se distrair com isso.

Para atender aos requisitos de nossos varejistas ao mesmo tempo e entender melhor o desenvolvimento do React Native para dispositivos POS, decidimos criar um novo aplicativo móvel nativo para iOS e escrever uma versão para o sistema operacional Android no React Native.

Alocamos duas equipes separadas para essas tarefas, e aqui está o porquê:

  1. Já tínhamos uma equipe com forte experiência em iOS, incluindo desenvolvedores de aplicativos POS nativos.
  2. Além do desempenho direto do aplicativo, queríamos poder testar nossa velocidade de desenvolvimento no React Native, comparando tudo isso com nosso padrão-ouro, ou seja, com o desenvolvimento nativo do iOS.
  3. Para atender aos requisitos de alto desempenho dos vendedores, decidimos fazer todas as atualizações de re-arquitetura do Facebook para o React Native (no entanto, verificou-se que isso não é crítico para o desempenho). Ao identificar equipes separadas para trabalhar em dois projetos, reduzimos os riscos associados à interrupção do plano de liberação.

Anunciamos o POS reescrito no Unite 2019 . Ambas as versões, iOS e Android no React Native, estarão disponíveis em 2020.

Bússola


O Spotify possui uma equipe Start que ajuda os clientes a iniciar seus próprios negócios. Antes de a empresa tomar uma decisão fundamental para desenvolver aplicativos móveis no React Native, essa equipe estudou o Flutter e o React Native em detalhes . A escolha recaiu sobre o React Native e agora eles têm versões beta dos aplicativos iOS - e Compass Android . Além disso, ~ 99% do código que eles têm em comum.

Os primeiros lançamentos serão lançados em três meses.

Desenvolvimento móvel no Shopify 2020 ++


Preparamos muitas coisas interessantes para 2020.
Vamos reescrever nossos aplicativos móveis nativos? Não. Embora essa decisão seja tomada por cada equipe de forma independente.
Vamos contratar desenvolvedores nativos? Sim muito !
Queremos nos tornar membros líderes da comunidade React Native, criar componentes específicos da plataforma e continuar a entender os meandros de cada plataforma. E isso requer uma forte experiência. Parece bom, certo?

Colaboração e código aberto


Acreditamos que o desenvolvimento de software é um jogo de equipe. Estamos envolvidos no desenvolvimento de web aberta, código aberto e outros padrões abertos.

Estamos contribuindo para o financiamento dos projetos da Software Mansion e Krzysztof Magera (co-fundador do React Native para Android) relacionados ao React Native.
Estamos colaborando com William Candillon (líder no processo de reativar o Native no canal do YouTube) em melhorias de arquitetura e desempenho.

Planejamos trabalhar em estreita colaboração com a equipe do React Native do Facebook na automação, criando bibliotecas de terceiros e supervisionando alguns dos módulos do projeto Lean Core.

Juntamente com o Discord, estamos trabalhando ativamente para preparar rapidamente uma versão de código-fonte aberto da biblioteca FastList for React Native (permite renderizar apenas os itens da lista que estão na área visível) e otimizá-la para o sistema operacional Android.

Nossos comandos de ferramentas e fundações para reagir nativo


Quando você confia na tecnologia e se aprofunda nela, deseja obter o máximo efeito dela. Para definir rapidamente metas e atingir essa meta, criamos dois tipos de equipes que ajudam outros funcionários da Shopify a serem produtivos. O primeiro tipo é a equipe de ferramentas, que ajuda na configuração, integração e implantação. O segundo tipo é a equipe de fundação, que lida com SDK, reutilização de código e código aberto. Em 2020, as duas equipes começaram a desenvolver o React Native.

Atualmente, o nosso popular aplicativo Shopify Ping, que permite conversar com centenas de milhares de clientes, está disponível apenas na versão iOS. Em 2020, trabalharemos em uma versão do sistema operacional Android usando o React Native em nossa filial em São Francisco, onde contratamos funcionários.

Em 2019, o Twitter lançou aplicativos da Web para desktop e dispositivos móveis usando uma tecnologia chamada React Native Web. O nome pode ser um pouco confuso, mas sua principal diferença é que essa tecnologia permite que você use a mesma pilha do React Native para desenvolver aplicativos da Web. Como resultado, o Facebook imediatamente perseguiu Nicholas Gallager , o principal desenvolvedor do projeto. Em 2020, nós da Shopify também realizaremos alguns experimentos com a React Native Web .

Source: https://habr.com/ru/post/undefined/

More articles:


All Articles