Client Side MVC — A Return To Simpler Times?

The jump from working with a single index.html

an image of a folder structure system with not too many things in it
Simple as.

to the Model View Controller (MVC) file structure may be a daunting barrier for the novice web developer.

a moving GIF image of a cursor opening various subfolders that reveal multiple files inside of it
At least it’s nice and organized.

The GIF above is showing the server side MVC framework that has three parts: the Model which manages data. The View which receives the data to work with and put it up on the page. And the Controller which communicates with the Model and View to coordinate certain user inputs to their associated CRUD operations.

Is there a way to do some of that work faster and with less files and less folders?

AngularJS is an example of client side MVC, an open source web application framework that aims to empower our View’s HTML with the abilities of the Model and Controller.

On its official documentation:

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Misko Hevery, one of the original developers, boasts in his first blog post introducing it that with AngularJS and basic knowledge of HTML and CSS, and a little bit of JavaScript, you can build web-applications in minutes.

You would not need to know “Databases or SQL, Back end technology such as Java, Ruby, C# or the likes. For most things, you don’t even need to be a programmer.”

So, what does MVC for AngularJS look like?

The Model is still the data that comes from RESTful route calls. The View’s HTML has directives that instruct how to manipulate the DOM. The Controller does many things:

  • Provides callbacks to the HTML directives to respond to events that might then need to make server calls
  • Validation can be immediate for the user, using some information to deliver content without waiting for a server call
  • Same for handling the user interface to give immediate feedback to a user and not necessarily wait for a server

Here is a quick guide to AngularJS to get started.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store