L'esperienza di sviluppo
Ora che ho parlato delle mini app in sé, voglio concentrarmi sull'esperienza degli sviluppatori per le varie piattaforme di super app. Lo sviluppo di mini app su tutte le piattaforme avviene in IDE forniti senza costi dalle piattaforme di super app. Anche se ce ne sono altri, voglio concentrarmi sui quattro più popolari e su un quinto per il confronto con Quick App.
IDE per mini app
Come le super app, la maggior parte degli IDE è disponibile solo in cinese. Devi assicurarti di installare la versione cinese e non una versione inglese (o estera) a volte disponibile, poiché potrebbe non essere aggiornata. Se sei uno sviluppatore macOS, tieni presente che non tutti gli IDE sono firmati, il che significa che macOS si rifiuta di eseguire il programma di installazione. Puoi, a tuo rischio e pericolo, aggirare questo problema come descritto nella Guida di Apple.
Progetti iniziali di mini app
Per iniziare rapidamente a sviluppare mini app, tutti i fornitori di super app offrono app demo che possono essere scaricate e testate immediatamente e che a volte sono integrate anche nelle procedure guidate "Nuovo progetto" dei vari IDE.
Flusso di sviluppo
Dopo aver avviato l'IDE e caricato o creato una mini app (demo), il primo passaggio è sempre l'accesso. In genere, devi solo scansionare un codice QR con la super app (a cui hai già eseguito l'accesso) generato dall'IDE. Molto raramente è necessario inserire una password. Una volta eseguito l'accesso, l'IDE conosce la tua identità e ti consente di iniziare a programmare, eseguire il debug, testare e inviare la tua app per la revisione. Di seguito puoi vedere gli screenshot dei cinque IDE menzionati nel paragrafo precedente.
Come puoi vedere, i componenti fondamentali di tutti gli IDE sono molto simili. Hai sempre a disposizione un editor di codice basato su Monaco Editor, lo stesso progetto che alimenta anche VS Code. In tutti gli IDE è presente un debugger
basato sul frontend di Chrome DevTools con
alcune modifiche, di cui parleremo più avanti (vedi Debugger). Gli IDE in sé sono
implementati come app NW.js o Electron,
i simulatori negli IDE sono realizzati come
tag NW.js <webview> o
tag Electron <webview>, che a loro volta si basano su
un tag Chromium <webview>. Se ti interessano
i dettagli interni dell'IDE, spesso puoi semplicemente esaminarli con Chrome DevTools utilizzando la scorciatoia da tastiera
Ctrl+Alt+I (o
Command+Option+I su Mac).
<webview> Electron.
Test e debug su simulatore e dispositivo reale
Il simulatore è paragonabile alla modalità dispositivo di Chrome DevTools. Puoi simulare diversi dispositivi Android e iOS, modificare la scala e l'orientamento del dispositivo, ma anche simulare vari stati di rete, pressione della memoria, un evento di lettura di codici a barre, interruzione imprevista e modalità buio.
Anche se il simulatore integrato è sufficiente per avere un'idea approssimativa del comportamento dell'app, i test sul dispositivo, come per le normali app web, sono insostituibili. Testare una mini app in fase di sviluppo è semplice: basta
scansionare un codice QR. Ad esempio, in ByteDance DevTools, la scansione di un codice QR generato dinamicamente dall'IDE
con un dispositivo reale porta a una versione della mini app ospitata sul cloud che può essere immediatamente
testata sul dispositivo. Per ByteDance, l'URL dietro il codice QR
(example) reindirizza a una pagina ospitata
(example),
che contiene link con schemi URI speciali come, ad esempio, snssdk1128://, per visualizzare l'anteprima della mini
app nelle varie super app ByteDance come Douyin o Toutiao
(ecco un esempio).
Altri fornitori di super app non passano attraverso una pagina intermedia, ma aprono direttamente l'anteprima.
Una funzionalità ancora più interessante è il debug remoto dell'anteprima basato sul cloud. Dopo aver scansionato un codice QR speciale generato da IDE, la mini app si apre sul dispositivo fisico, con una finestra di Chrome DevTools in esecuzione sul computer per il debug remoto.
Debugger
Debug degli elementi
L'esperienza di debug delle mini app è molto familiare a chiunque abbia mai lavorato con Chrome DevTools. Tuttavia, esistono alcune differenze importanti che rendono il flusso di lavoro personalizzato per le mini app. Anziché il riquadro Elementi di Chrome DevTools, gli IDE delle mini app hanno un riquadro personalizzato creato appositamente per il dialetto HTML specifico. Ad esempio, nel caso di WeChat, il riquadro si chiama Wxml, che sta per WeiXin Markup Language. In Baidu DevTools, si chiama Swan Element. ByteDance DevTools chiama Bxml. Alipay lo chiama AXML e Quick App fa riferimento al pannello semplicemente come UX. Approfondirò questi linguaggi di markup più avanti.
<image> con WeChat DevTools.
Elementi personalizzati in dettaglio
L'ispezione di WebView su un dispositivo reale tramite about://inspect/#devices
rivela che WeChat DevTools nascondeva deliberatamente la verità. Dove WeChat DevTools mostrava un
<image>, l'elemento che sto guardando è un elemento personalizzato chiamato <wx-image> con un <div>
come unico elemento secondario. È interessante notare che questo elemento personalizzato non utilizza
Shadow DOM. Scopri di più su
questi componenti più avanti.
<image> con WeChat DevTools rivela che si tratta in realtà di un elemento personalizzato <wx-image>.
Debug CSS
Un'altra differenza è la nuova unità di lunghezza rpx per i pixel adattabili nei vari dialetti di CSS
(maggiori informazioni su questa unità in seguito). WeChat DevTools utilizza unità di lunghezza CSS indipendenti dal dispositivo per
rendere più intuitivo lo sviluppo per dispositivi di dimensioni diverse.
200rpx 0) di una visualizzazione con WeChat DevTools.
Verifica del rendimento
Le prestazioni sono al centro delle mini app, quindi non sorprende che WeChat DevTools e altri DevTools abbiano uno strumento di controllo integrato ispirato a Lighthouse. Le aree di interesse degli audit sono totale, rendimento, esperienza e best practice. La visualizzazione dell'IDE può essere personalizzata. Nello screenshot riportato di seguito ho nascosto temporaneamente l'editor di codice per avere più spazio sullo schermo per lo strumento di controllo.
Simulazione API
Anziché richiedere allo sviluppatore di configurare un servizio separato, la simulazione delle risposte API fa direttamente parte di WeChat DevTools. Tramite un'interfaccia facile da usare, lo sviluppatore può configurare gli endpoint API e le risposte simulate desiderate.
Ringraziamenti
Questo articolo è stato rivisto da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.