by Clark Newell
January 10th 2019
TLDR: 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.
- 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.
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 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.
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).
- 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.
- 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.
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.