AngularJS Style Guide

@willian AngularJS Style Guide Melhorando a escalabilidade, legibilidade e pensando
no futuro

@willian PRIORIDADE NA LEGIBILIDADE

@willian CADA CÓDIGO TEM SEU PRÓPRIO MÓDULO

@willian SEJA EXPLÍCITO, NÃO IMPLÍCITO

@willian PENSE NO FUTURO ES6 e Web Components (Angular 2.0)

@willian WILLIAN FERNANDES

@willian

@willian REFERÊNCIA https://github.com/gocardless/angularjs-style-guide

@willian DEPENDÊNCIAS GERAIS

@willian SYSTEMJS Um carregador de módulos ES6 que nos permite
importar assets em ambiente de desenvolvimento convertendo ES6 para ES5.

@willian 'use strict'; import angular from 'angular'; import {mainModule} from
'./main'; angular.element(document).ready(function() { angular.bootstrap(document.querySelector('[data-main-app]'), [ mainModule.name ], { strictDi: true }); });

@willian BABEL ES6 => ES5

@willian JSPM Carrega qualquer formato de módulo (ES6, AMD, CommonJS)
diretamente de repositórios Github, npm e mais.

@willian LODASH Funções úteis para turbinar seu código JavaScript.

@willian var conference = { name: 'Front in Vale' };
_.assign(conference, { 'date': '2015-09-26' }); // → { 'name': 'Front in Vale', 'date': '2015-09-26' }

@willian UI-ROUTER Permite-nos trabalhar com states ao invés de rotas
URL e nested views.

@willian ESTRUTURA DE DIRETÓRIOS

@willian . ├── app │ ├── bootstrap.js │ ├── components
│ │ ├── loading-view │ │ │ ├── loading-view_controller.js │ │ │ ├── loading-view_directive.js │ │ │ └── loading-view_template.html │ │ └── site-header │ │ ├── site-header_controller.js │ │ ├── site-header_directive.js │ │ └── site-header_template.html │ ├── main.js │ ├── routes │ │ └── todo │ │ ├── todo_controller.js │ │ ├── todo_route.js │ │ └── todo_template.html │ └── services │ ├── api │ │ └── api.js │ └── todo │ ├── todo.js │ └── todo.spec.js ├── assets │ ├── fonts │ ├── images │ └── stylesheets │ ├── app.scss │ ├── base │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ └── _variables.scss │ ├── core │ │ ├── _basic.scss │ │ └── _vendor.scss │ ├── layout │ │ └── _header.scss │ └── ui │ └── _loading_bar.scss ├── config │ └── config.json └── index.html

@willian TESTS (UNIT/E2E) Cada arquivo de teste ﬁca dentro do
diretório do código principal.

@willian COMPONENTS Cada componente contém todo o HTML, CSS, JavaScript
e outras dependências para ser renderizado.

@willian ROUTES Responsável por conﬁgurar URLs e templates especíﬁcos para
cada rota, podendo ou não conter seu próprio controller.

@willian SERVICES Lógica de negócio.

@willian REGRAS GERAIS

@willian ROTAS Use resolvers para injetar dados.

@willian 'use strict'; import angular from 'angular'; import 'angular-ui-router'; import
{todoControllerModule} from './todo_controller'; import template from './todo_template.html!text'; export let todoRouteModule = angular.module('todoRouteModule', [ 'ui.router', todoControllerModule.name ]).config([ '$stateProvider', function TodoRoute($stateProvider) { $stateProvider.state('todo', { url: '/', template: template, controller: 'TodoController', controllerAs: 'ctrl', resolve: { tasks: [ 'Todo', function tasksResolver(Todo) { return Todo.get(); } ] } }); } ]);

@willian DIRECTIVES Sempre use nomes compostos com hífen para separar
palavras

@willian <html> <body> <site-header></site-header> <loading-view></loading-view> </body> </html>

@willian DIRECTIVES Sempre use tipo element quando precisar adicionar conteúdo.

@willian <html> <body> <todo-list> <todo-tasks></todo-tasks> </todo-list> </body> </html>

@willian DIRECTIVES Sempre use tipo attribute quando precisar adicionar um
comportamento.

@willian <html> <body> <input type="text" date-mask="99/99/9999"> </body> </html> Dispara um
evento enquanto o usuário digita.

@willian DIRECTIVES Use escopos isolados em element directives.

@willian 'use strict'; import angular from 'angular'; import {siteHeaderControllerModule} from
'./site-header_controller'; import template from './site-header_template.html!text'; export var siteHeaderComponentModule = angular.module('siteHeaderComponentModule', [ siteHeaderControllerModule.name ]).directive('siteHeader', [ function siteHeader() { return { restrict: 'E', template: template, controller: 'SiteHeaderController', controllerAs: 'ctrl', bindToController: true, scope: { currentUser: '=currentUser', authenticated: '=authenticated' } }; } ]);

