2019年前端工程师应该学什么？

　　参加工作三年多了，最近业务不是很忙，心里反而空落落的。最近参与了一个公司UI库开发，发现自己不懂的东西实在太多。以此为契机吧：

1. 有必要把近两年的经验知识沉淀一下，与标准和文档进行一一印证，查漏补缺。 2. 工具不仅要会用，用的好，还要知道原理。 3. 即便是有些知识暂时用不到，作为一名有点追求的工程师，应该提前做一些知识储备。

　　写到此处惊觉自己这两三年在技术上还是成长了的，2016年我需要看着前辈们的分享，大家说有用我就学，听前辈的总没错，2019年我可以根据自己的经验和体会总结出该怎么去系统的学习了，并且轻重缓急自己心里都有底。

　　现在返回到标题，前端工程师应该学什么？我写了一个大纲，但里面的学习目标是对自己说的，发出来一是为了跟大家分享一下，共同学习；二是希望你们帮我看看，有没有遗漏下的。

　　我的自我定位并没有找准，前端领域太广，到底哪个点最适合自己，并且值得深入钻研？我不知道。但先全学一遍，查漏补缺总没错的。

　　我觉得自己仍然，仍将，一直都会是一名前端小学生。

　　本文没有劝退效果，请放心阅读。如果你是应届生，找准自己的定位，慢慢来。

 

前端工程师

一、语言基础

HTML相关

• HTML标准，跟进了解最新的HTML标准更新。
• HTML标签语义化，嵌套标准等。
• 可访问性。

学习目标：重新梳理各标签关系。面向国际、未来的网页结构，符合可访问性规范。

CSS 相关

• CSS标准，跟进了解最新的CSS标准更新。
• CSS属性，最新属性等。
• CSS编程，Houdini。
• Web Fonts

学习目标：重新梳理css属性之间的关系，更多的功能尝试使用css实现。掌握关注最新的css发展。

JavaScript相关

• ECMAScript标准，最新提案等，浏览器DOM，BOM。

学习目标：熟悉JavaScript的基础API，参数搞清楚。掌握最新的JavaScript语言动向。

Node.js相关

• Node.js 全局API，原生模块等，了解最新的Node.js动向。

学习目标：熟悉Node.js基础原生API的作用和使用。为学习服务端开发打下基础。

TypeScript(TS)

• TS大火，成未来开发趋势。
• TypeScript的使用。与JavaScript API的区别

学习目标：熟练使用TypeScript。

AssemblyScript(AS)

• 除了可以将c\c++，Rust，Kotlin，Golang等高级语言转译为WebAssembly字节码外，一门全新的语言AS也可以。AS是TS的严格子集，可以一并学习为WebAssembly开发打下基础。
• AssemblyScript的语法和使用

学习目标：了解基础语法，可以将AssemblyScript文件编译成.wasm格式。有了它，可以不用去复习C/C++了。

Dart

• Flutter持续火热，Dart作为开发基础，应该掌握
• Dart的语法，了解与JavaScript的区别。

学习目标：熟练使用Dart语言。

Markdown

• 语法，使用。
• 写文章，写文档必备

学习目标：熟练使用Markdown写文章，项目文档等。

Shell脚本

• 语法，常用函数

学习目标：可以使用shell编写出比较常见的程序。

SQL语言

• 常用语法，函数

学习目标：可以写出常见的CARD查询的sql语句。

二、计算机基础

数据结构与算法

• 经典算法的思路
• 常用的数据结构

学习目标： 熟练掌握经典的算数思想，以便应用到业务代码中来，会在合适的场景选择最优的数据结构。

计算机网络

• HTTP协议，TCP协议，UDP协议
• HTTPS，HTTP2
• DNS
• WebSocket

学习目标：掌握并了解这些网络协议的原理，可以用以实践。

电子计算机组成原理

• 进制
• Unicode，ASCII，UTF-8等编码
• 计算机工作原理

学习目标： 了解自己的伙伴，为了解“云”主机、虚拟主机奠定基础。

操作系统

• 计算机操作系统原理
• Linux操作系统的使用

学习目标：了解操作系统是如何工作的，可以自主使用linux操作系统，掌握常用的命令。

三、进阶

工程化

• webpack
• rollup
• babel 使用与原理，可以用来与ECMAScript最新语法一一印证。
• eslint,stylelint,prettier等代码风格与语法审查工具的使用
• unit test库或工具的使用
• sass编程，语法
• postcss后处理器
• uglify原理与实现
• 多人git协作流程
• gitlab的搭建与使用
• CI/CD
• git hooks, husky,commitlint
• 文档输出，StoryBook，gitDoc，gitbook等
• npm, lerna
• yarn
• markdown render。markdown写的示例可在线执行
• 模块化，js模块化在ECMAScript和Node.js已经学习过，这里主要是指css模块化的几种方式
• 数据mock

学习目标：可以从无到有快速搭建起一个多人协作的现代化前端工程项目，选择合适的工具提高开发效率，保持团队成员代码风格统一，并最大限度的利用工具保障代码质量。

组件化

• Vue
• React
• WebComponents
• 浏览器兼容性，canIUse

学习目标：熟练使用Vue，React进行开发，了解组件化未来趋势WebComponents。掌握数据驱动思想，掌握经典的双向绑定实现原理，阅读源码，深入了解。掌握衍生产物如前端路由，数据管理的设计思想和实现。

基于Node.js的Web服务开发

