25
Ruby on Rails y AngularJS Introducción al mundo de Ruby on Rails, AngularJS y el rol de ambos en la construcción de modernas aplicaciones Web Ing. Leopoldo Rojas Moguel, MBA l [email protected] @leopoldo_rojas

Ruby on Rails y AngularJS

Embed Size (px)

DESCRIPTION

Charla presentada para la Universidad Cenfotec, en el Colegio de Informáticos de Costa Rica. Marzo, 2014. La charla presenta una introducción a Ruby on Rails y cómo integrarlo con AngularJS

Citation preview

Page 1: Ruby on Rails y AngularJS

Ruby on Rails y AngularJSIntroducción al mundo de Ruby on Rails, AngularJS y el rol de ambos en la construcción de modernas aplicaciones Web

Ing. Leopoldo Rojas Moguel, [email protected]@leopoldo_rojas

Page 2: Ruby on Rails y AngularJS

@leopoldo_rojas

Software engineer & Web Developer. Ruby on Rails, AngularJS and Yii specialist. Innovation consultant. Family man & Sports fan

Page 3: Ruby on Rails y AngularJS

RUBY ON RAILS

“[Rails] gained a lot of its focus and appeal because I didn’t try to please people who didn’t share my problems” … DHH

Page 4: Ruby on Rails y AngularJS

¿Qué es Ruby on Rails?

Es un framework open source para el desarrollo de aplicaciones Web

Page 5: Ruby on Rails y AngularJS

Ruby on Rails (aka Rails)• Está basado en el lenguaje orientado a objetos Ruby

• Ruby fue creado en 1995 por Yukihiro Matsumoto (aka Matz) tomando ideas de PERL, Smalltalk y LISP

• Rails fue liberado en el 2004 por David Heinemeier Hansson (aka DHH)

• Ruby es a PHP, como Rails es a Yii ó CakePHP

• Algunas aplicaciones conocidas: Shopify, Scribd, Twitter, Hulu, Zendesk

Page 6: Ruby on Rails y AngularJS

The “Rails way”• Rails es lo que se conoce como un “opinionated framework”

• Privilegia los siguiente Patrones de Ingeniería de Software:• Active Record• Convention over Configuration• DRY: Don´t repeat yourself• MVC: Model-View-Controller

• De los primeros frameworks de desarrollo Web en adoptar de manera completa el estilo arquitectural REST para aplicaciones Web

Page 7: Ruby on Rails y AngularJS

RUBY ON RAILSAplicación Demo

Page 8: Ruby on Rails y AngularJS

ANGULARJSHTML enhanced for web apps!

Page 9: Ruby on Rails y AngularJS
Page 10: Ruby on Rails y AngularJS

¿Qué es AngularJS?

Es un framework de javascript para crear aplicaciones web dinámicas, el cual utiliza el HTML como mecanismo de lenguaje de template de las aplicaciones y permite extender el lenguaje base de HTML para representar los distintos componentes de la aplicación.

“Es lo que el HTML hubiera sido, si hubiera sido diseñado para crear aplicaciones web”

AngularJS Team

Page 11: Ruby on Rails y AngularJS

ANGULARJSAlgunos Demos

Page 12: Ruby on Rails y AngularJS

¿Qué es entonces AngularJS?• Un framework de javascript

• Es tecnología server-agnostic ya que todo lo ejecuta del lado del browser

• Intenta definir el comportamiento de la aplicación mediante nuevas “construcciones” (llamadas “directivas”) dentro del HTML mismo

• Define lineamientos claros de cómo estructurar una aplicación web (client-side)

• Orientado a aplicaciones web CRUD

Page 13: Ruby on Rails y AngularJS

La filosofía base de AngularJS• Desacoplar la manipulación del DOM de la lógica de la

aplicación (Presentation vs Business Logic)

• Desacoplar la lógica de la aplicación del lado del cliente, de la lógica de la aplicación del lado del servidor

• El framework debe guiar a los Developers en cómo ir estructurando los diferentes componentes de una aplicación client-side

• Le otorga mucha importancia a las pruebas (TDD y Testing-ready)

Page 14: Ruby on Rails y AngularJS

¿Para qué NO es AngularJS?• No es una tecnología de aplicaciones Web del lado del

servidor, sino que debe complementarse con una de ellas

• No es óptima para aplicaciones con alta manipulación del DOM del browser, tales como los juegos o los editores de textos

Page 15: Ruby on Rails y AngularJS

Single-page Apps (SPAs)• Una aplicación web que está conformada por una sola página

HTML• La aplicación se carga en una sola llamada al server• No es necesario refrescar la página para ir utilizando la aplicación• No se transfiere el control a ninguna otra página

• Provee una experiencia similar a las aplicaciones desktop-only

Page 16: Ruby on Rails y AngularJS

2-way Data Binding

Page 17: Ruby on Rails y AngularJS

Model-View-Controller (MVC)

AngularJS

Page 18: Ruby on Rails y AngularJS

RAILS Y ANGULARJS

La integración importa: “…el DC-3 integró cinco tecnologías de componentes, todas decisivas para formar un conjunto de éxito” … de la Quinta Disciplina por Peter Senge

Page 19: Ruby on Rails y AngularJS

SPA vs Aplicación Web tradicional

¿Dónde está el MVC?

Page 20: Ruby on Rails y AngularJS

RAILS Y ANGULARJSBackEnd y FrontEnd trabajando juntos …

Page 21: Ruby on Rails y AngularJS

AngularJS y una RESTful API

Servicio $http

• Si el API no es completamente RESTful

• Otorga más flexibilidad pero quizá se deba escribir más código

Servicio $resource

• Mejor con RESTful APIs

• Viene con el módulo ngResource

• Métodos de más alto nivel de abstracción

Page 22: Ruby on Rails y AngularJS

Y AÚN HAY MÁSUn “Bonus” por favor

Page 23: Ruby on Rails y AngularJS

3-way Data Binding

Page 24: Ruby on Rails y AngularJS

ANGULARJS Y FIREBASEDemo de 3-way Data Binding

Page 25: Ruby on Rails y AngularJS

¡MUCHAS GRACIAS!

«...concentración y simplicidad. Lo simple puede ser más difícil que lo complejo. Tienes que trabajar duro manteniendo tu mente clara para hacer las cosas simples. Vale la pena llegar hasta el final con esto, porque cuando terminas puedes mover montañas» … Steve Jobs

Ing. Leopoldo Rojas Moguel, [email protected]@leopoldo_rojas