Mini app DevTools

Thomas Steiner

L'esperienza degli sviluppatori

Ora che ho trattato le mini app di per sé, vorrei concentrarmi sull'esperienza degli sviluppatori per le varie piattaforme di super-app. Lo sviluppo minimo di app su tutte le piattaforme avviene negli IDE forniti senza costi dalle piattaforme super-app. Anche se ce ne sono altri, voglio concentrarmi sui quattro più popolari e un quinto su App rapida a scopo di confronto.

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 a volte disponibile in inglese (o all'estero), in quanto 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, ignorare questo passaggio come indicato nell'aiuto di Apple.

Progetti di app iniziali per mini app

Per iniziare rapidamente con lo sviluppo di mini app, tutti i super provider di app offrono app demo che possono essere scaricate e testate immediatamente e a volte anche integrate nelle procedure guidate "Nuovo progetto" dei vari IDE.

Flusso di sviluppo

Dopo aver avviato l'IDE e aver caricato o creato una mini app (demo), il primo passaggio è sempre effettuare l'accesso. Di solito basta scansionare un codice QR con la super app (a cui hai già effettuato l'accesso) generata dall'IDE. Molto raramente, è necessario inserire una password. Dopo aver eseguito l'accesso, l'IDE conosce la tua identità e ti consente di iniziare a programmare, eseguire il debug, testare e inviare l'app per la revisione. Di seguito puoi vedere gli screenshot dei cinque IDE menzionati nel paragrafo sopra.

Finestra dell'applicazione WeChat DevTools che mostra il simulatore, l'editor di codice e il debugger.
WeChat DevTools con simulatore, editor di codice e debugger.
Finestra dell'applicazione Alipay DevTools in cui si vede l'editor di codice, il simulatore e il debugger.
Alipay DevTools con editor di codice, simulatore e debugger.
Finestra dell'applicazione Baidu DevTools in cui si vede il simulatore, l'editor di codice e il debugger.
Baidu DevTools con simulatore, editor di codice e debugger.
Finestra dell'applicazione ByteDance DevTools che mostra il simulatore, l'editor di codice e il debugger.
ByteDance DevTools con simulatore, editor di codice e debugger.
Finestra dell'applicazione Quick App DevTools con editor di codice, simulatore e debugger.
DevTools per app rapida con editor di codice, simulatore e debugger.

Come puoi vedere, i componenti fondamentali di tutti gli IDE sono molto simili. Avrai sempre un editor di codice basato su Monaco Editor, lo stesso progetto su cui si basa anche VS Code. In tutti gli IDE è presente un debugger basato sul frontend di Chrome DevTools con alcune modifiche e ulteriori modifiche in seguito (vedi Debugger). Gli IDE in sé vengono implementati come app NW.js o Electron, mentre i simulatori negli IDE vengono realizzati come tag <webview> NW.js o tag Electron <webview>, che a loro volta si basano su un tag <webview> di Chromium. Se ti interessano gli elementi interni dell'IDE, spesso puoi ispezionarli semplicemente con Chrome DevTools con la scorciatoia da tastiera Ctrl+Alt+I (o Comando+Opzione+I su Mac).

Chrome DevTools utilizzato per esaminare gli strumenti DevTools di Baidu che mostrano il tag WebView del simulatore nel riquadro Elementi di Chrome DevTools.
L'analisi di Baidu DevTools con Chrome DevTools rivela che il simulatore è realizzato come un tag <webview> Electron.

Test e debug del simulatore e di dispositivi reali

Il simulatore è alla pari con la modalità dispositivo di Chrome DevTools. Puoi simulare diversi dispositivi Android e iOS, modificare la bilancia e l'orientamento del dispositivo, ma anche simulare vari stati di rete, pressione della memoria, un evento di lettura di codice a barre, terminazioni impreviste e modalità Buio.

Per quanto il simulatore integrato sia sufficiente per avere un'idea approssimativa del comportamento dell'app, i test sul dispositivo, come con le normali app web, sono insostituibili. Per testare una mini app in fase di sviluppo basta una scansione del 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 nel cloud che può essere immediatamente testata sul dispositivo. Per ByteDance funziona in questo modo che l'URL dietro il codice QR (esempio) reindirizza a una pagina ospitata (esempio), contenente link con schemi URI speciali come, ad esempio, snssdk1128://, per visualizzare l'anteprima della mini app sulle varie super app ByteDance come Douyin o Toutiao (ecco un esempio). Altri fornitori di super app non passano per una pagina intermedia, ma aprono direttamente l'anteprima.

ByteDance DevTools mostra un codice QR che l&#39;utente può scansionare con l&#39;app Douyin per vedere la mini app corrente sul proprio dispositivo.
ByteDance DevTools mostra un codice QR che l'utente può scansionare con l'app Douyin per testare immediatamente il dispositivo.
Pagina di destinazione intermedia per visualizzare l&#39;anteprima di una mini app ByteDance in varie super app dell&#39;azienda, aperta su un normale browser desktop per il reverse engineering del processo.
Pagina di destinazione di ByteDance intermedia per visualizzare l'anteprima di una mini app (aperta in un browser desktop per mostrare il flusso).

Una funzionalità ancora più interessante è il debug remoto delle anteprime basato su cloud. Dopo aver semplicemente eseguito la scansione di un codice QR speciale generato dall'IDE, la mini app si apre sul dispositivo fisico, con una finestra Chrome DevTools in esecuzione sul computer per il debug remoto.

Un cellulare che esegue una mini app con parti dell&#39;UI evidenziate dal debugger di ByteDance DevTools in esecuzione su un laptop che la ispeziona.
Esegui il debug remoto in modalità wireless di una mini app su un dispositivo reale con ByteDance DevTools.

Debugger

Debug degli elementi

L'esperienza di debug delle mini app è familiare a chiunque abbia lavorato con Chrome DevTools. Tuttavia, esistono alcune differenze importanti che rendono il flusso di lavoro su misura per le mini app. Al posto del riquadro Elementi di Chrome DevTools, gli IDE delle mini app hanno un riquadro personalizzato in base al loro particolare dialetto HTML. Ad esempio, nel caso di WeChat, il riquadro è denominato Wxml, acronimo di WeiXin Markup Language. In Baidu DevTools è chiamato Elemento Swan. ByteDance DevTools la chiama Bxml. Alipay lo chiama AXML, mentre Quick App fa riferimento al pannello semplicemente come UX. Approfondirò questi linguaggi di markup più avanti.

Ispezione di un&#39;immagine con il riquadro &quot;Wxml&quot; di WeChat DevTools. Mostra che il tag in uso è un tag &quot;immagine&quot;.
Ispezione di un elemento <image> con WeChat DevTools.

Elementi personalizzati

L'ispezione di WebView su un dispositivo reale tramite about://inspect/#devices rivela che WeChat DevTools nascondeva deliberatamente la verità. Dove WeChat DevTools mostrava <image>, quello che sto esaminando è un elemento personalizzato chiamato <wx-image> con <div> come unico figlio. È interessante notare che questo elemento personalizzato non utilizza Shadow DOM. Scoprirai di più su questi componenti più avanti.

Ispezione di una mini app WeChat in esecuzione su un dispositivo reale con Chrome DevTools. Quando WeChat DevTools ha segnalato che sto esaminando un tag &quot;image&quot;, Chrome DevTools rivela che in realtà ho a che fare con un elemento personalizzato &quot;wx-image&quot;.
L'ispezione di un elemento <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 del CSS (scopri di più su questa unità più avanti). WeChat DevTools utilizza unità di lunghezza CSS indipendenti dal dispositivo per rendere più intuitivo lo sviluppo per dispositivi di dimensioni diverse.

Ispezione di una vista con una spaziatura interna superiore e inferiore specificata di &quot;200rpx&quot; in WeChat DevTools.
Ispezione della spaziatura interna specificata nei pixel adattabili (200rpx 0) di una vista con WeChat DevTools.

Controllo delle prestazioni

Le prestazioni sono un aspetto centrale per le mini app, quindi non sorprende che WeChat DevTools e alcuni altri DevTools abbiano uno strumento di controllo integrato ispirato a Lighthouse. Le aree principali degli audit sono Totale, Prestazioni, 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.

Esecuzione di un controllo delle prestazioni con lo strumento di controllo integrato. I punteggi mostrano le metriche Totale, Prestazioni, Esperienza e Best practice, ciascuna 100 su 100 punti.
Lo strumento di controllo integrato in WeChat DevTools che mostra dati totali, prestazioni, esperienza e best practice.

simulazione dell'API

Anziché richiedere allo sviluppatore di configurare un servizio separato, la simulazione delle risposte dell'API fa parte direttamente di WeChat DevTools. Tramite un'interfaccia facile da usare, lo sviluppatore può impostare gli endpoint API e le risposte fittizie desiderate.

Configurazione di una risposta simulata per un endpoint API in WeChat DevTools.
Funzionalità di simulazione delle risposte API integrata di WeChat DevTools.

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.