Building an App Store With Vue.js
I recently built a website for LimeMicro that gave a read-only view of their Ubuntu (white-labelled) App Store. The brief was quite simple, with the following requirements:
- Index of apps with thumbnail icons and basic info
- Search option
- Click on an app to get extended information
- Simple styling via CSS
- Ability to include a header and footer with links
- Easily create multiple instances
For this small project I decided to use Vue.js 2.0, it was my first time using it for a production project. I wanted to make use of its server side rendering (SSR) and component architecture. I had considered React but I knew the learning curve is steeper, and this project didn’t require something so powerful. Vue is lightweight and—quite frankly—was a joy to work with.
My workflow consisted of a number of small prototypes, each based on the previous but often modified quite heavily. I began with the HTML structure and some basic styling. As with most other app stores, the layout was a grid home/search page with a details page inside. At the time of writing, CSS Grid Layout is at 62.34% compatibility globally. Given that mobile browsers would only see a thin layout (1 or 2 columns) anyway, I decided to use Grid and fallback to a linear layout. I also used a manifest file and tried to optimise it as a ‘Progressive Web App’ where possible.
This approach gave us the ability to rapidly develop the prototypes and I was able to meet the requirements in a very short amount of time.