All

Ecommerce without a server-side language

ecommerce-without-server-side

What's the best server side language for building an eCommerce platform? Python? NodeJs? Ruby? PHP? The answer is none of them, and any of them. They all do the same thing. Some are just a little more elegant and mature than others. It's all so boring! Thats why I've decided to experiment with an idea I have had for a number of years. I want to try and build a simple online store using no server-side language at all. Using XML directly output from an XML database and transforming it with XSLT.

Tools

  • BaseX: a lightweight, high-performance and scalable XML Database.
  • Nginx: used as a proxy to the BaseX REST API.
  • XSLT: transforms our XML to HTML.
  • LocalStorage: allows you to use JavaScript to store data locally in a user's browser.
  • jQuery: Just as a helper

Install Basex

wget http://files.basex.org/releases/8.6.1/BaseX861.zip
unzip BaseX861.zip
mv basex /

Basex requires the Java runtime environment

sudo apt-get install default-jre

Fire up the rest client

./basex/basexhttp
View the result, basexhttp runs on port 8984 so go to https://www.fastfwd.com:8984. It also has basic auth, so when prompted answer... username: admin password: admin

Install nginx

sudo apt-get install nginx

Setup our proxy

vim /etc/nginx/sites-available/default
and copy and paste the following:
server {
        listen 80;
        root /var/www/html ;

        location = / {
            proxy_pass http://127.0.0.1:8984/rest/shop/data;
            proxy_set_header Authorization "Basic YWRtaW46YWRtaW4=";
            xslt_types application/xml;
            xslt_stylesheet /var/www/html/shop.xslt;
        }

        location ~ ^/(basket|checkout) {
            try_files $uri.html = 404;
        }
}
"YWRtaW46YWRtaW4=" is base64(admin:admin) which is the default basic auth for basex *Note that this header is open to the world
service nginx restart

Create our XML Database

You can add database(s) and xml via the restful inteface. We use postman, but you could just as easily use curl, ajax etc. Create the database "shop":
PUT http://127.0.0.1:8984/rest/shop

Add some data

PUT http://127.0.0.1:8984/rest/shop/data Content-Type: application/xml
Posting the following data:

  
  	Category One
  	
      
        Product One
        99
      
    
  
  
  	Category Two
  	
      
        Product Two
        49
      
    
  

Nginx applies the following XSLT to the XML output






    
    
    


  

Welcome to our example shop

Price: £

Visting our adminuat.fastfwd.com, we now see a list of our products

LocalStorage

The shop.js we inserted into our XSLT (as well as Jquery) performs a single action. Add to basket.
$(function(){
  $('button').click(function(){
    var name = $(this).prevAll('h3').html();
    var price = $(this).prevAll('p').html();
    price = price.replace(/[^0-9\.]/g, '');
    var item = {};
    item.name = name;
    item.price = price;
    localStorage.setItem('basket', JSON.stringify(item));
    window.location.replace('/basket');
  });
});

The Checkout

Adding a product redirects the user to their basket and integrates with a basic Paypal form to allow a checkout. Our basket page:

You are buying @ £

Final thoughts

It wasn't quite as straight forward to setup as I had hoped. I love the idea that we are getting the XML output directly from the API running on the server proxied to port 80. The TTFB was lower than any site I've developed with a server side language. I'm no expert when it comes to BaseX or XML/XSLT and I enjoyed the ride, but I think I'll be sticking to using server side languages.

Insights by Trevor Sewell

Share this post