web前端开发最佳实践

为什么要进行网站开发？ (Why web development?)

Web development is a field that is not going anywhere anytime soon. The web is moving quickly, and there are regular improvements to the devices many people use daily.

Web开发是一个领域，不会很快出现。 网络发展Swift，许多人每天使用的设备都有定期的改进。

Cloud-based applications have allowed us to do the heavy lifting in the cloud and use the browser as a bridge to connect powerful backend servers with less capable and powerful frontends.

基于云的应用程序使我们能够在云中进行繁重的工作，并使用浏览器作为桥接功能强大的后端服务器与功能较弱且功能强大的前端的桥梁。

Now is the best time to learn web development if you're looking to learn something.

如果您想学习一些东西，现在是学习Web开发的最佳时机。

Not only does web development open a plethora of opportunities for you as an individual, but you'll also be able to code and deploy complete projects end-to-end which can be consumed by almost everyone on the planet.

Web开发不仅为您个人提供了很多机会，而且您还可以端对端编码和部署完整的项目，几乎地球上的每个人都可以使用。

Since most people have access to a browser, every person is just a single URL away from the web-app you've coded. If you compare this with a desktop application or a hardware-based product, you'll see that it's just not that scalable compared to the web.

由于大多数人都可以使用浏览器，因此每个人都只是您编写的Web应用程序之外的一个URL。 如果将其与桌面应用程序或基于硬件的产品进行比较，您会发现它与Web相比没有那么可扩展性。

Now that we've established the fact that the web is the best way to go right now, let's see how to learn web development in the best way possible.

既然我们已经确定了网络是目前最好的方式，那么让我们看看如何以最佳方式学习网络开发。

网络庞大-从小做起，并保持小规模 (The web is vast – start small and keep it small)

You have probably seen a large number of JavaScript frameworks and libraries out there like React, Angular, Vue, Ember, jQuery, XYZ, and so on.

您可能已经看到了许多JavaScript框架和库，例如React，Angular，Vue，Ember，jQuery，XYZ等。

Some very common questions I get as a YouTuber posting web development content are the following:

作为YouTuber发布网络开发内容时，我会遇到一些非常常见的问题：

Should I learn X?

我应该学习X吗？

Is X better than Y?

X比Y好吗？

What is the scope of Z?

Z的范围是多少？

Always remember two things about technology, especially about the web:

永远记住关于技术的两件事，尤其是关于网络的两件事：

1. Your tech stack almost always never matters. If you're good enough with your language/framework, you'll win every time.您的技术栈几乎永远都没有关系。 如果您对语言/框架的掌握足够好，那么每次都会赢。
2. You never need to learn everything. Never. You can be a jack of all trades, but make sure you're a master of one.您无需学习所有内容。 决不。 您可以成为所有行业的杰作，但请确保您是其中的一位大师。

To summarize this section, you need to think very small when you start. It is super easy to get carried away with that hot framework that was just released. Just don't try to race ahead by dropping old tech and adapting new tech without doing proper research.

总结本节，开始时您需要考虑的很小 。 被刚刚发布的热门框架带走的超级容易。 只是不要在没有进行适当研究的情况下，通过放弃旧技术并改编新技术来争取竞争。

从HTML和CSS开始 (Start with HTML and CSS)

I cannot stress this enough. It pains me to see a ton of people asking me questions about their React projects when the answer lies in basic HTML or CSS.

我不能太强调这一点。 当答案取决于基本HTML或CSS时，看到无数人向我询问有关他们的React项目的问题让我感到很痛苦。

JavaScript was only a browser scripting language in the beginning. And although it's much more than that now, it doesn't change the fact that on the web it complements HTML and CSS.

JavaScript最初只是浏览器脚本语言。 尽管它的功能远不止现在，但它并没有改变它在网络上补充HTML和CSS的事实。

With advancements in web standards, there's so much you can achieve in CSS alone. For a lot of things, JavaScript is not even required.

随着Web标准的发展，仅CSS就能实现很多功能。 在很多事情上，甚至不需要JavaScript。

Animations? You got it. Drag-and-drop? HTML can handle that. Layouts? Checkout the Flexbox or Grid CSS APIs!

动画？ 你说对了。 拖放？ HTML可以处理。 布局？ 检出Flexbox或Grid CSS API！

There are so many things you can learn about HTML and CSS! Don't just rush into JavaScript because all the cool kids on the block are into Angular. Those libraries and frameworks are not going anywhere. Take your time.

