json angular magento | imagine 2013 barcamp | vinci rufus

JSON Angular Magento

Vinci Rufuswww.neevtech.com

@areai51

Heart of any Web App

Web Server’s Workload

Web server

&Database

Pull up the Page

Read the XML

Query the

DatabaseBuild the page on the fly

Render the page

Serve Assets &

Media

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

Empower the Browser

• Browsers are Powerful but under utilized.

• Offload mundane tasks to the Client Side.

• Go Back to the Server only when needed.

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.

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.

Web App

Browser

Scalable Architecture

Magento

RESTWeb services

RDSS3

EC2

Web App

Web App

Browser

Insanely Scalable Architecture

Server

RDSS3

EC2

JSONJSON

Media / Images Folder

Web App

Performance Metrics

Webpagetest.org

Pingdom.com

YSlow

New Possibilities

• Windows 8 and Mac OS• Native Tablet Apps• Touch Screen Kiosks

Thank You

http://jam.neevtech.com

-Vinci Rufusvince@neevtech.com

@areai51

Just Another Magento