Enviar pesquisa
Carregar
不断归零的前端人生 - 2016 中国软件开发者大会
•
39 gostaram
•
4,491 visualizações
Joseph Chiang
Seguir
分享这两年半追寻梦想、在澳大利亚工作、技术与前端等多方面归零的心得。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 73
Baixar agora
Baixar para ler offline
Recomendados
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
Patterns in Zend Framework
Patterns in Zend Framework
Jace Ju
常見設計模式介紹
常見設計模式介紹
Jace Ju
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
前端开发之Js
前端开发之Js
fangdeng
程式人雜誌 2015年三月
程式人雜誌 2015年三月
鍾誠 陳鍾誠
前端MVC之backbone
前端MVC之backbone
Jerry Xie
Recomendados
JavaScript Code Quality
JavaScript Code Quality
Joseph Chiang
2021.laravelconf.tw.slides3
2021.laravelconf.tw.slides3
LiviaLiaoFontech
Patterns in Zend Framework
Patterns in Zend Framework
Jace Ju
常見設計模式介紹
常見設計模式介紹
Jace Ju
一拍一产品背后的故事(React实战)
一拍一产品背后的故事(React实战)
Kejun Zhang
前端开发之Js
前端开发之Js
fangdeng
程式人雜誌 2015年三月
程式人雜誌 2015年三月
鍾誠 陳鍾誠
前端MVC之backbone
前端MVC之backbone
Jerry Xie
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
Underscore
Underscore
cazhfe
Javascript autoload
Javascript autoload
jay li
面向未来的重构
面向未来的重构
Kejun Zhang
advanced introduction to codeigniter
advanced introduction to codeigniter
Bo-Yi Wu
更好的文件组织
更好的文件组织
Kejun Zhang
程式人雜誌 2015年五月
程式人雜誌 2015年五月
鍾誠 陳鍾誠
Vue.js
Vue.js
ZongYing Lyu
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
Mybatis学习培训
Mybatis学习培训
flynofry
J query
J query
waitcat
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
Justin Lin
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
2021laravelconftwslides10
2021laravelconftwslides10
LiviaLiaoFontech
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
Mais conteúdo relacionado
Mais procurados
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
Underscore
Underscore
cazhfe
Javascript autoload
Javascript autoload
jay li
面向未来的重构
面向未来的重构
Kejun Zhang
advanced introduction to codeigniter
advanced introduction to codeigniter
Bo-Yi Wu
更好的文件组织
更好的文件组织
Kejun Zhang
程式人雜誌 2015年五月
程式人雜誌 2015年五月
鍾誠 陳鍾誠
Vue.js
Vue.js
ZongYing Lyu
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Think hy
Mybatis学习培训
Mybatis学习培训
flynofry
J query
J query
waitcat
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
Justin Lin
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
wtxidian
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
2021laravelconftwslides10
2021laravelconftwslides10
LiviaLiaoFontech
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
Javascript之昨是今非
Javascript之昨是今非
Tony Deng
Mais procurados
(20)
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
Underscore
Underscore
Javascript autoload
Javascript autoload
面向未来的重构
面向未来的重构
advanced introduction to codeigniter
advanced introduction to codeigniter
更好的文件组织
更好的文件组织
程式人雜誌 2015年五月
程式人雜誌 2015年五月
Vue.js
Vue.js
jQuery介绍@disandu.com
jQuery介绍@disandu.com
Mybatis学习培训
Mybatis学习培训
J query
J query
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
深入淺出 Web 容器 - Tomcat 原始碼分析
深入淺出 Web 容器 - Tomcat 原始碼分析
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
2021laravelconftwslides10
2021laravelconftwslides10
CRUD 綜合運用
CRUD 綜合運用
Javascript之昨是今非
Javascript之昨是今非
Semelhante a 不断归零的前端人生 - 2016 中国软件开发者大会
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
leneli
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
modou li
Build 1 trillion warehouse based on carbon data
Build 1 trillion warehouse based on carbon data
boxu42
基于Spring batch的大数据量并行处理
基于Spring batch的大数据量并行处理
Jacky Chi
旺铺前端设计和实现
旺铺前端设计和实现
hua qiu
Introduction to CodeIgniter
Introduction to CodeIgniter
Chun-Kai Wang
Django
Django
Tao He
Huangjing renren
Huangjing renren
d0nn9n
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
yiditushe
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
appollo0312
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
基于YUI3的组件开发
基于YUI3的组件开发
jay li
手机之家的数据访问层实践
手机之家的数据访问层实践
guestf5121c
手机之家的数据访问层实践
手机之家的数据访问层实践
xcq
YUIconf2010介绍
YUIconf2010介绍
ling yu
组件交互模式的非主流研究
组件交互模式的非主流研究
youalab
Continuous Delivery Workshop with Ansible x GitLab CI (3rd)
Continuous Delivery Workshop with Ansible x GitLab CI (3rd)
Chu-Siang Lai
線上埋碼資料收集實作
線上埋碼資料收集實作
FEG
Semelhante a 不断归零的前端人生 - 2016 中国软件开发者大会
(20)
CRUD 綜合運用
CRUD 綜合運用
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
Uliweb cheat sheet_0.1
Uliweb cheat sheet_0.1
Build 1 trillion warehouse based on carbon data
Build 1 trillion warehouse based on carbon data
基于Spring batch的大数据量并行处理
基于Spring batch的大数据量并行处理
旺铺前端设计和实现
旺铺前端设计和实现
Introduction to CodeIgniter
Introduction to CodeIgniter
Django
Django
Huangjing renren
Huangjing renren
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Spring 2.x 中文
Spring 2.x 中文
基于YUI3的组件开发
基于YUI3的组件开发
手机之家的数据访问层实践
手机之家的数据访问层实践
手机之家的数据访问层实践
手机之家的数据访问层实践
YUIconf2010介绍
YUIconf2010介绍
组件交互模式的非主流研究
组件交互模式的非主流研究
Continuous Delivery Workshop with Ansible x GitLab CI (3rd)
Continuous Delivery Workshop with Ansible x GitLab CI (3rd)
線上埋碼資料收集實作
線上埋碼資料收集實作
Mais de Joseph Chiang
Let's Redux!
Let's Redux!
Joseph Chiang
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
Joseph Chiang
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
Joseph Chiang
JavaScript Promise
JavaScript Promise
Joseph Chiang
F2E for Enterprise
F2E for Enterprise
Joseph Chiang
F2E, the Keystone
F2E, the Keystone
Joseph Chiang
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Joseph Chiang
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Joseph Chiang
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Joseph Chiang
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Joseph Chiang
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
前端工程開發實務訓練
前端工程開發實務訓練
Joseph Chiang
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
Joseph Chiang
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
Joseph Chiang
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
Joseph Chiang
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Joseph Chiang
Git - The Social Coding System
Git - The Social Coding System
Joseph Chiang
miiiCasa is Fun
miiiCasa is Fun
Joseph Chiang
Mais de Joseph Chiang
(20)
Let's Redux!
Let's Redux!
Automatic Functional Testing with Selenium and SauceLabs
Automatic Functional Testing with Selenium and SauceLabs
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
JavaScript Promise
JavaScript Promise
F2E for Enterprise
F2E for Enterprise
F2E, the Keystone
F2E, the Keystone
前端的未來 - 前端工程實務訓練
前端的未來 - 前端工程實務訓練
Performance 入門 - 前端工程開發實務訓練
Performance 入門 - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Debugging - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Javascript 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
前端工程開發實務訓練
前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
YUI 教學 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
YUI is Sexy (for JSDC.tw)
YUI is Sexy (for JSDC.tw)
YUI is Sexy - 使用 YUI 作為開發基礎
YUI is Sexy - 使用 YUI 作為開發基礎
Git - The Social Coding System
Git - The Social Coding System
miiiCasa is Fun
miiiCasa is Fun
不断归零的前端人生 - 2016 中国软件开发者大会
1.
不断归零的前端⼈人⽣生 嘉宾:蒋定宇 @蒋定宇 归零
2.
台湾郎 2005.10 2009.09 2013.06 2014.02 2010 WebRebuild 2011 SDCC 前年年四⽉月之前都在台湾做前端
3.
袋鼠进⾏行行式 現在在悉尼的 Stackla 2014.5 Now • 社交媒体撷取器 •
撷取后可管理理过滤资料 • 可⽤用三种⽅方式投射 • 多⽤用于⾏行行销活动、⼴广告 • 成功的 Startup 撷取 过滤 投射
4.
Stackla 2015 悉尼跨年烟火杰米·奧利弗活动 2015
伦敦时装周 我自己的婚礼
5.
关于归零 Reset
6.
電腦與程序的归零 脑 归 围
搁 错误 将 状 ⽆无线路路由器的归零 标签样式的归零 归零有不⽅方便便的地⽅方,但通常可以解决问题或带来好处
7.
⼈人⽣生的归零 我们不断地增加依赖 • npm install
⼯工作 • npm install ⽆无⼈人机 • npm install 宠物 • npm install ⻋车⼦子 • npm install 女友 • npm install 房⼦子 • npm install 孩⼦子 • npm install 妻⼦子 • 归零:是否能舍弃某些依赖?
8.
#1 ⼈人⽣生归零:梦想 Life
Reset
9.
梦想 为了了梦想,得归零许多事情,真的太困难了了 • ⼯工作:不想放弃⾼高薪、好的职位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 •
语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、家⼈人、朋友
10.
转变与冲击 • 好处:⾼高薪、成功产品、才华洋溢的创办⼈人、顶尖的同事、优秀的软硬体设备 • 代价:F1
⽅方程式般的开发速度、并满⾜足像乔布斯般要求完美的创办⼈人 = ⼯工时⻓长 在跟客户 Demo 时破 图,这是完全没办法 接受的 在台湾的最后⼀一份⼯工作 觉 这 觉 寻
11.
⼀一开始的乐观 • 经验:不相信非⻄西⽅方国家的经历,即使我曾在台湾雅虎 • 语⾔言:⾯面试、电话常⽆无法完全理理解或有效回答对⽅方的问题 •
签证:没有可以⼯工作的签证 = 没公司或猎头感兴趣 • ⾦金金钱:三个⽉月没收入,压⼒力力很⼤大 https://www.linkedin.com/pulse/why-your-resume-landed-my-trash-stacey-alcorn 在台湾意⽓气⻛风发 出国乏⼈人问津
12.
离梦想越来越远 理理想中来到外国的样⼦子 实际上只能整天待在租屋 撸sir啊啊啊!
13.
过渡期 1. 开始申请学⽣生签 (可兼差
20 ⼩小时),⾄至少能继续找 2. 兼差案⼦子:短暂的两个礼拜、⾄至少有些收入 (⼀一天约 ¥2000) 3. 著急也没⽤用,乾脆去玩两个礼拜 不如意,但总是有⽅方法
14.
从天⽽而降的⾯面试 回来后就收到⾯面试邀约! • 关系:SocialStatus 的好朋友 •
技术:Widget 核⼼心技术我很有经验 • 时间:新创公司发展到需要导入前端的阶段
15.
转眼就 2 年年半 年年底都有游艇
Party 舒服的⽣生活环境 Stackla Life!
16.
回顾:⼈人⽣生归零 • ⼯工作:不想放弃⾼高薪、好的职位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 •
语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、宠物、家⼈人、朋友 归零前所考量量的困难点 归零后的实际结果 • ⼯工作:调薪、升迁、5:00 下班、住公司对⾯面 • 爱情:已经是老婆、每天有架吵! • 语⾔言:英⽂文能⼒力力绝对够⽤用 • 其他:公司越来越好、朋友越来越多、永久居留留申请中
17.
回顾:⼈人⽣生归零 • ⼯工作:不想放弃⾼高薪、好的岗位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 •
语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、宠物、家⼈人、朋友 重置前所考量量的困难点 重置后的实际结果 • ⼯工作:调薪、升迁、5:00 下班、住公司对⾯面 • 爱情:已经是老婆、每天有⼈人吵架 ^^ • 语⾔言:英⽂文能⼒力力绝对够⽤用 • 其他:公司越来越好、朋友越来越多、永久居留留申请中 其实转换跑道、创业都可以算是⼈人⽣生的归零 伴随⻛风险,但即使失败,也必定相当的收获 我期待未来继续归零,你呢? Reset Success! ⼈人⽣生归零成功!
18.
⼯工作时间短:需调整做事⽅方法与态度 Mindset Reset#2 ⼼心态归零:产品
19.
不習慣 真正的新创公司 • ⼼心态不同 • 著重于完成功能,較少程序员间的品质交流 •
过去有:⼯工程⽂文件制作、Peer programming、Code review、重构、分享会 • ⽆无前端架构 • 仍然⽤用 <script/> tag,没有 RequireJS 模块依赖 • 混乱的全域变数、⽅方法 • 有很多的复制黏贴 • 没有⽤用比较好的⽅方法:例例如 OOP • 对好东⻄西 Grunt、LiveReload 没兴趣
20.
调整⼼心态 迅速改变代价太⾼高 • 缺乏程序员间的品质交流:先摆⼀一边,但尽可能写⽂文档 • 没有
RequireJS 模块依赖:先⽤用 grunt-usemin 解决布署问题 • 混乱的全域变数、⽅方法:先摆⼀一边,未来不再使⽤用 • 有很多的复制贴上:把 DOM 的部份改⽤用 Mustache • 没有比较好的制度:例例如 OOP:新功能再使⽤用 • 对好东⻄西 Grunt、LiveReload、RequireJS 没兴趣 • 导入 Grunt 开始处理理 SASS 的编译问题 • 开始两个礼拜⼀一次的内部分享会 离理理想很远,但却是⼤大家能够接受的改变,也不会把⾃自⼰己累死
21.
Git 流程 第⼀一次不⽤用 Git
Flow 所有开发、修 Bug 都在 STAC-<票号> 的 branch 减少了了很多不必要的⼿手续、步骤、甚⾄至架构 对⼩小团队的我们其实够⽤用了了 http://d.pr/y57H STAC-<票号> master qa bugs 或新功能 提交给 QA 的测试 所有⼈人皆可 merge Push 后会⾃自动布署到 QA 测试环境 需要发 GitHub Pull Request 先布署到 Staging 环境 再到 Production 环境
22.
V2 项⽬目:Event 改版 • 背景:使⽤用客户较少、时间较充裕 •
需求:需能让客户⾼高度客制化、并容易易新增不同类型 • 技术:Mustache、OOP、AlpacaJS 导入较好的作法后:客制化与新增不同类型都变简单许多 直接放弃既有实作
23.
复制、粘贴 项⽬目:Widget 新样式 x
4 • 背景:使⽤用客户很多、功能复杂、两个礼拜内需完成 • 需求:样式与部分⾏行行为变更更、但不能影响客户既有的 Widget • 技术:⽆无(复制、粘贴、修改) 结果:在时程内完⼯工、外观完胜竞争者
24.
MVP 最简可⾏行行产品 实作「够⽤用」的功能、以取得客户回馈供未来改进,⽽而非⼀一开始就「要求完美」 很多产品与视觉设计⼈人希望完美, 开发者需花费数倍的时间在微调上 微调的整体效益通常不⾼高 知易易⾏行行难:我们的产品与视觉都有这样的弹性
25.
砍⽣生财⼯工具 ⽤用内部开发者资源 帮客户做我们产品的客制化 例例如:微⽹网站、Widget、Event 的客制化 Professional Service 能够快速收益、让客户满意 但对内部开发者的成⻓长、或平台本⾝身成⻓长都是负⾯面的 去年年⼤大⼑刀⼀一砍,我们不⽤用再分⼼心做客制化服务 当经营者有这样的勇⽓气,不得不佩服
26.
不应被技术或⽅方法牵著⿐鼻⼦子走 质 乔 “Working Backwards
to Technology” “需从客户体验开始,再回头去找适合技术 ⽽而不能先从科技开始、再去想要卖什什么” ⼼心态归零:⼩小结
27.
不应被技术或⽅方法牵著⿐鼻⼦子走 质 乔 “Working Backwards
to Technology” “需从客户体验开始,再回头去找适合技术 ⽽而不能先从科技开始、再去想要卖什什么” ⼼心态归零:⼩小结 Stackla 的产品经验 让我从技术导向转为解决问题导向 让产 资 来 术 Reset Improved! ⼼心态归零改善!
28.
团队成⻓长的喜悦与痛苦 #3 团队归零:成⻓长 Team
Reset
29.
技术抉择 UI 开始复杂化、⼀一定得改 全栈⼯工程师们眼睛发亮 ⾜足够的教学 上⼿手时间短 导入成功秘诀 团队优先! 如何决定 学习成本⾼高 完整框架弹性⼩小 稳定、较多⼈人使⽤用 学习成本低 函式库弹性⾼高 新、较少⼈人使⽤用
30.
如何导入 SPA 的概念念太耗时、不可⾏行行 <?php echo
$content; ?> <script src="https://localhost:8989/assets/app.js"></script> webpack 维持现有架构,能开始⽤用比较重要 PHP Layout
31.
• 终于有比较好的套件管理理 • 终于有
JS/CSS 的依赖 • 终于能使⽤用先进技术、⾯面向未来 • 终于能⽤用简单的⽅方法制作 UI ⼤大有益处 前端终于有适当的开发模式 提供基础的 Webpack 是最重要的⼯工具
32.
导入 Redux • Delegation
困难: • 由上⽽而下要带太多 props • 太多概念念在同 JSX 中: • View 逻辑 • API 资料载入 • 资料 Decoration • State 管理理出问题: • ⽆无法在元件之外共⽤用 • 随意增加 State ⼀一个档案超过 2000 ⾏行行! ⼀一样也是碰到问题再来处理理,避免太早抽象化
33.
▾ Object ‣ allcontent/index:
Object ‣ common: Object ‣ events/index: Object ‣ filters/index: Object ‣ hostedhub/index: Object ‣ plugins/index: Object ‣ report/user: Object ▾ report/network: Object ‣ data: Array[30] ‣ meta: Object ‣ widgets/index: Object Store #1 Redux Single Store - 初期规划 • 由路路径决定命名空间 • data - API 取得的资料 • 可以是 Object • meta - UI State • common - 共⽤用组件 • ex. Tag 选单 • 优点:直觉 • 缺点:资料会重复 ⽬目标:搬移原本 Container Component 的 setState
34.
不做⽆无谓的抽象化 Ducks ducks-modular-redux 开 时 对 为什什么要拆开来放? // Actions const
LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } }
35.
⾼高⼿手加入 在台湾每个公司都想要的前端⾼高⼿手 刚 为 们 们抢来当 Jonathan
Art Pai 进
36.
提升 UI 组件 react-demo 不需再花时间在撰写
UI 说明⽂文档上 反⽽而是写可测试的 Demo!
37.
RxJS RxJS 对异步处理理极为优异、组合性⾼高 唯⼀一缺点是起步学习曲线陡峭 克服之后回不去 Promise
了了! RxJS + redux-observable
38.
Redux 简化 redux-actions // Actions const
LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMOVE = 'my-app/widgets/REMOVE'; // Action Creators export function loadWidgets() { return { type: LOAD }; } export function createWidget(widget) { return { type: CREATE, widget }; } export function updateWidget(widget) { return { type: UPDATE, widget }; } export function removeWidget(widget) { return { type: REMOVE, widget }; } // Reducer export default function reducer(state = {}, action = {}) { switch (action.type) { // do reducer stuff default: return state; } } 过 码 import {createAction} from 'redux-actions'; const PREFIX = 'my-app/widgets'; // Action Creators export const loadWidgets = createAction(`${PREFIX}/LOAD`) export const createWidget = createAction(`${PREFIX}/CREATE`); export const updateWidget = createAction(`${PREFIX}/UPDATE`); export const removeWidget= createAction(`${PREFIX}/REMOVE`); // Reducer export default const reducer = handleActions({ [loadWidgets]: (state) => {/* do load widget */} }); 现
39.
避免重复 类似的⻚页⾯面、资料来源⼀一致、但各有⾃自⼰己 UI State reports/aggregate reports/network reports/user reports/tile 如何避免重复、⼜又可客制化?
40.
‣ report/user: Object ▾
report/network: Object ▾ common: Object ‣ data: Array[30] ‣ meta: Object visibleResultsCount: 3 Redux Store #2 ⽅方法 把共⽤用的 Ducks ⽤用 Function 包起来 export default function(PREFIX) { return { // Action Creators changeFilters: createAction(`${PREFIX}/CHANGE_FILTERS`), resetFilters: createAction(`${PREFIX}/RESET_FILTERS`), saveReport: createAction(`${PREFIX}/SAVE_REPORT`), // Reducer reducer: combineReducers({ reports: handleActions({ [saveReport]: () => {}, }), options: combineReducers({ filters: handleActions({ [changeFilters]: () => {}, [resetFilters]: () => {}, }) }) }) } }; report/common/redux.js import commonRedux from './common/redux'; const PREFIX = 'reports/user'; const { changeFilters, resetFilters, savedReport, reducer, } = commonRedux(PREFIX); export default combineReducers({ common: reducer, visibleResultsCount: handleAction() }); report/user/redux.js
41.
代碼猴⼦子時間 让团队合作、建立⼀一致性 少⽤用脑的重构 ⽬目标简单 全员出动以短时间完成 任务分派明确、互相检查
42.
#1 ESLint 代码的基本品质⼯工具 • 只启⽤用部分规则
(不然修不完) • 将警告、错误全部修复 • 将部分规则改为 Error,让所有⼈人⼀一定得遵守 问题:早就在⽤用,但警告太多,没⼈人理理会
43.
#2 CSS Module 针对
给 库 写 预 难 许 过 杂 避免全域 CSS 覆写问题 问题:全域 CSS 覆写问题⽇日渐严重 全栈⼯工程师对 CSS 策略略没兴趣 .wrapper { background: red; } .tag-box { border: solid 1px #ccc; } import css from './style.scss'; export default (props) => ( <div className={css.wrapper}> <div className={css.tagBox}>...</div> </div> );
44.
#3 组件结构 ⽬目录及语法调整 jsx ├── scroll-box │
├── demo.jsx │ ├── index.jsx │ └── style.scss ├── search-box │ ├── demo.jsx │ ├── index.jsx │ └── style.scss └── step-progress ├── demo.jsx ├── index.jsx └── style.scss 问题:过去 JSX 与 jQuery 插件混放 语法不⼀一致(改为 import, ES6 class) 好处:让⼤大家知道⽬目录结构调整 也邀了了全栈⼯工程师⼀一起帮忙
45.
#4 单元测试 替 API
层写测试 import {Observable} from 'rxjs'; export const TagsAPI = { URL: '/api/tags', create$() { return Observable.ajax({method: 'POST', ...}); } retrieve$() { return Observable.ajax({method: 'GET', ...}); } modify$() { return Observable.ajax({method: 'PUT', ...}); } destroy$() { return Observable.ajax({method: 'DELETE', ...}); } }; 问题:⼤大家介⾯面名称不统⼀一、实作⽅方法也不⼀一致 益处:互相写测试、學習,提出不少改进
46.
代码猴⼦子 CodeMonkey Session 是个很好的团队默契培养时间 藉由简单可确定的任务,所有⼈人往同⼀一⽅方向迈进 应是定期都要举办的活动
47.
成長带来问题 WHY? ⼈人⼿手变多、技术成⻓长都很好啊! ⼈人⼒力力变多、效率反⽽而变慢? 越⼤大的团队效率越不好 技术成⻓长、但其它团队成员跟上了了吗? 以团队⾓角度思考、⽽而非个⼈人滿意與否
48.
⼈人⽉月神话 “在⼀一個臨臨界點上,顧⽤用⼀一個新的 开发者、反⽽而會讓開發速度降低, 因為軟體開發的複雜性會需要更更多 的溝通及管理理成本” 协作成本增加:例例如开会、讨论、Code Review The Mythical
Man Month
49.
前端草创 前端⼯工程师 1 全栈⼯工程师
3 React Well.. Nice! Promise ❤ 导入新技术速度较慢 数 显 开 应领导 选择 问题 负 乐 OOP
50.
前端成⻓长后 新报表项⽬目:希望让 React/Redux 更更有纪律律
51.
Store #3 资 阵 资 阶段 #1:不考虑共⽤用 ‣
report/user: Object ▾ report/network: Object ‣ data: Array[30] ‣ meta: Object 阶段 #2:考慮 Redux 共⽤用 ‣ report/user: Object ▾ report/network: Object ▾ common: Object ‣ data: Array[30] ‣ meta: Object visibleResultsCount: 3 阶段 #3:切分出 model ▾ entities: Object ▾ reports: Object ▾ models: Object ‣ 2f48a879: Object ‣ 4c5ed1d5: Object ‣ 4fc165f5: Object ‣ 5eb92930: Object ‣ 7a095e5d: Object ‣ syncing: Object ‣ report/user: Object ▾ report/network: Object ‣ meta: Object
52.
档案架构演化 • reports/user/index.jsx • reports/user/redux.js •
Action Creators • Reducer • reports/user/style.scss 阶段 #1:不考虑共⽤用 • reports/common/index.jsx • reports/common/redux.jsx • Action Creators • Reducer • reports/user/index.jsx • reports/user/redux.js • Action Creators • Reducer • reports/user/style.scss 阶段 #2:导入共⽤用层 • common/entities/syncing.js • common/entities/sorting.js • common/entities/reports/epic.js • common/entities/reports/redux.js • Action Creators • Reducer • Selector • Schema • reports/common/index.jsx • reports/common/redux.js • reports/content/index.jsx • reports/content/redux.js • Action Creators • Reducer • Selector • Schema • reports/content/style.scss 阶段 #3:導入許多技術跟檔案 normalizr reselect serializr dotDrop
53.
是进化也是退化 前端⼯工程师 * 3 全栈⼯工程师
* 4 ESLint redux-observable entities WTF! WTF!WTF! WTF! 团队成⻓长也是个挑战 现 栈 师 贡 过 术 阂 reselect Unit Test CSS Modules serializr normalizr Convention epics redux-actions
54.
是进化还是退化 前端⼯工程师 * 3 全栈⼯工程师
* 4 ESLint redux-observable entities WTF! WTF!WTF! WTF! 团队成⻓长也是个挑战 现 栈 师 贡 过 术 阂 reselect Unit Test CSS Modules serializr normalizr Convention epics redux-actions 永远不要忘了了问⾃自⼰己这个问题 「我 (我们团队) 真的需要他吗?」 没 这 术 问题 许
55.
重复有时是好的 杂 为没 杂 https://www.youtube.com/watch?v=mVVNJKv9esE 关于抽象化的光谱
56.
专注=牺牲 https://www.youtube.com/watch?v=hlYiWznhhzw 卖 卖 每买个东⻄西、每安装个 Lib,都有成本,累积起来很巨⼤大
57.
团队归零:⼩小结 杂 队 没 这 对
队 享受成⻓长并学习牺牲 评估移除部分你很喜欢的⼯工具或函式库 Team Reset Improving… 团队重置:努⼒力力中
58.
Front-end Reset#4 技术归零:前端
59.
最佳实践 HTML ⽂文档 CSS 选择器命名 JavaScript
编程
60.
HTML ⽂文件 结构、样式、⾏行行为全部写在 HTML
中1995 WaSP ⽹网⻚页标准化⼩小组1998 React 暴暴红2015 最佳实践:HTML、CSS、JS 应分离 最佳实践:HTML、CSS、JS 应合并 最佳实践:HTML、样式、JS 合并⼀一起写
61.
CSS 命名⽅方式 CSS21998 2005 以
ID、模块为命名空间、禁⽌止以外观命名2005 2015 CSS Module - 随意以外观命名2015 Bootstrap 热⻔门、带动了了 OOCSS2011 最佳实践:⽆无 (随意命名) 最佳实践:命名空间、结构化 最佳实践:元件化、⽤用 BEM、SUITCSS 等命名策略略 最佳实践:⽆无 (随意命名) #ykpmh .hd .media-object {} .person__head {} .person--tall {}
62.
JS 编程⽅方式 仅表单验证,只需写 Function1998 JavaScript
开始变得复杂 (Web 2.0)2004 函数式编程火红、只需写 Function2015 最佳实践:函数式编程 最佳实践:⾯面向对象编程 最佳实践:函数式编程
63.
64.
–Johnny Appleseed “Type a
quote here.”其实没有最佳实践 这个情况将会⼀一直持续下去
65.
技术不断迭代 在2016 年年学JavaScript 是⼀一种什什么样的体验? ⽤用讽刺刺法来表达
JS ⽣生态圈让⼈人困扰的快速变化与混乱
66.
技术不断迭代 在2016 年年学JavaScript 是⼀一种什什么样的体验? ⽤用讽刺刺法来表达
JS ⽣生态圈让⼈人困扰的快速变化与混乱 我们⼏几乎⼀一直在重置 背后的意义是什什么?
67.
套件管理理 CSS 预处理理器 JS 模块载入 JS
语法编译器 构建系统 架構的演化
68.
套件管理理 CSS 预处理理器 JS 模块载入 JS
语法编译器 构建系统 less-loadersass-loader coffee-loader ts-loader 架構的演化
69.
套件管理理 CSS 预处理理器 JS 模块载入 JS
语法编译器 构建系统 less-loadersass-loader coffee-loader ts-loaderbabel-loader style-loader 架構的演化 混乱,但持续往好的⽅方向发展
70.
套件管理理 CSS 预处理理器 JS 模块载入 JS
语法编译器 构建系统 less-loadersass-loader coffee-loader ts-loaderbabel-loader style-loader 架構的演化 混乱,但持续往好的⽅方向发展 技术重置 = 持续地汰换、往好⽅方向发展 不断分裂⼜又集成、让前端接近真正的软体开发
71.
前端归零! • 前端年年轻、仍然有很多问题待解决 • 前端极其重要,才会吸引这么多⼈人不断思考改变 •
⼯工具的迭代带来了了正确的⽅方向、更更接近真正的软件开发 • 前端⼯工程师是时代的桥梁、只有我们才有能⼒力力朝更更好的⽅方向迈进 前端⼯工程:软件⼯工业的碶⽯石
72.
Q & A 归
现 态归 产 开 队归 牺 术归 术
73.
Cheers, mate!
Baixar agora