A experiência do desenvolvedor
Agora que já falei sobre os mini apps por si só, quero me concentrar na experiência do desenvolvedor para as várias plataformas de superapp. O desenvolvimento de mini apps em todas as plataformas acontece em IDEs fornecidos sem custo financeiro pelas plataformas de superapps. Embora haja mais, quero me concentrar nos quatro mais populares e em um quinto para comparação com o Quick App.
IDEs de miniapps
Assim como os superapps, a maioria das IDEs está disponível apenas em chinês. É importante instalar a versão em chinês e não uma versão em inglês (ou de outro país) que às vezes está disponível, já que ela pode não estar atualizada. Se você for um desenvolvedor do macOS, saiba que nem todas as IDEs são assinadas, o que significa que o macOS se recusa a executar o instalador. Você pode, por sua conta e risco, ignorar isso conforme descrito na ajuda da Apple.
Projetos iniciais de mini apps
Para começar rapidamente a desenvolver miniapps, todos os provedores de superapps oferecem apps de demonstração que podem ser baixados e testados imediatamente e que às vezes também são integrados aos assistentes de "Novo projeto" das várias IDEs.
- Demonstração do WeChat
- Demonstração do Alipay
- Demonstração do Baidu
- Demonstração da ByteDance
- Demonstração do Quick App
Fluxo de desenvolvimento
Depois de iniciar a IDE e carregar ou criar um mini app (de demonstração), a primeira etapa é sempre fazer login. Normalmente, basta ler um QR code com o superapp (em que você já fez login) gerado pela IDE. É muito raro precisar inserir uma senha. Depois de fazer login, o ambiente de desenvolvimento integrado reconhece sua identidade e permite que você comece a programar, depurar, testar e enviar seu app para análise. A seguir, você pode ver capturas de tela das cinco IDEs mencionadas no parágrafo acima.
Como você pode ver, os componentes fundamentais de todas as IDEs são muito semelhantes. Você sempre tem um editor de código baseado no Monaco Editor, o mesmo projeto que também alimenta o VS Code. Em todas as IDEs, há um depurador baseado no front-end do Chrome DevTools com algumas modificações. Saiba mais sobre isso em Depurador. Os IDEs por si só são implementados como apps NW.js ou Electron. Os simuladores nos IDEs são realizados como uma tag <webview> NW.js ou Electron <webview>, que, por sua vez, são baseadas em uma tag <webview> Chromium. Se você tiver interesse nos
internos do ambiente de desenvolvimento integrado, muitas vezes basta inspecioná-los com o Chrome DevTools usando o atalho
de teclado Control+Alt+I (ou
Command+Option+I no Mac).
<webview> do Electron.
Teste e depuração em simuladores e dispositivos reais
O simulador é comparável ao que você conhece do modo dispositivo do Chrome DevTools. É possível simular diferentes dispositivos Android e iOS, mudar a escala e a orientação do dispositivo, além de simular vários estados de rede, pressão de memória, um evento de leitura de código de barras, encerramento inesperado e modo noturno.
Embora o simulador integrado seja suficiente para ter uma ideia aproximada de como o app se comporta, o teste no dispositivo, como em apps da Web comuns, é insubstituível. Testar um mini app em desenvolvimento é tão fácil quanto ler um QR code. Por exemplo, no ByteDance DevTools, a leitura de um QR code gerado dinamicamente pelo IDE
com um dispositivo real leva a uma versão hospedada na nuvem do mini app que pode ser testada imediatamente
no dispositivo. Para a ByteDance, o URL por trás do QR code (example) redireciona para uma página hospedada (example) que contém links com esquemas de URI especiais, como snssdk1128://, para visualizar o mini app nos vários superapps da ByteDance, como Douyin ou Toutiao (exemplo).
Outros provedores de superapp não passam por uma página intermediária, mas abrem a prévia diretamente.
Um recurso ainda mais interessante é a depuração remota de prévia baseada na nuvem. Depois de ler um QR code especial gerado pelo IDE do Likewise, o mini app é aberto no dispositivo físico, com uma janela do Chrome DevTools em execução no computador para depuração remota.
Debugger
Depuração de elementos
A experiência de depuração de miniapps é muito familiar para quem já trabalhou com o Chrome DevTools. No entanto, há algumas diferenças importantes que tornam o fluxo de trabalho adequado para mini apps. Em vez do painel "Elementos" do Chrome DevTools, os IDEs de mini apps têm um painel personalizado adaptado ao dialeto específico de HTML. Por exemplo, no caso do WeChat, o painel é chamado de Wxml, que significa WeiXin Markup Language. No Baidu DevTools, ele é chamado de Swan Element. O ByteDance DevTools chama isso de Bxml. O Alipay chama de AXML, e o Quick App se refere ao painel simplesmente como UX. Vou falar sobre essas linguagens de marcação mais tarde.
<image> com o WeChat DevTools.
Elementos personalizados em segundo plano
A inspeção da WebView em um dispositivo real usando about://inspect/#devices
revela que o WeChat DevTools estava ocultando a verdade de propósito. Onde o WeChat DevTools mostrou um
<image>, o que estou vendo é um elemento personalizado chamado <wx-image> com um <div>
como único filho. É interessante notar que esse elemento personalizado não usa o
Shadow DOM. Mais detalhes sobre esses componentes adiante.
<image> com o WeChat DevTools revela que ele é, na verdade, um elemento personalizado <wx-image>.
Depuração de CSS
Outra diferença é a nova unidade de comprimento rpx para pixel responsivo nos vários dialetos do CSS. Saiba mais sobre essa unidade mais adiante. O WeChat DevTools usa unidades de comprimento CSS independentes de dispositivo para tornar o desenvolvimento para diferentes tamanhos de dispositivo mais intuitivo.
200rpx 0) de uma visualização com o WeChat DevTools.
Auditoria de desempenho
O desempenho é fundamental para os mini apps. Por isso, não é surpresa que o WeChat DevTools e alguns outros DevTools tenham uma ferramenta de auditoria integrada inspirada no Lighthouse. As áreas de foco das auditorias são Total, Performance, Experiência e Práticas recomendadas. A visualização do ambiente de desenvolvimento integrado pode ser personalizada. Na captura de tela abaixo, ocultei temporariamente o editor de código para ter mais espaço na tela para a ferramenta de auditoria.
Simulação de API
Em vez de exigir que o desenvolvedor configure um serviço separado, a simulação de respostas da API faz parte diretamente do WeChat DevTools. Em uma interface fácil de usar, o desenvolvedor pode configurar endpoints de API e as respostas simuladas desejadas.
Agradecimentos
Este artigo foi revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.