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 de física 3D que puede renderizar a DOM, Canvas o WebGL En resumen, puede 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 del podcast de la plataforma web Recientemente, el CEO de Famou.us, Steve Newcomb, participó 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 ColectorJS, una herramienta que le permite empaquetar su 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 excelente rendimiento móvil, así como comprender cuán sencillo fue el proceso para empaquetar mi aplicación web como 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 pena porque realmente es capaz de crear 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 sorteando el cuello de botella para la mayoría de las aplicaciones web, que es el DOM, utilizando WebGL y abstrayendo su trabajo del DOM. Más sobre esto más adelante.

ManifoldJS tiene como objetivo hacer que la vida de un desarrollador móvil sea más fácil que nunca al utilizar Manifiestos de aplicaciones web, que permite que los sitios web declaren propiedades similares a las de una aplicación. ManifoldJS usa ese estándar para aquellas plataformas que lo admiten, pero recurre a Cordova para aquellas que no lo admiten. 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 aplicaciones web alojadas). Con esto, ahora podemos empaquetar sitios web y crear aplicaciones híbridas que se pueden implementar en las distintas 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 en gran medida una base de código. No existe una panacea para el desarrollo móvil, pero esto ciertamente facilita el proceso.

Primeros pasos con Famo.us

Famo.us tiene una página universitaria, 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 de cómo funciona el marco. También tienen integración con otras bibliotecas, como Angular, pero todavía no he tenido tiempo de profundizar en eso.

Luego, hice clic en el enlace en la esquina superior derecha de la página para descargue su paquete de guías y dos proyectos de ejemplo. Esto es diferente de lo que es encontrado en su GitHub.

Abrí la carpeta del famoso kit de inicio 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 dibuja en la pantalla como si vinieran recién sacadas de una cámara Polaroid. Puede encontrar una versión en vivo de esto en mi sitio.

Fuera de la caja, sin embargo, no funcionó.

Sin embargo, pronto me di cuenta de cuál era el problema. Su muestra apuntaba a una URL de Picasa no válida.. Han pasado seis meses desde que se lanzó la muestra, por lo que espero que ya se haya corregido, ya que me imagino que esto sería un impedimento para que varias personas aprendan a usar este fantástico marco.

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 el frente de la cámara, y se expone rápidamente ante sus 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 aquí.

Hay otro proyecto en la carpeta /timbre, pero tampoco pude hacerlo funcionar. Sin embargo, puede encontrar el tutorial asociado aquí.y al menos recorre el proceso de construcción tú 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 más, este artículo en Medium es una excelente descripción general.

Del sitio web Famo.us:

La interacción con el DOM está plagada de problemas de rendimiento. Famo.us abstrae la gestión DOM […] Si inspecciona un sitio web que ejecuta Famo.us, notará 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 eso es los forma de obtener posicionamiento relativo, burbujeo de eventos y estructura semántica. Sin embargo, cada uno de estos tiene un costo: el posicionamiento relativo provoca reflujos de página lentos en el contenido animado; el burbujeo de eventos es costoso 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, necesitábamos sortear estas ineficiencias.

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

En lugar de escribir cualquier código HTML, todo nuestro código de Famo.us se hará en JavaScript. Eche un vistazo a algunas de sus muestras en CodePen para obtener una buena comprensión de qué tan poco HTML escribe realmente (ninguno) y cómo se ve el JavaScript. En un próximo tutorial, profundizaré mucho 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. Echa un vistazo a su GitHub para 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 solo. 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 características nativas de un dispositivo, ya sea a través de Cordova mismo o de la comunidad activa de complementos.

Jeff Burtoft explica muy bien las aplicaciones web alojadas en su blog o en su reciente //CONSTRUIR/ presentación.
Este video de //BUILD 2015 muestra exactamente lo que puede hacer con esta tecnología

Mi configuración

Estoy haciendo este tutorial desde un Mac Book Pro con Yosemite 10.10.3, Visual Studio Code como mi IDEy MAMP como mi servidor web local. Luego utilizo Source Tree como mi herramienta Git preferida y alojo mi código fuente abierto en GitHuby lo implementaré en iOS a través de Xcode.

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

Poniendolo todo junto

