I learned vue.js over the weekend

#webdev #beginners #challenge #frontend

Oftentimes when I talk with recruiters they'll ask about my experience level in a particular technology or more specifically a JS framework. I find this question a bit odd as surely I can easily learn whatever framework in question in a reasonable time frame. That said - show me a JS framework that takes more than a month to learn and I'll show you a framework which doesn't worth learning.
However, if you want to quickly learn a new framework there are a few prerequisites that you should master first -

HTML (and what does XML means), and ideally more than simply using <div> everywhere. Imagine having a conversation to someone who only says groot".
CSS (and ideally SCSS and I would suggest putting an extra effort on https://flexboxfroggy.com/ and Grid. I guess you can also learn bootstrap but personally it feels like using "common phrases in Spanish" booklet while trying to close a million dollar deal in Latin America.Finally, of course, you should learn.
Javascript (and especially ES6, which is mostly useful "syntactic sugar" that will make your life easier, as long as you know what stands behind it). I'm very fortunate to work with javascript long enough to see its evolution from callbacks to promises and then to await/async and it really helps to understand how it works (and all its crooks) by knowing its history. And hopefully by then you're already an amazing developer and you realise that frameworks aren't magic, rather than pieces of code written by someone just like you.

Vue, just like all the other frameworks, is ultimately a templating system. Imagine having a calendar component that you can simply write in your HTML code <calendar /> and poof - the browser shows a calendar with all the logic involved. How would you write such a component? by writing some HTML code, probably some javascript and maybe some CSS and then wrapping it all together in a way that the browser can use it. Svelte and Vue lets you write all the code (HTML, JS, CSS) for your component in a single file. React uses JSX to allow writing HTML inside the JS-code and uses functional-CSS (the horror!) for its css. Angular usually (but not necessarily) has 3 separate files. The syntax might change but they're all using the same paradigm.

I took upon myself the challenge to learn Vue.js over the weekend. The live demo is available online (and its code and its XD designs courtesy of my wife). I should give credits to Coding Addict's video on building a shopping-cart. I didn't actually watch it but it inspired me to pick this project. I considered using Contentful as data-source, but decided to save time of creating 50 records. Instead I created a cake-generator. It didn't take long and it allows me to see different datasets. For longer projects, I would recommend having a consistent dataset that you can actually write tests against.Before starting to code, I double-speed a Vue tutorial course on youtube. There are plenty of them. I also watched this tutorial about the "Composition API", which is a new format to enter data they introduced and made a lot of the sample code available online not really compatible.

If there's anything I would like you to take from here is that technologies and buzzword recruiters use shouldn't intermediate you. A company's tech-stack shouldn't be an issue when picking a workplace as their two year old code is going to look old regardless. Instead I suggest aiming for a workplace that aligns with your beliefs and that you would actually enjoy working in.