9

Ouvindo um podcast sobre tecnologias no NuBank, o CTO e o Principal Engineer comentam que eles utilizam Java, Kotlin, React Native e Flutter para desenvolver o aplicativo Android e tudo gera um único binário. Que pelo que entendi é o código final do único app deles na Play Store.

Minha duvida é: como isso é feito? Como isso funciona?

Pois entre Java, Kotlin, React Native e Flutter, somente o Java e Kotlin possuem compatibilidade.

Para quem quiser ouvir o que é dito pelo CTO ouça a partir de 01:02:30 deste PodCast.

5
  • 5
    Isso deve ser uma gambiarra fenomenal :)
    – Maniero
    7/06/2019 às 19:22
  • 1
    A ideia de utilizar mais de uma tecnologia para um aplicativo é para que não precise refazer completamente um App caso queira implementar recursos novos que o mercado vai proporcionando. Imagine ter que recriar totalmente um Facebook sempre que decidirem testar outra linguagem? Com a possibilidade usar mais de uma pode ir migrando aos poucos e não considero isso gambiarra de modo algum. 7/06/2019 às 21:08
  • @Leonardo Paim o que o Maniero diz é que como eles fazem devem ser gambiarra, pois são linguagens totalmente diferentes com arquiteturas diferentes em um único app. No exemplo que você quis dar do Facebook, o app deles é somente em uma dessas arquiteturas no caso o React Native, o que usa várias tecnologias são os micro serviços por traz, aí eles podem ser tecnologias distintas mas também são aplicações distintas. A minha dúvida é como em um único app Android juntar todas essas tecnologias citadas. 8/06/2019 às 2:34
  • 3
    @AlissonMarqui entendo seu ponto de vista e respeito completamente. O Facebook que citei é apenas um exemplo. O que quis mostrar é que um app do tamanho do Facebook não da pra ficar recriando do zero sempre que o mercado solicitar. Antigamente apps eram apenas nativos, depois vieram os apps baseados em webviews e agora surgiram essas empolgantes tecnologias como React Native e Flutter... O Facebook existiu em boa parte desse período de evolução e precisou ir se adaptando. Por isso defendo muito a evolução gradual, no caso seria ir inserindo aos poucos o "novo" até o app ficar completo. 8/06/2019 às 19:36
  • 1
    A princípio parece gambiarra, mas é algo normal nessa área em que se utiliza frameworks com o objetivo de compilar para diversas plataformas. Imagine que você tenha várias classes do seu app escritas em Java e queira migrar somente a parte "visual" para Flutter, por conta da facilidade no desenvolvimento. Você não precisa reescrever sua aplicação inteira com Dart, pode utilizar uma feature de "canais de comunicação" do Flutter e chamar classes/métodos do Java por meio do Dart facilmente. 20/06/2019 às 3:04

1 Resposta 1

4

Existem múltiplas formas de fazer isso, e o assunto me parece um pouco com micro frontends, mas mobile e um tanto mais complexo.

React Native ou Flutter + Nativo

Tanto o Flutter quanto o React Native, que são frameworks para escrever apps nativos, possuem suporte a código especifico de plataforma. Isto é, escrever React Native/Flutter com módulos em Swift/Objective-C ou Java/Kotlin.

Isso é importante pois nem todas as APIs dos sistemas mobile estão disponíveis nos frameworks (React Native/Flutter). O React Native chama isso de Native Modules, e o Flutter de Platform-specific Code. Você pode chamar funções do nativo dentro do framework e vice-versa.

Pode ser que um app precise acessar uma API da plataforma nativa que o React Native ainda não possua um módulo correspondente. Talvez você quer reutilizar algum código Objective-C, Swift ou C++ sem ter que reimplementá-lo em JavaScript, ou escrever algum código performático, multi-threaded como processamento de imagem, um banco de dados ou qualquer extensão mais avançada. (React Native Guides, iOS, Native Modules)

No React, a interoperabilidade entre plataformas é feita a partir do RCTBridgeModule, que é literalmente a ponte entre nativo e React Native. Os módulos criados em código nativo são expostos ao framework como funções JavaScript.

#import "CalendarManager.h"
#import <React/RCTLog.h>

@implementation CalendarManager

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)
{
  RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}

@end
import {NativeModules} from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

Também há suporte a eventos, assincronismo e multi-threading.

Já no Flutter, esse compartilhamento de código entre plataformas, é feito através de messaging. As mensagens são disparadas pelo app nativo para o framework e vice-versa. São codificadas em JSON e mapeadas no sistema de tipos de cada plataforma. As mensagens são recebidas e respondidas assincronamente, e tomam vantagem do assincronismo do Dart (Future).

Java + Kotlin

Como foi citado na pergunta, Java e Kotlin são interoperáveis sem maiores problemas.

import java.util.*

fun demo(source: List<Int>) {
    val list = ArrayList<Int>()
    // 'for'-loops work for Java collections:
    for (item in source) {
        list.add(item)
    }
    // Operator conventions work as well:
    for (i in 0..source.size - 1) {
        list[i] = source[i] // get and set are called
    }
}

Flutter + React Native

Até agora sabemos como comunicar React Native com nativo ou Flutter com nativo. Mas e React Native com Flutter, como no Nubank?

A estratégia do Nubank é migrar tudo para Flutter, como foi citado no podcast da pergunta. Portanto, pela escala do roxinho, essa migração tem que ser gradual. Por isso juntar React Native com Flutter, até extinguir o React Native do codebase deles.

O Flutter possui suporte a ser incorporado em aplicativos já existentes. Porém, essa é uma funcionalidade que está em fase preview. O Flutter chama isso de Add-To-App. De forma simples, é como incorporar uma view do Flutter dentro de um app nativo. Ao invés de criar um app Flutter como normalmente, cria-se somente um módulo.

Aqui está um exemplo completo de um app com Flutter Add-To-App. Ainda é algo totalmente experimental e que existem muitos problemas (vendo as Issues do GitHub).

Conclusão

Bem, vimos que é possível termos uma arquitetura similar ao do Nubank. Se você tem uma base criada em React Native, você pode criar módulos específicos para iOS (escritos em Swift, Objective-C ou C++) e Android (escritos em Java ou Kotlin) e chamá-los dentro do JavaScript. Pode também incorporar views do Flutter dentro do React Native, utilizando novamente Native Modules do RN e Add-To-App do Flutter.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .