This year I’m focusing my “predictions” on broader technology trends that I strongly recommend you focus on if you are a Javascript Developer for frontend, backend or fullstack. So here we go!

Typescript

If you are writing Javascript right now and you haven’t learned Typescript it’s exactly the right time (maybe even a little past time.) If you were waiting for a winner in the Typescript, Flow, JSDoc debate, the proof that Typescript has won is out there in plain view. The big open source projects are written in Typescript now, and from my experience the large commercial projects are already in it or moving to it. Angular is Typescript out of the box.

IMHO, the best way to get into Typescript is to take an existing Javascript project you are already familiar with, maybe a little side project you’ve been working on, or a proof of concept at work, and port it to Typescript. That will give you familiarity with the syntax and the tooling, without having to also solve novel code problems at the same time. This is how I do it on the Converting To Typescript series. We take some pretty simple Javascript code, and port it to Typescript step-by-step.

Most of my Blue Collar Coder videos will be Typescript in 2021, and I’m going to practice, practice, practice it all year long.

Seriously, y’all, if you take one thing away from reading this it’s this; learn Typescript. Jobs that list Typescript as a “nice to have” in 2021 are going to require it in 2022.

Video Version

If you’d rather watch this on video, you can do that too!

Micro-State Managers

Redux was already losing mindshare even before React hooks came along. Too much boilerplate. Redux Sagas ended up making code complex and hard to follow. Then in 2018 we got hooks and global state went from being the enemy to being a long lost friend. It would nice if the story ended there, but the reality is that useState and useContext while awesome, have efficiency issues in large React trees because everything from the Provider down needs to update on a change of the value.

This means that if you have state that is shared in different parts of the React tree then you’ll need some management solution for that. Revenge of the Redux then? Hardly. There are lots of new great micro-state manager options out there that can give you global state with nowhere near the Redux headaches. Some examples include Valtio, Jotai, Recoil, and Zustand (which also has the best landing page evaaahhh).

I’ve covered a bunch of these on my channel. And you should try it out in your own project or try one of my examples just to get a feel for how much easier these micro-state managers can be, and to give you some architectural ideas for the next time you have a need for global state management.

Bonus extra: XState is a really interesting alternative state management system based on state-machines. It’s really interesting if you have projects that have very specific UI states, or server states, it works there too. It’s also got a super sweet state visualizer that worth the price of entry all on its own.

GraphQL

GraphQL just turned five! Can you believe it? Now you could argue that GraphQL should have taken over by now. But five years into the “architectural style” of REST (it’s not a standard) we were still using XML as the data interchange format instead of JSON.

The GraphQL ecosystem had a great year in 2020 and it’s poised to have an even better one in 2021. Some hilights include the Hasura server that can put a GraphQL API on any RDMS with the touch of a button. The graphql/nexus library that came out this year that makes building in code much easier and outputs type bindings for Typescript (yet another reason to learn Typescript). And a GraphQL code generator that can create Typescript interfaces for severs you don’t own.

If you want to try out GraphQL yourself right now , you can pick an API from this list and just give it a whirl. Here is a fun weather API you can run queries on for free, no keys, no codes, just give it a try.

The Blue Collar Coder channel is going to have a full GraphQL tip-to-tail series starting early next year that will take you from learning about what GraphQL is an how it fits into everything, through making your first query, and all the way to building your own server and using advanced features like subscriptions.

Utility First CSS

I think there is a good debate to be had about whether the approach of a CSS libraries that have a class per selector makes a lot of sense, but one thing is for sure, the utility first Tailwind CSS library is insanely popular and here to stay.

To get started with Tailwind I recommend a video I just published on using Twin.Macro which is a very easy way of configuring a CRA (Create React Application) to use Tailwind efficiently. It will provide you with a great starting point to continue your exploration of this fascinating approach to styling and layout.

If you are looking for something similar to Tailwind, but that’s a little more React-centric, try Chakra-UI. To add margin to the top of a box in Chakra all you need to do is ... and it adds a nice margin to the top, so tweaking your layout is as simple as adding properties.

Ecmascript Modules

Ecmascript modules are getting a lot of play because folks hate node_modules and npm more broadly. I get it. The node_modules directory can be gynormous.

BTW, if you find your disk filling up from that run npx npkill in your home directory and it will find all the node_modules directories and optionally delete them.

Ecmascript modules are actually native to the browser and have been for a while. If you add type="module" to your script tag you can use import statements natively in the code to bring in Ecmascript modules. And the same thing works with Deno and also powers the popular Vite system to bootstrap Vue applications.

This may be something that we see more in development and less in production because there are efficiency concerns about the number of HTTP requests to import the code onto the page. But regardless, this is something you should try out at least once in 2021. Just give deno a go. It’s really easy and it leverage 99% of what you already are familiar with in node.

