Making the Jump from Coding Tutorials to MVC
I can remember how accomplished I felt when I first started learning to program and I completed the codecademy tracks for JavaScript and Ruby. I was excited to think about all the things that I would soon be building. There was just one problem. I still had no idea how to actually build anything.
Don't get me wrong, the tutorials were fantastic. But I still felt like it was a huge leap to go from being able to string together some functions to actually being able to put together an application. How would you even go about doing that? How would I organize the code? Enter MVC.
What is MVC?
MVC stands for Model, View, Controller. While that might seem like a lot to take in, MVC is simply a structure for organizing your code. And frameworks like Rails, Angular, and Backbone, are vehicles that make use of that structure to help you write your applications. Before we get into why this structure would be useful in creating a web app, let's define the terms of MVC:
Model: in a way, this is the heart of the application. The model manages the interactions and data for the application. Accordingly, this is where you would put all of your "business logic." So, any of those crazy functions you learned to write that can change the state of the application or the database will be put here.
View: this is what will actually display an output to the user. You might have some logic in a view, but generally views are mostly comprised of HTML. Any information that comes from the model will be displayed in the view.
Controller: this is the thing that receives input from the user. Actions like submitting information on a form, creating a comment, deleting an account are handled by controllers. The controller captures this information and passes along the information to the model.
Out of these three components, only the model technically has no knowledge of the others. It simply receives data from the controller, does something to it, and then serves it up to the view to render. Together, these three elements work to form a functioning app.
Here is a diagram to help show how this works:

What should be noted is that in any application, there is not only one of each element. You can have multiple views, multiple models, and multiple controllers all interacting with different components. Sounds like a lot right?
Is it really necessary to learn MVC in order to make a website?
The short answer is no, you don't need to know MVC in order to put something out there on the web. To get something basic up, you can just sling together an HTML file, a CSS file, a JS file, and call it a day.
However, if you want to build something maintainable, something that can actually scale, then using MVC is a great way to do that. The main reason this is beneficial is because this pattern allows us to separate our concerns. Think about it. If I want to work on the design of the site, I would really only want to deal with the HTML files and the CSS files. I wouldn't want (or need) to deal with all of the code dealing with user inputs or databases. And vice versa.
Using MVC allows me to separate out each component. Without this separation, it would be incredibly frustrating every time I needed to change or add a feature. In fact, if all I had was one tangled web of code to go through, I might even have to delete everything and start from scratch in order to add the new feature. Or, I might break something with the new implementation, and then have to sift through this mountain of code to figure out what went wrong.
Keeping everything separated would allow me to maintain the parts that work well, and it would provide me with an organized map of how everything is interacting. That way, if other people need to work on this app down the line, they have something that is organized, readable, and logical.
Tips for getting started with apps
My advice for getting started would be to try out a framework that provides a lot of functionality out the box like Rails, Meteor, or Angular. While I don't think you can easily gain a deep understanding of everything that's going on from using one of these types of high functioning frameworks, I do think they work well for getting something up quickly. And they will inevitably help to provide a better understanding of MVC.
If you're looking for a more conventional MVC framework and you know Ruby, I would suggest trying out Rails. Otherwise, I would personally recommend buying the Discover Meteor ebook and working through their tutorial to build a reddit clone. The book is very well written and you can have something built within a day.
If you've across any great resources for learning MVC, feel free to let me know in the comments.
Rapper turned Soldier turned Software Engineer
