2018前端开发进阶之路

时间 2019-11-08

标签前端开发进阶之路繁體版

原文原文链接

前言

前端技术近几年发展十分迅速，各类框架层出不穷让人目不暇接，好不容易掌握了一个前端框架结果还没深刻理解又出现了新的框架，让前端的开发同窗们累觉不爱。前段时间Node.js做者推出新的框架deno，在issue区内就出现了“求不要再更新了，学不动了”的吐槽。javascript

做为程序员必定要不断学习、了解最新的技术框架才能让本身立于不败之地。幸运的是，有很多人帮助指引可行的道路，帮助你们避免那些无用的路径。Kamran Ahmed写了一篇很是好的博客，介绍了他认为的2018前端开发的进阶之路。你们能够去GitHub上面找到：https://github.com/kamranahmedse/developer-roadmap
Kamran Ahmed在博客中提到：前端

这个路线图的目的是给你一个关于前端总体知识体系的概况, 在你困扰于下一步应该学习什么的时候指导你, 而不是鼓励你学习什么是时髦的技术。你应该增长一些理解为何一个工具会比其余更好地适合某些状况, 并记住时髦的技术历来不是意味着最适合的工做。vue

2018前端开发进阶之路

基础篇

学习前端技术的基本三大组件：HTML、CSS、JS。这是前端开发的基础，虽然这些技术已经存在很长时间，近几年也是有不少新的技术不断发展出来。java

基础知识相关资料react

w3cSchool: https://www.w3cschool.cn/ -- 在线编程学习网站
MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/ -- Mozilla的官方网站，能够用于查找HTML、CSS、JS等标准API规范
阮一峰博客：http://www.ruanyifeng.com/blog/ -- 阮一峰的博客，有很是多的科普型文章

除去一些基础的知识以外，还须要了解一些进阶扩展的内容。webpack

HTML5
HTML5是下一代HTML标准，目前大多数现代浏览器都已经支持，在原有HTML标准的基础上额外提供了有趣的新特性：git

canvas - 用于绘画的标签
video和audio - 用于播放视频和声频的标签
本地离线存储
地理位置定位
更强的表单校验
...

CSS3
CSS3是最新的CSS标准，提供了一些新的特性：程序员

边框和阴影
文本效果和字体
2D和3D转换
动画
...

ES六、ES7angularjs

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版之后的 JavaScript 的下一代标准，涵盖了 ES201五、ES201六、ES2017 等等。es6

随着现代浏览器的发展，愈来愈多的浏览器支持ES6甚至ES7的语法，经过Babel能够将ES6/ES7的语法转换成ES5，从而在现有环境中能够运行，所以ES六、ES7基本成为了现代JS语法的开发标准。

ES六、ES7提供了大量的JS语法的扩展和改进：

let语法
解构
数组的扩展
对象的扩展
async/wait对于异步的支持
Module的支持

这些语法的扩展和改进使得JavaScript语言吸取了大量现代语言的优势，大大提升了开发效率。对于ES6语法的细节能够参考阮一峰的ECMAScript 6入门：http://es6.ruanyifeng.com/

浏览器的碎片化一直对于前端开发是个巨大的挑战，好在移动互联网时代中手机浏览器对于新的标准跟进要远远好于PC时代。固然对于采用一些新的API或者特性的时候仍是须要考虑兼容性，能够经过https://www.caniuse.com/这个网站查看浏览器的支持状况。

前端工程化

随着前端技术愈来愈复杂，对于工程化的要去也要求愈来愈高，这里也提到几个目前前端工程化必不可的几个工具。

NPM、Yarn
相似于Java中的Maven、iOS中的CocoaPods，NPM和Yarn是前端项目中的依赖包管理工具，经过配置文件能够很是方便的设置第三方依赖，能够控制特定版本或者更新。
NPM - https://www.npmjs.com/
Yarn - https://yarnpkg.com/zh-Hans/
对于NPM和Yarn的区别，这篇文章应该能够帮到你：Understanding differences between npm, yarn and pnpm

构建工具

Webpack
官网：https://webpack.js.org/

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

静态代码检查
经过静态代码检查能够帮助解决一些明显代码问题，而且能够落实一些代码规范。静态代码检查能够在平常开发过程当中或者最后发布过程当中使用。

