Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Top 10 Reasons Web Developers Should Learn Angular


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

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? • • 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=""></script> <div ng-app><input type="text" ng-model=" txt"/><span>{{txt}}</span></div> • Here’s the proof: • 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: explained-via.html and here: 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:
  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: 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: • AngularJS and TypeScript are better together!
  14. 14. Questions? More Angular Projects and Examples: Email me to learn more: Jeremy Likness, Principal Architect @JeremyLikness