Single Page Applications - The Perfect Path

January 5, 2016 • Damien White

Choosing a Path

There is definitely no shortages of frameworks and libraries for creating single-page applications (known as SPAs). What exactly is a SPA you ask? A SPA is similar to a desktop application experience. The server loads a single page (one HTML page, with JavaScript and CSS), and all the typical interactions that you expect on the web occur on the client. JavaScript handles application structure, templating, routing, models, components, et. al. There’s a good chance that the client communicates with the server, but this occurs through AJAX requests instead of requesting standard web pages like a typical web application. Remember, there is only one HTML page, and the AJAX requests we make to the server is for data, not HTML markup. This approach makes the application feel more native. Think about applications like Google’s Gmail. Your mail loads automatically without you refreshing the browser. It feels like a native, desktop application.

So Many Choices

I mentioned earlier that there are no shortages when it comes to SPA frameworks/libraries. Let’s list of few of them.. Backbone, Angular, React, Ember, Aurelia, Meteor, Polymer, Knockout, and Mercury. Phew! That’s a lot right there, and I know I missed some. How do you decide which to use? Depending on your project you may choose one over another, but honestly, I feel one framework stands out from the rest.

The “Perfect” Framework?

Are you on the edge of your seat waiting for me to reveal my pick for the “perfect path?” If you’ve read my other posts, you can probably guess what I’m thinking. I can hear you saying “out with it already!” Fine. In my opinion, the one framework that you should be using for SPAs is Ember.js. Tada! Got that, ok end of the post! Just kidding, I’ll explain my reasoning in detail throughout the rest of this post.

You Will Be Assimilated

Ember was released in 2011; thus, it’s almost five years old. The past five years have been exciting as new features have been added with each release with keeping legacy code operative. Version 2.0.x of Ember.js is like a standard release, with the only difference being that deprecations (old cruft) were removed. The changes in Ember 2.0 (and others that are coming) are in efforts to make Ember even easier for beginners to work with. What really makes Ember the best framework is that the Ember Team (Yehuda Katz and Tom Dale) look at the other various frameworks out there and adapt best practices from them. In a recent talk given by Tom Dale, he stated a warning to Ember competitors:

“You will be assimilated.”

Ember is not shy about studying the competition and extracting the best ideas from them. Take for example a few releases back when Ember re-engineered their whole re-rendering philosophy, significantly improving performance. Here’s an example of how fast their new Glimmer engine is running DBMonster. Ember took inspiration from React and performance in Ember is as good as ever. Know that with Ember, you’re getting the best ideas from all around the web.

Ember-Data

Ember-Data may have taken a lot of hits from developers in it’s early beta days, and it doesn’t get the respect it deserves. Ember-Data is a powerful tool for working with APIs of all types. In recent releases, > 2.0, Ember-Data’s default adapter supports JSON API. This is a great move forward as the JSON API spec supports things like paging and handling errors. There are numerous server implementations if you are interested getting started with JSON API. Ember-Data doesn’t just support JSON API, it also comes with other adapters, and if those don’t work for you, you can always write your own adapter. It’s extremely flexible. Ember-Data abstracts away AJAX calls, giving you methods like findRecord, findAll, and createRecord. You can sort of think of Ember-Data as a client-side ORM. The function is similar to things like ActiveRecord or Entity Framework.

Ember-CLI

Other frameworks may have CLI tools, but none seems to match Ember-CLI. It starts with the ability to create a new, standardized Ember.js application. This is important. Before Ember-CLI, developers had their own ideas about how to structure their applications. This made it difficult for new developers to get up to speed on an application. With Ember-CLI’s conventions for the application’s structure, it makes it easy to look at another developer’s project and know exactly what’s going on. That’s just one of the functions of Ember-CLI, but it brings a lot more to the table. Ember-CLI (with the help from Babel) allows you to write ES6 syntax. It also acts as a server to run your application equipped with livereload, which reloads your application every time you save. It can also run a test server, and similar to livereload, your tests will run every time you save. It also builds you application for production, has asset compilation, and so much more.

Community

Sure, every framework has their own community, but the Ember.js one is special. It reminds me of the Ruby community, which is also fabulous. There are so many awesome individuals that make Ember.js so special, and it starts with Yehuda and Tom. Their commitment to Ember is just awesome. There are plenty of other special developers out there, too many to list, but there are a few that I’d like to point out. This is no way a complete list. Did I mention that the Ember community is awesome?

First is Taras Mankovski, better know as @EmberSherpa. If you want to catch all the great Ember news, following @EmberSherpa is the way to go. He even does Ember pairing, gives advice, helps with TDD, and more all for free. Oh, and he’s the organizer of the Ember Global Meetup, a global user group if you will.

Next is Frank Treacy of Ember Igniter fame. His website is just awesome. He focuses on all new stuff (Ember 2.0+), and his content is incredible.

Finally, is Balint Erdi (@bazz). He is the author of easily the best Ember.js book out there, Rock and Roll with Ember.js. He has been keeping it up to date with Ember changes, which is fantastic. The reason other books aren’t as good is that they are snapshots, not evolving with the framework. Balint’s book, on the other hand, doesn’t have that problem. He was nice enough to give me a reviewer’s copy, so expect a full review of the book in the future.

Conclusion

So there you have it; use Ember.js. I didn’t write this post to start a war. I’m sure you love Angular or whatever, but in my opinion, Ember is the way to go for Single Page Applications. Here’s the thing, given the most complex of requirements, Ember has been able to fulfill them. Since I’m not an expert with other frameworks, I can’t say that X isn’t possible with Y. If you need help with Ember, I’d be happy to help you (and don’t forget about @EmberSherpa). There are also other places to get help, like the EmberJS Slack Community. For more, check out the Ember.js Community page. Oh, and, of course, there is EmberConf 2016. I’m super excited to be going and would love to meet up with you there.

Posted in ember, javascript and tagged with ember, javascript

Damien White

I am a software architect with over 16 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I know in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails, Ember.js, and ASP.NET MVC.

comments powered by Disqus