How I Choose My Tech Stack

Vue vs React

When I began looking into bringing a JavaScript framework to my AP Class I naturally gravitated to React. React, backed by Facebook, is the most popular JS framework. I decided to hop into Scott Tolinski's beginner React course from LevelUpTutorials. After going through some lessons....it just felt strange. I've always heard from reputable sources that the individual framework really isn't that import, that simply being introduced to frameworks was more important than the individual framework.

There's a million youtube videos, blogposts and tweets comparing React, Angular and Vue. This alone should tell you that it doesn't really matter which one you pick. Each has strong backing and is used by many reputable companies. That being said, React felt off to me so I decided to try Scott Tolinski's Vue course and loved it. Vue just felt easy to pick up. I decided if I really want to teach Vue I might as well build a large project in Vue and thus we have Vue as the framework of choice for this site. I'll do a seperate post at some point on the benefits of a framework but for now I'll leave it at this. Frameworks help scaffold your development and Vue components help break the project down into bite size bricks on which to build your house.

Vue Logo

"Frameworks help scaffold your development and Vue components help break the project down into bite size bricks on which to build your house"

Nuxt, The Framework for your Framework

Vue is designed for single page applications. Basically if you want to build out an application, Vue is amazing. Vue is not the best at designing a static site. For the record, neither is React. SEO and performance are notable weak-points in both frameworks because that's simply not what they were designed to do. Welcome to Nuxt. Nuxt (like its NextJS counterpart for React) are great for universal applications and static sites. Nuxt generates HTML for each of your routes. This greatly improves both performance and SEO as your site's static HTML files are more easily picked up on by Google etc.

Nuxt is also great in that you know longer have to think about your routes as that is automatically configured for you. Overall I really loved working with Nuxt as their documentation and opinionated structure made working with it a great developer experience. I should also note that I played around with Gridsome, and while Iiked it a lot Nuxt is more mature and thus has stronger support and a stronger community behind it which makes troubleshooting my novice questions easier.

Nuxt Logo

"Overall I really loved working with Nuxt as their documentation and opinionated structure made working with it a great developer experience"

Prismic: The Headless CMS

If you don't know what a headless CMS is, that's okay because before this project neither did I. A headless CMS, or Content-Management System, provides you a backend server to host your data. Picture Wix or Wordpress but without the front-end site. The beauty of a headless CMS is it allows us to store data as JSON on a server and make an API call from that server to our application. Here, I'm writing my blogs and resources on Prismic's site and making fetch calls to their server. This allows me to write dynamic, DRY code to fetch my blogs and resources page. Why code a bunch of different cards in HTML/CSS when I can build one and make an API call to dynamically generate dozens?

I can easily write out my blog posts and let my own styles and components render them on my page. This also let's me practice a little JS while I build my static site. I choose Prismic as my CMS because of their sponsorship of Syntax FM and their generous free tier.

"I choose Prismic as my CMS because of their sponsorship of Syntax FM and their generous free tier"

Wrapping Up

These last few points do not really warrant their own section so let's just play clean up. I am using SCSS for my CSS because I wanted mix-ins and I prefer their variables to CSS custom properties. I'm also using the amazing Animate-on-Scroll (AOS) library. It's lightweight and easy to use. This is how I achieve my animations on scroll as the name implies. The transitions between the pages are actually native to Vue if you were wondering (Another thing I love about Vue). This project has really helped me get more comfortable with Vue and I look forward to building some more projects in Vue before I incorporate it into my curriculum for 2020-2021.