Date post: | 22-Jan-2018 |
Category: |
Software |
Upload: | jose-manuel-garcia-garcia |
View: | 687 times |
Download: | 1 times |
MADRID · NOV 27-28 · 2015
Carrera de fondo: la continuada
lucha de AngularJSJosé Manuel García García (Sema)
José Manuel García · MADRID · NOV 27-28 · 2015MADRID · NOV 27-28 · 2015
“He visto
aplicaciones en
JavaScript
que harIan vomitar a una cabra…”
José Manuel García · MADRID · NOV 27-28 · 2015
Sema
Sako
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
De páginas sencillas y primerizas…
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
… a complejas aplicaciones de hoy día.
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
Necesidades comunes que se detectan:
Peticiones AJAX
Interacción con el DOM
Eventos y animaciones
Organización del código (código spaghetti)
Cross browsing
Tamaño, peso
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
José Manuel García · MADRID · NOV 27-28 · 2015
José Manuel García · MADRID · NOV 27-28 · 2015
Empiezan los cambios
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development2007 2009 2012
2013 2014 2015
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
José Manuel García · MADRID · NOV 27-28 · 2015
FrontEnd Development
José Manuel García · MADRID · NOV 27-28 · 2015
José Manuel García · MADRID · NOV 27-28 · 2015
Indeed
(Búsqueda realizada a 21/11/2015)
José Manuel García · MADRID · NOV 27-28 · 2015
0 100 200 300 400 500 600 700
Portal F
Portal E
Portal D
Portal C
Portal B
Portal A
Nº ofertas trabajo (21/11/2015, España)
Knockout Ember Backbone AngularJS jQuery
Ofertas actuales de empleo
José Manuel García · MADRID · NOV 27-28 · 2015
¿Qué es Backbone?
• Librería MVC (last versión: 1.2.3)
• Ligera: 69kb (dev) y 7.3kb (prod)
• Dependencia: underscore (y jQuery para vistas)
• Ayuda a organizar la estructura de nuestra app
• Sincroniza modelos y colecciones (API Rest)
• Todo lo debe controlar el programador (+ verboso)
José Manuel García · MADRID · NOV 27-28 · 2015
¿Cuándo puedo utilizarlo?
• Estás empezando en el mundo FrontEnd & SPA
• Quieres tener un código estructurado (!spaghetti)
• Quieres tener un control de todo lo que ocurre
• Quieres entender que es un sistema dirigido por eventos
• Quieres tener libertad para el sistema de templating
• Curva de aprendizaje suave (rápido aprendizaje)
• Conceptos básicos sobre SPA, SRP, DRY, AMD, state-machine…
José Manuel García · MADRID · NOV 27-28 · 2015
¿Qué puedo utilizar?• Modelos y colecciones: objetos contenedores de información
que representan el dominio de aplicación
• Vistas: que se asocian a la UI
• MVC MVP: se delega responsabilidad del controlador a las
vistas, y éste se convierte en un router
BackEnd
DOM
Router
Vista
Modelo
Colección
event
event
event
event
eventuser
action
render
BackEnd
José Manuel García · MADRID · NOV 27-28 · 2015
Hablamos de AngularJS,¡cojones ya!
José Manuel García · MADRID · NOV 27-28 · 2015
“Superheroic
JavaScript MVW
Framework”
José Manuel García · MADRID · NOV 27-28 · 2015
• Framework MVVM (1.4.8-stable, 1.5-beta.2, 2.0-alpha.46)
• Peso: 1.02Mb (unpacked), 144kb (minified)
• Modularidad => Inyección de dependencias => Testeable
• Two-way data-binding
• Extender la semántica de HTML (etiquetas propias)
• Caché, interceptores, AJAX, patrón decorator, promesas…
• No more jQuery*!
¿Qué es AngularJS?
José Manuel García · MADRID · NOV 27-28 · 2015
• No es una librería de acceso al DOM
• No es una librería de controles visuales o widgets
• No te abstrae de HTML, JS o CSS
• No es la mejor solución para juegos
• ¡No es tan difícil como parece!
Además, AngularJS…
José Manuel García · MADRID · NOV 27-28 · 2015
Modularidad
• Módulo: conjunto de contenedores
• Contenedor: estructura de Angular para encapsular código
• Controlador: funciones que recogen los eventos de la UI y define
funcionalidad para una parte de la aplicación o página
• Servicio: función singleton para realizar acciones comunes
• Filtro: función que transforma un objeto (entrada) en otro (salida)
• Directiva: conjunto de “controlador + vista” encapsulado en una
etiqueta o atributo HTML
Para una buena appSPA necesitaremos
1. Una buena división en módulos.
2. Un controlador.3. Un “modelo”.4. Una vista.5. Un enrutador
José Manuel García · MADRID · NOV 27-28 · 2015
Modularidad & Dep. Injection
Un módulo no está
obligado a utilizar todos
los contenedores
(moduleName)
José Manuel García · MADRID · NOV 27-28 · 2015
Dependency Injection• Módulo root: ExampleApp1
• Una vista: index.html
• Dos controladores: ctrl1 y
ctrl2 (dos ámbitos de
ejecución) inyectados en
el módulo root
Módulo root (ExampleApp1)
ctrl1ctrl2
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• Módulo root: nombre y deps
• Definimos ahora la lógica
que cada controlador
expondrá a la vista
• Controlador: nombre y…
• Dependencias
• Array de dependencias
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• El objeto $scope es una especie
de contenedor común entre la
vista y el controlador
• A través de él se produce toda
la comunicación bidireccional
(two-way data-binding)
• Podemos definir una jerarquía
por herencia
José Manuel García · MADRID · NOV 27-28 · 2015
• ng-model: pareja perfecta para $scope
$scope: ámbito de ejecución
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ámbito de ejecución
• Data-binding en dos direcciones… ¡mola!
José Manuel García · MADRID · NOV 27-28 · 2015
$scope: ¿cómo detecta cambios?
• Opción 1: mediante eventos (Backbone style)
(Esfuerzo manual, verboso, sobreruido si hay muchos eventos)
• Opción 2: dirty-checking (AngularJS style)
(Automágico, transparente, problemático si no se usa bien)
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
• El digest cycle es un bucle
mediante el que observar esos
cambios
• $scope.$apply()
• $scope.$digest()
• $scope.$watch()
• $scope.$destroy()
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y el ciclo de digestión
José Manuel García · MADRID · NOV 27-28 · 2015
$scope y data-binding
($rootScope, $scope y herencia)
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas, pegamento para unir piezas
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas
• Mecanismo para extender el comportamiento de HTML
• Out-of-the-box: predefinidas por Angular:
• Personalizadas: nos dan la posibilidad de crearlas a
medida o bien para encapsular plugins/librerías externas
• De aplicación: ng-app, ng-controller, ng-model, ng-bind, ng-repeat,
ng-if|show, ng-style, ng-init, ng-class…
• De eventos HTML: ng-click, ng-keyup, ng-mouseup, ng-mouseover…
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas
Son el pegamento entre la vista y el controlador:
• En una dirección, la directiva toma los datos expuestos
por el controlador y los renderiza en la vista
• En otra dirección, la directiva captura los eventos que se
originan en el DOM e invoca al controlador
Las directivas son el nuevo conducto de comunicación…
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (ng-repeat)
• Iterar sobre colecciones
o conjunto de elementos
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (ng-if | show)
• Mostrar/ocultar la lista
• Mostrar/ocultar un label
José Manuel García · MADRID · NOV 27-28 · 2015
Directivas (una propia)
• Módulo /
comportamiento
(lógica)
• Declaración en la
vista (parte visual)
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros
• Un filtro formatea el resultado de una expresión de
entrada para presentarla al usuario
• Los filtros pueden aplicarse directamente en la vista o
inyectándolos en un módulo
José Manuel García · MADRID · NOV 27-28 · 2015
Filtros predefinidosAngularJS provee de algunos predefinidos:
• currency: formatear una cifra como cantidad monetaria
• number: formatea un número como texto
• date: convierte la fecha a un formato especificado
• json: convierte un objeto en una cadena JSON
• lowercase/uppercase: formatea una cadena a mayúsc./min.
• limitTo: filtrar un subconjunto de elementos (array/string)
• orderBy: ordena un array en función de un predicado
José Manuel García · MADRID · NOV 27-28 · 2015
Filtro + directivaVamos a pintar una tabla y vamos a filtrar con un criterio:
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
• Son la forma de organizar y reusar el código de tareas
comunes en una app (separación de responsabilidades)
• Simplifican la lógica de negocio de los controladores,
desacoplándolos de los servicios
• Son singletons, se instancia una sola vez y se comparte
• $log, $timeout, $location, $window, $http, $q…
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios
Servicios “especiales”:
• constant: module(“x”).constant(nombre, valor);
• value: module(“x”).value(nombre, valor);
Servicios puros:
• service: module(“x”).service(nombre, function);
• factory: module(“x”).factory(nombre, function);
• provider: module(“x”).provider(nombre, function);
José Manuel García · MADRID · NOV 27-28 · 2015
Servicios (ejemplo)• Vista:
• Controlador:
• Factoría:
José Manuel García · MADRID · NOV 27-28 · 2015
José Manuel García · MADRID · NOV 27-28 · 2015
Calling BackEnd Services
Posiblemente, los dos servicios que más vas a utilizar:
$http $q
José Manuel García · MADRID · NOV 27-28 · 2015
Calling BackEnd ServicesCombinando las promesas con peticiones AJAX:
José Manuel García · MADRID · NOV 27-28 · 2015
José Manuel García · MADRID · NOV 27-28 · 2015
AngularJS & jQuery: ¿divorcio?
• Nunca, nunca… modificar el DOM desde el controlador!!
• El controlador nunca modificará el DOM!!
• Directivas: el único lugar lícito para modificar el DOM
• AngularJS tiene su filosofía, hay que seguirla
• Pensar siempre en términos de arquitectura
• AngularJS tiene su “propio jQuery” => jqLite
• La función link de las directivas son las elegidas!
José Manuel García · MADRID · NOV 27-28 · 2015
testing
¿Cómo será el camino?
José Manuel García · MADRID · NOV 27-28 · 2015
José Manuel García · MADRID · NOV 27-28 · 2015
¡¡Aún hay más“complementos”!!
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
• Campos en formularios: pristine, dirty, touched…
• Angular nivel pro: $injector, $location, decoradores…
• Routing, securización, interceptores, login, I18N…
• Angular 2.0* (:-P)
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
José Manuel García · MADRID · NOV 27-28 · 2015
¡Más cosas interesantes!
A programaaaarrr!!!!
MADRID · NOV 27-28 · 2015
https://github.com/semagarcia/angularjs-codemotion-2015