Next-generation Web apps with full stack JavaScript
Power scalable Web apps with 100% JavaScript.
Stacked stones (source: Julian Povey via Flickr)
Since its introduction, JavaScript was often seen as a limited object-oriented language that had many “bad” parts. The situation today is almost the opposite.
In competition with Java, C#, and Ruby, JavaScript is developing one of the largest ecosystems for web applications today. Why, as it seems, is a language made for web browsers gaining traction for building next-generation web applications on the server-side too?
Learn faster. Dig deeper. See farther.
In fact, you can see another example of disruptive innovation at work. As Clayton Christensen explained in his innovation theory, affordability and access are important drivers behind technology shifts. While the LAMP stack and its peers with Ruby, Python, Java, and C# provide the foundations for many server-side web applications today, JavaScript ships natively with web browsers, which enables a much larger part of the digital population to experiment with web development. In addition to lower costs of infrastructure and easier installation, companies get access to a larger pool of web developers.
Full stack JavaScript applications
The dawn of full stack JavaScript web applications came with Google’s release of the JavaScript engine V8 in 2008 and the birth of Node.JS in 2009. If you don’t know the difference, V8 is a JavaScript to machine-code compiler for the world’s most important computing platforms, from servers to tablets and smartphones. Based on V8, Node.JS is a JavaScript interpreter that is highly performant for many different operating systems.
Together, V8 and Node.js are raising a new generation of programmers, full stack JavaScript application developers. For the first time in web development, the same JavaScript code can run in both environments, the web browser and the server.
How long will it take until full stack JavaScript web applications become mainstream? The answer might depend on the size of the application. A number of e-commerce companies such as Groupon, Walmart and PayPal are deploying full stack JavaScript applications today.
Besides big companies, many smaller agencies and startups are adapting the foundations for full stack JavaScript web applications, starting with tooling and advanced web interfaces.
Let’s look closer at current developments of JavaScript in these realms.
Better web interfaces
Many business requirements tell developers to increase the level of interaction with users. HTML with jQuery is a good place to start, but problems quickly arise when the amount of JavaScript increases.
Unlike other programming languages, much of JavaScript must be packaged and transported over HTTP to run in remote browsers. Also, managing larger JavaScript projects has been difficult in the past because good ways to re-use JavaScript dependencies were missing.
Today, with JavaScript modules and new kinds of build tools, structuring JavaScript applications has become much easier. Also, automatic pre-processing of front-end source files for formatting and code validation purposes ensures that developers use the “good” parts of JavaScript. A nice side-effect is the performance of Node-based web tooling. In contrast to front-end build tools based on other programming languages, tools built with Node run extremely fast.
It is not only tooling, where JavaScript front-end communities are heavily experimenting. A core idea of human-computer interaction is the MVC pattern, and over the last years, a number of different ideas on the MVC pattern for web browsers and JavaScript have been proposed.
On the extreme ends, there are JavaScript frameworks which provide a number of UI abstractions out of the box (think Angular or Ember). On the other end, there are low-level JavaScript libraries (think Backbone.js or Exoskeleton) which focus on basic browser constructs such as organizing events from DOM nodes.
Whether you go for frameworks or low-level JavaScript libraries, basic ideas on observing state and DOM nodes are essential to get started. For one, you must accept that asynchronous events from users play an important role in your application (unlike in many server-side web frameworks). Also, you must learn about representing state in the browser and how to fetch state changes with Ajax requests.
The way toward full stack
While the usage of JavaScript in the browser will continue to grow, going towards full stack JavaScript offers additional code re-use and application scalability.
For example, view templates could be re-used on the client and at the server, if both environments run on JavaScript. And, it would have advantages to combine logic for internalization or data validation in a full stack JavaScript setup. Airbnb’s Rendr project shows these ideas in action already today. But there is Groupon’s i-tier and Walmart’s FruitLoop project which might be interesting to watch in the next months.
Are you curious to experience some little full stack magic now? Try this small Underscore.js code example, in the browser console and on a Node console:
_.filter(['js', 'java', 'ruby', 'python'], function(language) { if (language === 'js') return true } )Hint: The Underscore.js library is loaded by default when you go to the project website. To run the code at a server, you must have a running version of Node and type “node”.