7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Mobile Development

Crea una aplicación móvil de alto rendimiento con Famo.us y Manifold.js

Scroll to top
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Leareny Guerrero (you can also view the original English article)

Durante los últimos meses he querido sumergirme en este nuevo marco de JavaScript desde que vi su evento de lanzamiento en octubre de 2014. Famo.us incluye un motor de diseño 3D de código abierto totalmente integrado con un motor de animación física 3D que puede renderizar a DOM, Canvas o WebGL. En resumen, puedes obtener un rendimiento nativo de una aplicación web, en gran parte debido a la forma en que Famo.us maneja la representación de su contenido.

Jenn Simmons de Web Platform Podcast recientemente tuvo al CEO de Famo.us, Steve Newcomb, en el podcast para discutir el rendimiento móvil y su próximo modo mixto. Este fue el momento perfecto, ya que Microsoft acababa de lanzar ManifoldJS, una herramienta que te permite empaquetar tu experiencia web como aplicaciones nativas en Android, iOS y Windows. Quería poner a prueba estas dos tecnologías.

En resumen, quería determinar si Famo.us realmente tiene un gran rendimiento móvil, así como comprender qué tan sencillo fue el proceso para empaquetar mi aplicación web como una aplicación móvil.

¿Qué problema resuelven estas dos cosas?

La web no es necesariamente conocida por crear aplicaciones de alto rendimiento, lo cual es una lástima porque realmente es capaz de desarrollar aplicaciones interactivas ultrarrápidas, pero lamentablemente ha estado plagada de DOM. Con tecnologías como el lienzo HTML5, WebGL y asm.js, el navegador realmente puede ser un campo de juego para la interactividad de vanguardia. Famo.us tiene como objetivo resolver esto, evitando el cuello de botella de la mayoría de las aplicaciones web, que es el DOM, y utilizando WebGL y abstrayendo su trabajo del DOM. Más sobre esto más adelante.

ManifoldJS tiene como objetivo hacer la vida de un desarrollador móvil más fácil que nunca mediante el uso de manifiestos de aplicaciones web, lo que permite que los sitios web declaren propiedades similares a las de las aplicaciones. ManifoldJS usa ese estándar para aquellas plataformas que lo admiten, pero recurre a Cordova para aquellas que no lo hacen. Cordova es excelente, pero el W3C también considera el trabajo realizado en Mozilla (Firefox Open Web Apps), Google (Chrome Hosted Apps) y Microsoft (Windows 8 tenía aplicaciones web locales, Windows 10 se extiende a las aplicaciones web alojadas). Con esto, ahora podemos envolver sitios web y crear aplicaciones híbridas que se pueden implementar en las diversas tiendas de aplicaciones, sin dejar de aprovechar muchos aspectos nativos para cada dispositivo (contactos, calendario, almacenamiento de archivos, giroscopio, GPS, etc.).

Cuando combinamos los dos, podemos crear aplicaciones a velocidad nativa que se pueden implementar en varias tiendas de aplicaciones, utilizando principalmente una base de código. No existe una solución milagrosa para el desarrollo móvil, pero esto ciertamente facilita el proceso.

Empezando con Famo.us

Famo.us tiene una página de la Universidad, que proporciona un excelente punto de partida para comprender cómo funciona el marco, además de ofrecer algunos proyectos de muestra. Revisé todos los cursos en el sitio de la Universidad y obtuve una comprensión bastante clara del framework. También tienen integración con otras bibliotecas, como Angular, pero todavía no he tenido tiempo de sumergirme en eso.

A continuación, hice clic en el enlace en la esquina superior derecha de la página para descargar su paquete de guías y dos proyectos de ejemplo. Esto es diferente de lo que se encuentra en su página de GitHub.

Abrí la carpeta famous-starter-kit y navegué hasta /reference-tutorials y encontré carpetas para /slideshow y /timbre.  La presentación de diapositivas es bastante inteligente; toma imágenes de Picasa y las atrae a la pantalla como si fueran nuevas de una cámara Polaroid. Puedes encontrar una versión en vivo de esto en mi sitio web.

Instant camera image of a dogInstant camera image of a dogInstant camera image of a dog

Sin embargo, no funcionó.

Pronto me di cuenta de cuál era el problema. Su muestra apuntó a una URL de Picasa no válida. Han pasado más de seis meses desde que se lanzó la muestra, por lo que espero que ya se haya corregido, ya que imagino que esto sería un obstáculo para varias personas que están aprendiendo a usar este fantástico framework.

