Share
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 de la plataforma web Podcast tuvo recientemente al CEO de Famo.us, Steve Newcomb en el podcast para hablar sobre el rendimiento móvil y su próximo modo mixto. Este fue un momento perfecto, ya que Microsoft acaba de lanzar ManifoldJS, 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 gran rendimiento móvil, así como tener una comprensión de lo sencillo que fue el proceso para empaquetar mi aplicación web como una aplicación móvil..
La web no es necesariamente conocida por crear aplicaciones de alto rendimiento, lo que es una pena porque realmente es capaz de abrir aplicaciones interactivas rápidas, pero lamentablemente ha sido plagada por el 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 pretende resolver esto, sortear el cuello de botella para la mayoría de las aplicaciones web, que es el DOM, y utilizar WebGL y abstraer su trabajo del DOM. Más sobre esto más adelante.
ManifoldJS tiene como objetivo hacer que la vida de un desarrollador de dispositivos móviles sea más fácil que nunca utilizando los Web App Manifests, permitiendo que los sitios web declaren propiedades similares a las aplicaciones. ManifoldJS usa ese estándar para aquellas plataformas que lo soportan, pero recurre a Cordova para aquellas que no lo hacen. Cordova es genial, 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 varias tiendas de aplicaciones, sin dejar de aprovechar muchos aspectos nativos para cada dispositivo (contactos, calendario, almacenamiento de archivos, giroscopios, GPS, etc.).
Cuando combinamos los dos, podemos crear aplicaciones a la velocidad nativa que se pueden implementar en varias tiendas de aplicaciones, utilizando en gran parte un código base. No hay una solución mágica para el desarrollo móvil, pero esto ciertamente facilita el proceso..
Famo.us tiene una página de la Universidad, que proporciona un excelente punto de partida para comprender cómo funciona el marco, así como para ofrecer algunos ejemplos de proyectos. Repasé todos los cursos en el sitio de la Universidad y obtuve una comprensión bastante clara del marco. También tienen integración con otras bibliotecas, como Angular, pero aún no he tenido tiempo de profundizar 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í el kit de inicio famoso carpeta y navegado a / referencia-tutoriales y encontrado carpetas para /diapositivas y /timbre. La presentación de diapositivas es bastante inteligente; toma imágenes de Picasa y las dibuja en la pantalla como si hubieran salido de una cámara Polaroid. Puedes 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 hacia una URL de Picasa no válida. Han pasado más de seis meses desde que se publicó la muestra, por lo que espero que se corrija ahora, ya que me imagino que esto sería un obstáculo para muchas personas que aprenden a usar este marco fantástico..
Una vez que cambié la URL en el archivo SlideData.js, todo estaba bien. Lo que el proyecto hace 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 imagen desde la parte frontal de la cámara, y se expone rápidamente ante sus ojos, junto con algunos datos físicos agradables aplicados 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 el /timbre carpeta, pero tampoco pude hacer que eso funcionara. Sin embargo, puede encontrar el tutorial asociado en el sitio web Famo.us, y al menos recorrer el proceso de creación del mismo..
No voy a dedicar demasiado tiempo a profundizar en los detalles de Famo.us aquí, pero si realmente quieres profundizar, hay un artículo en Medium que ofrece una gran visión general..
Desde el sitio web de Famo.us:
La interacción con el DOM está plagada de problemas de rendimiento. Famo.us abstrae la administración de DOM [...] Si inspecciona un sitio web que ejecuta Famo.us, notará que 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 la forma de obtener posicionamiento relativo, burbujeo de eventos y estructura semántica. Sin embargo, hay un costo para cada uno de estos: el posicionamiento relativo causa un lento flujo de páginas en el contenido animado; la propagación de eventos es costosa cuando la propagación de eventos no se maneja 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, necesitamos evitar estas ineficiencias..
Utilizando la primitiva CSS3 -webkit-transform: matrix3d, Junto con la aceleración de hardware que ofrece, podemos obtener un rendimiento mucho mayor que el que podríamos obtener si solo hiciéramos algunos retoques con el DOM. Cada vez que tocas el DOM, es caro. Nicole Sullivan, una fantástica desarrolladora web conocida por su trabajo en CSS, ofrece una excelente explicación de los reflujos y la repintación dentro del navegador y cómo podemos evitar estos problemas. Afortunadamente, Famo.us nos extrae todo esto..
En lugar de escribir cualquier código HTML, todo nuestro código Famo.us se realizará en JavaScript. Eche un vistazo a algunas de sus muestras en CodePen para comprender mejor el poco HTML que escribe (ninguno) y cómo se ve el JavaScript. En un próximo tutorial, profundizaré mucho más en profundidad con Famo.us que aquí.
¡Ahora estamos hablando mi idioma! Algunas aplicaciones de alto rendimiento en el navegador.!
El proceso de instalación de ManifoldJS es bastante sencillo. Echa un vistazo a su página de GitHub para más información. Jeff Burtoft también lo guía en el proceso de creación de una aplicación web alojada en ThisHereWeb.com.
Este proyecto continuará evolucionando en los próximos meses. Solo en la última semana he visto varias adiciones. En plataformas que soportan de forma nativa aplicaciones web, como Windows 10, Chrome OS y Firefox OS, ManifoldJS creará paquetes nativos. En plataformas como iOS y Android, se utiliza Cordova, que permite a un desarrollador escribir una aplicación web pero aún así acceder a muchas de las características nativas de un dispositivo, ya sea a través de Cordova o la comunidad activa de complementos.
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.
Estoy realizando este tutorial desde un MacBook Pro con Yosemite 10.10.3, Visual Studio Code como mi IDE y MAMP como mi servidor web local. Luego uso Source Tree como la herramienta de Git de mi elección, y hospedo mi código de código abierto en GitHub, y lo implementaré en iOS a través de Xcode.
Lo sé, un Tech Evangelist en Microsoft que usa productos de Apple y le informa acerca de las herramientas de código abierto. ¿A qué viene el mundo??
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 recibir fuentes de Picasa. Lo subí a GitHub para que tenga una muestra que funcione de inmediato. Vea el sitio en vivo y diríjase a GitHub para descargar el proyecto de trabajo.
Luego, inicié sesión en Azure y creé un nuevo sitio web. Puede obtener $ 200 en créditos de prueba de Azure o comunicarse conmigo para obtener una membresía gratuita de BizSpark para usted o su inicio, que otorga $ 150 por mes de alojamiento web.
Luego dirijo 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í, tengo a Azure monitoreando mi repositorio de GitHub para este proyecto, y todos los cambios que presiona en ese repositorio son inmediatamente recogidos por Azure, y los últimos cambios se pueden ver en el sitio web y el proyecto manifiesto inmediatamente.
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 de manifiesto de la aplicación para nosotros, que contiene toda la información que las tiendas de aplicaciones necesitan para llevar a cabo nuestro proyecto..
Tiene dos opciones aquí: use el generador de aplicaciones web de Manifold, que proporcionará una GUI e instrucciones paso a paso, o ejecútelo a través de la línea de comandos.
Alternativamente, para la línea de comandos, primero debe instalar ManifoldJS. Asegúrese de tener instalado NPM y luego ejecute:
npm install -g manifoldjs / manifoldjs
Conmigo hasta ahora? Ahora podemos llamar a ManifoldJS y hacer que genere una carpeta para nosotros con proyectos para cada una de las plataformas. En la terminal entré:
ManifoldJS -d / Users / DaveVoyles / Documents / FamousManifold http://famous-camera-app.azurewebsites.net/final/
El camino que sigue -re le dice a ManifoldJS en qué directorio quiero que esté almacenado. Poco después, debería ver el terminal que está construyendo el proyecto ante sus ojos..
Navega hasta donde guardaste este proyecto y encontrarás una serie de carpetas allí. Entonces navegué a cordova / plataformas / iOS y busqué el archivo que termina en xcodeproj, Como 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.
Planeo probar Angular + Famo.us en una de mis próximas demostraciones, así como envolver eso en ManifoldJS para probar el rendimiento en iOS. Si desea depurar estas aplicaciones, ¿puedo sugerir que busque 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 estrés de lo que son capaces los navegadores móviles cuando combinan 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 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 "en desarrollo" a "in edge" para asm.js. Pronto podremos ejecutar aplicaciones nativas dentro del navegador. Es un momento emocionante para estar trabajando en la web..
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 estamos en la misión de crear mucho más con Microsoft Edge.
Aquí hay algunos grandes recursos de mi equipo y colegas:
Y algunas herramientas gratuitas para comenzar: Visual Studio Code, Azure Trial y herramientas de prueba en varios navegadores, todas disponibles para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
Accentsconagua