desymfony 2013 - creando aplicaciones web desde otro ángulo con symfony y angularjs
DESCRIPTION
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.TRANSCRIPT
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 discusión de PHP de habla hispana⁃ Socio fundador de ServerGrove ⁃ Amante de la parrilla
Monday, June 24, 13
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 Europa y Estados Unidos
ServerGrove!
Monday, June 24, 13
⁃ Muy activos en la comunidad de Open Source contribuyendo con código o patrocinando eventos y grupos de usuarios
La comunidad es nuestra guia
Monday, June 24, 13
En el comienzo teniamos HTML...
Monday, June 24, 13
Monday, June 24, 13
Luego vino JavaScript
Monday, 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 importantes
Monday, June 24, 13
Rollovers!
Monday, June 24, 13
http://joemaller.com/javascript/simpleroll/simpleroll_example.html
Rollovers!
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 - 2006
Monday, June 24, 13
Monday, June 24, 13
Nueva generación de Frameworks JavaScript
Monday, 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 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
•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 a
Monday, June 24, 13
<!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="Ingrese su nombre"> <hr> <h1>Hola {{nombre}}!</h1> </div> </body></html>
Plantillas
Monday, June 24, 13
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="Ingrese su nombre"> <hr> <h1>Hola {{nombre}}!</h1> </div> </body></html>
Monday, June 24, 13
•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/ng
Directivas
Monday, June 24, 13
ng-app
<html>...<body>...<div ng-app>...
</div>
Inicia la aplicación y define la raíz. Puede haber uno solo por documento HTML.
<html>...<body ng-app>...
<html ng-app>...
Directivas
Monday, June 24, 13
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.
Directivas
Monday, June 24, 13
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.
Directivas
Monday, June 24, 13
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 valor indicado en la expresión, y actualiza el contenido cuando el valor de la expresión cambia.
Directivas
Monday, June 24, 13
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. Cada plantilla tendrá su propio ‘scope’.
Directivas
Monday, June 24, 13
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.
Directivas
Monday, June 24, 13
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.
Directivas
Monday, June 24, 13
$scope
function 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 por controlador. Detecta cambios en el modelo para actualizar la vista automáticamente.
http://docs.angularjs.org/guide/scope
Modelo
Monday, June 24, 13
•Una conjunto de bloques de configuración y ejecución que son aplicados a la aplicación durante el proceso de inicialización.•Código de terceros puede ser enpaquetado en módulos y re-usados en varias aplicaciones•Módulos pueden listar otros módulos como depencencias•Módulos son una forma de manejar la configuración del $injector•Una aplicación de AngularJS es un Módulo
http://docs.angularjs.org/guide/module
Módulos
Monday, June 24, 13
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ódulos
Monday, June 24, 13
Los filtros transforman datos a una nueva forma. Pueden ser encadenados, y pueden recibir argumentos opcionales
{{ expresion | filter }}
{{ expresion | filter1 | filter2 }}
123 | number:2
miArray | orderBy:'campo':true
Filtros
Monday, June 24, 13
angular.module('ReversibleModule', []). filter('reverso', function() { return function(entrada, capitalizar) { var salida = "";
// ...
return salida; } });
Reverso: {{greeting|reverso}}<br> Reverso + capitalizado: {{greeting|reverso:true}}
Creando Filtros
Monday, June 24, 13
$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/agregar
Monday, June 24, 13
Servicios
Servicios son ‘singletons’ que cumplen tareas específicas y comunes en aplicaciones web. Angular provee una serie de servicios para operaciones comunes.
•$location - parsea la URL de la dirección del navegador. Cambios en el $location son reflejados en la barra de dirección del navegador•$http - facilita la comunicación con servidores HTTP usando el XMLHttpRequest del navegador o JSONP•$resource - permite interactuar con servidores RESTful
http://docs.angularjs.org/guide/dev_guide.services
Monday, June 24, 13
+
Monday, June 24, 13
• 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
<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
// _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
{% 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
Muéstrame el CODIGO!
+
Monday, June 24, 13
+
Podisum http://github.com/pgodel/podisum
gitDVR http://github.com/pgodel/gitdvr
Genera resumenes de eventos de Logstash Aplicación SilexPlantillas de TwigAPI RESTUI avanzada con AngularJS
Reproduce commits de git
Monday, June 24, 13
+
Podisum
Apache access_log Logstash
Redis
Podisum redis-client
MongoDB
Podisum Silex App
Web Client
Monday, June 24, 13
•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’
Extras
Monday, June 24, 13
¿Preguntas?
+
Monday, June 24, 13
¡Muchas Gracias!
Sugerencias! https://joind.in/8833Transparencias: http://slideshare.net/pgodel
Twitter: @pgodelE-mail: [email protected]
Monday, June 24, 13