Head First Into Full Stack Javascript

Two-way data binding, dependency injection, inversion of control, authentication strategies, ultra scalable, massive open source community, and much more. It never would have occurred to me that Javascript had all of those in a form that I would want to use. In fact, If you had mentioned that I would be doing this 10 years ago I would have assumed it had been at gunpoint.

I, like many developers that have been building things on the web since the mid 90s, developed a hatred for Javascript very early on but I have been warming up to it recently. Over the past year I have been working more and more with JS on the server, due to a couple apps I wrote utilizing Parse.com’s awesome BAAS solution. Since getting my beak wet I have been very excited to dive full on into the JS, hipster developer infused, world.

The stack I am using is often referred to as the MEAN (Mongo, Express, Angular, and Node) stack. Below is the part played by each:

ExpressJS – Web application framework that sits on top of NodeJS and turns it into a cutting edge web application server.

AngularJS – MVC in the browser with 2 way databinding. In my case I’m using it to create a single-page web application, meaning that all page changes and routing is essentially done by JS.

I had some experience with MongoDB heading into this but it was very elementary so it was essentially learning an entirely new platform, start to finish for me. I had a product that I wanted to build over my holiday break and I was determined to use this stack, no matter how difficult the transition. Here is what I found.

Week 1. Hopeless Confusion

I really didn’t think it would be this bad at first but it was tough. I knew JS at the start very well, in fact I wouldn’t argue that I am anymore familiar with it now then I initially was so that wasn’t the problem. Ironically it turns out that the major benefit of this stack, working in only one language, had screwed up my bearings.

I have spent lots of time building applications with C#, PHP, Java, etc backends where some amount of Javascript was receiving information on the client side. Subconsciously, I think, I was using the changing of the working language as an indicator that I was working on a client or a server and it was a tough trick getting past that. Without that crutch I found myself constantly looking at file paths for source code to understand what I was looking at which brought the rate at which I could code to a crawl.

To compound matters, with this stack there are ‘Controllers’ at two very separate parts of the application — of course in Javascript. In ExpressJS there are controllers for your REST services to handle your typical CRUD needs and any view controlling needed where Angular is not in play. In AngualrJS, the controllers exist for the application functionality like binding controls and control flow throughout the application. Essentially you end up with controllers written in JS on the server and client side. This was my main source of confusion.

At the end of the first week I had a good base understanding of what each layer in the stack was being used for and what belonged where. I have to admit that at this point I was already in awe of the capability the stack had.

Week 2.0 It’s the data

Early into the second week I saw the beauty in this programming stack. I _knew_ this but it really clicked for me all at once. Javascript (and data as JSON) was the language throughout. The data I am rendering on the client is the data I am validating on the server side. That same exact data is being stored in my database, in the exact same format. There is no serialization or marshaling of objects to speak of (unless of course you want to, or need to). The lack of translation on at least one, if not all, of the layers gives the application a true feeling of transparency throughout and right away avoids the bugs that come with constantly morphing data.

Week 2.5. Its the community

The sheer number of open source libraries out there for the NodeJS platform is mind boggling but with it’s popularity that did not surprise me. The real shock was how mature they seem.

For example, the application I am building is a tool for marketing on social networks, meaning that I would need to authenticate using OAuth2 with each of them. I would also need to allow users to authenticate against more than one network at a time. For this purpose, PassportJS is a godsend, just check out this list of almost 200 authentication services that are supported. For my project I needed to do things quite a bit differently than most applications would require but PassportJS did not get in the way at all.

As another example, I needed to process credit cards for people to sign up and pay me for this service. Using Stripe-Node was painless from start to finish as it fully supports Stripe’s amazing API.

Week 3. On a warpath.

At this point I’m just flying through testing, fixing the bugs I can find, and refining my deployment strategy. For some reason the application seems much less buggy than I remember web application development being.

For deployment I came across Stagecoach which is awesome for managing and deploying your own node applications. My node application is running on one of my Ubuntu servers which nginx standing in front handling some caching as well as things like SSL.

I admit that the application itself is fairly simple, but having said that, it is lightning fast from a user experience perspective. AngularJS makes switching between views seem instantaneous as there are almost no places where your browser loads a totally new page.

A part of the application is a simple URL shortener which queries the database to know where to redirect and then logs that someone has clicked as well as some metadata about the event. On the production environment, using apache benchmark I have been able to achieve a sustained throughput of over 200, uncached, requests per second with 100 concurrent users across 10k total requests on an overtaxed VM without any sort of tuning.

Initial Fears

No traditional debugging – Ok, I know this isn’t really true at all. Debugging is very good on Chrome and Firefox for the UI. For the Node/Express side of the house you can use a debugger, its just no where as convenient as I’m used to with IDE’s like XCode, Eclipse, and Visual Studio. In the end, console.log(xxx) is where I headed most of the time. It is limiting at first but you get used to it and incorporate it into your style of development. The fact that all data is in JSON which reads very well in output logs makes this less troubling than it would be in other languages.

Lack of ultra fancy IDE – This is really a very personal concern. I can get around fairly well using VIM but I have grown accustomed to the amazing capabilities packed into IDEs like Visual Studio, Eclipse, and XCode. I did all of my development for this project using Sublime Text 2 which is beautiful and extremely lean but does lack things like good code completion, debug support, and advanced refactoring.

Security – My background is in web application security and I have some fears in this regard. I have no doubt that you can write an application as secure using as stack like this as you could using a more traditional one like .NET or Java Spring, but I think that some of the initial confusions I had could get the best of someone not paying attention ( or not fully aware of what they are doing ).

Conclusion

Its probably obvious by now that I’m a convert. In the past, my go-to stack to get something up and running fast would have been MVC.NET but I don’t think I will be going back there for new projects. The amount of great libraries out there and ease of development for the MEAN stack is just too much of a driving force. With Node as young as it is and already being the force it is, I can’t imagine it going out of style any time soon. It’s going to keep getting better and better.

I am currently testing the application I’ve built and hope to be releasing it to the public in about a week or so. I’m very happy with how fast I’ve been able to put something together, especially starting at a total newbie level just 3, holiday packed, weeks ago.

I'm working on something I can't talk about now. Enter your email address to know about it before it goes live!

Share This Story, Choose Your Platform!

@JustinFurniss1 I love to build things. Recently I've been focusing on IOS apps and modern web application stacks. I'm in the greater Philadelphia area and owner of AppMagma. We are always looking for new projects so just drop us a line!

I have an Idea for an App! What next?

“Is that cute enough?” – Me

New Baby and SocialPar Launch

Trying out Windows Azure Cloud Services

This was an interesting read. I have not used the MEAN stack before, but now I really want to.

Justin Furniss

Thanks! It was a fun escape from the mobile app world and to try something new.

http://www.dataloop.io Steven Acreman

If you haven’t already then you should take a look at Webstorm as an IDE.

Justin Furniss

Wow. I just watched a video on it. Not sure how I missed it but I’m definitely trying it tomorrow. Thanks!

cyberdyme

MEAN stack is great => but think Meteor.js takes it a few steps further

Justin Furniss

No doubt. Meteor is just plain amazing but I was worried about it not being mature enough and not finding the support I needed when going off the beaten trail. Have you used it for anything in production?

http://linnovate.net Lior

For all the “mean stackers” out there.
We’re trying to form a little community around #mean.io at freenode and on facebook at https://www.facebook.com/groups/mean.io/
Feel free to join and help us address the issues raises and help minimize the learning curve.