Cómo usar Famo.us + Angular para crear una aplicación móvil

Me encanta JavaScript de alto rendimiento y me encanta compartir lo que creo que es su verdadero potencial. En este tutorial, quiero centrarme en Famo.us: puede permitirle mantener 60 cuadros por segundo suaves como la seda mientras tiene animaciones fluidas en la pantalla.

Famo.us hace esto utilizando la primitiva CSS3 -webkit-transform: matrix3d, que permite que el marco calcule la matriz compuesta y omita el renderizador del navegador. Sin plug-in, sin descarga, sin pirateo. Al agregar esto a cada DIV, los desarrolladores pueden renderizar la matriz compuesta e ir directamente a la GPU. Profundizo más cuando hablo de los entresijos de Famo.us en esta entrada de blog. gracias de nuevo a zack marrón por toda su ayuda con esto! Empecemos:

Al final de este proyecto usted será capaz de:

• Comprender cómo funciona Angular dentro del contexto de una aplicación Famo.us
• Aprovecha el verdadero poder de JavaScript y las partes buenas de HTML5
• Crear animaciones fluidas

Mi objetivo para este proyecto es ilustrar la facilidad con la que puede crear proyectos HTML5/JS que funcionen a velocidades casi nativas en aplicaciones móviles.

Características

• Las aplicaciones móviles se ejecutan en iOS y Android a través de Cordova
• La aplicación universal de Windows 10 se ejecuta de forma nativa en Windows 10
• Este proyecto también se puede ejecutar como un sitio web alojado, aunque lo tengo escalado mejor para dispositivos móviles

Requisitos

• PC o Mac
• Servidor web
• Matriz de prueba multiplataforma (como un BrowserStack, IDE o maquinas virtuales gratis para EdgeHTML, el motor de renderizado para Microsoft Edge y el contenido de la aplicación web alojada en Windows 10).

Configuración

1. Descarga la fuente de GitHub
2. Descargar e instalar un servidor web (Uso MAMP en OS X o el servidor IIS integrado con Visual Studio en Windows)

Apertura del proyecto

1. Inicie su servidor web
2. Navegar a famoso-angular-pokemon/app/

El proyecto está diseñado para funcionar en dispositivos móviles, así que use el emulador móvil en su navegador para obtener la vista correcta. Así es como se vería en un iPhone 6 dentro del emulador a través del navegador de escritorio Chrome (375×667):

Cómo funciona

Golpeando la base de datos

Saco toda la información de la PokéAPI, que tiene una API bien documentada, pero le faltan imágenes para cada uno de los Pokémon. Para las imágenes, solo extraigo el nombre del pokemon elegido actualmente y lo agrego al final de esta URL:http://img.pokemonb.net/artwork/. Por ejemplo: http://img.pokemondb.net/artwork/venusaur.jpg te llevará a una imagen de Vanosaur. Ingenioso, ¿verdad? Lamentablemente, no tienen una API disponible. Cada vez que el usuario presiona el Próximo botón, se genera un número aleatorio entre un valor mínimo / máximo que he definido (digamos, 1-20), y extrae un Pokémon de la base de datos que coincida con ese número. Esto es lo que parece:

http://pokeapi.co/api/v1/pokemon/1/ devuelve un objeto JSON para Bulbasaur. Puedes jugar con su API aquí.

Bucle a través de los datos

Luego recorro ese objeto JSON y establezco las propiedades que encuentro allí en variables en Angular, usando el objeto $Scope. Aquí hay un ejemplo:

/* 
* 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";
});
};

Puede notar que también tengo algunas otras funciones aquí, como mayúsculaPrimeraLetra, que hace exactamente eso. Quería que las habilidades y el tipo (por ejemplo, veneno, hierba, volador) tuvieran la primera letra en mayúscula, ya que viene de la base de datos en todos los caracteres en minúsculas. También recorro las habilidades y las empujo a un objeto de habilidad, que se ve así:

  $scope.abilities       = [
  { name: "Sleep"},
  { name: "Eat"  }
  ];

La base de datos también arroja múltiples tipos para ciertos Pokémon, como Charizard, que vuela además de disparar. Sin embargo, para simplificar las cosas, solo quería devolver uno de la base de datos.

  $scope.types      = { name: "Grass" };
var firstType     = data.types[0].name;

Dibujarlo en la pantalla

Famo.us tiene dos oleadas de contenido de dibujo a la pantalla, mediante la creación de «superficies», que son los elementos que contienen su texto, imágenes, etc.:

1. JavaScript
2. Directivas FA (HTML)

No usé JavaScript para dibujar las superficies en esta aplicación, sino que elegí usar solo directivas FA (Famous-Angular), como:

<!-- 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>

El nombre sobre el Pokémon en la pantalla frontal. Notarás que la superficie está envuelta por un modificador fa. Puedes leer sobre ellos aquí pero básicamente ajustan las propiedades de una superficie, como la alineación, el tamaño y el origen. Me tomó un tiempo entender la diferencia entre alineación y origen, así es como llegué a entenderlo:

Origen

El punto de referencia en cualquier superficie. Si quiero dibujar un rectángulo y moverlo por la pantalla, necesito decidir qué punto de ese rectángulo será mi punto de partida. los Documentos de Famo.us explícalo bien. Los valores se establecen como tales:

  $scope.origin          = {
  // X    Y 
  topLeft:                [0,   0  ],
  topRight:               [1,   0  ],
  center:                 [0.5, 0.5],
  bottomLeft:             [0,   1  ],
  bottomRight:            [1,   1  ]
  };

Alineación

La ubicación de una superficie en la pantalla. Cuando realiza cambios en la alineación, está utilizando el origen como punto de referencia para comenzar.

  $scope.align          =  {
  // X        Y 
  frontName:             [0.50,    0.10],
  frontImg:              [0.50,    0.40],
  backImg:               [0.5,     0.38],
  center:                [0.50,    0.50]
  };

Donde finalmente entra Angular

Ahora aquí es donde puede poner todas sus habilidades angulares y enlace de datos para trabajar con la implementación angular aquí. Si ya tiene experiencia con Angular, entonces no es radicalmente diferente aquí.

<!-- 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>

Este botón aparece en la primera pantalla y simplemente extrae otro Pokémon de la base de datos. Todas las directivas ng (angular) con las que está familiarizado están aquí, como ng-clic. Tengo varias funciones aquí (AVISO: no están separadas por comas). También estoy vinculando el valor de $scope.nextBtn para {{siguienteBTn}} en HTML. Para permitir que Famo.us y Angular funcionen juntos, debemos incluir $Famo.us en la parte superior de nuestro archivo JavaScript. Así es como lo haces:

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

/* Inject famo.us to DOM */ var View           = $famous[‘famous/core/View’                 ]; var Modificador = $famoso[‘famous/core/Modifier’             ]; var Superficie = $famoso[‘famous/core/Surface’              ]; var Transformar = $famoso[‘famous/core/Transform’            ]; var Transitable = $famoso[‘famous/transitions/Transitionable’]; var Temporizador = $famoso[‘famous/utilities/Timer’           ];

