It’s OK to be MEAN – Full Stack JavaScript Development

By | December 21, 2014

I’ve been a big fan of JavaScript since I started working on richer web applications. Until recently my experience has mostly been on the front end. I had heard of Node.js and even attended a introduction to Node talk at a conference a few years ago. Recently though, I’ve started using Node.js for prototyping and early integration testing. In this post I’ll describe some of the tools and technologies I’ve found for making development with Node.js easier as well as provide a link to a demo application I’ve created as well as the source code on my GitHiub account.

The idea of a common language across the full stack of a web application is quite compelling for me. Also with NoSQL databases, now the data-interchange format JSON, can be consistent from the persistence layer to the user interface. This provides a very efficient and streamlined process for retrieving stored data and displaying it on the user interface resulting in fewer layers, no ORM, and less complexity.

Full stack JavaScript development is accomplished with the MEAN Stack. The MEAN stack is composed of the following technologies.

I won’t go into a deep explanation of each of these technologies since their web sites can do a better job than I can. But MongoDB is NoSQL database that stores data in JSON format. ExpressJS is an application framework that is used with Node.js to build web applications and RESTful services. AngularJS is a framework for building rich JavaScript user interfaces. And finally Node.js is an asynchronous event driven server that allows web server applications to be built using JavaScript.

Over the years that I have been developing software I’ve heard the promise of new languages or frameworks that will improve developer productivity. So far in my experience while working with the MEAN Stack, I’d say this is one of the few technologies that actually delivers on that promise. The only change I’d personally make to the MEAN Stack would be to replace MongoDB with Couchbase, but that’s just a personal preference.

A couple of other technologies that make developing with the MEAN Stack even more productive and enjoyable are Yeoman and Heroku.

Yeoman allows you to get started developing with the MEAN Stack as quickly as possible and with common best practices and development tools. Yeoman uses generators to build all the scaffolding needed for a new project. One of the more popular generators for the MEAN Stack is the AngularJS Full-Stack generator. With Yeoman and the generator installed, getting a scaffolding MEAN Stack application started is as simple as typing, yo angular-fullstack [app-name]. This will provide you with a working, minimal application with unit testing frameworks (Mocha – server side and Karma – client side), Grunt for build tasks, and Bower for dependency management.

Heroku is a cloud application platform for deploying web applications. Heroku allows you to deploy web application for free and as your resource needs increase, the pricing plan scales with your application needs. Heroku makes deploying a MEAN Stack application as painless and easy as possible. The AngularJS Full Stack generator for Yeoman also has automated tasks for building and deploying your application to Heroku which is very nice.

So my demo application in which I used all of these technologies is a basic weather application that provides current conditions and a 10 day forecast for San Francisco California. I have a developer’s account for the Weather Underground APIs which I used for getting the weather data. Unfortunately the free developer account only allows a limited number of requests per day. So I cached the weather data temporally and only refresh the data from Weather Underground APIs after a defined time interval. I am using TingoDB to persist the cached weather data. TingoDB is an embedded JavaScript and file based database that is upwards compatible with MongoDB at the API level. That means if I later want to add MongoDB, I only need some very minor code changes specific to the database initialization to use MongoDB instead.

The demo application can be seen in the link below. (please excuse the “waether” misspelling in the URI, oops)

Weather Application

The source code for the application is available on my GitHub account in the link below.

Weather Source Code on GitHub

Well, I hope that sharing this information will be helpful for someone who hasn’t taken the dive into the MEAN Stack yet.

Cheers,
Tim

Leave a Reply