Post on 19-Jun-2015
description
Quick start with AngularJSWORKSHOP
• 13+ years of production development
• 6+ years of web development
• TDD infected 9 years ago
• And only 6 months of AngularJSexperience
Who’s speaking?
What do we want?
• Do less
• Get more
The Framework
The most influencing JavaScript frameworks over the last two years.Check it out here: http://goo.gl/XGT4dH
The Framework
Are You…
• Beginner or intermediate? AngularJS is opinionated and will save you from the spaghetti code monster.
• More advanced? Create complex web apps in a simpler way. Write code with unit testing in mind.
Recap MVC
ModelApplication Data
(e.g. Values typed into a form field. Or the results of a database call.)
ViewRepresentation of the Model(e.g. What the user sees on a
webpage.)
ControllerMediator between the Model & View
(e.g. When a form field is updated, it takes care of saving that data.Or when data comes back from an API call, tells the view to update.)
How MVC rethought in AngularJS
ModelApplication Data
(e.g. Values typed into a form field. Or the results of a database call.)
ViewRepresentation of the Model
(html fragment with ng-controllerattribute)
WhateverMediator between the Model & View
(e.g. Passes data back and forth seamlessly* via data binding)
But wait!..
— Ain’t it about extra work? Why not make it simple with JQuery?
In fact, less work!
Instead of
<div id="greeting"></div>and$('.greeting').text(greetingMessage);
You need only:
<div>{{ greetingMessage }}</div>
Also…
• Is very opinionated.(i.e. there is typically a “right” way to do it)
• Gives you a way to organize your code but feels like you’re just writing HTML and JS, not extending classes.
• Does a lot of heavy lifting for you(e.g. DOM manipulation using data binding, REStinterop etc.)
And more
• Data models are just plain objects
• RESTful services support
• Internationalization and Localization
• Sanitazing and validation for high security
• Built with TDD in mind
• E2E test support
Your Toolkit
• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
angularjs.org
ngmodules.org
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
Your Toolkit• AngularJS• IDE
• WebStorm• Visual Studio + ReSharper• Plunker
• Yeoman• Angular App Generator• Grunt• Karma• Travis, .gitignore etc.
• Shamanistic Tambourine aka Бубен
Scaffolding with Yeoman• Well thought-out directory structure
• All dependencies included (nmp and bower)
• Boilerplate for routine tasks and unit testing done
• App folder for the AngularJSapplication sources
• Dist folder for the application deploy package
• Test folder for Jasmine+KarmaJS specs
Then doing everything with Grunt
And run your test right in the right IDE*
* JetBrains WebStorm + KarmaJS
Create new stuff with Yeoman
Creates 2 files:• Directive stub with JSDoc• Jasmine test spec
Places them in appropriate place
Includes directive source in the index.html file
Or create it in your favorite IDE*
* JetBrains WebStorm
Writing a controller
Writing a controller
Let’s try it…
Compare:
• Naïve Weather Apphttp://plnkr.co/edit/51OCvUa7Y8t1ND1ojqNp
• Mature Weather Apphttp://plnkr.co/edit/BeBj63yoI1QZT0QpMAoG
and
• UnicornLaunch Application in WebStorm
Don’t say you are not warned
Don’t say you are not warned
• Modularity and Proper project organization
• Implement all DOM stuff in directives
• Consider performance issues
• No feature without test
Don’t say you are not warned1. They want you to support IE?
2. Wouldn’t it be an overkill?
3. Does SEO matter?http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
4. Enormous data amounts in a single view
Use AngularJS anyway! =))