Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
不断归零的前端人生 - 2016 中国软件开发者大会
Search
Joseph Chiang
November 18, 2016
Technology
1
350
不断归零的前端人生 - 2016 中国软件开发者大会
分享这两年半追寻梦想、在澳大利亚工作、技术与前端等多方面归零的心得。
Joseph Chiang
November 18, 2016
Tweet
Share
More Decks by Joseph Chiang
See All by Joseph Chiang
Let's Redux!
josephj
4
250
Automatic Functional Testing with Selenium and SauceLabs
josephj
2
220
From Hacker to Developer
josephj
1
81
tmuxinator
josephj
0
160
JavaScript Promise
josephj
0
150
Be an Internet Person
josephj
9
510
F2E Evolution
josephj
55
3.2k
F2E for Enterprise
josephj
42
5.6k
Jasmine - The JavaScript BDD Testing
josephj
8
570
Other Decks in Technology
See All in Technology
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
340
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
Vueで Webコンポーネントを作って Reactで使う / 20241030-cloudsign-vuefes_after_night
bengo4com
4
2.5k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Done Done
chrislema
181
16k
Embracing the Ebb and Flow
colly
84
4.4k
Docker and Python
trallard
40
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building Adaptive Systems
keathley
38
2.2k
Rails Girls Zürich Keynote
gr2m
93
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Unsuck your backbone
ammeep
668
57k
Transcript
不断归零的前端⼈人⽣生 嘉宾:蒋定宇 @蒋定宇 归零
台湾郎 2005.10 2009.09 2013.06 2014.02 2010 WebRebuild 2011 SDCC 前年年四⽉月之前都在台湾做前端
袋鼠进⾏行行式 現在在悉尼的 Stackla 2014.5 Now • 社交媒体撷取器 • 撷取后可管理理过滤资料 •
可⽤用三种⽅方式投射 • 多⽤用于⾏行行销活动、⼴广告 • 成功的 Startup 撷取 过滤 投射
Stackla 2015 悉尼跨年烟火 杰米·奧利弗活动 2015 伦敦时装周 我自己的婚礼
关于归零 Reset
電腦與程序的归零 㖈歏脑禺絡⚥归ꨫ鸒䌢⟃「䱾ⵖ涸薵围幢ꤑ䨾剤搁縨涸错误䧴✲⟝ 䎇⚂将禺絡㔐㢖䧭姻䌢涸状ⲃ䧴ⴲ㨥⧩ ⽆无线路路由器的归零 标签样式的归零 归零有不⽅方便便的地⽅方,但通常可以解决问题或带来好处
⼈人⽣生的归零 我们不断地增加依赖 • npm install ⼯工作 • npm install ⽆无⼈人机
• npm install 宠物 • npm install ⻋车⼦子 • npm install 女友 • npm install 房⼦子 • npm install 孩⼦子 • npm install 妻⼦子 • 归零:是否能舍弃某些依赖?
#1 ⼈人⽣生归零:梦想 Life Reset
梦想 为了了梦想,得归零许多事情,真的太困难了了 • ⼯工作:不想放弃⾼高薪、好的职位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 • 语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、家⼈人、朋友
转变与冲击 • 好处:⾼高薪、成功产品、才华洋溢的创办⼈人、顶尖的同事、优秀的软硬体设备 • 代价:F1 ⽅方程式般的开发速度、并满⾜足像乔布斯般要求完美的创办⼈人 = ⼯工时⻓长 在跟客户 Demo
时破 图,这是完全没办法 接受的 在台湾的最后⼀一份⼯工作 ⴀ⺫涸儻♳䙼罌✫䖎⛉觉䖤这呋涸欰崞♶僽䧮銴涸 䩞觉䖤⨞ⴀ佖」寻䪪䧮涸唁䟝
⼀一开始的乐观 • 经验:不相信非⻄西⽅方国家的经历,即使我曾在台湾雅虎 • 语⾔言:⾯面试、电话常⽆无法完全理理解或有效回答对⽅方的问题 • 签证:没有可以⼯工作的签证 = 没公司或猎头感兴趣 •
⾦金金钱:三个⽉月没收入,压⼒力力很⼤大 https://www.linkedin.com/pulse/why-your-resume-landed-my-trash-stacey-alcorn 在台湾意⽓气⻛风发 出国乏⼈人问津
离梦想越来越远 理理想中来到外国的样⼦子 实际上只能整天待在租屋 撸sir啊啊啊!
过渡期 1. 开始申请学⽣生签 (可兼差 20 ⼩小时),⾄至少能继续找 2. 兼差案⼦子:短暂的两个礼拜、⾄至少有些收入 (⼀一天约 ¥2000)
3. 著急也没⽤用,乾脆去玩两个礼拜 不如意,但总是有⽅方法
从天⽽而降的⾯面试 回来后就收到⾯面试邀约! • 关系:SocialStatus 的好朋友 • 技术:Widget 核⼼心技术我很有经验 • 时间:新创公司发展到需要导入前端的阶段
转眼就 2 年年半 年年底都有游艇 Party 舒服的⽣生活环境 Stackla Life!
回顾:⼈人⽣生归零 • ⼯工作:不想放弃⾼高薪、好的职位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 • 语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、宠物、家⼈人、朋友 归零前所考量量的困难点
归零后的实际结果 • ⼯工作:调薪、升迁、5:00 下班、住公司对⾯面 • 爱情:已经是老婆、每天有架吵! • 语⾔言:英⽂文能⼒力力绝对够⽤用 • 其他:公司越来越好、朋友越来越多、永久居留留申请中
回顾:⼈人⽣生归零 • ⼯工作:不想放弃⾼高薪、好的岗位 • 爱情:在澳⼤大利利亚打⼯工度假的女友即将回台 • 语⾔言:怀疑⾃自⼰己的英⽂文能⼒力力 • 其他:得抛弃房⼦子、⻋车⼦子、宠物、家⼈人、朋友 重置前所考量量的困难点
重置后的实际结果 • ⼯工作:调薪、升迁、5:00 下班、住公司对⾯面 • 爱情:已经是老婆、每天有⼈人吵架 ^^ • 语⾔言:英⽂文能⼒力力绝对够⽤用 • 其他:公司越来越好、朋友越来越多、永久居留留申请中 其实转换跑道、创业都可以算是⼈人⽣生的归零 伴随⻛风险,但即使失败,也必定相当的收获 我期待未来继续归零,你呢? Reset Success! ⼈人⽣生归零成功!
⼯工作时间短:需调整做事⽅方法与态度 Mindset Reset #2 ⼼心态归零:产品
不習慣 真正的新创公司 • ⼼心态不同 • 著重于完成功能,較少程序员间的品质交流 • 过去有:⼯工程⽂文件制作、Peer programming、Code review、重构、分享会
• ⽆无前端架构 • 仍然⽤用 <script/> tag,没有 RequireJS 模块依赖 • 混乱的全域变数、⽅方法 • 有很多的复制黏贴 • 没有⽤用比较好的⽅方法:例例如 OOP • 对好东⻄西 Grunt、LiveReload 没兴趣
调整⼼心态 迅速改变代价太⾼高 • 缺乏程序员间的品质交流:先摆⼀一边,但尽可能写⽂文档 • 没有 RequireJS 模块依赖:先⽤用 grunt-usemin 解决布署问题
• 混乱的全域变数、⽅方法:先摆⼀一边,未来不再使⽤用 • 有很多的复制贴上:把 DOM 的部份改⽤用 Mustache • 没有比较好的制度:例例如 OOP:新功能再使⽤用 • 对好东⻄西 Grunt、LiveReload、RequireJS 没兴趣 • 导入 Grunt 开始处理理 SASS 的编译问题 • 开始两个礼拜⼀一次的内部分享会 离理理想很远,但却是⼤大家能够接受的改变,也不会把⾃自⼰己累死
Git 流程 第⼀一次不⽤用 Git Flow 所有开发、修 Bug 都在 STAC-<票号> 的
branch 减少了了很多不必要的⼿手续、步骤、甚⾄至架构 对⼩小团队的我们其实够⽤用了了 http://d.pr/y57H STAC-<票号> master qa bugs 或新功能 提交给 QA 的测试 所有⼈人皆可 merge Push 后会⾃自动布署到 QA 测试环境 需要发 GitHub Pull Request 先布署到 Staging 环境 再到 Production 环境
V2 项⽬目:Event 改版 • 背景:使⽤用客户较少、时间较充裕 • 需求:需能让客户⾼高度客制化、并容易易新增不同类型 • 技术:Mustache、OOP、AlpacaJS 导入较好的作法后:客制化与新增不同类型都变简单许多
直接放弃既有实作
复制、粘贴 项⽬目:Widget 新样式 x 4 • 背景:使⽤用客户很多、功能复杂、两个礼拜内需完成 • 需求:样式与部分⾏行行为变更更、但不能影响客户既有的 Widget
• 技术:⽆无(复制、粘贴、修改) 结果:在时程内完⼯工、外观完胜竞争者
MVP 最简可⾏行行产品 实作「够⽤用」的功能、以取得客户回馈供未来改进,⽽而非⼀一开始就「要求完美」 很多产品与视觉设计⼈人希望完美, 开发者需花费数倍的时间在微调上 微调的整体效益通常不⾼高 知易易⾏行行难:我们的产品与视觉都有这样的弹性
砍⽣生财⼯工具 ⽤用内部开发者资源 帮客户做我们产品的客制化 例例如:微⽹网站、Widget、Event 的客制化 Professional Service 能够快速收益、让客户满意 但对内部开发者的成⻓长、或平台本⾝身成⻓长都是负⾯面的 去年年⼤大⼑刀⼀一砍,我们不⽤用再分⼼心做客制化服务
当经营者有这样的勇⽓气,不得不佩服
不应被技术或⽅方法牵著⿐鼻⼦子走 88%$♧⡙ゑ⠍质毠乔䋒倛瀷䱈0QFO%PDT涸Ɀ㹁 “Working Backwards to Technology” “需从客户体验开始,再回头去找适合技术 ⽽而不能先从科技开始、再去想要卖什什么” ⼼心态归零:⼩小结
不应被技术或⽅方法牵著⿐鼻⼦子走 88%$♧⡙ゑ⠍质毠乔䋒倛瀷䱈0QFO%PDT涸Ɀ㹁 “Working Backwards to Technology” “需从客户体验开始,再回头去找适合技术 ⽽而不能先从科技开始、再去想要卖什什么” ⼼心态归零:⼩小结 Stackla
的产品经验 让我从技术导向转为解决问题导向 让产ㅷ资彂来Ɀ㹁⢪欽➊⛎倰岁䧴䪮术 Reset Improved! ⼼心态归零改善!
团队成⻓长的喜悦与痛苦 #3 团队归零:成⻓长 Team Reset
技术抉择 UI 开始复杂化、⼀一定得改 全栈⼯工程师们眼睛发亮 ⾜足够的教学 上⼿手时间短 导入成功秘诀 团队优先! 如何决定 学习成本⾼高
完整框架弹性⼩小 稳定、较多⼈人使⽤用 学习成本低 函式库弹性⾼高 新、较少⼈人使⽤用
如何导入 SPA 的概念念太耗时、不可⾏行行 <?php echo $content; ?> <script src="https://localhost:8989/assets/app.js"></script> webpack
维持现有架构,能开始⽤用比较重要 PHP Layout
• 终于有比较好的套件管理理 • 终于有 JS/CSS 的依赖 • 终于能使⽤用先进技术、⾯面向未来 • 终于能⽤用简单的⽅方法制作
UI ⼤大有益处 前端终于有适当的开发模式 提供基础的 Webpack 是最重要的⼯工具
导入 Redux • Delegation 困难: • 由上⽽而下要带太多 props • 太多概念念在同
JSX 中: • View 逻辑 • API 资料载入 • 资料 Decoration • State 管理理出问题: • ⽆无法在元件之外共⽤用 • 随意增加 State ⼀一个档案超过 2000 ⾏行行! ⼀一样也是碰到问题再来处理理,避免太早抽象化
▾ 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
不做⽆无谓的抽象化 Ducks ducks-modular-redux 开〄时剤涸劼⠔ SFEVDFSBDUJPOT僽♧对涸 为什什么要拆开来放? // 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; } }
⾼高⼿手加入 在台湾每个公司都想要的前端⾼高⼿手 刚㥪㔔为➮们䟝ⴀ㕂䊨⡲ 䪾➮们抢来当ず✲ Jonathan Art Pai 䖎䎋犷♶倬腋㷸倞匌銯畮⛳♧湬ⱄ佖进
提升 UI 组件 react-demo 不需再花时间在撰写 UI 说明⽂文档上 反⽽而是写可测试的 Demo!
RxJS RxJS 对异步处理理极为优异、组合性⾼高 唯⼀一缺点是起步学习曲线陡峭 克服之后回不去 Promise 了了! RxJS + redux-observable
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; } } 过3FEVY➿码剤ꅾ㢖䚍넞 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 */} }); 现㖈诔歋䊨Ⱘⲹ㼱䖎㢵
避免重复 类似的⻚页⾯面、资料来源⼀一致、但各有⾃自⼰己 UI State reports/aggregate reports/network reports/user reports/tile 如何避免重复、⼜又可客制化?
‣ 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
代碼猴⼦子時間 让团队合作、建立⼀一致性 少⽤用脑的重构 ⽬目标简单 全员出动以短时间完成 任务分派明确、互相检查
#1 ESLint 代码的基本品质⼯工具 • 只启⽤用部分规则 (不然修不完) • 将警告、错误全部修复 • 将部分规则改为
Error,让所有⼈人⼀一定得遵守 问题:早就在⽤用,但警告太多,没⼈人理理会
#2 CSS Module ˙ 〫针对 TDTT㢅椚䪾 DTT殆给痧♲倰库 ˙ 欽DBNFM4QBDF㖈+49⚥㥪写❉ ˙
嫲预⠮㔮难♳许㢵㔔过⯋⟝呋䒭邍⚥幋杂⢪欽㚖 避免全域 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> );
#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) 好处:让⼤大家知道⽬目录结构调整 也邀了了全栈⼯工程师⼀一起帮忙
#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', ...}); } }; 问题:⼤大家介⾯面名称不统⼀一、实作⽅方法也不⼀一致 益处:互相写测试、學習,提出不少改进
代码猴⼦子 CodeMonkey Session 是个很好的团队默契培养时间 藉由简单可确定的任务,所有⼈人往同⼀一⽅方向迈进 应是定期都要举办的活动
成長带来问题 WHY? ⼈人⼿手变多、技术成⻓长都很好啊! ⼈人⼒力力变多、效率反⽽而变慢? 越⼤大的团队效率越不好 技术成⻓长、但其它团队成员跟上了了吗? 以团队⾓角度思考、⽽而非个⼈人滿意與否
⼈人⽉月神话 “在⼀一個臨臨界點上,顧⽤用⼀一個新的 开发者、反⽽而會讓開發速度降低, 因為軟體開發的複雜性會需要更更多 的溝通及管理理成本” 协作成本增加:例例如开会、讨论、Code Review The Mythical Man
Month
前端草创 前端⼯工程师 1 全栈⼯工程师 3 React Well.. Nice! Promise ❤
导入新技术速度较慢 㣐㢵数4UBSUVQ♶⠔剤僈显涸た畮ⴕ䊨 ⡎畮开〄罏应领导畮䊨Ⱘ涸⢪欽 选择腋㹊꣢鍑Ɀ问题♶㟞⸈负䬐涸䊨ⰨⰦ㸐➃⠔䖎乐䠑騈ꥦ OOP
前端成⻓长后 新报表项⽬目:希望让 React/Redux 更更有纪律律
Store #3 碫⡂〫剤DPOUSPMMFS涸嚌䙂 ˙♶㖈⛖ꅾ㢖资俲 ˙"1*鵦㔐阵♶㢅椚 碫⡂剤NPEFM DPOUSPMMFS涸嚌䙂 ˙ 尝剤ꅾ㢖资俲 ˙
"1*鵦㔐贖椚 OPSNBMJ[SKT 阶段 #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
档案架构演化 • 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
是进化也是退化 前端⼯工程师 * 3 全栈⼯工程师 * 4 ESLint redux-observable entities
WTF! WTF! WTF! WTF! 团队成⻓长也是个挑战 现ⲃ➠銴栈䊨玑师涸贡柄⡎过㢵䪮术ⵖ鸤✫ꥬ阂 reselect Unit Test CSS Modules serializr normalizr Convention epics redux-actions
是进化还是退化 前端⼯工程师 * 3 全栈⼯工程师 * 4 ESLint redux-observable entities
WTF! WTF! WTF! WTF! 团队成⻓长也是个挑战 现ⲃ➠銴栈䊨玑师涸贡柄⡎过㢵䪮术ⵖ鸤✫ꥬ阂 reselect Unit Test CSS Modules serializr normalizr Convention epics redux-actions 永远不要忘了了问⾃自⼰己这个问题 「我 (我们团队) 真的需要他吗?」 ⽰⢪没剤这❉䪮术问题♧呋剤鍑岁鸠䏞䧴许刿䘰
重复有时是好的 ⟤⡦涸䬄韍鿪⠔㟞⸈㢖杂䏞 $PQZ1BTUF㔔为没剤䬄韍㢖杂䏞僽⡜涸 https://www.youtube.com/watch?v=mVVNJKv9esE 关于抽象化的光谱
专注=牺牲 https://www.youtube.com/watch?v=hlYiWznhhzw 䪾ㄳ㉱熌鞝劼鷑➃䪾歏錠卖䱈䪾鲨㶩卖䱈 每买个东⻄西、每安装个 Lib,都有成本,累积起来很巨⼤大
团队归零:⼩小结 ˙ 䙦⛎呋涸㢖杂䏞僽㔙队〳⟃䱺「涸 ˙ 僽や溫涸銴没✫这⚡䊨Ⱘ㥪㢅♸㗁㢅 ˙ 䙦⛎呋䩞对㔙队剤渤 享受成⻓长并学习牺牲 评估移除部分你很喜欢的⼯工具或函式库 Team
Reset Improving… 团队重置:努⼒力力中
Front-end Reset #4 技术归零:前端
最佳实践 HTML ⽂文档 CSS 选择器命名 JavaScript 编程
HTML ⽂文件 结构、样式、⾏行行为全部写在 HTML 中 1995 WaSP ⽹网⻚页标准化⼩小组 1998 React
暴暴红 2015 最佳实践:HTML、CSS、JS 应分离 最佳实践:HTML、CSS、JS 应合并 最佳实践:HTML、样式、JS 合并⼀一起写
CSS 命名⽅方式 CSS2 1998 2005 以 ID、模块为命名空间、禁⽌止以外观命名 2005 2015 CSS
Module - 随意以外观命名 2015 Bootstrap 热⻔门、带动了了 OOCSS 2011 最佳实践:⽆无 (随意命名) 最佳实践:命名空间、结构化 最佳实践:元件化、⽤用 BEM、SUITCSS 等命名策略略 最佳实践:⽆无 (随意命名) #ykpmh .hd .media-object {} .person__head {} .person--tall {}
JS 编程⽅方式 仅表单验证,只需写 Function 1998 JavaScript 开始变得复杂 (Web 2.0) 2004
函数式编程火红、只需写 Function 2015 最佳实践:函数式编程 最佳实践:⾯面向对象编程 最佳实践:函数式编程
None
–Johnny Appleseed “Type a quote here.” 其实没有最佳实践 这个情况将会⼀一直持续下去
技术不断迭代 在2016 年年学JavaScript 是⼀一种什什么样的体验? ⽤用讽刺刺法来表达 JS ⽣生态圈让⼈人困扰的快速变化与混乱
技术不断迭代 在2016 年年学JavaScript 是⼀一种什什么样的体验? ⽤用讽刺刺法来表达 JS ⽣生态圈让⼈人困扰的快速变化与混乱 我们⼏几乎⼀一直在重置 背后的意义是什什么?
套件管理理 CSS 预处理理器 JS 模块载入 JS 语法编译器 构建系统 架構的演化
套件管理理 CSS 预处理理器 JS 模块载入 JS 语法编译器 构建系统 less-loader sass-loader
coffee-loader ts-loader 架構的演化
套件管理理 CSS 预处理理器 JS 模块载入 JS 语法编译器 构建系统 less-loader sass-loader
coffee-loader ts-loader babel-loader style-loader 架構的演化 混乱,但持续往好的⽅方向发展
套件管理理 CSS 预处理理器 JS 模块载入 JS 语法编译器 构建系统 less-loader sass-loader
coffee-loader ts-loader babel-loader style-loader 架構的演化 混乱,但持续往好的⽅方向发展 技术重置 = 持续地汰换、往好⽅方向发展 不断分裂⼜又集成、让前端接近真正的软体开发
前端归零! • 前端年年轻、仍然有很多问题待解决 • 前端极其重要,才会吸引这么多⼈人不断思考改变 • ⼯工具的迭代带来了了正确的⽅方向、更更接近真正的软件开发 • 前端⼯工程师是时代的桥梁、只有我们才有能⼒力力朝更更好的⽅方向迈进 前端⼯工程:软件⼯工业的碶⽯石
Q & A ˙欰崞归ꨫ唁䟝㹊现 ˙䗱态归ꨫ产ㅷ开〄 ˙㔙队归ꨫ䧭♸牺暨 ˙䪮术归ꨫ畮䪮术涸刿鶜
Cheers, mate!