前端1年学了node等7门技术感觉累！网友：这些我做后端的都知道！

于web开发，在第一代web开发时，基本上都是静态网页，大多数是html，连js都很少写，那时候还是后端开发工程师的天下，前端还称不上开发工程师，当时觉得前端很弱的样子，可什么事情都不是一成不变，自从移动互联网时代的到来和html5问世，前端页面的表现形式越来越多样化，各种前端技术，前端框架纷纷出现，关于前后端的技术比重又重新洗牌，前端的地位逐渐与后端均衡甚至有超越后端开发的趋势，近期一名前端开发工程师分享了他的一些情况。

据这名前端开发工程师说，他已经参加工作一年了，在这一年内，他除了工作之外，已经学习了7门技术，webpack，es6，react，node，koa，css3，html5，另外他还感觉自己挺累的，对这些技术的了解程度他都是处在会用的阶段，并没有看过源码，当然如果是认真看源码的话，估计一年也没精力学这么多，他还问大家这个进度如何，是不是太慢了，针对他的情况，让我们先来看一下网友们是如何看待的吧！

网友一：这些东西我大学就会了，有点基础的想会用这些东西全部加起来可能只需要一个月的时间而已，想要有竞争力必须要有专精的领域，例如可以自己用c++写个node轮子出来

上世是朵花：了解，会，熟练，精通这中间有很大的差别，在这个行业内，大家会的东西都差不多，从广度看大家涉猎面一样，可是薪资跨度却很大，这就是与技术深度有关了，当然，也没有必要重复发明轮子呀，站在巨人的肩膀上也是可以做巨人的，但是前提是首先要把别人发明的轮子吃透了，不了解底层原理，对上层的发挥也是受限的。

网友二：会用是说用的很熟练嘛，说的太宽泛了，实现原理知道吗，自己写过组件嘛。不要太着急，找一个感兴趣的往深得挖。

上世是朵花：是的，结合工作中的实际需要，选一门技术，在深度上挖掘一下是很有必要的，这样对自己的竞争力是很有优势的。

网友三：确实太慢了，还是非常low的阶段。不过技多不压身，慢慢来。

上世是朵花：此言差矣，单看数量没什么意义，需要看都是掌握到什么程度，如果一年就是深度掌握两门技术那也是很不错了。

网友四：你说的这些，作为后端的我也知道

上世是朵花：知道这个词就显的苍白无力了，我可以认为知道就是“听说过”，这个显然是没有什么学习成本，只是停留在一个概念，一个词汇而已，或者就是了解其中一些皮毛。

网友五：毕业一年，工作里用到vue react koa mysql redis mongodb，仍然觉得自己啥也不会

上世是朵花：这种感觉是正常的，如果一个人觉得啥都会了，说明他不知道他还不会的有很多，说明他的视野已经受限了，就像井底的青蛙以为它看到了整个天空一样。

网友六：这些刚接触前端半年就会了…

上世是朵花：还是那句话，会的程度不一样。

网友七：蚂蚁金服封装了一套，ant-design+dvajs+umijs，底层也是你学的这些。前端能精通也很厉害了，开发效率，高性能都是有很大意义的

上世是朵花：没错，如今的前端已经不是以往的前端了，可发挥的地方真是太多了。

网友八：这其实就是大部分人的现状，只会用人家写好的轮子写没有价值的业务代码。

上世是朵花：这就是自然规律呀，什么事情都是发明者是少数，使用者是多数，都只是发明，都不去使用的世界你认为存在么？还要纠正一点就是写业务代码为什么就没有价值了?什么事情不都需要有人去做么？如果都没人去做那就彻底创造不出价值了。

从大家的评论中可以看出，有的认为学这么些技术已经很厉害了，而有的网友则认为学这些太少，或者说不值一提，自己大学都学过，自己作为后端都会，这样的回答显然是肤浅了一点，这样的观点都是停留在广度上，单独从技术数量谈学习进度都是没什么意义的，如果对这些技术了解的程度都是一知半解，那就是毫无意义的，在这样的基础上的评价也是毫无价值的，通过这个案例告诉我们，平时学习技术不要为了学习去学习，也不要盲目的去追随新技术，不要做猴子掰苞米的行为，学一样，丢一样，到头来什么技术都没沉淀下来，应该结合自己的实际情况，去选择一门有用的技术深度挖掘，不是停留在了解阶段，不但知道其然，也要知道其所以然，只有研究的越深，对底层的原理及思想才能更了解，这部分技术知识才更容易沉淀下来。

