Embed Size (px)
DESCRIPTION
Clarice Technologies www.claricetechnologies.com Product Development Services Company specializing in Integrated User Experience Design and Technology Development.
Citation preview
Himanshu Khara Product Development Sr. Manager
A Modern Javascript MVC SuperFramework
What Do Web Developers Need?
FROM THE ARCHITECT
• Scalability
• Maintainability
• Modular nature
• Cleanliness of Implementation
• Guidance
FROM THE APPLICATION
• Light-weight
• Performance
• Consistent/Uniform
• Usable
FROM THE TECHNOLOGY STACK
• Easy to Use
• Easy to test
• Tooling Support
• Standards-driven
FROM THE DEVELOPMENT PROCESS
• Quicker turn-around time
• Predictable Velocity
Available Modern Javascript MVC Frameworks
CLIENT SIDE
• BackboneJS
• Spine - KnockoutJS
• KnockbackJS
• Ember.js
• AngularJS
• JavascriptMVC
• Sencha / ExtJS
References- http://backbonejs.org http://spinejs.com http://knockoutjs.com/ http://kmalakoff.github.com/knockback/index.html
http://emberjs.com http://angularjs.org/ http://javascriptmvc.com http://www.sencha.com http://meteor.com/
http://batmanjs.org http://derbyjs.org
CLIENT – SERVER – HYBRID
• MeteorJS
• Batman
• DerbyJS
What is AngularJS?
Ang-who-lar?
Complete client-side JS framework solution
• Opinionated; but very flexible at the same time
• Higher-level abstraction
Open source; Developed by Google
• 3 years in development ; 1.0 released in June 2012 (current version - 1.0.4-bewildering-hair / 1.1.2-tofu-animation)
• Used in Google production projects
• Growing developer community
Decent (growing) API documentation, Tutorials & Development guides• http://builtwith.angularjs.org/
Support for all modern browsers & IE7 and above (using shims)
Real World Users
AngularJS is used for many platforms and domains
• Used for many platforms and domains
• DoubleClick digital marketing manager by Google
• Google Places
• YouTube application on PS3
• Tetractis - Olympics 2012 real-time data
• SCamp - SoundCloud Playlist Manager
• GoodFilms.com website
• FolderChute - Pipeline for many cloud-storage services
• Provok.in - Crowd-enabled "affirmation" portal
References- http://places.google.com/ http://builtwith.angularjs.org/ https://github.com/angular/angular.js/wiki/Projects-using-AngularJS
In-depth study of AngularJS
VIEWS PURELY <DECLARATIVE/>
• HTML "compiler" teaches old HTML new tricks
• Readable, expressive, easy-to-understand
• Great templating engine
2-WAY BINDING MODELS & VIEWS
• 2-way automatic updation of models & views
• Eliminates most DOM manipulation
MODELS AS PLAIN JAVASCRIPT OBJECTS
• Free from unnecessary boilerplate
• Reusable, extensible, testable
CONTROLLERS FOR BEHAVIOR
• Encapsulate logically related functionality on a page
• Cleanly separate out and add behavior to models
• Standard JS classes - no boilerplate
SERVICES
• Shared functionality across controllers
• $ Resource service based on Promise spec
• Allows synchronous assignment for async returns
• Support for REST, extensible to other paradigms
DEPENDENCY INJECTION
• Keeps parts of the app unaware of each other
• The DI runtime wires everything together
• Results in modular, easily testable code
In-depth study of AngularJS
DIRECTIVES
• Easily create reusable HTML components
• Encapsulate markup, behavior and style
• Can be used as custom tags, attrs or comments
TESTABILITY
• Built with ease of unit testing in mind
• Well-separated concerns result in testable code
• Integrates very well with Jasmine
• Bundled scenario runner
OUTPUT FILTERS
• In-built routing perfect for single-page apps
• Deep-linking support
INTEROPERABILITY
• No hard dependencies; works well with most JS libs
• Can use any
PAGE NAVIGATION
• In-built routing perfect for single-page apps
• Deep-linking support
OUT-OF-THE-BOX GOODNESS
• Directives
• Reusable filters for clean output formatting
• XHR-wrapping services for ease of integration
• Validators for all basic HTML input types
• Basic localization support
• Mocks support for better testability Watch out!- Traditional web app concepts turned inside-out
- Dependency Injection can warp your mind initially
Code Samples
Is this better than what we have?
Basic MV* pattern
• Templatized Views
• Lightweight Controllers (no DOM)
• Unintrusive Model definition
Directives
• Reusable components
• All DOM manipulation goes here
• Awesome !
Output Filters
Page Navigation & Routing
Examples
Basic AngularJS example
<input ng-model="greeting" placeholder="Say hello to someone.." />
<h2 ng-init="greeting = 'World'">Hello {{greeting}} !!</h2>
Basic AngularJS example
function GreetingController($scope) {
$scope.greeting = 'World';
}
<div ng-controller="GreetingController">
<input ng-model="greeting" placeholder="Say hello to someone.." />
<h2>In English - Hello {{greeting}} !!</h2>
<h2>In French - Bonjour {{greeting}} !!</h2>
</div>
Examples
Something more than “Hello World!”
function Tweet(props) { // MODEL DEFINITION Entity.call(this); // Activity may be a subclass angular.extend(this, props); // { isPrivate(), content, author, time }}
function TwitterFeedController($scope, Twitter) { // CONTROLLER / VIEWMODEL $scope.tweets = Twitter.get(...); // [<Tweet>] .. model $scope.postTweet = function () { TwitterService.submitTweet($scope.shoutText); };}
<div ng-controller="TwitterFeedController"> // VIEW <div class="input-append shout-out"> <input ng-model="shoutText" placeholder="What's on your mind?" /> <button ng-click="postTweet()">Post</button> </div> <ul> <li ng-repeat="tweet in tweets" ng-hide="tweet.isPrivate()"> <a>{{tweet.content}} by {{tweet.author}} at {{tweet.time | dateFormat}}</a> </li> </ul></div>
Examples
Modularization
angular.module('social-api', [ ]) .service('Social', ['Twitter', function ($twitter) { return { twitter: Twitter, facebook: Facebook }; }]) .service('Twitter', ['$http', '$q', function($http, $q) { return { iterate: function (searchTerm, lastID) { if (!searchTerm) { return $q.defer().resolve([]); } var url = 'https://api.twitter.com/1.1/search/tweets.json' + '?&rpp=100&include_entities=true&result_type=mixed' + '&callback=JSON_CALLBACK', params = '&q=' + searchTerm + (lastID ? '&since_id='+lastID : ''); return $http.jsonp( url + params ) .then( function(response) { var data = response.data; return { items : data.results, refreshURL : data.refresh_url, query : data.query }; }); } };
}]);
angular.module('my-social-app', ['social-api']) // using the Social Module
Examples
Directives & Filters – Part 1
angular.module('i18n-lib') .service('I18N', ['$http', 'GoogleTranslate', function ($http, GoogleTranslate) { return { get: function (key, parameters) { // fetch the string value from the language files // find out currently selected language (from session maybe) // replace argument-placeholders with parameters // return translated string } }; }])
// a simple internationalization service
Examples
Directives & Filters – Part 2
angular.module('i18n-lib') .directive('i18n', ['$filter', 'I18N', function ($filter, I18N) { return { restrict: 'E', scope: { key: '@' }, link: function (scope, element, attrs) { var languageString = I18N.get(attrs['key']), ret, token, tokens, tokenVal, $scope = scope.$parent;
scope.$watch(replace);
function replace() { // mojo ! // GET the i18n-key and parameters (if any) // Ask I18N service to translate key (provide parameters if any) // render the translated string into the element element.html(I18n.get(...)); } } }; }])
.filter('i18n', ['I18N', function (I18N) { return function (key) { return I18N.get(key); }; }])
Examples
Directives & Filters – Part 2 contd…
<h1>{{'hello_world' | i18n}}</h1><i18n key="hello" greetee="World"></i18n><i18n key="hello" greetee="Robert"></i18n>// where language files look like - // en-us.langhello_world = Hello Worldhello = Hello {greetee}// fr.langhello_world = Bonjour tout le mondehello = Bonjour {greetee}// de.langhello_world = Hallo Welthello = Hallo {greetee}
angular.module('my-social-app', ['social-api']) // using the Social Module
Examples
Directives & Filters – Part 3
<h1>{{'hello_world' | i18n}}</h1><i18n key="hello" greetee="World"></i18n><i18n key="hello" greetee="Robert"></i18n>
// where language files look like –
// en-us.langhello_world = Hello Worldhello = Hello {greetee}// fr.langhello_world = Bonjour tout le mondehello = Bonjour {greetee}// de.langhello_world = Hallo Welthello = Hallo {greetee}
Examples
Page definition & routing
// define parameterized URLs for routes$routeProvider .when('vote?d=:dName&eid=:dId!:type!:eId&q=:eName', { templateUrl: 'partials/challenge-voting.html', controller: ChallengeVotingController });
// Now, for /#vote?d=spigit-com&eid=1!challenge!2112&q=Whats-up
// all route arguments auto-injected into the controllerfunction AccountPageController($scope, $routeParams) { $routeParams == {
dName: 'spigit-com', dId: 1,type: 'challenge', eId: 2112, q: 'Whats-up'
}}
$routeProvider.html5Mode = true; // enables HTML5 pushState// all URLs seamlessly convert to - (no "#")http://.../vote?d=spigit-com&eid=1!challenge!2112&q=Whats-up
• “Pages" can be defined as external partials
• Streamlined routing; plugs in controller beautifully
• Parameterized URLs result in correct routing and readily available params within the controller
• Supports HTML5 History API (cleaner URLs)
Examples
Model definition
function Tweet(props) { Entity.call(this); // Activity may be a subclass angular.extend(this, props); // { isPrivate(), content, author, time }}
function TwitterFeedController($scope, Twitter) { $scope.tweets = Twitter.get(...); // [<Tweet>] $scope.postTweet = function () { TwitterService.submitTweet($scope.shoutText); };}
<div ng-controller="TwitterFeedController"> <div class="input-append shout-out"> <input ng-model="shoutText" placeholder="What's on your mind?" /> <button ng-click="postTweet()">Post</button> </div> <ul> <li ng-repeat="tweet in tweets" ng-hide="tweet.isPrivate()"> <a>{{tweet.content}} by {{tweet.author}} at {{tweet.time | dateFormat}}</a> </li> </ul></div>
Examples
Modularization
angular.module(social-api', [ ]) .service('Social', ['Twitter', function ($twitter) { return { twitter: Twitter, facebook: Facebook }; }])
.service('Twitter', ['$http', '$q', function($http, $q) {return {
iterate: function (searchTerm, lastID) { if (!searchTerm) { return $q.defer().resolve([]); } var url = 'https://api.twitter.com/1.1/search/tweets.json' + '?&rpp=100&include_entities=true&result_type=mixed' + '&callback=JSON_CALLBACK',
params = '&q=' + searchTerm + (lastID ? '&since_id='+lastID : '');
return $http.jsonp( url + params )
.then( function(response) { var data = response.data;
return {
items : data.results,
refreshURL : data.refresh_url,
query : data.query};
});}
};
}])
Clarice Technologies
For more information : www.ClariceTechnologies.com+91.20.4078.9520info@claricetechnologies.com
Pune | Bangalore | USA
