Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
前端⼯工程师发展与成⻓长 
rank @ FEX
Ideas worth spreading
- 刘平川,⺴⽹网名 rank; 
- 8 年开发经验;08 年⼊入职百度有啊 
- 08 年有啊前端资深前端开发⼯工程师 
- 11 年任职创业公司 leho ⾼高级技术经理 
- 现任 FEX 总负责⼈人; 
- 关注前端技术、电商、及新兴...
•・ ⽂文本底层技术 
•・ 富⽂文本 UEditor 
•・ Markdown 
•・ Baidu Doc 
•・ Excel 
•・ …⋯ 
Kity/ 
MOG 
Graphic Based 
Baidu Doc 
UEditor 
FI...
Roadmap 
•・ 前端开发⼯工程师 
•・ 关于⼯工程师成长 
•・ 成长中的问题 
•・ ⼀一些经验之谈
⼀一、什么是 Web 前端 
by generalstussner 
开发⼯工程师
Web 前端⼯工作 
交互业务界⾯面
Web 前端⼯工作 
界⾯面交互 
所见即所得 
内容多样性 
编程门槛低
界⾯面交互 JavaScript 
业务逻辑 JavaScript 
⺴⽹网⻚页结构 HTML 布局样式 CSS 
⺴⽹网⻚页内容 HTML
界⾯面交互 JavaScript 
业务逻辑 JavaScript 
⺴⽹网⻚页结构 HTML 布局样式 CSS 
⺴⽹网⻚页内容 HTML 
重构⼯工程师 
JavaScript ⼯工程师
服务器业务逻辑 PHP/NodeJS/Python/Java/ASPX WebServer Nginx/Apache/IIS 
}全 
浏览器业务逻辑 JavaScript 
界⾯面交互 JavaScript 
⺴⽹网⻚页结构 HTML 布局样...
界⾯面交互 JavaScript 
浏览器业务逻辑 JavaScript 
⺴⽹网⻚页结构 HTML 布局样式 CSS 
⺴⽹网⻚页内容 HTML 
终端展现 
⼿手机PC TV Pad 其他
全端 ⼯工程师
Defi゙nition of 
Front-End Developer Engineers 
•・ Front-End 
•・ Developer 
•・ Engineers 
前端 
- 领域 
开发 
- 过程 
- 职业⼯工程师
⽤用户体验是根本 
前端的本质 
改善⽣生产⼒力和降低成本 
⼯工程技术的本质
⼆二、Web 前端⼯工程师的成长 
by generalstussner
前端 ⼯工程师 
后端 ⼯工程师 
产品经理 
视觉/交互 
运营经理
技术编码能⼒力 
互联网公司的工程师能力结构 
技术视野团队 coach 能⼒力 
产品交互意识沟通影响⼒力 
前端能⼒力 
•・ 技术编码能⼒力 
•・ 技术视野 
•・ 产品交互意识 
•・ 沟通影响⼒力
管理协调 
技术驱动 
业务驱动 
问题驱动 
? 
•・ 协调能⼒力 
•・ 洞察能⼒力 
•・ 技术视野 
•・ 编码能⼒力 
•・ 综合能⼒力 
•・ 洞察能⼒力 
•・ 协调能⼒力 
•・ 协调能⼒力 
•・ 产品 sense 
前端能...
Senior Manager | Architecture 
[业务 | ⾏行业] 全局视⾓角 
Leader Senior Engineer 
技术视野 | 编码能⼒力 
管理视⾓角 | 业务视⾓角 
协调能⼒力 | 产品 sense 协调能...
by marianna_armata 
理想的⼯工作 
公司价值观 
⼈人个能⼒力 
团队⼯工作需求
成长法宝 
•・ 升维思考 
•・ 降维攻击
成长法宝 
•・ 升维思考 
•・ 降维攻击 
problems cannot be solved 
by the same level of thinking 
that created them. 
“ 
”
三、成长遇到的问题 
by generalstussner
案例 I - 从学⽣生到⼯工作 
•・ 是否实习。实习经验对找⼯工作有多⼤大影响? 
•・ 选择部门/公司。对 BAT ⾥里 offer 选择纠结。 
•・ 其他部门同学永远是最好的。
案例 II - ⼯工作⼀一两年,天下⽆无敌 
•・ 在团队⾥里没有机会。 
•・ 觉得不再爱,学不到什么了。 
•・ 爆发负⾯面情绪。 
•・ 其他团队 Level 升得很快。
案例 III - ⼯工作三四年,⽼老油条 
•・ 没有⾃自我实现环境。 
•・ 技术能⼒力、软素质遇到瓶颈。 
•・ 未来做技术还是转管理? 
•・ 就这样吧,养⽼老好了。
四、⼀一些经验 
by generalstussner
组件 / 模块 / 
框架 / ⼯工具 / ⽅方案 / 平台化 
Tangram/Magic FIS tools FIS 解决⽅方案 
系统 / 机制 / 产品 / 标准 
功能 
平台 
⽣生态 
上传下载⽂文本编辑图形组件加载器iScrol...
你可能是⼀一时的国王 
但你永远⽆无法打败市场 
— Jesse Livermore 
“ 
” 
不要投机倒把
成长速度 delta
delta 成⻓长 
delta 时间 
时间 
成⻓长 
C2 
C1
多年⾼高⼯工与初出茅庐 
消费品与奢侈品 
⼯工艺差异 
•・品牌 
•・细节 
是什么样的奢侈品很重要。
应⽤用架构的关键节点 
全端开发 
数据服务 
系统服务
应⽤用架构关键在前端 
•・ 移动应⽤用 
•・ 轻应⽤用 
•・ Native 应⽤用 
•・ Hybrid 应⽤用 
•・ PC 应⽤用 
全端开发 
数据服务 
系统服务 
云服务 
Paas / Iaas 
全端开发 
数据服务 
系统...
Fisher Personal Transition Curve
•・ 前端开发的本质价值,是提⾼高⽤用户体验与降低⽣生产⼒力成本 
•・ 开发模型分类:问题驱动,业务驱动,技术驱动 
•・ 每⼀一个成长阶段都会遇到瓶颈,找到成长 delta 
•・ not coder, but a thinker 
本质 ...
thanks
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Web 前端工程师与成长
Nächste SlideShare
Wird geladen in …5
×