以上所有图片均来之互联网

大家好，我是“上世是朵花”。如果你有什么好的看法或者观点可以在评论区展现你的才华，互动交流，如果想进一步了解我，那就关注我吧！

言语法层面

1：ES6

标配各种特性要熟练掌握应用。

ECMAScript 6文档：http://caibaojian.com/es6/

ES6中文手册：https://www.jianshu.com/p/b6c882e59b07

官网：http://www.es6js.com/

2：TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。学完你肯定会后悔，后悔为啥没有早点学，TypeScript是一个帮你提高代码质量的东西，一定要学习哦。

TypeScript 中文网：https://www.tslang.cn/

TypeScript 入门教程：http://www.runoob.com/w3cnote/getting-started-with-typescript.html

3：Rust

可能在学习 Rust 的过程中会遇到不少困难，它的学习曲线确实比较大，Rust 虽然定位是一门系统语言，但是其实在 Web 领域已经是老熟人了，计划用Rust写点wasm。

4：Dar

对 Flutter 的宿主语言 Dart 进行了一些简单探索，Flutter & Dart 、是跨端的一个方向，但是目前的问题仍然多多。

Dart中文社区：https://www.dart-china.org/

5：WebAssembly

WebAssembly是近年来非常流行并且发展很快的一种语言（实际上我觉得称其为运行机制很合适），WebAssembly 的日益成熟，也带来了很多新奇的玩法儿。

官网：https://webassembly.org/

框架层面

1：Vue 2.0

Vue 2.0不多说了，花一个月的时间写个小项目练手，并且写一套专题技术博客。

文档：https://cn.vuejs.org/

社区：https://www.vue-js.com/

关注 Vue 3.0 的进展；

Vue CLI 3：https://cli.vuejs.org/

2：React

React 并非很差，但我发现它太笨拙，难以掌握，而且有些地方的代码看起来完全没有逻辑性。

React 持续跟踪升级，使用 Hooks 与 Suspense 改造现有项目，使用 Context API 替换项目中的 mobx 状态管理，使用React实现交互式组件的新方法，称为Hooks：https://reactjs.org/docs/hooks-intro.html

React 中文文档：https://react.docschina.org/

社区：http://react-china.org/

菜鸟教程：http://www.runoob.com/react/react-tutorial.html

3：Angular

Angular 的“用过但是不想再用“的比重又大了，可以自行决断是否要学习，了解即可。

官网：https://angular.cn/

Angular2.0之前的版本（1.x）中文网：http://www.angularjs.net.cn/

数据层

1：Redux

Redux 目前用户很多，Redux因其简单易学体积小在短时间内成为最热门的前端架构。但是 React 新的 Hooks等不知道会不会在来年给它带来影响。

Redux 中文文档：https://www.redux.org.cn/

2：GraphQL

GraphQL 和 Apollo 这段时间一直被讨论宣传，调查显示有非常多的人想要学习了解，可以关注下，Graphql + Apollo 学习与实践

http://graphql.cn/

http://graphql.cn/learn/

JS 后端框架

1：Express

Express 一家独大，基于 Node.js]平台，快速、开放、极简的 Web 开发框架：http://www.expressjs.com.cn/

菜鸟教程：http://www.runoob.com/nodejs/nodejs-express-framework.html

2： Next.js

Next.js 想学的人比较多，提供一些学习资料。

Nextjs中文文档：https://www.jianshu.com/p/8d070e2b39a5

Next.js中文站点 http://nextjs.frontendx.cn

Next.js中文站Github https://github.com/raoenhui/next-site-cn

3：Koa

Koa 在国内的欢迎程度比较高，不妨多看看。

基于 Node.js 平台的下一代 web 开发框架：https://koa.bootcss.com/

另外，国内比较知名的 Egg.js 和 Think.js 等可以了解。

4：Egg.js

egg 为企业级框架和应用而生：https://eggjs.org/zh-cn/

快速入门https://eggjs.org/zh-cn/intro/quickstart.html

