What has my attention in 2019?
Tags: react, graphql, aws, redux
Published: 2019-08-05 15:46:25

First off, thanks for taking the time! If you're interested in Next.js and the JAMStack in general, I've got a weekly newsletter, where I share the best bits of what I've been learning recently on the topic. I even dive into some other stuff like what I'm reading and things on the horizon. It's totally free for those signing up now, so if you're interested you can sign up at [michaels.blog](https://michaels.blog)

I mentor a few React developers and often get asked where people should focus their attention while studying to gain the most relevance in today's job market.

This blog post is a rundown where I'm focusing my programming attention, a little explanation as to why, and some useful resources for you to get started with these technologies. If you're not familiar with the modern JavaScript ecosystem and want to get on the fast track now, pay close attention to the following.

1. [React JS (NextJS, Gatsby)](#react)
2. [GraphQL / Apollo](#graphql)
3. [Amazon Web Services (Lambda)](#lambda)
4. [TDD](#tdd)
5. [Redux](#redux)

## React

A deep understanding of React is an essential building block for nearly all modern web developers. I won't spend much time here, I'm just going to assume that if you're a web developer or want to become one, you already understand that you need to know React like the back of your hand.

When I was starting, this wasn't a given. The boot camp curriculums often struggle to keep up with the industry trends. I was taught both Angular and React when I was attending Galvanize. For me, the writing was already on the wall when it came to the Angular (that was 2016-2017). Today, I'm comfortable recommending React as the only frontend library/framework you will need in your toolbelt to be relevant in the current market. You're better off knowing React intimately than you would be splitting your time between learning multiple frontend frameworks.

React@16.8 brought us some powerful new API's, that should change the way you create React applications. Gone are the days of classes and lifecycles. Now, we can design genuinely composable interfaces using functional components that allow us to derive our UI directly from the state of the application in a much more flexible and extendible way than ever before.

### Next JS

Next is a React framework that gives you serverside rendering for free. Serverside rendering allows the DOM to be fully hydrated on page load, meaning that the code is much more crawlable and SEO friendly than your typical Create-React-App (CRA) application. SSR applications are ranked substantially higher in the search engine indexes because it is much easier for the search engines to glean the type and quality of information that the site is disseminating.

NextJS abstracts a substantial amount of the complexity involved in configuring a serverside rendered application. As if this wasn't reason enough, NextJS has added lots of performant features that prove incredibly useful when developing React apps. The latest version of NextJS now supports TypeScript out of the box, without any additional configuration. Just name your files with a `.ts` or `.tsx` and you're off and running with TypeScript.

### Gatsby

Gatsby is another React Framework, but Gatsby's specialty is static websites. The JavaScript / React community has rallied around Gatsby and the JAM Stack to grow its plugin library to over 1200 packages. Properly developed Gatsby sites are speedy and remain highly available when network connectivity is interrupted. Gatsby relies on GraphQL to query its API, which has been so quickly and widely adopted.

### React Resources

- <a href="https://reactjs.org/docs/hooks-overview.html" target="_blank">React Hooks</a>
- <a href="https://nextjs.org/learn/basics/getting-started" target="_blank">Learn NextJS</a>
- <a href="https://github.com/zeit/next.js/tree/canary/examples" target="_blank">NextJS Examples</a>
- <a href="https://www.gatsbyjs.org/tutorial/" target="_blank">Gatsby Tutorial</a>
- <a href="https://frontendmasters.com/courses/gatsby/" target="_blank">Gatsby Intro</a> (Must be a FEM Member)

## GraphQL

GraphQL is the most exciting advancement in backend development that I've seen innovated during my career as a software developer. It rewrote the book on how modern backends should be architected. It allows our clients to eloquently describe the data that they require to operate, which is a problem that has never been really solved until now. Being able to get all our data from a single endpoint, totally changes how we can think about organizing our data. It also allows for incremental adoption, so it's not an all or nothing buy-in, again contributing to its rapid adoption.

### GraphQL Resources

- <a href="https://www.howtographql.com/" target="_blank">Learn GraphQL</a>
- <a href="https://onegraph.io" target="_blank">OneGraph</a>
- <a href="https://developer.github.com/v4/" target="_blank">Github API v4</a>

## Lambda

We're now in the era of serverless computing. Serving millions of customers for a fraction of what it used to cost means businesses that have not already moved to this model definitely will over the next five to ten years. That includes industries like banking that haven't had an infrastructure overhaul in 20+ years. Monolithic backends are becoming incrementally antiquated. The financial benefits of running a serverless architecture are causing technology giants to rewrite their entire APIs in what seems like rapid succession. AWS Lambda and API Gateway are the core of modern serverless computing technology.

The AWS Cloud Practitioner Certification is an excellent place to start with AWS. I only mention AWS because of its market share. If you have a reason to be on another provider, by all means, learn Google or Azure instead.

One approach is to rely on our colleagues to build fantastic developer tooling so that you never have to see the inside of the AWS Admin Panel. Perhaps a better one is understanding that you should have at least a good familiarity with the cloud.

### AWS Lambda Resources

- <a href="https://aws.amazon.com/api-gateway/resources/" target="_blank">API Gateway Resources</a>
- <a href="https://www.aws.training/LearningLibrary?&amp;search=lambda&amp;tab=view_all" target="_blank">AWS Training</a>
- <a href="https://serverless-stack.com/#table-of-contents" target="_blank">Serverless Framework</a>

## TDD

If you are practicing agile development in the React ecosystem, that probably means you'll likely be using Jest, React Testing Library, and/or React Storybook. Most React shops will expect juniors to have extensive experience with at least one or two of them. Unit testing is something you should have a deep understanding of, this is often overlooked by boot camps.

### TDD Resources

[Jest](https://jestjs.io/docs/en/getting-started)
[Storybook](https://storybook.js.org)
[React Testing Library](https://github.com/testing-library/react-testing-library)
[5 Questions Every Unit Test Must Answer](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d)

## Redux

Wait, but I thought Hooks meant we didn't need Redux Anymore? Not quite. Local state management has indeed improved by leaps and bounds with the release of Hooks in React v16.8. There are far fewer use cases that require Redux; however, many complex applications at scale still need the reliability of a deterministic UI. Familiarity with these technologies will be a pivotal asset to potential employers. It will be one of the things that set you apart as more mid-level or senior in your proficiency.

### Redux Resources

[Dan Abramov's Egghead Course](https://egghead.io/courses/getting-started-with-redux)