web前端编码工具_2020年的Web开发：您应该学习哪些编码工具

web前端编码工具

Today one of my favorite teachers, Brad Traversy, published an overview of what he recommends you learn to become a web developer in 2020.

今天，我最喜欢的一位老师Brad Traversy发表了他对您推荐的2020年学习网络开发人员的概述。

Brad cuts through a lot of the hype you hear on social media. His advice is practical and realistic. And I agree with him on pretty much everything he recommends you learn.

布拉德(Brad)消除了您在社交媒体上听到的许多炒作。 他的建议是切实可行的。 而且我几乎同意他建议他学习的所有内容。

The main thing Brad emphasizes - and that I always emphasize - is don't feel daunted or let yourself get overwhelmed.

布拉德强调的主要内容-我一直强调-不要感到畏缩或让自己不知所措。

Remember: freeCodeCamp's curriculum covers most of these tools, and it has helped more than 40,000 people get jobs as developers. When in doubt, just focus on that.

请记住： freeCodeCamp的课程涵盖了大多数这些工具，它已帮助40,000多人获得了作为开发人员的工作。 如有疑问，请专注于此。

I've summarized Brad's main insights below for your convenience. This said, I encourage you to watch his full video, which I've embedded below. He adds a lot of detail way beyond what these notes convey. It's a 73-minute watch.

为了方便起见，我在下面总结了Brad的主要见解。 这就是说，我鼓励您观看他的完整视频，我将其嵌入下面。 除了这些注释所传达的内容之外，他还添加了许多细节方法。 这是一个73分钟的手表。

