前端前端开发工程师

by Yangshun Tay

阳顺泰

我们庞大的工程师团队会使用此前端开发指南 (Our large team of engineers use this front end development guide)

Front end development has never been so complex and exciting as it is today. New tools, libraries, frameworks, and plugins emerge every other day. There is so much to learn.

前端开发从未像现在这样如此复杂和令人兴奋。 每隔一天就会出现新的工具，库，框架和插件。 有很多东西要学。

Fortunately our web team at Grab has been keeping up with the latest best practices, and has incorporated the modern JavaScript ecosystem in our web apps.

幸运的是，我们Grab的Web团队一直紧跟最新的最佳实践，并将现代JavaScript生态系统纳入了我们的Web应用程序。

The result of this is that our new hires or back end engineers, who are not necessarily well-acquainted with the modern JavaScript ecosystem, may feel overwhelmed by the barrage of new things that they have to learn just to complete their feature or bug fix in a web app.

这样的结果是，我们的新员工或后端工程师不一定熟悉现代JavaScript生态系统，他们可能会为大量新事物感到不知所措，他们必须学习新知识以完成其功能或修正错误。网络应用。

It’s imperative that they are guided to embrace this evolution of the front end, learn to navigate the ecosystem with ease, and get productive in shipping code to our users as fast as possible. We have come up with a study guide to introduce why we do what we do.

必须引导他们接受前端的这种演变，学会轻松地导航生态系统，并尽快将代码交付给我们的用户，以提高生产力。 我们提供了一份学习指南，介绍了我们为什么要做我们的工作。

This study guide is inspired by “A Study Plan to Cure JavaScript Fatigue” and is mildly opinionated in the sense that we recommend certain libraries/frameworks to learn for each aspect of front end development, based on what is currently deemed most suitable at Grab.

本学习指南的灵感来自“ 治愈JavaScript疲劳的学习计划 ”，在某种意义上，我们建议您根据当前最适合Grab的需求，为前端开发的各个方面推荐某些库/框架以学习前端开发的各个方面。

We explain why a certain library is chosen and provide links to learning resources to enable the reader to pick it up on their own. Alternative choices that may be better for other use cases are provided as well for reference and further self-exploration.

我们解释了为什么选择某个图书馆，并提供了指向学习资源的链接，以使读者可以自己选择它。 还提供了可能更适合其他用例的替代选择，以供参考和进一步的自我探索。

If you are familiar with front end development and have been consistently keeping up with the latest developments, this guide will probably not be that useful to you. It is targeted at newcomers to front end.

如果您熟悉前端开发并一直紧跟最新发展，那么本指南可能对您没有太大帮助。 它针对的是新手到前端。

If your company is exploring a modern JavaScript stack as well, you may find this study guide useful to your company too! Feel free to adapt it to your needs. We will update this study guide periodically, according to our latest work and choices.

如果您的公司也在探索现代JavaScript堆栈，那么您可能会发现本学习指南也对您的公司有用！ 随时根据您的需求进行调整。 根据我们的最新工作和选择，我们将定期更新本学习指南。

Note that we’ve published this study guide on GitHub as well, and we’ll make future updates to it there.

请注意，我们也在GitHub上发布了本学习指南，并将在此进行后续更新。

grab/front-end-guidefront-end-guide - ? Study guide and introduction to the modern front end stack.github.com

抢/前端指南 前端指南-？ 学习指南和现代前端stack.g ithub.com的介绍

Preparing for Front End technical interviews? Check out this handbook that contains answers to the famous Front End Job Interview questions.

准备进行前端技术面试？ 查阅本手册 ，其中包含著名的前端工作面试问题的答案。

yangshun/front-end-interview-handbookfront-end-interview-handbook - ? Almost complete answers to "Front-end Job Interview Questions"github.com

yangshun /前端采访手册 前端采访手册-？ ithub.com 对“前端面试问题”的几乎完整答案

Pre-requisites

先决条件

• Good understanding of core programming concepts.对核心编程概念有很好的了解。
• Comfortable with basic command line actions and familiarity with source code version control systems such as Git.熟悉基本的命令行操作，并熟悉Git等源代码版本控制系统。
• Experience in web development. Have built server-side rendered web apps using frameworks like Ruby on Rails, Django, Express, etc.网站开发经验。 使用诸如Ruby on Rails，Django，Express等框架构建了服务器端渲染的Web应用程序。
• Understanding of how the web works. Familiarity with web protocols and conventions like HTTP and RESTful APIs.了解网络的工作原理。 熟悉Web协议和约定，例如HTTP和RESTful API。

我们将在本文中介绍一些内容： (Some things we’ll cover in this article:)

• Single-page Apps (SPAs)单页应用程序(SPA)
• New-age JavaScript新时代JavaScript
• User Interface用户界面
• State Management国家管理
• Coding with Style风格编码
• Testing测试中
• Linting JavaScript整理JavaScript
• Linting CSS整理CSS
• Types种类
• Build System建立系统
• Package Management包装管理
• Continuous Integration持续集成
• Hosting代管
• Deployment部署方式

Feel free to skip some of these topics if you already have prior experience with them.

如果您已有相关主题，请随时跳过其中一些主题。

单页应用程序(SPA) (Single-page Apps (SPAs))

Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response for their action.

如今，Web开发人员将他们构建的产品称为Web应用程序，而不是网站。 虽然这两个术语之间没有严格的区别，但是Web应用程序往往具有高度的交互性和动态性，允许用户执行操作并收到对其操作的响应。

Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML for the new page. This is called server-side rendering.

传统上，浏览器从服务器接收HTML并将其呈现。 当用户导航到另一个URL时，需要刷新整页，并且服务器将为新页面发送新HTML。 这称为服务器端渲染。

However in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.

但是，在现代SPA中，改为使用客户端呈现。 浏览器从服务器加载初始页面，以及整个应用程序所需的脚本(框架，库，应用程序代码)和样式表。 当用户导航到其他页面时，不会触发页面刷新。 页面的URL通过HTML5 History API更新。 浏览器通过对服务器的AJAX请求检索新页面所需的新数据(通常为JSON格式)。 然后，SPA通过JavaScript动态更新页面，该数据已经在初始页面加载中下载了。 此模型类似于本地移动应用程序的工作方式。

The benefits:

好处：

• The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.该应用程序的响应速度更快，并且由于整页刷新而导致用户在页面导航之间看不到闪烁。
• Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.向服务器发出较少的HTTP请求，因为不必为每次页面加载再次下载相同的资产。
• Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.客户端和服务器之间的关注点清晰分离； 您可以轻松地为不同平台(例如，移动设备，聊天机器人，智能手表)构建新客户端，而无需修改服务器代码。 您也可以在客户端和服务器上分别修改技术堆栈，只要不违反API合同即可。

The downsides:

缺点：

