Workshop "Iteration as a Path to Perfection", Denys Mishunov

ІТЕРАЦІЯ
ЯК
DENYS MISHUNOV
ШЛЯХДОІДЕАЛУ

ІТЕРАЦІЯ,ЯКШЛЯХДОІДЕАЛУ
- Вступ (10 хв.)
- Ітерація при розробці ПЗ (40 хв.)
— 10 хв. Перерва —
- Будівельні блоки ітерації в Frontend Engineering (40 хв.)
- Найкращі практики ітераційної розробки на фронтенді (40 хв.)
— 10 хв. Перерва —
- Hands-on завдання: Ітеративна побудова фронтенд проекту (80 хв.)
- Висновки та короткий конспект (10 хв.)

Визначення та важливість
ІТЕРАТИВНИЙПІДХІД
УРОЗРОБЦІПЗ

- Еволюція
- Мистецтво
- Спорт
- "День бабака”
ІТЕРАЦІЯУ
РЕАЛЬНОМУСВІТІ

ІТЕРАЦІЯВРОЗРОБЦІПЗ

ІТЕРАЦІЯПРОТИ“WATERFALL"

ІТЕРАЦІЯВРОЗРОБЦІ

“ЄДИНЕПОСТІЙНЕ
ВЖИТТІ-
ЦЕЗМІНА”
ГЕРАКЛІТ

ІТЕРАТИВНІМЕТОДОЛОГІЇ

- Agile
- Scrum
- Kanban
- Екстремальне
програмування (XP)
ІТЕРАТИВНІ
МЕТОДОЛОГІЇ

- Особистості та взаємодії важливіше процесів та інструментів.
- Робочий програмний продукт має перевагу над детальною документацією.
- Співпраця з замовником вище договірних умов.
- Готовність до змін важливіше, ніж дотримання плану.
AGILEМАНІФЕСТ

- Робота в Scrum
- Ролі в Scrum
- Scrum Master
- Власник продукту
- Команда розробників
SCRUM

- Візуалізуйте робочий процес
- Обмежуйте роботу в процесі
- Керуйте потоком
- Робіть політики процесів явними
- Реалізуйте зворотній зв'язок
- Співпрацюйте для еволюції
KANBAN

- Розробка через тестування (TDD)
- Постійна інтеграція
- Парне програмування
- Колективна власність коду
- Рефакторинг
ЕКСТРЕМАЛЬНЕПРОГРАМУВАННЯ(XP)

ПЕРЕВАГИ
ІТЕРАТИВНОЇРОЗРОБКИ

- Управління ризиками
- Гнучкість і адаптивність планування
- Швидкий вихід на ринок
- Постійне покращення
ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ

УПРАВЛІННЯРИЗИКАМИ

ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ

ШВИДКИЙВИХІДНАРИНОК

ШВИДКИЙВИХІДНАРИНОК:
MVP

ПОСТІЙНЕПОКРАЩЕННЯ.
KAIZEN

ІТЕРАТИВНИЙПІДХІД:
ВИСНОВКИ

ПЕРЕВАГИ:
ІТЕРАТИВНИЙПІДХІД
МЕТОДОЛОГІЇ:
- Agile
- Scrum
- Kanban
- XP

"НЕМАЄНІЧОГОБІЛЬШБЕЗГЛУЗДОГО,ЯК
ЕФЕКТИВНОРОБИТИТЕ,ЩОВЗАГАЛІНЕ
ПОВИННОБУТИЗРОБЛЕНО."
ПІТЕР ДРУКЕР

ПЕРЕРВА
10 ХВИЛИН

БУДІВЕЛЬНІБЛОКИІТЕРАЦІЇВ
FRONTENDENGINEERING

ЯКІСТЬКОДУТА
ПІДТРИМУВАНІСТЬ

ЯКІСТЬКОДУ:
МИСТЕЦТВОПИСЬМА

- Послідовність
- Модульність
- Документація
- Тестування
ПРАКТИКИДЛЯЯКОСТІКОДУ

ПІДТРИМУВАНІСТЬКОДУ

- Вільне зв’язування (Loose coupling)
- Використання патернів (проектування, дизайн, тощо)
- Правильна обробка помилок
- Контроль версій
- Перевірка коду
ПРАКТИКИДЛЯПІДТРИМУВАНОСТІКОДУ

ЯКІСТЬКОДУТАІТЕРАЦІЇ

КОМПОНЕНТНО-ОРІЄНТОВАНА
РОЗРОБКА
(COMPONENT-DRIVEN DEVELOPMENT)

