Vue vs React

During the course of my web development immersive program at Galvanize, we were given drills where we had to refactor Vanilla JavaScript (JS) apps with the framework of our choice. You would not believe what a commotion this caused within the cohort. We demanded multiple breakout introductions to each of the most popular frameworks, i.e. the “Big Three” e.g. Angular, React and Vue.js. (For the intents of this article, when referring to Angular, I mean the TypeScript based Angular 2+, not AngularJS.) We requested a panel of instructors to give us a side by side comparison and plead their case for their favorites. It seemed like such an emotional, life or death decision for everyone, which at the time seemed like overkill. But, perhaps not.

• The baby geniuses who chose something obscure and challenging on purpose like Ember got jobs before the cohort was even finished.
• Those who chose Angular got jobs, not surprisingly, with older, well established corporations.
• Most of those who chose React got jobs with young companies and startups.
• Most of us who chose to learn Vue.js don’t yet have jobs. Ouch.

Or course, choosing to learn Vue.js does not have anything to do with hireability per se. Being a total newb to JavaScript just one year ago, what it said about me is that I chose the most accessible framework for me to understand at the time. Using Vue.js as my foray into the world of JavaScript frameworks, I passed all of the refactoring drills on time.

During the comparison panels and discussions, I had heard that there were currently far more jobs available in Angular and React. I had also heard that Angular would be a great way to become more familiar with TypeScript and that learning React would be a great way to get to know JavaScript better overall.

When it was time to produce a “capstone” project, however, I took a giant leap, and in typical fashion, bit off more than I could chew. I wanted to be more hireable, more knowledgeable about JavaScript, challenge myself, and impress the crowd by building an app with React Native (without having first learned React LOL!). With only 2 days left before capstone presentations, I could not get my application to work in React Native as desired. I had to quickly abandon that idea and refactor my app with Vue.js in order to meet the presentation deadline. After capstones, I only had a month to wrap everything up so there wasn’t time to backtrack into React, or Angular for that matter. Vue.js became the framework of choice for a required group app project as well as my final project.

Side note: At their most basic, JS frameworks are collections of JavaScript code libraries (see below) that provide developers with pre-written JS code to use for routine programming features and tasks — literally a framework to build websites or web applications around. ~Scott Morris

My Experience with Vue.js

What made Vue.js accessible right off the bat to a newb dev like me was the the separation of concerns within each component:

• At the top of every component, you wrap all of your HTML with a <template> element. Within this element, you can write your HTML as you normally would in an HTML file.
• Following the HTML is your <script> tag, which contains all of your client-side script (JavaScript). Within this tag, you can write all of your script as you normally would in a JavaScript file.
• Following the script, is the <style> tag, which contains all of your styling or (Cascading Style Sheets (CSS), scoped to that component) and written with the same syntax that you would in a CSS file.

Why I switched to React

A few months after graduation, I began to seriously look for development work and found what I had already known to be true. The vast majority of job postings I was finding for front-end and full-stack developer were seeking experience with React.

• I got an interview and coding challenge from a company that I was really interested in. The coding challenge was to build a simple app in React with some particular features. The challenge probably would have taken an experienced person an hour to complete. While I *did* complete the challenge to their specifications, I did have to ask for a couple days extra time and is likely why I ultimately was not hired.
• I also had an opportunity for an internship that I hesitated on and lost due a lack of confidence in my understanding of React at the time.
• I knew I had to remedy this immediately!
• The first thing I decided to do was complete my own personal app in React (using a static site generator called GatsbyJS, more about that in future blog posts).
• Secondly, I decided to undertake the Udemy React 16 course taught by Maximilian Schwarzmüller. This course was 34 hours of instruction, but I completed every single code-along. The modules moved very quickly and covered A LOT of ground, so I had to stop and start a lot, and do a fair amount of debugging throughout, which added up to about 100 hours.

Side note: when taking online tutorials, just know that technology, i.e. updates to JavaScript frameworks and libraries change so quickly that chances are things will not always work exactly as the instructor originally presents. It is par for the course that you will be forced to do some individual thinking and debugging (e.g. research and implement the latest updates, just like a real developer would), if you are determined to move forward in the course with a fully working app and mirrored functionality. Occasionally the instructors record and add addendums or add side notes, but not always. Case in point, React Hooks are the latest hotness and I just noticed when writing this blog, that an addition to this Udemy course on hooks has been added…can’t wait to dive into it….

My Experience with React (so far)

As stated, I think I probably spent at least 100 hours on the React 16 course, and we covered a lot of ground including the following concepts, tools, and libraries.

• Best practices for React application architecture, e.g. components vs. containers, higher-order components, and utility files
• React Router (a library for creating navigation)
• Redux (a library for managing state)
• Redux Dev Tools (an addition to browser dev tools)
• Redux-Thunk (a library for a specific style of redux state management)
• Redux-Saga (a library for another specific style of redux state management)
• Jest (a companion testing library to React)
• Next.js (another React-based static-site generation tool somewhat similar to GatsbyJS)

I plan to cover the above subsets within future postings as a way to solidify my own knowledge of each topic (in addition to writing code that uses them of course).

As mentioned earlier, with React, everything is JavaScript, but, there are a few catches and therein lies the challenge.

• With React, you have to learn and use JSX instead of HTML. JSX is described as a declarative XML-like syntax that works within JavaScript.
• Within React, the trend is to scope CSS within a component using “CSS-in-JS Solutions”, e.g. styled-components, and this involves a somewhat different syntax than normal CSS. The workaround to this is to create CSS files per usual syntax, which are then imported into components and referenced there. Note: if you really love CSS-in-JS then there are libraries to support this for Vue.js.

Similarities

• All frameworks come with a different variation of component architecture, and the required syntax to get it all hooked up and performing as one connected app. For a newb this is part of the learning process and unavoidable.
• All frameworks have state management and special required syntax. (State management in my own words is all of the possible states of presentation or render that an app can be in according to any given combination of user input and the device being used). Even after creating several, albeit basic, apps in Vue.js, it was not until I started digging deep into the React course that I have begun to get it.
• Both Vue.js and React are surrounded by numerous supporting libraries for things like routing (creating navigation), state management, styling and API consumption.

In Summary

For now, I am going to continue my deep dive into React because that is still the hot framework that most of the up-and-coming companies here on the Silicon Slopes, and the US in general, seem to be choosing. You occasionally see a job here and there for Vue.js and I’ll certainly consider those as well. On an interesting note, the popularity of Vue.js vs. React does seem to be geographical with Vue.js gaining popularity in South America and Asia. I heard on an episode of SyntaxFM that the world’s largest online retailer, Alibaba is switching to Vue.js, which was confirmed in the Vue.js documentation referenced below.

I believe learning more than one framework can only solidify your understanding of front-end development further. Anytime you compare and contrast more than one way to achieve a result, you deepen your knowledge of programming. With that being said, in order to be competitive, it does seem one needs to make a choice, and become a subject matter expert. With that said, I look forward to diving deeper into many subsets of React in upcoming blog posts on this Web Dev and React journey.