JS Horror Story: Learning VueJS Episode #1
The time has come.
I too need to sharpen my knife and venture into the jungle of modern JS frameworks.
I come packing years of experience in JS, building extremely complicated applications in React, Redux, Backbone and jQuery (Not together, thankfuly). Being no stranger to learning new technologies, I decided to document this new adventure in the hopes that this log will keep me sane.
I will not be comparing VueJS to other frameworks directly, but rather I’ll compare features which I feel are good or bad, and discuss how other frameworks solved (or not).
At the moment of writing this, I have zero experience in VueJS. It’s more than plausible that all the issues I’ll show here have solutions, and yet my point is to vent my frustration for my own sanity.
Getting Started
My weapons of choice are VSCode, Youtube/Google and the online documentation for Vue — I will not be using any bought lectures.
Day 0 // Hour 0
“Let’s start at the very beginning, a very good place to start” as they say. Installing vue-CLI was simple enough, this felt like home coming from react-create-app — npm run serve, so far so good HOLY CRAP THIS ISN’T JAVASCRIPT.
Okay, calm down, VueJS comes with its own file extension and syntax, called .vue, and a vue “component” looks something like this
The Vue file contains three sections, a <template> tag, a <script> tag and a <style> tag.
This file is a strange looking html file, but clearly undergoes somet sort of parsing by Vue that takes the html inside the template tag, does something with the exported object and applies to styling to it.
Okay, not too bad.
The annoying default configuration
Vue is designed with a low learning curve, so why on earth would console-log would be a build-breaking lint rule by default?
The most natural thing is to console log your code, yet vue denies it from you without some extra configuration.
Dynamic Data
I decided I want to render my name on the screen, a quick reference got me to the ‘data’ attribute on the exported object (Which still has no name from what I understand).
Thankfuly, the docs are confusing and misleading. A quick search landed me here, the code example from the docs:
Makes sense, let’s do that!
Doing that, gives you this error:
error: `data` property in component must be a function
Grrr — WHY?
It turns out that in some cases `data` has to be a function that returns an object and in other cases it’s just an object. Obviously.
At least write in your docs that you might get this error, come on..
Ok. Moving on, using data is easy and intuitive, Vue uses some common syntax for templating called double mustache:
The frustrating documentation
It turns out you can use vue in two ways: you can use new Vue(…) in a Javascript file, or use the vue syntax in a Vue file. Most of the documentation you’ll find, at least in the beginning, is centered around new Vue(…), and most of it doesn’t work for what you’ll try to do.
Sub Components
Having to read through a good part of the document just to understand how to create sub components, the end result was discomforting.
VueJS is really silent regarding possible errors, I have made two mistakes that took around 30 minutes of debugging, the mistakes were stupid, but most common mistakes are.
To define a component you need to do three things:
- Import the sub component into the parent component.
- Define a ‘components’ key with the name of the component, the value is the JS object you just imported
- use the name you gave above in the template
The end result looks something like this
I miss-placed the the ‘components’ inside ‘data’, no errors were thrown.
If you miss-spell components, or the name of the component or the name used inside the template, no errors are thrown.
The above snippet hurts deeply.
I need to configure the `components` key, provide a Name for the component and then use that name in the template. If i change the configuration of ‘components’, everything dies silently without throwing any errors.
In react, all you need to do is Import the Component, and use it directly in the JSX — If you use a component that doesn’t exist you get a runtime error in the browser.
In react, JSX is real JS objects, which means you can use your IDE to quikcly spot un-used variables or incorrect names, since Vue uses HTML templates it all looks like valid HTML. NOT COOL.
I’m too emotional to keep moving forward.
All of the above took a couple of hours to get done, which includes watching videos, debugging and taking notes.
My current worries moving forward:
- Vue seems very unintuitive, compared to React.
- Vue is not developer friendly, and swallows errors which should really be sent to the user.
Until next time,
Patrick
P.S
You can catch Episode 2 here
This is subjective, yes.
Reading the entire manual first would probably be helpful
I’m heavily biased towards React.
This was only two hours into it, so this rant is unfair, I know.