BT

Combinando Angular 2 com o React Native

| por Abel Avram Seguir 7 Seguidores , traduzido por Diogo Carleto Seguir 31 Seguidores em 27 jun 2016. Tempo estimado de leitura: 2 minutos |

A arquitetura do Angular 2 torna possível renderizar uma aplicação com vários renderers incluindo até o React Native.

Na arquitetura do Angular 2, uma das decisões fundamentais foi a separação do framework em duas camadas. A primeira camada é o core, que lida com os componentes, diretivas, filtros, serviços, roteamento, detecção de mudanças, DI, I18n. A outra camada é o renderer, que lida com o DOM, CSS, animações, templates, componentes web, eventos customizados, etc.

O núcleo pode ser executado como processo separado, desacoplado da interface e executando de forma mais responsiva quando o núcleo tem uma série de processamentos a realizar. Mais sobre esta decisão pode ser encontrado no texto Angular 2 Rendering Architecture.

Tradicionalmente, a renderização de uma aplicação em AngularJS era realizada através do DOM dentro do navegador, mas agora é possível renderizar a aplicações através de outros renderers, incluindo os nativos para desktop ou dispositivos móveis ou até mesmo no servidor. O texto Rendering in Angular2 explica com mais detalhes como o Angular 2 pode usar diferentes renderers para realizar esta tarefa.

Esta separação da renderização da aplicação principal tem vários benefícios. Uma aplicação Angular 2 pode executar no Node.js, de maneira bastante rápida segundo Brad Green, diretor de engenharia no Google. "É possível executar o Photoshop neste ambiente, por que não?" E o Node.js fornece o que é necessário para acessar o sistema de arquivos, processos e hardware. O Angular 2 também pode executar no desktop através do Angular Electron ou no UWP da Microsoft.

Em dispositivos móveis, algumas opções para o Angular 2 são o Ionic 2, NativeScript ou React Native. Os desenvolvedores podem chamar todas as APIs e polyfills que o React Native fornece para acessar as funcionalidades nativa no iOS e Android, e quando for necessário, callbacks podem ser executados no Angular Zone. Similar ao desenvolvimento nativo para dispositivos móveis, mas com componentes diferentes dos fornecidos pelo HTML e CSS, de acordo com Marc Laval:

  • Componentes comuns: Image, Picker, RefreshControl, ScrollView, Switch, Text, TextInput, View, WebView;
  • Específicos para Android: DrawerLayout, PagerLayout, ProgressBar, Toolbar;
  • Específicos para iOS: ActivityIndicator, DatePicker, MapView, Navigator, ProgressView, SegmentedControl, Slider, TabBar.

A estilização da aplicação é aplicada com o React Native Style e os gestos são manipulados com o Hammer.js. Marc Laval detalhou a arquitetura de uma aplicação com React Native + Angular 2 no seguinte gráfico:

ang2-react-native

E explicou:

Tecnicamente, uma aplicação React Native executa 3 threads. A principal é uma thread JS na qual qualquer código JS pode ser executado, controla toda a aplicação. As outras duas executam a parte nativa da aplicação: a principal thread de interface do usuário, e uma thread "sombra" na qual a medição e o layout ocorrem.

Os lados nativo e JS se comunicam em ambas as direções através de uma ponte. Isso significa que existe uma ponte de APIs JS para acessar as funcionalidades nativas (rede, geolocation, àrea de transferência, etc) e manipular os elementos nativos, e os eventos nativos são enviados de volta para o lado JS.

Em um futuro próximo, a equipe do Angular 2 planeja criar um novo módulo de animação, na qual a equipe do React Native pretende obter mais desempenho do lado nativo e o Facebook adicionará suporte ao UWP.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão
Comentários da comunidade

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dê sua opinião

Faça seu login para melhorar sua experiência com o InfoQ e ter acesso a funcionalidades exclusivas


Esqueci minha senha

Follow

Siga seus tópicos e editores favoritos

Acompanhe e seja notificados sobre as mais importantes novidades do mundo do desenvolvimento de software.

Like

Mais interação, mais personalização

Crie seu próprio feed de novidades escolhendo os tópicos e pessoas que você gostaria de acompanhar.

Notifications

Fique por dentro das novidades!

Configure as notificações e acompanhe as novidades relacionada a tópicos, conteúdos e pessoas de seu interesse

BT