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:
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.