Upload
jeremy-likness
View
5.555
Download
1
Tags:
Embed Size (px)
DESCRIPTION
“There is no doubt AngularJS is one of the hottest JavaScript and Single Page Application (SPA) frameworks in use today. Is Angular just a bunch of hype, or is there substance behind its promise of teaching HTML new tricks? Join iVision principal architect Jeremy Likness when he shares his hands-on experience developing a massive Angular enterprise application with globally distributed teams of dozens developers over a period of several years. See practical examples of Angular and learn about the various concepts that make it a useful framework that isn’t as opinionated as other options in the market. Beginners will benefit from understanding what Angular does and how it impacts the bottom line of technology, people and process and experienced developers will learn best practices and advanced techniques from Jeremy’s extensive Angular experience. There’s something for everyone so be sure to RSVP now!”
Citation preview
Your Cloud.Your Business.
AngularJS: From a Different Angle Jeremy Likness Principal Architect @JeremyLikness
www.ivision.com
• Business Process Management/ALM
• Custom Application Development
• Collaboration• Business Intelligence
TODAY’S AGENDA
1. Why? An Angular Case Study
2. What? 101 Walkthrough of Capabilities
3. How? Some best practices, tips, and techniques
4. Q&A Questions (hopefully answers!)
WHY?
WHY?
Because Angular is …
WHY?
No, seriously! I’m biased because …
25developers
80,000+L.O.Ts.C
200+components
3years
4xImprovement
Global Parallel Team
WHY?
• Began effort (6 mos.) with JavaScript and KnockoutJS• Changed to use AngularJS and TypeScript • 4x faster development, attributed in a large part to Angular
4xImprovement
WHY?
Source:GoogleTrends
WHAT?
WHAT?
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
WHAT?
• Angular parses expressions right in the DOM• Expressions look a lot like JavaScript • Conditional DOM compilation based on
expressions• Easily initialize/set properties of your model
Expressions
DEMO: Expressions
WHAT?
• Angular enables data-binding• Declarative vs. Imperative• No special ceremonies – POJOs accepted• Designer Developer
Glue
Imperative vs. Declarativefunction isNumeric(str) { var regEx = /^\d+$/; return regEx.test(str); } var elem = document.getElementById('#inputField'); elem.addEventListener('oninput', function() { if (isNumeric(elem.value)) { etc... }});
<input id="inputField" data-ensure-is-numeric="true"/>
VS.
No Special Ceremoniesvar person = Ember.Object.create({ name: 'Jeremy', age: 40 });
var age = person.get('age');
var person = { name: 'Jeremy', age: 40 }; var age = person.age;
VS.
DEMO: Glue
WHAT?
• Angular makes it easy to tag items and then retrieve them
• 100% for pure JavaScript• Angular doesn’t transform things into some
weird Angular-ized version• If you have foo that depends on bar, Angular will
take care of that, too
Container
DEMO: Container
WHAT?
• template [tem-plit] anything that determines or serves as a pattern; a model
• Don’t Repeat Yourself (DRY)• UI templates (with glue)• Reusable text templates (filters)• Reusable components (directives)
Templates
DEMO: Templates
WHAT?
• Angular is loaded with out-of-the-box tools• $log • $http and $resource • ngAnimate • ngRoute
Tools
DEMO: Tools
WHAT?
• Angular promotes testability from square one• Angular provides its own set of mocks• Works well with popular frameworks like QUnit
and Jasmine• Has it’s own “uber-test” framework called
Protractor• Testing promotes cleaner APIs, well-organized
and quality code
Testable
DEMO: Testable
RECAP …
Angular is …
Angular
Expressions
Glue
ContainerTemplates
Tools
Testable
HOW?
HOW?
TypeScript Directory Structure
Controller As
JavaScript First
Properties Watches Value $log $exception
Handler
$provide angular .extend() $injector resolve
batarang ::bindonce ng-if interceptors
HOW? (The Stack)
SQL MongoDB
Entity Framework
MongoDBDriver
ASP.NET MVC / Web API NodeJS Express
Angular
HOW? (Add a New Autocomplete)
var foo = new PairQueryMapper<Table, Database>( i => i.ItemIdentifier, i => i.Description, query => query.Where(i => i.Filter.Equals("Y"))); container.RegisterInstance<IPairQueryMapper>("foo", foo);
<pair-selector item="fooSelector" pair="foo"></pair-selector>
Step One: Register a mapping
Step Two: Drop in the directive
Step Three: Wait, I’m Done?! DANCE and SHOUT!
Next Step …
Build a Responsive Angular Health App:
https://github.com/JeremyLikness/AngularHealthApp/
Questions?
• Expressions: http://jsfiddle.net/jeremylikness/hpx1rL85/ • Glue: http://jsfiddle.net/jeremylikness/g205mkys/ • Container: http://jsfiddle.net/jeremylikness/qmvnn1ca/ • Templates: http://jsfiddle.net/jeremylikness/4mp5u64j/ • Tools: http://jsfiddle.net/jeremylikness/oda7e989/ • Testable: http://jeremylikness.github.io/AngularHealthApp/test.html • Advanced: http://bit.ly/expertangular/
Jeremy Likness, Principal Architect @JeremyLikness