Web 前端工程师与成长

883 Aufrufe

Veröffentlicht am

一份讲义,关于前端工程的开发与成长。

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Web 前端工程师与成长

  1. 1. 前端⼯工程师发展与成⻓长 rank @ FEX
  2. 2. Ideas worth spreading
  3. 3. - 刘平川,⺴⽹网名 rank; - 8 年开发经验;08 年⼊入职百度有啊 - 08 年有啊前端资深前端开发⼯工程师 - 11 年任职创业公司 leho ⾼高级技术经理 - 现任 FEX 总负责⼈人; - 关注前端技术、电商、及新兴产品; - 喜欢旅⾏行,摄影; 关于我 - http://rank.im - ranklau@gmail.com - t.sina.com/rank
  4. 4. •・ ⽂文本底层技术 •・ 富⽂文本 UEditor •・ Markdown •・ Baidu Doc •・ Excel •・ …⋯ Kity/ MOG Graphic Based Baidu Doc UEditor FIS Tools FIS oak DP Full-End Monitor 技术⼯工程 GMU Minder ⽂文本⽅方向 Native FIS Hybrid Solar PPT Text Editor Markdown Based Formular shushuo DP Tech Value Evaluate FoxUI Fuhua Markdown/ Mocker 图形⽅方向 •・ ⼯工具框架 •・ 解决⽅方案 •・ 云端服务 •・ 全端监控 •・ 价值评估 在线平台 •・ 图形底层技术 •・ ⽮矢量公式 •・ 在线脑图 •・ 可视化⼯工具 •・ 流程图 •・ 移动图表 •・ 数说 •・ …⋯ •・ ⽂文本⽅方向 •・ 图形⽅方向 •・ 孵化平台 Legend
  5. 5. Roadmap •・ 前端开发⼯工程师 •・ 关于⼯工程师成长 •・ 成长中的问题 •・ ⼀一些经验之谈
  6. 6. ⼀一、什么是 Web 前端 by generalstussner 开发⼯工程师
  7. 7. Web 前端⼯工作 交互业务界⾯面
  8. 8. Web 前端⼯工作 界⾯面交互 所见即所得 内容多样性 编程门槛低
  9. 9. 界⾯面交互 JavaScript 业务逻辑 JavaScript ⺴⽹网⻚页结构 HTML 布局样式 CSS ⺴⽹网⻚页内容 HTML
  10. 10. 界⾯面交互 JavaScript 业务逻辑 JavaScript ⺴⽹网⻚页结构 HTML 布局样式 CSS ⺴⽹网⻚页内容 HTML 重构⼯工程师 JavaScript ⼯工程师
  11. 11. 服务器业务逻辑 PHP/NodeJS/Python/Java/ASPX WebServer Nginx/Apache/IIS }全 浏览器业务逻辑 JavaScript 界⾯面交互 JavaScript ⺴⽹网⻚页结构 HTML 布局样式 CSS ⺴⽹网⻚页内容 HTML 前端 栈 ⼯工 程 师
  12. 12. 界⾯面交互 JavaScript 浏览器业务逻辑 JavaScript ⺴⽹网⻚页结构 HTML 布局样式 CSS ⺴⽹网⻚页内容 HTML 终端展现 ⼿手机PC TV Pad 其他
  13. 13. 全端 ⼯工程师
  14. 14. Defi゙nition of Front-End Developer Engineers •・ Front-End •・ Developer •・ Engineers 前端 - 领域 开发 - 过程 - 职业⼯工程师
  15. 15. ⽤用户体验是根本 前端的本质 改善⽣生产⼒力和降低成本 ⼯工程技术的本质
  16. 16. ⼆二、Web 前端⼯工程师的成长 by generalstussner
  17. 17. 前端 ⼯工程师 后端 ⼯工程师 产品经理 视觉/交互 运营经理
  18. 18. 技术编码能⼒力 互联网公司的工程师能力结构 技术视野团队 coach 能⼒力 产品交互意识沟通影响⼒力 前端能⼒力 •・ 技术编码能⼒力 •・ 技术视野 •・ 产品交互意识 •・ 沟通影响⼒力
  19. 19. 管理协调 技术驱动 业务驱动 问题驱动 ? •・ 协调能⼒力 •・ 洞察能⼒力 •・ 技术视野 •・ 编码能⼒力 •・ 综合能⼒力 •・ 洞察能⼒力 •・ 协调能⼒力 •・ 协调能⼒力 •・ 产品 sense 前端能⼒力模型
  20. 20. Senior Manager | Architecture [业务 | ⾏行业] 全局视⾓角 Leader Senior Engineer 技术视野 | 编码能⼒力 管理视⾓角 | 业务视⾓角 协调能⼒力 | 产品 sense 协调能⼒力 | 洞察⼒力 产品驱动问题驱动技术驱动 ⼯工程技能 | 前端能⼒力 | ⼯工作能⼒力⼯工作⼼心态 | 职业素养 成长轨迹
  21. 21. by marianna_armata 理想的⼯工作 公司价值观 ⼈人个能⼒力 团队⼯工作需求
  22. 22. 成长法宝 •・ 升维思考 •・ 降维攻击
  23. 23. 成长法宝 •・ 升维思考 •・ 降维攻击 problems cannot be solved by the same level of thinking that created them. “ ”
  24. 24. 三、成长遇到的问题 by generalstussner
  25. 25. 案例 I - 从学⽣生到⼯工作 •・ 是否实习。实习经验对找⼯工作有多⼤大影响? •・ 选择部门/公司。对 BAT ⾥里 offer 选择纠结。 •・ 其他部门同学永远是最好的。
  26. 26. 案例 II - ⼯工作⼀一两年,天下⽆无敌 •・ 在团队⾥里没有机会。 •・ 觉得不再爱,学不到什么了。 •・ 爆发负⾯面情绪。 •・ 其他团队 Level 升得很快。
  27. 27. 案例 III - ⼯工作三四年,⽼老油条 •・ 没有⾃自我实现环境。 •・ 技术能⼒力、软素质遇到瓶颈。 •・ 未来做技术还是转管理? •・ 就这样吧,养⽼老好了。
  28. 28. 四、⼀一些经验 by generalstussner
  29. 29. 组件 / 模块 / 框架 / ⼯工具 / ⽅方案 / 平台化 Tangram/Magic FIS tools FIS 解决⽅方案 系统 / 机制 / 产品 / 标准 功能 平台 ⽣生态 上传下载⽂文本编辑图形组件加载器iScroll AMD/ jQuery 社区 FEX 运⾏行机制RequireJS DP 全端数据平台 Web Office 办公系统FIS 社区 技术产品 3 个阶段
  30. 30. 你可能是⼀一时的国王 但你永远⽆无法打败市场 — Jesse Livermore “ ” 不要投机倒把
  31. 31. 成长速度 delta
  32. 32. delta 成⻓长 delta 时间 时间 成⻓长 C2 C1
  33. 33. 多年⾼高⼯工与初出茅庐 消费品与奢侈品 ⼯工艺差异 •・品牌 •・细节 是什么样的奢侈品很重要。
  34. 34. 应⽤用架构的关键节点 全端开发 数据服务 系统服务
  35. 35. 应⽤用架构关键在前端 •・ 移动应⽤用 •・ 轻应⽤用 •・ Native 应⽤用 •・ Hybrid 应⽤用 •・ PC 应⽤用 全端开发 数据服务 系统服务 云服务 Paas / Iaas 全端开发 数据服务 系统服务
  36. 36. Fisher Personal Transition Curve
  37. 37. •・ 前端开发的本质价值,是提⾼高⽤用户体验与降低⽣生产⼒力成本 •・ 开发模型分类:问题驱动,业务驱动,技术驱动 •・ 每⼀一个成长阶段都会遇到瓶颈,找到成长 delta •・ not coder, but a thinker 本质 案例模型 总结
  38. 38. thanks

×