Pros and Cons of developing a Thick Clientside App
•Download as PPTX, PDF•
0 likes•6,026 views
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!
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Pros and Cons of developing a Thick Clientside App
Similar to Pros and Cons of developing a Thick Clientside App (20)
Recently uploaded
Recently uploaded (20)
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?
- 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
Editor's Notes
- Implications and Philoshophy of Client-side rendering