@willian DIRECTIVES Sempre use bindToController quando usar escopos isolados.

@willian CONTROLLERS Sempre use controllerAs.

@willian CONTROLLERS Injete dados quando estiverem prontos ao invés de
carregá-los.

@willian 'use strict'; import angular from 'angular'; import 'angular-ui-router'; import
{todoControllerModule} from './todo_controller'; import template from './todo_template.html!text'; export let todoRouteModule = angular.module('todoRouteModule', [ 'ui.router', todoControllerModule.name ]).config([ '$stateProvider', function TodoRoute($stateProvider) { $stateProvider.state('todo', { url: '/', template: template, controller: 'TodoController', controllerAs: 'ctrl', resolve: { tasks: [ 'Todo', function tasksResolver(Todo) { return Todo.get(); } ] } }); } ]);

@willian 'use strict'; import angular from 'angular'; import _ from
'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'tasks', function TodoController(tasks) { let ctrl = this; _.assign(ctrl, { tasks: tasks; }); } ]);

@willian CONTROLLERS Estenda o objeto controller para adicionar propriedades que
serão utilizadas no template.

@willian CONTROLLERS Se for adicionar lógica, que seja somente lógica
de apresentação não lógica de negócio.

'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'Todo', 'tasks', function TodoController(Todo, tasks) { let ctrl = this; function addTask(taskName) { Todo.add({ name: taskName }); tasks = Todo.get(); } _.assign(ctrl, { addTask: addTask, tasks: tasks; }); } ]);

@willian SERVICES E FACTORIES Sempre trate services como classes e
nunca exporte services como uma única função.

@willian 'use strict'; import angular from 'angular'; export var todoModule
= angular.module('todoModule', []).factory('Todo', [ function Todo() { var tasks = []; function validate(task) { return (task.name !=== null && task.name !=== ''); } function get() { return tasks; } function add(task) { if (validate(task)) { tasks.push(task); } else { alert('Invalid data.'); } } return { get: get, add: add }; } ]);

@willian MÓDULOS Sempre use lowerCamelCase para os nomes de módulos.

= angular.module('todoModule', []).factory('Todo', [ function Todo() { ... } ]);

@willian MÓDULOS Crie um módulo por arquivo.

= angular.module('todoModule', []).factory('Todo', [ function Todo() { ... } ]);

@willian 'use strict'; import angular from 'angular'; angular.module('app', []).factory('Todo', [
function Todo() { ... } ]); X

@willian USE MÓDULOS ES6 E também a propriedade name do
módulos do Angular.

@willian TEMPLATES Use sintaxe one-time binding quando possível.

@willian <html> <body> <h1>{{::ctrl.systemName}}</h1> </body> </html> Evita watchers desnecessários

@willian TEMPLATES Não use ngInit. Use controles.

@willian TEMPLATES Não use ngController. Use directives.

@willian <div ng-controller="Controller"> X

@willian PATTERNS

@willian ABSTRAÇÕES DO ANGULAR

@willian • $timeout ao invés de setTimeout • $interval ao
invés de setInterval • $window ao invés de window • $document ao invés de document • $http ao invés de $.ajax • $q (promises) ao invés de callbacks

@willian SINTAXE DE INJEÇÃO DE DEPENDÊNCIAS

@willian 'use strict'; import angular from 'angular'; import {mainModule} from
'./main'; angular.element(document).ready(function() { angular.bootstrap(document.querySelector('[data-main-app]'), [ mainModule.name ], { strictDi: true }); }); Lança um erro se a sintaxe para injetar dependências (array sintax) ou $inject não forem utilizados

@willian ANTI-PATTERNS

@willian NÃO USE $ PARA NOMES DE PROPRIEDADES

@willian ctrl.$isActive = true X

@willian NÃO USE GLOBAIS Resolva todas as dependências usando Dependency
Injection.

'lodash'; export let todoControllerModule = angular.module('todoControllerModule', [ ]).controller('TodoController', [ 'Todo', 'tasks', function TodoController(Todo, tasks) { let ctrl = this; function addTask(taskName) { Todo.add({ name: taskName }); tasks = Todo.get(); } _.assign(ctrl, { addTask: addTask, tasks: tasks; }); } ]);

@willian OBRIGADO

@willian REFERÊNCIA https://github.com/gocardless/angularjs-style-guide

AngularJS Style Guide

AngularJS Style Guide

More Decks by willian

Other Decks in Programming

Featured

Transcript