Monday, June 25, 2012

From backend to frontend - the mental transition

Recently I blogged about my thoughts on the idea that frontends are in fact separate applications.

Today, I'd like to describe the transition of my mental model in thinking about views and frontends.

I thought that it was only me who went that path, but this excellent Backbone introduction slide deck helped me realize that it's a common process for backend developers.

This process consists of the following steps:

1. No-JavaScript phase

No JavaScript at all, or using it through some kind of backend plugins (like the ones Rails gives - link_to_remote etc.)

2. JQuery explosion

This happens when you use straight JQuery, there is lots of JQuery plugins updating different views, replacing html and using some simple Ajax.

3. Page and Widget objects

It's basically the same as phase 2, but this time you wrap all the JS code into nice objects/classes, so that you start unit-testing them. You also start packaging them as "pages, "widgets" or "components". You're still rendering the html on the server side and the data is either in the html or in some pre-rendered JavaScript files. You're switching to CoffeeScript. This phase can be "fine" for many applications.

4. Single Page Application

Single page application is the phase in which you move all of the html generation from the server to the client. There are no full page reloads. Of course, there might be phases between 3 and 4, where some of your html is rendered here, some is rendered there. Luckily, you prefer consistent solutions, so you end up quickly in phase 4.
It's this phase where you think about the frontend as a separate application. All the data you get, come from API requests. You know the difference between MVC here and Model2 on the backend. You explore the different techniques for designing the domain - gui communication.

Any other phase?

In the Sarah's slides you will also find a next phase here - Frameworks. I'm not putting it here, as I think we choose frameworks too early. It's a topic for another blog post.

I'm in the 4th phase for quite a while now and I don't feel any need of a framework.

There's also an interesting area to explore, where you have several mini-application in your web app.

In my next blog posts I'm going to help you learn how to solve typical frontend problems without using a full framework.

Just to be clear, I'm fine with Backbone or AngularJS or others. It's just that I think, that those frameworks can be limiting to our projects very early on.

Which phase are you in?

 If you read this far you should Follow andrzejkrzywda on Twitter and subscribe to my RSS.


Łukasz Wojciechowski said...

Hello Andrzej

I like your recent posts about this topic.

I found myself being between 3 and 4 right now.
I'm before Bacbkone/AngularJS though the plan is to play with those asap.

For now all I needed is Mootools and I really love it. Did I understood you correctly - you are not using any JS framework ?

best regards

Andrzej Krzywda said...

Hey Łukasz,

"I like your recent posts about this topic."

Thank you! I'm still not sure if that's an interesting topic to my readers and this kind of feedback matters a lot to me.

"you are not using any JS framework ?"

That's right.

We do use some libraries for certain parts of our apps, but we don't use any framework that would shape the whole app.

It probably deserves another blog post, but in short, there's really no such need. You know MVC, you know how to implement Models, the Views and the Controllers. You know how to retrieve data from the server. There's not really much more to it.

Mike Kelly said...

The final phase is the one twitter has now reached where they realised SPA was bad use of the web and revert back to an approach that doesn't involve gratuitous use of JavaScript.

Andrzej Krzywda said...


My understanding of what they did in Twitter is that they simply pre-render the html on the first request (a nice optimization trick) and then it works as a typical Single Page App (no full reloads).

Anonymous said...

im somewhere between 3 and 4. html is rendered both on server side (on first load) and client side on data changes, using the same html template language and backbone.js.