Ruby on Rails y AngularJS

Preview:

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

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, MBAleopoldo.rojas@arckanto.com@leopoldo_rojas

@leopoldo_rojas

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

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

¿Qué es Ruby on Rails?

Es un framework open source para el desarrollo de aplicaciones Web

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

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

RUBY ON RAILSAplicación Demo

ANGULARJSHTML enhanced for web apps!

¿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

ANGULARJSAlgunos Demos

¿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

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)

¿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

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

2-way Data Binding

Model-View-Controller (MVC)

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

SPA vs Aplicación Web tradicional

¿Dónde está el MVC?

RAILS Y ANGULARJSBackEnd y FrontEnd trabajando juntos …

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

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

3-way Data Binding

ANGULARJS Y FIREBASEDemo de 3-way Data Binding

¡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, MBAleopoldo.rojas@arckanto.com@leopoldo_rojas