AngularJS Patterns: Clean Code
1 recomendación396 vistas
El documento proporciona pautas para escribir código limpio en AngularJS siguiendo los principios LIFT (localizar, identificar, estructura plana, no repetirse) y recomendaciones sobre la organización y nomenclatura de archivos, módulos, controladores, servicios, directivas, pruebas y documentación. En particular, recomienda utilizar livetemplates para estructurar los objetos, definir módulos al principio con funciones relacionadas, usar controllerAs, separar la lógica en servicios/fábricas, y
![Testing
● Naming: archivos finalizados con: .spec.js
● Usaremos Mocha & Chai
● Usaremos Karma como test runner: solo tendremos que
incluir los ficheros que queremos testear
● Usar SinionJS para “stubbing and Spying” = simular AJAX,
servers, timers...
● Usar PhantomJS como Headless Browser
Masterpkg test or masterpkg test-dev & karma.conf.js con
solo los files[] a testear
● Ejemplos de test en angularjs: link](https://image.slidesharecdn.com/guidestyle-160914103452/85/AngularJS-Patterns-Clean-Code-15-320.jpg)
AngularJS Patterns: Clean Code
- 1. AngularJS Patterns: Clean Code
- 2. Principio LIFT ● L: Locating: localizar nuestro código ● I: Identify: Identificar el código de un vistazo ● F: Estructura plana, max 7 niveles directorios ● T: Don't repeat yourself
- 3. Pautas de nombre ● Nombres que se entiendan, no utilizar abreviaciones complicadas. ● Archivo: feature.type.js ex: personas.service.js ● Interno: FeatureType ex: PersonasController ● Camel-casting para servicios o factorías ● Directivas: usar un prefijo propio, como: masp- ● Primera minúscula en nombres de archivos o funciones, pero mayúscula en el nombre de controlador, servicio, factoría...
- 4. Organización ficheros ● directives/ – masp_input_translated/ ● masp_input_translated.js ● masp_input_translated.jade ● masp_input_translated.spec.js ● services/ – service.js ● modules/ – sections/ ● directives/ ● sections.js ● sections.spec.js ● sectionsService.js ● sections.jade ● sections_form.jade ● additionalConcept.js ● additionalConcept.espec.js ● ... Common Modul
- 6. Módulos: Definición Declara los módulos sin usar una variable, usando la sintaxis de los setters y getters. Setea sólo una vez y usa get para el resto de instancias
- 7. Funciones: siempre con nombre Evitar las funciones anónimas en los callbacks
- 8. Controladores ● Usar siempre controllerAs en lugar del clásico controlador con $scope ● La sintaxis controllerAs usa this dentro de los controladores que se asocian al $scope ● Considerar usar el $scope en una factory, evitar su uso en el controlador ● No usar para interaccionar con el DOM o para manipular datos.
- 9. Controladores: Bindeables Arriba The Revealing Module Pattern
- 10. Controladores: Diferir la Lógica ● Difiera la lógica dentro de un controlador delegándola a servicios y fábricas.
- 12. Directivas ● 1 directiva por archivo ● Manipulación del DOM dentro de las directivas, aunque si es posible mejor manipularlo por CSS ● Utilizar un prefijo corto, propio, ej: masp- ● Evitar el uso de directivas por “clase” ● Usa bindToController = true cuando uses controller as con una directiva cuando quieras asociar el scope exterior al scope del controller de la directiva.
- 13. Resolver dependencias ● Utilitzar el “reload()” dentro de un controlador ● Si hay “query's” impresindibles, cargarlos en el routeProvider en el “resolve”
- 14. Manejo de Excepciones ● Decoratores: Realizar acciones personalizadas cuando una excepción ocurra. ● Cachadores de excepciones ● Errores de ruta: Mejora la experiencia de usuario si hay un error de enrutamiento y lo redirigimos a una pantalla amigable.
- 15. Testing ● Naming: archivos finalizados con: .spec.js ● Usaremos Mocha & Chai ● Usaremos Karma como test runner: solo tendremos que incluir los ficheros que queremos testear ● Usar SinionJS para “stubbing and Spying” = simular AJAX, servers, timers... ● Usar PhantomJS como Headless Browser Masterpkg test or masterpkg test-dev & karma.conf.js con solo los files[] a testear ● Ejemplos de test en angularjs: link
- 16. JsDoc ● Utilizar jsDoc para documentar
- 17. Otros ● Servicios $ de angular: Usar $document, $window, $timeout y $interval en vez de los propios de JavaScript ● Utilizar “live templates” en webstorm o sublime
- 18. Resumen ● Utilizar livetemplates para ver las estructuras de cada objeto ● Modulo definido en la cabecera, con funciones relacionadas (inject separado) ● Utilizar controllerAs: “vm” & var vm = this; ● Ordenar: definición variables, binding de funciones, funciones. ● Servicios = datos // factories = funciones. ● Modificar DOM en directivas. ● No modificar ni datos ni DOM en los controladores.