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
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.3k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
390
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
5
1.1k
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
220
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
3
170
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
9
2.6k
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
24
6.1k
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
130
TypeScript入門
recruitengineers
PRO
19
6.2k
EKS Pod Identity における推移的な session tags
z63d
1
200
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
700
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Faster Mobile Websites
deanohume
309
31k
Balancing Empowerment & Direction
lara
2
590
BBQ
matthewcrist
89
9.8k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GitHub's CSS Performance
jonrohan
1031
460k
Documentation Writing (for coders)
carmenintech
73
5k
Why Our Code Smells
bkeepers
PRO
338
57k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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