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.

Advertisements

Creating My Own Website with Zero Cost

First of all, I’m not at all a web developer and had very little interest to learn web technology. All started changing during my marrage time, I wanted to create a wedding invitation website just to invite my friends.

My invitation website got good response in office. my colleagues asked about how I managed to create it because I belongs to c/c++ croud and very few in my team have broad knowledge about web technologies to create a website.

I came to know about node.js when I was digging with spidermonkey and gjs. So, for me, node.js becomes obvious choice as I already know little bit about javascript through spidermonkey and gjs.

A little research about node.js exposed me to express.js(web application framework), jade.js(HTML Template engine), stylus.js(CSS Engine) and jeet.js(Grid system)

I then created my wedding invitation site. Initially, I thought I have to spend money to host my wedding invitation site, but I came to know more about Heroku from one of the talk in Ilugc. Soon, my research about PaaS environments introduced me to OpenShift from RedHat. Openshift provides free hosting and OpenShift itself is OpenSource.

So, All I have to do is, create free account in OpenShift, Install rhc gem in my laptop, push my website into openshift through git. Thats all. My wedding invitation site is accessable anywhere and I was able to impress my friends,colleagues and finally my wife.

My wedding invitation app gave me overview of how current web development works, so I decided to have my personal website which consists of blog posts and my photos gallery. Instead of using blog framework available for node.js, I decided to use my existing wordpress blog for blog posts and my existing google drive account for storing photos so that I don’t need to use any database for my personal website.

I wrote two node.js modules wordpressrest.js and googlerest.js to access contents in wordpress and google dynamically.

Finally, I was able to come up with somewhat viewable personal website https://mohan43uweb-silentcrooks.rhcloud.com.

If you are viewing this Article through mohan43u.wordpress.com, checkout my personal website at https://mohan43uweb-silentcrooks.rhcloud.com and suggest me better ways to improve it.