Angular JS and Magento

•Als PPTX, PDF herunterladen•

4 gefällt mir•13,053 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.

Technologie

JSON Angular Magento
Vinci Rufus
www.neevtech.com
@areai51

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

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.

Scalable Architecture

REST
Web services

EC2
Web App Web App Magento

Browser

S3 RDS

Insanely Scalable Architecture

EC2
Web App Server

Web
App JSON
JSON

Browser
Media / Images
Folder

S3 RDS

Performance Metrics
 Webpagetest.org

 Pingdom.com

 YSlow

New Possibilities

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

Thank You

Just Another Magento
http://jam.neevtech.com
-Vinci Rufus
vince@neevtech.com
@areai51

Weitere ähnliche Inhalte

Was ist angesagt?

NoSQL mit RavenDB und AzureSascha Dittmann

Server side scriptingbaabtra.com - No. 1 supplier of quality freshers

Don't Be a Lopsided Web DeveloperDavid Pallmann

02 hosting servicesinwindowsazureBat Programmer

DDD Sydney 2011 - Getting out of Sync with IIS and Riding a CometRichard Banks

Evented Web @ IgniteJeff Lindsay

Ajaxreddivarihareesh

PLAT-8 Spring Web Scripts and Spring SurfAlfresco Software

Share point 2010 performance and capacity planning best practicesEric Shupps

Asp.net basicNeelesh Shukla

Apps for SharePoint 2013Melick Baranasooriya

Introduction to Ruby on Railshasan2000

Introduction to share point 2010 developmentEric Shupps

Class.bluemix.mbaas.chapter.2.patternRoss Tang

Next.js (almost) in productionJasdeep Lalli

Best Practices for Large-Scale Web SitesCraig Dickson

Microservice Websites – Øredev 2017Gustaf Nilsson Kotte

Asp.net introductionKshitij Wagle

Developing for the GeoWeb: Notes From The Field Dev Summit 2009Dave Bouwman

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...Chris O'Brien

Was ist angesagt? (20)

NoSQL mit RavenDB und Azure

Server side scripting

Don't Be a Lopsided Web Developer

02 hosting servicesinwindowsazure

DDD Sydney 2011 - Getting out of Sync with IIS and Riding a Comet

Evented Web @ Ignite

Ajax

PLAT-8 Spring Web Scripts and Spring Surf

Share point 2010 performance and capacity planning best practices

Asp.net basic

Apps for SharePoint 2013

Introduction to Ruby on Rails

Introduction to share point 2010 development

Class.bluemix.mbaas.chapter.2.pattern

Next.js (almost) in production

Best Practices for Large-Scale Web Sites

Microservice Websites – Øredev 2017

Asp.net introduction

Developing for the GeoWeb: Notes From The Field Dev Summit 2009

Chris O'Brien - Customizing the SharePoint/Office 365 UI with JavaScript (ESP...

Ähnlich wie Angular JS and Magento

Json Angular Magento | Imagine 2013 Barcamp | Vinci RufusAtwix

Neev - JSON Angular MagentoNeev Technologies

C fowler intro-azuresdeconf

Effectively using Nokia Web Tools 2.0 templates for Series 40 web appsMicrosoft Mobile Developer

Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...Joonas Lehtinen

Ideas for addictive series 40 web appsMicrosoft Mobile Developer

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joo...jaxconf

Wakanda - apps.berlin.js - 2012-11-29Alexandre Morgaut

Best Practices for Hosting Web Applications on AWSAmazon Web Services

Mike Taulty MIX10 Silverlight 4 Patterns Frameworksukdpe

20120802 timisoaraRichard Rodger

How to Build a Big Data Application: Serverless EditionLecole Cole

How to Build a Big Data Application: Serverless Editionecobold

20120306 dublin jsRichard Rodger

Getting Started with AWS Lambda and the Serverless Cloud - AWS Summit Cape T...Amazon Web Services

JAX 2012: Moderne Architektur mit Spring und JavaScriptmartinlippert

Building High-availability Websites on AWSAmazon Web Services

High-Availability Websites and Web Applications with AWSAmazon Web Services

Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...MskDotNet Community

Modern Architectures with Spring and JavaScriptmartinlippert

Ähnlich wie Angular JS and Magento (20)

Json Angular Magento | Imagine 2013 Barcamp | Vinci Rufus

Neev - JSON Angular Magento

C fowler intro-azure

Effectively using Nokia Web Tools 2.0 templates for Series 40 web apps

Vaadin - Rich Web Applications in Server-side Java without Plug-ins or JavaSc...

Ideas for addictive series 40 web apps

Vaadin, Rich Web Apps in Server-Side Java without Plug-ins or JavaScript: Joo...

Wakanda - apps.berlin.js - 2012-11-29

Best Practices for Hosting Web Applications on AWS

Mike Taulty MIX10 Silverlight 4 Patterns Frameworks

20120802 timisoara

How to Build a Big Data Application: Serverless Edition

20120306 dublin js

Getting Started with AWS Lambda and the Serverless Cloud - AWS Summit Cape T...

JAX 2012: Moderne Architektur mit Spring und JavaScript

Building High-availability Websites on AWS

High-Availability Websites and Web Applications with AWS

Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...

Modern Architectures with Spring and JavaScript

Mehr von Vinci Rufus

Microfrontends Monoreops & Trunkbased basedVinci Rufus

Spas are dead Long Live MicrofrontendsVinci Rufus

Getting Productive & Performant with AngularVinci Rufus

Demand driven Applications with GraphQLVinci Rufus

Dos & Donts when making Technology choicesVinci Rufus

Progressive Web AppVinci Rufus

It's just AngularVinci Rufus

Angular PWAVinci Rufus

Taking Control of your Data with GraphQLVinci Rufus

Making Angular2 lean and FastVinci Rufus

Re-thinking Performance tuning with HTTP2Vinci Rufus

Teams Pizza Team vs Jigsaw Puzzle TeamVinci Rufus

Gesture based Interactions in JavaScriptVinci Rufus

Components Approach to building Web AppsVinci Rufus

Mehr von Vinci Rufus (14)

Microfrontends Monoreops & Trunkbased based

Spas are dead Long Live Microfrontends

Getting Productive & Performant with Angular

Demand driven Applications with GraphQL

Dos & Donts when making Technology choices

Progressive Web App

It's just Angular

Angular PWA

Taking Control of your Data with GraphQL

Making Angular2 lean and Fast

Re-thinking Performance tuning with HTTP2

Teams Pizza Team vs Jigsaw Puzzle Team

Gesture based Interactions in JavaScript

Components Approach to building Web Apps

Kürzlich hochgeladen

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

Artificial Intelligence: Facts and MythsJoaquim Jorge

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

presentation ICT roal in 21st century educationjfdjdjcjdnsjd

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

Real Time Object Detection Using Open CVKhem

Why Teams call analytics are critical to your entire businesspanagenda

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya

Manulife - Insurer Innovation Award 2024The Digital Insurer

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Kürzlich hochgeladen (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

Artificial Intelligence: Facts and Myths

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...

presentation ICT roal in 21st century education

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

Real Time Object Detection Using Open CV

Why Teams call analytics are critical to your entire business

Scaling API-first – The story of a global engineering organization

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Artificial Intelligence Chap.5 : Uncertainty

Manulife - Insurer Innovation Award 2024

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Exploring the Future Potential of AI-Enabled Smartphone Processors

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

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

Angular JS and Magento

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Angular JS and Magento

Ähnlich wie Angular JS and Magento (20)

Mehr von Vinci Rufus

Mehr von Vinci Rufus (14)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Angular JS and Magento