SlideShare una empresa de Scribd logo
1 de 24
Descargar para leer sin conexión
Programación
Reactiva
www.grandpa.im
¿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/
Javascript Isomorfo
Antes: 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.
Javascript Isomorfo
Traducció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?
¿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 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:
Problemas en el paraíso
En 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.
Rendimiento
Por 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.
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
¡Una buena solución!
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í
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 entornos
Lo 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í
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.
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 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
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
MeteorJS
Nuestro Equipo comenzó
con 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.
¿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?
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 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.
-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 Español
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!
Links recomendados
- 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)
Muchas gracias
Equipo Grandpa
Luis Álvarez @goluis
Julián Alvarez @ouyeahbro
www.grandpa.im

Más contenido relacionado

La actualidad más candente

Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5Oscar Gensollen
 
Definición y función de lenguaje java script
Definición y  función de lenguaje java scriptDefinición y  función de lenguaje java script
Definición y función de lenguaje java scriptAndres Rodriguez
 
Conceptos BáSicos Curso Online
Conceptos BáSicos                 Curso OnlineConceptos BáSicos                 Curso Online
Conceptos BáSicos Curso OnlineEdgar
 
Aprendiendo a Programas en 4 horas JavaScript
Aprendiendo a Programas en 4 horas JavaScriptAprendiendo a Programas en 4 horas JavaScript
Aprendiendo a Programas en 4 horas JavaScriptKarsarmi
 
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4Rodolfo Finochietti
 
jQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptjQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptJacob Flores
 

La actualidad más candente (20)

Net Beans
Net BeansNet Beans
Net Beans
 
Programacion PHP
Programacion PHP
Programacion PHP
Programacion PHP
 
Javascript y Jquery
Javascript y JqueryJavascript y Jquery
Javascript y Jquery
 
Lenguaje JavaScript parte 1
Lenguaje JavaScript parte 1Lenguaje JavaScript parte 1
Lenguaje JavaScript parte 1
 
Ruby on rails
Ruby on railsRuby on rails
Ruby on rails
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
Introducción a Javascript I
Introducción a Javascript IIntroducción a Javascript I
Introducción a Javascript I
 
Presentación JavaScript
Presentación JavaScriptPresentación JavaScript
Presentación JavaScript
 
Java script
Java scriptJava script
Java script
 
Introducción a Angular
Introducción a AngularIntroducción a Angular
Introducción a Angular
 
Java script
Java scriptJava script
Java script
 
Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5Desarrollo de Aplicaciones Web con ASP.NET MVC5
Desarrollo de Aplicaciones Web con ASP.NET MVC5
 
JSP
JSPJSP
JSP
 
Angular 6
Angular 6Angular 6
Angular 6
 
Definición y función de lenguaje java script
Definición y  función de lenguaje java scriptDefinición y  función de lenguaje java script
Definición y función de lenguaje java script
 
Conceptos BáSicos Curso Online
Conceptos BáSicos                 Curso OnlineConceptos BáSicos                 Curso Online
Conceptos BáSicos Curso Online
 
Aprendiendo a Programas en 4 horas JavaScript
Aprendiendo a Programas en 4 horas JavaScriptAprendiendo a Programas en 4 horas JavaScript
Aprendiendo a Programas en 4 horas JavaScript
 
Manual programacion-javascript-parte1
Manual programacion-javascript-parte1Manual programacion-javascript-parte1
Manual programacion-javascript-parte1
 
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4
 
jQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptjQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java script
 

Destacado

Programación Reactiva en Android
Programación Reactiva en AndroidProgramación Reactiva en Android
Programación Reactiva en AndroidDroidcon Spain
 
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCGame of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCCarlos Azaustre
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm
 
Programación Reactiva con RxJava
Programación Reactiva con RxJavaProgramación Reactiva con RxJava
Programación Reactiva con RxJavaParadigma Digital
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas webGeraldyn De Sousa
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptJavier Vélez Reyes
 
Instrucciones y su sintaxis
Instrucciones y su sintaxisInstrucciones y su sintaxis
Instrucciones y su sintaxisOmar Grano
 
Html html5 diapositivas
Html  html5 diapositivasHtml  html5 diapositivas
Html html5 diapositivasEliana Caycedo
 
Html5 Básico
Html5 BásicoHtml5 Básico
Html5 BásicoFEDIMON
 
Identificar la programación estructurada
Identificar la programación estructuradaIdentificar la programación estructurada
Identificar la programación estructuradaprofe.gguacaran
 
USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++Luz Fa Calderòn
 
Programación estructurada
Programación estructuradaProgramación estructurada
Programación estructuradaJennifer Montano
 

Destacado (20)

Programación Reactiva en Android
Programación Reactiva en AndroidProgramación Reactiva en Android
Programación Reactiva en Android
 
Game of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCCGame of Frameworks - GDG Cáceres #CodeCC
Game of Frameworks - GDG Cáceres #CodeCC
 
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsIn Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
In Pursuit of the Holy Grail: Building Isomorphic JavaScript Apps
 