5：Think.js

官网：https://thinkjs.org/

文档：https://thinkjs.org/zh-cn/doc/2.2/app_structure.html

测试框架

使用分布比较匀称，Jest 和 Mocha 比较靠前，

jest 是facebook推出的一款测试框架，集成了很强大的功能。

但是 Mocha 相比略有下降趋势。

Enzyme 也还可以。

教程：https://www.jianshu.com/p/eaaf07c1b88f

跨端框架

Electron 和 React Native 排名比较靠前，受到广大开发者的喜爱和追捧。

1：Electron

Electron这个玩意简直是做团队内部工具的利器，也是前端老手秒上手的东西，可以给团队做些玩意了。

使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用：https://electronjs.org/

Electron 文档：https://electronjs.org/docs

Electron 中文文档：https://www.w3cschool.cn/electronmanual/

2：React Native

React Native中文网

使用JavaScript和React编写原生移动应用：https://reactnative.cn/

当然今年 RN 发展很不顺利，被很多大公司移除掉了，继续关注后续发展。

3：Flutter -跨端解决方案

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，前端对于 Flutter 的热忱度之高一度让人有点惊讶，事实上我在 Flutter 社区内见到的客户端开发者远多于前端开发，不过前端对于跨端解决方案确实有着天然的渴求。

Flutter中文网：https://flutterchina.club/

后端编程语言

1：Python

Python有大数据处理、数据分析、人工智能加持，学完 Python，可以上天，一款集入手快、颜值高、内涵丰富、效率高、应用广的编程语言，让Python轻松俘获从业人员的心。

Python 基础教程：http://www.runoob.com/python/python-tutorial.html

2：PHP

PHP 符合预期，PHP是一种通用开源脚本语言。它的语法吸收了 C语言、java语言和Perl语言的特点，使用广泛，主要应用于web领域。

菜鸟教程：http://www.runoob.com/php/php-tutorial.html

教程：http://www.w3school.com.cn/php/index.asp

构建工具

1：Webpack

Webpack 一家独大，第二是 gulp，第三是 Grunt，后两者应该都在慢慢下降

webpack中文文档：https://www.webpackjs.com/

2：gulp

gulp：https://www.gulpjs.com.cn/

Grunt：https://www.gruntjs.net/

3：Grunt

Grunt中文网：https://www.gruntjs.net/

工具库

Lodash、Moment 以及 jQuery 排名靠前。

1：Lodash

Lodash中文网：https://www.lodashjs.com/

2：Moment

Moment中文网：http://momentjs.cn/

Moment 现在一般用 date-fns 代替，函数式而且很轻巧，Moment 体积太大。

浏览器 API

Service Workers、PWA、Web Components 这三个比较靠前，

知道 Web Components 啥时候才能被大规模使用，反正 Polymer 看数据基本凉透了。

Service Workers：https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

Web Components：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

PWA: 持续关注，不过这玩意其实真的很简单很简单，只要学会 Service Worker + Cache API 就算掌握了 80% 了，需要的时候再学也来得及。

微信小程序

随着各种方案（mpvue 、Taro等等）出现，也变得越来越成熟了。

1：mpvue

mpvue官方文档：http://mpvue.com/mpvue/

2：Taro

Taro 是一套遵循 React 语法规范的多端开发解决方案

Taro文档：https://taro.aotu.io/

其他热点技术

1：Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

文档：https://vuex.vuejs.org/zh/

2：rxjs

RxJS是一个异步编程的库，同时它通过observable序列来实现基于事件的编程

中文文档：https://cn.rx.js.org/

3：Docker

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中。

4：Deno

运行时：Deno：返回deno社区继续参与deno

5：Lavas

基于 Vue.js 的 PWA 解决方案：https://lavas.baidu.com/

把这些作为自己来年的一个flag，然后年终的时候能够完成以上的一半的内容我就已经很开心了，大家一起努力进步吧。

间件用法——讲解 Koa2 中间件的用法及如何开发中间件

iKcamp 制作团队

原创作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃

文案校对：李益、大力萌、Au、DDU、小溪里、小哈

风采主播：可木、阿干、Au、DDU、小哈

视频剪辑：小溪里

主站运营：给力xi、xty

教程主编：张利涛

