Share
Negli ultimi mesi ho voluto immergermi in questo nuovo framework JavaScript da quando ho visto il suo evento di lancio nell'ottobre 2014. Famo.us include un motore di layout 3D open-source completamente integrato con un motore di animazione fisica 3D in grado di eseguire il rendering a DOM, Canvas o WebGL. In breve, è possibile ottenere prestazioni native da un'applicazione Web, in gran parte a causa del modo in cui Famo.us gestisce il rendering del suo contenuto.
Jenn Simmons del Podcast della piattaforma Web ha recentemente avuto l'amministratore delegato di Famo.us, Steve Newcomb, sul podcast per discutere le prestazioni mobili e la loro prossima modalità mista. Questo è stato un tempismo perfetto, visto che Microsoft aveva appena rilasciato ManifoldJS, uno strumento che ti consente di impacchettare la tua esperienza web come app native su Android, iOS e Windows. Volevo mettere queste due tecnologie alla prova.
In breve, volevo determinare se Famo.us avesse effettivamente prestazioni ottimali per dispositivi mobili, oltre a capire quanto fosse semplice il processo di confezionamento della mia applicazione Web come app per dispositivi mobili.
Il Web non è necessariamente noto per la creazione di applicazioni ad alte prestazioni, il che è un peccato perché è davvero in grado di sfocare applicazioni interattive veloci, ma purtroppo è stato afflitto dal DOM. Con tecnologie come la tela HTML5, WebGL e asm.js, il browser può davvero essere un campo di gioco per l'interattività all'avanguardia. Famo.us ha lo scopo di risolvere questo problema, aggirare il collo di bottiglia per la maggior parte delle applicazioni web, che è il DOM, e utilizzare WebGL e astrarre il tuo lavoro dal DOM. Maggiori informazioni su questo più tardi.
ManifoldJS mira a rendere la vita di uno sviluppatore mobile più semplice che mai utilizzando Web App Manifests, consentendo ai siti Web di dichiarare proprietà simili alle app. ManifoldJS usa quello standard per quelle piattaforme che lo supportano, ma ricade su Cordova per quelli che non lo fanno. Cordova è ottimo, ma il W3C considera anche il lavoro svolto su Mozilla (Firefox Open Web Apps), Google (Chrome Hosted App) e Microsoft (Windows 8 ha applicazioni web locali, Windows 10 si estende alle app Web ospitate). Con questo, possiamo ora avvolgere siti Web e creare applicazioni ibride che possono essere implementate nei vari negozi di app, sfruttando ancora molti aspetti nativi per ciascun dispositivo (contatti, calendario, archiviazione di file, giroscopio, GPS, ecc.).
Quando uniamo i due, possiamo creare applicazioni a velocità nativa che possono essere implementate in un certo numero di app store, utilizzando in gran parte una base di codice. Non esiste un proiettile d'argento per lo sviluppo mobile, ma questo certamente facilita il processo.
Famo.us ha una pagina Università, che fornisce un ottimo punto di partenza per capire come funziona il framework, oltre ad offrire alcuni esempi di progetti. Ho seguito tutti i corsi sul sito dell'Università e ne ho tratto una chiara comprensione del quadro. Hanno anche l'integrazione con altre librerie, come Angular, ma non ho ancora avuto il tempo di immergermici.
Successivamente, ho fatto clic sul link nell'angolo in alto a destra della pagina per scaricare il pacchetto di guide e due progetti di esempio. Questo è diverso da ciò che si trova sulla loro pagina GitHub.
Ho aperto il famoso-starter-kit cartella e navigato verso / di riferimento-tutorial e trovato cartelle per /Presentazione e /timbro. Slideshow è abbastanza intelligente; afferra le immagini da Picasa e le disegna sullo schermo come se fossero appena uscite da una fotocamera Polaroid. Puoi trovare una versione live di questo sul mio sito.
Fuori dagli schemi, tuttavia, non ha funzionato.
Ben presto mi resi conto di quale fosse il problema. Il loro campione puntava verso un URL Picasa non valido. Sono trascorsi più di sei mesi da quando il campione è stato rilasciato, quindi spero che a questo punto possa essere corretto, come immagino sarebbe un freno per un certo numero di persone che imparano a utilizzare questa struttura altrimenti fantastica.
Una volta modificato l'URL nel file SlideData.js, tutto andava bene. Quello che fa il progetto è prendere le immagini da un album di Picasa e disegnarle sullo schermo. Ad ogni clic, la fotocamera lascia cadere l'immagine corrente e una nuova viene espulsa dalla parte anteriore della fotocamera, e viene rapidamente esposta davanti agli occhi, insieme a qualche bella fisica applicata all'oscillazione avanti e indietro dell'immagine. Le istruzioni passo-passo per la creazione di questo progetto sono disponibili sul sito web di Famo.us.
C'è un altro progetto nel /timbro cartella, ma non sono riuscito a farlo funzionare. Puoi trovare il tutorial associato sul sito web di Famo.us, comunque, e almeno camminare attraverso il processo di costruzione di te stesso.
Non ho intenzione di passare troppo tempo a entrare nei dettagli di Famo.us qui, ma se vuoi davvero approfondire, c'è un articolo su Medium che offre una grande panoramica.
Dal sito web di Famo.us:
Interagire con il DOM è pieno di problemi di prestazioni. Famo.us astrae la gestione DOM [...] Se ispezioni un sito Web su Famo.us, noterai che il DOM è molto piatto: la maggior parte degli elementi sono fratelli l'uno dell'altro. [...] Gli sviluppatori sono abituati a nidificare elementi HTML perché è così il modo per ottenere il posizionamento relativo, il bubbling degli eventi e la struttura semantica. Tuttavia, c'è un costo per ognuno di questi: il posizionamento relativo provoca rallentamenti della pagina sull'animazione del contenuto; il bubbling degli eventi è costoso quando la propagazione degli eventi non viene gestita con attenzione; e la struttura semantica non è ben separata dal rendering visivo in HTML. Famo.us promette una ricca esperienza di 60 FPS, e per farlo, abbiamo dovuto aggirare queste inefficienze.
Utilizzando la primitiva CSS3 -webkit-transform: matrix3d, insieme con l'accelerazione hardware che offre, possiamo ottenere prestazioni di gran lunga superiori a quelle che potremmo fare se ci limitassimo ad armeggiare con il DOM. Ogni volta che tocchi il DOM, è costoso. Nicole Sullivan, un fantastico sviluppatore web noto per il suo lavoro con i CSS, offre un'eccellente spiegazione dei reflow e delle ridipinture all'interno del browser e su come possiamo evitare questi problemi. Fortunatamente, Famo.us sottrae tutto questo a noi.
Piuttosto che scrivere qualsiasi codice HTML, tutto il nostro codice Famo.us sarà fatto in JavaScript. Dai un'occhiata ad alcuni dei loro esempi su CodePen per capire bene quanto poco HTML in realtà scrivi (nessuno) e che aspetto abbia JavaScript. In un prossimo tutorial, mi tufferò molto più in profondità con Famo.us di quanto non faccia qui.
Ora stiamo parlando la mia lingua! Alcune applicazioni ad alte prestazioni nel browser!
Il processo di installazione di ManifoldJS è piuttosto semplice. Controlla la loro pagina GitHub per ulteriori informazioni. Jeff Burtoft ti guida anche attraverso il processo di creazione di un'app Web ospitata su ThisHereWeb.com.
Questo progetto continuerà ad evolversi nei prossimi mesi. Solo nell'ultima settimana ho visto diverse aggiunte. Sulle piattaforme che supportano in modo nativo applicazioni Web, come Windows 10, Chrome OS e Firefox OS, ManifoldJS creerà pacchetti nativi. Su piattaforme come iOS e Android, viene utilizzato Cordova, che consente a uno sviluppatore di scrivere un'applicazione Web ma accede comunque a molte delle funzionalità native di un dispositivo, tramite Cordova stessa o la community di plug-in attiva.
Jeff Burtoft spiega molto bene le applicazioni web ospitate sul suo blog e nella sua recente // BUILD / presentazione. Il video di // BUILD 2015 mostra esattamente cosa puoi fare con questa tecnologia.
Sto facendo questo tutorial da un MacBook Pro con Yosemite 10.10.3, Visual Studio Code come IDE e MAMP come mio server web locale. Quindi utilizzo Source Tree come strumento di scelta Git e ospito il mio codice open source su GitHub e verrà distribuito su iOS tramite Xcode.
Lo so, un Evangelista Tech di Microsoft che utilizza i prodotti Apple e che ti parla di strumenti open-source. In che mondo sta arrivando??
La prima cosa che ho fatto è stata scaricare i campioni di Famo.us dal loro sito web. Ho apportato le modifiche appropriate al loro file SlideData.js, come ho menzionato sopra, in modo che il mio progetto fosse in grado di inserire feed da Picasa. L'ho caricato su GitHub in modo da avere un campione che funzioni immediatamente. Guarda il sito live e vai su GitHub per scaricare il progetto di lavoro.
Successivamente, ho effettuato l'accesso ad Azure e ho creato un nuovo sito web. Puoi ottenere $ 200 di crediti di prova di Azure o contattarmi per un abbonamento gratuito a BizSpark per te o per la tua startup, che garantisce $ 150 al mese di web hosting.
Quindi indicherò questo nuovo sito Web di Azure al mio repository GitHub. Scott Hanselman spiega come farlo in pochi passaggi. Da lì, ho il controllo Azure sul mio repository GitHub per questo progetto e tutte le modifiche che spingo a quel repository vengono immediatamente rilevate da Azure e le ultime modifiche possono essere visualizzate sul sito Web e manifestare immediatamente il progetto.
In seguito, dobbiamo utilizzare ManifoldJS per "avvolgere" la nostra app Web in modo da poterla distribuire nei vari negozi di app. Firefox OS e Chrome supportano questo in modo nativo, ma per iOS, Android e Windows 8 o 10, dobbiamo utilizzare Cordova. ManifoldJS genererà per noi un file manifest di app, che contiene tutte le informazioni necessarie agli store di app per far funzionare il nostro progetto.
Sono disponibili due opzioni: Utilizzare il Generatore di app Web Manifold, che fornirà una GUI e istruzioni dettagliate o eseguirlo tramite la riga di comando.
In alternativa, per la riga di comando, è necessario installare prima ManifoldJS. Assicurati di aver installato NPM, quindi esegui:
npm install -g manifoldjs / manifoldjs
Con me finora? Ora possiamo chiamare ManifoldJS e farci generare una cartella per noi con i progetti per ciascuna delle piattaforme. Nel terminale sono entrato:
ManifoldJS -d / Users / DaveVoyles / Documents / FamousManifold http://famous-camera-app.azurewebsites.net/final/
Il percorso seguente -d dice a ManifoldJS quale directory voglio che sia memorizzata. Poco dopo, dovresti vedere il terminale che costruisce il progetto sotto i tuoi occhi.
Vai a dove hai salvato questo progetto e troverai una serie di cartelle lì. Ho quindi navigato a Cordova / piattaforme / iOS e cercò il file che terminava in xcodeproj, come volevo provare questo nel simulatore iOS. Fare doppio clic sull'icona per aprire il progetto in Xcode.
E ce l'abbiamo, un'applicazione Famo.us in esecuzione all'interno di Cordova su iOS.
Ho intenzione di provare Angular + Famo.us in una delle mie prossime demo, oltre a eseguire il wrapping in ManifoldJS per testare le prestazioni su iOS. Se stai cercando di eseguire il debug di queste app, potrei suggerire di guardare VorlonJS? È indipendente dalla piattaforma, richiede un minuto per la configurazione e nel link sopra, illustro come posso testare le app su un browser desktop e su dispositivi mobili.
Mi piacerebbe davvero mettere alla prova ciò che i browser mobili sono in grado di combinare un framework come Famo.us e Cordova, quindi cerca un campione che coinvolga presto questi due. Mentre il web continua ad evolversi, Microsoft continuerà ad aggiornare il suo sito dev.modern.ie/platform/status/ per riflettere le modifiche al nuovo browser Edge. L'annuncio più eccitante per me, tuttavia, è il passaggio recente da tag "in sviluppo" a "in edge" per asm.js. Presto saremo in grado di eseguire applicazioni native all'interno del browser. È un momento eccitante per lavorare sul web.
Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge.
Ecco alcune grandi risorse del mio team e colleghi:
E alcuni strumenti gratuiti per iniziare: Visual Studio Code, Azure Trial e strumenti di test cross-browser, tutti disponibili per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
Accentsconagua