Visualizing a modern web development stack with a diagram

A big thing happened in web development in the last 2 years – the advent of full featured client-side MVC frameworks. Together with Node.js this gave birth to what we now call Full Stack Javascript development which is what this blog is devoted it to. I’ve spoken to a number of people about the advantages of this stack, but the usual response I get is a general confusion about the increased complexity of the client and complaints about the learning curve. I tend to think this confusion stems from the fact that most web devs of the past 20 years are used to greater complexity on the server and get lost after the data is turned over to the browser. Because of this,  I believe the most important thing for a web developer to learn today is a robust client-side MVC framework.  If there is one thing we’ve learned in the last several years, it is that user experience is king, users will simply not use apps which behave poorly, and the bulk of what makes the difference is on the client – to perform well and provide a rich experience, the client can no longer be requesting whole pages from the server and wait for the response to render them. This is why the latest evolution of web development looks like this:

A modern web development stack from the book "Ember.js In Action"

A modern web development stack from the book “Ember.js In Action”

 

You will notice that the client diagram on the left is more complex than the server diagram on the right. The main points are:

  • The Client and Server talk in HTTP via a REST pattern.
  • Gone is the view layer from the server, server views are used very little and client MVC’s like Ember, Angular or Backbone take raw data, usually JSON, from the server’s controller and render HTML on their own in the browser.
  • The client now comes equipped with its own model/view/controller layers, and besides that in Ember’s case it also has an in-browser data store. This allows a much more dynamic and rich experience for the user and a big boost in performance, because a lot of computing is distributed to the user’s machine, instead of the central server doing all the heavy lifting for everyone.
  • It is not shown on the diagram, but the reality is even more complex, the client’s view layer has 2 pieces to it –  abstracted Javascript logic to handle dynamic bits and a template  which includes HTML and some templating logic and syntax provided by a Javascript templating library like Handlebars or other. This Javascript code and data in memory is bound real-time to the HTML  and every time there is a change to the data, the HTML is instantly redrawn to reflect the new state. In the old paradigm, this required going back to the server and requesting an  entire new page that reflects the new state.

On the highest level, this is pretty much it. You can use a variety of different tools to put  stack like this together, there are many languages, frameworks, modules you can use. I have explored them for a while and settled on  a Full Javascript Stack with Node.js as a server and Ember.js as a client-side MVC. If you would like to try this out,  last week I released my Full Stack Javascript Nodember boilerplate  and it is available open source.

4 thoughts on “Visualizing a modern web development stack with a diagram

  1. Permalink  ⋅ Reply

    bas

    May 8, 2014 at 9:10am

    How about 3way databinding instead of 2? Websockets could update your models (and view indirectly)

  2. Permalink  ⋅ Reply

    Liran Tal

    May 10, 2014 at 11:23am

    Hey Martin,

    Good drawing there on updating the current technology stack for the legacy MVC triangle concept, although while I understand the separation between ‘in browser’ and ‘server’ rectangles you have, requests from the user (and at least the first one) goes to the server side which provides the view. From there on, for the Single Page Applications (SPA) frameworks routing will indeed be controlled in the browser, although for many other type of applications round trips to render views to the server (as an entire page refresh) are still valid.

    Good article, nonetheless.

  3. Permalink  ⋅ Reply

    Armando

    May 23, 2014 at 1:44am

    Hello. I ‘m a newbie and would like to use this nodember as a starting point for my apps.
    I followed the instructions to install nodember but when I open localhost:3000

    I get the error at the bottom.
    Could you please give me a suggestion as to how to go about solving this?

    Thanks in advanced for any help,
    Armando

    7
    Uncaught SyntaxError: Unexpected token < localhost/:1
    Uncaught ReferenceError: Ember is not defined compiled-templates.js:1
    Uncaught ReferenceError: Ember is not defined combined-scripts.js:3
    3
    Uncaught SyntaxError: Unexpected token < localhost/:1
    Uncaught ReferenceError: jQuery is not defined jquery.colorbox-min.js:7
    Uncaught ReferenceError: jQuery is not defined

  4. Permalink  ⋅ Reply

    Eduardo M

    July 25, 2014 at 2:41am

    Thanks a lot for this post, It helped a lot while integrating ember on the blogging platform I’m trying to put togetherhere. I’m struggling a bit with the authentication right now but is going well.

    Any comments are appreciated 😉

Leave a Reply

Your email will not be published. Name and Email fields are required.