• Heavier initial page load due to loading of framework, app code, and assets required for multiple pages.由于加载了多个页面所需的框架，应用程序代码和资产，因此初始页面加载量较大。
• There’s an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.在您的服务器上还有一个额外的步骤要做，就是将其配置为将所有请求路由到单个入口点，并允许客户端路由从那里接管。
• SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the SEO of your app.SPA依靠JavaScript来呈现内容，但并非所有搜索引擎在抓取过程中都执行JavaScript，并且它们可能会在您的页面上看到空白内容。 这无意中损害了您应用的SEO。

While traditional server-side rendered apps are still a viable option, a clear client-server separation scales better for larger engineering teams, as the client and server code can be developed and released independently. This is especially so at Grab when we have multiple client apps hitting the same API server.

尽管传统的服务器端呈现的应用程序仍然是可行的选择，但是清晰的客户端与服务器的分离对于大型工程团队而言更合适，因为客户端和服务器代码可以独立开发和发布。 在Grab上尤其如此，因为我们有多个客户端应用程序在同一个API服务器上运行。

As web developers are now building apps rather than pages, organization of client-side JavaScript has become increasingly important. In server-side rendered pages, it is common to use snippets of jQuery to add user interactivity to each page. However, when building large apps, just jQuery is insufficient. After all, jQuery is primarily a library for DOM manipulation and it’s not a framework; it does not define a clear structure and organization for your app.

随着Web开发人员现在正在构建应用程序而不是页面，客户端JavaScript的组织变得越来越重要。 在服务器端呈现的页面中，通常使用jQuery片段向每个页面添加用户交互性。 但是，在构建大型应用程序时，仅jQuery是不够的。 毕竟，jQuery主要是用于DOM操作的库，而不是框架。 它没有为您的应用程序定义清晰的结构和组织。

JavaScript frameworks have been created to provide higher-level abstractions over the DOM, allowing you to keep state in memory, out of the DOM. Using frameworks also brings the benefits of reusing recommended concepts and best practices for building apps. A new engineer on the team who is unfamiliar with the code base, but has experience with a framework, will find it easier to understand the code because it is organized in a structure that they are familiar with. Popular frameworks have a lot of tutorials and guides, and tapping on the knowledge and experience from colleagues and the community will help new engineers get up to speed fast.

已创建JavaScript框架以在DOM上提供更高级别的抽象，从而使您可以将状态保持在内存中，而不包含在DOM中。 使用框架还带来了重新使用推荐的概念和最佳实践来构建应用程序的好处。 团队的一位不熟悉代码基础但是有框架经验的新工程师将发现更容易理解代码，因为它是按照他们熟悉的结构组织的。 流行的框架有很多教程和指南，利用同事和社区的知识和经验将有助于新工程师快速上手。

学习链接 (Study Links)

• Single Page App: advantages and disadvantages

  单页应用程序：优点和缺点

• The (R)Evolution of Web Development

  Web开发的(R)演变

• Here’s Why Client Side Rendering Won

  这就是赢得客户端渲染的原因

新时代JavaScript (New-age JavaScript)

Before you dive into the various aspects of building a JavaScript web app, it is important to get familiar with the language of the web — JavaScript, or ECMAScript. JavaScript is an incredibly versatile language which you can also use to build web servers, native mobile apps and desktop apps.

在深入研究构建JavaScript Web应用程序的各个方面之前，重要的是熟悉Web语言-JavaScript或ECMAScript。 JavaScript是一种用途广泛的语言，您还可以使用它来构建Web服务器 ， 本机移动应用程序和桌面应用程序 。

Prior to 2015, the last major update was ECMAScript 5.1, in 2011. However, in the recent years, JavaScript has suddenly seen a huge burst of improvements within a short span of time. In 2015, ECMAScript 2015 (previously called ECMAScript 6) was released and a ton of syntactic constructs were introduced to make writing code less unwieldy. If you are curious about it, Auth0 has written a nice article on the history of JavaScript. Till this day, not all browsers have fully implemented the ES2015 specification. Tools such as Babel enable developers to write ES2015 in their apps and Babel transpiles them down to ES5 to be compatible for browsers.

在2015年之前，最近的主要更新是2011年的ECMAScript 5.1。但是，近年来，JavaScript突然在短时间内获得了巨大的改进。 2015年，发布了ECMAScript 2015(以前称为ECMAScript 6)，并引入了许多语法构造，以减少编写代码的难度。 如果您对此感到好奇，那么Auth0就JavaScript的历史撰写了一篇不错的文章。 直到今天，并不是所有的浏览器都完全实现了ES2015规范。 Babel等工具使开发人员可以在其应用程序中编写ES2015，Babel会将其转换为ES5，以与浏览器兼容。

Being familiar with both ES5 and ES2015 is crucial. ES2015 is still relatively new and a lot of open source code and Node.js apps are still written in ES5. If you are doing debugging in your browser console, you might not be able to use ES2015 syntax. On the other hand, documentation and example code for many modern libraries that we will introduce later below are still written in ES2015. At Grab, we use use babel-preset-env to enjoy the productivity boost from the syntactic improvements the future of JavaScript provides and we have been loving it so far. babel-preset-env intelligently determines which Babel plugins are necessary (which new language features are not supported and have to be transpiled) as browsers increase native support for more ES language features. If you prefer using language features that are already stable, you may find that babel-preset-stage-3, which is a complete specification that will most likely be implemented in browsers, will be more suitable.

熟悉ES5和ES2015至关重要。 ES2015还是一个相对较新的概念，许多开放源代码和Node.js应用仍使用ES5编写。 如果要在浏览器控制台中进行调试，则可能无法使用ES2015语法。 另一方面，我们稍后将在后面介绍的许多现代库的文档和示例代码仍在ES2015中编写。 在Grab，我们使用babel-preset-env来享受JavaScript的未来所带来的语法改进所带来的生产力提升，并且到目前为止，我们一直都非常喜欢它。 随着浏览器增加对更多ES语言功能的本机支持， babel-preset-env智能地确定哪些Babel插件是必需的(不支持哪些新语言功能，而必须进行编译)。 如果您更喜欢使用已经稳定的语言功能，则可能会发现babel-preset-stage-3是一个完整的规范，很可能会在浏览器中实现，它很适合。

Spend a day or two revising ES5 and exploring ES2015. The more heavily used features in ES2015 include “Arrows and Lexical This”, “Classes”, “Template Strings”, “Destructuring”, “Default/Rest/Spread operators”, and “Importing and Exporting modules”.

花一两天的时间来修订ES5并探索ES2015。 ES2015中使用更广泛的功能包括“箭头和此词”，“类”，“模板字符串”，“解构”，“默认/其余/传播运算符”和“导入和导出模块”。

Estimated Duration: 3–4 days. You can learn/lookup the syntax as you learn the other libraries and try building your own app.

预计时间：3-4天。 在学习其他库并尝试构建自己的应用程序时，您可以学习/查找语法。

学习链接 (Study Links)

• Learn ES5 on Codecademy

  在Codecademy上学习ES5