关于HTML和CSS，您可以学到很多东西！ 不要只是急于使用JavaScript，因为所有的好孩子都在Angular中。 这些库和框架什么都没有用。 慢慢来 。

宽还是深？ (Go wide or go deep?)

There are two approaches when you learn web development – go wide or go deep.

学习Web开发时，有两种方法–扩展或深入。

Going wide means you start learning many things together. This might work for some people, but not for others. You might overwhelm yourself with tutorials, exercises, videos, and blogs, then eventually give up.

扩展意味着您开始一起学习很多东西。 这可能对某些人有效，但对其他人则无效。 您可能会因教程，练习，视频和博客不知所措，然后最终放弃。

Going deep means you start learning one thing and try to learn as much as you can about it. This has its own set of pros and cons. You might get bored, or give up because you don't see results.

深入学习意味着您开始学习一件事，并尝试学习尽可能多的东西。 这有其优点和缺点。 您可能会感到无聊，或者因为看不到结果而放弃。

So what's the solution? The answer is, surprisingly, doing neither. Choose a small tech stack like HTML/CSS/JavaScript, and go moderately deep into all three. This has a couple of advantages:

那么解决方案是什么？ 令人惊讶的是，答案是两者都不做。 选择一个小型技术堆栈(例如HTML / CSS / JavaScript)，然后对这三个方面进行适当的研究。 这有两个优点：

1. You won't get bored, as all three have relatively different purposes and you write them differently.您不会感到无聊，因为这三个目标都有相对不同的用途，并且您以不同的方式编写它们。
2. You can blend all three, and create and see something meaningful quickly without months of effort (which is usually required by other languages like C/C++). This will keep you motivated to keep going.您可以将所有这三种方法融合在一起，无需花费数月的努力即可快速创建并查看有意义的内容(通常是C / C ++等其他语言所要求的)。 这将使您有动力继续前进。

不要选择React，Angular或Vue (Do not choose React, or Angular, or Vue)

When people start to work with JavaScript, there's an urge to pick up a library like React, a UI system like Material UI, and dive into building awesome stuff.

当人们开始使用JavaScript时，就有一种愿望去选择像React这样的库，像Material UI这样的UI系统，并投入到构建很棒的东西中。

Unfortunately, this leads to nothing more than shooting yourself in the foot. You can never, ever, create intermediate to advanced projects with these frameworks if you don't understand the basics of JavaScript. And applying JavaScript takes some time.

不幸的是，这无非是导致自己脚下射击。 如果您不了解JavaScript的基础知识，就永远无法使用这些框架创建中级到高级项目。 应用JavaScript需要一些时间。

Notice that I used the word applying, and not learning, in the previous sentence. There's a huge difference between learning something and applying something you've learned.

请注意，我在上一句话中使用了应用而不是学习这个词。 学习和应用所学知识之间存在巨大差异。

Create a small but working project with HTML/CSS/JavaScript. And when you do, create one more, and then, create another project.

使用HTML / CSS / JavaScript创建一个小型但有效的项目。 然后，再创建一个，然后再创建另一个项目。

Every step step along the way, keep increasing the complexity of the project, and the expectations too, until your codebase becomes unmanageable. At that point you've arrived at what I like to call the boundary of superior learning.

在此过程的每个步骤中，请不断增加项目的复杂性和期望，直到您的代码库变得无法管理为止。 在这一点上，您已经达到了我所称的高级学习的界限 。

You see, frameworks exist to offload repetitive work from you. They do not exist so that you ignore what's really going on under the hood and rely on the fact that it's all magic.

您会看到，存在一些框架可以减轻您的重复工作。 它们不存在，因此您可以忽略引擎盖下真正发生的事情，而是依靠一切都是魔术的事实。

The first time you choose a framework like React or Angular for your projects should be when you're confident that you can create that project without React or Angular.

当您确信可以在没有React或Angular的情况下创建该项目时，应该第一次为项目选择诸如React或Angular的框架。

一手交易大师 (Master of one trade)

Now, when you're good with HTML/CSS/JavaScript, it's time to move on to industry standards. The truth is, no matter how good of a JavaScript developer you may be, you will often need to work with modern frameworks like React – and just with your JavaScript knowledge, you cannot immediately master it.

现在，当您精通HTML / CSS / JavaScript时，就该转向行业标准了。 事实是，无论您有多出色JavaScript开发人员，您都经常需要使用React之类的现代框架进行工作–仅凭您JavaScript知识，您就无法立即掌握它。

It'll take time to learn and understand the terminology, the concepts, and how that framework works under the hood. So take up a framework and master it.