animaciones

¿Qué sería de una aplicación de alto rendimiento sin animaciones? Famo.us está repleto de ellos, lo que facilita el comienzo. Aquí hay uno para animar la imagen en el frente.

  /* 
  * @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"})
  }
  )
  };

Hay varios tipos de curvas que puede usar aquí. Consulte los documentos para obtener más información. También estoy usando una función de devolución de llamada,returnToOrigSize para que la imagen crezca y luego se reduzca al tamaño original.

Puntos de frustración

Me encontré con algunos problemas en el camino.

• FA-Directies tienen sus propiedades establecidas como cadenas

 fa-origin    ="origin.center"

Si tiene un error ortográfico, la aplicación solo usará los valores predeterminados para esa propiedad. Esto me enganchó varias veces, por lo que puede ver que configuro todas mis propiedades como un objeto, como align.frontNamepara que sea más fácil de leer.

• Agregar clases

En las directivas FA, agrega varias clases como cadenas, y NO están separadas por comas.

<fa-surface 
  class    ="one-edge-shadow center-align next-btn" 
  ng-click ="infoBtnPressAnim(); flip()">
  {{infoBtnText}}
  </fa-surface>

Si intenta agregar clases creando superficies en JavaScript, pasa una serie de cadenas:

  var logo = new Surface({
  properties: {
  ...
  },
  classes: ['backfaceVisibility, class-two'] 
  });

Me tomó un tiempo entender eso, como solo encontré la solución en este hilo.

• Famo.us + Angular parece estar depreciado (por ahora)

A la mitad de este proyecto vi que Famo.us estaba trabajando en una versión mejorada del marco que incluye Modo mezclado. Famous + Angular no aprovecha estas adiciones (todavía) al menos. Eso no significa que FA vaya a ninguna parte, ya que funciona perfectamente bien, solo que no obtendrá las últimas funciones.

Recursos

• Famo.us Slackchat
• BizSpark, para licencias de desarrollo MSFT y alojamiento web gratuitos
• Envíeme un correo electrónico con preguntas
• Aprenda cómo convertir esto en una aplicación Cordova para plataformas móviles

Más prácticas con JavaScript

Este artículo es parte de la serie de desarrollo web de los evangelistas tecnológicos de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto y mejores prácticas de interoperabilidad, que incluyen Borde de Microsoft navegador y el nuevo Motor de renderizado EdgeHTML. Lo alentamos a probar en todos los navegadores y dispositivos, incluido Microsoft Edge, el navegador predeterminado para Windows 10, con herramientas gratuitas en dev.modern.ES:

• Escanee su sitio en busca de bibliotecas desactualizadas, problemas de diseño y accesibilidad
• Use máquinas virtuales para Mac, Linux y Windows
• Pruebe de forma remota Microsoft Edge en su propio dispositivo
• Laboratorio de codificación en GitHub: Pruebas entre navegadores y mejores prácticas

Aprendizaje tecnológico en profundidad sobre Microsoft Edge y la plataforma web de nuestros ingenieros y evangelistas:

• Cumbre web de Microsoft Edge 2015 (qué esperar con el nuevo navegador, los nuevos estándares de plataforma web compatibles y los oradores invitados de la comunidad de JavaScript)
• Woah, ¡puedo probar Edge e IE en una Mac y Linux! (de Rey Bango)
• Avance de JavaScript sin romper la Web (de Christian Heilmann)
• El Edge Rendering Engine que hace que la Web simplemente funcione (de Jacob Rossi)
• Dé rienda suelta a la renderización 3D con WebGL (de David Catuhe incluyendo el vorlon.JS y babiloniaJS proyectos)
• Innovaciones en plataformas web y aplicaciones web alojadas (de Kevin Hill y Kiril Seksenov incluyendo el múltiple.JS proyecto)

Más herramientas y recursos multiplataforma gratuitos para la plataforma web:

• Código de Visual Studio para Linux, MacOS y Windows
• Código con node.JS y prueba gratuita en Azure

(dpe)