• Learn ES2015 on Babel

  在Babel上学习ES2015

• ES6 Katas

  ES6卡塔斯

• Free Code Camp

  免费代码营

• You Don’t Know JS (Advanced content, optional for beginners)

  您不懂JS (高级内容，对于初学者是可选的)

用户界面-React (User Interface — React)

If any JavaScript project has taken the front end ecosystem by storm in recent years, that would be React. React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.

如果近年来有任何JavaScript项目席卷了前端生态系统，那将是React 。 React是一个由聪明人在Facebook建立和开源的库。 在React中，开发人员为其Web界面编写组件并将它们组合在一起。

React brings about many radical ideas and encourages developers to rethink best practices. For many years, web developers were taught that it was a good practice to write HTML, JavaScript and CSS separately. React does the exact opposite, and encourages that you write your HTML and CSS in your JavaScript instead. This sounds like a crazy idea at first, but after trying it out, it actually isn’t as weird as it sounds initially. Reason being the front end development scene is shifting towards a paradigm of component-based development. The features of React:

React带来了许多激进的想法，并鼓励开发人员重新考虑最佳实践 。 多年以来，网络开发人员都被告知，分别编写HTML，JavaScript和CSS是一个好习惯。 React恰好相反，并鼓励您改用JavaScript编写HTML和CSS 。 起初听起来像是个疯狂的主意，但尝试一下之后，实际上并不像最初听起来的那样怪异。 成为前端开发场景的原因正在转向基于组件的开发范例。 React的功能：

• Declarative — You describe what you want to see in your view and not how to achieve it. In the jQuery days, developers would have to come up with a series of steps to manipulate the DOM to get from one app state to the next. In React, you simply change the state within the component and the view will update itself according to the state. It is also easy to determine how the component will look like just by looking at the markup in the render()method.

  声明性的 -描述您想在视图中看到的内容，而不是如何实现它。 在jQuery时代，开发人员将不得不想出一系列步骤来操纵DOM，以使其从一种应用程序状态进入另一种应用程序状态。 在React中，您只需更改组件内的状态，视图就会根据状态进行更新。 仅通过查看render()方法中的标记，即可轻松确定组件的外观。

• Functional — The view is a pure function of props and state. In most cases, a React component is defined by props (external parameters) and state (internal data). For the same props and state, the same view is produced. Pure functions are easy to test, and the same goes for functional components. Testing in React is made easy because a component's interfaces are well-defined and you can test the component by supplying different props and state to it and comparing the rendered output.

  功能性 -视图是props和state的纯功能。 在大多数情况下，React组件由props (外部参数)和state (内部数据)定义。 对于相同的props和state ，将产生相同的视图。 纯功能易于测试，功能组件也是如此。 在React中进行测试变得很容易，因为组件的接口定义明确，您可以通过向组件提供不同的props和state并比较渲染的输出来测试组件。

• Maintainable — Writing your view in a component-based fashion encourages reusability. We find that defining a component’s propTypes make React code self-documenting as the reader can know clearly what is needed to use that component. Lastly, your view and logic is self-contained within the component, and should not be affected nor affect other components. That makes it easy to shift components around during large-scale refactoring, as long as the same props are supplied to the component.

  可维护的 -以基于组件的方式编写视图可鼓励重用。 我们发现，定义组件的propTypes可以使React代码自我记录，因为读者可以清楚地知道使用该组件需要什么。 最后，您的视图和逻辑是独立于组件内的，不应受到影响或影响其他组件。 只要在组件上提供相同的props就可以在大规模重构期间轻松移动组件。

• High Performance — You might have heard that React uses a virtual DOM (not to be confused with shadow DOM) and it re-renders everything when there is a change in state. Why is there a need for a virtual DOM? While modern JavaScript engines are fast, reading from and writing to the DOM is slow. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it actually refers to re-rendering the in-memory representation of the DOM, not the actual DOM itself. When there’s a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The difference (minimal set of changes required) is then patched to the real browser DOM.

  高性能 —您可能听说过React使用虚拟DOM(不要与Shadow DOM混淆)，并且在状态发生变化时会重新渲染所有内容。 为什么需要虚拟DOM？ 虽然现代JavaScript引擎速度很快，但是读取和写入DOM却很慢。 React在内存中保留了DOM的轻量级虚拟表示。 重新渲染所有内容是一个误导性术语。 在React中，它实际上是指重新渲染DOM的内存表示，而不是实际的DOM本身。 当组件的基础数据发生更改时，将创建一个新的虚拟表示形式，并将其与以前的表示形式进行比较。 然后将差异(所需的最少更改集)修补到实际的浏览器DOM。

• Ease of Learning — Learning React is pretty simple. The React API surface is relatively small compared to this; there are only a few APIs to learn and they do not change often. The React community is one of the largest, and along with that comes a vibrant ecosystem of tools, open-sourced UI components, and a ton of great resources online to get you started on learning React.

  轻松学习 -学习React非常简单。 与此相比，React API的表面相对较小； 仅需要学习一些API，并且它们不会经常更改。 React社区是最大的社区之一，同时还伴随着一个充满活力的工具生态系统，开源UI组件以及大量在线资源，可帮助您开始学习React。

• Developer Experience — There are a number of tools that improves the development experience with React. React Developer Tools is a browser extension that allows you to inspect your component, view and manipulate its props and state. Hot reloading with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides codemod scripts to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.

  开发人员经验 -有许多工具可以改善React的开发经验。 React Developer Tools是一个浏览器扩展，它使您可以检查组件，查看和操纵其props和state 。 使用webpack进行热重载 ，使您可以在浏览器中查看对代码的更改，而无需刷新浏览器。 前端开发涉及许多调整代码，保存然后刷新浏览器。 热重装可以消除最后一步，从而为您提供帮助。 进行库更新时，Facebook提供codemod脚本来帮助您将代码迁移到新的API。 这使得升级过程相对轻松。 感谢Facebook团队致力于使React的开发经验很棒。

Over the years, new view libraries that are even more performant than React have emerged. React may not be the fastest library out there, but in terms of the ecosystem, overall usage experience and benefits, it is still one of the greatest. Facebook is also channeling efforts into making React even faster with a rewrite of the underlying reconciliation algorithm. The concepts that React introduced has taught us how to write better code, more maintainable web apps and made us better engineers. We like that.

多年来，出现了性能比React更高的新视图库。 React可能不是最快的库，但是就生态系统，整体使用经验和收益而言，它仍然是最大的库之一。 Facebook还通过重写底层对帐算法，努力使React更快。 React引入的概念教会了我们如何编写更好的代码，更可维护的Web应用程序，并使我们成为更好的工程师。 我们喜欢那样。

We recommend going through the tutorial on building a tic-tac-toe game on the React homepage to get a feel of what React is and what it does. For more in-depth learning, check out the highly-rated free course, React Fundamentals by the creators of React Router, who are experts from the React community. It also covers more advanced concepts that are not covered by the React documentation. Create React App by Facebook is a tool to scaffold a React project with minimal configuration and is highly recommended to use for starting new React projects.

