Learning Vue.js by updating one of my more simpler projects, TheRadList, the Edmonton restaurant webapp that restores the excitement of finding a place to grub.
Objective
TheRadList is a project I started in January of 2018. Every once in a while I’ll bring it back to update it or use it to learn something new.
Here’s the total history of TheRadList updates:
- Update so that my friends can easily modify content
- Update to learn Angular 5
- Initial launch of the project
Now I’m using it to learn Vue.js, one of today’s most popular web frameworks.
Learning Vue
Learning a new framework isn’t too difficult, since a lot of them take concepts from each other and most have great learning tools online.
The first thing I did was go to the Vue.js docs to see what I could learn. There I found a video series from Vue Mastery called “Intro to Vue.js” which covers all the core principles of Vue.js and also builds a sample app along with you.
I didn’t bother with the sample app, because TheRadList is my sample app.
Planning my Architecture
After picking up all the core concepts and functionality of Vue.js, I looked at TheRadList’s HTML to see how I could refactor and update it with Vue.js.
I know that the App Component needs to get emitted messages from the Filter Component, which will then update the List Component via props.
If possible, I also want to make my filter functions capable of filtering through multiple properties. But that’s more of a stretch goal.
Building out my App
Refactoring should always be done incrementally and that’s essentially what this process is.
I began with creating components and slowly turning them into what I needed, using the documentation and the videos from the core principles course as a reference.
Git commits tracking my incremental progress
Slowly but surely I replaced all the functionality of the previous website. Starting with the component for the top hero section, then the component for the filter section and finally the rad list itself.
Comments and Improvements
It’s always great to document the things you learned and the things you can do better. Something that can nearly always be improved in the components and how they work together.
More Components
It’s possible more components might be helpful, especially the for UI. For example each filter in the Filter Component can be its own component, this would mean more component-oriented CSS, helpful for designers and developers both.
Component Efficiency
Inner-component structure is another way to improve your app. I updated how the filter-props (props that control the list filters) were passed into the List Component, yielding a much more readable approach that’s also good for performance. (the watch function is slow)
Updating List Component to take in 1 prop for all the filters
Arrow Function Quirkiness
Took me quite a while to figure out why my watch function wasn’t working when trying to watch for when the user toggles the “Deep Dive” view.
watch: {
expand: (newVal, oldVal)=>{ this.expanded = (newVal=="large") }
}According to StackOverflow, it’s simply because arrow functions (()=>{}) don’t take in bindings for this. In other words, this doesn’t work inside them! Just reverting back to regular function syntax fixed the problem. A good lesson.
watch: {
expand(newVal, oldVal) { this.expanded = (newVal=="large") }
}Single File Components
Something I’d love to get to are Vue’s Single File Components, making Vue projects further like Angular and React with separation of concerns.
For a simple app like TheRadList, I didn’t see a point in adding this functionality, so instead I separated out my components into files. It helps with readability abstraction but isn’t nearly as beneficial as Single File Components themselves.
Results
You can visit TheRadList at www.theradlist.com, but you won’t see any difference (other than a few style bug fixes I found). But now you’ll know that the site uses Vue.js!