web开发2020年趋势分析（概转）

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

今天下午是第二遍看这个视频了，顺便翻译一遍分享一下，若是有不一样的见解，欢迎去原做者那里去怼。