• koa
• express
• pm2
• RESTFul 风格
• 进程管理
• 数据持久 MongoDB，mysql等
• 数据缓存 redis等
• 长链接服务
• SSR
• Docker
• Nginx配置, openresty
• 云主机，共享主机等

学习目标：可以独立完成Web服务的搭建和部署。

基于Node.js的CLI开发

• 常用的CLI开发库和原理
• 比较流行的CLI库的设计思想，实现思路

学习目标：可以独立开发CLI，当有需求时，可以快速定位到此方案。

桌面应用开发

• Electron
• NW.JS

学习目标：了解一种基于JavaScript的桌面应用的开发，当有需要时，可以迅速定位到此技术方案。

移动应用开发

• Flutter 及相关衍生技术
• React Native及相关衍生技术
• PWA
• WEEX

学习目标： 了解和掌握。可以使用Flutter或RN开发一个移动APP。了解PWA。

第三方平台开发

• 微信小程序
• 支付宝小程序
• 百度小程序
• 快应用
• wepy
• mpvue
• taro
• …

学习目标：可以快速上手任何一种开发小程序。了解小程序的实现方案。了解业内流行的小程序开发库的实现思路。

插件开发

• chrome插件API
• DevTool扩展
• VSCode等IDE插件开发

学习目标：了解插件可以做到什么，当有需要时，可以迅速定位到此方案来。

浏览器工作原理

• 排版引擎，浏览器渲染原理
• 脚本解释引擎，脚本运行原理，v8
• headless无头浏览器，puppeteer

学习目标：掌握浏览器工作原理，可以应用在性能优化和自动化测试上。

性能优化

• RAIL 模型
• 硬件基础：帧、帧率、显示器绘图原理
• 渐进式网页指标（Progressive Web Metrics，简称 PWM’s）
• 常用的性能优化手段

学习目标：了解性能优化手段，写出性能优异的Web应用。

Web浏览器安全

• 浏览器安全策略：同源策略，内容安全策略，沙箱
• 常见的攻击方式：XSS，CSRF
• 其它：CRLF攻击， DNS劫持和DNS污染，点击劫持，浏览器插件漏洞攻击等
• 了解常见对称加密和非对称加密算法

学习目标：了解常见的Web浏览器攻击手段，避免写出有安全隐患的网站。

Web服务器安全

• 常见攻击手段：目录遍历，DDOS，重放，密码破解，SQL注入
• 其它攻击手段：CC攻击，端口渗透

学习目标：了解常见服务器攻击手段和原理，避免写出有明显漏洞的Web服务。

监控统计

• 前端脚本错误监控：错误堆栈形式，实时监控实现方式
• 前端性能监控：性能指标，实现方案
• 服务端监控：硬件监控，系统监控，应用监控，网络监控，流量分析，日志监控，安全监控，API监控（可用性、正确性、响应时间），性能监控，业务监控

学习目标：掌握如何自主建设或搭建开源监控平台。了解一些常见的监控指标的含义。如性能相关的指标TTLB、QPS是什么意思，业务相关的指标PV，UV，CTR等等代表什么。

可视化

• canvas进阶
• svg进阶
• WebGL基础
• 计算机图形学
• 常用库：ECharts, D3等

学习目标： 这是面向未来的前端技术。了解常见的可视化技术方案，当有需求时可以迅速定位方案。关注并可使用最新的技术开发酷炫的应用，实现数据可视化。

SEO

• 搜索引擎爬虫原理
• 搜索引擎权重算法
• 与SEO相关的网页标签

学习目标：了解搜索引擎的实现原理以及搜索结果的排序算法。如果是对外的网站，可以自主完成简单的SEO，使网站在搜索引擎中的排名尽可能高些（不是花钱竞价排名哟）。

开发与调试

• 浏览器脚本调试
• Node.js 调试
• Chrome Dev Tools进阶使用（环境模拟，渲染性能，内存使用，端点调试，抓包，控制台内置函数等等）
• IDE
• 使用帮助开发的插件，如拼写检查等。

学习目标： 熟练掌握Chrome调试工具的使用，对于脚本开发、性能优化都大有裨益。掌握Node.js服务的调试方法。

UI库

• UX基础
• 色彩原理，色光三原色，网页色彩表示方法
• 网页色彩搭配原则，色彩心理学
• 常用UI组件的实现
• 常见UI组件的使用和源码

学习目标： 具备一定的美感和用户体验关注度，当没有设计师参与时，可以自主设计一些交互方案，了解常见UI组件代表的含义，可以在合适的需求上使用合适的组件。了解常用UI组件的设计与实现思路，可独立开发UI组件库。

WebAssembly

• 原理
• 优势
• 简单应用开发

学习目标： 了解WebAssembly字节码的开发流程，了解其在浏览器中的运行方式，当需要时，可以快速定位到此方案。

WebRTC

• 实时通讯方案
• 了解并进行可简单开发

学习目标： 了解并关注WebRTC技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。

WebXR

• 使用JavaScript开发VR和AR
• 了解WebXR API，跟进草案进程

学习目标： 了解并关注WebXR技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。

WebAuthn

• 使用浏览器进行生物鉴权
• 了解WebAuthn API，并进行简单使用

学习目标： 了解并关注WebAuthn技术，了解其标准，实现原理，当需要时，可以快速定位到此方案。

 

　　本文发布于《一个小学生的博客》，转载请注明出处。

　　全文完。