ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

32.637 visualizações

Publicada em

Angularjs é um framework javascript construido e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma “template engine”, tudo isso no intuito de fornecer uma solução completa para o cliente-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site.

Publicada em: Tecnologia

ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA

  1. 1. Um framework para Facilitar sua vida
  2. 2. Quem sou eu? Participação ativa em comunidades; Colaborador em projetos open source como Codeigniter e Grocery CRUD; Músico nas horas vagas;
  3. 3. Era uma vez... Marco inicial: 2009 Primeiro produto: Double Click Youtube for PS3 foi construído com AngularJS
  4. 4. Single Page Application – SPA Menos Server-side; Mais Client-side; Frameworks Javascript; Mais poder para o Client-side!
  5. 5. Porque usar? “Angular é o HTML teria sido se tivesse sido projetado para aplicações.” http://docs.angularjs.org/guide/overview
  6. 6. MVC MVVM MV* Model View...Whatever?!?!
  7. 7. Conceitos Programação declarativa x Programação imperativa: HTML como template para o Javascript
  8. 8. Conceitos Abstração de etapas como data binding e injeção de dependência de forma mais simples;
  9. 9. Conceitos Motor de templates: html = xml
  10. 10. $scope: onde a mágica acontece Fluxo de uma aplicação com angularjs
  11. 11. Sim, Two-Way Data Binding! Three-way? Calma, daqui a pouco =)
  12. 12. Porque usar? Melhorias na produtividade e manutenção do software; Escreva (bem) menos, faça mais! Diretivas = futuro! (modularidade, isolamos/abstraímos a complexidade) Flexibilidade: fácil integração com bibliotecas externas
  13. 13. = + Porque não? Quer saber mais? http://developer.chrome.com/trunk/apps/angular_framework. html
  14. 14. Porque usar? Grunt, Yeoman,... Generator-angular: https://github.com/yeoman/generator-angular
  15. 15. Porque usar? Karma – Test Runner For Javascript
  16. 16. Porque usar?
  17. 17. Angularjs e Segurança = $http * Json vulnerável [‘angularjs’, ‘framework’, ‘awesome’] * Json seguro )]}’, [‘angularjs’, ‘framework’, ‘awesome’] Quer saber mais? http://docs.angularjs.org/api/ng.$http
  18. 18. Mean? B-Mean? Three-way data bind? B reeze M ongoDB E xpress AngularJS N odejs A ngularJS F irebase
  19. 19. Comparativos X NÃO Criar webapps é muito mais que manipulação do DOM
  20. 20. Comparativos X AngularJS(56 linhas ): https://github.com/vedovelli/crudangular/blob/master/js/custom.js jQuery(123 linhas): https://github.com/vedovelli/crudjquery/blob/master/js/custom.js
  21. 21. Comparativos X AngularJS: http://jsfiddle.net/mhevery/vYknU/23/ Backbone/Emberjs: http://jsfiddle.net/jashkenas/CGSd5/
  22. 22. Comparativos X http://dybskiy.com/js-mvc-angular-vs-ember/ http://beust.com/weblog/2012/12/29/migrating-fromember-js-to-angularjs/
  23. 23. Mais comparativos? http://todomvc.com/
  24. 24. Angularjs, Backbonejs, Canjs ou Emberjs? Comparativo entre os 4 frameworks javascript mais conceituados da atualidade (nem tão imparcial assim) http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can -ember/?utm_source=javascriptweekly&utm_medium=email
  25. 25. Two-way bindings Comparativo de two-way bindings utilizados nos Frameworks Angular, Ember e Knockout http://projects.mariusgundersen.net/JSconf2013/
  26. 26. Aí você se pergunta: “ Com tudo isso que o AngularJS me oferece ele deve ser muito pesado... ” #SQN http://raphaelsaunier.com/talks/jsromandie-angularember/#/13/2
  27. 27. Case de sucesso http://www.localytics.com/blog/2013/angularjs-at-localytics/
  28. 28. Game bombermine http://bombermine.com/#/
  29. 29. Quer saber mais? Angularjs: http://angularjs.org Blog Angularjs: http://blog.angularjs.org/ Built with Angular: http://builtwith.angularjs.org/ Bombermine: http://bombermine.com/#/ Egghead.io: http://egghead.io/ Advanced Design Patterns and Best Practices: http://trochette.github.io/Angular-Design-Patterns-BestPractices/ E R.T.F.M!
  30. 30. @WILLMENDESNETO HTTPS://WWW.FACEBOOK.COM/WILSONMENDESNETO HTTP://ABOUT.ME/WILLMENDESNETO

×