- O TikTok (ByteDance) criou uma alternativa ao React Native mais rápida e mais fluida
- Lynx é uma família de tecnologias que ajuda a criar UI nativa usando tecnologias web
- Com uma única base de código, é possível atender a várias plataformas, como mobile e web
- Oferece programação de UI orientada a desempenho e tooling baseado em Rust para apps de grande escala, como o TikTok
- Para superar os limites do desenvolvimento cross-platform tradicional, foi decidido abrir o código
Entrega de apps nativos de grande escala e alta velocidade
- Para usuários de apps mobile, uma experiência não nativa gera uma percepção negativa
- Tela em branco, atraso de 0,1 segundo em animações e UI inconsistente reduzem a confiança
- Continuar oferecendo suporte a várias plataformas enquanto se constrói a mesma experiência ainda é um problema difícil
- O Lynx oferece suporte a várias plataformas com uma única base de código, reduzindo tempo e custo de desenvolvimento
- O TikTok adotou o Lynx de forma gradual e obteve resultados bem-sucedidos
- O Lynx é usado em várias plataformas, como TikTok Studio, Shop e LIVE
- O Lynx também foi usado em grandes eventos, como Disney100 e Met Gala
Inspirando a comunidade web e impulsionando seu crescimento
- A plataforma web foi originalmente projetada para documentos, mas evoluiu gradualmente para uma plataforma de desenvolvimento de apps
- PhoneGap (Cordova) e React Native são exemplos pioneiros que conectaram tecnologias web e UI nativa
- O Lynx mantém os pontos fortes das tecnologias web e, ao mesmo tempo, oferece um modelo otimizado para desenvolvimento de apps por meio de restrições e extensões claras
- Conformidade com tecnologias web: suporte a markup e CSS
- Extensão e diferenciação: aplicação de intenções de design claras, diferentes da web
Design baseado em markup e CSS
- O Lynx preserva a familiaridade do modo de desenvolvimento web
- Suporte a animações CSS e efeitos de transição
- Suporte a seletores CSS e variáveis para configuração de temas
- Suporte a efeitos visuais modernos de CSS, como clipping e masking
Uso eficiente da main thread
- Processa os scripts do usuário dividindo-os em dois runtimes
- Runtime da main thread: baseado em PrimJS (engine JavaScript) para renderização inicial da UI e processamento de eventos prioritários
- Runtime em background: executa o código principal do usuário
- Oferece dois recursos principais
- Instant First-Frame Rendering (IFR): renderização imediata do primeiro frame → elimina telas em branco
- Main-Thread Scripting (MTS): processa eventos de alta prioridade com fluidez
- UIs baseadas em Lynx oferecem, em média, desempenho de execução 2 a 4 vezes mais rápido
Lynx como open source
- Lynx é desenvolvido pela ByteDance e amplamente usado no TikTok
- O TikTok pretende apoiar o open source do Lynx e contribuir para o fortalecimento da tecnologia, a ativação da comunidade e o crescimento do ecossistema
Popularização da tecnologia cross-platform
- O desenvolvimento cross-platform tradicional foi liderado por algumas empresas principais
- O Lynx não oferece uma solução única, mas uma meta-infraestrutura → permitindo abordagens diversas
- ReactLynx: suporta componentização no estilo React e UI declarativa com base no Lynx
- Rspeedy (bundler baseado em Rust) → suporte a builds rápidos e module federation
- O Lynx não depende de um framework específico nem de um backend de renderização específico
- Inspirado por projetos como Chromium, Flutter e React Native
- É possível rodar o Lynx no navegador → expansão para desktop, TV, IoT etc.
Um novo começo
- O Lynx já está em uso em produção e foi lançado como versão 3.x
- O processo de desenvolvimento será tornado público de forma transparente por meio do open source
- Componentes adicionais, renderizador gráfico, frameworks etc. serão divulgados futuramente
- A ideia é, em colaboração com a comunidade open source, superar os limites do desenvolvimento cross-platform
- Feedback e contribuições da comunidade são bem-vindos
3 comentários
Parece que usar o Lynx Explorer pré-compilado seria algo apenas para a etapa de desenvolvimento. Na prática, entendo que o processo de compilar o Lynx Explorer exige esforço.
Tenho bastante interesse em React-Native, então também fiquei curioso sobre esse aqui.
O conteúdo acima foi retirado da apresentação oficial Lynx: Unlock Native for More.