ESLint：https://eslint.org/ -- 基于ES6语法的静态代码检查
Airbnb JavaScript Style：https://github.com/airbnb/javascript -- Airbnb的JavaScript规范提供很是多的好建议，若是须要自定义本身的代码规范最好从这个模板开始

静态类型检查
JS的一个比较严重的问题是在于对象类型的检查，它不像其余面向对象语言例如Java、OC等有严格的编译阶段的类型检查。因此JS的代码每每很容易出现类型错误，并且在编写复杂应用的时候若是出现对于方法声明的修改也会是噩梦般的体验。
目前JavaScript生态中有两个不错的静态类型检查的工具：

TypeScript：https://www.tslang.cn/ - JS的超集，支持完善的类型检查扩展，从语法层面来看更接近面向对象的语法概念，对于一个复杂前端工程推荐使用。
Flow：https://flow.org/ - JS代码的静态类型的检查工具，能够经过声明对象的类型达到静态类型的检查，比较轻量级而且对于现有代码侵入性较少，容易上手。

前端框架

前端框架最近层出不穷，每隔几年都会出现一些新的框架，流行一段时间而后再出现新的框架，所以做为前端工程师须要不只仅了解框架如何使用，还须要清楚哪一个框架在哪一种场景下最适合。
目前前端框架主要有三个：React、Angular和Vue。下面是npm服务器下载量趋势对比：

能够看出React的优点很是明显，并且差距愈来愈大，Angular也比较流行，Vue在国内会更加流行。三个框架各自都有不错的生态，社区也都很是活跃。

React
官网：https://reactjs.org/
React有几个显著的特色：声明式、组件化、Virtual Dom、高性能，同时整个生态最为完整和活跃，衍生出React Native的框架能够在智能手机中实现多端的高性能渲染。

React的生态扩展：

状态管理：Redux和Mobx - 经过这两个状态管理库能够更好的管理组件的State，将UI组件和数据状态解耦，而且经过纯函数的模式能够实现UI状态的可预测性。
React Native：https://reactnative.cn/ - RN应该是React框架目前领先的一个重要因素，经过Virtual Dom实现了对于iOS、Android的原生组件的渲染，因此它结合的Web开发的效率和原生组件的用户体验，所以如今有大量app开始采用这个框架来进行开发。
Next：https://www.npmjs.com/package/next - 基于React的服务端渲染框架。

Angular
官网：https://angularjs.org/

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Rx.js：https://cn.rx.js.org/ - RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。

Vue
官网：https://cn.vuejs.org/

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。

Vue的生态扩展

Vuex：https://vuex.vuejs.org/zh/ - 专为 Vue.js 应用程序开发的状态管理模式，相似Redux和React的关系。
Vue Server Renderer：https://ssr.vuejs.org/zh/ - 基于Vue的服务端渲染框架。

测试框架

JavaScript的测试框架有许多，不一样框架的侧重点不太同样，因此须要理解每种测试框架的用途，挑选最适合你的框架。
一些参考的对比文章：

有些框架会更多的面向逻辑的Unit Test，有些框架会更多的面向组件UI的Unit Test，根据你的需求进行挑选，而后最重要的是将业务逻辑从UI组件中尽可能抽离，设定一个覆盖率的标准，搭建一个CI/CD的集成环境持续保证代码的质量。

其余的前端技术

前端和移动端的融合是大势所趋，美团有个技术分享关于动态化技术方案总结值得你们参考，根据开发模式和偏Native/H5两个维度区分出几种技术方案。在前端并不存在普适的方案，任何技术方案都须要结合业务场景，才能找到最合适的方案。

总结

前端的工程师是极其苦逼的一群人，须要不断的学习新的技术、框架，可是须要站在更高的角度去了解各个技术的优劣点，找到解决业务发展的痛点，融会贯通才能轻松应对。
曾经有人说过，“只要是JS能实现的地方，最终必然会用JS来实现”，前端的技术之路是曲折，前途是光明的，你们一块儿努力！

有兴趣同窗能够关注微信公众号奶爸码农，不按期分享投资理财、IT相关内容：