Refactoring a PHP shipping app with Vue.js 

Slides: https://slides.com/cartalot/deck-2/

or just go to: slides.com/cartalot

Upgrade a PHP Shipping App with Vue.js   

Easily add real time "reactive" features to your existing PHP application or website 

Reduce server calls by working in the client browser

Drastically reduce db calls for common tasks 

Elegant syntax - easy to write and understand 

Very fast - almost as fast as raw js

Very stable - Vue library is mature 

Tiny footprint - Vue is approximately 86k 

Why Vue ...?

 Andre Marigold

twitter: @ecommercemeetup

dev@cartalot.net

Organizer on Meetup for PHP, E-commerce & Instagram

Learned a php framework, built an ecommerce

shopping cart & platform, integrated it fully with Amazon,

built shipping, fulfillment, admin, etc features

The php based e-commerce platform reliably processed millions of $ worth of orders from the website and amazon over many years.

Mid 2017 - "its been fun" - moved main client to Shopify.

Currently building e-commerce tools with Vue and PHP.

so feel free to grab another drink ;-)

There will be no javascript code in this presentation... 

Multi Box Shipping App Version One   

The important data structures are built using the database. In this use case the Packages being sent and the Items in the package. As the different tasks are completed the database is the repository of all the critical information. Session, security, state, and communicating with the database - are all handled by the framework.

Every step in selecting an order, the number of packages needed, adding items to the packages, defining package dimensions & weight, selecting a specific shipping service, and printing the shipping labels - requires interaction with the internet server and database server. 

Screenshots of the App v1 - step by step... 

( whited out the names, etc ) 

From a list of orders,

choose how many boxes are

needed for the working order  

All of the items in the order -

get assigned to their package....  

New web page. We can't see the pending orders just the working order. In the page refresh we have created  db rows for all of the order Items in the items table. And of course 3 records for the Packages in their db table.  

now we define the package dimensions, weight and optionally insurance 

and yet another trip to the servers to update this information...

The Admin chooses which service to use,

the order is made with our shipping provider,

and we get back the shipping labels.  

We get rates back from our shipping api provider 

It all works and the PHP only Version 1 of the shipping app processed thousands of orders.

but... could we improve it ...?

Multi Box Shipping App Version Two

List of pending shipping orders...

assign the number of packages

for the working order

and click Start

Pending Orders still visible, webpage has not refreshed,

we have not contacted the server,

All the actions are in the users browser.

Assign the Items

to their Packages.

Dollar Value of items

in each package

calculated in real time

Assigned Items display

in  their package

in real time. 

Assign the item

to its package.... 

whoops -

selected the

wrong package

Select the correct

package - all totals

and package line items 

updated in real time.

...and no contact yet

with any server - so all of

these tasks are lightening

fast for the user. 

Drop down list

of Package names.

When a Package type has been chosen

in the drop down menu,  

we update the package dimension fields.

note current working order is highlighted,

all open orders are still visible for the admin 

Admin chooses a shipping service

or it defaults to Best Rate...

Our first server call - to the shipping api to get back the rates. 

Displays all shipping rates

and the selected rate. 

(if there are any issues with the 

shipping destination we stop,

display the error and the address form)

We still have not touched our own databases.

or our framework...

We get back the shipping labels and generate pop up windows so they can be printed out...  

Information about each package, 

its tracking information, cost, etc

The order is now complete and drops off the list. We get an updated list of pending orders - web page has not refreshed. 

The shipping order is complete -

so NOW we send the Packages info and Order Items to our Databases. Once! And all we need back is the ok that the db inserts were completed. And since we are using Vue + Axios for the APIs we don't have to refresh the working web page that contains the pending shipping orders. 

We are still using the same PHP framework as Version 1.

We are still using the same database tables.  

We are using the same APIs to communicate with our shipping provider to get the rates and labels. 

We have added Vue.js - to help with the tasks that are better accomplished in the users browser.

Points to Ponder....

* Using Vue along with APIs gives you a new way of incrementally building out your app with new services, server tech, etc.

The API that you call can be in the same framework, or it can be on a different server with a different stack. This allows you to try different tech without disturbing your critical framework / stack.

* Every small task you can push to the client browser - will make your application feel much faster. And you save the server costs.

* Every small task you can do in the Vue javascript can reduce your database costs.  

* You can pass timed security tokens from your framework to the Vue app to be included in the http headers as part of the API call. So any api call the Vue app makes can be validated if needed.

* Show / Hide Components is a really fast and powerful way to build out working screens for common tasks. You can bring the appropriate window to the User just as needed and remove quickly when the task is done .  

Thank You!