2019-12-10 补充： 有人说标题党，有人说不知所谓，2020乱入什么的。 再次强调一下背景，本文为brad traversy在youtube视频的中文浓缩版，如果英文可以的话，可以去看下英文视频。 作者本意也是将web开发的相关方面全面的介绍一下，并涉及未来的一些趋势，例如3大框架的一些趋势，webassembly的趋势，语音识别，去框架化等等，视频也考虑了web开发的初学者，给出了一些前期学习的方向和必须学习的基础知识等等。

希望能够客观的讨论技术，减少无谓的消耗。

更新

2019-12-10 无服务器架构新增描述“云函数”及对应英文。

以下为原文。

start 2019-12-08 14:30:00

声明

首先声明，本篇文章属于外网内容概括和转摘，加上部分个人理解，如有侵权行为请联系我，将适当予以调整。

内容来源：www.youtube.com/watch?v=0pT…

标题为：Web Development In 2020 – A Practical Guide

正文开始

为什么要有这篇文章（视频），是为了给广大前端未入门或刚入门者有一个宏观的了解，前端开发可以做什么，有哪些发展路径，早日找到自己的方向，做到心中有数。

你想干啥？

编程的出发点很重要，就是你到底为啥编程？

• 工作
• 自由职业者
• 做顾问
• 创造一个app或者服务来赚钱
• 仅仅作为爱好

仅仅作为爱好恐怕是富二代干的事情，大多数人都是工作所需吧。

工具箱1：必需品

• 电脑/操作系统 Mac, Windows, Linux
• 编辑器 vscode, sublime, visual studio, eclipse
• 浏览器 chrome, firefox
• 终端 bash, powershell, git bash, iTerm, Hyper
• 设计（可选） Adobe系列, Sketch, Figma

首先，家伙事要齐全，电脑要有一个，台式机还是笔记本看个人情况，作者推荐是mac，理由是对开发者比较友好，用起来顺手，有些软件只有mac版本的，比如sketch，当然我的看法是，用linux作为开发电脑也没啥问题，更接近服务器部署环境。

编辑器，作为web开发，首推vscode，当然市面上也有讨论vim和xxx之战的长篇大论，我的理解是vim是一种编辑模式，vscode是ide，两种并没有直接冲突，都掌握就可以了。

浏览器，首选chrome啦，firefox市场占有率很低，个别喜好人士除外。

终端，这个没什么说的，喜欢，熟悉哪个，不用挑。

设计软件，对于自由职业者可能比较重要，还是adobe系列是王道啊。

HTML & CSS

作为前端开发者，无论什么级别，HTML和CSS都是基础，必须掌握的技能。

• HTML5（语义化，属性，文档类型等等）
• CSS基础（颜色，字体，定位，盒模型）
• CSS 栅格和flex布局
• CSS 自定义属性
• CSS 动画

同意，这方面的典范就是张鑫旭同学，如果对css或者html有疑问，只要在张同学的博客里面搜索一下，基本上95%的问题都能找到答案，这就是专业啊。css其实一直在与时俱进，时不时还是得回头看一下，总能习得一些过去不知道不会或者不熟悉的东西。作为初学者，最好扎扎实实将这两个基础知识学习透彻。

响应式布局

作为现代网站项目，响应式布局能力已经是一个对开发人员的基本要求了。话不多说。

• 视口
• 媒体查询
• 流宽度
• rem单位制
• 移动端优先

从上面几个方面去了解下响应式布局，然后做几个案例熟悉一下吧，不会太难的，注意，小程序里的单位是rpx（如果我没记错的话）

自定义可复用CSS组件

创建你自己的模块，熟练使用自己的可复用CSS组件。

Sass可以研究下。

• 变量化
• 嵌套式定义
• 条件定义

这里可以对postcss再多了解了解，当然一切以项目需要为基础。sass，less，stylus之类都可以去了解下。

CSS 框架

CSS框架特别多

• bootstrap
• tailwind CSS
• materialize
• bulma

