Share
Depuis quelques mois, je souhaite me plonger dans ce nouveau framework JavaScript depuis son lancement, en octobre 2014. Famo.us comprend un moteur de mise en page 3D open-source entièrement intégré à un moteur d'animation physique 3D capable de restituer DOM, Canvas ou WebGL. En bref, vous pouvez obtenir des performances natives d’une application Web, en grande partie grâce à la façon dont Famo.us gère le rendu de son contenu..
Jenn Simmons, de la plate-forme Web Podcast, a récemment reçu Steve Newcomb, PDG de Famo.us, sur le podcast pour discuter de la performance mobile et de son prochain mode mixte. C’était le bon timing, car Microsoft venait de publier ManifoldJS, un outil qui vous permet de personnaliser votre expérience Web en tant qu’applications natives sur Android, iOS et Windows. Je voulais mettre ces deux technologies à l'épreuve.
En bref, je voulais déterminer si Famo.us offrait effectivement d'excellentes performances mobiles, ainsi qu'une compréhension de la simplicité du processus de présentation de mon application Web en tant qu'application mobile..
Le Web n'est pas nécessairement connu pour créer des applications hautes performances, ce qui est dommage car il est vraiment capable de créer des applications interactives rapides, mais il est malheureusement touché par le DOM. Avec des technologies telles que les toiles HTML5, WebGL et asm.js, le navigateur peut vraiment être un terrain de jeu pour une interactivité de pointe. Famo.us a pour objectif de résoudre ce problème en contournant le goulet d’étranglement de la plupart des applications Web, à savoir le DOM, et en utilisant WebGL et en faisant abstraction de votre travail. Plus sur cela plus tard.
ManifoldJS vise à rendre la vie d'un développeur mobile plus facile que jamais en utilisant des manifestes d'application Web, permettant aux sites Web de déclarer des propriétés similaires à celles d'une application. ManifoldJS utilise cette norme pour les plates-formes qui la prennent en charge, mais revient à Cordova pour celles qui ne le font pas. Cordova est génial, mais le W3C considère également le travail effectué sur Mozilla (applications Web ouvertes Firefox), Google (applications hébergées Chrome) et Microsoft (Windows 8 disposait d'applications Web locales, Windows 10 s'étend aux applications Web hébergées). Grâce à cela, nous pouvons désormais emballer des sites Web et créer des applications hybrides pouvant être déployées dans les différents magasins d'applications, tout en tirant parti de nombreux aspects natifs pour chaque appareil (contacts, calendrier, stockage de fichiers, gyroscope, GPS, etc.)..
Lorsque nous combinons les deux, nous pouvons créer des applications à une vitesse native pouvant être déployées dans un certain nombre de magasins d'applications, en utilisant principalement une base de code. Il n'y a pas de solution miracle pour le développement mobile, mais cela facilite certainement le processus..
Famo.us a une page Université, qui fournit un excellent point de départ pour comprendre le fonctionnement du cadre, ainsi que quelques exemples de projets. J'ai parcouru tous les cours sur le site de l'Université et je suis sorti avec une compréhension assez claire du cadre. Ils ont également une intégration avec d’autres bibliothèques, telles que Angular, mais je n’ai pas encore eu le temps de me lancer..
Ensuite, j'ai cliqué sur le lien situé dans le coin supérieur droit de la page pour télécharger leur ensemble de guides et deux exemples de projets. Ceci est différent de ce qui se trouve sur leur page GitHub.
J'ai ouvert le célèbre starter-kit dossier et navigué vers / tutoriels de référence et trouvé des dossiers pour / diaporama et /timbre. Le diaporama est plutôt malin. il récupère les images de Picasa et les affiche à l'écran comme si elles venaient d'un appareil photo Polaroid. Vous pouvez trouver une version live de ceci sur mon site.
Hors de la boîte, cependant, cela n'a pas fonctionné.
J'ai vite compris quel était le problème, cependant. Leur exemple indiquait une URL Picasa non valide. Cela fait plus de six mois que l'échantillon a été publié, j'espère donc qu'il sera corrigé maintenant, car j'imagine que cela nuirait à un certain nombre de personnes qui apprennent à utiliser ce cadre par ailleurs fantastique..
Une fois que j'ai changé l'URL dans le fichier SlideData.js, tout allait bien. Le projet consiste à récupérer des images d'un album Picasa et à les dessiner à l'écran. À chaque clic, l'appareil photo supprime l'image actuelle et une nouvelle image est éjectée de l'avant de l'appareil photo et est rapidement exposée sous vos yeux, accompagnée d'une belle physique appliquée au va-et-vient de l'image. Les instructions détaillées pour la création de ce projet sont disponibles sur le site Web de Famo.us..
Il y a un autre projet dans le /timbre dossier, mais je n'ai pas pu le faire fonctionner non plus. Vous pouvez toutefois trouver le didacticiel associé sur le site Web Famo.us et au moins suivre le processus de construction vous-même..
Je ne vais pas passer trop de temps à entrer dans les détails de Famo.us ici, mais si vous voulez vraiment aller plus loin, il y a un article sur Medium qui donne un bon aperçu.
Sur le site Famo.us:
Interagir avec le DOM pose de nombreux problèmes de performances. Famo.us résume la gestion des DOM […] Si vous inspectez un site Web exécutant Famo.us, vous remarquerez que le DOM est très plat: la plupart des éléments sont frères et soeurs les uns des autres. […] Les développeurs sont habitués à imbriquer des éléments HTML parce que c'est la moyen d'obtenir un positionnement relatif, la propagation d'événements et une structure sémantique. Cependant, chacun de ces éléments a un coût: le positionnement relatif provoque un ralentissement du flux de pages lors de l'animation du contenu; la propagation d'événements est coûteuse lorsque la propagation d'événements n'est pas gérée avec soin; et la structure sémantique n'est pas bien séparée du rendu visuel en HTML. Famo.us promet une riche expérience de 60 FPS, et pour ce faire, nous devions contourner ces inefficacités.
En utilisant la primitive CSS3 -webkit-transform: matrice3d, avec l'accélération matérielle qu'elle permet, nous pouvons obtenir des performances bien meilleures que si nous venions de bricoler le DOM. Chaque fois que vous touchez le DOM, cela coûte cher. Nicole Sullivan, une développeur Web fantastique connue pour son travail CSS, donne une excellente explication des reflux et des repeintes dans le navigateur et explique comment nous pouvons éviter ces problèmes. Heureusement, Famo.us nous évite tout cela.
Plutôt que d’écrire du code HTML, tout notre code Famo.us sera écrit en JavaScript. Jetez un coup d'œil à certains de leurs exemples sur CodePen pour bien comprendre le peu de langage HTML que vous écrivez (aucun) et l'apparence de JavaScript. Dans un prochain tutoriel, je vais plonger beaucoup plus en profondeur avec Famo.us que je ne le fais ici.
Maintenant nous parlons ma langue! Quelques applications hautes performances dans le navigateur!
Le processus d'installation de ManifoldJS est assez simple. Consultez leur page GitHub pour plus d'informations. Jeff Burtoft vous guide également tout au long du processus de création d'une application Web hébergée sur ThisHereWeb.com..
Ce projet continuera d'évoluer au cours des prochains mois. Au cours de la dernière semaine seulement, j'ai assisté à plusieurs ajouts. ManifoldJS créera des packages natifs sur les plates-formes prenant en charge de manière native les applications Web, telles que Windows 10, Chrome OS et Firefox OS. Cordova est utilisé sur des plates-formes telles qu'iOS et Android, ce qui permet à un développeur d'écrire une application Web tout en ayant accès à de nombreuses fonctionnalités natives d'un appareil, via Cordova lui-même ou la communauté des plugins actifs..
Jeff Burtoft explique très bien les applications Web hébergées sur son blog et dans sa récente présentation // BUILD /. La vidéo de // BUILD 2015 montre exactement ce que vous pouvez faire avec cette technologie..
Je fais ce didacticiel à partir d’un MacBook Pro exécutant Yosemite 10.10.3, le code Visual Studio comme IDE et MAMP comme serveur Web local. J'utilise ensuite Source Tree comme outil de choix pour Git et héberge mon code open-source sur GitHub. Je déploierai ensuite sur iOS via Xcode..
Je sais qu'un technicien technique chez Microsoft a utilisé des produits Apple et vous a parlé d'outils ouverts. Quel est le monde à venir?
La première chose que j'ai faite a été de télécharger les échantillons de Famo.us sur leur site Web. Comme je l'ai mentionné ci-dessus, j'ai apporté les modifications appropriées à leur fichier SlideData.js afin que mon projet puisse extraire les flux de Picasa. Je l'ai téléchargé sur GitHub afin que vous ayez un échantillon qui fonctionne immédiatement. Consultez le site en direct et dirigez-vous sur GitHub pour télécharger le projet en cours..
Ensuite, je me suis connecté à Azure et j'ai créé un nouveau site Web. Vous pouvez obtenir 200 $ de crédits d'essai Azure ou me contacter au sujet d'une adhésion gratuite à BizSpark pour vous-même ou votre startup, qui offre 150 $ / mois d'hébergement Web..
Je pointe ensuite ce nouveau site Web Azure vers mon dépôt GitHub. Scott Hanselman explique comment procéder en quelques étapes. À partir de là, Azure surveille mon référentiel GitHub pour ce projet. Azure prend immédiatement en compte les modifications apportées à ce référentiel. Les modifications les plus récentes peuvent être consultées sur le site Web et le projet manifeste immédiatement..
Ensuite, nous devons utiliser ManifoldJS pour "emballer" notre application Web afin de pouvoir la déployer dans les différents magasins d'applications. Firefox OS et Chrome le prennent en charge de manière native, mais pour iOS, Android et Windows 8 ou 10, nous devons utiliser Cordova. ManifoldJS générera un fichier de manifeste d'application pour nous, qui contient toutes les informations dont les magasins d'applications ont besoin pour lancer notre projet..
Vous avez deux options ici: utilisez le générateur d’applications Web Manifold, qui fournira une interface graphique et des instructions pas à pas, ou exécutez-le via la ligne de commande..
Sinon, pour la ligne de commande, vous devez d'abord installer ManifoldJS. Assurez-vous que NPM est installé, puis exécutez:
npm installer -g manifoldjs / manifoldjs
Avec moi jusqu'à présent? Nous pouvons maintenant appeler ManifoldJS et lui demander de générer un dossier avec des projets pour chacune des plates-formes. Dans le terminal je suis entré:
ManifoldJS -d / Utilisateurs / DaveVoyles / Documents / FamousManifold http://famous-camera-app.azurewebsites.net/final/
Le chemin qui suit -ré indique à ManifoldJS le répertoire dans lequel je souhaite le stocker. Peu de temps après, vous devriez voir le terminal construire le projet sous vos yeux..
Accédez à l'emplacement où vous avez stocké ce projet et vous y trouverez une série de dossiers. J'ai ensuite navigué vers cordova / plateformes / iOS et a cherché le fichier se terminant par xcodeproj, car je voulais tester cela dans le simulateur iOS. Double-cliquez sur cette icône pour ouvrir le projet dans Xcode..
Et voilà, une application Famo.us fonctionnant à l'intérieur de Cordova sur iOS.
Je prévois d’essayer Angular + Famo.us dans l’une de mes prochaines démos et de l’emballer dans ManifoldJS pour tester les performances sur iOS. Si vous souhaitez déboguer ces applications, puis-je vous suggérer de regarder VorlonJS? Il prend une minute pour la configuration, indépendamment de la plate-forme. Dans le lien ci-dessus, je montre comment tester des applications sur un navigateur d'ordinateur de bureau, ainsi que sur des appareils mobiles..
Je voudrais vraiment insister sur ce que les navigateurs mobiles sont capables de faire en combinant un framework tel que Famo.us et Cordova, cherchez donc un échantillon impliquant ces deux bientôt. Au fur et à mesure de l'évolution du Web, Microsoft continuera de mettre à jour son site dev.modern.ie/platform/status/ afin de refléter les modifications apportées au nouveau navigateur Edge. L’annonce la plus excitante pour moi, cependant, est le passage récent de la balise "en développement" à la balise "in edge" pour asm.js. Bientôt, nous pourrons exécuter des applications natives dans le navigateur. C'est une période passionnante pour travailler sur le Web.
Cela vous surprendra peut-être un peu, mais Microsoft propose un grand nombre d’apprentissage gratuit sur de nombreuses rubriques JavaScript open-source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge..
Voici quelques excellentes ressources de mon équipe et de mes collègues:
Et quelques outils gratuits pour commencer: Code Visual Studio, Azure Trial et outils de test inter-navigateurs, tous disponibles pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
Accentsconagua