El presente y futuro deldesarrollo web y APIs RESTFlisol, ITToluca, Abril 2013
Web developmentPHPRubyPython.NETJava
Typical webdevelopment approachServer side frameworkThe framework handles all the incoming http request andprocess themExt...
ProsVery simple to developAll the app code in a single placeUnique development modelWell know patternsTons of libraries an...
ConsThe server needs to handle several thingsdatabase connectionFailure and recoveryUser sessionrender all the time the re...
Modern featuresMobile supportAsynchronous processing (server side & client side)Content negotiation (JSON, XML, html, SOAP...
Is your framework friendly?
Beware‘Full stack frameworks’Do you really need a ‘full stack’ framework?Are you using all the features provided by the fu...
Real life webapp, web traffic
Real life web system• API:WebServices REST for informationexchange• Admin.Web application for internal use• WebSite.A tota...
WebApps architectureBuilt your complete solution using several logicalcomponentsEach component has a single responsability...
Apps• API• Typical Grails application, with no GSPs.• Speaks only JSON• Used by partners (remote services) andHipStore• Ad...
Developmentenhancements• Increased test cases in both Grails apps• Spock• Jasmine for JavaScript code• Introduced Jenkins•...
HipStore• Static HTML application built with Chaplin• Chaplin is an architecture for JavaScriptapplications using the Back...
HipStore• Developed in CoffeeScript• Uses PushState• RequireJS (AMD Support)• HandleBars (Template Engine)• JQuery• Unders...
HipStore• Single Page Application• Chaplin consumes JSON from the API torender the store items.• Uses PushState to update ...
Our approach• Write to disk all the possible links inHipStore. Crazy?• We use ZombieJS to navigate the websiteand then wri...
Why do this?• When the user visit our website, thewebserver will respond with completelystatic HTML, CSS, JavaScript files•...
ZombieJS
HTML harvesting• The Node app receives the JSON message• Navigates to HipStore with ZombieJS• Executes the JavaScript (Cha...
Things to consider• When an item in the Store is modified, we need toregenerate the appropriate HTML file only once.• Then a...
Results• The load in our Web Servers was reduce alot.• The load in the database reduced a lot.• The users can share the li...
Photo creditshttp://flic.kr/p/7gerV8http://flic.kr/p/5yZGvb
ITT Flisol 2013
Upcoming SlideShare
Loading in...5
×

ITT Flisol 2013

294

Published on

Presentación dada en el Flisol 2013 en el ITT en Mayo de 2013

Published in: Technology, Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

ITT Flisol 2013

  1. 1. El presente y futuro deldesarrollo web y APIs RESTFlisol, ITToluca, Abril 2013
  2. 2. Web developmentPHPRubyPython.NETJava
  3. 3. Typical webdevelopment approachServer side frameworkThe framework handles all the incoming http request andprocess themExtract data from request and generates response to the userThe framework generates data representation mostly inhtmlWe can use the framework to generate only data (JSON,XML)
  4. 4. ProsVery simple to developAll the app code in a single placeUnique development modelWell know patternsTons of libraries and framewoks out there
  5. 5. ConsThe server needs to handle several thingsdatabase connectionFailure and recoveryUser sessionrender all the time the response to the usersframeworks limitations (user interface, scaling,adopting new technologies, support lacking)
  6. 6. Modern featuresMobile supportAsynchronous processing (server side & client side)Content negotiation (JSON, XML, html, SOAP?)View technologies independence (JavaScript, Template engines)NoSql support (MongoDB, Redis, Cassandra, etc)DevelopmentFull stackSpecific stackCloud deployment
  7. 7. Is your framework friendly?
  8. 8. Beware‘Full stack frameworks’Do you really need a ‘full stack’ framework?Are you using all the features provided by the fullstack framework?Sometimes we don’t need a full stack frameworkex. Simple app or service (REST)
  9. 9. Real life webapp, web traffic
  10. 10. Real life web system• API:WebServices REST for informationexchange• Admin.Web application for internal use• WebSite.A totally static HTML application builtwith Chaplin and several JavaScriptmicroframewoks
  11. 11. WebApps architectureBuilt your complete solution using several logicalcomponentsEach component has a single responsabilityBuilt each component with the right tech stack
  12. 12. Apps• API• Typical Grails application, with no GSPs.• Speaks only JSON• Used by partners (remote services) andHipStore• Admin• Typical Grails application
  13. 13. Developmentenhancements• Increased test cases in both Grails apps• Spock• Jasmine for JavaScript code• Introduced Jenkins• Jenkins Jobs to deploy automatically to QA &Production environments• Bash shell scripts
  14. 14. HipStore• Static HTML application built with Chaplin• Chaplin is an architecture for JavaScriptapplications using the Backbone.js library
  15. 15. HipStore• Developed in CoffeeScript• Uses PushState• RequireJS (AMD Support)• HandleBars (Template Engine)• JQuery• Underscore• Twitter Bootstrap• Build and packaged with Jake
  16. 16. HipStore• Single Page Application• Chaplin consumes JSON from the API torender the store items.• Uses PushState to update the URL in thebrowser.Very useful for bookmarking andsocial media sharing, even for SEO.
  17. 17. Our approach• Write to disk all the possible links inHipStore. Crazy?• We use ZombieJS to navigate the websiteand then write to disk the generated HTML• Put those static files (HTML) in thewebserver document root• The best cache ever
  18. 18. Why do this?• When the user visit our website, thewebserver will respond with completelystatic HTML, CSS, JavaScript files• Very fast• The user never hits the Tomcats, we reducethe load in the app servers.• The webserver always responds very fast
  19. 19. ZombieJS
  20. 20. HTML harvesting• The Node app receives the JSON message• Navigates to HipStore with ZombieJS• Executes the JavaScript (Chaplin app)• Extracts the generated HTML with jQuery• Saves to disk in the web server documentroot
  21. 21. Things to consider• When an item in the Store is modified, we need toregenerate the appropriate HTML file only once.• Then all the users will receive the same file• The user only hits the Tomcat when really need it(CheckOut, Registration)• When the user click in some action in the app, theinteraction is handled by Chaplin controller if thebrowser supports JavaScript• Remember in our website the content is almost static?
  22. 22. Results• The load in our Web Servers was reduce alot.• The load in the database reduced a lot.• The users can share the links.• Store becomes very search engine friendly
  23. 23. Photo creditshttp://flic.kr/p/7gerV8http://flic.kr/p/5yZGvb
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×