This video was made in collaboration with Chris Castiglione of OneMonth.com.
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.”
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.
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.
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.
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.
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 web servers 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.
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 that both his channel and freeCodeCamp’s YouTube channel have video tutorials on, too.
And then he gets to the big trends for 2020.
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.”
In closing he says, “The more you learn, the easier it is to learn more and to fit all of these technologies together. Try not to get overwhelmed. Take it one step at a time and do some research, and figure out what you want to do.”
#web-development #javascript #node-js #angular #reactjs