Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Json Angular Magento | Imagine 2013 Barcamp | Vinci Rufus

375 views

Published on

Published in: Technology
  • Be the first to comment

Json Angular Magento | Imagine 2013 Barcamp | Vinci Rufus

  1. 1. JSON Angular MagentoVinci Rufuswww.neevtech.com@areai51
  2. 2. Web Server’s WorkloadWebserver&DatabasePull upthe PageRead theXMLQuerytheDatabaseBuild thepage onthe flyRenderthe pageServeAssets &Media
  3. 3. Performance & Scaling Mantra• Reduce stress on the Web server & DB– Clones [Multiple App Servers & DB MasterSlaves]– Caching [Fullpage Caching / Memcache]– Varnish– Move the workload to the Client Side
  4. 4. Empower the Browser• Browsers are Powerful butunder utilized.• Offload mundane tasks tothe Client Side.• Go Back to the Server onlywhen needed.
  5. 5. De-Couple your App• Server spits out JSON• Presentation Layer Sits on the Client Side.• JavaScript parses the JSON data andpopulates the dynamic content blocks,images are pulled from S3 / Cloudfront.
  6. 6. In Magento’s Context• JSON output contains Product Catalog along withnecessary attributes.• Layered Navigation, Filters, Sorting, keyword Searchdone 100% Client side on JSON data.• Product Inventory check is an AJAX request to theserver.• Add to Cart, Checkout are direct requests to theserver.• For Recently Viewed Products, use Local Storage orIndexedDB.
  7. 7. Web AppBrowserScalable ArchitectureMagentoRESTWeb servicesRDSS3EC2Web App
  8. 8. WebAppBrowserInsanely Scalable ArchitectureServerRDSS3EC2JSONJSONMedia / ImagesFolderWeb App
  9. 9. Performance Metrics Webpagetest.org Pingdom.com YSlow
  10. 10. New Possibilities• Windows 8 and Mac OS• Native Tablet Apps• Touch Screen Kiosks
  11. 11. Thank Youhttp://jam.neevtech.com-Vinci Rufusvince@neevtech.com@areai51Just Another Magento

×