我们建议您在React主页上通读有关构建井字游戏的教程 ，以了解React是什么以及它的作用。 要进行更深入的学习，请查看由React社区的专家， React Router的创建者们高度评价的免费课程React Fundamentals 。 它还涵盖了React文档中未涵盖的更高级的概念。 Facebook 创建React应用程序是一种以最小的配置来搭建React项目的工具，强烈建议用于启动新的React项目。

React is a library, not a framework, and does not deal with the layers below the view — the app state. More on that later.

React是一个库，而不是框架，并且不处理视图下方的层(应用程序状态)。 以后再说。

Estimated Duration: 3–4 days. Try building simple projects like a to-do list, Hacker News clone with pure React. You will slowly gain an appreciation for it and perhaps face some problems along the way that isn’t solved by React, which brings us to the next topic…

预计时间：3-4天。 尝试构建简单的项目，例如待办事项清单，使用纯React的Hacker News克隆。 您将逐渐对此有所赞赏，并且可能会遇到React无法解决的一些问题，这将使我们进入下一个主题……

学习链接 (Study Links)

• React Official Tutorial

  React官方教程

• React Fundamentals

  React基础

• Simple React Development in 2017

  2017年的简单React开发

• Presentational and Container Components

  外观和容器组件

备择方案 (Alternatives)

• Angular

  角度的

• Ember

  余烬

• Vue

  Vue

• Cycle

  周期

状态管理—通量/ Redux (State Management — Flux/Redux)

As your app grows bigger, you may find that the app structure becomes a little messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. After all, React is just the view layer, it does not dictate how you structure the other layers of your app, such as the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React’s composable view components by utilizing a unidirectional data flow. Read more about how Flux works here. In summary, the Flux pattern has the following characteristics:

随着您的应用程序变得更大，您可能会发现应用程序的结构变得有些混乱。 整个应用程序中的组件可能必须共享和显示公共数据，但是在React中没有一种优雅的方式来处理它。 毕竟，React只是视图层，它并不指示您如何在传统MVC范例中构造应用程序的其他层，例如模型和控制器。 为了解决这个问题，Facebook发明了Flux，一种应用程序架构，通过利用单向数据流来补充React的可组合视图组件。 在此处阅读有关Flux工作原理的更多信息。 总之，磁通量模式具有以下特征：

• Unidirectional data flow — Makes the app more predictable as updates can be tracked easily.

  单向数据流 -使应用程序更容易预测，因为可以轻松跟踪更新。

• Separation of concerns — Each part in the Flux architecture has clear responsibilities and are highly decoupled.

  关注点分离 — Flux体系结构中的每个部分都有明确的职责，并且高度分离。

• Works well with declarative programming — The store can send updates to the view without specifying how to transition views between states.

  与声明式编程一起很好地工作 -存储可以将更新发送到视图，而无需指定如何在状态之间转换视图。

As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was Redux. Redux combines the ideas from Flux, Command pattern and Elm architecture and is the de facto state management library developers use with React these days. Its core concepts are:

由于Flux本身并不是一个框架，因此开发人员已尝试提出Flux模式的许多实现。 最终，一个明显的赢家出现了，那就是Redux 。 Redux结合了Flux， Command模式和Elm架构的思想 ，是当今开发人员与React一起使用的事实上的状态管理库。 其核心概念是：

• App state is described by a single plain old JavaScript object (POJO).

  应用状态由一个简单的旧JavaScript对象(PO​​JO)描述。

• Dispatch an action (also a POJO) to modify the state.

  调度动作 (也是POJO)以修改状态。

• Reducer is a pure function that takes in current state and action to produce a new state.

  减速器是一个纯函数，它接受当前状态和操作以产生新状态。

The concepts sound simple, but they are really powerful as they enable apps to:

这些概念听起来很简单，但是它们确实非常强大，因为它们使应用程序能够：

• Have their state rendered on the server, booted up on the client.将其状态呈现在服务器上，并在客户端上启动。
• Trace, log and backtrack changes in the whole app.跟踪，记录和回溯整个应用程序中的更改。
• Implement undo/redo functionality easily.轻松实现撤消/重做功能。

The creator of Redux, Dan Abramov, has taken great care in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning basic and advanced Redux. They are extremely helpful resources for learning Redux.

Redux的创建者Dan Abramov在编写有关Redux的详细文档以及创建用于学习基础和高级 Redux的综合视频教程方面一直非常谨慎。 它们是学习Redux的极有帮助的资源。

Combining View and State

结合视图和状态

While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common:

虽然Redux不一定必须与React一起使用，但强烈建议将它们相互配合使用。 React和Redux有很多共同点和特质：

• Functional Composition Paradigm — React composes views (pure functions) while Redux composes pure reducers (also pure functions). Output is predictable given the same set of input.

  功能组合范例 — React构成视图(纯函数)，而Redux构成纯约简器(也是纯函数)。 给定相同的输入集，输出是可预测的。

• Easy To Reason About — You may have heard this term many times but what does it actually mean? We interpret it as having control and understanding over our code — Our code behaves in ways we expect it to, and when there are problems, we can find them easily. Through our experience, React and Redux makes debugging simpler. As the data flow is unidirectional, tracing the flow of data (server responses, user input events) is easier and it is straightforward to determine which layer the problem occurs in.

  易于推理 -您可能已经多次听到这个词，但这实际上意味着什么？ 我们将其解释为具有对我们的代码的控制权和理解力–我们的代码以我们期望的方式运行，当出现问题时，我们可以轻松地找到它们。 根据我们的经验，React和Redux使调试更加简单。 由于数据流是单向的，因此跟踪数据流(服务器响应，用户输入事件)更加容易，并且可以轻松确定问题发生在哪一层。

• Layered Structure — Each layer in the app / Flux architecture is a pure function, and has clear responsibilities. It is relatively easy to write tests for pure functions.

  分层结构 -app / Flux体系结构中的每一层都是纯功能，并且具有明确的职责。 为纯函数编写测试相对容易。

• Development Experience — A lot of effort has gone into creating tools to help in debugging and inspecting the app while development, such as Redux DevTools.

  开发经验 -在开发过程中投入了大量精力来创建工具，例如Redux DevTools ，以帮助调试和检查应用程序。

Your app will likely have to deal with async calls like making remote API requests. redux-thunk and redux-saga were created to solve those problems. They may take some time to understand as they require understanding of functional programming and generators. Our advice is to deal with it only when you need it.

您的应用可能必须处理异步调用，例如发出远程API请求。 创建redux-thunk和redux-saga来解决这些问题。 他们可能需要一些时间来理解，因为他们需要了解函数式编程和生成器。 我们的建议是仅在需要时处理它。

react-redux is an official React binding for Redux and is very simple to learn.

