Сбертехнологии фронтенда

Александра Воробьева

Сбертехнологии
фронтенда

Единая фронтальная система (ЕФС)

Фронтальные системы

  1. интернет-банк — Сбербанк Онлайн

Задачи разработки ЕФС

Задачи разработки ЕФС

Снижение времени внедрения продукта

1 год → 1 месяц

Платформа ЕФС

2 года

Фронтенд ЕФС

Команда платформы

библиотека UI-компонентов

Прикладные проекты

бизнес-логика

Библиотека
UI-компонентов

Technologies

Библиотеки UI

Контроллы

Контроллы

Способы вывода информации

Способы вывода информации

Способы вывода информации

Способы вывода информации

Сетка

Сетка

Просмотр вложений

Просмотр вложений

Загрузка файлов

Загрузка файлов

Компонент динамической подгрузки приложений

Компонент динамической загрузки приложений

Поддержка браузеров

Поддержка браузеров

CRY

Работа с железом

ActiveX

New feature?

IE8
IE8

Технологии

Technologies
React

React

React + IE8?

Challenge
Typecript

TypeScript

Компонент библиотеки

Component

Проблемы производительности

Technologies

Как решали

				export interface State {
					value: string
				}
				export class Input extends React.Component<{}, State> {
					onChange = value => this.setState({ value })
					render() {
						<input value={this.state.value}
			onChange={this.onChange} />
					}
				}
			
				export interface State {
					value: string
				}
				export class Input extends React.Component<{}, State> {
					onChange = value => this.setState({ value })
					render() {
							<input value={this.state.value}
			onChange={this.onChange} />
					}
				}
			
				export interface FormState {
					value: string
				}
				export class Form extends React.Component<{}, FormState> {
							changeInput = value => this.setState({ value })

							render() {
								<Input value={this.state.value}
			onChange={this.changeInput} />
						}
				}
			
				export class Input extends React.Component<Props, {}> {
						render() {
							<input value={this.props.value }
			onChange={this.props.onChange } />
						}
				}

Как решали

			shouldComponentUpdate(nextProps, nextState) {
				// делаем поверхностную проверку свойств
				if (nextProps.value !== this.props.value) {

				}
			}

Как решали

			export class Button extends React.Component<{}, {}> {
			 	render() {
					<button onClick={(e) => console.log(e);}>
						Text
					</button>
				}
			}
		
			export class Button extends React.Component<{}, {}> {
				onClick = e => console.log(e);
				render() {
					<button onClick={this.onClick}>
						Text
					</button>
				}
			}
REDUX
RM

CSS

CSS

PostCss + CssModules

PostCSS

Плагины для PostCSS

  1. nested
  2. autoprefixer
  3. import
  4. simple-vars
CSS Modules

CSS Modules

button.css

			.button {
				color: #FFF;
				background: #F00
			}

button.tsx

				import * as styles from './button.css';
				<button className={styles.button}>
					Кнопка
				</button>

TS → CSS Modules → d.ts

Сборка

Сборка проекта

gulp + webpack

Gulp

Сборка Webpack

index.tsx Webpack

Сборка

Props API

			export interface Props {
				/* значение, задаваемое в поле */
				value?: string;
			

				/* коллбек вызывается каждый раз при изменении поля*/
				onChange?: (value: string) => void;
			}

Документация

Components

Документация

					<PropsDoc target={Button} />
Свойство Тип Описание
width string | number Ширина таблицы. По умолчанию — 100%. Можно указывать в процентах или в пикселях. Число без единиц измерения задает ширину в пикселях.

Тесты

Unit-тестирование

Karma Karma
React Test Utils

Покрытие тестами

remap-istanbul

CSS-тестирование

Gemini от Яндекса
Gemini

Непрерывная интеграция

Jenkins
Jenkins

Деплой

Деплой

Команда

Команда

Team
8 человек

Команда

Scrum Scrum

Инструментарий

Jira Confluence Stash

Требования к кандидату

Hugh

Что дальше?

Планы на будущее

Александра Воробьева

@shura_sparrow
shura.sparrow@gmail.com