the top 10 reasons web developers should learn angular
Post on 20-Dec-2014
48.879 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 new tricks• Trending to be one of the most popular frameworks around
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
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
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
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
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/
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
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.
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
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
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
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!
Questions?
More Angular Projects and Examples:https://www.github.com/jeremylikness
Email me to learn more:jlikness@ivision.com
Jeremy Likness, Principal Architect @JeremyLikness
top related