Using any programming framework to the fullest extent possible first requires an understanding of advanced software architecture concepts. While writing a little client-side JavaScript does not necessarily require as much consideration when designing a scalable software architecture, the evolution of tools like Node.js means that you could be facing large code bases that must be easy to maintain.
Modern JavaScript frameworks take advantage of programming principles that have long been part of other languages, including software architecture patterns like model-view-controller. The value of work with frameworks that come with a pattern like MVC baked in is that the framework will do much of the work of managing the interactions between different sections of your code. You can write just the code you need for your particular application, such as code controlling what data the application outputs while the framework handles connecting that component of your application to the component that accepts and translates input.
JavaScript offers a benefit to working with these sorts of architectural patterns: because Node.js allows you to run JavaScript on your server, as well as on the client side, you can maintain a pattern like model-view-controller across your entire application.
MVC: The Software Architecture Pattern You Need to Know
The model-view-controller pattern of designing software (also known as MVC) was one of the first architectural design-patterns based on the responsibilities of its component software constructs. Trygve Reenskaug introduced the concept of MVC while visiting Xerox Parc (the same research facility that pioneered everything from GUIs to laser printers) in the 1970s.
MVC was revolutionary then and is still a key concept when discussing how to create new software. When using an MVC pattern, you can lay out the solution to any problem you expect to solve with the software you intend to build. The three components included by name in the pattern are:
The model, which describes the behavior of the application regarding data, logic, and rules
The view, which includes any information that the application may output (from tabular data to representations)
And the controller, which accepts and translates input
Note that the model, which is the core component on which you will wind up focusing, is independent of any user interface you are planning to create eventually.
In addition to these three elements, the MVC model sets out the interactions you’ll see between the components.
The model will store any data that is displayed in the view and stores data that the controller instructs the model to retrieve
The view generates an output based on changes to the model
The controller updates the model’s state and can also update the view’s presentation of the model
When using the MVC pattern to design software, you need to consider both the components and the interactions.
JavaScript Puts the View in MVC
JavaScript frameworks primarily improve your ability to write code for your users’ browsers. These frameworks consist of client-side code that you may consider to be most closely tied to view components (including any information your application may output).
Ember, Angular, Backbone, and React all excel at controlling view components. Some of these frameworks, such as Ember and Backbone, can also handle some elements of the controller — they can send instructions back to the code on the server and update it.
Provided you are focusing primarily on the browser, these four frameworks are likely to be your best options.
Ember.js: This web application framework offers a straightforward feature set that will work for most projects. It may be the most friendly for a programmer coming from another language, such as Python or Ruby, especially for a developer used to using the MVC pattern. However, what may be the biggest deciding factor, Ember.js provides high application performance.
AngularJS: The community working around AngularJS is incredibly active, making it a good option just by virtue of the tutorials, plugins, and other community-generated tools now available. That community is augmented by Google’s backing, helping AngularJS be a real contender among JavaScript frameworks.
Backbone.js: One of the main advantages offered by this framework is its relatively small size though it gains that size at the expense of individual features. However, even with adding additional tools to the mix, Backbone.js tends to offer some of the best page load times. The result is a lean, minimalist framework that’s easy to learn.
React: Facebook open-sourced one of their JavaScript libraries as the basis for React and have continued to add to it. The result is a high-performance library. It is a little less full-featured than the frameworks above, but as the React website describes, “lots of people use React as the V in MVC.” The community around React is growing, due to the upcoming release of AngularJS 2.0, which will not be backwards compatible.
For the most part, other JavaScript frameworks are not even in the same class as these four — many just aren’t well-maintained enough to rely on. Deciding between these four can be tough, given that they do offer many similar features. However, considering the communities and resources around each framework may help you come to a conclusion without having to rewrite your web applications four times over.
Node.js Tackles Model and Controller
While Node.js cannot be compared to most JavaScript front end or browser frameworks, it is excluded only because Node.js is really in a league of its own — Node.js is a cross-platform runtime environment, instead of a framework and is meant for use on the server. Node.js represents a bit of a revolution: where once you might only see JavaScript in client-side code (like with any of the JavaScript frameworks above), you can now use JavaScript across both your server and client code bases. You can create a web application entirely in JavaScript, where you previously would have needed both JavaScript and another language, such as Python or Ruby. Since its creation in 2009 by Ryan Dahl and other developers then working at Joyent, Node.js has seen adoption by companies ranging from IBM to Groupon. Both enterprise-level organizations and startups love the flexibility of using JavaScript to build scalable, web-based applications.
With Node.js, a programmer can use JavaScript across all three components of the MVC. Your model may run on your server, and your view may run in the browser, but they can both be written in JavaScript. Just that level of simplification may have guaranteed the rise of Node.js
Node.js’s rapid adoption rate created a boom in related tools. The number of Node.js frameworks you might consider working with seems to grow longer every day. The right frameworks can dramatically improve the process of building a new web application, especially if you are sticking with a well-established design pattern like MVC. These five Node.js frameworks are among the best currently available:
Express: This framework is one of the most popular available in the Node.js ecosystem. Express is both minimal and flexible, but can handle surprisingly large projects. The framework’s creators worked hard to provide fundamental web application features without changing underlying Node.js features.
Hapi.js: As a framework, Hapi.js is fully-featured, especially when you take into account the many plug-ins that Hapi fans have created. This framework’s creators focused on reliability and stability.
Sails.js: Meant for enterprise-grade apps, Sails.js scales well. One of the biggest benefits of using this framework is its powerful data access layer, which lets you get a lot more out of any database you choose to work with.
Mojito: As one of Yahoo’s Cocktails (as the company calls its mobile application development platform based on open web standards), Mojito has more resources than many other frameworks. It is a robust option for mobile applications.
Koa: Created by the same team as Express, Koa is perhaps the next step in where Node.js can go. The framework uses generators to improve error handling, as well as ditches middleware, to create a fast and scalable experience.
Finding exactly the perfect Node.js framework for a project may require a little experimentation, but these frameworks are all maintained with a certain level of documentation, making it possible to dive in and quickly try out your different options.
The Continuing Evolution of MVC and Isomorphic JavaScript
While the concept of MVC first evolved for desktop applications, the pattern has been adapted as a key approach for web-based applications. Even today, many common MVC frameworks, such as Ruby on Rails, put most of the burden of the model, view, and controller logic on the server. However, modern web applications have evolved to take advantage of maturing client technologies, allowing new frameworks to handle more of the MVC logic on the client. The result is isomorphic JavaScript, an approach that enables you to use MVC patterns across both the client and the server.
Simply put, isomorphic JavaScript is rendered on both the server and the client: the back end and the front end of an application run the same code. When a visitor reaches a web-based application using isomorphic JavaScript, the following occurs:
HTML is rendered from JavaScript application on the server
The browser loads with full HTML
JavaScript loads, and then bootstraps, the application
Isomorphic JavaScript opens up some unusual opportunities though you should remember that not everything will render particularly well from the server. Are you dealing with a great deal of data while generating HTML for your application? You’ll want to stick with sending a limited initial query to the server and then fetch everything else with an AJAX call.
With that caveat, though, isomorphic JavaScript offers valuable improvements:
Perceived faster load times (due to the time many popular JavaScript frameworks require to render into the DOM)
Improved visibility of your application data for search engine indexing
Normalized functionality of your web application even for users who have JavaScript turned off
Dramatically reduced code maintenance (given that you can use the same code base for both client and server, you have less code to maintain)
Not all Node.js frameworks rely on MVC as a design pattern, nor is doing so necessary to implement isomorphic JavaScript. However, using a familiar design pattern makes for an easier entry into these concepts.