Фронтопс? Серьёзно?

Фронтопс?Серьёзно?

© MICHAEL STEWART / GC IMAGESGETTY IMAGES

Обо мне

Анна Селезнёва

Ведущий фронтенд-разработчик в Spiral Scout

Соорганизатор сообществ MinskCSS, MinskJS, BeerJS

#freehugs

Что делает фронтенд-разработчик?

JS

CSS

HTML

JS

CSS

HTML

FTP

Автоматизация

JS

CSS

HTML

FTP

Контроль версий

JS

CSS

HTML

FTP

Деплой

JS

CSS

HTML

Новые технологии

JS

CSS

HTML

Пакетный менеджер

JS

CSS

HTML

Новые технологии

JS

CSS

HTML

Локальный веб-сервер

JS

CSS

HTML

Тесты

JS

CSS

HTML

Линтеры

JS

CSS

HTML

Сборка

JS

CSS

HTML

Новые технологии

JS

CSS

HTML

TS

Производительность

Мониторинг

Актуальность

Причем здесь фронтопс?

Термин

Девопс —методология взаимодействия специалистов по разработке со специалистами по информационно-технологическому обслуживанию и интеграцию их рабочих процессов друг в друга для обеспечения качества продукта.

Википедия

Front End Development

+

Operations

=

Front End OpsDevOps

2013

Фронтопс — это мост между целью приложения
и его реальностью

Алекс Секстон @ Stripe / Smashing Magazine

Front End Ops Conference

2015

Фронтопс — это тот, кто поставляет в компанию лучшие инструменты и практики, помогая разработчикам эффективно сосредоточиться на своей работе и обеспечивая высокое качество кода и производительность

Стивен Кокс @ agile{collective}

Только код

TS

CSS

HTML

Команда

Нет тестов

TS

CSS

HTML

Нет линтеров

TS

CSS

HTML

Некачественная сборка

TS

CSS

HTML

Всё плохо

TS

CSS

HTML

Проблемы приложения

Долго загружается
Медленно работает
Часто падает
Сложно отлаживать ошибки
Непросто разобраться в коде

Что такое фронтопс?

Идея
Задача
Роль

Опыт крупных компаний

Тимлид

Что делает фронтопс?

Инфраструктура

Настройка репозитория

Настройка репозитория

package.json:

      "husky": {
  "hooks": {
    "pre-commit": "yarn lint && yarn test",
  }
}

Настройка репозитория

      $ git config core.autocrlf false

Инфраструктура

Настройка репозитория
Выбор и установка необходимых пакетов

package.json

      "devDependencies": {
  "typescript": "^3.7.2",
},
"dependencies": {
  "react": "^16.12.0",
},

Контроль версий пакетов

package-lock.json

yarn.lock

Использование:

      $ npm ci

      $ yarn

Инфраструктура

Настройка репозитория
Выбор и установка необходимых пакетов
Настройка локального веб-сервера

Локальный веб-сервер

      const express = require('express');
const app = express();
const middleware = require('./middleware');
middleware(app, config);
app.listen(port, host, async (err) => {
  ...
});

Качество кода

Настройка редактора

.editorconfig

      [*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
charset = 'utf-8'
trim_trailing_whitespace = true

Качество кода

Настройка редактора
Настройка линтеров

.eslintrc.js

      module.exports =  {
  extends: ["airbnb-typescript"],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion:  2018,
    ...
};

.stylelintrc.json

      {
  "extends": "stylelint-config-standard"
}

Сборка

Настройка бандлера

webpack.config.js

      module.exports = {
  ...
  devtool: /* Карты кода */,
  plugins: /* Необходимые плагины */,
  optimization: /* Настройка оптимизации */,
  ...
};

webpack-bundle-analyzer

Сборка

Настройка бандлера
Настройка окружений

Окружения

development
production
test

.env

      DB_HOST=127.0.0.1
DB_USER=root
DB_PASSWORD=password
STRIPE_SECRET_KEY=secret
GOOGLE_API_KEY=value

CI/CD

Настройка тестов

jest.config.js

      module.exports = {
  preset: 'ts-jest',
  ...
};

CI/CD

Настройка тестов
Помощь с настройкой деплоя

Инструкции

Установить NodeJS
Установить Yarn
Выполнить yarn install
Выполнить yarn build
Скопировать папку dist

Мониторинг

Настройка трекинга ошибок

Sentry.io

      import * as Sentry from '@sentry/browser';
Sentry.init({ dsn: `https://${key}@sentry.io/${project}` });

// Использование:
try { ... } catch (err) {
  Sentry.captureException(err);
}

Мониторинг

Настройка трекинга ошибок
Регулярная проверка пакетов

Проверка пакетов

Актуальность:
yarn outdated

Проверка пакетов

Актуальность:
yarn outdated

Уязвимость:
yarn audit

Аудит

Производительность
Доступность
SEO

Chrome → DevTools → Audits

Lighthouse CI

      language: node_js
node_js:
  - 10 # use Node 10 LTS or later
before_install:
  - npm install -g @lhci/cli@0.3.x
script:
  - npm run build # build your site
  - lhci autorun # run lighthouse CI
addons:
  chrome: stable # make sure you have Chrome available

Нужен ли нам фронтопс?

Задачи фронтопса

Анализ производительности и доступности
Проверка актуальности и уязвимости пакетов
Актуализация сборки
Мониторинг покрытия тестами
Контроль качества кода

Задачи фронтопса

+ запуск новых проектов:

Создание инфраструктуры
Организация сборки
Настройка и примеры тестов
Настройка трекинга ошибок

Где взять фронтопса?

Нанять 🤔

Вакансии

Вакансии

Где взять фронтопса?

Нанять 😞
Вырастить 👌
Стать им 👍

Мы, как фронтендеры, заботимся о пользователях.
От того, насколько доволен пользователь, напрямую зависит успешность проекта.

Алексей Плуталов @ Evil Martians / Spb Frontend Drinkast

Я – тимлид. Что делать?

Разработать единый кодстайл
Запланировать проверку пакетов (yarn audit, yarn outdated)
Проанализировать сборку (webpack-bundle-analyzer)
Настроить репозиторий (git config, pre-commit)
Обеспечить мониторинг ошибок

Я – разработчик. Что делать?

Проверить пакеты (yarn audit--fix, yarn outdated)
Открыть вкладку Audits в DevTools и составить план
Проанализировать сборку (webpack-bundle-analyzer)
Настроить и запустить линтеры
Начать писать тесты

Действуй!

Спасибо!

Слайды: askd.rocks/pres/frontops

#freehugs