react-redux是Redux的官方React绑定，非常简单易学。

Estimated Duration: 4 days. The egghead courses can be a little time-consuming but they are worth spending time on. After learning Redux, you can try incorporating it into the React projects you have built. Does Redux solve some of the state management issues you were struggling with in pure React?

预计时间：4天。 蛋头课程可能会花费一些时间，但是值得花一些时间。 学习完Redux之后，您可以尝试将其合并到已构建的React项目中。 Redux是否可以解决您在纯React中苦苦挣扎的一些状态管理问题？

学习链接 (Study Links)

• Flux Homepage

  助焊剂主页

• Redux Homepage

  Redux主页

• Egghead Course — Getting Started with Redux

  Egghead课程— Redux入门

• Egghead Course — Build React Apps with Idiomatic Redux

  Egghead课程—使用Idiomatic Redux构建React应用

• React Redux Links

  ReactRedux链接

• You Might Not Need Redux

  您可能不需要Redux

备择方案 (Alternatives)

• MobX

  手机

样式编码-CSS模块 (Coding with Style — CSS Modules)

CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

CSS(层叠样式表)是描述HTML元素外观的规则。 编写好CSS很难。 在编写可维护且可扩展CSS之前，通常需要多年的经验和挫败自己的脚步。 具有全局命名空间CSS从根本上是为Web文档设计的，而不是为支持组件体系结构的Web应用程序设计的。 因此，经验丰富的前端开发人员设计了方法来指导人们如何为复杂的项目编写组织化CSS，例如使用SMACSS ， BEM ， SUIT CSS等。

The encapsulation of styles that CSS methodologies bring about, are artificially enforced by conventions and guidelines. They break the moment developers do not follow them.

CSS方法论带来的样式封装是由惯例和准则人为地强制执行的。 一旦开发人员不关注它们，它们就会中断。

As you might have realized by now, the front end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to partially solve some of the problems with writing CSS at scale. “At scale” means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing CSS in JS at the moment, and we are hoping that one day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on CSS Modules. CSS modules is an improvement over existing CSS that aims to fix the problem of global namespace in CSS; it enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, large teams can write modular and reusable CSS without fear of conflict or overriding other parts of the app. However, at the end of the day, CSS modules are still being compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to learn and understand how raw CSS works.

正如您可能已经意识到的那样，前端生态系统已充满了工具，毫不奇怪，已经发明了工具来部分解决大规模编写CSS时遇到的一些问题 。 “大规模”意味着许多开发人员正在从事同一个大型项目并使用相同的样式表。 目前尚无社区认可的用JS编写CSS的方法，我们希望有一天，像Redux一样，在所有Flux实现中都会有赢家。 目前，我们依靠CSS模块 。 CSS模块是对现有CSS的改进，旨在解决CSS中的全局名称空间问题。 它使您能够编写默认情况下是本地的样式，并封装到组件中。 此功能是通过工具实现的。 借助CSS模块，大型团队可以编写模块化且可重用CSS，而不必担心冲突或覆盖应用程序的其他部分。 然而，归根结底，CSS模块仍被编译为浏览器可以识别的常规的全局命名CSS，并且了解和理解原始CSS的工作原理仍然很重要。

If you are a total beginner to CSS, Codecademy’s HTML & CSS course will be a good introduction to you. Next, read up on the Sass preprocessor, an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.

如果您是CSS的初学者，那么Codecademy的HTML和CSS课程将是对您的很好的入门。 接下来，继续阅读Sass预处理程序 ，它是CSS语言的扩展，它增加了语法改进并鼓励了样式的可重用性。 研究上面提到CSS方法，最后研究CSS模块。

Estimated Duration: 3–4 days. Try styling up your app using the SMACSS/BEM approach and/or CSS modules.

预计时间：3-4天。 尝试使用SMACSS / BEM方法和/或CSS模块来样式化您的应用程序。

学习链接 (Study Links)

• Learn HTML & CSS course on Codecademy

  在Codecademy上学习HTML和CSS课程

• Intro to HTML/CSS on Khan Academy

  可汗学院HTML / CSS简介

• SMACSS

  SMACSS

• BEM

  边界元

• SUIT CSS

  西装CSS

• CSS Modules Specification

  CSS模块规范

• Sass Homepage

  Sass首页

• Answers to Front End Job Interview Questions — HTML ⭐

  前端面试问题的答案 -HTML⭐

• Answers to Front End Job Interview Questions — CSS ⭐

  前端面试问题的答案 -CSS⭐

备择方案 (Alternatives)

• JSS

  JSS

• Styled Components

  样式化的组件

可维护性 (Maintainability)

Code is read more frequently than it is written. This is especially true at Grab, where the team size is large and we have multiple engineers working across multiple projects. We highly value readability, maintainability and stability of the code and there are a few ways to achieve that: “Extensive testing”, “Consistent coding style” and “Typechecking”.

读取代码比编写代码更频繁。 在Grab尤其如此，那里的团队规模很大，我们有多个工程师负责多个项目。 我们高度重视代码的可读性，可维护性和稳定性，有几种方法可以实现：“广泛的测试”，“一致的编码样式”和“类型检查”。

测试-笑话+酶 (Testing — Jest + Enzyme)

Jest is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is “Snapshot Testing”. Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn’t have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!

Jest是Facebook的测试库，旨在使测试过程轻松自如。 与Facebook项目一样，它提供了开箱即用的出色开发体验。 测试可以并行运行，从而缩短了持续时间。 在监视模式下，默认情况下，仅运行针对已更改文件的测试。 我们喜欢的一个特殊功能是“快照测试”。 Jest可以保存您的React组件和Redux状态的生成的输出，并将其保存为序列化文件，因此您不必自己手动提出期望的输出。 Jest还带有内置的模拟，声明和测试覆盖范围。 一个图书馆来统治他们！

React comes with some testing utilities, but Enzyme by Airbnb makes it easier to generate, assert, manipulate and traverse your React components’ output with a jQuery-like API. It is recommended that Enzyme be used to test React components.

React附带了一些测试实用程序，但是Airbnb的Enzyme使使用类似jQuery的API可以更轻松地生成，声明，操作和遍历React组件的输出。 建议使用酶来测试React组件。

Jest and Enzyme makes writing front end tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of clearly defined responsibilities and interfaces. For React components, we can test that given some props, the desired DOM is rendered, and that callbacks are fired upon certain simulated user interactions. For Redux reducers, we can test that given a prior state and an action, a resulting state is produced.

Jest and Enzyme使编写前端测试变得有趣而轻松。 当编写测试变得愉快时，开发人员将编写更多的测试。 由于明确定义了职责和接口，它还有助于使React组件和Redux操作/减少器相对易于测试。 对于React组件，我们可以测试给定一些props ，是否呈现了所需的DOM，以及是否在某些模拟的用户交互上触发了回调。 对于Redux减速器，我们可以测试给定先前状态和操作，然后生成结果状态。

