Pros and Cons of developing aThick Client-side App               Raviteja DoddaCo-Founder, Pipal Tech Ventures/DelightCirc...
What is ClientsideTemplating ?
What is Clientside Templating?• Server sends client templates, along with‘application code’.• Application code initializes...
What are thedownsides of ServersideRendering?
Coupling
Server-side Load• Infrastructure• Caching• Dynamic-pages can be expensive.        A Post on Facebook + comment            ...
Leading to• Dumb Clients• Lag• Unoptimal UX• Ugly Clientside Code
Pros of aThick Client
Good ArchitectureDecoupled Design      API’s
API based Multiplatform approach                     APIMobile 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 ma...
What’s the sweet spot then ?                            Mostly Serverside     Serverside                                  ...
How did we develop DelightCircle webapp ?                  UWSGI on AWS
Components• API Platform approach – our webapp is just another client.• Backbone.js – Clientside MVC – Proven    LinkedInM...
Crossing Domains• How to communicate between delightcircle.com andapi.delightcircle.com• An iframe from api.delightcircle....
Questions?Next Steps: http://DelightCircle.com,        Thank You 
Download for your Mobile                 DelightCircle is available on                 Android, Blackberry and iPhone     ...
Pros and Cons of developing a Thick Clientside App
Upcoming SlideShare
Loading in …5
×

Pros and Cons of developing a Thick Clientside App

6,122 views

Published on

This is a presentation/talk given at BangaloreJS second meetup.

In this talk, I talked about why and when we should use rendering and templating on the client-side rather than onthe server-side to develop a web app. Then I demonstrated the DelightCircle web app, which is centered around Backbone.js using Mustache.js templating, and some unique hacks!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,122
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Implications and Philoshophy of Client-side rendering
  • Pros and Cons of developing a Thick Clientside App

    1. 1. Pros and Cons of developing aThick Client-side App Raviteja DoddaCo-Founder, Pipal Tech Ventures/DelightCircle raviteja@pipaltechventures.com Twitter, Facebook - @raviteja2007 www.DelightCircle.com Sep 15th 2012
    2. 2. What is ClientsideTemplating ?
    3. 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/responseshappen between client and the server in JSON.• Application code updates the view by applying datato the templates.
    4. 4. What are thedownsides of ServersideRendering?
    5. 5. Coupling
    6. 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. 7. Leading to• Dumb Clients• Lag• Unoptimal UX• Ugly Clientside Code
    8. 8. Pros of aThick Client
    9. 9. Good ArchitectureDecoupled Design API’s
    10. 10. API based Multiplatform approach APIMobile App Web Mobile Web ????
    11. 11. Leading to• Better Structure• Separation of Responsibilities• Modular caching• More static assets• Simplicity and Power
    12. 12. Template Engine benefits• Readable• Maintainable• Usable
    13. 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. 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 templates100% 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. 15. How did we develop DelightCircle webapp ? UWSGI on AWS
    16. 16. Components• API Platform approach – our webapp is just another client.• Backbone.js – Clientside MVC – Proven LinkedInMobile, Foursquare, Do.com, Groupon, Basecampmobile, etc.• Mustache.js – for clientside templating• JQuery – Of course for DOM manipulation, andICanHaz.js – which works well with both JQuery andmustache.
    17. 17. Crossing Domains• How to communicate between delightcircle.com andapi.delightcircle.com• An iframe from api.delightcircle.com is embedded indelightcircle.comwebpages.• Through the magic of same-origin policy, this techniqueenables inter-frame communication, while still allowing theiframe to make AJAX requests to its original domain,api.delightcircle.com• When we need to make api calls, we just need to useiframe’sXMLHttpRequest object from delightcircle.compages
    18. 18. Questions?Next Steps: http://DelightCircle.com, Thank You 
    19. 19. 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

    ×