Thick Client-side AppPros and Cons of developing a

Raviteja DoddaCo-Founder, Pipal Tech Ventures/DelightCircle

raviteja@pipaltechventures.comTwitter, Facebook - @raviteja2007

www.DelightCircle.com

Sep 15th 2012

What is

Clientside

Templating ?

What is Clientside Templating?

• Server sends client templates, along with ‘application code’.

• Application code initializes the view

• As user interacts with the view, requests/responses happen between client and the server in JSON.

• Application code updates the view by applying data to the templates.

What are the downsides of Serverside

Rendering?

Coupling

Server-side Load

• Infrastructure• Caching• Dynamic-pages can be expensive.

A Post on Facebook + comment

9.1 KB of Markup

• Transfer of Data + markup for every request

Not Efficient

Leading to

• Dumb Clients

• Lag

• Unoptimal UX

• Ugly Clientside Code

Pros of a

Thick Client

Good Architecture

Decoupled Design

API’s

API based Multiplatform approach

API

Mobile App Web Mobile Web ????

Leading to

• Better Structure

• Separation of Responsibilities

• Modular caching

• More static assets

• Simplicity and Power

Template Engine benefits

• Readable

• Maintainable

• Usable

Cons of a Thick Client ?

• Complexity

• Performance varies with device

• A build process is generally required

• More state management

• Indexing pages to Search Engines.

What’s the sweet spot then ?

100% Serverside 100% Clientside

Serverside rendering+ AJAX HTML

Mostly Serverside rendering + JSON viaAJAX with Clientsidetemplates

Only render layoutwith client, everythingelse rendered with JS

Hybrid model

Twitter, Facebook, Google all render HTML server side for initial page load.

Reduces the number of requests

Shares rendering load between clientside/serverside

How did we develop DelightCircle webapp ?

UWSGI on AWS

Components

• API Platform approach – our webapp is just another client.

• Backbone.js – Clientside MVC – ProvenLinkedIn Mobile, Foursquare, Do.com,

Groupon, Basecamp mobile, etc.

• Mustache.js – for clientside templating

• JQuery – Of course for DOM manipulation, and ICanHaz.js – which works well with both JQuery and mustache.

Crossing Domains• How to communicate between delightcircle.com and api.delightcircle.com

• An iframe from api.delightcircle.com is embedded in delightcircle.com webpages.

• Through the magic of same-origin policy, this technique enables inter-frame communication, while still allowing the iframe to make AJAX requests to its original domain, api.delightcircle.com

• When we need to make api calls, we just need to use iframe’s XMLHttpRequest object from delightcircle.com pages

Questions?

Next Steps: http://DelightCircle.com,

Thank You

Download for your Mobile

Scan QR code

DelightCircle is available on Android, Blackberry and iPhone

Search for ‘DelightCircle’ in App Stores

Visit http://DelightCircle.com

Other Phones ? SMS ‘@delight’ to 92431-92431