Reactivos diseño web
Reactivos diseño webReactivos diseño web
Reactivos diseño web
 
Programación Reactiva con RxJava
Programación Reactiva con RxJavaProgramación Reactiva con RxJava
Programación Reactiva con RxJava
 
Overview atlas (1)
Overview atlas (1)Overview atlas (1)
Overview atlas (1)
 
80188357 cuadros+mitología+completos.doc
80188357 cuadros+mitología+completos.doc80188357 cuadros+mitología+completos.doc
80188357 cuadros+mitología+completos.doc
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
SOA
SOASOA
SOA
 
Taller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScriptTaller de Programación Funcional en JavaScript
Taller de Programación Funcional en JavaScript
 
Logo KumbiaPHP
Logo KumbiaPHPLogo KumbiaPHP
Logo KumbiaPHP
 
Instrucciones y su sintaxis
Instrucciones y su sintaxisInstrucciones y su sintaxis
Instrucciones y su sintaxis
 
Video en boostrap
Video en boostrapVideo en boostrap
Video en boostrap
 
Html html5 diapositivas
Html  html5 diapositivasHtml  html5 diapositivas
Html html5 diapositivas
 
Html5 Básico
Html5 BásicoHtml5 Básico
Html5 Básico
 
Identificar la programación estructurada
Identificar la programación estructuradaIdentificar la programación estructurada
Identificar la programación estructurada
 
C++
C++C++
C++
 
USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++USO DE HERRAMIENTAS IDE VISUAL C++
USO DE HERRAMIENTAS IDE VISUAL C++
 
01 html
01 html01 html
01 html
 
Programación estructurada
Programación estructuradaProgramación estructurada
Programación estructurada
 

Similar a Programación Reactiva, Javascript Isomorfo y Meteorjs !

La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoAptitud Emprendedora
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaverLuis Viteri
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptLuis Guerrero
 
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBEQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBUNIV DE CIENCIAS Y ARTES
 
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBEQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBUNIV DE CIENCIAS Y ARTES
 
Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo webfany concepcion
 
Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroBBVA API Market
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónVLASLOV
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webJulio Alfaro
 

Similar a Programación Reactiva, Javascript Isomorfo y Meteorjs ! (20)

La importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyectoLa importancia del frontend y backend en un proyecto
La importancia del frontend y backend en un proyecto
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Aplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScriptAplicaciones Web SPA con WebAPI y TypeScript
Aplicaciones Web SPA con WebAPI y TypeScript
 
Consejos clave para_crear_proyectos_web
Consejos clave para_crear_proyectos_webConsejos clave para_crear_proyectos_web
Consejos clave para_crear_proyectos_web
 
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBEQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
 
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEBEQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
 
EQUIPO 2,2A PARTE DE LAS AGUILAS
EQUIPO 2,2A PARTE DE LAS AGUILASEQUIPO 2,2A PARTE DE LAS AGUILAS
EQUIPO 2,2A PARTE DE LAS AGUILAS
 
Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo web
 
Temas Relacionados Web 2
Temas Relacionados Web 2Temas Relacionados Web 2
Temas Relacionados Web 2
 
Frameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuroFrameworks y herramientas para la web del futuro
Frameworks y herramientas para la web del futuro
 
GWT y SmartGWT - Introducción
GWT y SmartGWT - IntroducciónGWT y SmartGWT - Introducción
GWT y SmartGWT - Introducción
 
Plataformas cliente servidor
Plataformas cliente servidorPlataformas cliente servidor
Plataformas cliente servidor
 
Tema 6
Tema 6Tema 6
Tema 6
 
Ruby on Rails y AngularJS
Ruby on Rails y AngularJSRuby on Rails y AngularJS
Ruby on Rails y AngularJS
 
Ajax tsis
Ajax tsisAjax tsis
Ajax tsis
 
Ajax
AjaxAjax
Ajax
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
 

Último

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
presentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxpresentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxlosdiosesmanzaneros
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfJulian Lamprea
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
Presentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilPresentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilJuanGallardo438714
 

Último (15)

EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
presentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxpresentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptx
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Presentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilPresentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmeril
 

Programación Reactiva, Javascript Isomorfo y Meteorjs !

  • 2. ¿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/
  • 3. Javascript Isomorfo Antes: 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.
  • 4. Javascript Isomorfo Traducció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?
  • 5. ¿Aplicaciones en el navegador?
  • 6. 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 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:
  • 7. Problemas en el paraíso En 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.
  • 8. Rendimiento Por 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.
  • 9. 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
  • 11. 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í
  • 12. 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 entornos Lo 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í
  • 13.
  • 14. 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.
  • 15. 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 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
  • 16. 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
  • 18. ¿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.
  • 19. ¿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?
  • 21. 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.
  • 22. -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 Español 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! Links recomendados
  • 23. - 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)
  • 24. Muchas gracias Equipo Grandpa Luis Álvarez @goluis Julián Alvarez @ouyeahbro www.grandpa.im