SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
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
leopoldo.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 RAILS
Aplicación Demo
ANGULARJS
HTML enhanced for web apps!
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
ANGULARJS
Algunos 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
RAILS Y ANGULARJS
BackEnd 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ÁS
Un “Bonus” por favor
3-way Data Binding
ANGULARJS Y FIREBASE
Demo 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, MBA
leopoldo.rojas@arckanto.com
@leopoldo_rojas

Weitere ähnliche Inhalte

Was ist angesagt?

JBoss Forge y Eclipse Neon para aplicaciones Java EE 7
JBoss Forge y Eclipse Neon para aplicaciones Java EE 7JBoss Forge y Eclipse Neon para aplicaciones Java EE 7
JBoss Forge y Eclipse Neon para aplicaciones Java EE 7Víctor Leonel Orozco López
 
Webinar: Introducción a VUE.js
Webinar: Introducción a VUE.jsWebinar: Introducción a VUE.js
Webinar: Introducción a VUE.jsArsys
 
Node JS (Francisco Cerdas)
Node JS (Francisco Cerdas)Node JS (Francisco Cerdas)
Node JS (Francisco Cerdas)PiXeL16
 
Mas alla de javascript con typescript
Mas alla de javascript con typescriptMas alla de javascript con typescript
Mas alla de javascript con typescriptLeonardo Micheloni
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaverLuis Viteri
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
NodeJS
NodeJSNodeJS
NodeJSIBM
 
Realtime nodejs socket io
Realtime nodejs   socket ioRealtime nodejs   socket io
Realtime nodejs socket ioJose Gratereaux
 
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012Pilmee Gates
 
Una visión multiplataforma con aspnet v next
Una visión multiplataforma con aspnet v nextUna visión multiplataforma con aspnet v next
Una visión multiplataforma con aspnet v nextEduard Tomàs
 
Ventajas JSP
Ventajas JSP Ventajas JSP
Ventajas JSP Felipe545
 
De escritorio a Javascript, nuestra experiencia desde las trincheras
De escritorio a Javascript, nuestra experiencia desde las trincherasDe escritorio a Javascript, nuestra experiencia desde las trincheras
De escritorio a Javascript, nuestra experiencia desde las trincherasRoberto Luis Bisbé
 
Curso node.js
Curso node.js Curso node.js
Curso node.js Redradix
 

Was ist angesagt? (20)

JBoss Forge y Eclipse Neon para aplicaciones Java EE 7
JBoss Forge y Eclipse Neon para aplicaciones Java EE 7JBoss Forge y Eclipse Neon para aplicaciones Java EE 7
JBoss Forge y Eclipse Neon para aplicaciones Java EE 7
 
Webinar: Introducción a VUE.js
Webinar: Introducción a VUE.jsWebinar: Introducción a VUE.js
Webinar: Introducción a VUE.js
 
X pages
X pagesX pages
X pages
 
Node JS (Francisco Cerdas)
Node JS (Francisco Cerdas)Node JS (Francisco Cerdas)
Node JS (Francisco Cerdas)
 
Mas alla de javascript con typescript
Mas alla de javascript con typescriptMas alla de javascript con typescript
Mas alla de javascript con typescript
 
Instalacion adobe dream weaver
Instalacion adobe dream weaverInstalacion adobe dream weaver
Instalacion adobe dream weaver
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
NodeJS
NodeJSNodeJS
NodeJS
 
Realtime nodejs socket io
Realtime nodejs   socket ioRealtime nodejs   socket io
Realtime nodejs socket io
 
Net love open source v1.7
Net love open source v1.7Net love open source v1.7
Net love open source v1.7
 
Inciando con AngularJS y JavaEE 7
Inciando con AngularJS y JavaEE 7Inciando con AngularJS y JavaEE 7
Inciando con AngularJS y JavaEE 7
 
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012
Desarrollo de Aplicaciones con Node.js | INTERSYS UNPRG | 2012
 
Una visión multiplataforma con aspnet v next
Una visión multiplataforma con aspnet v nextUna visión multiplataforma con aspnet v next
Una visión multiplataforma con aspnet v next
 
javascript
javascriptjavascript
javascript
 
Introduccion a Node.js
Introduccion a Node.jsIntroduccion a Node.js
Introduccion a Node.js
 
Introducción a Node.js
Introducción a Node.jsIntroducción a Node.js
Introducción a Node.js
 
Ventajas JSP
Ventajas JSP Ventajas JSP
Ventajas JSP
 
De escritorio a Javascript, nuestra experiencia desde las trincheras
De escritorio a Javascript, nuestra experiencia desde las trincherasDe escritorio a Javascript, nuestra experiencia desde las trincheras
De escritorio a Javascript, nuestra experiencia desde las trincheras
 
React VS angular
React VS angularReact VS angular
React VS angular
 
Curso node.js
Curso node.js Curso node.js
Curso node.js
 

Ähnlich wie Ruby on Rails y AngularJS

Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !ouuyeah
 
Ionic y angular.js
Ionic y angular.jsIonic y angular.js
Ionic y angular.jsGDG Cali
 
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
 
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
 
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
 
PHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesPHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesHéctor Garduño Real
 
Joserojas Web 2.0
Joserojas Web 2.0Joserojas Web 2.0
Joserojas Web 2.0Jose Rojas
 
Groopify para groopies
Groopify para groopiesGroopify para groopies
Groopify para groopiesGroopify
 
Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo webfany concepcion
 
Mvc + html5 + css3
Mvc + html5 + css3Mvc + html5 + css3
Mvc + html5 + css3Marc Rubiño
 
Jose Rojas Desarrollo Rapido de Aplicaciones con RoR
Jose Rojas Desarrollo Rapido de Aplicaciones con RoRJose Rojas Desarrollo Rapido de Aplicaciones con RoR
Jose Rojas Desarrollo Rapido de Aplicaciones con RoRJose Rojas
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdfDubiWeb.TK
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web modernoSebastián Rocco
 
los-diferentes-lenguajes-de-programacion-para-la-web
 los-diferentes-lenguajes-de-programacion-para-la-web los-diferentes-lenguajes-de-programacion-para-la-web
los-diferentes-lenguajes-de-programacion-para-la-webolguisf
 

Ähnlich wie Ruby on Rails y AngularJS (20)

Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !Programación Reactiva, Javascript Isomorfo y Meteorjs !
Programación Reactiva, Javascript Isomorfo y Meteorjs !
 
Ionic y angular.js
Ionic y angular.jsIonic y angular.js
Ionic y angular.js
 
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
 
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
 
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
 
PHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajesPHP, casos de éxito y comparativas con otros lenguajes
PHP, casos de éxito y comparativas con otros lenguajes
 
Joserojas Web 2.0
Joserojas Web 2.0Joserojas Web 2.0
Joserojas Web 2.0
 
Descifrando Ruby on Rails
Descifrando Ruby on RailsDescifrando Ruby on Rails
Descifrando Ruby on Rails
 
Groopify para groopies
Groopify para groopiesGroopify para groopies
Groopify para groopies
 
Tecnologias de desarrollo web
Tecnologias de desarrollo webTecnologias de desarrollo web
Tecnologias de desarrollo web
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
Dinamicas
DinamicasDinamicas
Dinamicas
 
5. rollbase
5. rollbase5. rollbase
5. rollbase
 
Progress Rollbase
Progress RollbaseProgress Rollbase
Progress Rollbase
 
Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo web
 
Mvc + html5 + css3
Mvc + html5 + css3Mvc + html5 + css3
Mvc + html5 + css3
 
Jose Rojas Desarrollo Rapido de Aplicaciones con RoR
Jose Rojas Desarrollo Rapido de Aplicaciones con RoRJose Rojas Desarrollo Rapido de Aplicaciones con RoR
Jose Rojas Desarrollo Rapido de Aplicaciones con RoR
 
003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf003-Introduccion-Angular.pdf
003-Introduccion-Angular.pdf
 
Introducción al desarrollo web moderno
Introducción al desarrollo web modernoIntroducción al desarrollo web moderno
Introducción al desarrollo web moderno
 
los-diferentes-lenguajes-de-programacion-para-la-web
 los-diferentes-lenguajes-de-programacion-para-la-web los-diferentes-lenguajes-de-programacion-para-la-web
los-diferentes-lenguajes-de-programacion-para-la-web
 

Mehr von Leopoldo Rojas Moguel

Uso Estratégico de la Tecnología de la Información
Uso Estratégico de la Tecnología de la InformaciónUso Estratégico de la Tecnología de la Información
Uso Estratégico de la Tecnología de la InformaciónLeopoldo Rojas Moguel
 
Nube. Móviles. Redes Sociales. Big Data.
Nube. Móviles. Redes Sociales. Big Data.Nube. Móviles. Redes Sociales. Big Data.
Nube. Móviles. Redes Sociales. Big Data.Leopoldo Rojas Moguel
 
Las Redes Sociales como promotoras de Inclusión Social
Las Redes Sociales como promotoras de Inclusión SocialLas Redes Sociales como promotoras de Inclusión Social
Las Redes Sociales como promotoras de Inclusión SocialLeopoldo Rojas Moguel
 

Mehr von Leopoldo Rojas Moguel (6)

Introducción a AngularJS
Introducción a AngularJSIntroducción a AngularJS
Introducción a AngularJS
 
Uso Estratégico de la Tecnología de la Información
Uso Estratégico de la Tecnología de la InformaciónUso Estratégico de la Tecnología de la Información
Uso Estratégico de la Tecnología de la Información
 
Herramientas de software en La Nube
Herramientas de software en La NubeHerramientas de software en La Nube
Herramientas de software en La Nube
 
Nube. Móviles. Redes Sociales. Big Data.
Nube. Móviles. Redes Sociales. Big Data.Nube. Móviles. Redes Sociales. Big Data.
Nube. Móviles. Redes Sociales. Big Data.
 
Las Redes Sociales como promotoras de Inclusión Social
Las Redes Sociales como promotoras de Inclusión SocialLas Redes Sociales como promotoras de Inclusión Social
Las Redes Sociales como promotoras de Inclusión Social
 
Tecnologias Emergentes Digitales
Tecnologias Emergentes DigitalesTecnologias Emergentes Digitales
Tecnologias Emergentes Digitales
 

Kürzlich hochgeladen

Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfAlgoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfdarosario3d
 
Simuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfSimuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfLeonardoOa4
 
02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdfRodrigo Cerón
 
Formato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfFormato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfjuanrubenc78
 
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...AlexaRamirez39
 
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfHerramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfdaa100407
 
Los mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarLos mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarjosuesj13
 
Virus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfVirus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfMiSpotify
 
03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdfRodrigo Cerón
 

Kürzlich hochgeladen (9)

Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdfAlgoritmos Paralelos - Actividad 14 - UNIBE.pdf
Algoritmos Paralelos - Actividad 14 - UNIBE.pdf
 
Simuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdfSimuladores de circuitos electrónicos.pdf
Simuladores de circuitos electrónicos.pdf
 
02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf02 - RUP_Introduccion_Definicion.pdf
02 - RUP_Introduccion_Definicion.pdf
 
Formato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdfFormato de práctica reflexiva ante una problemática social.docx.pdf
Formato de práctica reflexiva ante una problemática social.docx.pdf
 
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
Diseño de Algoritmos Paralelos. Mejorando la eficiencia computacional aprovec...
 
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdfHerramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
Herramientas de Mantenimiento_Soporte Técnico_David Andrade.pdf
 
Los mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizarLos mejores simuladores electrónicos que se pueden utilizar
Los mejores simuladores electrónicos que se pueden utilizar
 
Virus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdfVirus -Josue Cabascango _20240322_194349_0000.pdf
Virus -Josue Cabascango _20240322_194349_0000.pdf
 
03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf03 - RUP_Elaboracion_Construccion_1_2024.pdf
03 - RUP_Elaboracion_Construccion_1_2024.pdf
 

Ruby on Rails y AngularJS

  • 1. 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 leopoldo.rojas@arckanto.com @leopoldo_rojas
  • 2. @leopoldo_rojas Software engineer & Web Developer. Ruby on Rails, AngularJS and Yii specialist. Innovation consultant. Family man & Sports fan
  • 3. 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
  • 4. ¿Qué es Ruby on Rails? Es un framework open source para el desarrollo de aplicaciones Web
  • 5. 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
  • 6. 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
  • 10. ¿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
  • 12. ¿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
  • 13. 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)
  • 14. ¿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
  • 15. 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
  • 18. 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
  • 19. SPA vs Aplicación Web tradicional
  • 20. RAILS Y ANGULARJS BackEnd y FrontEnd trabajando juntos …
  • 21. 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
  • 22. Y AÚN HAY MÁS Un “Bonus” por favor
  • 24. ANGULARJS Y FIREBASE Demo de 3-way Data Binding
  • 25. ¡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, MBA leopoldo.rojas@arckanto.com @leopoldo_rojas