¿es angular realmente una herramienta

productiva?

DAY 01: marzo 2013

DAY 01: El stack

DAY 01: El equipo

Programador

+

Diseñador / maquinador

DAY 01: lo que pude con lo que sabía hacer

DAY 01: lo que funcionó

• El backend (hecho con rails)• Bootstrap

DAY 01: lo que no funcionó

• Usabilidad de la aplicación de gestión• Formularios con bastantes campos y validaciones

complejas• Muchas relaciones• Código javascript escrito en jQuery se hace

complicado de mantener (posiblemente el problema lo tenía yo, no jQuery)

• Consumir drogas: intentar implementar una arquitectura hexagonal

DAY 01: junio 2013• Lecciones aprendidas

• Rails fue muy buena opción• Ni papa de frontend• jQuery: muy bien para algunas cosas, va a

ser complicado para otras• Vamos a tener una interfaz compleja

porque vamos a tener flujos de trabajo complejos

DAY 01: el problema con jQuery / Interfaz

compleja¿y no habrá un rails para Javascript?

DAY 01: el problema con jQuery

https://twitter.com/glebm

Introducción a angularJs

Verano 2013

Me decanto por angularJS

DAY 01: agosto 2013

Empezamos el desarrollo del nuevo extremadura.com

DAY 01: El stack

DAY 01: Las decisiones

• Seguir con rails• Usar mongodb• Seguir con Bootstrap y con jQuery• Arquitectura de microservicios (otro

ejemplo de que las drogas son muy malas)• No utilizar ayuda externa

DAY 01: Las decisiones

Impulsado por el CEO

Hacer un desarrollo basado en hitos cortos

DAY 90: primera versión para usuarios beta -

noviembre 2013

DAY 90: introduzco AngularJS en el stack

DAY 90: introduzco AngularJS en el stack

• ¿por donde empiezo?• Me suscribo a egghead.io y me veo todos

los vídeos• Me compro el ng-book• Empiezo a asistir a las reuniones de este

meetup (primera reunión fue el 2 de diciembre de 2013)

DAY 90: introduzco AngularJS en el stack

• ¿Por donde empiezo?• todavía me empeño en tomar drogas: intento empezar

con el muro• Con ayuda del CEO vuelvo a los hitos cortos: desarrollo de

componentes sencillas• Selector de fechas para un evento• Directiva para incluir un editor WYSIWYG• Sistema de comentarios• Botón de me gusta

DAY 90: introduzco AngularJS en el stack

• Por los requisitos SEO, toda la parte de frontend se desarrolla como una aplicación web tradicional (no SPA)

• El back office se desarrolla como una SPA• Mucha presión para entregar todo para

ayer

DAY 90: introduzco AngularJS en el stack

• Se estructura el código en carpetas• controladores• servicios • directivas

• Se introducen muchas dependencias: ngTable, ngCUALQUIER-COSA-PARA-IR-RAPIDO

• Se parte la aplicación en muchas aplicaciones: fotos, vídeos, eventos, redacción, etc…

• Se usan eventos para comunicar directivas entre sí

DAY 90: introduzco AngularJS en el stack

• No hay dinero en la caja y tengo poca experiencia así que…• Copy&Paste de código• El digest cycle y las ñapas para solventarlo sin saber lo

que está pasando• usamos el ControllerAs syntax porque egghead lo

recomienda pero sin entender muy bien porqué• Poco uso de ngModelController, muchos $watch• Uso de $emit y $broadcast• No se hace testing

DAY 180-455• Adquiero el mínimo conocimiento suficiente (25%)

que me permite hacer el 80% de lo que necesito… por supuesto todo para ayer

DAY 180-455• angular-rails-resource: CRUD en cuatro

