I just started to develop my first JavaScript single page application (SPA) and so I took a look on different JavaScript frameworks. I just want to share some of my thoughts here:
My own background is JEE and I have developed a JEE application with EJBs, JSF and a little bit jQuery. Because of the fact that my existing project (imixs-workflow) provides already a REST API, migrating from JSF to a JavaScript SPA looks promising .
So I started with angular.js which is a widely used framework supported by Google. You find thousands of blogs and tutorials. So is’s easy to start with angular.js. After sorting out some problems with the different versions of angular.js and the fact that not every example in the web will work with every version of angular.js I succeed to start my first simple application. I agree that angular.js is very cool!
But finally I was not very happy about my first results. I felt more unsettled than confident after the first steps. Yes there is a big community but also there is ONE big company which determines the route. So for example I did not found any useful information about the upcoming version 2.0. Many doubts about the question how much need to be developed from scratch after the next release. Also I missed concepts concerning large enterprise applications as I knew from JEE.
So I started to take a look at Ember.js.
It took me much more time to find an ember.js tutorial which fits my needs as it took for angularjs. But after I found a very useful blog here, I began to understand the difference between ember.js and angular.
Angular is much louder than ember.js. It’s like if you search the internet for ‘Why did my Windows crash…’ you will find thousands of postings, blogs and ‘helpful’ answers. But there is to much noise and if you don’t listen exactly you can run into the wrong direction. So this could be one reason why some people are disappointed from angular. Angular has a big community but there are also many people who discuss topics not much in detail. It’s not my intention to complain about the very active community. But maybe it’s because I come from the JEE world that I did not expect to got every solution for every problem in one minute just because some people discuss the problem very loudly…. There is a good blog post explaining this thought in more detail.
So after all I come to the conclusion that ember.js fits my needs and my expectations to a SPA framework more than angular. For example there is a better concept of separating business logic form presentation logic. There is more flexibility and after all there is a very useful debugger mode inside ember. For example will the debugger mode tell you if you use a deprecated expression. Ember tells you if some kind of code is not what the ember engine expects. This was a pleasant surprise that your application still works even if you work with some outdated examples-
So for now I will continue working with ember.js and I will post some results of my work in the future here.
Ember.js Code Example:
Here just a simple example template for a first start. This example is based on ember.js 1.13.4:
index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ember Demo</title>
</head>
<body>
<script type="text/x-handlebars" id="application">
<div id="container">
<h1>First Example</h1>
{{outlet}}
</div>
</script>
<script type="text/x-handlebars" id="index">
<p>
Our content goes here
<br />
{{#link-to "roll"}}Start rolling dice!{{/link-to}}
</p>
</script>
<script type="text/x-handlebars" id="roll">
<h2>
This is another page!
</h2>
</script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/ember.debug.js"></script>
<script src="scripts/ember-template-compiler.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
app.js :
var Demo = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_BINDINGS: true,
LOG_VIEW_LOOKUPS: true,
LOG_STACKTRACE_ON_DEPRECATION: true,
LOG_VERSION: true,
debugMode: true
});
Demo.Router.map(function () {
this.resource("roll");
});