By any chance I am not meaning that I dont like EmberJS over AngularJS. With my limited knowledge, I love both the javascript framework. I think based on the application, you can use.
Brief about our application
Its a small hybrid single page application which gets the data from the server and renders on the UI. Our target form factors are tablets and later support for mobiles. Mostly the application is about getting list and displaying the details of the item selected by the user. There is not much form at this point of time. Screens will be rendered based on Routing model.
In order to finalize the framework which will suit our need we created a small POC which fetches the JSON data including images URL and renders that list on the screen. we created this application using ember and angular and was amazed to see that angularJS renders data much faster than emberJS. Since targets are tablets and mobiles, 500 ms time also matters to the user experience.
Code is given below for both JS Framework. Its using JSON as data source and it contains around 520 childrens. Based on this data set, Ember is taking 2000 MS more time to render all the records in the desktop. And Its too high when we consider mobile and tablets. Based on the requirement of our project, finally we decided to go with angular.
I would advice to consider all nuts and bolts of your application before choosing a framework. Create a POC and check the performance and other aspects such synchronization of data...
EmebrJS
index.html Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
</head>
<body>
<h1>Ember Demo App</h1>
<script type="text/x-handlebars">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#each}}
<div style="background-color:#CDD9E4;margin:10px;">
<div>{{data.domain}}</div>
<div>{{data.selftext}}</div>
<div>{{data.author}}</div>
<div>{{data.clicked}}</div>
<div>{{data.sticked}}</div>
<div>{{data.permalink}}</div>
<div>{{data.title}}</div>
<div>{{data.url}}</div>
<div>{{data.num_comments}}</div>
<div>{{data.visited}}</div>
<div>{{data.num_reports}}</div>
<div>{{data.ups}}</div>
</div>
{{/each}}
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.2.0.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js file
App = Ember.Application.create();
App.Router.map(function(){
this.resource("index",{path:"/"});
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return Ember.$.getJSON("../data/data.json").then(function(data){
return data.data.children;
});
}
});
Angular JS File
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Angular Starter Kit</title>
</head>
<body>
<h1>Angular Demo App</h1>
<div ng-view></div>
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js file
var App = angular.module('myApp',['ngRoute'])
.config(['$routeProvider' , function ($routeProvider){
$routeProvider.when("/",{
templateUrl : "template/home.html",
controller : "HomeController"
});
}]).controller("HomeController" , ["$scope" , '$http' , function($scope,$http){
$http.get("../data/data.json").success(function(data){
$scope.children = data.data.children;
});
}]);
home.html
<div style="background-color:#CDD9E4;margin:10px;" ng-repeat="data in children">
<div>{{data.data.domain}}</div>
<div>{{data.data.selftext}}</div>
<div>{{data.data.author}}</div>
<div>{{data.data.clicked}}</div>
<div>{{data.data.sticked}}</div>
<div>{{data.data.permalink}}</div>
<div>{{data.data.title}}</div>
<div>{{data.data.url}}</div>
<div>{{data.data.num_comments}}</div>
<div>{{data.data.visited}}</div>
<div>{{data.data.num_reports}}</div>
<div>{{data.data.ups}}</div>
</div>
data.json
{
"kind": "Listing",
"data": {
"modhash": "",
"children": [
{
"kind": "t3",
"data": {
"domain": "self.cute",
"banned_by": null,
"media_embed": {
},
"subreddit": "cute",
"selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>No videos or websites, please. If your post is not an image it will be removed.</p>\n</div><!-- SC_ON -->",
"selftext": "No videos or websites, please. If your post is not an image it will be removed.",
"likes": null,
"secure_media": null,
"link_flair_text": null,
"id": "1ms27c",
"secure_media_embed": {
},
"clicked": false,
"stickied": true,
"author": "HairyRainDrop",
"media": null,
"score": 19,
"approved_by": null,
"over_18": false,
"hidden": false,
"thumbnail": "self",
"subreddit_id": "t5_2qh5l",
"edited": false,
"link_flair_css_class": null,
"author_flair_css_class": null,
"downs": 8,
"saved": false,
"is_self": true,
"permalink": "/r/cute/comments/1ms27c/just_a_reminder_images_only/",
"name": "t3_1ms27c",
"created": 1379691227.0,
"url": "http://www.reddit.com/r/cute/comments/1ms27c/just_a_reminder_images_only/",
"author_flair_text": null,
"title": "Just a reminder: Images only",
"created_utc": 1379687627.0,
"ups": 27,
"num_comments": 6,
"visited": false,
"num_reports": null,
"distinguished": "moderator"
}
}
],
"after": "t3_1tbtkp",
"before": null
}
}
Repeat the chilren object... or download the JSON from http://www.reddit.com/r/cute/.json.
No comments:
Post a Comment