who we are — plarium globalcdn01.x-plarium.com/.../udev/content/udev_tech_meetup_13.pdf · 2018....
TRANSCRIPT
![Page 1: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/1.jpg)
![Page 2: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/2.jpg)
WHO WE ARE — PLARIUM GLOBAL
We’re one of the world’s fastest growing developers of mobile, socialand web-based games with over 250M registrations and 3M DAU.
● Founded in 2009 ● HQ in Israel ● 8 Offices & Studios
We’re home to some of the best talent in the social and mobile gaming industry.
Over 1200 professionals in eight offices and development studios across Europe and United States.
![Page 3: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/3.jpg)
UX
![Page 4: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/4.jpg)
User Experience
![Page 5: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/5.jpg)
Разработка для пользователей
![Page 6: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/6.jpg)
Забота о пользователях
![Page 7: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/7.jpg)
DX
![Page 8: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/8.jpg)
Developer Experience
![Page 9: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/9.jpg)
Ежедневная работа
![Page 10: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/10.jpg)
Комфорт в работе
![Page 11: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/11.jpg)
Затрагивает весь процесс разработки
![Page 12: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/12.jpg)
От написания кода до релиза
![Page 13: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/13.jpg)
<code/>
![Page 14: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/14.jpg)
<code/>
![Page 15: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/15.jpg)
Мы пишем код, с которым будут работать другие разработчики
![Page 16: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/16.jpg)
Разработка для разработчиков
DX ~ UX
![Page 17: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/17.jpg)
Забота о разработчиках
DX ~ UX
![Page 18: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/18.jpg)
Стараться держать все в хорошем состоянии
![Page 19: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/19.jpg)
Все зависит от проекта (архитектура / legacy / важность)
![Page 20: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/20.jpg)
Но нюансы в мелочах
![Page 21: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/21.jpg)
export default styled( compose( withData( new UsersData({ cache: false, }) ), withDefaultTheme(), withBaseCardCSS(), withUserCRUDActions({ actions: [CRUD_ACTIONS.UPDATE, CRUD_ACTIONS.DELETE], }) )(props => { return ( <Card className={cx(props.className, styles.user)} title={props.user.name} actions={ <React.Fragment> <IconButton icon="edit" onClick={() => { props.editUser(pros.user.id); }} /> <IconButton icon="remove" onClick={() => { props.removeUser(pros.user.id); }}
![Page 22: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/22.jpg)
export default styled( compose( withData( new UsersData({ cache: false, }) ), withDefaultTheme(), withBaseCardCSS(), withUserCRUDActions({ actions: [CRUD_ACTIONS.UPDATE, CRUD_ACTIONS.DELETE], }) )(props => { return ( <Card className={cx(props.className, styles.user)} title={props.user.name} actions={ <React.Fragment> <IconButton icon="edit" onClick={() => { props.editUser(pros.user.id); }} /> <IconButton icon="remove" onClick={() => { props.removeUser(pros.user.id); }}
![Page 23: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/23.jpg)
title={props.user.name} actions={ <React.Fragment> <IconButton icon="edit" onClick={() => { props.editUser(pros.user.id); }} /> <IconButton icon="remove" onClick={() => { props.removeUser(pros.user.id); }} /> </React.Fragment> } > <Avatar src={getUserAvatar(props.user)} /> </Card> ); }))` border-color: black; padding: 8px;
:hover { background: ${getThemeColor('normal200')}; }`;
![Page 24: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/24.jpg)
Перед Бренданом Эйхом, нанятым в компанию Netscape 4 апреля 1995 года[17], была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Эйха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP[17]. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина (Tom Paquin), Михаэля Тоя (англ.), Рика Шелла (Rick Schell), был убеждён, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы
Перед Бренданом Эйхом, нанятым в компанию Netscape 4 апреля 1995 года[17], была поставлена
задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку
требования были размыты, Эйха перевели в группу, ответственную за серверные продукты, где он
проработал месяц, занимаясь улучшением протокола HTTP[17]. В мае разработчик был переброшен
обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал
разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера, включая Тома Пакина (Tom Paquin),
Михаэля Тоя (англ.), Рика Шелла (Rick Schell), был убеждён, что Netscape должен поддерживать язык
программирования, встраиваемый в HTML-код страницы
Прочитать возможно, но сложно
![Page 25: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/25.jpg)
<Dialog isOpen={true} />
<Popover isVisible={true} />
<FiltersToolbar isShown={true} />
{isVisible ? <UserDialog /> : null}
![Page 26: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/26.jpg)
Тратишь целый день на мелочи и пропадает желание делать
интересные и сложные части проекта
![Page 27: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/27.jpg)
Business Value важнее. Часто приходится с этим жить.
![Page 28: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/28.jpg)
DX
![Page 29: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/29.jpg)
DXМенее важно
Более важно
![Page 30: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/30.jpg)
DXClarity
Истории про фейлы
Разработчик обладает полной видимостью потенциальных последствий своих действий.
![Page 31: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/31.jpg)
DX
Easy to use
Clarity
Интуитивно понятные интерфейсы и документация для более сложных кейсов
![Page 32: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/32.jpg)
DX
Stability
Easy to use
Clarity
Залог доверия.
Без стабильности ваш продукт становится ненадежным, делая вашу «удивительную» функциональность несущественной.
![Page 33: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/33.jpg)
DX
Function
Stability
Easy to use
Clarity
Если не работает, то это просто не работает.
![Page 34: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/34.jpg)
DX
Function
Stability
Easy to use
Clarity
![Page 35: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/35.jpg)
Чем меньше кода — тем лучше
![Page 36: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/36.jpg)
Чем проще код — тем лучше
![Page 37: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/37.jpg)
DX влияет на:
‣ Скорость разработки‣ Сохранение спокойного состояния‣ Комфорт‣…‣ Качество
![Page 38: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/38.jpg)
‣ Не писать лишний код‣ Писать простой код‣ Разделение кода — бизнес логика и инфраструктура‣ Контролировать изменения‣ Придерживаться гайдлайнов
Что нужно делать?
![Page 39: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/39.jpg)
‣ Не писать лишний код‣ Писать простой код‣ Разделение кода — бизнес логика и инфраструктура‣ Контролировать изменения‣ Придерживаться гайдлайнов
Что нужно делать?
![Page 40: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/40.jpg)
React Components
![Page 41: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/41.jpg)
Существующие решения
![Page 42: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/42.jpg)
![Page 43: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/43.jpg)
import React from 'react';import PropTypes from 'prop-types';import { withStyles } from '@material-ui/core/styles';import FormLabel from '@material-ui/core/FormLabel';import FormControl from '@material-ui/core/FormControl';import FormGroup from '@material-ui/core/FormGroup';import FormControlLabel from '@material-ui/core/FormControlLabel';import FormHelperText from '@material-ui/core/FormHelperText';import Checkbox from '@material-ui/core/Checkbox';
const styles = theme => ({ root: { display: 'flex', }, formControl: { margin: theme.spacing.unit * 3, },});
class CheckboxesGroup extends React.Component { state = { gilad: true, jason: false, antoine: false, };
handleChange = name => event => { this.setState({ [name]: event.target.checked }); };
render() {
![Page 44: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/44.jpg)
import React from 'react';import PropTypes from 'prop-types';import { withStyles } from '@material-ui/core/styles';import FormLabel from '@material-ui/core/FormLabel';import FormControl from '@material-ui/core/FormControl';import FormGroup from '@material-ui/core/FormGroup';import FormControlLabel from '@material-ui/core/FormControlLabel';import FormHelperText from '@material-ui/core/FormHelperText';import Checkbox from '@material-ui/core/Checkbox';
const styles = theme => ({ root: { display: 'flex', }, formControl: { margin: theme.spacing.unit * 3, },});
class CheckboxesGroup extends React.Component { state = { gilad: true, jason: false, antoine: false, };
handleChange = name => event => { this.setState({ [name]: event.target.checked }); };
render() {
![Page 45: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/45.jpg)
/> <FormControlLabel control={ <Checkbox checked={jason} onChange={this.handleChange('jason')} value="jason" /> } label="Jason Killian" /> <FormControlLabel control={ <Checkbox checked={antoine} onChange={this.handleChange('antoine')} value="antoine" /> } label="Antoine Llorca" /> </FormGroup> <FormHelperText>You can display an error</FormHelperText> </FormControl> </div> ); }}
CheckboxesGroup.propTypes = { classes: PropTypes.object.isRequired,};
export default withStyles(styles)(CheckboxesGroup);
![Page 46: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/46.jpg)
import FormLabel from '@material-ui/core/FormLabel';import FormControl from '@material-ui/core/FormControl';import FormGroup from '@material-ui/core/FormGroup';import FormControlLabel from '@material-ui/core/FormControlLabel';import FormHelperText from '@material-ui/core/FormHelperText';import Checkbox from '@material-ui/core/Checkbox';
function render() { return ( <div className={classes.root}> <FormControl component="fieldset" className={classes.formControl}> <FormLabel component="legend">Assign responsibility</FormLabel> <FormGroup> <FormControlLabel control={<Checkbox />} label="Gilad Gray" /> <FormControlLabel control={<Checkbox />} label="Jason Killian" /> <FormControlLabel control={<Checkbox />} label="Antoine Llorca" /> </FormGroup> <FormHelperText>Be careful</FormHelperText> </FormControl> <FormControl required error={error} component="fieldset" className={classes.formControl} > <FormLabel component="legend">Pick two</FormLabel> <FormGroup> <FormControlLabel control={<Checkbox />} label="Gilad Gray" /> <FormControlLabel control={<Checkbox />} label="Jason Killian" /> <FormControlLabel control={<Checkbox />} label="Antoine Llorca" />
![Page 47: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/47.jpg)
import FormLabel from '@material-ui/core/FormLabel';import FormControl from '@material-ui/core/FormControl';import FormGroup from '@material-ui/core/FormGroup';import FormControlLabel from '@material-ui/core/FormControlLabel';import FormHelperText from '@material-ui/core/FormHelperText';import Checkbox from '@material-ui/core/Checkbox';
function render() { return ( <div className={classes.root}> <FormControl component="fieldset" className={classes.formControl}> <FormLabel component="legend">Assign responsibility</FormLabel> <FormGroup> <FormControlLabel control={<Checkbox />} label="Gilad Gray" /> <FormControlLabel control={<Checkbox />} label="Jason Killian" /> <FormControlLabel control={<Checkbox />} label="Antoine Llorca" /> </FormGroup> <FormHelperText>Be careful</FormHelperText> </FormControl> <FormControl required error={error} component="fieldset" className={classes.formControl} > <FormLabel component="legend">Pick two</FormLabel> <FormGroup> <FormControlLabel control={<Checkbox />} label="Gilad Gray" /> <FormControlLabel control={<Checkbox />} label="Jason Killian" /> <FormControlLabel control={<Checkbox />} label="Antoine Llorca" />
![Page 48: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/48.jpg)
import Box from '@plarium/ui';import Text from '@plarium/ui';import Checkbox from '@plarium/ui';
function render() { return ( <Box> <Box vertical={true}> <Text variant="legend">Assign responsibility</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">Be careful</Text> </Box> <Box vertical={true}> <Text variant="legend">Pick two</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">You can display an error</Text> </Box> </Box> );}
![Page 49: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/49.jpg)
import Box from '@plarium/ui';import Text from '@plarium/ui';import Checkbox from '@plarium/ui';
function render() { return ( <Box> <Box vertical={true}> <Text variant="legend">Assign responsibility</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">Be careful</Text> </Box> <Box vertical={true}> <Text variant="legend">Pick two</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">You can display an error</Text> </Box> </Box> );}
![Page 50: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/50.jpg)
import Box from '@plarium/ui';import Text from '@plarium/ui';import Checkbox from '@plarium/ui';
function render() { return ( <Box> <Box vertical={true}> <Text variant="legend">Assign responsibility</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">Be careful</Text> </Box> <Box vertical={true}> <Text variant="legend">Pick two</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">You can display an error</Text> </Box> </Box> );}
![Page 51: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/51.jpg)
Технология
![Page 52: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/52.jpg)
Typescript
![Page 53: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/53.jpg)
— Используете типы? — Вы просто в голове не можете все удержать
![Page 54: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/54.jpg)
Зачем использовать React, если можно:
document.appendChild()
![Page 55: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/55.jpg)
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'outlined' | 'text' | 'contained';}
const Button = styled.button<IButtonProps>``;
![Page 56: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/56.jpg)
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'outlined' | 'text' | 'contained';}
const Button = styled.button<IButtonProps>``;
const render = () => { return <Button variant="outlined">Kharkiv JS</Button>;};
![Page 57: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/57.jpg)
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'outlined' | 'text' | 'contained';}
const Button = styled.button<IButtonProps>``;
const render = () => { return <Button variant="oulined">Kharkiv JS</Button>;};
![Page 58: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/58.jpg)
interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'outlined' | 'text' | 'contained';}
const Button = styled.button<IButtonProps>``;
const render = () => { return <Button variant="oulined">Kharkiv JS</Button>;};
![Page 59: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/59.jpg)
‣ Мелочи экономят кучу времени‣ Лишний раз не нужно идти за документацией‣ Исправление ошибок до запуска приложения‣ Скорость разработки
![Page 60: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/60.jpg)
Как сделать компонент?
![Page 61: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/61.jpg)
— Создаем файл {component}.tsx— Пишем код
![Page 62: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/62.jpg)
![Page 63: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/63.jpg)
ПроектированиеНужно выделять время на
![Page 64: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/64.jpg)
Как вы хотите использовать компонент в коде?
Проектирование
![Page 65: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/65.jpg)
Tooltip
![Page 66: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/66.jpg)
Нужен anchor, что бы рассчитать позицию
![Page 67: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/67.jpg)
const Tooltip = (props: { anchor: HTMLElement, text: sting }) => { const styles = getPositionAccordingToAnchor(props.anchor);
return <Text style={styles}>{props.text}</Text>;};
![Page 68: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/68.jpg)
const Tooltip = (props: { anchor: HTMLElement, text: sting }) => { const styles = getPositionAccordingToAnchor(props.anchor);
return <Text style={styles}>{props.text}</Text>;};
![Page 69: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/69.jpg)
const Tooltip = (props: { anchor: HTMLElement, text: sting }) => { const styles = getPositionAccordingToAnchor(props.anchor);
return <Text style={styles}>{props.text}</Text>;};
![Page 70: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/70.jpg)
const Tooltip = (props: { anchor: HTMLElement, text: sting }) => { const styles = getPositionAccordingToAnchor(props.anchor);
return <Text style={styles}>{props.text}</Text>;};
![Page 71: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/71.jpg)
class UserEditIconButton extends React.Component { ref = React.createRef();
render() { return ( <React.Fragment> <IconButton icon="edit" ref={this.ref} /> <Tooltip text="Edit User" anchor={this.ref.current} /> </React.Fragment> ); }}
☹
![Page 72: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/72.jpg)
class UserEditIconButton extends React.Component { ref = React.createRef();
render() { return ( <React.Fragment> <IconButton icon="edit" ref={this.ref} /> <Tooltip text="Edit User" anchor={this.ref.current} /> </React.Fragment> ); }}
☹
![Page 73: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/73.jpg)
<Tooltip text="Edit User"> <IconButton icon="edit" /></Tooltip>
🙂
![Page 74: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/74.jpg)
Как вы хотите использовать компонент в коде?
![Page 75: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/75.jpg)
Где мы можем еще использовать компонент?
Проектирование
![Page 76: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/76.jpg)
Title
![Page 77: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/77.jpg)
Title
![Page 78: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/78.jpg)
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
![Page 79: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/79.jpg)
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
![Page 80: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/80.jpg)
TitleLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
![Page 81: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/81.jpg)
<Toolbar title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
<Dialog.Head title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
<Card.Head title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
![Page 82: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/82.jpg)
<Toolbar title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
<Dialog.Head title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
<Card.Head title="Title" prefix={<IconButton icon="menu" />} actions={<IconButton icon="settings" />}/>
![Page 83: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/83.jpg)
Как вы хотите использовать компонент в коде?
![Page 84: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/84.jpg)
Где мы можем еще использовать компонент?
![Page 85: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/85.jpg)
Убедиться, что будет легко интегрировать
![Page 86: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/86.jpg)
Описать нужные props и начать реализацию
![Page 87: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/87.jpg)
CSS in JSНужно определиться, как писать стили
![Page 88: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/88.jpg)
CSS in JSНужно определиться, как писать стили
![Page 89: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/89.jpg)
// Button.css.root { background: 1px solid --var(primaryColor); padding: 0 4px; margin: 4px; }
// Button.jsimport cx from 'classnames';import styles from './Button.css';
const Button = ({ children, ...props }) => { return ( <button {...props} className={cx(className, stales.root)}> {children} </button> );};
2 файла / 14 строк
![Page 90: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/90.jpg)
const Button = styled.button` background: 1px solid ${props => props.theme.colors.primary}; padding: 0 4px; margin: 4px;`;
1 файл / 5 строк
![Page 91: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/91.jpg)
Доступ к связанным компонентам через static fields
![Page 92: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/92.jpg)
import { Table, TableBody, TableHead, TableHeadCell, TableRow, TableCell,} from '@plarium/material-ui/Table';
function render() { return ( <Table> <TableHead> <TableRow> <TableHeadCell>10</TableHeadCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell>10</TableCell> </TableRow> </TableBody> </Table> );}
![Page 93: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/93.jpg)
import Table from '@plarium/material-ui/Table';
function render() { return ( <Table> <Table.Head> <Table.Row> <Table.HeadCell>10</Table.HeadCell> </Table.Row> </Table.Head> <Table.Body> <Table.Row> <Table.Cell>10</Table.Cell> </Table.Row> </Table.Body> </Table> );}
![Page 94: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/94.jpg)
import Table from '@plarium/material-ui/Table';
function render() { return ( <Table> <Table.Head> <Table.Row> <Table.HeadCell>10</Table.HeadCell> </Table.Row> </Table.Head> <Table.Body> <Table.Row> <Table.Cell>10</Table.Cell> </Table.Row> </Table.Body> </Table> );}
![Page 95: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/95.jpg)
KHARKIV JS
![Page 96: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/96.jpg)
KHARKIV JS
![Page 97: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/97.jpg)
import Button from '@plarium/ui/Button';
Button.IconButton.Text
KHARKIV JS
![Page 98: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/98.jpg)
import styled from 'styled-components';import Button from '@plarium/ui/Button';
const MyButton = styled(Button)` ${ Button.Icon } { color: yellow; }`;
KHARKIV JS
![Page 99: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/99.jpg)
import styled from 'styled-components';import Button from '@plarium/ui/Button';
const MyButton = styled(Button)` ${ Button.Icon } { color: yellow; }`;
KHARKIV JS
![Page 100: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/100.jpg)
Autocomplete
![Page 101: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/101.jpg)
import Calendar from '@plarium/ui/Calendar';
Calendar.DayCalendar.SelectedDayCalendar.DisabledDayCalendar.PrevMonthButtonCalendar.NextMonthButtonCalendar.MonthNameCalendar.Weekday
![Page 102: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/102.jpg)
Что еще нужно?
![Page 103: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/103.jpg)
Темизация
Layout Система
ПорталыВиртуализация
Overlay
Triggers
Самодостаточность
![Page 104: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/104.jpg)
#1 Самодостаточность
![Page 105: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/105.jpg)
Для использования компонента, не писать дополнительный код в
приложении
![Page 106: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/106.jpg)
Проблема Snackbar
![Page 107: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/107.jpg)
Успех!
![Page 108: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/108.jpg)
Беда =(
![Page 109: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/109.jpg)
Должен быть виден {n} секунд или закрыт пользователем
Беда =(
![Page 110: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/110.jpg)
Проблема:
— Рендерим на странице Snaсkbar— Провисел 2 секунды из 10— Пользователь перешил на другую страницу— Snaсkbar пропал раньше времени
![Page 111: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/111.jpg)
![Page 112: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/112.jpg)
Решение:— Берем Redux или другую подобную бибилотеку— Добавляем модуль для сообщений (reducer)— Реализуем методы для чтения и записи (actions)— Берем первое добавленное сообщение и рендерим в руте приложения (connect)— После скрытия показываем следующее сообщение— Для рендера Snackbar используем Redux actions а не JSX
![Page 113: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/113.jpg)
<SnackbarProvider/>
![Page 114: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/114.jpg)
function render() { return ( <SnackbarProvider> <App/> </SnackbarProvider> );}
![Page 115: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/115.jpg)
class Snackbar extends React.Component { componentDidMount() { this.props.addMessage({ message: this.props.message, }); } render() { return null; }}
![Page 116: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/116.jpg)
class Snackbar extends React.Component { componentDidMount() { this.props.addMessage({ message: this.props.message, }); } render() { return null; }}
![Page 117: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/117.jpg)
class Snackbar extends React.Component { componentDidMount() { this.props.addMessage({ message: this.props.message, }); } render() { return null; }}
Из контекста
![Page 118: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/118.jpg)
В настоящей реализации кода явно больше
![Page 119: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/119.jpg)
Выглядит сложновато
![Page 120: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/120.jpg)
Не важно, насколько сложный и запутанный код в node_modules
![Page 121: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/121.jpg)
#2 Темизация
![Page 122: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/122.jpg)
Структура
![Page 123: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/123.jpg)
Структура
border-radius?
margin?padding?
color?
background?
ButtonBorderRadius?
CardBorderRadius?DialogBorderRadius?
……
………
……
………
![Page 124: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/124.jpg)
Цветовая схема
![Page 125: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/125.jpg)
![Page 126: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/126.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
![Page 127: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/127.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
Autocomplete
![Page 128: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/128.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
![Page 129: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/129.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
import Surface from '@plarium/ui/Surface';import Text from '@plarium/ui/Text';import Icon from '@plarium/ui/Icon';
function render() { return ( <Surface> <Text>Take The World!</Text> <Icon>face</Icon> </Surface> );}
![Page 130: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/130.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
import Surface from '@plarium/ui/Surface';import Text from '@plarium/ui/Text';import Icon from '@plarium/ui/Icon';
function render() { return ( <Surface> <Text>Take The World!</Text> <Icon>face</Icon> </Surface> );}
Take The World
![Page 131: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/131.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
import Surface from '@plarium/ui/Surface';import Text from '@plarium/ui/Text';import Icon from '@plarium/ui/Icon';
function render() { return ( <Surface color="primary"> <Text>Take The World!</Text> <Icon>face</Icon> </Surface> );}
Take The World
![Page 132: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/132.jpg)
interface IThemeColors { primary: string; onPrimary: string; secondary: string; onSecondary: string; accent: string; onAccent: string;
surface: string; onSurface: string; error: string; onError: string; normal100: string; ... normal600: string; gray100: string; ... gray700: string;}
import Surface from '@plarium/ui/Surface';import Text from '@plarium/ui/Text';import Icon from '@plarium/ui/Icon';
function render() { return ( <Surface color="accent"> <Text>Error Happened</Text> <Icon>fire</Icon> </Surface> );}
Error Happened
![Page 133: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/133.jpg)
Title
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
![Page 134: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/134.jpg)
Изменение темы
![Page 135: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/135.jpg)
<Palette/>
![Page 136: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/136.jpg)
const Button = styled.button` border-radius: 4px; border: 1px solid ${props => props.theme.colors.primary};`;
![Page 137: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/137.jpg)
const Button = styled.button` border-radius: 4px; border: 1px solid ${props => props.theme.colors.primary};`;
KHARKIV JS
![Page 138: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/138.jpg)
<Palette colors={{ primary: 'red', }}> <Button>Kharkiv JS</Button></Palette>
KHARKIV JS
![Page 139: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/139.jpg)
<Palette colors={{ primary: 'red', }}> <Button>Kharkiv JS</Button></Palette>
KHARKIV JS
![Page 140: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/140.jpg)
<Palette colors={{ primary: 'red', }}> <Button>Kharkiv JS</Button></Palette>
KHARKIV JS
![Page 141: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/141.jpg)
#3 Layout компоненты
![Page 142: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/142.jpg)
<Box/>
![Page 143: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/143.jpg)
<Box> <Button>Take</Button> <Button>The</Button> <Button>World!</Button></Box>
![Page 144: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/144.jpg)
<Box vertical={true}> <Button>Take</Button> <Button>The</Button> <Button>World!</Button></Box>
![Page 145: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/145.jpg)
<Box grow={1} align="center" justify="center" {...otherFlexRelatedProps}> ...</Box>
![Page 146: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/146.jpg)
Очень легко позиционировать компоненты
![Page 147: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/147.jpg)
#4 Порталы
![Page 148: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/148.jpg)
![Page 149: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/149.jpg)
![Page 150: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/150.jpg)
Title Application Toolbar
Page
![Page 151: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/151.jpg)
function render() { return ( <React.Fragment> <ApplicationToolbar /> <AnalyticsScreen /> </React.Fragment> );}
![Page 152: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/152.jpg)
function render() { return ( <React.Fragment> <ApplicationToolbar /> <AnalyticsScreen /> </React.Fragment> );}
![Page 153: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/153.jpg)
Analytics ADD CHART
![Page 154: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/154.jpg)
ReactDOM.createPortal(child, container)
![Page 155: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/155.jpg)
ReactDOM.createPortal( <Button>Add Chart</Button>, container);
![Page 156: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/156.jpg)
ReactDOM.createPortal( <Button>Add Chart</Button>, container);
DOM Element
![Page 157: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/157.jpg)
ReactDOM.createPortal( <Button>Add Chart</Button>, document.getElementById('#chart-add-button'));
![Page 158: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/158.jpg)
ReactDOM.createPortal( <Button>Add Chart</Button>, document.getElementById('#chart-add-button'));
![Page 159: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/159.jpg)
import { createPortal } from '@plarium/ui/Portals';
const Portal = createPortal();
Portal.PlaceholderPortal.Content
![Page 160: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/160.jpg)
import { createPortal } from '@plarium/ui/Portals';
const Portal = createPortal();
Portal.PlaceholderPortal.Content
![Page 161: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/161.jpg)
import { createPortal } from ‘@plarium/ui/Portals';const ToolbarActionsPortal = createPortal();
const ApplicationToolbar = () => { return ( <Toolbar> <ToolbarActionsPortal.Placeholder /> </Toolbar> );};
export const ToolbarActions = ToolbarActionsPortal.Content;
Application Toolbar
![Page 162: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/162.jpg)
import { createPortal } from '@plarium/ui/Portals';const ToolbarActionsPortal = createPortal();
const ApplicationToolbar = () => { return ( <Toolbar> <ToolbarActionsPortal.Placeholder /> </Toolbar> );};
export const ToolbarActions = ToolbarActionsPortal.Content;
Application Toolbar
![Page 163: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/163.jpg)
Screen
import { ToolbarActions } from 'toolbar';
const Screen = () => { return ( <div> <Charts/> <ToolbarActions> <Button>Add Chart</Button> </ToolbarActions> </div> );};
![Page 164: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/164.jpg)
Screen
import { ToolbarActions } from 'toolbar';
const Screen = () => { return ( <div> <Charts/> <ToolbarActions> <Button>Add Chart</Button> </ToolbarActions> </div> );};
![Page 165: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/165.jpg)
Placeholder
Portal
![Page 166: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/166.jpg)
![Page 167: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/167.jpg)
![Page 168: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/168.jpg)
![Page 169: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/169.jpg)
#5 Overlay
![Page 170: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/170.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content
![Page 171: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/171.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content
![Page 172: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/172.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
ContentX, Y
![Page 173: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/173.jpg)
import Overlay from ‘@plarium/ui/Overlay';
function render() { return ( <Overlay>{children}</Overlay> );}
![Page 174: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/174.jpg)
import Overlay from '@plarium/Overlay';
function render() { return ( <Overlay position={handlePosition}>{children}</Overlay> );}
function handlePosition(content: HTMLElement) { return { top: 0, left: 0, }}
![Page 175: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/175.jpg)
import Overlay from '@plarium/Overlay';
function render() { return ( <Overlay position={handlePosition}>{children}</Overlay> );}
function handlePosition(content: HTMLElement) { return { top: 0, left: 0, }}
![Page 176: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/176.jpg)
<Select/>
<Dropdown/>
<Menu/>
<Dialog/>
<SidePage/>
<Snackbar/>
<MultiSelect/>
<Tooltip/>
<DatePicker/>
![Page 177: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/177.jpg)
#6 Dropdown || Popover
![Page 178: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/178.jpg)
<Tooltip text=“best conf”> <Button>Kharkiv JS</Button></Tooltip>
KHARKIV JS
best conf
![Page 179: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/179.jpg)
<Popover content={<div>{content}</div>}> <Button>Kharkiv JS</Button></Popover>
KHARKIV JS
![Page 180: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/180.jpg)
<Popover content={<div>{content}</div>}> <Button>Kharkiv JS</Button></Popover>
KHARKIV JS
![Page 181: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/181.jpg)
KHARKIV JS<Popover content={ <div> <Box> <Box vertical={true}> <Text variant="legend">Assign responsibility</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">Be careful</Text> </Box> <Box vertical={true}> <Text variant="legend">Pick two</Text> <Checkbox label="Gilad Gray" /> <Checkbox label="Jason Killnan" /> <Checkbox label="Antonie Llorca" /> <Text variant="overline">You can display an error</Text> </Box> </Box> ; </div> }> <Button>Kharkiv JS</Button></Popover>
☹
![Page 182: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/182.jpg)
class PopoverButton extends React.Component { ref = React.createRef();
render() { return ( <React.Fragment> <Button ref={this.ref}>Kharkiv JS</Button> <Popover anchor={this.ref.current}>{content}</Popover> </React.Fragment> ); }}
KHARKIV JS
☹
![Page 183: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/183.jpg)
Усложняем код
![Page 184: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/184.jpg)
import { createDropdown } from '@plarium/ui/createDropdown';
const Dropdown = createDropdown();
Dropdown.TriggerDropdown.Content
![Page 185: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/185.jpg)
import { createDropdown } from '@plarium/ui/createDropdown';
const Dropdown = createDropdown();
function render() { return ( <React.Fragment> <Dropdown.Trigger> {props => <Button onClick={props.handleOpen}>Open</Button>} </Dropdown.Trigger> <Dropdown.Content>{() => <div>{content}</div>}</Dropdown.Content> </React.Fragment> );}
![Page 186: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/186.jpg)
import { createDropdown } from '@plarium/ui/createDropdown';
const Dropdown = createDropdown();
function render() { return ( <React.Fragment> <Dropdown.Trigger> {props => <Button onClick={props.handleOpen}>Open</Button>} </Dropdown.Trigger> <Dropdown.Content>{() => <div>{content}</div>}</Dropdown.Content> </React.Fragment> );}
![Page 187: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/187.jpg)
import { createDropdown } from '@plarium/ui/createDropdown';
const Dropdown = createDropdown();
function render() { return ( <React.Fragment> <Dropdown.Trigger> {props => <Button onClick={props.handleOpen}>Open</Button>} </Dropdown.Trigger> <Dropdown.Content>{() => <div>{content}</div>}</Dropdown.Content> </React.Fragment> );}
![Page 188: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/188.jpg)
#7 Виртуализация
![Page 189: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/189.jpg)
Рендерим только видимую часть
![Page 190: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/190.jpg)
<Grid/> <Select/> <List/>
![Page 191: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/191.jpg)
react-virtualized
![Page 192: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/192.jpg)
import { MultiGrid } from 'react-virtualized';
function render() { return ( <MultiGrid cellRenderer={cellRenderer} columnCount={headers.length} fixedColumnCount={1} fixedRowCount={1} columnWidth={100} height={300} rowHeight={40} rowCount={100} width={width} /> );}
function cellRenderer({ rowIndex, columnIndex }) {}
![Page 193: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/193.jpg)
import { MultiGrid } from 'react-virtualized';
function render() { return ( <MultiGrid cellRenderer={cellRenderer} columnCount={headers.length} fixedColumnCount={1} fixedRowCount={1} columnWidth={100} height={300} rowHeight={40} rowCount={100} width={width} /> );}
function cellRenderer({ rowIndex, columnIndex }) {}
![Page 194: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/194.jpg)
columnWidth={100} height={300} rowHeight={40} rowCount={100} width={width} /> );}
function cellRenderer({ rowIndex, columnIndex }) { const column = data[rowIndex][columnIndex];
switch (column.col) { case 'avatar': return <Avatar src={column.avatar} />;
default: return <Text>{column.toString()}</Text>; }}
![Page 195: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/195.jpg)
import { MultiGrid } from 'react-virtualized';
function render() { return ( <MultiGrid cellRenderer={cellRenderer} columnCount={headers.length} fixedColumnCount={1} fixedRowCount={1} columnWidth={100} height={300} rowHeight={40} rowCount={100} width={width} /> );}
function cellRenderer({ rowIndex, columnIndex }) {}
![Page 196: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/196.jpg)
import { MultiGrid } from 'react-virtualized';
function render() { return ( <MultiGrid cellRenderer={cellRenderer} columnCount={headers.length} fixedColumnCount={1} fixedRowCount={1} columnWidth={getColumnHeight} height={300} rowHeight={getRowHeight} rowCount={100} width={width} /> );}
function cellRenderer({ rowIndex, columnIndex }) {}
![Page 197: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/197.jpg)
Мешаем бизнес логику с инфраструктурой
![Page 198: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/198.jpg)
import Grid from '@plarium/Grid';
function render() { return ( <Grid data={data}> <Grid.Column width={38} when={props => props.col === 'avatar'}> {cell => <Avatar src={cell.avatar} />} </Grid.Column> </Grid> );}
![Page 199: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/199.jpg)
import Grid from '@plarium/Grid';
function render() { return ( <Grid data={data}> <Grid.Column width={38} when={props => props.col === 'avatar'}> {cell => <Avatar src={cell.avatar} />} </Grid.Column> </Grid> );}
![Page 200: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/200.jpg)
import Grid from '@plarium/Grid';
function render() { return ( <Grid data={data}> <Grid.Column width={38} when={props => props.col === 'avatar'}> {cell => <Avatar src={cell.avatar} />} </Grid.Column> </Grid> );}
![Page 201: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/201.jpg)
import Grid from '@plarium/Grid';
function render() { return ( <Grid data={data}> <Grid.Column width={38} when={props => props.col === 'avatar'}> {cell => <Avatar src={cell.avatar} />} </Grid.Column> </Grid> );}
![Page 202: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/202.jpg)
Превью компонентов
![Page 203: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/203.jpg)
![Page 204: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/204.jpg)
![Page 205: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/205.jpg)
## Button
```js staticimport { OutlinedButton, ContainedButton, TextButton,} from '@plarium/material-ui/Button';```
```js<Box> <Button>Take</Button> <Button variant="outlined">The</Button> <Button variant="contained">World!</Button> <Button variant="contained" icon="face"> Face </Button></Box>
![Page 206: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/206.jpg)
![Page 207: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/207.jpg)
![Page 208: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/208.jpg)
![Page 209: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/209.jpg)
Copyright Plarium Global LTD. 2018 Do not distribute
THANK YOU
![Page 210: WHO WE ARE — PLARIUM GLOBALcdn01.x-plarium.com/.../udev/content/Udev_tech_Meetup_13.pdf · 2018. 10. 31. · WHO WE ARE — PLARIUM GLOBAL We’re one of the world’s fastest growing](https://reader034.vdocuments.us/reader034/viewer/2022051804/5fec673823c8bc396b598bce/html5/thumbnails/210.jpg)