Full Stack JavaScript: What is a Full Stack? And Why is it MEAN?

(Previous: Coding Dojo: Algorithm Platform)

stack-of-pancakes-ihop-cmsphoto-pancakes-20150227105122
Is this a full stack? Does it come with Java? Sorry, I know, puns are the worst… Especially breakfast puns.

For aspiring web developers, it’s not enough to be a JavaScript or Ruby or Java ninja–you have to know how your JavaScript or Ruby or Java interacts with the whole project you are working on.

That’s why developers talk about Full Stack Development. In very general terms, a Full Stack, like a stack of pancakes has three parts: the front, back, and middle (more professionally referred to as the Front End, Back End, and Web Framework).

The Front End deals with what users see–the actual webpage in front of you. This is usually created with HTML, CSS, and JavaScript (or fancier libraries/extensions built on these: Bootstrap, Flexbox, Sass, and jQuery, for example).

The Back End is the side of the project the user doesn’t see–developing, updating, manipulating and querying the database, creating routers, dealing with APIs, and more. Databases can be created and managed with SQL, NoSQL, MySQL, MongoDB, etc., and the rest is done with general-purpose programming languages like JavaScript, Ruby, Python, Java, C#, and PHP.

And in the middle, connecting the front end to the back end, and connecting each end to a lot of other things, is a lot of interesting stuff, managed with a combination of general-purpose programming languages and Web Frameworks: Rails (for Ruby), Django (for Python), Express.js (for JavaScript), ASP.NET (for C#), and Spring (for Java), to name a few. Web Frameworks simplify a lot of the repetitive and detail-oriented coding that has to happen in creating a web app from scratch, but can be daunting for beginners to understand, much less navigate.

Full Stack JavaScript is sometimes referred to as the MEAN stack because of the initials of the different components: MongoDB (for the database), Express.js (the web framework), Angular (front-end structural framework), and Node.js (runtime environment). (If you’re interested in some of the more technical details of full stack JavaScript, including non-MEAN options, check out this article for more.) One of the advantages of using the MEAN stack is that you can use JavaScript throughout the entire project–no switching back and forth between other general-purpose programming languages!

While each stack has some developers who swear by it and others who can’t stand it (just post an opinion on your social media outlet of choice and see for yourself!), there are enough similarities between the different stacks that once you understand one stack from front to back, it becomes easier to learn other stacks.

But jumping in and actually learning a full stack by creating a project can be overwhelming. There are a lot of moving pieces, and a lot of details to remember. And making a mistake in one part of the project can have unintended consequences throughout the rest of the project–it’s a lot harder to check for errors than when you’re working on a single page of code for an exercise or tutorial. Also, building a full stack project from start to finish is a much more significant time commitment than completing most tutorials.

So where do we start? And what resources, tutorials, and guided projects are already out there to help us?

In a future post, I’ll talk about my path through some of the MEAN stack resources I’ve found helpful so far (but without any pancake references, I promise!).

(Next: I Can Has Websiting Job? Learning to Talk Tech)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s