## 前言
響應技術委員會的需求,前端種子計劃是公司內第一個針對職能部門提高職員技術能力的切實可行的計劃,我們根據公司已有技術棧,囊括總結知識點,對現有部分資質較好的員工進行重點培養,以達到提高職員技術水平,完成其個人的職業規劃的目標,提高公司整體前端的技術水平。
## 背景
1. 公司前端技術水平參差不齊,代碼不夠規范(基本都是自學或者培訓,沒有大型、優秀項目經驗,很少有人系統學習專業技能,沒有扎實的前端基礎)
2. 公司技術棧過于繁雜,對于好的技術不能整體進行推廣(每個部門都有自己在用的框架,應用技術)
3. 公司對于部分資質或者技術好的員工沒有很好的考核培訓機制,沒有差別化管理(導致部分優秀、上進員工與平庸、混日子員工一樣的待遇)
4. 員工沒有很好的職能發展路線,沒有職能導師引導,大幅度的時間都去做項目支持,這一點直接導致了部分較好前端的離職(比如張夢燕,龐磊)
5. 公司技術委員會整理的相關技術,沒有具體人員負責落實跟進(不僅僅是前端,每個職能部門都有這種優秀技能無法科普的情況)
6. etc...
## 現階段計劃內容
1. 每周至少一人1-2h的技術輔導,溝通,反饋,為其制定學習計劃,驗收學習成果,取得實質性技術成長。
2. 每周全體7人的系統知識培訓
3. 不在種子計劃的人員,也可以主動找我溝通或者參加培訓,但不做強制要求。
##計劃主要成員
1. 負責人:張兵,助理:劉妮萍
2. 主要受訓人員:
劉妮萍(醫鏈前端),范成超(醫鏈前端),周旻(醫鏈前端),周雪琴(移動遠程前端),候風西(互聯網bg前端),郭艷杰(互聯網bg前端),張文俊(無線研發)
## 主要意義
1. 提升各部門前端人員的技術水平,試運行前端的職業發展分階段培訓。
2. 統一并執行公司整體前端技術棧
3. 通過核心人員能力的提高,輻射到其他前端人員
## 計劃時間軸(前端初級階段)
### 2017年(按照時間每周進行)
**共42周課程,全年48周,除去節假日以及意外情況,應該能保證每個新員工在一年內學到基本的技術點。**
1. 5.5,主題:前端職業規劃,pc頁面與頁面的差別,代碼規范,備注:鳳山門實訓
2. 5.12 主題:less教程,重點溝通:周雪琴,候風西,備注:線下學習
3. 5.19 主題:css樣式命名思想
4. 5.26 主題:h5新增標簽 新增屬性
5. js基本運算:數學運算,邏輯運算;js基本語句
1. ps入門
1. jq基本語法
1. 對象obj基本屬性,屬性方法,繼承
1. background詳解 +translation+animation
1. iframe詳解 table詳解 a詳解 meta詳解
1. flex布局+ rem布局
1. image常識
1. 谷歌開發者工具調試技巧
1. emmet快速編碼技巧
1. webstroage,cookie,應用緩存,http緩存
1. 前端跨域
1. css技術方案:超出省略號,解決浮動,水平居中,垂直居中布局,固寬變寬布局,寬高固定比例等(2周)
1. css模塊化
1. tmod、artTemplate
1. canvas
1. gulp入門1,2 gulp插件
1. npm,cnpm
1. array+math+data+json
1. number,boolean,string
1. bom: history.api,定時器,等
1. zepto
1. seajs/requirejs
1. es6
1. js編程思想
1. nodejs入門1-6(4周)
1. git命令行教程
1. git客戶端工具教程+注意事項
1. java相關教程:vm+freemarker
1. bootstrap1-6(4周)
1. vuejs全家桶1-6(4周)
## 計劃時間軸(前端大師階段)
### 敬請期待具體教程(完善中...)
1. 技術棧+技術選型
1. web性能(2周)
1. web安全(2周)
1. nodejs+express(4周)
1. mongleDb+indexDb(4周)
1. websocket,實時通訊,http2
1. vuejs前后端分離((4周))
1. 移動端架構(2周)
1. 動畫大師(2周)
1. reactjs(8周)
1. angularjs(8周)
1. etc
## 計劃時間軸(前端架構師階段)
### 敬請期待課程設定
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi