0
Monday, June 24, 13
Monday, June 24, 13
¿Quién soy?⁃ Argentino viviendo en Estados Unidos desde 1999⁃ Desarrollador PHP & Symfony⁃ Fundador de la primera lista de...
Monday, June 24, 13
Monday, June 24, 13
⁃ Fundada en 2005⁃ Proveedor de servicios de hosting especializado en PHP,Symfony, ZendFramework, y otros⁃ Servidores en E...
⁃ Muy activos en la comunidad de Open Sourcecontribuyendo con código o patrocinando eventos ygrupos de usuariosLa comunida...
En el comienzo teniamos HTML...Monday, June 24, 13
Monday, June 24, 13
Luego vino JavaScriptMonday, June 24, 13
Luego vino JavaScripty no era ‘cool’...Monday, June 24, 13
Pero era algo serio!Monday, June 24, 13
Pero era algo serio!Monday, June 24, 13
Pero era algo serio!Monday, June 24, 13
Usos muy importantesMonday, June 24, 13
Rollovers!Monday, June 24, 13
http://joemaller.com/javascript/simpleroll/simpleroll_example.htmlRollovers!Monday, June 24, 13
Monday, June 24, 13
Y luego vino AJAX...Monday, June 24, 13
AJAX salvó a Internet!Monday, June 24, 13
2004 - 2006Monday, June 24, 13
Monday, June 24, 13
Nueva generación deFrameworks JavaScriptMonday, June 24, 13
Monday, June 24, 13
Introducción a•100% JavaScript•MVC•Con fuerte opinión•Modular & Extensible•Servicios & Injección de Dependencias•Simple pe...
•Aplicaciones de una página•Dinámicas & Receptivas•Interactivas & en tiempo real•Interfaz de usuario rica & amigable•I18n ...
<!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></scr...
Plantillas &Directivas<!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6...
•ng-app•ng-controller•ng-model•ng-bind•ng-repeat•ng-show & ng-hide•tus propias directivas•y muchas más!http://docs.angular...
ng-app<html>...<body>...<div ng-app>...</div>Inicia la aplicación y define la raíz. Puede haber uno solo pordocumento HTML...
ng-controller<html ng-app><body><div ng-controller=”PruebaController”>Hola {{nombre}}</div><script>function PruebaControll...
ng-model<html ng-app><body><div><input type=”text” ng-model=”nombre” /><input type=”textarea” ng-model=”notas” /><input ty...
ng-bind<html ng-app><body><div><div ng-bind=”nombre”></div>{{nombre}} <!- más acotado --></div></body></html>Reemplaza el ...
ng-repeat<html ng-app><body><div><ul><li ng-repeat="item in items">{{$index}}: {{item.nombre}}</li></ul></div></body></htm...
ng-show & ng-hide<html ng-app><body><div>Aprétame: <input type="checkbox" ng-model="checked"><br/><span ng-show="checked">...
Directivas propias<html ng-app><body><div>Formato de Fecha: <input ng-model="format"> <hr/>Hora actual es: <span my-curren...
$scopefunction SaludaCtrl($scope) {$scope.nombre = Mundo;} function ListaCtrl($scope) {$scope.nombres = [Igor, Misko, Vojt...
•Una conjunto de bloques de configuración y ejecuciónque son aplicados a la aplicación durante el procesode inicialización....
http://docs.angularjs.org/guide/module<html ng-app=”myApp”><body><div ng-controller=”AppCtrl”>Hola {{nombre}}</div></body>...
Los filtros transforman datos a una nueva forma.Pueden ser encadenados, y pueden recibirargumentos opcionales{{ expresion ...
angular.module(ReversibleModule, []).filter(reverso, function() {return function(entrada, capitalizar) {var salida = "";//...
$routeProvider.when("/sin_autenticacion",{controller:SinAutenticacionCtrl,templateUrl:"app/sin-autenticacion.html"}).when(...
ServiciosServicios son ‘singletons’ que cumplen tareas específicas ycomunes en aplicaciones web. Angular provee una serie ...
+Monday, June 24, 13
• API REST• Silex + responsible-service-provider• Symfony2 + RestBundle• ZF2 + ZfrRest• WebSockets• React/Ratchet• node.js...
<div> {{nombre}} </div> <!-- usado por twig -->{% raw %}<div> {{nombre}} </div> <!-- usado por AngularJS -->{% endraw %}An...
// _users.html.twig<script type="text/ng-template" id="users.html">...</script>// _groups.html.twig<script type="text/ng-t...
{% javascripts"js/angular-modules/mod1.js""js/angular-modules/mod2.js""@AppBundle/Resources/public/js/controller/*.js"outp...
Muéstrame el CODIGO!+Monday, June 24, 13
+Podisum http://github.com/pgodel/podisumgitDVR http://github.com/pgodel/gitdvrGenera resumenes de eventos de LogstashApli...
+PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientMonday, June 24, 13
•http://ngmodules.org/•http://angular-ui.github.io/•https://github.com/angular/angularjs-batarang•https://github.com/angul...
¿Preguntas?+Monday, June 24, 13
¡Muchas Gracias!Sugerencias! https://joind.in/8833Transparencias: http://slideshare.net/pgodelTwitter: @pgodelE-mail: pabl...
Upcoming SlideShare
Loading in...5
×

deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS

8,627

Published on

AngularJS es un framework Javascript relativamente nuevo, patrocinado por Google, que está ganando mucha popularidad gracias a su potencia, flexibilidad y simplicidad.

En esta charla haremos una introducción de sus caulidades más importantes, veremos como se acopla con Symfony para la creación de aplicaciones web con interfaz ricas y complejas, incluyendo consejos prácticos de como diseñar nuestra aplicación establecer su estructura.

Por último, mostraremos una aplicación escrita en AngularJS que se conecta a servidores REST y WebSockets creados con Symfony.

Published in: Technology

Transcript of "deSymfony 2013 - Creando aplicaciones web desde otro ángulo con Symfony y AngularJS"

  1. 1. Monday, June 24, 13
  2. 2. Monday, June 24, 13
  3. 3. ¿Quién soy?⁃ Argentino viviendo en Estados Unidos desde 1999⁃ Desarrollador PHP & Symfony⁃ Fundador de la primera lista de discusión de PHPde habla hispana⁃ Socio fundador de ServerGrove⁃ Amante de la parrillaMonday, June 24, 13
  4. 4. Monday, June 24, 13
  5. 5. Monday, June 24, 13
  6. 6. ⁃ Fundada en 2005⁃ Proveedor de servicios de hosting especializado en PHP,Symfony, ZendFramework, y otros⁃ Servidores en Europa y Estados UnidosServerGrove!Monday, June 24, 13
  7. 7. ⁃ Muy activos en la comunidad de Open Sourcecontribuyendo con código o patrocinando eventos ygrupos de usuariosLa comunidad es nuestra guiaMonday, June 24, 13
  8. 8. En el comienzo teniamos HTML...Monday, June 24, 13
  9. 9. Monday, June 24, 13
  10. 10. Luego vino JavaScriptMonday, June 24, 13
  11. 11. Luego vino JavaScripty no era ‘cool’...Monday, June 24, 13
  12. 12. Pero era algo serio!Monday, June 24, 13
  13. 13. Pero era algo serio!Monday, June 24, 13
  14. 14. Pero era algo serio!Monday, June 24, 13
  15. 15. Usos muy importantesMonday, June 24, 13
  16. 16. Rollovers!Monday, June 24, 13
  17. 17. http://joemaller.com/javascript/simpleroll/simpleroll_example.htmlRollovers!Monday, June 24, 13
  18. 18. Monday, June 24, 13
  19. 19. Y luego vino AJAX...Monday, June 24, 13
  20. 20. AJAX salvó a Internet!Monday, June 24, 13
  21. 21. 2004 - 2006Monday, June 24, 13
  22. 22. Monday, June 24, 13
  23. 23. Nueva generación deFrameworks JavaScriptMonday, June 24, 13
  24. 24. Monday, June 24, 13
  25. 25. Introducción a•100% JavaScript•MVC•Con fuerte opinión•Modular & Extensible•Servicios & Injección de Dependencias•Simple pero poderosa maquetación•Data-binding en el cielo•Validación de Ingreso de Datos•Animaciones! (nuevo)•Testeable•Muchas cosas más...Monday, June 24, 13
  26. 26. •Aplicaciones de una página•Dinámicas & Receptivas•Interactivas & en tiempo real•Interfaz de usuario rica & amigable•I18n & L10n•Multi-plataforma•Escritorio/Móvil•Animaciones•Control con comandos de voz¿ Qué podemos hacer?Introducción aMonday, June 24, 13
  27. 27. <!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script></head><body><div><label>Nombre:</label><input type="text" ng-model="nombre" placeholder="Ingresesu nombre"><hr><h1>Hola {{nombre}}!</h1></div></body></html>PlantillasMonday, June 24, 13
  28. 28. Plantillas &Directivas<!doctype html><html ng-app><head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script></head><body><div><label>Nombre:</label><input type="text" ng-model="nombre" placeholder="Ingresesu nombre"><hr><h1>Hola {{nombre}}!</h1></div></body></html>Monday, June 24, 13
  29. 29. •ng-app•ng-controller•ng-model•ng-bind•ng-repeat•ng-show & ng-hide•tus propias directivas•y muchas más!http://docs.angularjs.org/api/ngDirectivasMonday, June 24, 13
  30. 30. ng-app<html>...<body>...<div ng-app>...</div>Inicia la aplicación y define la raíz. Puede haber uno solo pordocumento HTML.<html>...<body ng-app>...<html ng-app>...DirectivasMonday, June 24, 13
  31. 31. ng-controller<html ng-app><body><div ng-controller=”PruebaController”>Hola {{nombre}}</div><script>function PruebaController($scope) {$scope.nombre = ‘Pablo’;}</script></body></html>Define el controlador (función) relacionada con la vista.DirectivasMonday, June 24, 13
  32. 32. ng-model<html ng-app><body><div><input type=”text” ng-model=”nombre” /><input type=”textarea” ng-model=”notas” /><input type=”checkbox” ng-model=”notificacion” /></div></body></html>Define ‘data binding’ de ida/vuelta con input, select, textarea.DirectivasMonday, June 24, 13
  33. 33. ng-bind<html ng-app><body><div><div ng-bind=”nombre”></div>{{nombre}} <!- más acotado --></div></body></html>Reemplaza el contenido del elemento HTML con el valorindicado en la expresión, y actualiza el contenido cuando elvalor de la expresión cambia.DirectivasMonday, June 24, 13
  34. 34. ng-repeat<html ng-app><body><div><ul><li ng-repeat="item in items">{{$index}}: {{item.nombre}}</li></ul></div></body></html>Instancia una plantilla por item de una colección. Cadaplantilla tendrá su propio ‘scope’.DirectivasMonday, June 24, 13
  35. 35. ng-show & ng-hide<html ng-app><body><div>Aprétame: <input type="checkbox" ng-model="checked"><br/><span ng-show="checked">Sí!</span><span ng-hide="checked">Oculto.</span></div></body></html>Muestra/Oculta una porción del arbol del DOM (HTML)condicionalmente.DirectivasMonday, June 24, 13
  36. 36. Directivas propias<html ng-app><body><div>Formato de Fecha: <input ng-model="format"> <hr/>Hora actual es: <span my-current-time="format"></span></div></body></html>Puedes crear nuevas directivas para extender el HTML.Encanpsula resultados complejos en simples llamadas.DirectivasMonday, June 24, 13
  37. 37. $scopefunction SaludaCtrl($scope) {$scope.nombre = Mundo;} function ListaCtrl($scope) {$scope.nombres = [Igor, Misko, Vojta];$scope.pop = function() {$scope.nombres.pop();}}...<button ng-click=”pop()”>Sacar</button>El ‘scope’ mantiene el modelo de datos porcontrolador. Detecta cambios en el modelo paraactualizar la vista automáticamente.http://docs.angularjs.org/guide/scopeModeloMonday, June 24, 13
  38. 38. •Una conjunto de bloques de configuración y ejecuciónque son aplicados a la aplicación durante el procesode inicialización.•Código de terceros puede ser enpaquetado enmódulos y re-usados en varias aplicaciones•Módulos pueden listar otros módulos comodepencencias•Módulos son una forma de manejar la configuracióndel $injector•Una aplicación de AngularJS es un Módulohttp://docs.angularjs.org/guide/moduleMódulosMonday, June 24, 13
  39. 39. http://docs.angularjs.org/guide/module<html ng-app=”myApp”><body><div ng-controller=”AppCtrl”>Hola {{nombre}}</div></body></html>var app = angular.module(myApp, []);app.controller( AppCtrl, function($scope) {$scope.nombre = Juan;});MódulosMonday, June 24, 13
  40. 40. Los filtros transforman datos a una nueva forma.Pueden ser encadenados, y pueden recibirargumentos opcionales{{ expresion | filter }}{{ expresion | filter1 | filter2 }}123 | number:2miArray | orderBy:campo:trueFiltrosMonday, June 24, 13
  41. 41. angular.module(ReversibleModule, []).filter(reverso, function() {return function(entrada, capitalizar) {var salida = "";// ...return salida;}});Reverso: {{greeting|reverso}}<br>Reverso + capitalizado: {{greeting|reverso:true}}Creando FiltrosMonday, June 24, 13
  42. 42. $routeProvider.when("/sin_autenticacion",{controller:SinAutenticacionCtrl,templateUrl:"app/sin-autenticacion.html"}).when("/databases", {controller:DatabasesCtrl,templateUrl:"app/databases.html"}).when("/databases/agregar", {controller:AgregarDatabaseCtrl,templateUrl:"app/agregar-database.html"}).otherwise({redirectTo: /databases});Enrutamiento•http://example.org/#/sin_autenticacion•http://example.org/#/databases•http://example.org/#/databases/agregarMonday, June 24, 13
  43. 43. ServiciosServicios son ‘singletons’ que cumplen tareas específicas ycomunes en aplicaciones web. Angular provee una serie deservicios para operaciones comunes.•$location - parsea la URL de la dirección del navegador.Cambios en el $location son reflejados en la barra dedirección del navegador•$http - facilita la comunicación con servidores HTTP usandoel XMLHttpRequest del navegador o JSONP•$resource - permite interactuar con servidores RESTfulhttp://docs.angularjs.org/guide/dev_guide.servicesMonday, June 24, 13
  44. 44. +Monday, June 24, 13
  45. 45. • API REST• Silex + responsible-service-provider• Symfony2 + RestBundle• ZF2 + ZfrRest• WebSockets• React/Ratchet• node.js• AngularJS + Twig = Mola!• AngularJS + Assetic = Menor tamaño+Monday, June 24, 13
  46. 46. <div> {{nombre}} </div> <!-- usado por twig -->{% raw %}<div> {{nombre}} </div> <!-- usado por AngularJS -->{% endraw %}AngularJS + Twig - Evitando conflictos+// modulo de configuración de la aplicación$interpolateProvider.startSymbol([[).endSymbol(]])....<div> [[nombre]] </div> <!-- usado por AngularJS -->Monday, June 24, 13
  47. 47. // _users.html.twig<script type="text/ng-template" id="users.html">...</script>// _groups.html.twig<script type="text/ng-template" id="groups.html">...</script>// index.html.twig{% include _users.html.twig %}{% include _groups.html.twig %}AngularJS + Twig - Precargar plantillas+Monday, June 24, 13
  48. 48. {% javascripts"js/angular-modules/mod1.js""js/angular-modules/mod2.js""@AppBundle/Resources/public/js/controller/*.js"output="compiled/js/app.js"%}<script type="text/javascript" src="{{ asset_url }}"></script>{% endjavascripts %}AngularJS + Assetic - Combinar & minimizar+Monday, June 24, 13
  49. 49. Muéstrame el CODIGO!+Monday, June 24, 13
  50. 50. +Podisum http://github.com/pgodel/podisumgitDVR http://github.com/pgodel/gitdvrGenera resumenes de eventos de LogstashAplicación SilexPlantillas de TwigAPI RESTUI avanzada con AngularJSReproduce commits de gitMonday, June 24, 13
  51. 51. +PodisumApache access_log LogstashRedisPodisum redis-clientMongoDBPodisum Silex AppWeb ClientMonday, June 24, 13
  52. 52. •http://ngmodules.org/•http://angular-ui.github.io/•https://github.com/angular/angularjs-batarang•https://github.com/angular/angular-seed•https://github.com/angular-adaptive/adaptive-speech•Animaciones: http://bit.ly/Z4WD7X•Prueba las APIs REST con la extensión de Chrome ‘Postman’ExtrasMonday, June 24, 13
  53. 53. ¿Preguntas?+Monday, June 24, 13
  54. 54. ¡Muchas Gracias!Sugerencias! https://joind.in/8833Transparencias: http://slideshare.net/pgodelTwitter: @pgodelE-mail: pablo@servergrove.comMonday, June 24, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×