Sobre a tendência dos Web Components e como utilizá-los para arquitetar aplicações com eles

1. Arquitetando aplicações
com Diretivas em AngularJS
por Matheus Lima

2. Motivação
Reuso
Manutenção
ng-controller
Components são o futuro

3. Reuso
Paginação com Diretivas:
<pagination pages="pages"></pagination>
Alternativa com controllers:
<div ng-controller="PaginationCtrl">
<div ng-include="'/shared/pagination.html'"></div>
</div>

4. Manutenção
JavaScript não-obstrusivo não é tão bom quanto pensávamos.
Componentes possuem todo o código no mesmo lugar:
function Pagination() {
return {
restrict: 'E',
template: '<nav>...</nav>',
scope: {
page: '='
}
};
}

5. ng-controller
1. Compartilhamento de dados
2. Repetição de código
3. Herança

6. ng-controller
1. Compartilhamento de dados
A forma mais comum usa $scope ou $rootScope (deprecated)
Por não possuir escopo isolado é mais difícil de:
Entender
Manter
Testar
Exemplo no jsfiddle

7. ng-controller
2. Repetição de código
Justamente por ser difícil o Reuso, o DRY é comprometido

8. ng-controller
3. Herança
A forma mais comum:
function MyController() {
...
$scope.$parent.invokeMethod();
}
Usa $scope e $parent…. JUNTOS
Exemplo no jsfiddle

9. ng-controller
Portanto:
“Se uma feature de uma linguagem
pode ser problemática, e se ela pode
ser substituída por outra feature que é
mais confiável, então sempre escolha
a feature mais confiável.”
- Douglas Crockford

10. Components são o futuro
Mesmo que você não acredite em nada do que eu falei:
Angular 2
React
Ember
Aurelia
Todos os frameworks estão focando em Components.

11. Perguntas