Future of Web Development and What You Should Learn in 2020

Future of Web Development and What You Should Learn in 2020

In this web development tutorial, we will look at just about every technology in web development. You'll see the future of Web Development and What You should learn to become a web developer in 2020

Web Development in 2020: An Overview

The main goal of the video is to give you familiarity with some of the more mainstream web development tools available to web developers.

"I'm not trying to overwhelm you with technologies. These are just options that you have... There are a lot of technologies out there. When you hear something like Nuxt or Gatsby I want you to know what it is. And then you can choose if you want to learn it or not."

Brad starts by encouraging people to first ask what they want to do. Do you want to work on a product company? Or work as a consultant? Do you want to freelance? Or build a product of your own?

A lot of his advice about what to learn boils down to what your goals are. And he frames a lot of his tool suggestions in this light.

As a starting point, he recommends learning what he calls "The Necessities."


This slide and all subsequent slides come from Brad's video. The underlines indicate the tools he personally recommends.

One counter-intuitive thing he points out: you don't need a fancy computer for web development. "It's not like game engine development or something like that, so you can use a mid-range laptop or desktop, or even in some cases a lower-end computer."

He uses MacOS, Windows 10, and Linux for cloud servers and even for some of his media servers.

He is a big fan of VS Code for his editor, and uses Chrome and its built-in DevTools for browser-based debugging. This said, he thinks Firefox has come a long way as well and is a viable alternative.

He recommends starting with standard HTML and CSS, and learning newer CSS tools like Flexbox and Grid.

He says learning responsive web design in 2020 should be a given. "Every serious project that you create should look good and be completely usable on all devices."

Instead of relying on CSS frameworks like Bootstrap, he recommends you practice building your own modular CSS components that you can then re-use throughout your project.

This said, he says you may encounter these as you work on projects for different employers.


Bootstrap is still by far the most popular CSS framework, but there are a few other widely-used ones, too.

He specifically mentions Tailwind, which I hadn't heard of before. Tailwind is a bit different from other CSS frameworks. It's focused on "utility classes" that you can combine to accomplish what you want with the design.

It's no surprise that Brad recommends getting really good with JavaScript.


Some of the fundamentals you should get good with. Brad has videos for most of these topics, and most of this is covered in the freeCodeCamp curriculum as well.

Learning at a Practical Pace

Throughout Brad's guide, he repeatedly emphasizes the need for practicality.

Yes - there are best practices for everything. But in many cases, there is a good enough way that will help you move faster and get more done, without getting mired in tools.

One of the most interesting (and perhaps heretical) things he says:

"There's no need to learn DevOps and AWS and all these things for a small site. A hosting site or a managed hosting site like InMotion or Hostgator is fine. It allows you to do [deployment] right in the browser. There's no need to overcomplicate things."

He argues that even in 2020, there's something to be said for using familiar tools.

For people new to web development, Brad recommends first getting to the point of being able to work as a basic front end web developer. This will allow you to build websites for local businesses as a freelancer.

"Hipsters will say you definitely need to use a front end framework. I don't think that is true. If you want to render templates on the server without using a front end framework, I think that's absolutely fine, but there are many many jobs that are looking for something like React or Vue."

But once you're ready to tackle front end frameworks, he recommends you explore React, Vue, and Angular. "Try all three and figure out which one you like the best."

He also gives a nod to Svelte - which isn't a framework, but rather a compiler. But he says it's probably too new to try and pick up in 2020.

And he discusses the increasing popularity of Server Side Rendering. File system-based routing means you don't have to create a complicated routing file. Instead, you can just put the files in the directory you want them to be in.

The two popular Server Side Rendering tools are Next.js (for React) and Nuxt.js (the Vue option).

Another emerging trend is Static Site Renders, which he says you don't need to learn but you should be aware of. For example, Gatsby sites are extremely fast and don't need a server.

Back End Development Tools

A slide from Brad's talk with the most popular frameworks for each language.

For server-side development, Brad prefers Node.js for its speed and because he can use the JavaScript on both front and back end.

For server side development frameworks, he recommends learning Express since it's the most popular and "it gives you a lot of freedom to build things how you want your own way."

He also uses Python for some projects, and recommends it as well.

"Python has two awesome frameworks. Django is a large, full featured framework, where as Flask is more minimalistic. It gives you what you need but you make the rest of the decisions. I honestly can't pick one of the two, I love them both and use them for different things."

And he's quick to come to the defense of PHP:

"A lot of people give crap to PHP and it's unfortunate because PHP can be a great language. It's practical and it's simple to deploy just about anywhere. PHP is great for freelancers that need to get stuff out quickly. If you're planning on working for a large company, PHP may not be the best choice, but if you're freelancing and building personal projects, PHP can be great choice. It's become cool to bash PHP. PHP was the first language I learned and I still really like it... If you look at Laravel code it's very elegant."