ЩОТАКЕ
КОМПОНЕНТНО-ОРІЄНТОВАНА
РОЗРОБКА?

КОМПОНЕНТИУ
ФРОНТЕНДІЇ

- Швидший розвиток
- Спрощене тестування
- Поліпшена підтримка та супровід
- Сприяння співпраці
ПЕРЕВАГИКОМПОНЕНТНО-ОРІЄНТОВАНОЇРОЗРОБКИ

ПОПУЛЯРНІБІБЛІОТЕКИТА
ФРЕЙМВОРКИДЛЯCDD

- React
- Vue
- Angular
- Svelte
КОМПОНЕНТНО-ОРІЄНТОВАНІФРЕЙМВОРКІ

РЕКОМЕНДАЦІЇ:
- Єдність
- Модульність
- Тестування
- Документація
НАЙКРАЩІПРАКТИКИДЛЯКОМПОНЕНТІВ
ПРАКТИКИ:
- Чітке визначення обов'язків
- Коректна інкапсуляція стану та логіки
- Використання утиліт та міксінів
- Послідовність у найменуваннях
- Документація та коментарі

БІБЛІОТЕКИКОМПОНЕНТІВ
ТА
СИСТЕМИДИЗАЙНУ

- @gitlab/ui
- MUI (раніше відома як Material-UI)
- Ant Design
- Bootstrap
- Tailwind
- інші
ПОПУЛЯРНІБІБЛІОТЕКИКОМПОНЕНТІВТАСИСТЕМИДИЗАЙНУ

БІБЛІОТЕКИКОМПОНЕНТІВТА
СИСТЕМИДИЗАЙНУ:НАВІЩО

- Зменшення технічного боргу
- Покращення зрозумілості
коду
- Покращення підтримуваності
- Збільшення розширюваності
ПЕРЕВАГИ
ІНКРЕМЕНТАЛЬНОГО
РЕФАКТОРИНГУ

- Правило хлопчика-скаута
- Червоний-Зелений-
Рефакторинг
- Розділити та панувати
СТРАТЕГІЇ
ІНКРЕМЕНТАЛЬНОГО
РЕФАКТОРИНГУ

- Зменшення технічного боргу
- Покращена зрозумілість коду
- Покращена підтримуваність
- Збільшена розширюваність
- Вища якість коду
- Співпраця та обмін знанням
- Спрощення перевірок коду та інтеграції
ПЕРЕВАГИІНКРЕМЕНТАЛЬНОГОРЕФАКТОРИНГУ

- JavaScript - Simplifying Complex Conditional
ПРИКЛАДРЕФАКТОРІНГУ
function canAccessContent(user) {
if (
user.isLoggedIn &&
user.subscription.isActive &&
user.subscription.level > 2 &&
user.age >= 18
) {
return true;
}
return false;
}

- JavaScript - Simplifying Complex Conditional
- Incrementally refactor this to make it more
readable
ПРИКЛАДИРЕФАКТОРІНГУ
if (
user.isLoggedIn &&
user.subscription.isActive &&
user.subscription.level > 2 &&
user.age >= 18
) {
return true;
}
return false;
}
function isSubscribed(user) {
return user.subscription.isActive
&& user.subscription.level > 2;
}
function isOfAge(user) {
return user.age >= 18;
}
return user.isLoggedIn &&
isSubscribed(user) && isOfAge(user);
}

TDD,
ЮНІТ-ТЕСТУВАННЯ

ПОДОРОЖУЧАСІ:
ІСТОРІЯТЕСТУВАННЯ

ПІОНЕРИ ТЕСТУВАННЯ

AGILE РЕВОЛЮЦІЯ

- Покращена якість коду
- Швидкий розвиток та легке
відлагодження
- Покращене співробітництво
ПЕРЕВАГИTDDТА
ЮНІТ-ТЕСТУВАННЯ

TDD:
ЧЕРВОНИЙ-ЗЕЛЕНИЙ-РЕФАКТОРИНГ

Пишемо тест який падає
TDD:ЧЕРВОНИЙ // user_list.spec.js
const { renderUserList } = require("./user-list");
test("renderUserList should return correct HTML", () => {
const users = [
{ name: "Alice", isOnline: true },
{ name: "Bob", isOnline: false },
];
const expectedHTML = `
<ul>
<li>Alice (online)</li>
<li>Bob (offline)</li>
</ul>`;
expect(renderUserList(users)).toBe(expectedHTML);
});