The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them by reading it.

Jest和Enzyme的文档非常简洁，通过阅读来学习它们就足够了。

Estimated Duration: 2–3 days. Try writing Jest + Enzyme tests for your React + Redux app!

预计时间：2-3天。 尝试为您的React + Redux应用编写Jest + Enzyme测试！

学习链接 (Study Links)

• Jest Homepage

  笑话首页

• Testing React Applications with Jest

  用Jest测试React应用程序

• Enzyme Homepage

  酶主页

• Enzyme: JavaScript Testing utilities for React

  酶：ReactJavaScript测试实用程序

备择方案 (Alternatives)

• AVA

  AVA

• Karma

  业力

整理JavaScript-ESLint (Linting JavaScript — ESLint)

A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. ESLint is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. At Grab, we use Airbnb’s eslint-config-airbnb preset, that has already been configured with the common good coding style in the Airbnb JavaScript style guide.

linter是一种静态分析代码并查找代码问题的工具，可以潜在地防止错误/运行时错误，并同时增强编码风格。 当审阅者不必在编码风格上留下挑剔的评论时，可以在拉取请求审阅过程中节省时间。 ESLint是用于插入JavaScript代码的工具，该工具具有高度可扩展性和可定制性。 团队可以编写自己的皮棉规则来实施其自定义样式。 在Grab，我们使用Airbnb的eslint-config-airbnb预设，该预设已在Airbnb JavaScript样式指南中配置为具有良好的通用编码样式。

For the most part, using ESLint is as simple as tweaking a configuration file in your project folder. There’s nothing much to learn about ESLint if you’re not writing new rules for it. Just be aware of the errors when they surface and Google it to find out the recommended style.

在大多数情况下，使用ESLint就像在项目文件夹中调整配置文件一样简单。 如果您没有为ESLint编写新的规则，则没有什么要了解的。 只需在出现错误时就知道这些错误，然后谷歌对其进行搜索以找出推荐的样式。

Estimated Duration: 1/2 day. Nothing much to learn here. Add ESLint to your project and fix the linting errors!

预计时间：1/2天。 这里没什么可学的。 将ESLint添加到您的项目中，并修复掉毛错误！

学习链接 (Study Links)

• ESLint Homepage

  ESLint主页

• Airbnb JavaScript Style Guide

  Airbnb JavaScript样式指南

备择方案 (Alternatives)

• Standard

  标准

• JSHint

  捷迅

整理CSS-stylelint (Linting CSS — stylelint)

As mentioned earlier, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding style. For linting CSS, we use stylelint. Like ESLint, stylelint is designed in a very modular fashion, allowing developers to turn rules on/off and write custom plugins for it. Besides CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt it.

如前所述，众所周知，好CSS很难编写。 在CSS上使用静态分析工具可以帮助维持我们CSS代码质量和编码风格。 为了整理CSS，我们使用stylelint。 与ESLint一样，stylelint以非常模块化的方式设计，允许开发人员打开/关闭规则并为其编写自定义插件。 除了CSS，stylelint能够解析SCSS并为Less提供了实验性支持，这降低了大多数现有代码库采用它的障碍。

Once you have learned ESLint, learning stylelint would be effortless considering their similarities. stylelint is currently being used by big companies like Facebook, Github and Wordpress.

一旦您学习了ESLint，考虑到它们的相似性，就可以轻松学习stylelint。 目前，stylelint已被Facebook ， Github和Wordpress等大公司使用。

One downside of stylelint is that the autofix feature is not fully mature yet, and is only able to fix for a limited number of rules. However, this issue should improve with time.

stylelint的缺点之一是自动修复功能尚未完全成熟，只能修复有限数量的规则。 但是，此问题应随时间改善。

Estimated Duration: 1/2 day. Nothing much to learn here. Add stylelint to your project and fix the linting errors!

预计时间：1/2天。 这里没什么可学的。 将stylelint添加到您的项目中，并修复掉毛错误！

学习链接 (Study Links)

• stylelint Homepage

  stylelint主页

• Lint your CSS with stylelint

  用stylelint整理CSS

备择方案 (Alternatives)

• Sass Lint

  萨斯皮棉

• CSS Lint

  CSS Lint

类型—流 (Types — Flow)

Static typing brings about many benefits when writing apps. They can catch common bugs and errors in your code early. Types also serve as a form of documentation for your code and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives us greater confidence when we do refactoring. It is also easier to onboard new members of the team to the project when it is clear what kind of values each object holds and what parameters each function expects and returns.

静态类型在编写应用程序时带来许多好处。 他们可以及早发现代码中的常见错误和错误。 类型还可以作为代码文档的一种形式，并提高代码的可读性。 随着代码库的扩大，我们看到类型的重要性，因为它们在重构时会给我们带来更大的信心。 当清楚每个对象拥有什么样的值以及每个函数期望和返回什么参数时，也更容易将团队的新成员加入项目。

Adding types to your code comes with the trade-off of increased verbosity and a learning curve of the syntax. But this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it change over time, adding types to the code brings about more benefits than disadvantages.

在代码中添加类型需要增加冗长程度和语法学习曲线之间的权衡。 但是，这笔学习费用是预先支付的，并随着时间的推移而摊销。 在复杂的项目中，代码的可维护性很重要，并且代码的工作人员会随着时间而变化，向代码中添加类型带来的好处多于弊。

Recently, I had to fix a bug in a code base that I haven’t touched in months. It was thanks to types that I could easily refresh myself on what the code was doing, and gave me confidence in the fix I made.

最近，我不得不修复几个月来没有碰到的代码库错误。 借助类型，我可以轻松地刷新自己在执行代码的工作，并使我对所做的修复充满信心。

The two biggest contenders in adding static types to JavaScript are Flow (by Facebook) and TypeScript (by Microsoft). As of date, there is no clear winner in the battle. For now, we have made the choice of using Flow. We find that Flow has a lower learning curve as compared to TypeScript and it requires relatively less effort to migrate an existing code base to Flow. Being built by Facebook, Flow has better integration with the React ecosystem out of the box. James Kyle, one of the authors of Flow, has written on a comparison between adopting Flow and TypeScript.

向JavaScript添加静态类型的两个最大竞争者是Flow (由Facebook)和TypeScript (由Microsoft)。 迄今为止，战斗中尚无明确的获胜者。 目前，我们已经选择使用Flow。 我们发现，与TypeScript相比，Flow的学习曲线更低，并且将现有代码库迁移到Flow所需的工作相对较少。 Flow是由Facebook构建的，具有与现成的React生态系统更好的集成。 詹姆斯·凯尔 ，流量的作者之一，已经写上采用流和打字稿之间的比较。

Anyway, it is not extremely difficult to move from Flow to TypeScript as the syntax and semantics are quite similar, and we will re-evaluate the situation in time to come. After all, using one is better than not using any at all.

