Programación Reactiva, Javascript Isomorfo y Meteorjs !

24
Programación Reactiva www.grandpa.im

description

Programación Reactiva, Javascript Isomorfo y Meteorjs ! Reactive Programming, DerbyJs, Mojito, TogetherJs, MeteorJs, Useful Links Modulus.io etc!!

Transcript of Programación Reactiva, Javascript Isomorfo y Meteorjs !

Page 1: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Programación Reactiva

www.grandpa.im

Page 2: Programación Reactiva, Javascript Isomorfo y Meteorjs !

¿Qué es?“La programación reactiva es un paradigma de programación orientado a flujos de datos y la propagación de cambios”(Wikipedia)Manifiesto de Programación Reactiva:http://www.reactivemanifesto.org/

Page 3: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Javascript IsomorfoAntes: Desde los labores de la Web, la navegación la experiencia ha trabajado de esta manera: Un navegador web pediría una página en particular (por ejemplo, “ http://www.geocities.com/ ")-Causando un servidor en algún lugar en la Internet para generar una página HTML y enviarlo de vuelta.

Esto ha funcionado bien porque los navegadores no eran muy poderosos y las páginas HTML representaban documentos que eran en su mayoría estáticos y autónomos. JavaScript, fue creada para permitir que las páginas web fuerán más dinámicas, no permitía mucho más que presentaciones de imágenes y la era del diseño Jquery y efectos prettys.

Page 4: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Javascript IsomorfoTraducción parcial del Post http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ por Spike Brehm

Después de años de avances en la computación personal, tecnólogos creativos han llevado a la web a sus límites , y los navegadores web han evolucionado para mantenerse al día.Ahora, la Web se ha convertido en una plataforma de aplicaciones con todas las funciones, y tiempos de ejecución de JavaScript rápida y estándares HTML5 ha permitido a los desarrolladores crear aplicaciones ricas en las que antes sólo eran posibles en las plataformas nativas.

¿Aplicaciones ricas en el navegador?

Page 5: Programación Reactiva, Javascript Isomorfo y Meteorjs !

¿Aplicaciones en el navegador?

Page 6: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Luego llegaron las Apps Single PageNo pasó mucho tiempo antes de que los desarrolladores comenzaron a construir aplicaciones enteras en el navegador usando JavaScript, aprovechando estas nuevas capacidades. Aplicaciones como Gmail, el clásico ejemplo de la aplicación de una sola página, pueden responder inmediatamente a las interacciones del usuario, ya no tener que hacer una ida y vuelta al servidor acaba de hacer una nueva página.

Las bibliotecas como Backbone . js, Ember.js y Angular.js se conocen como cliente MVC (Modelo-Vista-Controlador) o MVVM (Modelo-Vista-ViewModel) bibliotecas a menudo. La arquitectura MVC del lado del cliente típico es como la siguiente:

Page 7: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Problemas en el paraísoEn la práctica, sin embargo, hay algunos defectos fatales con este enfoque que le impiden ser adecuado para muchos casos de uso.

SEO Una aplicación que sólo se puede ejecutar en el lado del cliente no puede servir de HTML para los rastreadores, por lo que tienen mala SEO by default. Web crawlers función haciendo una petición a un servidor web y la interpretación de los resultados, pero si el servidor devuelve una página en blanco, no es de mucho valor. Hay soluciones, pero no sin saltar a través de algunos aros.

Page 8: Programación Reactiva, Javascript Isomorfo y Meteorjs !

RendimientoPor la misma razón, si el servidor no hace que una página de HTML, sino que espera a JavaScript del lado del cliente para hacerlo, los usuarios experimentarán unos segundos críticos de la página en blanco o spinner carga antes de ver el contenido de la página. Hay muchos estudios que muestran el efecto drástico un sitio lento tiene en los usuarios, y por lo tanto los ingresos. Amazon afirma que cada reducción de http://venturebeat.com/2013/11/08/the-future-of-web-apps-is-ready-isomorphic-javascript/00 ms en el tiempo de carga de página obtiene ingresos por el uno por ciento. Twitter pasó un año y 40 ingenieros de la reconstrucción de su sitio para hacer en el servidor en lugar del cliente, reclamando una mejora de 5 veces en el tiempo de carga percibida.

Page 9: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Mientras que el caso ideal puede conducir a una bonita y clara separación de las preocupaciones, inevitablemente, algunos trozos de lógica de la aplicación o la vista lógica terminan duplicado entre el cliente y el servidor, a menudo en diferentes idiomas.

Los ejemplos más comunes son la fecha y el formato de moneda, validaciones de formulario y la lógica de enrutamiento. . Esto hace que el mantenimiento sea una pesadilla, especialmente para las aplicaciones más complejas.Algunos desarrolladores, incluido yo mismo, nos sentimos mordidos por este enfoque que es a menudo sólo después de haber invertido tiempo y esfuerzo para construir una aplicación de una sola página que empezamos a encontrar sus inconvenientes.

Mantenibilidad

Page 10: Programación Reactiva, Javascript Isomorfo y Meteorjs !

¡Una buena solución!

Page 11: Programación Reactiva, Javascript Isomorfo y Meteorjs !

A medida que más organizaciones se sienten cómodos con Node.js para correr en producción, es inevitable que cada vez más aplicaciones web empezarán a compartir código entre su cliente y el código del servidor. Es importante recordar que JavaScript isomorfo es un espectro - puede comenzar con sólo compartir las plantillas, el progreso va desde la capa vista completa de la aplicación, hasta el final llegando a la mayoría de la lógica de negocio de la aplicación. Exactamente qué y cómo el código JavaScript se comparte entre el entorno depende por completo de la aplicación que se está construyendo y su conjunto único de restricciones.

La vista desde aquí

Page 12: Programación Reactiva, Javascript Isomorfo y Meteorjs !

En Airbnb, se empezo a rediseñar todo el cliente en proceso de construcción de usar Node.js herramientas basadas en como Gruntjs y Browserify. Nuestra aplicación principal Rails puede nunca ser totalmente sustituida por una aplicación de Node.js, pero al adoptar estas herramientas se hace cada vez más fácil de compartir ciertos trozos de JavaScript y plantillas entre entornosLo escuchaste aquí primero -. Dentro unos años, será raro ver una aplicación web avanzada que no ejecuta algo de JavaScript en el servidor.

La vista desde aquí

Page 13: Programación Reactiva, Javascript Isomorfo y Meteorjs !
Page 14: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Resumen

Sincroniza automáticamente los datos entre navegadores, servidores y bases de datos.

El más “mágico” de todos, un simple script y wua la!! Toda una API para realtime

Extensa API con módulos para ejecutar código

Buen founding, excelente equipo de desarrollo y grandiosa comunidad.

Page 15: Programación Reactiva, Javascript Isomorfo y Meteorjs !

MojitoMojito es un framework para el desarrollo de aplicaciones web usando JavaScript o HTML5 que Yahoo! ha

decidido liberar con la idea de crear una comunidad de desarrolladores alrededor de este framework para que,

gracias a su adopción, el proyecto crezca y se termine convirtiendo en un estándar. Gracias a Mojito, los

desarrolladores podrán trabajar a alto nivel y abstraerse de la plataforma destino, evitando la necesidad de

conocer la programación en Android, iOS o BlackBerry y obteniendo una versión de la aplicación para cada una

de las plataformas destino.

De hecho, una de las ventajas de usar este framework es que éste está optimizado para generar aplicaciones muy

optimizadas para trabajar en movilidad, es decir, para superar las adversidades del uso de conexiones de datos

móviles (cortes, caída del nivel de señal, etc) gracias a la flexibilidad de realizar la ejecución de los procesos tanto

desde el lado del servidor como el del cliente.

http://developer.yahoo.com/cocktails/mojito/ Official Page

Page 16: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Derby incluye un potente motor de sincronización de datos llamada Racer. A pesar de que funciona de forma diferente , Racer es en Derby algo así como ActiveRecord es a Rails. Racer sincroniza automáticamente los datos entre navegadores , servidores y bases de datos. Suscribciones a modelos y a los cambios en los objetos y consultas específicas , lo que permite un control granular de la propagación de datos sin definir canales. Racer es compatible con la resolución de conflictos “Out of the box”, lo que simplifica enormemente la creación de aplicaciones multi-usuario.

Muy bueno para hacer aplicaciones REST, Derby está basado en Express.js el cual tiene un excelente soporte para aplicaciones REST y si estas buscando un framework para una aplicación REST y NO html mejor usar librerías como Express.js y no Derby, de igual forma si no estás pensando en apps con funcionalidades “multiusuario” o “realtime” es mejor no usar Derby.

Ejemplos con Derby: http://todos.derbyjs.com/derby → Todos

http://chat.derbyjs.com/lobby → chat

Derbyjs

Page 17: Programación Reactiva, Javascript Isomorfo y Meteorjs !

MeteorJS

Nuestro Equipo comenzócon MeteorJS

Page 18: Programación Reactiva, Javascript Isomorfo y Meteorjs !

¿Qué es MeteorJS?Meteor es una plataforma para crear aplicaciones web en tiempo real construida sobre Node.js. Meteor se localiza entre la base de datos de la aplicación y su interfaz de usuario y se asegura de que ambas partes estén sincronizadas.

Como Meteor usa Node.js, se utiliza JavaScript en el cliente y en el servidor. Y más aún, Meteor es capaz de compartir código entre ambos entornos.

hot code pushes baby!, gracias al canal que dejamos abierto cada vez que se actualiza el código cliente en el servidor este lo sirve directamente a los clientes que estén conectados.

¿No es maravilloso? olvídate de esas eternas tensas esperas a que se limpien las caches de los servidores para ver el efecto de tu pase a producción, tu éxito o tu fracaso sin esperas.

Page 19: Programación Reactiva, Javascript Isomorfo y Meteorjs !

¿Por qué gastar tiempo aprendiendo Meteor en lugar de otro framework web? Dejando a un lado las características de Meteor, creemos que todo se reduce a una sola cosa: Meteor es fácil de aprender.

Meteor permite crear una aplicación web en tiempo real en cuestión de horas. Y si ya hemos hecho desarrollo web, estaremos familiarizados con JavaScript, y ni siquiera tendremos que aprender un nuevo lenguaje.

Meteor podría ser el marco ideal para nuestras necesidades, quizás no. Pero ¿por qué no probarlo y descubrirlo por nosotros mismos?.

¿Porque Meteorjs?

Page 20: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Llegando un tantico lejos...

Page 21: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Llegando un tantico lejos...

- Si hay seguridad de los datos- Es posible tener upload de archivos reactivo, roles y control sobre el “Hot code”- Gran comunidad...Fast-render, Iron-router, Atmosphere, Roles…- Una app controlada en producción, sin miedo a seguir desarrollando sobre ella- No es magia sino al principio, buena curva de aprendizaje y enfoque sobre todo en la seguridad de la información (Publicaciones, suscripciones y métodos)- Muchos retos en el camino, pero siempre con una comunidad dispuesta a aportar en el proceso- Facil deploy en desarrollo y gratis!!, múltiples opciones para deploys en producción.

Page 22: Programación Reactiva, Javascript Isomorfo y Meteorjs !

-http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ → Javascript Isomorfo

https://www.meteor.com/ → Oficial Page Meteorjshttp://es.discovermeteor.com/ → El mejor recurso actual para aprender Meteorjs en EspañolPorque Fibers en Meteorjs?-http://meteorhacks.com/fibers-eventloop-and-meteor.html-https://modulus.io/ → Excelente Cloud para aplicaciones Nodejs y Meteorjs, Incribete y recibe 15 dolares para probarla!

Links recomendados

Page 23: Programación Reactiva, Javascript Isomorfo y Meteorjs !

- http://www.goodui.org/ → Una de las mejores guías de Ux, simple y al grano.- https://www.smartfile.com/ → Un CDN que utilizamos, es excelente :D.- http://meteorhacks.com/pro-meteor/ → Production Users' Guide To Meteor

- https://atmospherejs.com/ → Sistema de paquetes de MeteorJs(Yo compartí el de gráficas “nvd3js” y mi hermano el de validaciones en el servidor “Nice”) Hay excelentes paquetes!!- http://nvd3.org/ → Reusable charts for D3, lo utilizamos bastante, no tiene muchas gráficas y opciones pero esta bueno.- https://university.mongodb.com/ → Para los que quieran aprender Mongodb :D!Y bueno, posteen más, queremos que la comunidad siga creciendo, muchas gracias!

Otros links(Ux, Dbs,...whatever)

Page 24: Programación Reactiva, Javascript Isomorfo y Meteorjs !

Muchas gracias

Equipo GrandpaLuis Álvarez @goluis

Julián Alvarez @ouyeahbro

www.grandpa.im