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):

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:

/*

   * Grab Pokemon from the DB

   */

  $scope.getPokemon = function () {  



    // Generate a random num and use it for the next pokemon

    getRandomInt($scope.minVal, $scope.maxVal);



    // Retrieve data from DB and draw it to screen

    $http.get($scope.dbURL + $scope.pokemonNum + "/")

      .success(function(data) {

        $scope.name       = data.name;

        $scope.imageUrl   = $scope.imgDbURL + $scope.name.toLowerCase() + '.jpg';



        /* 1) Empty out the current array to store the new items in there

         * 2) Capitalize the first character for each ability from the database

         * 3) Store that ability in a new abilityObj & add it into the abilities array

         */

        $scope.abilities.length = 0;

        for (var i = 0; i < data.abilities.length; i++){

         var capitalizedString = capitalizeFirstLetter(data.abilities[i].name);

         var abilityObj        = {name: capitalizedString };

          $scope.abilities.push(abilityObj);

        }



        $scope.hitPoints  = data. hp;

        var firstType     = data.types[0].name;

        $scope.types.name = capitalizeFirstLetter(firstType);

        determineNewBgColor();

      })

      .error(function(status){

        console.log(status);

        $scope.name = "Couldn't get Pokemon from the DB";

      });

  };

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:

   $scope.abilities       = [

    { name: "Sleep"},

    { name: "Eat"  }

  ];

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.

  $scope.types      = { name: "Grass" };



  var firstType     = data.types[0].name;

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:

<!-- Name-->

<fa-modifier

    fa-origin    ="origin.center"

    fa-align     ="align.frontName"

    fa-size      ="size.frontName"

    fa-translate ="trans.topLayer">

    <fa-surface

        class    ="front-name-text">

        {{name}}

    </fa-surface>

</fa-modifier>

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:

  $scope.origin          = {

                         // X    Y 

   topLeft:                [0,   0  ],

   topRight:               [1,   0  ],

   center:                 [0.5, 0.5],

   bottomLeft:             [0,   1  ],

   bottomRight:            [1,   1  ]

  };

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.

  $scope.align          =  {

                          // X        Y 

    frontName:             [0.50,    0.10],

    frontImg:              [0.50,    0.40],

    backImg:               [0.5,     0.38],

    center:                [0.50,    0.50]

  };

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.

<!-- Next button -->

<fa-modifier

    fa-origin    ="origin.center"

    fa-align     ="align.nextBtn"

    fa-size      ="size.btn"

    fa-scale     ="scale.nextBtn.get()"

    fa-translate ="trans.topLayer">

    <fa-surface

        class    ="one-edge-shadow center-align next-btn"

        ng-click ="getPokemon(); nextBtnPressAnim(); frontImgAnim()">

        {{nextBtn}}

    </fa-surface>

</fa-modifier>

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:

angular.module('famousAngularStarter')

  .controller('PokemonCtrl', ['$scope', '$http', '$famous', function ($scope, $http, $famous) {



    /* Inject famo.us to DOM */

    var View           = $famous['famous/core/View'                 ];

    var Modifier       = $famous['famous/core/Modifier'             ];

    var Surface        = $famous['famous/core/Surface'              ];

    var Transform      = $famous['famous/core/Transform'            ];

    var Transitionable = $famous['famous/transitions/Transitionable'];

    var Timer          = $famous['famous/utilities/Timer'           ];

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.

  /*

   * @OnClick: Sets the opacity and scale for the front image when user clicks "Next" btn

   * 1) Turns opacity invisible quickly before returning to original opacity, revealing new Pokemon

   * 2) Turns scale down before quickly turning it back up to original size

   */

  $scope.frontImgAnim = function() {

    var hideDuration   =  200;

    var returnDuration = 1300;



    $scope.opac.imgFront.    set(0,           {duration: hideDuration,   curve: "easeIn"},

      function returnToOrigOpacity() {

        $scope.opac.imgFront.set(1,           {duration: returnDuration, curve: "easeIn"})

      }

    );

    $scope.scale.imgFront    .set([0.5, 0.5], {duration: hideDuration,   curve: "easeIn"},

      function returnToOrigSize() {

        $scope.scale.imgFront.set([0.8, 0.8], {duration: returnDuration, curve: "easeIn"})

      }

    )

  };

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

 fa-origin    ="origin.center"

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.

<fa-surface

    class    ="one-edge-shadow center-align next-btn"

    ng-click ="infoBtnPressAnim(); flip()">

    {{infoBtnText}}

</fa-surface>

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

var logo = new Surface({

    properties: {

         ...

    },

    classes: ['backfaceVisibility, class-two'] 

});

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

• Famo.us Slackchat
• BizSpark, pour les licences de développement MSFT gratuites et l’hébergement Web
• Envoyez-moi des questions par e-mail
• Découvrez comment en faire une application Cordova pour les plates-formes mobiles

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:

• Analysez votre site à la recherche de bibliothèques obsolètes, de problèmes de mise en page et d’accessibilité
• Utiliser des machines virtuelles pour Mac, Linux et Windows
• Testez à distance Microsoft Edge sur votre propre appareil
• Coding Lab sur GitHub: tests multi-navigateurs et bonnes pratiques

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

• Sommet Web Microsoft Edge 2015 (à quoi s’attendre avec le nouveau navigateur, les nouvelles normes de plate-forme Web prises en charge et les conférenciers invités de la communauté JavaScript)
• Woah, je peux tester Edge et IE sur un Mac et Linux! (de Rey Bango)
• Faire progresser JavaScript sans casser le Web (de Christian Heilmann)
• Le moteur de rendu Edge qui fait fonctionner le Web (de Jacob Rossi)
• Libérez le rendu 3D avec WebGL (de David Catuhe, y compris le Vorlon.js et Babylon.js projets)
• Applications Web hébergées et innovations de plate-forme Web (de Kevin Hill et Kiril Seksenov, y compris le manifoldJS projet)

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

• Visual Studio Code pour Linux, Mac OS et Windows
• Code avec Node.js et essai gratuit sur Azure