Building a Cart with Laravel and Angular

Question

I have in my application a cart, it currently works for me, though the issue my colleague is having is that it is too "slow". I have been thinking of a better way to implement this to make it faster and efficient.

Currently this is how my page loads:

Product/Ticket page loads.
AJAX function gets products/tickets from server and displays on the page.

Each product has a buy button like this:

<button ng-click="buyTicket(id)" class="btn">Buy Ticket</button>

This is how the buyticket works:

I pass the id of the product/ticket to my function.

AJAX function posts id to server.
Server runs a database query to retrieve product/ticket information based on id.
Product/ticket information is saved into "cart" table.
AJAX function returns with data "true" as the response.
I broadcast this:

$rootScope.$broadcast('TICKET_ADDED', true);
Cart directive listens to broadcast and makes an AJAX call to server to get cart data:

$scope.$on('TICKET_ADDED', function(response) { $scope.loadCart(); })
Data returned is assigned to an array and displayed in the cart.

Each user cart is identified by a randomly generated string of length 25.

That is how my cart works for now, i would like a faster, better way to do this please.

Edit: (used a debug bar to get these statistics)

When page loads: No. of queries run: 1 Memory Usage: 12.25 MB Request Duration: 1.04s No. of AJAX requests: 3

When buy ticket function is clicked: No. of queries run: 5 Memory Usage: 12.75 MB Request Duration: 934.41 ms No. of AJAX requests: 2

So your colleague thinks it's too slow, but you think it's fine? — wvdz
– wvdz, Commented Apr 15, 2015 at 12:45
Introduce caching, both client and server side. In Angular $http even has some cache=true setting that works out of the box. — wvdz
– wvdz, Commented Apr 15, 2015 at 12:46
Also yes two other claim it was slow but it seem normal to me, takes about 3 seconds, for them it takes like 6-7 seconds, i said it was their internet connection but they pointed out another site that worked instantly. — user3718908x100
– user3718908x100, Commented Apr 15, 2015 at 13:06
I'm not aware of your entire app structure, but are steps 5 and 6 really necessary? If everything is so slow, it would make more sense to return the cart data on step 4, to avoid the overhead of a second request. — Bogdan
– Bogdan, Commented Apr 15, 2015 at 14:05

user3367853 · Accepted Answer · 2015-04-15 12:50:53Z

1

The approach you are using is fine, just the thing is you might not have used caching. Use caching & you will get a good Speed. Also check your server response time, speed etc. on Google Speed Insights. It will tell you how you can make it more fact. Hope it helps.

vJ

answered Apr 15, 2015 at 12:50

user3367853

394 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3718908x100 Over a year ago

Caching? I know what it is but i'm not familiar with it's implementation.

user3718908x100 Over a year ago

Updated my post, please check it out.

wvdz · Accepted Answer · 2015-04-15 13:57:37Z

You can improve performance by introducing caching, both server side and client side.

Server side caching: instead of doing a DB query every time, keep objects in memory for some period of time. You can define a 'time to live' for an object and if the object has 'expired', you requery the db.

There are probably plenty of libraries out there that support this kind of functionality, but I would simply build it myself, because it's not that complicated. The trickiest part is making sure that nothing breaks down when multiple threads are trying to modify your collection of cached objects.

Client side caching is a breeze when you use angular. This is from the documentation of $http:

To enable caching, set the request configuration cache property to true (to use default cache) or to a custom cache object (built with $cacheFactory). When the cache is enabled, $http stores the response from the server in the specified cache. The next time the same request is made, the response is served from the cache without sending a request to the server.

Collectives™ on Stack Overflow

Building a Cart with Laravel and Angular

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related