无论如何，从Flow到TypeScript转换并不是非常困难，因为其语法和语义非常相似，我们将在不久的将来重新评估情况。 毕竟，使用一个总比根本不使用任何总比要好。

Flow recently revamped their homepage and it’s pretty neat now!

Flow最近修改了他们的主页，现在非常整洁！

Estimated Duration: 1 day. Flow is pretty simple to learn as the type annotations feel like a natural extension of the JavaScript language. Add Flow annotations to your project and embrace the power of type systems.

预计时间：1天。 Flow非常简单易学，因为类型注释就像JavaScript语言的自然扩展一样。 将Flow注释添加到您的项目中，并使用类型系统的强大功能。

学习链接 (Study Links)

• Flow Homepage

  流程首页

• TypeScript vs Flow

  TypeScript与流程

备择方案 (Alternatives)

• TypeScript

  打字稿

构建系统— webpack (Build System — webpack)

This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, webpack is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.

由于设置Webpack可能是一个乏味的过程，因此可能会使这部分工作变得乏味，对于那些已经为前端开发学习新知识的开发人员所淹没的开发人员而言，这可能是一个关闭。 简而言之， webpack是一个模块捆绑程序，它将前端项目及其依赖项编译为最终的捆绑包，以提供给用户。 通常，项目已经设置了webpack配置，并且开发人员很少需要更改它。 从长远来看，对webpack的理解仍然是一件好事。 正是由于webpack使得诸如热重载和CSS模块之类的功能成为可能。

We have found the webpack walkthrough by SurviveJS to be the best resource on learning webpack. It is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the need for further customization arises.

我们发现SurviveJS的webpack演练是学习webpack的最佳资源。 它是对官方文档的很好的补充，我们建议先遵循演练，然后在需要进一步定制时再参考文档。

Estimated Duration: 2 days (Optional).

预计时间：2天(可选)。

学习链接 (Study Links)

• webpack Homepage

  webpack主页

• SurviveJS — Webpack: From apprentice to master

  SurviveJS — Webpack：从学徒到掌握

备择方案 (Alternatives)

• Rollup

  卷起

• Browserify

  浏览器

包装管理—纱线 (Package Management — Yarn)

If you take a peek into your node_modules directory, you will be appalled by the number of directories that are contained in it. Each babel plugin, lodash function, is a package on its own. When you have multiple projects, these packages are duplicated across each project and they are largely similar. Each time you run npm install in a new project, these packages are downloaded over and over again even though they already exist in some other project in your computer.

如果您查看一下node_modules目录，将会被其中包含的目录数量惊呆了。 每个babel插件lodash函数都是一个独立的程序包。 当您有多个项目时，这些程序包将在每个项目中重复，并且它们在很大程度上相似。 每次在新项目中运行npm install时，都会反复下载这些软件包，即使它们已经存在于计算机的其他项目中。

There was also the problem of non-determinism in the installed packages via npm install. Some of our CI builds fail because at the point of time when the CI server installs the dependencies, it pulled in minor updates to some packages that contained breaking changes. This would not have happened if library authors respected semver and engineers did not assume that API contracts would be respected all the time.

通过npm install在安装的软件包中还存在不确定性的问题。 我们的某些CI构建失败，因为在CI服务器安装依赖项时，它引入了对包含重大更改的某些软件包的次要更新。 如果图书馆作者尊重semver并且工程师不认为API合同将一直受到尊重，那么这将不会发生。

Yarn solves these problems. The issue of non-determinism of installed packages is handled via a yarn.lock file, which ensures that every install results in the exact same file structure in node_modules across all machines. Yarn utilizes a global cache directory within your machine, and packages that have been downloaded before do not have to be downloaded again. This also enables offline installation of dependencies!

纱线解决了这些问题。 已安装软件包的不确定性问题通过yarn.lock文件处理，该文件可确保每次安装node_modules在所有计算机上的node_modules中产生完全相同的文件结构。 Yarn使用计算机中的全局缓存目录，因此之前已下载的程序包不必再次下载。 这样还可以离线安装依赖项！

The most common Yarn commands can be found here. Most other yarn commands are similar to the npm equivalents and it is fine to use the npm versions instead. One of our favorite commands is yarn upgrade-interactive which makes updating dependencies a breeze especially when the modern JavaScript project requires so many dependencies these days. Do check it out!

最常见的Yarn命令可以在这里找到。 大多数其他的yarn命令类似于npm等效命令，可以改用npm版本。 我们最喜欢的命令之一是yarn upgrade-interactive ，这使得更新依赖关系变得轻而易举，特别是当现代JavaScript项目如今需要如此多的依赖关系时。 请检查一下！

npm@5.0.0 was released in May 2017 and it seems to address many of the issues that Yarn aims to solve. Do keep an eye on it!

npm@5.0.0于2017年5月发布，它似乎解决了Yarn旨在解决的许多问题。 一定要注意！

Estimated Duration: 2 hours.

Estimated Duration: 2 hours.

学习链接 (Study Links)

• Yarn Homepage

  Yarn Homepage

• Yarn: A new package manager for JavaScript

  Yarn: A new package manager for JavaScript

备择方案 (Alternatives)

• Good old npm

  Good old npm

持续集成 (Continuous Integration)

We use Travis CI for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its build matrix feature is useful for repositories which contain multiple projects like Grab’s. We configured Travis to do the following:

We use Travis CI for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its build matrix feature is useful for repositories which contain multiple projects like Grab's. We configured Travis to do the following:

• Run linting for the project.Run linting for the project.
• Run unit tests for the project.Run unit tests for the project.
• If the tests pass:If the tests pass:

• Test coverage generated by Jest is uploaded to Codecov.

  Test coverage generated by Jest is uploaded to Codecov .

• Generate a production bundle with webpack into a build directory.

  Generate a production bundle with webpack into a build directory.

• tar the build directory as <hash&gt;.tar and upload it to an S3 bucket which stores all our tar builds.

  tar the build directory as <hash&g t;.tar and upload it to an S3 bucket which stores all our tar builds.

• Post a notification to Slack to inform about the Travis build result.Post a notification to Slack to inform about the Travis build result.

学习链接 (Study Links)

• Travis Homepage

  Travis Homepage

• Codecov Homepage

  Codecov Homepage

备择方案 (Alternatives)

• Jenkins

  詹金斯

• CircleCI

  CircleCI

Hosting — Amazon S3 (Hosting — Amazon S3)

Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:

Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:

1. Web server receives a HTTP request for a particular route, for example /users/john.

   Web server receives a HTTP request for a particular route, for example /users/john .

2. Regardless of which route the server receives, serve up index.html from the static assets directory.

   Regardless of which route the server receives, serve up index.html from the static assets directory.

3. The index.html should contain scripts that load up a JavaScript framework/library that handles client-side routing.

   The index.html should contain scripts that load up a JavaScript framework/library that handles client-side routing.

4. The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.

