Short story about rendering HTML, client side vs server side

A long time ago i have stared working on http://lastlog.it website. It was to be just another site with funny images related to IT. Shortly after this lastlog.it site has become a training ground for my experiments.

Things that have not changed since the beggining are Nginx and Postgresql. I use them to all my private projects and i don't think that it will change quickly. I'm still using server at Linode and file server for storing images at Rackspace.

At the beggining it was written in Django with a lot of additional libraries. Zurb Foundation for CSS, jQuery and another JS libraries on client side. It worked without problems. I have changed several times how it worked but after some time i wanted something more. It was boring. I didn't have better idea to create another site so i have started refactoring of lastlog.it.

I heard that JS frameworks are very good. Like AngularJS. Before that i was using mostly jQuery or pure javascript and i wasn't a big fan of Javascript (in the work i have using Backbone and Knockoutjs and i don't like them). I read about it on the internet and asked friends for opinions. Shortly after this i started reading some AngularJS book and documentation. WOW! It is cool! I want this!

And it happened. I'm a fan of JS. I have added AngularJS to my site, i have written controllers, removed some jQuery libraries. It worked on several pages. While further study of AngularJS i said: create a Single Page App!

And it happened again, let's write part of site once again. I have started on registration and login page. I have written a base for AngularJS application. HTML was served directly from Nginx without rendering on server side. I stared changing backend. I wanted to change my Django application to get only JSON responses from all requests. And it was not easy and fun. After some time i've realized that i'm writing the same code that exist in Django but with JSON response instead of returning forms, html, etc. I did some research and i found that i can use additional extensions to Django for creating API. Then I asked myself: do i need all this code? The whole Django? Forms? Templates rendering? ADDITIONAL external applications to get LESS data from Django response?

And.. again. I started search something better to my needs. I don't want to write that Django is bad. It is very good framework. I have created a lot of smaller and bigger sites in Django. But in this case i wanted something different. I have choosed Pyramid. Next WOW! It is cool! I can choose what i want to use. I can write small application or add more libraries and write very big site! I have rewritten lastlog.it as API backend. I have written tests and next i stared working on client side.

During creting AngularJS application i heard about Yeoman. I have read about this and i wanted to try it. I have tried it several times. This is not something that i want to use. I'm still using it and i'm not always happy with it. I need to download about 200MB of javascripts to compile all my javascripts files into one file, minimize it, replace it and automatically add in html files. OK, it helps to manage client side code ommiting congiguration and a lot of problems. I'm still not sure if i should use this.

A lot of learning, a lot of problems. I had a lot of ideas like infinity scrolling with lazy loading and returning to the same position when user click back button. A lot of nerves.

After some.. long time.. i have finished most important things. I have deployed site. I have added some images. I have fixed a lot of the problems.

I have enjoyed this for some time. I have noticed that serach engines can't see my site correctly. Social networks like Facebook, Google+, Linkedin also had a problems with reading the content. I have spent some time on creating a solution for this. Finally i'm using https://prerender.io.

And it is. My site is working, quite good. I have API backend with Pyramid framework, client server application in AngularJS, responsive site with Zurb Foundation Framework, SPA!, realtime forms validation, i'm not using python forms, not using html rendering on server side, i have a Nginx, Postgresql, Redis for cache, Python RQ for tasks, Rackspace for images, nodejs + phantomjs just for rendering and returning static content (hm..) for search engines and social networks. It's just the main things.

Present time.

I have a lot of new ideas like social log in, search engine for images, ratings, favorites, etc. Recently in free time i'm trying to do a social log in in AngularJS application. It is not easy. I did not find solutions that i would like. Recently i asked myself: it is going in the correct side? A have a lot of code to maintain. A lot of not my code. A lot of server side applications. I need to know a lot of frameworks, python, javascript, a lot of additional extensions, keep up with changes. I need to test everything. All this for a single person who does it in his spare time. I can do most of this things on the server side, much faster. What is a benefit for me? What is a benefit for the user?

Then i have started writing this article to share my thoughts and do a small comparison between server side and client side rendering.

Today i'm thinking to do next big refactoring. Remove most of javascript frameworks, angularjs, jquery, if i need javascript, use pure javascript, remove nodejs server, render html on server side, replace big Zurb Foundation framework with smaller css.

Ok, let's do a comparison between both solutions.

SERVER SIDE:

  • User don't need to have enabled javascript in the browser. OK, we can tell that most of users have JS enabled, even, i don't care a lot about other users, without JS. Plus for server side rendering is that users without JS enabled can see my site. They can't upload images, rate them, add to favorites but they can use most of the site, main funcionality.
  • I don't need additional servers or some scripts to return static site for search engines and social networks. (see above)
  • I can do a lot of things faster because most of the time i need to focus on one technology, one programming language, etc. (basically i'm a python developer)
  • It is easier to maintain and error catching. I can catch on the server most of the problems
  • I don't need additional code/application for monitoring errors on client side.
  • I don't need Yeoman ;-)
  • Page load time. It is true that user (browser exactly) for most of the time needs to download only JSON data. Javascript scripts are downloaded once and cached on the user side. But user need to download first all this JS files and need to wait when all this files were downloaded to see the page. At the moment on lastlog.it i have about 650KB of minimalized JS files. Sometimes i need to create a several calls to API to render page with needed data. I feel that lastlog.it is faster just for showing base html (which is server directly by nginx) but when taking into account whole time loading.. i don't see the difference. Sites like Google Page Speed shows me that lastlog.it as SPA ison based on Django. If i will use only CSS that i need, pure javascript because i just need to do a POST/GET request and set css class depending on the response, i can use HTML5 file API (don't tell me that you are using some old browser or IE ;-)) and small pure JS to upload files. HTML has not a big size.

CLIENT SIDE:

  • Very responsive page. But i can do the same with small pure JS?
  • I'm PRO! I can use the newest and trendy software!
  • I need to write additional tests for JS code
  • Client needs better hardware to render page in short time? (I don't know whether this is a good reason)
  • I'm using AngularJS. When i wanted to add Google Analytics i have needed to write additional directive or add external plugin. The same for Adsense, AddThis, Disqus or event MomentJS. (and sometimes it happened that for example Adsense still does not rendering correctly)

At the moment i think that JS frameworks are very good the same as Single Page Application idea. Good example is of course Gmail. In this case SPA works very well. But what about sites like lastlog.it or even bigger sites when 90% of the site is changing after user action? Do i need waste my time to get the same effect? Seriously, i don't see any big difference between server side and client side rendering taking into account time loading. I can't see any big advantages of creating a site in SPA technology in this case.

If no one can stop me from changing decision then i'm starting next big refactoring ;-)

comments powered by Disqus
eshlox@googleplus