Brad also does a quick walkthrough of databases, and recommends perennial favorite PostgreSQL.

Other Tools That are Probably Here to Stay

GraphQL is an alternative to REST for APIs. There are several courses that cover GraphQL on both Brad's channel and on freeCodeCamp's channel. But he says, "GraphQL is not something that you have to learn these days, but it's big enough that I think it's here to stay. It's more than a trend."

Brad also talks about Content Management Systems (CMS's) and how they are evolving into new "headless" options where you just use them as a back end and code your own front end.

"CMS's are very handy for freelancers who have clients that want to be able to log in and create their blog posts and stuff like that. A lot of people bash WordPress, but there's a huge percentage of websites on the internet that are run by WordPress and it's still very popular."

For webservers he prefers NGINX to Apache because "it seems to be less complicated." We use NGINX extensively at freeCodeCamp and I am inclined to agree.

Brad also explains how virtualization works, and talks about how it can simplify more complex projects by standardizing the environment across multiple computers. But he cautions against trying to virtualize everything:

"Docker is really good for teams. What I don't like is when people say you should always use Docker. It's just preference. If you just want to run a local LAMP server, there's nothing wrong with that. Don't feel pressure to learn something like Docker."

And he adds, to emphasize something I personally cannot emphasize enough: "I know a lot of nerdy types just want to overcomplicate things and I hate that. Just because I'm listing all of this doesn't mean I'm pushing it on you."

He's also quick to point out that most big companies have dedicated DevOps teams (also called "Site Reliability Engineers") who can do a lot of this for you.

Nice To Have Skills You Can Learn as Specialties

If you want to test your hands at mobile app development, Brad strongly recommends the Flutter framework. It uses Dart, which is a more obscure language. He describes Dart as somewhere between Java and JavaScript, and says if you know either of those languages you should be able to pick it up.

His second choice for mobile app development is React Native, which is easy to pick up if you already know React.

Brad then does a great job of explaining what Progressive Web Apps are and some of the benefits of them. Here's the slide, but again, I strongly encourage you to watch his full video.

Then he touches on Electron, which allows you to build desktop applications using JavaScript. He was initially skeptical but says some of his favorite desktop apps - like VS Code and Discord - are now built using Electron.

He mentions the JAMstack (JavaScript, APIs, and Markup) and serverless architecture. These are more advanced topics, but he has some videos on this, too.

And then he gets to the big trends for 2020.

Machine Learning and Web Assembly

Just because everyone else is talking about machine learning doesn't mean you have to drop everything and learn it. That's how he prefaces this stage of his talk.

And yes, you can do machine learning in JavaScript, too.

"Python is the king for Machine Learning. But even with JavaScript you have TensorFlow.js, you have Brain.js to create neural networks and do some real cool stuff."

It's clear from the way he talks about Web Assembly that he's pretty excited about it.

"Web Assembly is still in its early stages but I think we're going to see more of it this year. Traditionally we use JavaScript on the web page to manipulate the DOM and run calculations. JavaScript has limitations in terms of speed. A language like C or C++ is much faster than JavaScript. So Web Assembly is an efficient, low-level byte code that can be executed by a browser and it's extremely fast. It can be generated by languages like C, C++, and Rust."

Rust is one of the languages you can use with WebAssembly (in addition to C and C++). It's significantly easier to learn and use than C and C++.

But it's important to note that WebAssembly doesn't excuse you from having to learn JavaScript.

"You can almost think of JavaScript as the boss, and it can tell Web Assembly what to do. So it allows us to use really fast low-level languages like C++ in our web apps, and this gives us a lot more capabilities - like next level video games and video editing tools right in the browser - things that are unthinkable with just JavaScript."

Video
  • Intro - 0:07
  • What Do You Want To Do? - 1:28
  • The Necessities - 2:38
  • HTML/CSS (Building Blocks) - 7:10
  • Responsive Web Design - 9:18
  • Reusable CSS Components - 10:50
  • CSS Frameworks - 12:26
  • Vanilla JavaScript - 13:52
  • Tools (Git, Dev Tools, etc) - 16:28
  • Basic Deployment - 20:45
  • Basic Frontend Dev - 23:15
  • Where To Now? - 24:12
  • Frontend Framework - 25:00
  • Svelte - 27:14
  • State Management - 28:32
  • SSR (Next & Nuxt) - 30:40
  • SSG (Gatsby & Gridsome) - 33:04
  • TypeScript - 35:05
  • Frontend Wizard - 37:06
  • Server Side Language - 37:42
  • Server Side Framework - 42:52
  • Database - 47:37
  • GraphQL - 52:08
  • CMS & Headless CMS - 53:41
  • Deployment & DevOps - 55:22
  • Full Stack Dev - 59:23
  • Mobile Development - 59:51
  • PWA - 1:01:43
  • Desktop Apps With Electron - 1:03:19
  • JAMstack - 1:04:24
  • Serverless Architecture - 1:06:10
  • API-First Design - 1:07:24
  • Machine Learning & AI - 1:08:12
  • Speech Recognition - 1:09:03
  • Web Assembly - 1:09:42
  • Advice & Thank You - 1:11:21

What is WebAssembly? Is WebAssembly Really the Death of JavaScript?

What is WebAssembly? Is WebAssembly Really the Death of JavaScript?

In this WebAssembly tutorial, you will look at what WebAssembly is, the future of JavaScript, Is WebAssembly Really the Death of JavaScript? Why WebAssembly matters and crucially what it means for JavaScript and the future of web development.

WebAssembly and the future of JavaScript

For more than 20 years JavaScript has been the only 'native' language of the web. That's all changed with the release of WebAssembly. This talk will look at what WebAssembly is, why it matters and crucially what it means for JavaScript and the future of web development. JavaScript brought interactivity to the web more than 20 years ago, and despite numerous challenges, it is still the only language supported by the browser. However, as those 20 years have passed we've moved from adding a little interactivity to largely static sites to creating complex JavaScript-heavy single page applications. Throughout this journey, the way we use JavaScript itself has also changed. Gone are the days of writing simple code snippets that are run directly in the browser. Nowadays we transpile, minify, tree-shake and more, treating the JavaScript virtual machine as a compilation target.

The problem is, JavaScript isn't a very good compilation target, because it simply wasn't designed to be one.

Born out of asm.js, a somewhat crazy concept dreamt up by Mozilla, WebAssembly was designed from the ground up as an efficient compilation target for the web. It promises smaller payloads, rapid parsing and validation, and consistent performance ... and it's ready to use, right now!

This talk will look at what's wrong with the way we are using JavaScript today and why we need WebAssembly. It will delve into the internals, giving a quick tour of the WebAssembly instruction set, memory and security model, before moving on to the more practical aspects of using it with Rust, C++, and JavaScript. Finally, we'll do some crystal-ball gazing and see what the future of this rapidly evolving technology might hold.

Rust & WebAssembly para JavaScripters

Rust & WebAssembly para JavaScripters

A lo largo de la charla descubriremos las características más destacables de Rust, sus similitudes y diferencias con JavaScript y veremos qué aporta Rust al futuro de la Web gracias a WebAssembly. Rust es un lenguaje tipado, rápido y seguro, que ha sido diseñado por Mozilla como lenguaje de sistemas, aunque en los últimos tiempos ha ganado mucha popularidad en el terreno del desarrollo Web gracias a WebAssembly, su amplio ecosistema y gran comunidad

Rust es un lenguaje tipado, rápido y seguro, que ha sido diseñado por Mozilla como lenguaje de sistemas, aunque en los últimos tiempos ha ganado mucha popularidad en el terreno del desarrollo Web gracias a WebAssembly, su amplio ecosistema y gran comunidad. A lo largo de la charla descubriremos las características más destacables de Rust, sus similitudes y diferencias con JavaScript y veremos qué aporta Rust al futuro de la Web gracias a WebAssembly.

How to Build Scalable APIs Using GraphQL and Serverless

How to Build Scalable APIs Using GraphQL and Serverless

In this GraphQL and Serverless tutorial, you'll learn how to build Scalable APIs Using GraphQL and Serverless. Exploring Serverless API, we will have a look at the more advanced features and standards around mutators and resolvers and then she will close by going all in, full Serverless and deploy a GraphQL server to a function in the cloud.

Current trends in software and backend architecture have been evolving towards a more loosely coupled, more granular design. Most of you have heard of micro-service based architectures; the latest development in the past couple of years has been the advent of Serverless which allows you to run applications in very cost effective ephemeral services.

This is why it is important to have a proper gateway for your API that is able to route all your requests to the designated endpoint. GraphQL stands out in that respect as being a mature open sourced standard started at Facebook. Simona will demonstrate how to set up a GraphQL server locally, then explore the Query language and schema definitions it provides which allows you essentially query your mesh of services from a single point of entry.

The beauty is that it will notify you early if any of your endpoints is misbehaving or the schemas are out of date by erring out. Another advantage is that it allows for your API documentation to be a real time process and it will give you what one may call an API playground where you can query and explore your API. After exploring Serverless API, Simona will have a look at the more advanced features and standards around mutators and resolvers and then she will close by going all in, full Serverless and deploy a GraphQL server to a function in the cloud.