Пишемо МІНІМАЛЬНИЙ функціонал
щоб тест пройшов
TDD:ЗЕЛЕНИЙ // user-list.js
function renderUserList(users) {
let userListHTML = "<ul>";
users.forEach((user) => {
const status = user.isOnline ? "online" : "offline";
userListHTML += `<li>${user.name} (${status})</li>`;
});
userListHTML += "</ul>";
return userListHTML;
}
module.exports = { renderUserList };

Оптимізація, помилки,
додаткові перевірки, тощо
РЕФАКТОРИНГ
// user-list.js
const userListItems = users.map((user) => {
return `<li>${user.name} (${status})</li>`;
});
return `<ul>${userListItems.join("")}</ul>`;
}
// user-list.js
let userListHTML = "<ul>";
users.forEach((user) => {
userListHTML += `<li>${user.name} (${status})</li>`;
});
userListHTML += "</ul>";
return userListHTML;
}

- Використовуйте описові назви тестів
ПОРАДИДЛЯЮНІТ-ТЕСТУВАННЯ

- Використовуйте описові назви тестів
- Зберігайте тести простими та фокусованими
- Не забувайте про крайні випадки
ПОРАДИДЛЯЮНІТ-ТЕСТУВАННЯ

“УСПІХ—ЦЕТЕ,ЩОВІДБУВАЄТЬСЯ,КОЛИ
ПІДГОТОВКАЗУСТРІЧАЄТЬСЯЗ
МОЖЛИВІСТЮ”
СЕНЕКА

ПОСТІЙНАІНТЕГРАЦІЯ(CI)
ТА
ПОСТІЙНЕРОЗГОРТАННЯ(CD)

ПОСТІЙНЕРОЗГОРТАННЯ(CD)

- Виявлення помилок на
ранніх етапах
- Швидкий зворотний зв'язок
- Стабільний користувацький
досвід
ЧОМУCI/CDВАЖЛИВІ
ДЛЯFRONTEND?

CI/CDТАПРОМИСЛОВАРЕВОЛЮЦІЯ

- Скоріший випуск змін коду
- Більша надійність
- Стабільний користувацький досвід
ПЕРЕВАГИCI/CDВРОЗРОБЦІПЗ

- GitLab CI/CD
- Jenkins
- CircleCI
- Travis CI
- Github Actions
ІНСТРУМЕНТИCI/CD

- Коллекція шаблонів CI/CD
конфігурацій
ПРИКЛАДИУGITLAB
https://tinyurl.com/yc3dx8d9

// test-add.spec.js
const add = require('./add');
test('add 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3);
});
# .gitlab-ci.yml
image: node:latest
stages:
- test
test:
stage: test
script:
- npm install
- npm run test

