上帝公式_上帝级别的前端：第1部分（该系列的简介）

上帝公式

God level frontend is going to be a full package and a boon in disguise for you if you need to take your front end skills to the next level. This is the first part of the series. In this part, we will discuss the following things

摹 OD级前端将是一个完整的包和变相给你一个福音，如果你需要把你的前端技能，以一个新的水平。 这是本系列的第一部分。 在这一部分中，我们将讨论以下内容

• Prerequisites for the series
  系列先决条件
• For whom is this series?
  这个系列适合谁？
• The motivation behind it.
  其背后的动机。
• Content in brief
  内容简介
• How to get the most out of it.
  如何充分利用它。

“If opportunity doesn’t knock, build a door” — Milton berle

“如果机会没有敲门，那就盖一扇门” —米尔顿·伯尔

Having said this, let’s take off on this journey together.

话虽如此，让我们一起开始这一旅程。

先决条件 (Prerequisites)

If you want to follow this series and don’t want to feel lost during the process we would recommend you to at least know the basics of HTML, CSS, and javascript. Also, knowing how these three things work together will be a great plus.

如果您想遵循本系列并且不想在过程中迷路，我们建议您至少了解HTML，CSS和javascript的基础知识。 此外，了解这三件事如何协同工作将是一大优势。

These are the only prerequisites needed for the course. We would recommend you to brush up on these before diving deeper into the forthcoming topics in order to take your frontend skills to the next level.

这些是本课程所需的唯一先决条件。 我们建议您在深入研究即将到来的主题之前，仔细阅读这些内容，以使您的前端技能更上一层楼。

谁应该遵循这个系列？ (Who should follow this series?)

There is a lot to frontend than just HTML, CSS, and Javascript as will be rightly proved by us in the forthcoming stories in this series.

我们将在本系列的后续故事中正确地证明，不仅HTML，CSS和Javascript还有很多前端。

This series is for everyone from someone who has just started learning frontend to someone who has been working with frontend for a long time and is looking for a good resource to learn all the advance and current technologies in the frontend world. After learning the various things covered in this series you will be able to increase your development speed and make scalable and agile frontend applications.

本系列适用于从刚开始学习前端的人们到已经与前端长期合作并且正在寻找一个好的资源来学习前端世界中所有先进技术的人们。 在学习了本系列中介绍的各种内容之后，您将能够提高开发速度并制作可伸缩且敏捷的前端应用程序。

本系列背后的动机 (The motivation behind this series)

When we started out as frontend developers we struggled a lot to find some good resources on most of the technologies we will be covering in this series. As a result of this sometimes we reached a standstill. Through this series, we are trying to give back to the community that helped us grow so that developers like us never reach a dead-end in their path of learning.

当我们开始作为前端开发人员时，我们在为本系列将要介绍的大多数技术中找到一些好的资源而付出了很多努力。 因此，有时我们陷入停滞。 通过本系列文章，我们正在努力回馈帮助我们成长的社区，以使像我们这样的开发人员永远不会在学习道路上走到尽头。

Also, most of the time young developers are not using some of the great tools out there as they are not aware of them. These tools can help users boost their productivity, make scalable applications, and beautiful websites.

而且，大多数时候，年轻的开发人员没有使用一些出色的工具，因为他们没有意识到。 这些工具可以帮助用户提高生产力，制作可扩展的应用程序以及漂亮的网站。

系列内容 (Content of the series)

In this series, we will be covering all the tools for the automation of various web-related tasks. You will also learn to create mobile apps, desktop apps, progressive web apps as well as your own “create react app” from scratch (sounds pretty cool, right?) with tools like linters, bundlers, testing tools, react based frameworks, and much more than that. Let’s dive into a bit more detailed content overview. Here we will just mention the topics and why this topic is on the list.

在本系列中，我们将介绍用于自动化各种与Web相关的任务的所有工具。 您还将学习使用短绒棉布，捆扎机，测试工具，基于React的框架等工具从头开始创建移动应用程序，桌面应用程序，渐进式Web应用程序以及您自己的“ create react app”(听起来很酷，对吗？)。不仅如此。 让我们深入了解更详细的内容概述。 在这里，我们将只提及主题以及该主题为何出现在列表中。

Version control system

版本控制系统

Under this topic, we will cover all the basic and essential things about git and GitHub that you must know to work with a team or manage your own projects efficiently using git and GitHub.

在此主题下，我们将介绍与git和GitHub一起使用团队或有效使用git和GitHub有效管理自己的项目所必须了解的有关git和GitHub的所有基本知识。

We chose git and GitHub over the other options out there because they are the most popular version control tool and platform respectively. We decided to include a version control system as part of this series because it is considered to be the best and the most professional way to manage your work and in this series, we plan to follow the best practices only.

我们选择git和GitHub而不是其他选项，因为它们分别是最受欢迎的版本控制工具和平台。 我们决定将版本控制系统作为本系列的一部分，因为它被认为是管理工作的最佳和最专业的方式，并且在本系列中，我们计划仅遵循最佳实践。

