<p>For years, our front-end has relied on a little-known Javascript library, RiotJS. It’s lightweight, concise, and syntactically pleasant. Riot uses the <code>*.tag</code> file, and these contain the tag name, HTML, Javascript, and CSS styling. That means the general structure of a component might look something like this…</p>

<p>​
Like many modern JS libraries, these components can be plugged into other parts of your website depending on your needs. RiotJS worked well for us because it interacted cleanly with the rest of our stack, namely Django, and it rarely got in the way.
​</p>
<p>That's not to say RiotJS doesn't have its own problems. My biggest contention with Riot was its lack of quality documentation and its small user-base. This lead to issues where finding answers on StackOverflow might yield a result that was similar to the problem I was having, but added a layer of abstraction that I couldn't always wrap my mind around. I know "Read the docs" is a common refrain among programmers, and for good reason. Documentation gives programmers a path to follow before they turn to StackOverflow, and a reference to pull from if they do get stuck. But…
​</p>
<p>I, and I'm sure many other programmers, have run into a library they decided to use where the documentation was less than stellar. RiotJS falls squarely into this category, especially as Riot upgrades from v3 to v4 and leaves the <a href="https://v3.riotjs.now.sh/api/">v3 documentation</a> buried deep in their <a href="https://riot.js.org/documentation/">v4 documentation</a>. This was among our primary reasons for moving away from RiotJS and finding a different Javascript Library.
​</p>
<div style="text-align: center; display: flex; justify-content: center;">
    <img style="height: 200px;" src="/assets/images/vuejslogo.png">
</div>
<h2>To Vue, React, or Elsewhere?</h2>
<p>​
From the time I got into web development in 2016 to today, Javascript libraries have encapsulated the front-end ecosystem. I learned front-end development with jQuery, but even as I was learning, it was considered dated (although certainly not irrelevant) technology. Modern front-end libraries like React, Angular, Vue, and the list goes on, have overtaken jQuery and vanilla JS as the primary means by which front-end developers interact with their codebase.
​</p>
<p>After working in RiotJS, I wanted to try something new, so like any front-end developer, I went to YouTube for tutorials and advice on which library to use. React seemed to be the exciting ecosystem that everyone wanted a piece of, so I gave it a try and absolutely loved it. Sure, the syntax was confusing. There was a lot more "syntactic sugar" where React was taking my code and abstracting away some of the headaches that come along with writing vanilla JS, and JSX definitely took some getting used to compared with HTML, CSS, and jQuery, but ultimately the ability to make a snappy Single Page Application was really cool to me. The page updated so quickly and React's ability to change out components without changing the entire page was a total gamechanger. Having said that, changing a front-end library for a personal project is a very different challenge than making that shift for an entire development team.​</p>
<p>So our team took the time to find the pros and cons of some front-end libraries: Riot4, React, Vue, and Angular were the libraries we opted to check out first.
​</p>
<p>We felt Riot4 was similar to VueJS, but it had a number of downsides we couldn't look past:</p>
<ol>
<li>The documentation from v3 was too bare-bones and we felt v4 docs were similarly sparse.</li>
<li>The small user base lead to little discussion on StackOverflow, Reddit, YouTube tutorials, etc.</li>
<li>Riot4 didn't have the ChromeTools that VueJS and React have, which make editing in the browser a lot simpler.</li>
<li>Riot isn’t an industry-leading front-end library, and we felt switching to VueJS would make us more desirable and competitive.</li>
</ol>
<p>I really liked React, but it's got its own hurdles. It's a fairly large departure from RiotJS which our team was all used to, which ultimately boils down to longer development time when learning new technologies and our goal was implementing something that had the benefits of Riot's lightweight design, but had more clearly defined advantageous technologies of routing, DOM Manipulation, and most importantly clear documentation and StackOverflow reach. Ultimately, <em>excuse the pun</em>, we ended up shifting our Vue.
​</p>
<h2>A Pleasant Vue</h2>
<p>​
The library we looked at that we felt would have the lowest switching cost was Vue. The syntax was very similar to Riot's <code>*.tag</code> structure, in that <code>.Vue</code> files hold HTML inside of a template tag, then a script tag, followed by a CSS style tag.</p>
<pre><code>&#x3C;template>
    &#x3C;div id="HelloWorld">
        Hello World!
    &#x3C;/div>
&#x3C;/template>
​
&#x3C;script>
    export default {
        name: 'Hello World'
    }
&#x3C;/script>
​
&#x3C;style scoped>
    #HelloWorld {
        color: blue;
    }
&#x3C;/style>
</code></pre>
<p>​
Almost identical to a Riot tag in its components. We've got our tag-name replaced with a template tag and then our script and style tags down below. The way we access this component is a <code>&#x3C;div id='app'>&#x3C;/div></code> in our <code>index.html</code> and then through our router we can choose which component is displayed at a given time. Even on first glance, it's relatively easy to understand what's going on here, especially coming from RiotJS. Contrast this with a React Hello World element and we'll end up diving rapidly into JSX with a mix of Javascript and HTML.
​</p>
<pre><code>ReactDOM.render(
    &#x3C;h1>Hello, world!&#x3C;/h1>,
    document.getElementById('root')
);
</code></pre>
<p>​</p>
<h2>Wrapping Up</h2>
<p>​
While VueJS has had its difficulties (learning state manipulation via mutations, knowing when to break services/stores into modules, mapping State/Mutations, among other things) the resources we've been able to find have generally gotten our team unstuck in a relatively short time. I've found some great YouTube tutorial resources that I'll link below, <a href="https://vuejs.org/v2/api/">excellent documentation on the VueJS site</a>, and the number of StackOverflow entries has been like finding an oasis in the desert that was RiotJS.
​</p>
<p>If you haven't tried VueJS yet, I can only recommend you give it a shot. The community around it is very helpful, it's fun to work in, and it's a powerful piece of technology to add to your tool belt. Last but not least, for those without experience in front-end libraries, it's familiar. If you have experience in HTML, CSS, and JS you'll be able to wrap your mind around the VueJS concepts and push them to their limit without the headaches that Vanilla JS can sometimes cause.
​
​</p>
<h2>Some Resources I've found very helpful</h2>
<p>​
The Net Ninja - <a href="https://www.youtube.com/watch?v=5LYrN_cAJoA&#x26;list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa">VueJS Tutorial Series (General VueJS tutorials)</a>
​<br>
Traversy Media - <a href="https://youtu.be/8z2qRln9tnc">Apex Legends Tracker App (NPM + VueJS + API)</a>
​<br>
Traversy Media - <a href="https://youtu.be/5lVQgZzLMHc">State Management Tutorial (Vuex Crash Course)</a>
​<br>
Jeffrey Biles - <a href="https://www.youtube.com/watch?v=vaCrzaeC-RE&#x26;list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn">Building a Screencasting App from Scratch Tutorial</a>
​<br>
<a href="https://vue.land/">VueJS Discord Server (Vue Land)</a>
​<br>
<a href="https://www.reddit.com/r/vuejs/">VueJS Subreddit</a>
​</p>
<p>Thanks for reading! Hopefully this article pushes you to check out VueJS. I hope to revisit this topic in the future when I've got some more experience and can give a more in-depth breakdown of what I like and dislike about VueJS.
​</p>

A New Vue: A Look Back at RiotJS and Looking forward to VueJS