Créer une application mobile en utilisant Famo.us et Angular

J’adore le JavaScript haute performance et j’aime partager ce que je crois être son véritable potentiel. Dans ce didacticiel, je veux me concentrer sur Famo.us, qui peut vous permettre de maintenir un 60 images par seconde soyeux tout en ayant des animations fluides à l’écran.

Famo.us le fait en utilisant la primitive CSS3 -webkit-transform:

matrix3d, qui permet au framework de calculer la matrice composite et d’ignorer le moteur de rendu du navigateur. Pas de plug-in, pas de téléchargement, pas de hack. En ajoutant ceci à chaque DIV, les développeurs peuvent rendre la matrice composite et accéder directement au GPU.

Je vais plus en profondeur lorsque je discute des tenants et aboutissants de Famo.us dans cet article de blog. Grâce à Zack Brown pour toute son aide avec cela! Commençons.

À la fin de ce projet, vous serez en mesure de:

  • comprendre le fonctionnement d’Angular dans le contexte d’une application Famo.us
  • exploiter la véritable puissance de JavaScript et les bonnes parties de HTML5
  • créer des animations fluides

Mon objectif pour ce projet est d’illustrer la facilité avec laquelle vous pouvez créer des projets HTML5 et JavaScript qui fonctionnent à des vitesses quasi-natives sur des applications mobiles.

traits

  • L’application mobile fonctionne sur iOS et Android via Cordova.
  • L’application universelle Windows 10 fonctionne de manière native sur Windows 10.
  • Ce projet peut également être exécuté en tant que site Web hébergé, même si je l’ai mis à l’échelle, ce qui est le mieux pour les appareils mobiles.

Exigences

  • PC ou Mac
  • serveur Web
  • Matrice de test multiplateforme (comme BrowserStack, IDE ou machines virtuelles gratuites pour EdgeHTML, le moteur de rendu pour Microsoft Edge et le contenu des applications Web hébergées sur Windows 10)

Installer

  1. Téléchargez la source depuis GitHub.
  2. Téléchargez et installez un serveur Web (j’utilise MAMP sous OS X ou le serveur IIS intégré avec Visual Studio sous Windows).

Ouvrez le projet

  1. Démarrez votre serveur Web.
  2. Aller vers célèbre-angulaire-Pokemon / app /.

Le projet est conçu pour fonctionner sur les appareils mobiles, utilisez donc l’émulateur mobile de votre navigateur pour obtenir la vue correcte. Voici à quoi cela ressemblerait sur un iPhone 6 dans l’émulateur via le navigateur de bureau Chrome (375×667):

L'application mobile créait affichée sur l'émulateur iPhone 6

Comment ça fonctionne

Accéder à la base de données

Je tire toutes les informations du PokeAPI, qui a une API bien documentée, mais il manque des images pour chacun des Pokémon. Pour les images, je tire simplement le nom du Pokémon actuellement choisi et je l’ajoute à la fin de cette URL: http://img.pokemondb.net/artwork/. Par exemple: http://img.pokemondb.net/artwork/venusaur.jpg vous mènera à une image de Vanosaur. Nifty, non? Malheureusement, ils n’ont pas d’API disponible.

Chaque fois que l’utilisateur appuie sur Prochain bouton, un nombre aléatoire est généré entre une valeur min / max que j’ai définie (par exemple, 1 à 20), et il extrait un Pokémon de la base de données qui correspond à ce nombre. Voici à quoi cela ressemble:

http://pokeapi.co/api/v1/pokemon/1/ renvoie un objet JSON pour Bulbasaur. Vous pouvez jouer avec leur API.

Faire une boucle dans les données

Je boucle ensuite sur cet objet JSON et définit les propriétés que je trouve sur des variables dans Angular, en utilisant le $Scope objet.

Voici un exemple:

Vous remarquerez peut-être que j’ai également quelques autres fonctions ici, telles que capitalizeFirstLetter, qui fait exactement cela. Je voulais que les capacités et le type (par exemple poison, herbe, vol) aient la première lettre en majuscule, car ils reviennent de la base de données dans tous les caractères minuscules.

Je boucle également les capacités et les pousse vers un objet de capacité, qui ressemble à ceci:

La base de données renvoie également plusieurs types pour certains Pokémon, tels que Charizard, qui vole aussi bien que le feu. Pour garder les choses simples, cependant, je ne voulais en renvoyer qu’un de la base de données.

Dessiner à l’écran

