Angular JS and Magento
Download as PPTX, PDF4 likes13,068 views
This document discusses strategies for improving the performance and scalability of a Magento web application. It recommends offloading work from the web server and database onto the client side by using caching, full-page caching, Memcache, Varnish, and JSON responses. The client side can handle tasks like layered navigation, filtering, sorting and search using JSON data. Media files and products can be stored on Amazon S3. The architecture can be scaled horizontally by using multiple application servers and a master-slave database configuration. Performance can be monitored using tools like Webpagetest.org and Pingdom.com.
![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](https://image.slidesharecdn.com/jam-1-130412134312-phpapp01/85/Angular-JS-and-Magento-4-320.jpg)
Angular JS and Magento
- 1. JSON Angular Magento Vinci Rufus www.neevtech.com @areai51
- 3. Web Server’s Workload Pull up the Page Serve Read the Assets & XML Media Web server & Database Query Render the the page Database Build the page on the fly
- 4. 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
- 5. Empower the Browser • Browsers are Powerful but under utilized. • Offload mundane tasks to the Client Side. • Go Back to the Server only when needed.
- 6. 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.
- 7. 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.
- 8. Scalable Architecture REST Web services EC2 Web App Web App Magento Browser S3 RDS
- 9. Insanely Scalable Architecture EC2 Web App Server Web App JSON JSON Browser Media / Images Folder S3 RDS
- 10. Performance Metrics Webpagetest.org Pingdom.com YSlow
- 11. New Possibilities • Windows 8 and Mac OS • Native Tablet Apps • Touch Screen Kiosks
- 12. Thank You Just Another Magento http://jam.neevtech.com -Vinci Rufus vince@neevtech.com @areai51