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.

Angular JS and Magento

From my talk at Imagine 2013 Barcamp about builing a lightning fast ap with JSON, AngularJS and Magento

  • Login to see the comments

Angular JS and Magento

  1. 1. JSON Angular Magento Vinci Rufus @areai51
  2. 2. Web Server’s Workload Pull up the Page Serve Read theAssets & XML Media Web server & Database Query Render thethe page Database Build the page on the fly
  3. 3. Performance & Scaling Mantra • Reduce stress on the Web server & DB – Clones [Multiple App Servers & DB Master Slaves] – Caching [Fullpage Caching / Memcache] – Varnish – Move the workload to the Client Side
  4. 4. Empower the Browser• Browsers are Powerful but under utilized.• Offload mundane tasks to the Client Side.• Go Back to the Server only when needed.
  5. 5. De-Couple your App• Server spits out JSON• Presentation Layer Sits on the Client Side.• JavaScript parses the JSON data and populates the dynamic content blocks, images are pulled from S3 / Cloudfront.
  6. 6. In Magento’s Context• JSON output contains Product Catalog along with necessary attributes.• Layered Navigation, Filters, Sorting, keyword Search done 100% Client side on JSON data.• Product Inventory check is an AJAX request to the server.• Add to Cart, Checkout are direct requests to the server.• For Recently Viewed Products, use Local Storage or IndexedDB.
  7. 7. Scalable Architecture REST Web services EC2Web App Web App MagentoBrowser S3 RDS
  8. 8. Insanely Scalable Architecture EC2Web App Server Web App JSON JSONBrowser Media / Images Folder S3 RDS
  9. 9. Performance Metrics    YSlow
  10. 10. New Possibilities• Windows 8 and Mac OS• Native Tablet Apps• Touch Screen Kiosks
  11. 11. Thank YouJust Another Magento -Vinci Rufus @areai51