Angular JS and Magento

12,475 views

Published on

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

Published in: Technology
4 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
12,475
On SlideShare
0
From Embeds
0
Number of Embeds
6,803
Actions
Shares
0
Downloads
36
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

Angular JS and Magento

  1. 1. JSON Angular Magento Vinci Rufus www.neevtech.com @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  Webpagetest.org  Pingdom.com  YSlow
  10. 10. New Possibilities• Windows 8 and Mac OS• Native Tablet Apps• Touch Screen Kiosks
  11. 11. Thank YouJust Another Magento http://jam.neevtech.com -Vinci Rufus vince@neevtech.com @areai51

×