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
220
知人的前端开发之“道”
RubyConf China 2017 分享
farthinker
September 22, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
120
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
Shift-from-React-to-Vue
calm1205
3
1.2k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
Featured
See All Featured
Designing for humans not robots
tammielis
249
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Embracing the Ebb and Flow
colly
84
4.4k
The Language of Interfaces
destraynor
154
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Rails Girls Zürich Keynote
gr2m
93
13k
Building Applications with DynamoDB
mza
90
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
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