视频地址：https://www.cctalk.com/v/15114357763623文章

middleware 中间件

正是因为中间件的扩展性才使得 Koa 的代码简单灵活。

在 app.js 中，有这样一段代码：

app.use(async (ctx, next)=>{
 await next()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>' 
})

它的作用是：每收到一个 http 请求，Koa 都会调用通过 app.use() 注册的 async函数，同时为该函数传入 ctx 和 next 两个参数。而这个 async 函数就是我们所说的中间件。

下面我们简单介绍一下传入中间件的两个参数。

ctx

ctx 作为上下文使用，包含了基本的 ctx.request 和 ctx.response。另外，还对 Koa 内部对一些常用的属性或者方法做了代理操作，使得我们可以直接通过 ctx 获取。比如，ctx.request.url 可以写成 ctx.url。

除此之外，Koa 还约定了一个中间件的存储空间 ctx.state。通过 state 可以存储一些数据，比如用户数据，版本信息等。如果你使用 webpack 打包的话，可以使用中间件，将加载资源的方法作为 ctx.state 的属性传入到 view 层，方便获取资源路径。

next 参数的作用是将处理的控制权转交给下一个中间件，而 next() 后面的代码，将会在下一个中间件及后面的中间件（如果有的话）执行结束后再执行。

注意：中间件的顺序很重要！

我们重写 app.js 来解释下中间件的流转过程：

// 按照官方示例
const Koa = require('koa')
const app = new Koa()
// 记录执行的时间
app.use(async (ctx, next) => {
 let stime = new Date().getTime()
 await next()
 let etime = new Date().getTime()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>'
 console.log(`请求地址: ${ctx.path}，响应时间：${etime - stime}ms`)
});
app.use(async (ctx, next) => {
 console.log('中间件1 doSoming')
 await next();
 console.log('中间件1 end')
})
app.use(async (ctx, next) => {
 console.log('中间件2 doSoming')
 await next();
 console.log('中间件2 end')
})
app.use(async (ctx, next) => {
 console.log('中间件3 doSoming')
 await next();
 console.log('中间件3 end')
})
app.listen(3000, () => {
 console.log('server is running at http://localhost:3000')
})

运行起来后，控制台显示：

server is running at http://localhost:3000

然后打开浏览器，访问 http://localhost:3000，控制台显示内容更新为：

server is running at http://localhost:3000
中间件1 doSoming
中间件2 doSoming
中间件3 doSoming
中间件3 end
中间件2 end
中间件1 end
请求地址: /，响应时间：2ms

从结果上可以看到，流程是一层层的打开，然后一层层的闭合，像是剥洋葱一样 —— 洋葱模型。

此外，如果一个中间件没有调用 await next()，会怎样呢？答案是『后面的中间件将不会执行』。

修改 app.js 如下，我们去掉了第三个中间件里面的 await：

const Koa = require('koa')
const app = new Koa()
// 记录执行的时间
app.use(async (ctx, next)=>{
 let stime = new Date().getTime()
 await next()
 let etime = new Date().getTime()
 ctx.response.type = 'text/html'
 ctx.response.body = '<h1>Hello World</h1>'
 console.log(`请求地址: ${ctx.path}，响应时间：${etime - stime}ms`)
});
app.use(async (ctx, next) => {
 console.log('中间件1 doSoming')
 await next();
 console.log('中间件1 end')
})
app.use(async (ctx, next) => {
 console.log('中间件2 doSoming')
 // 注意，这里我们删掉了 next
 // await next()
 console.log('中间件2 end')
})
app.use(async (ctx, next) => {
 console.log('中间件3 doSoming')
 await next();
 console.log('中间件3 end')
})
app.listen(3000, () => {
 console.log('server is running at http://localhost:3000')
})

重新运行代码后，控制台显示如下：

server is running at http://localhost:3000
中间件1 doSoming
中间件2 doSoming
中间件2 end
中间件1 end
请求地址: /，响应时间：1ms

与我们的预期结果『后面的中间件将不会执行』是一致的。

下一篇：我们将学习下如何响应浏览器的各种请求。

上一篇：iKcamp新课程推出啦～～～～～iKcamp团队制作｜基于Koa2搭建Node.js实战（含视频）☞ 环境准备

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商