知人的前端开发之“道”

RubyConf China 2017 分享

Transcript

1. 知⼈人的前端开发之“道” zhiren.com
2. 彩程的合伙⼈人、前端负责⼈人 刘思远 One Piece粉、暴暴雪粉、⾛走下坡路路的健身爱好者
3. 2012 2016
4. 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
5. 2013.5 2010.10 2014.2
6. Full-Stack Application Single Page Application
7. 知⼈人的产品⼯工程师
9. Rails 的前端代码到底该怎么写？
10. 2014.12 ～ 2017.9，38000+ commits
11. 知⼈人的痛之⼀一 app/views/employees/index.html.erb 131⾏行行，充满了了各种 ruby 代码
12. 知⼈人的痛之⼆二 app/helpers/employees_helper.rb 209⾏行行，不不同⻚页⾯面的各种 helper
13. 知⼈人的痛之三、四、五、六、七……
14. 全栈式的组件化
15. 知⼈人的员⼯工头像 <%= render ‘shared/employee_avatar’, employee: employee, size: 24 %> ݘᅎ :
16. View Helper ? <%= render_employee_avatar(employee, 24)%>
17. 组件化的版本 <%= EmployeeAvatarComponent.new(view, options).render %>
18. 组件化的优势 以⾯面向对象的⽅方式编写渲染逻辑 CandidateAvatarComponent < AvatarComponent EmployeeAvatarComponent < AvatarComponent
19. 组件的 View Helper View Helper: zr_employee_avatar Component: EmployeeAvatarComponent <%= zr_employee_avatar employee, size: 24 %>
20. 更更复杂的渲染逻辑 ᴨࡋ ௛᤮ې / CEO 
21. 组件模版 Template: app/views/components/_employee_avatar.html.erb Component: app/components/employee_avatar_component.rb
22. 组件模版 app/views/components/_employee_avatar.html.erb local variable: component
23. 交互组件化 Component Class HTML Element 同步
24. 最初的尝试 [data-component-popover] ComponentManager PopoverComponent MutationObserver 创建、销毁实例例
25. Custom Elements Lifecycle Reactions: connectedCallback() disconnectedCallback() attributeChangedCallback()
26. 交互组件类
27. 组件的 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:
28. 浏览器器兼容性 Custom Elements v1 polyfill: https://github.com/webcomponents/custom-elements
29. 渲染 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
30. 组件化之后知⼈人的前端开发流程？
31. Page < Component Component 渲染（Ruby） 交互（CoffeeScript） 样式（Sass） Component Component Component Component 以组件为单位拆分⻚页⾯面
35. PageComponent HeaderComponent SidebarComponent SearchFormComponent SearchResultComponent AdvancedFiltersComponent EmployeeTableComponent
36. app/views/layouts/default.html.erb PageComponent
37. 渲染 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
38. app/components/search_form_component.rb app/assets/javascripts/components/search_form.coffee app/assets/stylesheets/components/search_form.scss 渲染 交互 样式 SearchFormComponent
39. SearchFormComponent
40. 知⼈人的前端开发 —— 写组件
41. “道”（Tao） https://tao.zhiren.com/