学习和理解术语，概念以及该框架如何在幕后工作需要时间。 因此，采用一个框架并掌握它。

How, you might ask? The answer is simple – it's up to you. Create a simple project in all the major frameworks (Angular, Vue, and React), and see which one vibes the most with you. Choose one and don't look back

您可能会问如何？ 答案很简单–由您决定。 在所有主要框架(Angular，Vue和React)中创建一个简单的项目，然后看看哪个最适合您。 选择一个，不要回头

Then create all your projects with that framework. Aim to do something which you don't already know how to do. This is the best way to push yourself out of your comfort zone and learn new things.

然后使用该框架创建所有项目。 旨在做一些您不知道该怎么做的事情。 这是使自己脱离舒适区并学习新事物的最佳方法。

但是不要忘记其他人 (But don't forget about the others)

It's equally important to keep an eye on other candidates too. This not only involves direct competitors of your "favorite" framework out there, but also some worthy web development tools too.

同样要注意其他候选人。 这不仅涉及您的“最喜欢”框架的直接竞争者，还涉及一些有价值的Web开发工具。

You don't have to "master" these other tools because a lot of times they just require a one-time setup with regular maintenance. But it's always nice to keep them on your checklist of skills.

您不必“掌握”这些其他工具，因为很多时候它们只需要一次性安装并定期维护。 但是让他们保持在技能清单上总是很好的。

This could include several things - like unit testing with Jest, end-to-end testing with Cypress, Webpack, Babel, or Parcel, a bit of devops, Linux shell scripting, server deployments, and so on.

这可能包括几件事-例如使用Jest进行单元测试，使用Cypress，Webpack，Babel或Parcel进行端到端测试，一些开发，Linux Shell脚本，服务器部署等等。

You can always learn the basics of these skills quickly as they've been around for a long time, so they have a lot of helpful material available with them.

您已经有很长一段时间了，所以您始终可以很快学习这些技能的基础知识，因此它们具有许多有用的材料。

继续 (Move on)

Trust me, it's a funny feeling – but once you develop many projects and write a lot of code with your favorite stack, you start feeling like you can do anything. At this point, you can get a job and just keep doing the same thing - that's completely fine. Or, you can level up your skills through the roof and move on.

相信我，这是一种有趣的感觉-但是一旦您开发了许多项目并使用自己喜欢的堆栈编写了许多代码，您就会开始觉得自己可以做任何事情。 此时，您可以找到一份工作，然后继续做同一件事-完全可以。 或者，您可以通过屋顶提高技能并继续前进。

The web. Is. Vast.

网络。 是的。 广大。

So if you're done with HTML/CSS/JavaScript/React/Angular/Vue, move on to servers. Learn about server deployment, NGiNX, HAProxy, load balancing, setting up cloud infrastructure, firewalls, and autoscaling.

因此，如果您对HTML / CSS / JavaScript / React / Angular / Vue有所了解，请继续使用服务器。 了解有关服务器部署，NGiNX，HAProxy，负载平衡，设置云基础架构，防火墙和自动缩放的信息。

Done with that too? Move on to WebAssembly, the language for the next iteration of the web.

也做到了吗？ 转到WebAssembly，这是Web的下一次迭代的语言。

Finished learning WebAssembly? Err, I don't know then. Maybe move on to other programming areas, or cooking? :)

学习完WebAssembly吗？ 嗯，那我不知道。 也许转到其他编程领域，或者做饭？ :)

结论 (Conclusion)

In today's world, it's so easy for you to not repeat the mistakes I made while learning web development myself. Because all those mistakes are now public for everyone to read!

在当今世界中，您很容易就不必重复自己在学习Web开发时所犯的错误。 因为所有这些错误现在都公开给大家阅读！

You have so many resources available to you, and I've been working on one for web developers to learn! Here's my YouTube channel where I teach you how to program awesome things. And here's the codedamn platform – the actual platform which allows you to become a great developer by blending a bunch of videos, articles, and exercises.

您有这么多可用的资源，我一直在努力为Web开发人员学习！ 这是我的YouTube频道 ，我教你如何编写很棒的东西。 这是该死的平台 -实际的平台，通过混合大量视频，文章和练习，您可以成为出色的开发人员。

Let me know what you think about this article, and web development in general, through my twitter and Instagram handles. I would love to connect with you out there!

通过我的twitter和Instagram句柄，让我知道您对本文以及整个Web开发的看法。 我很想与您联系！

Peace!

和平！

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

web前端开发最佳实践