web 前端工程师与成长
TRANSCRIPT
前端⼯工程师发展与成⻓长rank @ FEX
Ideas worth spreading
- 刘平川，⺴⽹网名 rank；- 8 年开发经验；08 年⼊入职百度有啊- 08 年有啊前端资深前端开发⼯工程师- 11 年任职创业公司 leho ⾼高级技术经理- 现任 FEX 总负责⼈人；- 关注前端技术、电商、及新兴产品；- 喜欢旅⾏行，摄影；
关于我- http://rank.im- [email protected] t.sina.com/rank
•･ ⽂文本底层技术 •･ 富⽂文本 UEditor •･ Markdown •･ Baidu Doc •･ Excel •･ …⋯
Kity/MOG
Graphic Based
UEditor
FIS Tools
DP Full-End Monitor
技术⼯工程
GMU
Minder
⽂文本⽅方向
Native HybridFIS
Solar
FIS oak
PPT
Text Editor BasedMarkdown
Baidu DocFormular
shushuo
DP Tech Value Evaluate
FoxUI
Fuhua Markdown/Mocker
图形⽅方向
•･ ⼯工具框架 •･ 解决⽅方案 •･ 云端服务 •･ 全端监控 •･ 价值评估
在线平台
•･ 图形底层技术 •･ ⽮矢量公式 •･ 在线脑图 •･ 可视化⼯工具 •･ 流程图 •･ 移动图表 •･ 数说 •･ …⋯
•･ ⽂文本⽅方向 •･ 图形⽅方向 •･ 孵化平台
Legend
Roadmap•･ 前端开发⼯工程师 •･ 关于⼯工程师成长 •･ 成长中的问题 •･ ⼀一些经验之谈
⼀一、什么是 Web 前端
by generalstussner
开发⼯工程师
Web 前端⼯工作
界⾯面交互 业务
Web 前端⼯工作
所见即所得 内容多样性 编程门槛低
交互界⾯面
界⾯面交互 JavaScript
业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
界⾯面交互 JavaScript
业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
重构⼯工程师
JavaScript ⼯工程师
界⾯面交互 JavaScript
浏览器业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
WebServer Nginx/Apache/IIS
服务器业务逻辑 PHP/NodeJS/Python/Java/ASPX ｝全 栈 ⼯工 程 师
前端
界⾯面交互 JavaScript
浏览器业务逻辑 JavaScript
⺴⽹网⻚页结构 HTML 布局样式 CSS
⺴⽹网⻚页内容 HTML
⼿手机 PC TV Pad 其他
终端展现
全端 ⼯工程师
•･ Front-End •･ Developer •･ Engineers
Defiﾞnition ofFront-End Developer Engineers
- 领域 - 过程 - 职业 ⼯工程师
开发
前端
⽤用户体验是根本
前端的本质
改善⽣生产⼒力和降低成本
⼯工程技术的本质
⼆二、Web 前端⼯工程师的成长
by generalstussner
前端 ⼯工程师
后端 ⼯工程师
产品经理
视觉/交互
运营经理
技术编码能⼒力
技术视野 团队 coach 能⼒力
产品交互意识 沟通影响⼒力
互联网公司的工程师能力结构
前端能⼒力
•･ 技术编码能⼒力 •･ 技术视野 •･ 产品交互意识 •･ 沟通影响⼒力
管理协调
技术驱动
业务驱动
问题驱动
?
•･ 协调能⼒力 •･ 洞察能⼒力
•･ 技术视野 •･ 编码能⼒力
•･ 综合能⼒力 •･ 洞察能⼒力 •･ 协调能⼒力
•･ 协调能⼒力 •･ 产品 sense
前端能⼒力模型
技术视野 | 编码能⼒力
管理视⾓角 | 业务视⾓角
协调能⼒力 | 产品 sense 协调能⼒力 | 洞察⼒力
产品驱动 问题驱动 技术驱动
Leader Senior Engineer
[业务 | ⾏行业] 全局视⾓角
Senior Manager | Architecture
⼯工程技能 | 前端能⼒力 | ⼯工作能⼒力 ⼯工作⼼心态 | 职业素养
成长轨迹
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
框架 / ⼯工具 / ⽅方案 / 平台化
系统 / 机制 / 产品 / 标准
组件 / 模块 /
平台
功能
⽣生态
上传 下载 ⽂文本编辑 图形组件 加载器 iScroll
jQuery 社区AMD/RequireJSFEX 运⾏行机制
FIS tools FIS 解决⽅方案Tangram/Magic
Web Office 办公系统 FIS 社区
DP 全端数据平台
技术产品3 个阶段
你可能是⼀一时的国王 但你永远⽆无法打败市场
— Jesse Livermore
“”
不要投机倒把
成长速度 delta
delta 成⻓长
delta 时间
时间
成⻓长
C1
C2
消费品与奢侈品 ⼯工艺差异
•･品牌 •･细节
多年⾼高⼯工与初出茅庐
是什么样的奢侈品很重要。
应⽤用架构的关键节点
系统服务
数据服务
全端开发
•･ 移动应⽤用
•･ 轻应⽤用 •･ Native 应⽤用 •･ Hybrid 应⽤用
•･ PC 应⽤用
系统服务
数据服务
全端开发
Paas / Iaas
云服务
应⽤用架构关键在前端
全端开发
数据服务
系统服务
Fisher Personal Transition Curve
本质
•･ 前端开发的本质价值，是提⾼高⽤用户体验与降低⽣生产⼒力成本 •･ 开发模型分类：问题驱动，业务驱动，技术驱动 •･ 每⼀一个成长阶段都会遇到瓶颈，找到成长 delta •･ not coder, but a thinker
模型案例
总结
thanks