Programacin

Reactiva
www.grandpa.im

Qu es?
La programacin reactiva es un paradigma de
programacin orientado a flujos de datos y la
propagacin de cambios
(Wikipedia)
Manifiesto de Programacin Reactiva:
http://www.reactivemanifesto.org/

Javascript Isomorfo
Antes: Desde los labores de la Web, la navegacin la experiencia ha trabajado de esta manera:
Un navegador web pedira una pgina en particular (por ejemplo, http://www.geocities.com/ ")
-Causando un servidor en algn lugar en la Internet para generar una pgina HTML y enviarlo de
vuelta.

Esto ha funcionado bien porque los navegadores no eran muy poderosos y las pginas HTML
representaban documentos que eran en su mayora estticos y autnomos.
JavaScript, fue creada para permitir que las pginas web fuern ms dinmicas, no permita mucho
ms que presentaciones de imgenes y la era del diseo Jquery y efectos prettys.

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

Despus de aos de avances en la computacin personal, tecnlogos creativos han llevado a la

web a sus lmites , y los navegadores web han evolucionado para mantenerse al da.
Ahora, la Web se ha convertido en una plataforma de aplicaciones con todas las funciones, y
tiempos de ejecucin de JavaScript rpida y estndares HTML5 ha permitido a los
desarrolladores crear aplicaciones ricas en las que antes slo eran posibles en las plataformas
nativas.

Aplicaciones ricas en el navegador?

Aplicaciones en el navegador?

Luego llegaron las Apps

Single Page
No 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 clsico ejemplo de la aplicacin de una sola pgina, pueden
responder inmediatamente a las interacciones del usuario, ya no tener que hacer una ida y
vuelta al servidor acaba de hacer una nueva pgina.
Las bibliotecas como Backbone . js, Ember.js y Angular.js se conocen como cliente MVC (ModeloVista-Controlador) o MVVM (Modelo-Vista-ViewModel) bibliotecas a menudo. La arquitectura MVC
del lado del cliente tpico es como la siguiente:

Problemas en el paraso
En la prctica, sin embargo, hay algunos defectos fatales con este enfoque que le impiden ser
adecuado para muchos casos de uso.
SEO
Una aplicacin que slo 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 funcin haciendo una
peticin a un servidor web y la interpretacin de los resultados, pero si el servidor devuelve una
pgina en blanco, no es de mucho valor. Hay soluciones, pero no sin saltar a travs de algunos
aros.

Rendimiento
Por la misma razn, si el servidor no hace que una pgina de HTML, sino que espera a JavaScript
del lado del cliente para hacerlo, los usuarios experimentarn unos segundos crticos de la
pgina en blanco o spinner carga antes de ver el contenido de la pgina. Hay muchos estudios
que muestran el efecto drstico un sitio lento tiene en los usuarios, y por lo tanto los ingresos.
Amazon afirma que cada reduccin de http://venturebeat.com/2013/11/08/the-future-of-webapps-is-ready-isomorphic-javascript/00 ms en el tiempo de carga de pgina obtiene ingresos por
el uno por ciento. Twitter pas un ao y 40 ingenieros de la reconstruccin de su sitio para hacer
en el servidor en lugar del cliente, reclamando una mejora de 5 veces en el tiempo de carga
percibida.

Mantenibilidad
Mientras que el caso ideal puede conducir a una bonita y clara separacin de las preocupaciones,
inevitablemente, algunos trozos de lgica de la aplicacin o la vista lgica terminan duplicado
entre el cliente y el servidor, a menudo en diferentes idiomas.
Los ejemplos ms comunes son la fecha y el formato de moneda, validaciones de formulario y la
lgica de enrutamiento. . Esto hace que el mantenimiento sea una pesadilla, especialmente para
las aplicaciones ms complejas.
Algunos desarrolladores, incluido yo mismo, nos sentimos mordidos por este enfoque que es a
menudo slo despus de haber invertido tiempo y esfuerzo para construir una aplicacin de una
sola pgina que empezamos a encontrar sus inconvenientes.

Una buena solucin!

La vista desde aqu

A medida que ms organizaciones se sienten cmodos con Node.js para correr en produccin,
es inevitable que cada vez ms aplicaciones web empezarn a compartir cdigo entre su cliente y
el cdigo del servidor.
Es importante recordar que JavaScript isomorfo es un espectro - puede comenzar con slo
compartir las plantillas, el progreso va desde la capa vista completa de la aplicacin, hasta el final
llegando a la mayora de la lgica de negocio de la aplicacin. Exactamente qu y cmo el cdigo
JavaScript se comparte entre el entorno depende por completo de la aplicacin que se est
construyendo y su conjunto nico de restricciones.

La vista desde aqu

En Airbnb, se empezo a redisear todo el cliente en proceso de construccin de usar Node.js
herramientas basadas en como Gruntjs y Browserify. Nuestra aplicacin principal Rails puede
nunca ser totalmente sustituida por una aplicacin de Node.js, pero al adoptar estas
herramientas se hace cada vez ms fcil de compartir ciertos trozos de JavaScript y plantillas
entre entornos
Lo escuchaste aqu primero -.
Dentro unos aos, ser raro ver una aplicacin web avanzada que no ejecuta algo de JavaScript
en el servidor.

Resumen

Sincroniza
automticamente los
datos entre
navegadores,
servidores y bases de
datos.

El ms mgico de
todos, un simple script
y wua la!! Toda una API
para realtime

Extensa API con

mdulos para ejecutar
cdigo

Buen founding,
excelente equipo de
desarrollo y grandiosa
comunidad.

Mojito
Mojito 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 adopcin, el proyecto crezca y se termine convirtiendo en un estndar. Gracias a Mojito, los
desarrolladores podrn trabajar a alto nivel y abstraerse de la plataforma destino, evitando la necesidad de
conocer la programacin en Android, iOS o BlackBerry y obteniendo una versin de la aplicacin 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
mviles (cortes, cada del nivel de seal, etc) gracias a la flexibilidad de realizar la ejecucin de los procesos tanto
desde el lado del servidor como el del cliente.
http://developer.yahoo.com/cocktails/mojito/ Official Page

Derbyjs
Derby incluye un potente motor de sincronizacin 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 automticamente los datos
entre navegadores , servidores y bases de datos. Suscribciones a modelos y a los cambios en los objetos y
consultas especficas , lo que permite un control granular de la propagacin de datos sin definir canales. Racer es
compatible con la resolucin de conflictos Out of the box, lo que simplifica enormemente la creacin 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 aplicacin REST y NO html mejor usar libreras
como Express.js y no Derby, de igual forma si no ests 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

Nuestro Equipo comenz

con MeteorJS

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 aplicacin y su interfaz de usuario y se asegura de
que ambas partes estn sincronizadas.
Como Meteor usa Node.js, se utiliza JavaScript en el cliente y en el servidor. Y ms an, Meteor es
capaz de compartir cdigo entre ambos entornos.
hot code pushes baby!, gracias al canal que dejamos abierto cada vez que se actualiza el cdigo
cliente en el servidor este lo sirve directamente a los clientes que estn conectados.
No es maravilloso? olvdate de esas eternas tensas esperas a que se limpien las caches de los
servidores para ver el efecto de tu pase a produccin, tu xito o tu fracaso sin esperas.

Porque Meteorjs?
Por qu gastar tiempo aprendiendo Meteor en lugar de otro framework web? Dejando a un lado
las caractersticas de Meteor, creemos que todo se reduce a una sola cosa: Meteor es fcil de
aprender.
Meteor permite crear una aplicacin web en tiempo real en cuestin de horas. Y si ya hemos
hecho desarrollo web, estaremos familiarizados con JavaScript, y ni siquiera tendremos que
aprender un nuevo lenguaje.
Meteor podra ser el marco ideal para nuestras necesidades, quizs no. Pero por qu no
probarlo y descubrirlo por nosotros mismos?.

Llegando un tantico lejos...

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 produccin, 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 informacin (Publicaciones, suscripciones y mtodos)
- Muchos retos en el camino, pero siempre con una comunidad dispuesta a aportar en el proceso
- Facil deploy en desarrollo y gratis!!, mltiples opciones para deploys en produccin.

Links recomendados
-http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ Javascript Isomorfo
https://www.meteor.com/ Oficial Page Meteorjs
http://es.discovermeteor.com/ El mejor recurso actual para aprender Meteorjs en Espaol
Porque 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!

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

- http://www.goodui.org/ Una de las mejores guas 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 grficas
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 grficas y
opciones pero esta bueno.
- https://university.mongodb.com/ Para los que quieran aprender Mongodb :D!
Y bueno, posteen ms, queremos que la comunidad siga creciendo, muchas gracias!

Muchas gracias
Equipo Grandpa
Luis lvarez @goluis
Julin Alvarez @ouyeahbro

www.grandpa.im