CSS Architecture and preprocessors:

CSS体系结构和预处理器：

CSS architecture is how you write the CSS for your website and link it to your HTML components. Having a well-defined CSS architecture is essential to keep your project manageable in the future when it contains many stylesheets especially if you are working in a group.

CSS体系结构是您为网站编写CSS并将其链接到HTML组件的方式。 当项目包含许多样式表时，拥有定义良好CSS体系结构对于将来使项目可管理至关重要，尤其是在团队中工作时。

We will be covering BEM(Block Element Modifier) Methodology in this series and then you can later use any other standard methodology or you can even define one for your project. BEM like methodology helps you to write standard CSS code. Not following a proper convention in a project is a big no-no and you do not want to pass on bad code to your colleagues.

我们将在本系列中介绍BEM(块元素修饰符)方法论，然后您可以稍后使用任何其他标准方法论，甚至可以为您的项目定义一个。 类似于BEM的方法可帮助您编写标准CSS代码。 在项目中不遵循适当的约定是一个很大的禁忌，并且您不想将错误的代码传递给您的同事。

CSS pre-processors will provide you with many features like mixins, loops, variables, nested styling, and other such features that don’t come with plain CSS. It will help you to write and edit your code faster as compared to plain CSS but it requires compiling of the SCSS or LESS file to CSS file which obviously can be automated using task runners and module bundlers covered later in this series. Trust me, once you start working with SASS or LESS you will never switch back to CSS ever again.

CSS预处理器将为您提供许多功能，例如混入，循环，变量，嵌套样式以及普通CSS所没有的其他此类功能。 与纯CSS相比，它可以帮助您更快地编写和编辑代码，但是它需要将SCSS或LESS文件编译为CSS文件，显然可以使用本系列后面介绍的任务运行程序和模块捆绑程序将其自动化。 相信我，一旦您开始使用SASS或LESS，您将永远不会再切换回CSS。

Package Managers:

包管理器：

In this section, we will cover NPM and YARN which are both node package managers. Package managers are used to import external dependencies. This is the point where you enter the world of NodeJS and in my opinion, NodeJS is the most awesome gift to the developers’ community and in fact, the thing which makes it so awesome is the community itself. One of the cool things about development is that you do not always have to write all your code from scratch. There are some things that you do not need to understand and code yourself as someone else has already done it for everyone else to directly use in their projects. So, why reinvent the wheel? Instead, you can take advantage of the code written by the community and you will need a package manager for this, therefore we have NPM and YARN to the rescue. We will learn a lot more about the awesomeness of the two later in the series. Moreover, we will also cover how to add your own package to the NPM package collection and it will be accessible to the world.

在本节中，我们将介绍NPM和YARN，它们都是节点包管理器。 包管理器用于导入外部依赖项。 这是您进入NodeJS的起点，我认为NodeJS是对开发者社区的最棒的礼物，实际上，使它如此棒的是社区本身。 关于开发的很酷的事情之一是，您不必总是从头开始编写所有代码。 有些事情不需要别人理解和编写代码，因为别人已经做到了，其他人可以直接在他们的项目中使用。 那么，为什么要重新发明轮子呢？ 相反，您可以利用社区编写的代码，并且为此需要一个包管理器，因此我们可以使用NPM和YARN。 在本系列的后面部分，我们将学到更多有关两者的出色知识。 此外，我们还将介绍如何将您自己的软件包添加到NPM软件包集合中，并且全世界都可以使用。

Build tools:

构建工具：

Here comes another super amazing thing, “Build tools”. If you have ever worked with ReactJS and used the create-react-app tool then I hope you know how awesome create-react-app is and it uses the build tools like Webpack, ESlint, etc. Basically build tools will make our lives easier by automating almost everything like SASS compilation, CSS concatenation, minification, detecting errors in JS, and countless other things (Don’t get intimidated by these big words, we’ll cover them all). As a beginner, no will expect you to know all these things but if you know them, your growth will go through the roof, then the clouds, and then it might be roaming somewhere in the outer universe.

另一个超级神奇的东西是“构建工具”。 如果您曾经使用过ReactJS并使用过create-react-app工具，那么我希望您知道create-react-app多么出色，并且它使用Webpack，ESlint等构建工具。基本上，构建工具将使我们的生活更轻松通过自动化几乎所有的过程，例如SASS编译，CSS串联，最小化，检测JS中的错误以及无数其他事情(不要被这些大字眼吓到，我们将覆盖所有内容)。 作为一个初学者，没有人会期望您知道所有这些事情，但是如果您知道它们，那么您的成长将先经历屋顶，然后是云层，然后可能在外太空漫游。

Web components:

Web组件：

In simple words, web components are custom HTML tags but actually they are much more than that. Basically, you will be able to create custom elements and you can define their characteristics as well as their functionality which results in a more modular code that can be used in several different contexts.