Lo primero que hice fue descargar las muestras de Famo.us de su sitio web. Realicé los cambios apropiados en su archivo SlideData.js, como mencioné anteriormente, para que mi proyecto pudiera obtener fuentes de Picasa. Lo subí a GitHub para que tuvieras una muestra que funcionó de inmediato. Ver el sitio en vivo aquí 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 aquí o comuníquese conmigo acerca de un Membresía gratuita de BizSpark para ti o tu startup, que otorga $150/mes de hospedaje web. Luego señalo este nuevo sitio web de Azure en mi repositorio de GitHub. Scott Hanselman explica cómo hacer esto en unos pocos pasos. A partir de ahí, tengo a Azure monitoreando mi repositorio de GitHub para este proyecto, y Azure recoge inmediatamente cualquier cambio que envíe a ese repositorio, y los cambios más recientes se pueden ver en el sitio web y en el proyecto Manifest de inmediato.

Generating the App Manifest

A continuación, debemos 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 App Manifest para nosotros, que tiene toda la información que las tiendas de aplicaciones necesitan para poner en marcha nuestro proyecto.

Aquí tiene dos opciones: Usar el Generador de aplicaciones web múltiplesque proporcionará una GUI e instrucciones paso a paso, o ejecutarlo a través de la línea de comandos.

Alternativamente, para la línea de comando, primero debe instalar ManifoldJS. Asegúrese de tener NPM instalado, entonces corre:

  npm install -g manifoldjs/manifoldjs 

Conmigo hasta ahora? Ahora podemos llamar a Manifold y hacer que genere una carpeta para nosotros con proyectos para cada una de las plataformas. En la terminal ingresé:

  ManifoldJS -d /Users/DaveVoyles/Documents/FamousManifold http://famous-camera-app.azurewebsites.net/final/ 

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.

Navegue hasta donde almacenó este proyecto y encontrará una serie de carpetas allí. Luego navegué a cordova/platforms/iOS y busqué el archivo que termina en xcodeproj, ya que quería probar esto en el simulador de iOS. Haga doble clic en ese icono para abrir el proyecto en Xcode.

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

Envolviéndolo todo

Planeo probar Angular + Famo.us en una de mis próximas demostraciones, además de incluirlo en Manifold para probar el rendimiento en iOS. Si está buscando depurar estas aplicaciones, le sugiero mirando VorlonJS? Es independiente de la plataforma, toma un minuto configurarlo, y en el enlace anterior, ilustro cómo puedo probar aplicaciones en un navegador de escritorio, así como en dispositivos móviles.

Realmente me gustaría hacer una prueba de esfuerzo de lo que son capaces los navegadores móviles al combinar un marco como Famo.us y Cordova, así que busque una muestra que involucre a esos dos pronto. A medida que la web continúa evolucionando, Microsoft continuará actualizando su dev.modern.ie/plataforma/estado/ sitio para reflejar los cambios en el nuevo navegador Edge. Sin embargo, el anuncio más emocionante para mí es el cambio reciente de la etiqueta «en desarrollo» a «en el borde» para asm.js. Pronto podremos ejecutar aplicaciones nativas dentro del navegador — Es un momento emocionante para trabajar en la web.

Más prácticas con JavaScript

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

• Innovaciones en plataformas web y aplicaciones web alojadas (una inmersión profunda en temas como manifold.JS
• Cumbre web de Microsoft Edge 2015 (una serie completa de lo que puede esperar con el nuevo navegador, las nuevas características de la plataforma web y los oradores invitados de la comunidad)
• Compilación de //BUILD/ y Windows 10 (incluido el nuevo motor de JavaScript para sitios y aplicaciones)
• Avance de JavaScript sin romper la Web (Discurso de apertura reciente de Christian Heilmann)
• Consejos prácticos de rendimiento para hacer que su HTML/JavaScript sea más rápido (una serie de 7 partes desde el diseño receptivo hasta los juegos casuales y la optimización del rendimiento)
• La plataforma web moderna JumpStart (los fundamentos de HTML, CSS y JS)

Y algunas herramientas gratuitas para empezar: código de estudio visual, Prueba de Azurey herramientas de prueba de navegador cruzado – todos disponibles para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y el nuevo Motor de renderizado EdgeHTML contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/

(dpe)