The document discusses the pros and cons of developing thick client-side applications, emphasizing the benefits of a decoupled architecture and improved user experience, while also noting challenges such as complexity and performance issues. It highlights the importance of client-side templating, the hybrid model for rendering, and technical components used in developing the DelightCircle web app. Additionally, it touches on communication strategies between the web app and its API.

1. Pros and Cons of developing a
Thick Client-side App
Raviteja Dodda
Co-Founder, Pipal Tech Ventures/DelightCircle
raviteja@pipaltechventures.com
Twitter, Facebook - @raviteja2007
www.DelightCircle.com
Sep 15th 2012

2. What is
Clientside
Templating ?

3. 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.

4. What are the
downsides of
Serverside
Rendering?

5. Coupling

6. 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

7. Leading to
• Dumb Clients
• Lag
• Unoptimal UX
• Ugly Clientside Code

8. Pros of a
Thick Client

9. Good Architecture
Decoupled Design
API’s

10. API based Multiplatform approach
API
Mobile App Web Mobile Web ????

11. Leading to
• Better Structure
• Separation of Responsibilities
• Modular caching
• More static assets
• Simplicity and Power

12. Template Engine benefits
• Readable
• Maintainable
• Usable

13. Cons of a Thick Client ?
• Complexity
• Performance varies with device
• A build process is generally required
• More state management
• Indexing pages to Search Engines.

14. What’s the sweet spot then ?
Mostly Serverside
Serverside Only render layout
rendering + JSON via
rendering with client, everything
AJAX with Clientside
+ AJAX HTML else rendered with JS
templates
100% Serverside Hybrid model 100% Clientside
Twitter, Facebook, Google all render HTML server side for initial
page load.
Reduces the number of requests
Shares rendering load between clientside/serverside

15. How did we develop DelightCircle webapp ?
UWSGI on AWS

16. Components
• API Platform approach – our webapp is just another client.
• Backbone.js – Clientside MVC – Proven
LinkedIn
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.

18. Crossing Domains
• How to communicate between delightcircle.com and
api.delightcircle.com
• An iframe from api.delightcircle.com is embedded in
delightcircle.comwebpages.
• 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’sXMLHttpRequest object from delightcircle.com
pages

19. Questions?
Next Steps: http://DelightCircle.com,
Thank You 

20. Download for your Mobile
DelightCircle is available on
Android, Blackberry and iPhone
Search for ‘DelightCircle’ in App Stores
Other Phones ? SMS ‘@delight’ to
92431-92431
Visit http://DelightCircle.com
Scan QR code