不好意思，我知道bootstrap大名鼎鼎，其他的还了解semantic ui，大家去搜索一下css framework，会出来很多。这里还接触了一个新鲜的tailwind css，这个框架不提供成品组件，它觉得那些框架做的太多了，而是提供让你定制自己框架的能力，具体有兴趣的同学可以去了解下。

原生JavaScript

JavaScript是浏览器所使用的语言，也是web开发者所必须掌握的核心技能，让你的页面动起来。

• 基础（变量，数据类型，函数，条件语句等等）
• DOM（文档对象模型）
• JSON（懒得翻译了）
• Fetch API（请求/响应/Ajax）
• Modern JS（ES6）

不管vue, react, typescript 最后一切都回到JavaScript，所以一个初学者，还是要老老实实将JavaScript基础打牢，原生JavaScript语法和特性多了解，框架的东西都是基于基础上的一套理念的实现，各有各长处，甚至近些年还有一些反框架运动出现，提出了一切以业务目标为前提。ES6的标准，看看阮老师的教程学习一下。

五分之一分割线

工具箱2

以下列出一些前端开发者另一个工具箱里面的东西。

• git & github
• 浏览器开发者工具
• 编辑器扩展
• emmet
• npm/yarn
• axios
• webpack/parcel

版本控制，这个不可或缺哈，新近的开发者处于最好的时代，基本远离了ftp,svn，只要掌握git和github的基本使用，就可以活得不错了，有空的时候再熟悉熟悉git bash，掌握下基本的git操作。

熟练掌握浏览器开发者工具，chrome开发者工具即可，有余力的化，跟进下chrome每次版本更新的变化，保持知识的新鲜，也可作为与同好的谈资哈。

编辑器扩展，vscode或者其他现代编辑器，本身功能基本已经足够，但是仍然有一些个性化需求，是以扩展的形式来满足的，多尝试一些前辈觉得好的扩展，不过也不要太贪心，机器配置不好的化，只留必须的扩展就够了。

emmet 辅助html工具，不知道作者为什么单独拎出来强调这个哈。

npm/yarn 这个作为一个web开发，要有往全栈发展的觉悟，npm包是一个大海，一个星系，甚至是一个黑洞，好东西还是需要淘的。yarn个人觉得不用也可以了。npm ci已经基本够用了。

axios 这里我又不理解了，单独把这个拎出来讲是想表达浏览器从后台服务取数据的重要性吗，不过对于初学者，axios还是很大众的一个技能库。

打包工具，从简单使用到配置熟练，最后能掌握原理，提高打包效率，遇水架桥吧。parcel，号称性能比webpack还高，学有余力的同学可以多了解了解。

发布基础

web开发应该掌握一些基础的发布技能。

• 域名注册(Namecheap, Google Domains等等)
• 主机管理(InMotion, Hostgator, Bluehost等等)
• 静态主机服务(Netlify, Github Pages)
• SSL证书
• FTP/SFTP
• SSH
• CLI & GIT

大厂的同学，发布的工作基本是运维同学给做了，不过对于中小企业，很多可能还需要自己来操作，这里的技能基本都不太难，习惯了哪个，其他也基本能举一反三。比如域名注册，腾讯云、阿里云都提供了相应的服务，主机管理学问就大了，国内的选择阿里云、腾讯云、各种云，国外的选择也是选花眼。这个只能根据经验来了。最近国外有关虚拟主机vps的竞争还是很激烈的，基本都提供了免费1年，200、300美金不等的免费额度，可以多试试。

作者特别强调了Netlify，之前我也有使用过，github+netlify的确也是一个不错的选择，对于想体验自动化部署的同学来说，可以试试。

SSL证书，推荐letsencrypt 翻译成中文就是“让我们加密吧”，虽然长但是比较好记。现时很多环境下对https还是有很高要求的，免费的letsencrypt是不二之选啊。

FTP/SFTP 不想多少， SSH和基本的CLI命令行操作，后面的云主机部分还会涉及到，这些知识都渐进了解即可。

前端开发基础能力

综合上述知识，一个前端开发已经具备了以下能力。

