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
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
900
20251027_findyさん_音声エージェントLT
almondo_event
2
380
OSSで50の競合と戦うためにやったこと
yamadashy
3
970
OCIjp_Oracle AI World_Recap
shinpy
1
180
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
360
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
360
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
290
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
13
82k
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Writing Fast Ruby
sferik
630
62k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Gamification - CAS2011
davidbonilla
81
5.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Why Our Code Smells
bkeepers
PRO
340
57k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Embracing the Ebb and Flow
colly
88
4.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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