整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于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 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/
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 體積太大。
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 參數的作用是將處理的控制權轉交給下一個中間件，而 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實戰（含視頻）? 環境準備
推薦： 翻譯項目Master的自述：
干貨｜人人都是翻譯項目的Master
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
