My first 7 days of Vue.js experience

01/23/2018

If you’ve read my 2017 rewind post, you might remember that I wanted to step up my coding game and leave jQuery and PHP in favor of Vue.js and Node.js. Well, here’s how I’ve held up in my first week using Vue.js.

Before I start, some background information. I’m using PHP and jQuery for ages now, but I realized when building complex web apps, these technologies were at their limits. So off to something new! I feel like learning something is easier when working with it directly on a project, so I decided to create a music player using Vue, Node, web sockets and a sketchy Chinese music API. I worked on it (almost) daily and shared my experiences live on Twitch to get help and prevent mental breakdowns. Also, please don’t take me too hard on this one, I’m still new to it and I would highly appreciate any help either over at my Twitch in future streams or on Twitter!

The First Touches

Actually a breeze. Just grab the file off the CDN and you’re good to go. Seems to work perfectly. Also my Visual Studio Code experiences where nothing near as bad as I thought they’d be. As a diehard Sublime fan, I actually found it quite refreshing and things like built-in debug tools and terminals really reminded me why IDEs have there right to exist. It’s kind of like a mixture of Sublime and Atom, and I enjoy it so far. However, the performance of Sublime remain to be unmatched and the usual “I miss X” feelings are still present.

But Then

When moving to the next step – which is to use Vue CLI – things got a bit difficult. Hard core devs may cringe at this, but I’ve actually never used things like Webpack (or any npm or CLI like build tools) before. I’ll have to admit that those kind of things scare me. Thanks to the premade templates, the intro was much easier, but I still need to learn a lot of things, even basics, like how to compile SCSS and how to build production files. Right now I’m using really bad workarounds, like importing SCSS into the main Javascript file – horrible, just like the resulting rendering times.

So far, so good. But when I started using components, frustration started to strike. The standard Webpack Vue CLI template creates basically a component, which gets loaded into another component. One issue: my app (maybe the wrong approach there) required communication every component and the App.vue file. But in this configuration, it seemed to be impossible. Some people recommended to create a new, global Vue instance to pass events through it, but that seemed ridiculous. So instead, I’m using the index.html file to link to all of the components, and a Javascript file, which contains the main Vue instance. Communications is then made possible using this.$emit inside of components, variable bindings and event listeners. I don’t know if I just completely missed out the proper way of doing it or if this is really the solution. But considering that Vue Router only accepts one component, it’s probably not. So I’ll have to figure out how to communicate between components (if you know how to do it – let me know!).

Anticipated

Nevertheless, knowing what Vue.js can is still mindblowing, considering what kind of workarounds I always needed to pull off with jQuery. And Vue is even smaller than jQuery (mind blown again). There is still a lot to learn, but I love to do just that. Yet I also need to fix up some caveats I still carry around with me, like using always double quotes instead of single codes in Javascript and wanting to DIY things. But well, the journey is the destination – and now follow me on Tumblr!

By the way, if you want to learn more about the semi-legal music player project, I will release both the source code and probably a stream explaining everything pretty soon. But keep in mind: I am a beginner (so better don’t copy my code).