Building an eCommerce marketplace, like shopify, using the hippest tech

Background Story

My friend, Stephen, is a small business owner selling aftermarket auto performance part and accessories.  He used Magento for his online store, but Magento will stop his product by Feb 2015.  He asked me to build a eCommerce web site, I told him to use Shopify and help him to setup his store in a weekend.

Shopify - Cheap to start, expensive to make sales

$14/month - Starter Plan

25 Items

The package just provide enough feature to have the brand display 25 items online.

NO real time carrier shipping

Unless most products are small and light items which can easily absorb shipping cost into its sales price (Free Shipping), most buyers abandon shopping carts when seeing high flat rate shipping fee. 

2.9% + 30¢ credit card rate

When buyers abandon shopping carts, the above rate is meaningless.

$29/month - Basic Plan

Unlimited items

If most visitors are window shoppers, this package will allow the brand to disclose the entire product catalog for price comparison.

Still NO real time carrier shipping

For auto performance part and accessories, items size and weight varies.  Free shipping for big and heavy items lose money; while flat rate shipping makes shoppers feel unfair and dishonest - abandon shopping carts!!

2.9% + 30¢ credit card rate

A lots of window shoppers ...

Discount Code Engine

I have not use it, so I don't know how complicate a rule can be setup.  To be discovered ...

Fraud analysis tools

These tools show the risk level of each transaction base on the credit card information.  Oversea credit card has a higher risk level than domestic ...  Base on the information, seller can do additional verification or just refund the buyer before the card owner charge back.  This feature is only available for transaction using shopify gateway, at the basic plan tier.

$79/month - Professional Plan

Still NO real time carrier shipping, really!

$50 premium and still no real time carrier shipping, what a rip off.  Easypost only charges 5 cents per shipping label.  However, there is no option to integrate external shipping calculator with shopify checkout workflow.  Let's see what are the other useful features offset the $50 premium.

2.5% + 30¢ credit card rate

Without real time carrier shipping, there are still lots of abandon carts all over cache.

Gift Cards

Gift card strategy does not apply to many merchants, especially small online retailer.  One requirement is the product can be given as gift.

Creating gift card and take 2.5% + 30¢ profit from seller, for a $100 gift card, shopify profit $2.80 from seller and seller received $97.20 cash and $100 liability.  I like this business model.

Professional reports

I have not try the report feature, so no comment and to be discovered.

Abandoned cart recovery

This is a must have feature ☺ when abandoned shopping carts are all over the cache after seeing unfair shipping rate.  Anyway, I have yet to see how this feature work, to be discovered.

$179/month - Unlimited Plan

2.25% + 30¢ credit card rate

Some merchants has already negotiate a better rate, less than 2%, with local bank directly.  Some banks use authorize.net or other third party payment gateways.  I have setup authorize.net with Shopify for Steven's shop.

Advanced report builder

Sure, it is really useful ... for high volume sellers.  Anyway, to be discovered ...

Real time carrier shipping, finally

Let's assume all additional features above Basic Plan are unessential, the cost for getting real time carrier shipping is $150/month.  Base on EasyPost rate, a merchant need to ship over 3000 packages to offset the difference.

There are $100 difference when comparing with Professional Plan, a merchant need to ship over 2000 packages to break even.  I would care less about $100 when I am shipping 2000 packages a month, but what does 2000 packages a month really means?

Online retail store opens 24/7, assume there are 30 days month, the site need to have a average 66.666... sales per day volume to justify upgrading from Professional to Unlimited; and 100 sales per day volume to justify upgrading from Basic to Unlimited.

However, for some online retailer, to make a successful profitable conversion, it is necessary to provide real time carrier shipping to customer; and making the 7 - 10 daily online sales volume is already very successful.

New Project - A small business marketplace that make sense and money

I want to help small businesses, like Stephen's auto parts store, to operate a low cost eCommerce channel to archive better profit margin.  I will leverage the project on cloud platforms from IDE to deployment to realize my idea of how a web site should be built.  

My 2 cents on the future (today and beyond) of web development

I was asked my opinion on the future of web development.  I blasted out my not well thought opinion, only from the development angle.  I think I owe myself a well organized response to express my point of view better next time.

AngularJs + RESTful data service + pre-composed HTML

I believe a web framework/system should handle/serve data and static assets separately.  The job of composing the UI html DOM will be handled by javascript framework - AngularJs.  If there is a need for the home page to display near real time "dynamic content" in a fast and robust fashion, the home page html will be pre-composed by a worker process at the server side and save the html to the CDN servers.

Better Customer Experience

There are many pages, especially home page and SEO pages, serving the same "dynamic content" over a long period of time - P, where P is the length of time the "dynamic content" is updated.  

I think the worst user experience are getting 500 error or a nice error page.  This happen when sever side scripting logic is having uncaught exception to compose the html of a requesting page.  Serving static html with the pre-composed "dynamic content" can effectively reduce the 500 error, and improve customer experience and performance.

When the traditional GET/POST round trip is encountering error, browser is redirect to the error page == customers yell WTF.  UX building around ajax or websocket interaction, provide better workflow experience because both browser and its user are in the same continuous context, rather than redirect, load and rebuild context. 

Same level of Security

The same security protocol that is used to protect a MVC web server can be used to protect the RESTful data service.  After all, RESTful data service is just another MVC web server using the same HTTP protocol.

Better Availability

When 500 responses are reduced, the web site availability increase.

With the separation of static and data server, scaling can be better tailored and customized to the I/O bounded and CPU bounded strategy, in contrast to the server side scripting web system.  For example, static file server, CDN, can adopt caching strategy with less CPU resource, while more CPU/memory budget can be invested into data servers, or even adding more instances to host the heavy weight data service.

Effective scaling improve availability as well.

Better Performance

In terms of composing static HTML, it is simply O(1) vs O(n); the static content needs to be composed once and serve n requests; while server side scripting compose n times to serve n requests.

In terms of constructing dynamic data, the data service only need to construct and return the data payload in an ajax call; while the server side scripting need to construct and return the entire html. 

Complete Separation of Concern

Modern web site heavily depends on javascript scripting.  I remember 10 years ago, web design/development still needed to consider the case of browser with javascript turn off, while today browser having javascript disabled == who cares, not my customer.

Base on the software system design principal - separation of concern, I believe all UI manipulation logic be contained within the same code base as much as possible.  When javascript DOM manipulation is a requirement, the UI logic/assets should be contained in client side code base as much as possible.

Even with the best practice of MVC on server side scripting development, the view and view manipulation logic are sharing responsibility with the client side javascript UI code.  Embedding javascript in the view and in-lining dynamic value in javascript when composing at server side causes more confusion and inconsistency in the system.

Easier for Testing

Since decoupling presentation and data logic into 2 sub system, testing on each sub system is simpler.

For client side testing, a data stub can be easily injected to mock the data coming from data service under AngularJs framework,  The UI testing parameters can be easily setup on client side scripts.

For data service testing, since it is a RESTful web service and the return payload is JSON string, the tests can be easily scripted and automated.  Validating a JSON string is much easier than validating a HTML string.  For lazy developer like myself, I use Chrome App - Postman to do minimum sanity check.

For pre-composed HTML testing, a test step can be added to the end of automated HTML composing process.  The end result HTML can be loaded into headless browser, like PhantomJs or simply be parsed and validated.