2020年Web开发：概述 (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.

该视频的主要目的是使您熟悉一些可供Web开发人员使用的更主流的Web开发工具。

"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."

“我并不是想让技术让您不知所措。这些只是您的选择...那里有很多技术。当您听到像Nuxt或Gatsby之类的东西时，我想让您知道它是什么。然后您可以选择是否要学习。”

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."

他指出了一件与直觉相反的事情：您不需要花哨的计算机来进行Web开发。 “这不像游戏引擎开发之类的东西，因此您可以使用中型笔记本电脑或台式机，甚至在某些情况下还可以使用低端计算机。”

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

他将MacOS，Windows 10和Linux用于云服务器，甚至用于某些媒体服务器。

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.

他非常喜欢VS Code的编辑器，并使用Chrome及其内置的DevTools进行基于浏览器的调试。 话虽如此，他认为Firefox也取得了长足的进步，并且是可行的替代方案。

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

他建议从标准HTML和CSS开始，并学习更新CSS工具，例如Flexbox和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."

他说，应该在2020年学习响应式网页设计。 “您创建的每个严肃的项目都应该看起来不错，并且可以在所有设备上完全使用。”

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.

建议您不要依赖Bootstrap这样CSS框架，而建议您练习构建自己的模块化CSS组件，然后在整个项目中重复使用这些组件。

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.

他特别提到了Tailwind，这是我以前从未听说过的。 Tailwind与其他CSS框架略有不同。 它着重于“实用程序类”，您可以将其组合以完成设计所需的工作。

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

布拉德(Brad)建议使用JavaScript真的很不错，这并不奇怪。

踏实学习 (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."

“无需在小型站点上学习DevOps和AWS以及所有这些东西。托管站点或托管托管站点(如InMotion或Hostgator)就可以了。它可以让您直接在浏览器中进行[部署]。无需事情太复杂了。”

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

他认为，即使在2020年，使用熟悉的工具也有话要说。

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.

对于不熟悉Web开发的人们，Brad建议首先要能够成为基本的前端Web开发人员。 这将使您以自由职业者的身份为本地企业建立网站。

"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."

“赶时髦的人会说，您肯定需要使用前端框架。我认为那不是真的。如果您想在服务器上渲染模板而不使用前端框架，我认为那很好，但是很多寻找类似React或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."

但是一旦您准备好应对前端框架，他建议您探索React，Vue和Angular。 “尝试所有三个，找出最喜欢的一个。”

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.

他还向Svelte致意-这不是框架，而是编译器。 但他说，现在尝试在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).

两种流行的服务器端渲染工具是Next.js(用于React)和Nuxt.js(Vue选项)。

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.

另一个新兴趋势是“静态网站渲染”，他说您不需要学习，但您应该意识到。 例如，盖茨比(Gatsby)网站速度非常快，不需要服务器。

后端开发工具 (Back End Development Tools)

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

对于服务器端开发，Brad更喜欢Node.js，因为它可以提高速度，并且可以在前端和后端使用JavaScript。

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."

对于服务器端开发框架，他建议学习Express，因为它是最流行的，并且“它使您可以自由地以自己的方式构建事物”。

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

他还在某些项目中使用Python，并推荐它。

"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."

“ Python有两个很棒的框架。Django是一个大型的，功能齐全的框架，Flask更加简约。它提供了您所需的内容，但您可以做出其余的决定。老实说，我不能选择这两者之一，我都爱他们，并将它们用于不同的事物。”

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

而且他很快就来捍卫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."

“很多人都讨厌PHP，这很不幸，因为PHP可以是一门很棒的语言。它很实用，并且可以在任何地方部署，它很简单。PHP非常适合需要快速出手的自由职业者。如果您打算在一家大公司工作，PHP可能不是最佳选择，但是如果您要自由职业和构建个人项目，PHP可能是个不错的选择。抨击PHP变得很酷。PHP是我学到的第一门语言，我仍然非常喜欢它...如果您查看Laravel代码，它非常优雅。”

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

Brad还快速浏览了数据库，并推荐了常年喜欢的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."

GraphQL是REST for API的替代方法。 在Brad的频道和freeCodeCamp的频道上都有涵盖GraphQL的几门课程。 但是他说：“现在，您不必学习GraphQL了，但是它足够大，我认为它会持续存在。这不仅仅是一种趋势。”

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.

Brad还讨论了内容管理系统(CMS)，以及它们如何演变成新的“无头”选项，您可以将它们用作后端并为自己的前端编写代码。

"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."

“对于那些希望能够登录并创建自己的博客文章之类的客户的自由职业者来说，CMS非常方便。很多人抨击WordPress，但是互联网上有很大一部分网站是由WordPress经营的而且仍然很受欢迎。”

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.

对于Web服务器，他更喜欢NGINX而不是Apache，因为“它似乎不那么复杂”。 我们在freeCodeCamp上广泛使用NGINX，我倾向于同意。

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:

Brad还解释了虚拟化的工作原理，并讨论了虚拟化如何通过跨多台计算机标准化环境来简化更复杂的项目。 但是他警告不要尝试虚拟化所有内容：

"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."

“ Docker确实对团队非常有用。我不喜欢别人说您应该始终使用Docker。这只是优先选择。如果您只想运行本地LAMP服务器，那没有什么错。不要感到压力。学习类似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.

他还很快指出，大多数大公司都有专门的DevOps团队(也称为“站点可靠性工程师”)，他们可以为您做很多事情。

很高兴拥有可以学到的专业技能 (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.

如果您想测试移动应用程序的开发，Brad强烈建议使用Flutter框架。 它使用Dart，这是一种比较晦涩的语言。 他将Dart描述为介于Java和JavaScript之间的某个地方，并说如果您知道这两种语言中的任何一种，都应该可以使用它。

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

他在移动应用程序开发中的第二个选择是React Native，如果您已经知道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.

然后，Brad出色地解释了什么是渐进式Web应用程序以及它们的一些优点。 这是幻灯片，但我再次鼓励您观看他的完整视频。

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.

然后，他介绍了Electron，它使您可以使用JavaScript构建桌面应用程序。 他最初表示怀疑，但表示他最喜欢的一些桌面应用程序(例如VS Code和Discord)现在使用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.

他提到了JAMstack(JavaScript，API和标记)和无服务器架构。 这些是他频道和freeCodeCamp的YouTube频道上都有的更高级的主题，还提供了视频教程。

And then he gets to the big trends for 2020.

然后他进入了2020年的大趋势。

机器学习和Web组装 (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.

是的，您也可以使用JavaScript进行机器学习。

"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."

“ Python是机器学习的王者。但是即使使用JavaScript，您也可以使用TensorFlow.js，但是您可以使用Brain.js来创建神经网络并做一些非常酷的事情。”

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

从他谈论Web Assembly的方式可以明显看出，他对此感到非常兴奋。

"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."

“ Web Assembly仍处于早期阶段，但我认为我们今年会看到更多。传统上，我们在网页上使用JavaScript来操纵DOM并运行计算。JavaScript在速度方面有局限性。一种语言例如C或C ++比JavaScript快得多。因此，Web汇编是一种高效的低级字节代码，可以由浏览器执行，并且速度非常快。它可以由C，C ++和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++.

Rust是WebAssembly可以使用的语言之一(除了C和C ++)。 它比C和C ++更容易学习和使用。

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

但是需要特别注意的是，WebAssembly不会让您不必学习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."

“您几乎可以将JavaScript视为老板，它可以告诉Web Assembly该怎么做。因此，它使我们能够在我们的Web应用程序中使用真正快速的低级语言，例如C ++，这为我们提供了更多的功能-例如浏览器中提供了下一代视频游戏和视频编辑工具-仅仅使用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."

最后他说：“学到的越多，学到的越多，将所有这些技术融合在一起就越容易。不要被淹没。一次走一步，做一些研究，弄清楚你会做什么想要做。”

Again, I want to thank Brad Traversy for putting together this comprehensive video.

再次感谢Brad Traversy整理了这段综合视频。

People ask me all the time "what should I learn if I want to become a web developer?" And my answer is "just use freeCodeCamp as your core curriculum, and branch out into other learning resources as you go."

人们总是问我“如果我想成为一名Web开发人员，我应该学什么？” 我的回答是“只要将freeCodeCamp用作您的核心课程 ，并随身携带其他学习资源即可。”

And I'm happy to say that Brad's Traversy Media YouTube channel is one of those additional resources that I recommend most highly.

我很高兴地说， Brad的Traversy Media YouTube频道是我最推荐的其他资源之一。

翻译自: https://www.freecodecamp.org/news/web-development-2020/

web前端编码工具