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
210
知人的前端开发之“道”
RubyConf China 2017 分享
farthinker
September 22, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
0→1開発における技術選定において一番大切なこと
bicstone
1
330
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.9k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
220
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
140
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
Microsoft Cloudで開発ライフサイクルを保護する
kkamegawa
0
140
NgRx Signal Store
rainerhahnekamp
0
120
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
4
130
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
690
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
0
240
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Scaling GitHub
holman
457
140k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Become a Pro
speakerdeck
PRO
10
4.5k
GitHub's CSS Performance
jonrohan
1023
450k
A Philosophy of Restraint
colly
196
16k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Web development in the modern age
philhawksworth
202
10k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
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