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
知人的前端开发之“道”
Search
farthinker
September 22, 2017
Technology
1
230
知人的前端开发之“道”
RubyConf China 2017 分享
farthinker
September 22, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
6
2.1k
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
580
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
Green Tea Garbage Collector の今
zchee
PRO
2
380
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
バイブコーディングと継続的デプロイメント
nwiizo
2
400
GopherCon Tour 概略
logica0419
2
170
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
140
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Done Done
chrislema
185
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Music & Morning Musume
bryan
46
6.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
知⼈人的前端开发之“道” zhiren.com
彩程的合伙⼈人、前端负责⼈人 刘思远 One Piece粉、暴暴雪粉、⾛走下坡路路的健身爱好者
2012 2016
1.0 2.0 3.0 4.0 5.0 … … … … 2005/12
2007/12 2010/8 2013/6 2016/6 Turbolinks 5.1 2017/4 Yarn Webpacker
2013.5 2010.10 2014.2
Full-Stack Application Single Page Application
知⼈人的产品⼯工程师
None
Rails 的前端代码到底该怎么写?
2014.12 ~ 2017.9,38000+ commits
知⼈人的痛之⼀一 app/views/employees/index.html.erb 131⾏行行,充满了了各种 ruby 代码
知⼈人的痛之⼆二 app/helpers/employees_helper.rb 209⾏行行,不不同⻚页⾯面的各种 helper
知⼈人的痛之三、四、五、六、七……
全栈式的组件化
知⼈人的员⼯工头像 <%= render ‘shared/employee_avatar’, employee: employee, size: 24 %> ݘᅎ
:
View Helper ? <%= render_employee_avatar(employee, 24)%>
组件化的版本 <%= EmployeeAvatarComponent.new(view, options).render %>
组件化的优势 以⾯面向对象的⽅方式编写渲染逻辑 CandidateAvatarComponent < AvatarComponent EmployeeAvatarComponent < AvatarComponent
组件的 View Helper View Helper: zr_employee_avatar Component: EmployeeAvatarComponent <%= zr_employee_avatar
employee, size: 24 %>
更更复杂的渲染逻辑 ᴨࡋ ې / CEO
组件模版 Template: app/views/components/_employee_avatar.html.erb Component: app/components/employee_avatar_component.rb
组件模版 app/views/components/_employee_avatar.html.erb local variable: component
交互组件化 Component Class HTML Element 同步
最初的尝试 [data-component-popover] ComponentManager PopoverComponent MutationObserver 创建、销毁实例例
Custom Elements Lifecycle Reactions: connectedCallback() disconnectedCallback() attributeChangedCallback()
交互组件类
组件的 Attributes element.active = true <zr-popover active> element.triggerAction = ‘hover’
<zr-popover trigger-action=“hover”> element.colors = [‘red’, ‘blue’] <zr-popover colors=“[‘red’, ‘blue’]”> element.params = {name: ‘miao’} <zr-popover params=“{‘name’:’miao’}”> ⾃自动根据类型 parse / stringify Boolean: String: Array: Hash:
浏览器器兼容性 Custom Elements v1 polyfill: https://github.com/webcomponents/custom-elements
渲染 app/components/employee_avatar_component.rb app/views/components/_employee_avatar.html.erb 交互 app/assets/javascripts/components/employee_avatar.coffee 样式 app/assets/stylesheets/components/employee_avatar.scss ⼀一个组件的完整构成 Custom Elements
组件化之后知⼈人的前端开发流程?
Page < Component Component 渲染(Ruby) 交互(CoffeeScript) 样式(Sass) Component Component Component
Component 以组件为单位拆分⻚页⾯面
None
None
None
PageComponent HeaderComponent SidebarComponent SearchFormComponent SearchResultComponent AdvancedFiltersComponent EmployeeTableComponent
app/views/layouts/default.html.erb PageComponent
渲染 app/components/layouts/default/header_component.rb app/views/layouts/default/components/_header.html.erb 交互 app/assets/javascripts/layouts/default/components/header.coffee 样式 app/assets/stylesheets/layouts/default/components/header.scss HeaderComponent
app/components/search_form_component.rb app/assets/javascripts/components/search_form.coffee app/assets/stylesheets/components/search_form.scss 渲染 交互 样式 SearchFormComponent
SearchFormComponent
知⼈人的前端开发 —— 写组件
“道”(Tao) https://tao.zhiren.com/
None