Una vez que cambié la URL en el archivo SlideData.js, todo estuvo bien. Lo que hace el proyecto es tomar imágenes de un álbum de Picasa y dibujarlas en la pantalla. Con cada clic, la cámara deja caer la imagen actual, y se expulsa una nueva desde la parte frontal de la cámara, y se expone rápidamente ante tus ojos, junto con una buena física aplicada al balanceo hacia adelante y hacia atrás de la imagen. Las instrucciones paso a paso para crear este proyecto se pueden encontrar en el sitio web Famo.us.

Hay otro proyecto en la carpeta /timbre, pero tampoco pude hacerlo funcionar. Sin embargo, puede encontrar el tutorial asociado en el sitio web Famo.us y, al menos, recorrer el proceso de construcción usted mismo.

¿Cómo funciona Famo.us?

No voy a dedicar mucho tiempo a entrar en los detalles de Famo.us aquí, pero si realmente quieres profundizar, hay un artículo en Medium que ofrece una excelente descripción general.

Desde el sitio web de Famo.us:

La interacción con DOM está plagada de problemas de rendimiento. Famo.us elimina la administración de DOM […] Si inspeccionas un sitio web que ejecuta Famo.us, notarás que el DOM es muy plano: la mayoría de los elementos son hermanos entre sí. […] Los desarrolladores están acostumbrados a anidar elementos HTML porque esa es la forma de obtener posicionamiento relativo, propagación de eventos y estructura semántica. Sin embargo, hay un costo para cada uno de estos: el posicionamiento relativo provoca que la página vuelva a fluir lentamente al animar el contenido; la propagación de eventos es costosa cuando la propagación de eventos no se gestiona con cuidado; y la estructura semántica no está bien separada de la representación visual en HTML. Famo.us promete una rica experiencia de 60 FPS y, para hacerlo, teníamos que sortear estas ineficiencias.

Al utilizar la primitiva -webkit-transform: matrix3d ​​de CSS3, junto con la aceleración de hardware que ofrece, podemos obtener un rendimiento mucho mayor que el que podríamos obtener si solo jugáramos con el DOM. Cada vez que tocas el DOM, es caro. Nicole Sullivan, una fantástica desarrolladora web conocida por su trabajo con CSS, ofrece una excelente explicación de los reflujos y el repintado dentro del navegador, y cómo podemos evitar estos problemas. Afortunadamente, Famo.us nos abstrae de todo esto.

En lugar de escribir cualquier código HTML, todo nuestro código de Famo.us se hará en JavaScript. Echa un vistazo a algunos de sus ejemplos en CodePen para obtener una buena comprensión de lo poco HTML que escribe realmente (ninguno) y cómo se ve el JavaScript. En un próximo tutorial, profundizaré más en Famo.us que aquí.

¡Ahora estamos hablando mi idioma! ¡Algunas aplicaciones de alto rendimiento en el navegador!

¿Cómo funciona ManifoldJS?

El proceso de instalación de ManifoldJS es bastante sencillo. Consulta su página de GitHub para obtener más información. Jeff Burtoft también lo guía a través del proceso de creación de una aplicación web alojada en ThisHereWeb.com.

Este proyecto seguirá evolucionando durante los próximos meses. Solo en la última semana he visto varias adiciones. En plataformas que admiten aplicaciones web de forma nativa, como Windows 10, Chrome OS y Firefox OS, ManifoldJS creará paquetes nativos. En plataformas como iOS y Android, se usa Cordova, lo que permite a un desarrollador escribir una aplicación web, pero aún acceder a muchas de las funciones nativas de un dispositivo, ya sea a través de Cordova o de la comunidad de complementos activa.

the process of creating a hosted web appthe process of creating a hosted web appthe process of creating a hosted web app

Jeff Burtoft explica muy bien las aplicaciones web alojadas en su blog y en su reciente //BUILD/presentation. El video de //BUILD 2015 muestra exactamente lo que puede hacer con esta tecnología.

Mi configuración

Estoy haciendo este tutorial desde una MacBook Pro que ejecuta Yosemite 10.10.3, Visual Studio Code como mi IDE y MAMP como mi servidor web local. Luego utilizo Source Tree como mi herramienta de Git preferida, y alojo mi código de fuente abierta en GitHub, y lo implementaré en iOS a través de Xcode.

Lo sé, un Evangelista Tecnológico en Microsoft que usa productos de Apple y les habla sobre herramientas de código abierto. ¿A qué viene el mundo?

Poniéndolo todo junto

