Uma breve introdução sobre AngularJS 1.x

Uma breve introdução sobre o framework AngularJS 1.x, e como ele pode ajudar a desenvolver plataformas web de forma ágil e produtiva.

Transcript

1. Uma breve Introdução sobre AngularJS 1.x
2. Christian Fortes Desenvolvedor Web e entusiasta JavaScript
3. O que faço hoje? Desenvolvimento de plataformas para a resolução de problemas internos e externos nos processos do dia a dia, no time de Projeto Evolução Tecnológica Core Banking na Unicred Brasil.
5. História Misko Hevery e Adams Abrons criaram o projeto em 2009, para facilitar a criação de aplicações web simples.
6. Como o google adotou? Por uma aposta feita por Misko Hevery com o seu gestor do google para reescrever toda a plataforma: Feedback
7. Resultado da aposta (Reescrever a plataforma Google Feedback) Depois usando AngularJS 1500 linhas de código Antes usando GWT(Google web toolkit) 17.000 linhas
8. O que é AngularJS ? AngularJS é um framework JavaScript open-source, mantido pelo Google, que auxilia no desenvolvimento de aplicações SPA (Single Page Applications). Foi construído sob o padrão model-view-whatever (MVW).
9. Por que usar Angular? - Produtividade - Continuidade do projeto - Comunidade - Facilidade e agilidade - Cross-Browser support (ie9 + | chrome | firefox) - Aplicações usando API’s rest json - Manipulação do DOM frequente (Document Object Model) - Divisão de lógica (Model / Controller / View) - Two-way data binding - Compatível com jQuery
10. Algumas diretivas HTML - ng-app: (Inicialização de uma aplicações AngularJS) - ng-if: (Lógica de if no html) - ng-show / ng-hide: (Mostrar e ocultar elementos) - ng-repeat: (Repetir itens no html) - ng-click: (Executa uma função ou condição com o click) - ng-class: (Permite mudanças de classe css dinâmico) - ng-controller: (Especifica uma controller para o contexto) - ng-view: (Renderiza um bloco de html usando router) Entre outros: https://docs.angularjs.org/api
11. Algumas features AngularJS - Controllers - Views (Html) - Router - Services - Factory - Directive - Dependency Injection - Components (Web Components) - Modules - Constant Entre outros: https://docs.angularjs.org/guide
12. O AngularJS é muito bom e flexível para aplicações SPA, mas...
13. Pode se tornar uma bomba em larga escala!
14. E agora como resolver? - Não faça demasiada complexidade - Não aninhe muita lógica - Centralize o que puder no html usando diretivas - Crie padrões de arquitetura de projetos - Documente o que puder - Decentralize a informação, passe o conhecimento - Crie boilerplates para iniciar projetos
15. Tenho como aplicar testes em uma aplicação AngularJS?
16. Sim!! mas o que eu uso?
18. Protractor, o que é? Protractor é um framework end-to-end para testes de aplicações em AngularJS. Protractor executa testes na sua aplicação rodando em um browser real, interagindo como se fosse um usuário. Site: http://www.protractortest.org
19. Outras lib’s de teste WEBDRIVER I/O
20. Quem está usando AngularJS
21. Quem está usando?
22. Live programming Code: github.com/chrisgfortes/todo-list
23. Obrigado! Github/ Twitter @chrisgfortes Email chrisgfortes@gmail.com Slides speakerdeck.com/chrisgfortes