Micro-Frontends

There are two primary use cases I see for Micro-Frontends in 2021:

• Reuse between Micro-Site applications - If you’ve broken up your monolithic app into a bunch of micro-sites and you are frustrating yourself with npm sharing, Micro-Frontends are a great solution for that.
• Widgets - Micro-Frontends are basically widgets from the 2000s. If you want to have some packaged up code your customers can use to embed some UI on their page with your data, Micro-Frontends are the way to get that done.

The easiest way to make Micro-Frontends is using Module Federation, a new feature in Webpack 5. With Module Federation you can expose code (and its dependencies) from an application without removing it from the application, or creating any kind of wrapper code. You just expose it from one application then consume it in another using import statements. It’s as easy as that.

What’s even better is when the application exposing the components updates then any client of that code will immediately update as well. That means live code sharing across your site, or between you and your customers.

Zack Jackson and I have written a book, Practical Module Federation, that you can read and learn about how to use this new Webpack feature in your application. And the Blue Collar Coder channel has an entire playlist dedicated to Module Federation.

Web Performance

2020 was a huge year for e-Commerce, and it’s probably going to stay that way even as the quarantines (fingers crossed) lift. Anyone with e-Commerce experience knows that extra seconds means lower conversions, and lower conversions mean fewer sales. So getting the page to be faster, while still supporting the same feature set, is huge.

You can make yourself invaluable to future employers in the e-Commerce or content space by learning, at the very least, how to do bundle splitting and lazy loading as well as learning what performance vital measures you want to track.

WebAssembly

WebAssembly has gone from a joke idea (at least to me) into something very real world, particularly with the release of Microsoft’s Blazor framework that makes it easy to develop web applications in a Vue-like style using C#, but with the compiled output being WebAssembly code rather than Javascript. It’s an amazing framework that I’ve covered on the Blue Collar Coder channel.

But it’s not just Microsoft, it’s open source too. Now you can take your Typescript skills (yes, again, another reason to learn Typescript) and use them with AssemblyScript to build WebAssembly code using a familiar syntax. That used to be the kind of thing you could only do with Rust or Go, now it’s Typescript too!

If you are in the B2B space, in the kind of company that used to use Macromedia’s Flex, or one that uses ASP on the Microsoft stack, you’ll want to invest sometime in learning WebAssembly tools this year.

Unified tooling

The Node ecosystem is great, but because it’s grown up organically and that can be a hassle when we waste a bunch of time just getting all the build tools to work together. And so we are seeing the advent of projects like Rome and Deno that have all-in-one toolchains for compiling, running, linting and testing Javascript and Typescript code. Deno now even allows you to compile code into native executables.

If you are a backend developer I encourage you to, at the very least, check out Deno in 2021 just to see what’s up with Ecmascript modules and what it’s like to run without node_modules and compile to a native executable.

Monorepos

Love them or hate them, monorepos aren’t going anywhere soon, and that’s because the nature of the node ecosystem encourages the development and use of smaller packages that work in combination as opposed to monolithic applications. And monorepos eases the development of a set of related libraries.

Yarn workspaces made monorepos a lot easier, and now npm@7 supports them as well. Meaning that support for monorepos is baked into our package management tooling. You can layer lerna on top of that to add package versioning utilities on top of that.

If you are going to be coding in a professional setting you should invest some time in learning workspaces and making sure you know how to link libraries together so that you get live updating during development.

Bonus: Static Deployments

I stressed static deployments in my 2020 video and it’s just as important now to understand this architectural benefits of this old approach made new. Static deployment means pages that are served fast, and sites that don’t need server monitoring.

With the release of NextJS 9.3, and its subsequent releases, developing an application that deploys statically is easier than every. Now you can choose, page by page, which pages will be client side rendered, server side rendered or statically generated. They make it super easy.

I have a video on Blue Collar Coder that goes into using all three deployment models in NextJS. You could use that as a starting point to try out static, or you could take an existing Create React App or NextJS application and deploy it statically to gauge the performance and stability benefits.

Bonus bonus: Dark mode and a styling change

One prediction I know will come true in 2021 is the growth in popularity of dark mode. If you make a content site, in 2021 you are going to have to allow for dark mode if you haven’t already. Some frameworks (including Tailwind 2.0) now support dark mode. Check out this excellent article on automatic dark mode detection and investigate whether your UI toolkit of choice handles the dark mode switch automatically.

I also think there is a styling change coming. The “flat look” has had a good long run, but there is a decent chance of a coming style change with Neumorphism and Glassmorphism being top contenders.

It’s an exciting time to be frontend, backend TS/JS, or fullstack development! Who knows what 2021 will bring. But investing in your own skillset is never time ill-spent.