líneasfactory(‘MediaPhoto',['railsResourceFactory','railsSerializer','MediaPhotoCollectionsPaginated', function(railsResourceFactory,railsSerializer, MediaPhotoCollectionsPaginated){ var baseUrl = ‘/path/to/the/resource‘; var resource = railsResourceFactory({ url: baseUrl, name: 'media_photo' }); resource.include({ getMediaCollections: function(query){ return MediaPhotoCollectionsPaginated.query(query,{id: this.id}); } }); return resource;}])

DAY 180-455

• Cambios en la estructura de carpetas

DAY 180-455• Separación de plantillas en ficheros

independientes• …muchas peticiones adicionales• …son ficheros estáticos muy pequeños• …nuestro volumen de tráfico nos lo

permite

DAY 455: Octubre 2014

DAY 455: El cambio• Me leo el libro build your own angular (sólo 6 capítulos)

• Entiendo el digest cycle y el double binding, dejo de tener problemas a la hora de usar jquery y un montón de cosas más

• Entiendo qué es el scope y el porqué de ControllerAs syntax

• Entiendo cómo se parsean las expresiones en angular: por fin entiendo los “callbacks” de las directivas

• Empiezo a entender ngModel y NgModelController y a usarlo en mis directivas

DAY 455: El cambio• Directivas anidadas: me creo mi propias

directiva de tablas, aunque todavía no encapsulo el glue code. Me inspiro en el ngTable y el ui.bootstrap

• Uso callback para evitar $watch en la medida de lo posible: creamos muchos onSelect, onDelete, onBlablabla

• Empiezo a reducir dependencias: soy capaz de hacer más cosas

DAY 573: Angular con estilo

DAY 573: Angular con estilo

http://www.meetup.com/AngularJS_Madrid/events/222475163/

https://github.com/johnpapa/angular-styleguide

DAY 573: Angular con estilo

• Uso de controllerAs y bindToController en todas las directivas

• Empiezo a hacer componentes realmente reutilizables encapsulando también el glue code a través de servicios

DAY ??????

Angular Sucks• Rendimiento• Scope inheritance• Curva de aprendizaje• Es matar moscas a cañonazos• Estructuración del proyecto demasiado

abierta• Las dependencias son un infierno

Angular Sucks• Rendimiento: podemos limitarnos a un número de

elementos en pantalla que no sena un problema. En este momento no necesitamos 60 fps.

• Scope inheritance: no se usa, sólo usamos isolated scopes• Curva de aprendizaje: nada es gratis• Es matar moscas a cañonazos: no estamos matando

moscas, estamos derribando un escuadrón de cazas de combate y sólo tenemos una batería antiaérea

• Estructuración del proyecto demasiado abierta: convenios• Dependencias: …sí, lo cierto es que son un infierno

Angular nos ha permitido

• Mejorar la usabilidad de nuestra aplicación de gestión• Desarrollar formularios complejos, embebiendo y

reutilizando lógica de negocio en diferentes sitios• Reutilizar códigos través de directivas, reduciendo los

tiempos de desarrollo• No tener que ampliar el equipo de desarrollo, cosa que

no podíamos hacer• Sistema de routing (ui.router), plantillas, peticiones HTTP,

lógica de negocio, validación, componentes reutilizables… todo integrado

DAY 01: lo que funcionó

• El backend (hecho con rails)• Bootstrap

TODAY: lo que funcionó

• El stack Rails/Bootstrap/angularJs• Leer/estudiar/investigar con efectividad• Hitos cortos, alcanzables y medibles• Hablar con la gente de tus miserias y tus

cagadas• Participar en los meetups, no sólo

escuchando sino contando tu historia. Siempre puede ayudar a alguien

¿qué hacemos diferente hoy?

• No tomar drogas: hitos pequeños, alcanzables y medibles• Se ha reducido la presión (ya no tiene que estar todo para ayer)

lo que te deja tiempo para pensar• Leer y aplicar la guía de John Papa:

https://github.com/johnpapa/angular-styleguide• Organizar bien la estructura de ficheros del proyecto desde el

primer día• Tener mucho cuidado con meter paquetes de terceros. A veces

una directiva muy sencilla te ahorra un montón de problemas• Emplear tiempo en entender cómo funciona el digest cycle• Aprender bien los detalles de directivas y servicios

…y todo esto¿no lo podías haber

logrado con(ember | flux | …) ?

…con todo esto¿es angular una

herramienta productiva?

Mi juicio es que sí lo es

¿Alguna pregunta?

@aalbagarciaalfonso@extremadura.com