• 为个人或小型商业机构建立站点
• 良好的移动端布局
• 创建CSS动画和效果
• 熟练掌握一个CSS框架
• 制作动态页面
• 使用JavaScript创建小型客户端应用
• 熟练使用浏览器开发者工具
• 具备熟练使用版本控制的能力
• 发布和维护小型的项目

不补充啥了，比较简单

接下来要干啥呢？两条路（向前还是向后）

接下来你将面临两个选择，不同的选择针对不同的学习路径。

• 继续走前端开发之路(React, Vue, Angular)
• 服务器端语言(PHP, Python, C#, Go等等)

看作者的描述就可以看出，前端开发没啥好选的，就三条路，服务器端有个等等，意味着选择的余地大多了。谁说前端就是花里胡哨呢，没事就弄个新东西出来，其实服务器端语言才是百花齐放，或者美其名曰解决不同的问题，这里不争论，继续往下走。

前端开发框架(三选一)

前端开发框架方便你快速构建强大的单页应用，具有统一的交互ui

• React 仍然是最流行的框架，中等学习难度
• Vue 持续增长中，最容易学习
• Angular 更多使用在企业级开发中，学习曲线陡峭

我也只是对React和Vue略知一二，这里大家可以自己搜索下各大中小公司对前端岗位的要求条件，大体看来Vue在中国还是比较火爆的，React在大公司中的使用比例也是非常高。

Svelte

• 编写更少的代码
• 不用虚拟DOM
• 非常快

作者非常喜欢的东西，我之前了解的也不多，就不瞎比比了，大意也是去框架化，仅用原生JavaScript来创造一些代码。推荐在小型项目和个人项目中试着使用体验以下。

状态管理

大型应用，基本上都会用到第三方状态管理工具库，不过尽可能少用吧。

• React – Redux, Context API with Hooks
• Vue -Vuex
• Angular – NGRX, Services
• Apollo Client

按作者的思路，比如React和Angular中已经有了一些状态管理工具的替代品（方案），所以尽量少用第三方的状态管理工具，奥卡姆剃刀来了，能少用就少用吧。

五分之二分割线

服务器端渲染（SS-R）

使用NEXT(React)和NUXT(Vue)来进行服务器端渲染

• 更-好-的-搜-索-引-擎-优-化
• 文-件-系-统-路-由
• 静-态-导-出
• C-S-S写在JS中

静态站点生成(SSG)

使用Gatsby(React)和Gridsome(Vue)来构建静态站点。

• 更好的搜索引擎优化
• 文件系统路由
• 构建时从本地文件获取数据
• 插件系统
• GraphQL获取数据

本人不才，新的博客就是用Gatsby来搭建的，之前是hexo，静态站点生成是一个趋势，对于想在互联网建立个人站点、或者小企业宣传站点的开发者，静态站点生成也是一个不错的选择，页面打开够快，维护也很方便。不过后面会提到，结合内容管理系统，事半功倍。

TypeScript

• 静态类型（变量，函数等等）
• 工具支持
• 模块、修饰器、类
• 编译成干净的JS代码

很遗憾，懒惰成性的我，一直说要学习下TS，可是始终还是没有系统学习下，随着大趋势来看，TS还是值得花点时间学习的，如果想继续往前端开发方向发展的话。毕竟微软爸爸的亲儿子，还是很强的。

总结SHIKE：前端路径图

• 熟练掌握一个前端框架
• 创造一些高阶的前端应用/接口
• 顺畅的前端开发流程
• 熟练与后台api进行交互
• 熟练管理应用和组件的状态
• JIAFEN项：服务器端渲染（S-S-R）/ JINGTAI站点SHENGCHENG（S-S-G）

上面的内容，加以多个项目的CHUILIAN，基本算是一个ZHONGJI的前端开发者了，下面我们要往全栈开发者的MUBIAO前JIN了。

服务器端语言(多选一)

要成为一个全栈开发者或者后台开发者，就需要学习一下服务器端程序语言和相应的服务器技术

• Node.js
• Python
• PHP
• C#
• Ruby
• GoLang
• Java
• Rust

各种语言的优劣就不细讲了，我也讲不来，Node.js是对前端开发者来说最好的入门选择，个人作为兴趣爱好，也用过一段时间的PHP和Python，脚本语言基本都是相通的。当然想更进一步的话，必须对服务器端技术有更深层次的认识，cpu、内存、进程管理等等。另外如果你对Web Assembly感兴趣的话，Rust就是比较合适的选择了。

服务器端框架（多选一）

• Node.js – Express, Koa, Adonis, Feathers.js, Nest.js
• PHP – Laravel, Symfony, Slim
• Python – Django, Flask
• C# – ASP.NET MVC
• Java – Spring MVC, Grails
• Ruby – Ruby On Rails, Sinatra
• Go -Reval

这玩意，怎么选，已有的项目选了什么，你学就是了，如果你要自己选择一个，我建议遵循这个原则：人员、业务、技术，必须保证有两个指标是成熟的，你所熟悉的。怎么理解呢，也就是说，千万不要在你不熟悉的业务领域选择一种新技术，那就是作死，如果开发这个项目的开发人员你还不是特别熟悉的话，回去准备一根绳子吧，长一点。上面说的那些框架，国内的使用情况和国外其实还有一些不同，具体情况具体分析。

五分之三分割线

数据库(多选一)

大多数应用需要一个地方来存储数据，数据库的选择也多种多样。

• 关系型数据库 – PostgreSQL, MySQL, MS SQL
• NoSQL – MongoDB, PethinkDB, CouchDB
• 云数据库 – Firebase, Azure Cloud DB, AWS
• 轻量级 & 缓存类 – Redis, SQLite, NeDB

附带学习： SQL, ORM, ODM等等

数据库的选择也多种多样，主要分关系型和其他。这里强调一点，无论选择什么种类的数据库，备份！备份！备份！一定是第一考虑的事情，丢数据的惨痛经历简直就是墨菲定律，没遇到的人不太多吧。

GraphQL

GraphQL是一种查询语言API标准

• 单一端点
• 简单语法，与JSON相似
• 容易实现
• Apollo

Facebook厂推出的这一数据获取协议，其实出来有些年头了，但是由于各种原因和阻力，仍然是一个趋势，看起来很美好。不多说。

内容管理系统

内容管理系统主要是给非开发人员使用的系统，方便更新站点的内容啥的。

• 传统的内容管理系统 – WordPress, Drupal, Keystone, Enduro
• 无界面内容管理系统 – Contentful, Prismic.io, Sanity, Strapi

这里主要分成传统的面向人类的和新增的一块面向机器或者说api的，静态站点生成工具结合无界面内容管理系统提供了展示界面的无限可能。

发布和DevOps

理解如何创建和管理环境并发布至网络

• SSH(Secure Shell)
• Web服务器环境 – nginx, Apache
• 应用主机供应商 – Linode, Heroku, AWS, Azure, Now
• 虚拟化 – Docker, Vagrant
• 测试 – 单元测试, 功能测试, 集成测试等等
• 负载均衡，监控，安全等等

这里的内容其实最多了，涉及发布和开发运维合作的方方面面，也是前端开发者所亟需加强的能力领域。每一个话题都不小，根据自己的情况决定学习的先后顺序吧。

五分之四分割线

全栈开发

对上面内容的掌握之后，你基本上算一个全栈开发者了，你现在能创造一些强大的、数据驱动的web应用了。

• 使用你熟悉的前端技术构建用户交互界面
• 熟练使用服务器端语言和框架
• 环境熟练配置，开发流程流畅
• 熟练创建后台应用，api，微服务等等
• 熟练各种数据库操作，SQL，ORM技术
• 发布产品至线上（SSH，Git，云等等）

这就是一个全栈开发者了，技术含量啥的先不说，需要掌握的技能可不少。下面继续看看，成为一个全栈开发者之后，还可以做些什么。

移动端开发(多选一)

web开发者继续将手伸向移动app，无影手展开，可选的技术栈还真多。

• Flutter – google提供的sdk来构建原生app。使用Dart语言
• React Native – 使用React框架来构建原生app
• NativeScript – 使用JS, TS, Angular或者Vue来构建原生app
• Ionic – 使用JS来构建混合移动应用
• Xamarin – 使用C#来构建原生应用

前端开发终于不再满足与web应用，将魔掌伸向原生app。不多赘述。

PWA: 渐进式web应用

PWA是一个常规的web应用，但是感觉上像原生应用一样，体验更好。

• 在不同尺寸上运行良好
• 离线情况下也能部分运作（Service Worker）
• 可安装
• 启动界面
• 必须是https
• 可靠，快速，优秀

说实话，除了向终端伸出魔掌之外，在web应用的一亩三分地里还是有一些其他的学习园地的，例如这里的PWA，虽然看起来离线运作是个噱头，不过大家可以学习下Service Worker的使用，自有其特定的使用场景。自己琢磨哈。

桌面应用领域 Electron

使用Electron，我们可以基于JavaScript语言来创建跨平台桌面应用。

• 使用Node.js和Chromium
• 数据安全
• 高性能
• 易用
• 成熟产品：vscode, atom, postman, discord

web应用还有另一块地，桌面应用，目前的头部玩家基本锁定了是Electron了。

JAMstack

“Javascript, APIs & Markup” 一种纯前端的技术栈，使用JS和API以及一些标记语言构建应用，是一种现代的web开发架构。

• 不限制框架和库
• 站点以静态页面的形式提供服务，这些页面则是使用一些静态站点生成器来生成
• 性能高，在发布时生成
• 便宜，非常方便规模化
• 容易部署

当然具体问题还是要具体分析，这些开发架构都依赖与具体的项目。了解一下也好。

无服务架构/云函数Serverless

不需要真正拥有自己的服务器的架构

• “后台” 或者 “函数” 作为服务 (FaaS)
• 降低复杂度和开销
• 管理更少的基础架构
• AWS Lambda 和 Netlify

开发过小程序的同学可能对云函数这一点有着更深的理解哈。这里的技术要点基本就是全栈开发的反向，web更向前端转化，服务器管理的任务依托第三方服务商来提供，比较适合中小型的项目。

API优先设计

随着物联网的流行，api优先的设计方式开始越来越多。

• 传统方式下，我们首先设计出UI，然后后台
• api优先设计，我们首先设计api，然后基于此构建不同的界面

这也是一个大的趋势，api优先。然后移动、pc、电视、pad等等，各有不同。

机器学习/AI

机器学习和AI在不同领域都有着广泛的应用，并可以和web应用/服务结合。

• 提到常规的数据挖掘
• 减少安全威胁
• 机器学习api
• 制造内容
• 辅助学习人类行为
• 等等等

我表示，没有更深见解。

语音识别

语音识别是2020之后的一个主要趋势。

• HTML5 Web Speech API
• Google Speech-To-Text
• 人机对话

语音识别还是需要有着特定的使用场景供前端来发挥的。国内大厂的api对于中文的识别还是很棒的。百度、腾讯智聆等等。

Web Assembly

浏览器中运行的字节码程序

• 使用C, C++和Rust编写生成
• 比JavaScript运行快多了
• 不是JavaScript的替代品，而是一起工作的伙伴

JavaScript是老板，指挥Web Assembly干啥干啥。通过这种结合，给了我们一种在web浏览器端运行大型视频编辑工具、游戏等等一种可能。

总结陈词

不要被上面一大推东西，术语啥的给吓趴，自己多做些研究和了解，看看结合你自身的需求，你到底要做什么，来选择学习对应的技术，选择不同的学习路线。你学的东西越多，后面的东西就越没啥难度。

基本就是这些，对于国内的web开发者们，各种小程序的开发也是一个重大的话题，微信、支付宝等等巨头毕竟是国内开发者绕不开的大山哈。

end 2019-12-08 17:18

今天下午是第二遍看这个视频了，顺便翻译一遍分享一下，如果有不同的看法，欢迎去原作者那里去怼。