Google Developers Group - Porto Alegre # Introducing to AngularJS


Published on

A brief presentation about AngularJS performed during Google Developers Group meeting in Porto Alegre/Brazil on november 26th.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Google Developers Group - Porto Alegre # Introducing to AngularJS

  1. 1. HTML enhanced for web apps Google Developers Group - Porto Alegre
  2. 2. Vinicius Linck Mobile Apps Architect
  3. 3. var agenda = { “chapter1”: “Angular… what?”, “chapter2”: “How does it work?”, “chapter3”: “Why Angular?”, “chapter4”: “Common pitfalls”, “chapter 5”: “Things I wish I were told about being hero…” };
  4. 4. AngularJS A super-heroic Javascript framework
  5. 5. Facing the truth: Java is to javascript as ham is to hamster…
  6. 6. Little bits of history • Created 2009 by Misko Hervery (Googler) and Adam Abron; • Front end for an online JSON storage service; • New members: Igor Minár & Vojta Jína (Googlers)
  7. 7. Background • HTML is an excellent choice for declaring static documents, but it falters when providing dynamic behaviour, which is important for web apps. • AngularJS extends HTML vocabulary of your application resulting in an expressive, readable and productive develop environment.
  8. 8. AngularJS • An open-source javascript framework maintained by Google; • MVW (Model-View-Whatever); • Declarative programming for UIs (HTML, CSS); • Imperative programming for expressing BL (javascript); • Designed for Decoupling & Testing;
  9. 9. How does it work? Web programming requires web understanding
  10. 10. Common application You need to implement the “cycle”
  11. 11. ST EA SL L T ID HI E S This is the “cycle” You need to respect that… and learn how to break it.
  12. 12. ST EA SL L T ID HI E S Scope is the key Understanding scopes, you understand pretty much everything…
  13. 13. Things got easier… … and now, you are ready for single-page application development.
  14. 14. Why angular? • Two-way data bindings: one source of information; • Directives: extend your app as you wish; • Dependency injection; • Less coding (~50%): fewer bugs; • Awesome performance; • Is JQuery compatible (try to avoid that); • Reusability!!!!
  15. 15. Common pitfalls… … and how to deal with them.
  16. 16. Ugly, but tasteful… • JQM Stack • MEAN Stack • yo-yo problem • Sequential coupling • Poltergeists • Action at a distance • Lasagna code ST EA SL L T ID HI E S
  17. 17. Starting with AngularJS Things I wish I were told about being hero…
  18. 18. Be aware… • How modules work; • scope and rootscope differences; • Always manipulate DOM through directives; • Keep “event orgy” under control; • Try to understand how things are implemented before import an existing module into your app; • Study browser internals! ST EA SL L T ID HI E S
  19. 19. Refactor & Rewrite There’s no framework capable to replace dumbness…
  20. 20. $scope.$emit(“THANK YOU!”);