简而言之，Web组件是自定义HTML标记，但实际上它们远不止这些。 基本上，您将能够创建自定义元素，并且可以定义它们的特征及其功能，从而获得可以在多种不同上下文中使用的模块化代码。

Typescript:

打字稿：

I don’t know what to say about this one! This is one of the most important things to learn in development, It will make your code easier to read, understand, debug, and will make your code less error-prone as compared to plain javascript code. You might argue, we learn from the errors that we make. In my defense, I would say you can’t afford a silly error in production. Don’t worry typescript has your back, it will let you learn even more as well as help you code with fewer errors. Typescript eventually trans-compiles to Javascript. Over the past year, typescript has gained immense popularity and is one of the most in-demand skills. I hope this gets you excited to learn this one.

我不知道该说些什么！ 这是在开发中要学习的最重要的事情之一，与普通的javascript代码相比，它将使您的代码更易于阅读，理解，调试，并使您的代码不易出错。 您可能会说，我们从所犯的错误中学习。 为辩护，我会说您无法承受生产中的愚蠢错误。 不用担心打字稿会给您带来麻烦，它可以让您学习更多，并帮助您减少错误的编写代码。 Typescript最终会反编译为Javascript。 在过去的一年中，打字稿获得了极大的欢迎，并且是最受欢迎的一项技能。 我希望这会让您兴奋地学习这一内容。

Modern ways of writing javascript

编写javascript的现代方法

This will be an introduction to JSX and you will learn a lot more about it in ReactJS. The code which is written in JSX eventually gets converted to JS.

这将是JSX的简介，您将在ReactJS中学习到更多有关它的信息。 用JSX编写的代码最终将转换为JS。

React JS

React JS

Here comes the bad boy. Wait, wait! All the Angular and VueJS fans, there is a reason we are covering ReactJS in this series, which is, it will form the basis for a lot more things like React-Native, GatsbyJS, NextJS, etc. Hopefully, you know the importance of ReactJS already as you will also be able to make Android and IOS applications using ReactJS based React Native. Hence, you can become a mobile app developer too without all the hassles of learning a new language like Java, Swift, Dart, or Kotlin.

坏男孩来了。 等等！ 所有Angular和VueJS爱好者，都有一个在本系列中介绍ReactJS的原因，那就是它将构成更多类似React-Native，GatsbyJS，NextJS等内容的基础。希望您知道您已经可以使用ReactJS，也可以使用基于ReactJS的React Native来制作Android和IOS应用程序。 因此，您也可以成为移动应用程序开发人员，而无需学习诸如Java，Swift，Dart或Kotlin之类的新语言的所有麻烦。

Desktop app development:

桌面应用开发：

By far you will have a good knowledge of NodeJS, here we will cover some more core concepts of NodeJS and then dive right into Desktop application development using ElectronJS.

到目前为止，您将对NodeJS有所了解，这里我们将介绍NodeJS的更多核心概念，然后直接使用ElectronJS进行桌面应用程序开发。

FYI: Visual studio code was made using ElectronJS.

仅供参考：Visual Studio代码是使用ElectronJS编写的。

Other topics to be covered are:

其他主题包括：

• GatsbyJS
  盖茨比
• NextJS
  NextJS
• React Native
  React本机
• Progressive Web Applications (PWA)
  渐进式Web应用程序(PWA)
• GraphQL
  GraphQL

如何从本系列中获得最大收益？ (How to get the most out of this series?)

We would recommend you to stay tuned and follow us closely as we will be regularly posting new content. In order to get the most out of this series, do not just read through it but also code along with us. Try to regularly modify the code given by us and introduce your own unique changes. Make mistakes and learn from them. If you ever get stuck anywhere “The Developers’ Home” is there for you. You can reach out to us on thedevelopershomepublication@gmail.com . You can contact us even if you want to share some interesting code snippets or projects made by you. We are also always open to constructive criticism. Also, let us know if there is any other topic you would like us to cover. We hope you have as much fun learning with us as we are having making this for you.

我们建议您保持关注并密切关注我们，因为我们将定期发布新内容。 为了从本系列中获得最大收益，不仅要通读它，还要与我们一起编码。 尝试定期修改我们提供的代码，并介绍您自己的独特更改。 犯错误并向他们学习。 如果您遇到任何困难，“开发者之家”就在那里。 您可以通过thedevelopershomepublication@gmail.com与我们联系。 即使您想分享一些有趣的代码段或您所做的项目，也可以与我们联系。 我们也总是对建设性的批评持开放态度。 另外，请告知我们是否还有其他主题。 希望您能和我们一起学习，并从中获得很多乐趣。

So at the end of this series, you will be God level front end developer who can create Web, Android, IOS, and desktop applications.

因此，在本系列文章的最后，您将成为可以创建Web，Android，IOS和桌面应用程序的上帝级别的前端开发人员。

Subscribe to the series

订阅该系列

Next Article

下一篇

翻译自: https://medium.com/the-developers-home/god-level-front-end-part-1-introduction-to-the-series-99bb6d1cbd56

上帝公式