Ruby on Rails [ Ruby On Rails.ppt ] - [Ruby - [Ruby-Doc.org ...
Ruby on Rails y AngularJS
-
Upload
leopoldo-rojas -
Category
Software
-
view
603 -
download
2
description
Transcript of Ruby on Rails y AngularJS
![Page 1: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/1.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/2.jpg)
@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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/4.jpg)
¿Qué es Ruby on Rails?
Es un framework open source para el desarrollo de aplicaciones Web
![Page 5: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/7.jpg)
RUBY ON RAILSAplicación Demo
![Page 8: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/8.jpg)
ANGULARJSHTML enhanced for web apps!
![Page 9: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/9.jpg)
![Page 10: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/10.jpg)
¿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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/11.jpg)
ANGULARJSAlgunos Demos
![Page 12: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/12.jpg)
¿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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/14.jpg)
¿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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/16.jpg)
2-way Data Binding
![Page 17: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/17.jpg)
Model-View-Controller (MVC)
AngularJS
![Page 18: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/19.jpg)
SPA vs Aplicación Web tradicional
¿Dónde está el MVC?
![Page 20: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/20.jpg)
RAILS Y ANGULARJSBackEnd y FrontEnd trabajando juntos …
![Page 21: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/22.jpg)
Y AÚN HAY MÁSUn “Bonus” por favor
![Page 23: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/23.jpg)
3-way Data Binding
![Page 24: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/24.jpg)
ANGULARJS Y FIREBASEDemo de 3-way Data Binding
![Page 25: Ruby on Rails y AngularJS](https://reader034.fdocuments.us/reader034/viewer/2022042614/557b022dd8b42a79308b4e27/html5/thumbnails/25.jpg)
¡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