In this article we are going to compare three popular MVC frameworks for the web: AngularJS vs. Backbone vs. Ember. Choosing the right framework for your project can have a huge impact on your ability to deliver on time, and your ability to maintain your code in the future. You probably want a solid, stable and proven framework to build upon, but don't want to be limited by your choice. The web is evolving fast — new technologies arise, and old methodologies quickly become irrelevant. Under this light, we are going to go through an in-depth comparison of the three frameworks.
Meet The Frameworks
All the frameworks we are going to meet today have a lot in common: they are open-sourced, released under the permissive MIT license, and try to solve the problem of creating Single Page Web Applications using the MV* design pattern. They all have the concept of views, events, data models and routing. We are going to start with some quick background and history, and then dive in to compare the three frameworks.
AngularJS was born in 2009 as a part of a larger commercial product, called GetAngular. Shortly after, Misko Hevery, one of the engineers who founded GetAngular, managed to recreate a web application that consisted of 17 thousand lines of code and took 6 months to develop in a mere 3 weeks using just GetAngular. Reducing the size of the application to just about 1,000 lines of code convinced Google to start sponsoring the project, turning it into the open-source AngularJS we know today. Amongst Angular's unique and innovative features are two-way data bindings, dependency injection, easy-to-test code and extending the HTML dialect by using directives.
Backbone.js is a lightweight MVC framework. Born in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC frameworks such as ExtJS. This resulted in many services adopting it, including Pinterest, Flixster, AirBNB and others.
Ember's roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Notable Ember users include Yahoo!, Groupon, and ZenDesk.
Native apps live on the device and are accessed through icons on the device home screen. Native apps are installed through an application store (such as Google Play or Apple’s App Store). They are developed specifically for one platform, and can take full advantage of all the device features — they can use the camera, the GPS, the accelerometer, the compass, the list of contacts, and so on. They can also incorporate gestures(either standard operating-system gestures or new, app-defined gestures). And native apps can use the device’s notification system and can work offline.
Mobile Web Apps
Web apps are not real applications; they are really websites that, in many ways, look and feel like native applications, but are not implemented as such. They are run by a browser and typically written in HTML5. Users first access them as they would access any web page: they navigate to a special URL and then have the option of “installing” them on their home screen by creating a bookmark to that page.
Web apps became really popular when HTML5 came around and people realized that they can obtain native-like functionality in the browser. Today, as more and more sites use HTML5, the distinction between web apps and regular web pages has become blurry.
In 2011 Financial Times withdrew its native app from Apple’s App Store to circumvent subscription fees and maintain closer connection with their subscribers. Instead, it came out with an iPhone web app (app.ft.com):
Its web app is, in many ways, hard to distinguish from a native app. For instance, there are no visible browser buttons or bars, although it runs in Safari (when accessed from an iPhone). Users can swipe horizontally to move on to new sections of the app. And, due to browser caching, it’s even possible to read the newspaper offline.
These are all features that are available in HTML5. Also available are the GPS, the tap-to-call feature, and, there is talk about a camera API, although I haven’t seen any web app (or web page) that takes advantage of it so far. There are, however, native features that remain inaccessible (at least from now) in the browser: the notifications, running in the background, accelerometer information (other than detecting landscape or portrait orientations), complex gestures.
Of course, one can argue that many apps (native or otherwise) do not take advantage of those extra features anyhow. But if you really need those native features, you’ll have to create a native app or, at least, a hybrid app.
Hybrid apps are part native apps, part web apps. (Because of that, many people incorrectly call them “web apps”). Like native apps, they live in an app store and can take advantage of the many device features available. Like web apps, they rely on HTML being rendered in a browser, with the caveat that the browser is embedded within the app.
Often, companies build hybrid apps as wrappers for an existing web page; in that way, they hope to get a presence in the app store, without spending significant effort for developing a different app. Hybrid apps are also popular because they allow crossplatform development and thus significantly reduce development costs: that is, the same HTML code components can be reused on different mobile operating systems. Tools such as PhoneGap and Sencha Touch allow people to design and code across platforms, using the power of HTML.
Walgreens provides two very similar hybrid apps— one for Android and the other for iPhone. Both apps have multiple sections and many native features such as access to notifications and a Refill by scan feature that uses the phone camera to refill prescriptions:
Last year, Google launched its new style language, Material Design. It uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user.
The goal of Material Design is to create clean, modernistic design that focus on UX. While Google’s design aesthetic has detractors, it’s been mostly praised as a game-changer.
With its minimalistic look, Material Design has a lot in common with another growing trend — flat design. Material Design, however, makes use of depth and shadow, which allows for more depth than pure flat design.
Material Design Lite doesn’t rely on any particular framework, so designers can use a wide variety of front-end tools to create their sites. It’s also lightweight when it comes to the code.
Responsive web design has become incredibly popular in recent years thanks to the rise of mobile internet usage.
It’s safe to say responsive design isn’t going anywhere soon, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. But responsive web design does come with some issues if not carried out properly, the most important being performance.
To ensure that a responsive performs at the peak of its ability, according to Guy’s Pod, designers should:
Use responsive images which are defined using a percentage.
Use RESS – Responsive and Server Side
Apply performance testing into the process in order to effectively measure and optimize each site.
Performance is important not only to UX, but also to Google in the wake of the Mobile Friendly update which released in April 2015. Responsive web design is also highly compatible with minimalism, thanks to the necessity to keep page weight down. It’s also great to work with cards and responsive design as they can easily restructure in order to fit any breakpoint or screen size (like rearranging rectangular containers of content).