Tag Archives: handlebars

SPA (Single Page Application) for amateur web developer

That amateur web developer is none other than “yours truely”.

Recently, I came across this article about a over-engineered blog. It is awesome and gave me insights into React and how client side view-controller frameworks ( like Angular, Ember, Backbone etc.,) works and how modern web developers offloading business logic to client side. The blog post not only inspired me to learn more about these frameworks, it introduced me to what people call SPA (Single Page Application).

After reading about SPA, I cannot control myself to change my personal website into a SPA application. Here I share my experience about the tools I used to develop the new website.

Node.js and Hapi

My previous choice was Node with Express but, this time, I thought I’m not doing anything in the server, its going to be only serving the bytes. So, I decided to use any REST serving framework instead of Generic framework. I came across Restify but decided to go with Hapi for its simplicity (it turned out that I made the right decision)

Request

I don’t use any database in my website and all the contents are fetched from wordpress, google drive and twitter web apis. The website relies heavily on request to connect to these web services and it is one awesome tool to have for a node application which heavily depend on third party web services.

Handlebars, Stylus and Jeet

These are damn good when it comes to view. Handlebars rocks but the built-in helpers are not that helpful, the if block helper not even allow to check for logical operations. I have to write my own helper to do that. Stylus provided the easiest way to design my UI components and Jeet provided the easiest way to create boxes.

Website_Blog

 google-code-prettify and jsOnlyLightBox (customized for dynamic picture loading)

Great thing about prettify is, you don’t need to specify the language, it automatically detects and format the pre and code tags. I used jsOnlyLightBox to show pictures in my Gallery. I have customized it for this website because the vennila jsOnlyLightBox requires all the images to be present before we call load(). I did some changes to make it work with dynamically created img tags and it looks simple and elegant.

Website_Gallery

Socket.IO and Twitter Streaming

Just like my previous website, I used socket.io to relay the tweets coming from twitter streams. Integrating twitter streaming with my website took some heavy hours, but the final result is worth for every second I spent.

Website_Tweets

Browserify and Gulp

I didn’t use any client side javascript frameworks (like Angular, React, Backbone etc.,) but plain javascript classes as node modules. Browserify helped to bundle all the client side modules with ease. Gulp is the one which rendered all the stylus and handlebars files.

What next?

I dont even know whether I did something good or bad. but, compare to previous codebase, the current one is much simplified(without loosing the functionalities) and clean. It was a great learning exprement. But, I bet, I’ll not going to keep this codebase till the next year. If I see another good inspirational article which introduces any latest technologies, then, I’ll jump-in straight. Afterall, no-one is going to care about my personal website except me. The sources are available here. If you want, just take it and tinker yourself.