5. The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up UsersController, fetch user data for the username john as JSON, combine the data with the view, and render it on the page.

   The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up UsersController , fetch user data for the username john as JSON, combine the data with the view, and render it on the page.

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) because it can both host and act as a CDN for our static website content. We find that it is an affordable and reliable solution that meets our needs. S3 provides the option to “Use this bucket to host a website”, which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) because it can both host and act as a CDN for our static website content. We find that it is an affordable and reliable solution that meets our needs. S3 provides the option to “Use this bucket to host a website”, which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.

An example of a web app that we host on S3 is Hub.

An example of a web app that we host on S3 is Hub .

Other than hosting the website, we also use S3 to host the build .tar files generated from each successful Travis build.

Other than hosting the website, we also use S3 to host the build .tar files generated from each successful Travis build.

学习链接 (Study Links)

• Amazon S3 Homepage

  Amazon S3 Homepage

• Hosting a Static Website on Amazon S3

  Hosting a Static Website on Amazon S3

备择方案 (Alternatives)

• Google Cloud Platform

  Google Cloud Platform

• Now

  现在

部署方式 (Deployment)

The last step in shipping the product to our users is deployment. We use Ansible Tower which is a powerful automation software that enables us to deploy our builds easily.

The last step in shipping the product to our users is deployment. We use Ansible Tower which is a powerful automation software that enables us to deploy our builds easily.

As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as 1.0.1.tar) with the version to our S3 bucket for builds.

As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as 1.0.1.tar ) with the version to our S3 bucket for builds.

On Tower, we simply have to specify the name of the .tar we want to deploy to our hosting bucket, and Tower does the following:

On Tower, we simply have to specify the name of the .tar we want to deploy to our hosting bucket, and Tower does the following:

1. Download the desired .tar file from our builds S3 bucket.

   Download the desired .tar file from our builds S3 bucket.

2. Extracts the contents and swap in the configuration file for specified environment.Extracts the contents and swap in the configuration file for specified environment.
3. Upload the contents to the hosting bucket.Upload the contents to the hosting bucket.
4. Post a notification to Slack to inform about the successful deployment.Post a notification to Slack to inform about the successful deployment.

This whole process is done under 30 seconds and using Tower has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply find the previous stable tag and deploy it.

This whole process is done under 30 seconds and using Tower has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply find the previous stable tag and deploy it.

学习链接 (Study Links)

• Ansible Tower Homepage

  Ansible Tower Homepage

The Journey has Just Begun (The Journey has Just Begun)

Congratulations on making it this far! Front end development today is hard, but it is also more interesting than before. What we have covered so far will help any new engineer to Grab’s web team to get up to speed with our technologies pretty quickly. There are many more things to be learned, but building up a solid foundation in the essentials will aid in learning the rest of the technologies. This helpful front end web developer roadmap shows the alternative technologies available for each aspect.

恭喜！ Front end development today is hard , but it is also more interesting than before. What we have covered so far will help any new engineer to Grab's web team to get up to speed with our technologies pretty quickly. There are many more things to be learned, but building up a solid foundation in the essentials will aid in learning the rest of the technologies. This helpful front end web developer roadmap shows the alternative technologies available for each aspect.

Grab is Southeast Asia (SEA)’s leading transportation platform and our mission is to drive SEA forward, leveraging on the latest technology and the talented people we have in the company. As of May 2017, Grab handles 2.3 million rides daily and we are growing and hiring at a rapid scale.

Grab is Southeast Asia (SEA)'s leading transportation platform and our mission is to drive SEA forward, leveraging on the latest technology and the talented people we have in the company. As of May 2017, Grab handles 2.3 million rides daily and we are growing and hiring at a rapid scale.

Hence we made our technical decisions based on what was important to a rapidly growing Grab Engineering team — maintainability and stability of the code base. These decisions may or may not apply to smaller teams and projects. Do evaluate what works best for you and your company.

Hence we made our technical decisions based on what was important to a rapidly growing Grab Engineering team — maintainability and stability of the code base. These decisions may or may not apply to smaller teams and projects. Do evaluate what works best for you and your company.

As the front end ecosystem grows, we are actively exploring, experimenting and evaluating how new technologies can make us a more efficient team and improve our productivity. We hope that this post has given you insights into the front end technologies we use at Grab. If what we are doing interests you, we are hiring!

As the front end ecosystem grows, we are actively exploring, experimenting and evaluating how new technologies can make us a more efficient team and improve our productivity. We hope that this post has given you insights into the front end technologies we use at Grab. If what we are doing interests you, we are hiring !

If you enjoyed this article, please don’t forget to leave a ? (Do you know that you can clap more than once? Try it and see for yourself!). You can also follow us on Facebook and Twitter.

If you enjoyed this article, please don't forget to leave a ? (Do you know that you can clap more than once? Try it and see for yourself!). You can also follow us on F acebook and T witter.

This article was originally published on Grab’s Engineering Blog. The original study guide can be found on Github and future updates to it will be made there.

This article was originally published on Grab's Engineering Blog . The original study guide can be found on Github and future updates to it will be made there.

grab/front-end-guidefront-end-guide - ? Study guide and introduction to the modern front end stack.github.com

grab/front-end-guide front-end-guide - ? Study guide and introduction to the modern front end stack.g ithub.com

Written by Tay Yang Shun. Many thanks to Joel Low, Li Kai and Tan Wei Seng who reviewed drafts of this article.

Written by Tay Yang Shun . Many thanks to Joel Low , Li Kai and Tan Wei Seng who reviewed drafts of this article.

Preparing for Front End technical interviews? Check out this handbook that contains answers to the famous Front End Job Interview questions.

Preparing for Front End technical interviews? Check out this handbook that contains answers to the famous Front End Job Interview questions.

yangshun/front-end-interview-handbookfront-end-interview-handbook - ? Almost complete answers to "Front-end Job Interview Questions"github.com

yangshun /前端采访手册 前端采访手册-？ ithub.com 对“前端面试问题”的几乎完整答案

更多阅读 (More Reading)

General

一般

• State of the JavaScript Landscape: A Map for Newcomers

  State of the JavaScript Landscape: A Map for Newcomers

• The Hitchhiker’s guide to the modern front end development workflow

  The Hitchhiker's guide to the modern front end development workflow

• How it feels to learn JavaScript in 2016

  How it feels to learn JavaScript in 2016

• Roadmap to becoming a web developer in 2017

  Roadmap to becoming a web developer in 2017

• Modern JavaScript for Ancient Web Developers

  Modern JavaScript for Ancient Web Developers

Other Study Guides

Other Study Guides

• A Study Plan To Cure JavaScript Fatigue

  A Study Plan To Cure JavaScript Fatigue

• JS Stack from Scratch

  JS Stack from Scratch

• A Beginner’s JavaScript Study Plan

  A Beginner's JavaScript Study Plan

翻译自: https://www.freecodecamp.org/news/grabs-front-end-guide-for-large-teams-484d4033cc41/

前端前端开发工程师