# .gitlab-ci.yml
stages:
- test
- deploy
test:
image: node:latest
stage: test
script:
- npm ci
- npm test
pages:
image: node:latest
stage: deploy
script:
- mkdir .public
- cp -r ./* .public
- rm -rf public
- mv .public public
artifacts:
paths:
- public
rules:
- if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

CI/CD-СУПЕРГЕРОЇРОЗРОБКИПЗ

НАЙКРАЩІПРАКТИКИ
ІТЕРАЦІЇНАФРОНТЕНДІ

- Використання Git для контролю версій
- Єдині стандарти кодування та перевірка коду на помилки (Linting)
- Правильне документування та коментування коду
- Парне програмування
НАЙКРАЩІПРАКТИКИІТЕРАЦІЇНАФРОНТЕНДІ

ВИКОРИСТАННЯGITДЛЯ
КОНТРОЛЮВЕРСІЙ

- Коміти: Атомарні, Часті та
Інформативні
- Гілки: для контекстуальної ізоляції
та структуризації
- Merge vs. Rebase: стратегічний
вибір
- Merge / Pull Requests як
платформа для співпраці та
рецензування
- .gitignore як охоронець вашого
репозиторію
ВИКОРИСТАННЯGIT
ДЛЯКОНТРОЛЮВЕРСІЙ

ЄДИНІСТАНДАРТИ
КОДУВАННЯТАLINTING

ЩОТАКЕСТАНДАРТИ
КОДУВАННЯ?

- Покращена читабельність
- Зменшення помилок
- Покращена підтримуваність
- Збільшена продуктивність
ПЕРЕВАГИСТАНДАРТІВ
КОДУВАННЯ

JAVASCRIPTSTYLE
GUIDEВІДAIRBNB
- https://airbnb.io/javascript/

ЩОТАКЕЛІНТІНГ?
- ESLint: https://eslint.org/

ІНСТРУМЕНТИДЛЯ
ОФОРМЛЕННЯКОДУ
- Prettier: https://eslint.org/

ЧОМУВАЖЛИВОДОТРИМУВАТИСЬ
СТАНДАРТІВКОДУВАННЯ?

- ESLint
- Prettier
- Lefthook
ІНСТРУМЕНТИУ
JAVASCRIPTПРОЕКТІ
# 1. Встановіть ESLint, Prettier та Lefthook
➜ ~ npm install eslint prettier lefthook --save-dev
# 2. У кореневій директорії проекту налаштуйте файл
# `.eslintrc.json` для ESLint з правилами, які ви хочете
# застосувати.
# 3. Налаштуйте файл `.prettierrc` для Prettier, в якому ви
# вказуєте свої уподобання щодо форматування коду.
# 4. Ініціалізуйте та налаштуйте Lefthook у вашому проекті:
➜ ~ npx lefthook install
# 5. Створіть файл конфігурації `lefthook.yml` в кореневій
# директорії проекту:
pre-commit:
parallel: true
commands:
eslint:
glob: "*.{js,jsx,ts,tsx}"
run: npx eslint {staged_files} --fix
prettier:
glob: "*.{js,jsx,ts,tsx,css,md,json,yml}"
run: npx prettier --write {staged_files}

ПОСЛІДОВНІСТЬ-КЛЮЧДО
УСПІХУ

ДОКУМЕНТУВАННЯТА
КОМЕНТУВАННЯКОДУ

- Чіткість мети

function addToCart(id, qty) {
// TODO: implement
}

// TODO: implement
}
/**
* Adds an item to the shopping cart.
*
* @param {string} id - The unique identifier of the product.
* @param {number} qty - The quantity of the product to add.
*/
// TODO: implement
}

- Послідовність
- JSDoc для JavaScript
- Sphinx для Python
- Doxygen для C++
- ESLint та Prettier

НЕОБХІДНІСТЬОНОВЛЕНОЇ
ДОКУМЕНТАЦІЇ

КОД
- Docusaurus
- MkDocs
- VuePress
- etc.
API
- Swagger
- Postman
АВТОМАТИЗАЦІЯДОКУМЕНТУВАННЯ

- Read the Docs
- Con
fl
uence
- GitLab Wiki
- GitHub Wiki
ІНСТРУМЕНТИДЛЯРОЗМІЩЕННЯДОКУМЕНТАЦІЇ

ВАЖЛИВІСТЬКОМЕНТАРІВВ
КОДІ

ВАЖЛИВІСТЬПРИКЛАДІВ
КОДУВДОКУМЕНТАЦІЇ

КОДУВДОКУМЕНТАЦІЇ /**
* Calculates the total price of the items in the cart.
*
* @param {Object[]} cart - An array of cart items. Each
item should have 'id', 'qty', and 'price'.
* @return {number} The total price.
*/
function calculateTotal(cart) {
// TODO: implement
}

КОДУВДОКУМЕНТАЦІЇ
/**
*
*/
// TODO: implement
}
/**
*
*
* Example usage:
*
* const cart = [
* { id: '1', qty: 2, price: 50 },
* { id: '2', qty: 1, price: 100 },
* ];
* calculateTotal(cart);
*/
// TODO: implement
}

ПАРНЕПРОГРАМУВАННЯ

- Регулярна зміна ролей
- Ефективна комунікація
- Повага та терпіння
- Збалансований підбір пар
- Робіть перерви
НАЙКРАЩІПРАКТИКИПАРНОГО
ПРОГРАМУВАННЯ(LISTBELOW)

СИНЕРГІЯКОД-РЕВ'ЮТА
ПАРНОГОПРОГРАМУВАННЯ

ВПЛИВКУЛЬТУРИКОМАНДИНА
ЕФЕКТИВНІСТЬКОД-РЕВ'ЮТАПАРНОГО
ПРОГРАМУВАННЯ

ПРОЦЕС,НЕЛИШЕРЕЗУЛЬТАТ

ВИСНОВКИТАПІДСУМКИ

Workshop "Iteration as a Path to Perfection", Denys Mishunov

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Fwdays

Mais de Fwdays (20)

Workshop "Iteration as a Path to Perfection", Denys Mishunov