Владимир Гриненко

Transcript

1. Декларативная шаблонизация Владимир Гриненко руководитель службы
2. Декларативность
3. Декларативное программирование — это парадигма программирования, в которой задается спецификация решения задачи, то есть описывается, что представляет собой проблема и
5. Императивно
6. document Императивно 6
7. document .querySelectorAll('.link') Императивно 7
8. document .querySelectorAll('.link') .forEach(link => link.style.color = 'red'); Императивно 8
9. document .querySelectorAll('.link') .forEach(link => link.style.color = 'red'); document.body.innerHTML += '<a class="link" href="http://2017.frontfest.ru">FrontFest</a>'; Императивно 9
10. document .querySelectorAll('.link') .forEach(link => link.style.color = 'red'); document.body.innerHTML += '<a class="link" href="http://2017.frontfest.ru">FrontFest</a>'; Императивно 10 document.querySelector('.link').classList.remove('link');
11. Декларативно
12. .link { color: red } Декларативно 12
13. library/components/link.css .link { color: red } Декларативно 13 project/components/link.css .link { text-decoration: none }
14. $('.btn').click(function() { $(this) .toggleClass('btn_disabled') .text( $(this).text() === 'Enable' ? 'Disable' : 'Enable' ); }); Императивно 14
15. <Btn onToggleDisabled={this.handleToggleDisabled} disabled={this.state.disabled}> {this.state.buttonText} </Btn> Декларативно 15
16. Шаблонизация
17. <div class="user"> Elizabeth </div> Шаблонизация 17
18. <div class="user"> <?php echo $username; ?> </div> Шаблонизация 18
19. const html = `<div class="user">${username}</div>`; Шаблонизация 19
21. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> Шаблонизация 21
22. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> <?php echo $buttonText; ?> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <?php for ($i = 1; $i <= count($items); $i++) { ?> <a class="dropdown-item" href="<?php echo $items[$i] ["href"]; ?>"><?php echo $items[$i]["text"]; ?></a> <?php } ?> </div> </div> Шаблонизация 22
23. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> <?php echo $buttonText; ?> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <?php for ($i = 1; $i <= count($items); $i++) { ?> <a class="dropdown-item" href="<?php echo $items[$i] ["href"]; ?>"><?php echo $items[$i]["text"]; ?></a> <?php } ?> </div> </div> Шаблонизация 23
24. Проблемы 24 〉Много писать 〉Много исправлять 〉Невозможно обновиться автоматически
25. const html = `<div class="user">${username}</div>`; Шаблонизация 25
26. render() { return ( <div className="user"> {this.props.username} </div> ); } Компонентный подход 26
27. <User username="Elizabeth"/> Компонентный подход 27
28. Проблемы решены 28 〉Много писать 〉Много исправлять 〉Невозможно обновиться автоматически
29. render() { return ( <div className="user"> {this.props.username} </div> ); } Еще проблемы 29
30. render() { return ( <div className="user"> {this.props.hasIcon && <Icon/>} {this.props.username} </div> ); } Еще проблемы 30
31. library/components/link.css .link { color: red } Декларативно 31 project/components/link.css .link { text-decoration: none }
33. Больше декларативности!
34. XML + XSLT
35. <User username="Elizabeth"/> <User username="Elizabeth II" hasIcon="true"/> XML + XSLT 35
36. <xsl:template match="User"> <div class="user"> <xsl:apply-templates/> <xsl:apply-templates select="@username"/> </div> </xsl:template> XML + XSLT 36
37. <xsl:template match="User[hasIcon=true]"> <xsl:apply-templates select="Icon"/> </xsl:template> XML + XSLT 37
38. BEMJSON + BEMHTML
39. { block: 'user', username: 'Elizabeth' } Полная декларативность 39
40. { block: 'user', username: 'Elizabeth' } Полная декларативность 40 <div class="user"></div>
41. block('user').content()(node => node.ctx.username); Полная декларативность 41
42. block('user').content()(node => node.ctx.username); block('user') .match()(node => node.ctx.hasIcon) .content()(node => [ { block: 'icon' }, applyNext() ]); Полная декларативность 42
43. block('user').content()(node => node.ctx.username); block('user') .match()(node => node.ctx.hasIcon) .content()(node => [ { block: 'icon' }, applyNext() ]); Полная декларативность 43
44. block('user').content()(node => node.ctx.username); block('user') .match()(node => node.ctx.hasIcon) .content()(node => [ { block: 'icon' }, applyNext() ]); Полная декларативность 44
45. block('data')( tag()('ul'), elem('item').tag()('li') ); Полная декларативность: теги 45
46. block('data')( tag()('table'), content()(() => ({ tag: 'tr', content: applyNext() })), elem('item').tag()('td') ); Полная декларативность: теги 46
47. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> Полная декларативность: реальный пример 47
48. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> <?php echo $buttonText; ?> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <?php for ($i = 1; $i <= count($items); $i++) { ?> <a class="dropdown-item" href="<?php echo $items[$i] ["href"]; ?>"><?php echo $items[$i]["text"]; ?></a> <?php } ?> </div> </div> Полная декларативность: реальный пример 48
49. <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria- haspopup="true" aria-expanded="false"> <?php echo $buttonText; ?> </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <?php for ($i = 1; $i <= count($items); $i++) { ?> <a class="dropdown-item" href="<?php echo $items[$i] ["href"]; ?>"><?php echo $items[$i]["text"]; ?></a> <?php } ?> </div> </div> Полная декларативность: реальный пример 49
50. block('dropdown')( content()(node => [ { block: 'btn', mods: { secondary: true }, mix: 'dropdown-toggle', attrs: { type: 'button', id: 'dropdownMenuButton', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false } }, { elem: 'menu', attrs: { 'aria-labelledby': 'dropdownMenuButton' }, content: applyNext().map(item => ({ elem: 'item', url: item.url, content: item.text })) } ]), Полная декларативность: реальный пример 50 elem('item').replace()(node => ({ block: 'link', mix: node.ctx, url: node.ctx.url, content: node.ctx.content })) )
51. { block: 'dropdown', content: [ { elem: 'item', url: 'http://site1.com', text: 'Site1' }, { elem: 'item', url: 'http://site2.com', text: 'Site2' }, { elem: 'item', url: 'http://site3.com', text: 'Site3' } ] } Полная декларативность: реальный пример 51
52. const css = require('./css.json'), visited = {}; block('*') .match()(node => !visited[node.block]) .replace()(node => { visited[node.block] = true; return [ css[node.block], this.ctx ]; }); Полная декларативность: любой узел 52
53. 53 bem.github.io/bem-xjst
54. 54 github.com/bem/bh-php
55. $bh->match('button', function ($ctx) { $ctx->tag('button'); }); bh.php 55
56. Синтаксис может быть любым
57. React
58. bem-react-core
59. Что это 59 〉Обертка над стандартными React-компонентами 〉Полностью совместимая со стандартными компонентами 〉Не требует знания БЭМ 〉Не требует использования модификаторов 〉Не требует использования уровней переопределения
60. Что это 60 〉Автоматизирует генерацию классов 〉Позволяет использовать элементы, модификаторы и миксы 〉Позволяет использовать уровни переопределения 〉Оперирует компонентами, а не путями
62. <div class="user"> Elizabeth </div> Пример 62
63. export default class User extends Component { render() { return ( <div className="user">{this.props.username}</div> ); } } Было 63
64. import {decl} from 'bem-react-core'; export default decl({ block: 'user', content({username}) { return username; } }); Стало 64
65. export default decl({ block: 'User', willMount() {}, didMount() {}, willReceiveProps() {}, shouldUpdate() {}, willUpdate() {}, didUpdate() {}, willUnmount() {} }); Livecycle-методы 65
66. import User from 'b:user'; ReactDOM.render( <User />, //... ); Импорт 66
67. var User = [ require('path/to/user/user.js') ][0].applyDecls(); ReactDOM.render(<User />); Импорт 67
68. Траншпилеры 68 〉webpack-bem-loader 〉babel-plugin-bem-import
69. Какие проблемы решает bem-react-core
70. Какие проблемы 70 〉Модификации бывают опциональными › отдельные файлы › можно выразить через class ButtonWithIcon extends Button
71. Какие проблемы 71 〉Модификации бывают опциональными 〉Композитные модификации › пересечение всех вариантов не выражается через наследование › Button, Button_compound, Button_with-icon
72. import { BaseComponent, warn } from '../../Utilities'; import { ButtonType, IButtonProps } from './Button.Props'; import { DefaultButton } from './DefaultButton/DefaultButton'; import { CommandButton } from './CommandButton/CommandButton'; import { CompoundButton } from './CompoundButton/CompoundButton'; import { IconButton } from './IconButton/IconButton'; import { PrimaryButton } from './PrimaryButton/PrimaryButton'; Например, кнопка 72 github.com/OfficeDev/office-ui-fabric-react
73. public render() { const props = this.props; switch (props.buttonType) { case ButtonType.command: return <CommandButton { ...props } />; case ButtonType.compound: return <CompoundButton { ...props } />; case ButtonType.icon: return <IconButton { ...props } />; case ButtonType.primary: return <PrimaryButton { ...props } />; default: return <DefaultButton { ...props } />; } } Например, кнопка 73
74. <Button compound primary icon="check"></Button> А теперь с bem-react-core 74 Декларативно!
75. // Button_type_compound.js import {declMod} from 'bem-react-core'; import React from 'react'; export default declMod(({ type }) => type === 'button', { block: 'Button', mods({ type }) { return { ...this.__base.apply(this, arguments), type }; }, content() { return <Button … /> } }); Модификатор 75
76. import Button from 'b:Button m:type=compound'; <Button type="compound">my button</Button> Модификатор 76
78. Шаблонизация в bem-react-core 78 〉tag 〉attrs 〉mods 〉cls 〉mix 〉content
79. Уровни переопределения
80. Для чего 80 〉Общая библиотека и проекты
81. Для чего 81 〉Общая библиотека и проекты lego serp images video news
82. Для чего 82 〉Общая библиотека и проекты 〉Платформы
83. Для чего 83 〉Общая библиотека и проекты 〉Платформы common desktop touch
84. Для чего 84 〉Общая библиотека и проекты 〉Платформы common desktop touch pad phone
85. Для чего 85 〉Общая библиотека и проекты 〉Платформы 〉Дизайн
86. Для чего 86 〉Общая библиотека и проекты 〉Платформы 〉Дизайн 〉Эксперименты experiments exp1 exp2 exp3
88. library/components/link.css .link { color: red } Как это работает 88 project/components/link.css .link { text-decoration: none }
89. [ 'path/to/level1', 'path/to/level2' ] Уровни переопределения 89
90. /* styles.css */ @import path/to/level1/block1/block1.css; @import path/to/level2/block1/block1.css; Уровни переопределения 90
91. // blocks/Link/Link.js import decl from 'bem-react-core'; export default decl({ block: 'Link', tag: 'a', attrs(({url}) => ({href: url})) }); <Link url="…">… <a class="Link" href="…">… Уровни переопределения 91
92. // blocks/Link/Link.js // a11y/blocks/Link/Link.js import decl from 'bem-react-core'; export default decl({ block: 'Link', attrs() { return { ...this.__base.apply(this, arguments), role: 'link' }; } } <Link url="…">… <a class="Link" href="…" role="link">… Уровни переопределения 92
94. 94 github.com/bem/bem-react-core
95. 95 Пишите декларативно!
97. Вопросы?
99. Владимир Гриненко tadatuta@yandex-team.ru tadatuta tadatuta tadatuta