Events have conspired recently to get me interested in modern web development. I started this week learning the Vue Javascript framework for client-side web apps. It won’t be a surprise to anyone familiar with web dev, but the stack is deep! Technology built on technology built on technology. I had a pair of guides, one a coworker and one a friend. Between their sets of advice, I wound up with a working platform, and I spent a couple days poking at while doing some tutorials.
At the base, you’ve got Windows Subsystem for Linux, which let me install a virtual machine shell for Ubuntu, which provides access to the package managers and command line tools that are the standard. I installed it from the command line, which went very smoothly.
NPM is a package manager and platform for Javascript development centered around the node.js script that is the basis of basically all DOM manipulation on the web. I think it contains a web server and packaging tools, but you can apparently plug in your own.
Vue is a “reactive” Javascript framework library, meaning that it takes a model of data and allows you to drive template HTML elements based on that data. You get smart, fast DOM manipulation with just enough control of effects to make a rookie web developer dangerous. It is also an opinionated ball of magic.
Vuetify is a css library that makes is easy to make Vue content sassy looking. I used Bootstrap before for this kind of job. I’m not deep enough into this process to say whether I like it or not.
Yarn is also a package manager for web projects that lets you add components, build, serve, or package your code. I think it’s trying to be all things to all people, but I’ve just scratched the surface of this one.
I had a day or so of confusion about how Vue worked based on a conflict between the tutorial I was following. In case it saves anyone trouble down the road, I will describe the problem here.
It all started with the command vue create hello-world, which stubs out a template Vue app on your file system. The template it uses for that employs a feature called Single File Components that can encapsulate functionality in a very smart way, isolating logic and presentation for each component in a .vue file. You can run yarn serve to see your app in action, and it even automatically updates whenever you save a file involved. The problem came when I tried to use my little hello-world stub into the host app for the tutorial code.
I got past most of the problems, the most notable of which was that the data object for a component had to be provided by a function —— it can’t be defined in a flat json blob. I hit a roadblock in lesson 2. The images named in the data of my component would not load. In the tutorial, they are stored in a ./assets/ folder. I could use images from that folder from the HTML elements, but not from the data. My socks images were always broken!
It ended up being a product of the webpack utility, which is running in the background of yarn serve. It analyzes the requirements of your app and tries to make a minimal packaged build. It can see references to an image from the HTML elements, but the data() function is opaque to it. As a result, my data images weren’t being included in the set of files the server could provide. To resolve this, you can put the images in the ./public folder, but then you lose the minimizing utility that webpack provides.
It’s a sticking point because the single file components can’t be sent to the web without a rewrite pass that happens during yarn build or invisibly when yarn serve is running. The tutorial uses the more straightforward <script> tag to bring in the Vue library, which does not require an intermediate form before it can be consumed by the browser, and therefore won’t lose track of the image files.
It took reading the single file component guide document and examining the ./dist/ folder made during a yarn build to figure out what was going on. Since then, things have been pretty straightforward, but I still have a lot to learn.