Your Cloud. 
Your Business. 
Top 10 Reasons to Learn AngularJS 
Jeremy Likness 
Principal Architect 
@JeremyLikness
What is AngularJS? 
• https://www.angularjs.org/ 
• Self-proclaimed super-heroic JavaScript framework that teaches 
HTML5 ...
1. Got XAML? Come to Angular! 
• AngularJS is declarative (like XAML) 
• IValueConverter = Angular’s Filter 
• Control = A...
2. Less Ritual and Ceremony 
• This is an entire self-contained AngularJS app that echoes your input 
using data-binding: ...
3. Dependency Injection 
• Dependency Injection is provided with Angular “out of the box” 
• Includes mock objects for thi...
4. Declarative UI 
• HTML is declarative 
• Original goal of AngularJS was to allow non-developers to be 
able to set up f...
5. ‘DD … Test- and Behavior-Driven Dev 
• AngularJS has its own test suite 
• Ready to test out of the box 
• Plays well w...
6. Massively Parallel Development 
• Many people complain about JavaScript in the enterprise 
because it’s not scalable an...
7. Designer/Developer Workflow 
• Don’t just scale within development. Scale across teams! 
• HTML and CSS hold the design...
8. Controls (Directives) 
• Web Components are part of ECMAScript 6 “Harmony” but not 
yet “current” for browsers 
• Polym...
9. State 
• HTTP is a stateless protocol 
• ASP.NET WebForms hide state using “view state” etc. 
• MVC goes “back to the b...
10. Single Page Apps (SPA)! 
• Yeah, I said it 
• Not required for AngularJS but what it is best known for 
• ngRoute give...
Conclusion 
• Read the full article: 
http://csharperimage.jeremylikness.com/2013/09/10-reasons-web- 
developers-should-le...
Questions? 
More Angular Projects and Examples: 
https://www.github.com/jeremylikness 
Email me to learn more: 
jlikness@i...
Upcoming SlideShare
Loading in...5
×

The Top 10 Reasons Web Developers Should Learn Angular

56,633

Published on

Angular is trending, and for a good reason. It is not just a fad, but a valuable tool that enables developers to build better client-centric JavaScript code faster and better with improved quality. This deck explains 10 reasons why it is important to consider Angular for modern enterprise web development based on Jeremy's extensive experience implementing Angular in real world projects.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
56,633
On Slideshare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
48
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The Top 10 Reasons Web Developers Should Learn Angular

  1. 1. Your Cloud. Your Business. Top 10 Reasons to Learn AngularJS Jeremy Likness Principal Architect @JeremyLikness
  2. 2. What is AngularJS? • https://www.angularjs.org/ • Self-proclaimed super-heroic JavaScript framework that teaches HTML5 new tricks • Trending to be one of the most popular frameworks around
  3. 3. 1. Got XAML? Come to Angular! • AngularJS is declarative (like XAML) • IValueConverter = Angular’s Filter • Control = Angular’s Directive • AngularJS Supports Two-Way Binding • True Design/Developer Separation
  4. 4. 2. Less Ritual and Ceremony • This is an entire self-contained AngularJS app that echoes your input using data-binding: <script src="http://code.angularjs.org/1.2.9/angular.js"></script> <div ng-app><input type="text" ng-model=" txt"/><span>{{txt}}</span></div> • Here’s the proof: http://jsfiddle.net/jeremylikness/BzmfT/ • Dirty-tracking means less ceremony and ritual in your setup • One Google developer rewrote 6 months, 17,000 lines of code in 3 weeks and shrank it down to 1,500 lines of code
  5. 5. 3. Dependency Injection • Dependency Injection is provided with Angular “out of the box” • Includes mock objects for things like web service (HTTP) calls for true, easy-to-write unit tests • Learn more here: http://csharperimage.jeremylikness.com/2014/06/dependency-injection- explained-via.html and here: http://csharperimage.jeremylikness.com/2014/08/angularjs-lifetime- management-lazy.html
  6. 6. 4. Declarative UI • HTML is declarative • Original goal of AngularJS was to allow non-developers to be able to set up filters, tags, and other functionality • Keeps presentation logic declarative and separate from the imperative business logic • This approach reduces side effects • Enables a cleaner developer/designer workflow
  7. 7. 5. ‘DD … Test- and Behavior-Driven Dev • AngularJS has its own test suite • Ready to test out of the box • Plays well with popular frameworks like QUnit and Jasmine • Has its own testing framework (Protractor) • Data-binding makes it easier to test presentation logic independent of the UI/view • Everything is testable, including filters and directives (“controls”) • See tests for a 6502 emulator written in AngularJS: http://apps.jeremylikness.com/apps/t6502/
  8. 8. 6. Massively Parallel Development • Many people complain about JavaScript in the enterprise because it’s not scalable and being dynamic makes it difficult to manage • Independent of AngularJS, solutions like CoffeeScript and TypeScript can help • With AngularJS the modular approach makes it really easy to architect the system to allow massive parallel development • Personally worked on project with 25+ globally distributed developers working on over 80,000 lines of client code
  9. 9. 7. Designer/Developer Workflow • Don’t just scale within development. Scale across teams! • HTML and CSS hold the design for the app. • The app is declarative so designers don’t need to learn JavaScript to modify the design. • Data-binding provides a “design contract” – if you know you are working with data elements you can build functionality before the design is even available or ready without worrying about significant refactoring or rework.
  10. 10. 8. Controls (Directives) • Web Components are part of ECMAScript 6 “Harmony” but not yet “current” for browsers • Polymer from Google is also a forward-looking framework • Directives in AngularJS are available right now • Have a special way to handle selection boxes, masked input, or other logic? Contain it in a control to reuse across modules nad projects. • Directives are testable, can be worked on in parallel, extend the UI declaratively and participate in dependency injection
  11. 11. 9. State • HTTP is a stateless protocol • ASP.NET WebForms hide state using “view state” etc. • MVC goes “back to the basics” but some people find state management to be a challenge • Single Page Applications (SPA) address this • AngularJS supports SPA, HTTP, and AJAX concepts out of the box. Interact with services as a state of a running app and don’t worry about cookies or long URLs
  12. 12. 10. Single Page Apps (SPA)! • Yeah, I said it • Not required for AngularJS but what it is best known for • ngRoute gives routing out of the box • ngView gives you a placeholder • ui-router gives even more control with nested views and state management • Full support for asynchronous loading of routes and resolution of asynchronous calls before rendering your templates
  13. 13. Conclusion • Read the full article: http://csharperimage.jeremylikness.com/2013/09/10-reasons-web- developers-should-learn.html • These points are based on real-world experience using AngularJS on large enterprise apps • Watch the full course to master AngularJS here: http://bit.ly/masterang • AngularJS and TypeScript are better together!
  14. 14. Questions? More Angular Projects and Examples: https://www.github.com/jeremylikness Email me to learn more: jlikness@ivision.com Jeremy Likness, Principal Architect @JeremyLikness
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×