Famo.us a deux vagues de contenu de dessin à l’écran en créant les surfaces, qui sont les éléments qui contiennent votre texte, vos images, etc.:

  • JavaScript
  • Directives FA (HTML)

Je n’ai pas utilisé JavaScript pour dessiner les surfaces dans cette application. Au lieu de cela, j’ai choisi d’utiliser uniquement les directives FA (Famous-Angular), telles que:

C’est pour le nom au-dessus du Pokémon sur l’écran avant.

Vous remarquerez que la surface est enveloppée d’un fa-modifier. Vous pouvez lire à propos de ceux-ci dans la documentation Famo.us, mais ils ajustent essentiellement les propriétés d’une surface, telles que l’alignement, la taille et l’origine. Il m’a fallu un certain temps pour comprendre la différence entre l’alignement et l’origine, alors voici comment j’en suis venu à le comprendre.

Origine

C’est le point de référence sur n’importe quelle surface. Si je veux dessiner un rectangle et le déplacer sur l’écran, je dois décider quel point de ce rectangle sera mon point de départ. le Documents Famo.us expliquez-le bien. Les valeurs sont présentées comme suit:

Alignement

Il s’agit de l’emplacement d’une surface sur l’écran. Lorsque vous modifiez l’alignement, il utilise l’origine comme point de référence pour commencer.

Où Angular arrive enfin

Voici maintenant où vous pouvez mettre toutes vos compétences Angular et vos liaisons de données à travailler avec l’implémentation Angular. Si vous êtes déjà expérimenté avec Angular, alors ce n’est pas radicalement différent ici.

Ce bouton apparaît sur le premier écran et extrait simplement un autre Pokémon de la base de données. La totalité de la ng Les directives (angulaires) que vous connaissez sont ici, telles que ng-click. J’ai plusieurs fonctions ici. Notez qu’ils ne sont pas séparés par des virgules.

Je lie également la valeur de $scope.nextBtn à {{nextBTn}} en HTML.

Pour permettre à Famo.us et Angular de travailler ensemble, nous devons inclure $Famo.us en haut de notre fichier JavaScript. Voici comment procéder:

Animations

Que serait une application haute performance sans animations? Famo.us est emballé avec eux, ce qui facilite la mise en route. En voici un pour animer l’image sur le devant.

Il existe plusieurs types de courbes que vous pouvez utiliser ici. Consultez les documents pour plus d’informations. J’utilise également une fonction de rappel, returnToOrigSize, pour agrandir l’image, puis la réduire à sa taille d’origine.

Points de frustration

J’ai rencontré quelques problèmes en cours de route.

Les directives FA ont leurs propriétés définies sous forme de chaînes

Si vous avez une erreur d’orthographe, l’application utilisera simplement les valeurs par défaut pour cette propriété. Cela m’a accroché plusieurs fois, c’est pourquoi vous voyez que j’ai défini toutes mes propriétés en tant qu’objet, tel que align.frontName, pour faciliter la lecture.

Ajouter des classes

Dans les directives FA, vous ajoutez plusieurs classes sous forme de chaînes et elles sont ne pas séparées par des virgules.

Si vous essayez d’ajouter des classes en créant des surfaces en JavaScript, vous passez un tableau de chaînes.

Il m’a fallu un certain temps pour comprendre cela, car je n’ai trouvé que la solution dans ce fil.

Famo.us + Angular semble être obsolète (pour le moment)

À mi-chemin de ce projet, j’ai vu que Famo.us travaillait sur une version améliorée du framework qui inclut Mode mixte. Famo.us + Angular ne profite pas (encore) de ces ajouts au moins. Cela ne signifie pas que FA va n’importe où, car cela fonctionne parfaitement bien – c’est juste que vous n’obtiendrez pas les dernières fonctionnalités.

Ressources

Plus pratique avec JavaScript

Cet article fait partie de la série de développement Web des évangélistes techniques de Microsoft sur l’apprentissage pratique de JavaScript, les projets open source et les meilleures pratiques d’interopérabilité, y compris Microsoft Edge navigateur et le nouveau Moteur de rendu EdgeHTML.

Nous vous encourageons à tester sur différents navigateurs et appareils, y compris Microsoft Edge, le navigateur par défaut pour Windows 10, avec des outils gratuits sur dev.modern.IE:

Apprentissage technique approfondi sur Microsoft Edge et la plate-forme Web par nos ingénieurs et évangélistes:

Plus d’outils et de ressources multiplateformes gratuits pour la plateforme Web:

En relation :  watchOS 2: Transferts et files d'attente en arrière-plan
Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.