SlideShare a Scribd company logo

Pros and Cons of developing a Thick Clientside App

•Download as PPTX, PDF•
•
Ravi Teja
Ravi Teja

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!

Related slideshows

Javascript & Jquery
Javascript & JqueryJavascript & Jquery
Javascript & Jquery
 
Single page applications
Single page applicationsSingle page applications
Single page applications
 
Rise of the responsive single page application
Rise of the responsive single page applicationRise of the responsive single page application
Rise of the responsive single page application
 
1 of 20
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
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 ? 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
How did we develop DelightCircle webapp ? UWSGI on AWS
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.
Pros and Cons of developing a Thick Clientside App
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
Questions? Next Steps: http://DelightCircle.com, Thank You 
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

More Related Content

Pros and Cons of developing a Thick Clientside App

  • 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
  • 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?
  • 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
  • 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
  • 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

Editor's Notes

  1. Implications and Philoshophy of Client-side rendering