Making My First PWA With VueTue 29 August 2017
tldr; I made a chess app using Vue. Overall Vue impressed me. Making the page into a PWA was surprisingly painless.
Vue appealed to me for a few reasons:
- It’s lightweight. Not just in size, but in API complexity.
- It’s standalone. Just drop one script into the page and get going - no react+react-dom+babel (I understand that one doesn’t need these three, but in practice they’re what everyone uses).
- It has really good documentation.
- And of course, the license situation is a whole lot better.
So, getting started, I wanted to keep things as simple as possible. That meant no build systems, just a
<script> tag in my page. Of course, looking back, I’m kicking myself for this decision - I missed out on all the goodness of Single File Components.
Coming from a React-ey perspective, I found Vue’s component concept familiar, with a few small adjustments to the names of things. The biggest learning curve was Vue’s template syntax, which felt verbose and clunky compared to JSX.
I know that it’s possible to use JSX with Vue, but partly for learning purposes, and partly because of the afore-mentioned lack of a build step in my chosen workflow, I trundled on with what Vue gave me out of the box. In the end I didn’t mind it so much - it’s just something to get used to and once you know the big three (
v-on:), life tends to get easier.
I’ve seen it mentioned that doing more complex templating is difficult with Vue’s syntax, but when (for example) I wanted to display a filtered list, it felt fairly natural to make a new computed property called
A personal pain point for me was the styling. There is no Radium equivalent (that I could find) for Vue, which for me meant that my styles were split between the components (most of the styles), and a CSS file (for styles with pseudo-selectors). I believe that Single File Components would fix this, but it would be nice if there was some other way - I’m imagining something like:
<a v-bind:style="styleA" v-bind:style:hover="styleB">
Overall though, I got a very favorable impression of Vue. It leaves the odd feature to be desired, but in the end it’s just a tool - it’ll never be perfect, but if it does the job and you use it enough, you’ll learn to love it just the same.
Lastly, I want to mention the process of turning this website into a fully fledged Progressive Web App. In this case, it was all pretty simple, even for a first timer like me. Because I had bundled the P4WN chess engine with the page, there was no backend I had to worry about caching requests for.
Basically, I copied some example Service Workers to cache my files, and wrote a
manifest.json. After some testing with Lighthouse to winkle out some accessibility issues, I was set!