Lo primero que hice fue descargar las muestras de Famo.us de su sitio web. Hice los cambios apropiados en su archivo SlideData.js, como mencioné anteriormente, para que mi proyecto pudiera extraer feeds de Picasa. Lo subí a GitHub para que tengas una muestra que funcione de inmediato. Ve el sitio en vivo y dirígete a GitHub para descargar el proyecto de trabajo.

Luego, inicié sesión en Azure y creé un nuevo sitio web. Puedes obtener 200 $ en créditos de prueba de Azure o comunicarte conmigo para obtener una membresía gratuita de BizSpark para ti o tu startup, que otorga 150 $/mes de alojamiento web.

Luego apunto este nuevo sitio web de Azure a mi repositorio de GitHub. Scott Hanselman explica cómo hacer esto en unos pocos pasos. A partir de ahí, Azure supervisa mi repositorio de GitHub para este proyecto, y Azure detecta inmediatamente cualquier cambio que haga en ese repositorio, y los últimos cambios se pueden ver en el sitio web y el proyecto de manifiesto inmediatamente.

Azure setup pageAzure setup pageAzure setup page

Generando el manifiesto de la aplicación

A continuación, necesitamos usar ManifoldJS para "envolver" nuestra aplicación web para que podamos implementarla en las distintas tiendas de aplicaciones. Firefox OS y Chrome admiten esto de forma nativa, pero para iOS, Android y Windows 8 o 10, necesitamos utilizar Cordova. ManifoldJS generará un archivo de manifiesto de la aplicación para nosotros, que tiene toda la información que las tiendas de aplicaciones necesitan para poner en marcha nuestro proyecto.

Tienes dos opciones aquí: Utiliza el generador de aplicaciones web de Manifold, que proporcionará una GUI e instrucciones paso a paso, o ejecutarlo a través de la línea de comandos.

Manifold Web App GeneratorManifold Web App GeneratorManifold Web App Generator

Alternativamente, para la línea de comando, primero debes instalar ManifoldJS. Asegúrate de tener NPM instalado y luego ejecuta:

¿Conmigo hasta ahora? Ahora podemos llamar a ManifoldJS y hacer que nos genere una carpeta con proyectos para cada una de las plataformas. En la terminal introduje:

La ruta que sigue a -d le dice a ManifoldJS en qué directorio quiero que se almacene. Poco después, deberías ver la terminal construyendo el proyecto ante tus ojos.

terminal building the project before your eyesterminal building the project before your eyesterminal building the project before your eyes

Navega hasta donde almacenaste este proyecto y encontrarás una serie de carpetas allí. Luego navegué a cordova/platform/iOS y busqué el archivo que termina en xcodeproj, ya que quería probarlo en el simulador de iOS. Haz doble clic en ese icono para abrir el proyecto en Xcode.

Navigate to where you stored this projectNavigate to where you stored this projectNavigate to where you stored this project

Y ahí lo tenemos, una aplicación Famo.us que se ejecuta dentro de Cordova en iOS.

Famous application running inside of Cordova on iOSFamous application running inside of Cordova on iOSFamous application running inside of Cordova on iOS

Envolviéndolo todo

Planeo probar Angular + Famo.us en una de mis próximas demostraciones, además de incluirlo en ManifoldJS para probar el rendimiento en iOS. Si estás buscando depurar estas aplicaciones, ¿podría sugerirle que consultes VorlonJS? Es independiente de la plataforma, lleva un minuto configurarlo y, en el enlace anterior, ilustré cómo puedo probar aplicaciones en un navegador de escritorio, así como en dispositivos móviles.

Realmente me gustaría hacer una prueba de estrés de lo que son capaces los navegadores móviles cuando combinan un framework como Famo.us y Cordova, así que busco una muestra que involucre a esos dos pronto. A medida que la web continúa evolucionando, Microsoft continuará actualizando su sitio dev.modern.ie/platform/status/ para reflejar los cambios en el nuevo navegador Edge. El anuncio más emocionante para mí, sin embargo, es el cambio reciente de la etiqueta "in development" a "in edge" para asm.js. Pronto podremos ejecutar aplicaciones nativas dentro del navegador. Es un momento emocionante para trabajar en la Web.

Más práctica con JavaScript

Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de JavaScript de código abierto, y tenemos la misión de crear mucho más con Microsoft Edge.

Estos son algunos recursos excelentes de mi equipo y colegas:

Y algunas herramientas gratuitas para comenzar: Visual Studio Code, Azure Trial y herramientas de prueba entre navegadores, todas ellas disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Nos complace compartir contigo Microsoft Edge y el nuevo motor de renderizado EdgeHTML. Obtén máquinas virtuales gratuitas o prueba de forma remota en tu dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.