Workshop "Iteration as a Path to Perfection", Denys Mishunov
0 likes413 views
To provide frontend engineers with a comprehensive understanding of the iterative approach to software development, enabling them to create better, more efficient, and more reliable applications. Workshop Structure: I. The Iterative Approach in Software Development Definition and importance of iteration Iterative methodologies (Agile, Scrum, Kanban, XP) Benefits of iterative development (Risk management, Flexibility, Faster time-to-market, Continuous improvement) II. Iteration in Frontend Engineering Component-driven development Incremental refactoring and performance optimization Code quality and maintainability Test-driven development (TDD) and unit testing Continuous integration (CI) and continuous deployment (CD) Case studies in iterative frontend engineering III. Best Practices for Iterative Frontend Engineering Version control with Git Code review and pair programming Automated testing and CI/CD pipelines Consistent coding standards and linting Proper documentation and commenting IV. Hands-on Exercise: Building a Frontend Project iteratively Implement an iterative development cycle (Develop components, Optimize performance and maintainability, Write unit tests, Review and refactor) Each group presents their final project V. Conclusion and Next Steps Recap of key points Resources for further learning Q&A session
![Пишемо тест який падає
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);
});](https://image.slidesharecdn.com/slidesupdated-230515163027-9bfa0e13/85/Workshop-Iteration-as-a-Path-to-Perfection-Denys-Mishunov-84-320.jpg)
![Пишемо тест який падає
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);
});](https://image.slidesharecdn.com/slidesupdated-230515163027-9bfa0e13/85/Workshop-Iteration-as-a-Path-to-Perfection-Denys-Mishunov-88-320.jpg)
![ВАЖЛИВІСТЬПРИКЛАДІВ
КОДУВДОКУМЕНТАЦІЇ /**
* 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
}](https://image.slidesharecdn.com/slidesupdated-230515163027-9bfa0e13/85/Workshop-Iteration-as-a-Path-to-Perfection-Denys-Mishunov-128-320.jpg)
![ВАЖЛИВІСТЬПРИКЛАДІВ
КОДУВДОКУМЕНТАЦІЇ
/**
* 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
}
/**
* 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.
*
* Example usage:
*
* const cart = [
* { id: '1', qty: 2, price: 50 },
* { id: '2', qty: 1, price: 100 },
* ];
* calculateTotal(cart);
*/
function calculateTotal(cart) {
// TODO: implement
}](https://image.slidesharecdn.com/slidesupdated-230515163027-9bfa0e13/85/Workshop-Iteration-as-a-Path-to-Perfection-Denys-Mishunov-129-320.jpg)
Workshop "Iteration as a Path to Perfection", Denys Mishunov
- 2. ДОБРОГОДНЯ
- 3. ХТОЯ?
- 4. ІТЕРАЦІЯ,ЯКШЛЯХДОІДЕАЛУ - Вступ (10 хв.) - Ітерація при розробці ПЗ (40 хв.) — 10 хв. Перерва — - Будівельні блоки ітерації в Frontend Engineering (40 хв.) - Найкращі практики ітераційної розробки на фронтенді (40 хв.) — 10 хв. Перерва — - Hands-on завдання: Ітеративна побудова фронтенд проекту (80 хв.) - Висновки та короткий конспект (10 хв.)
- 6. - Еволюція - Мистецтво - Спорт - "День бабака” ІТЕРАЦІЯУ РЕАЛЬНОМУСВІТІ
- 12. - Agile - Scrum - Kanban - Екстремальне програмування (XP) ІТЕРАТИВНІ МЕТОДОЛОГІЇ
- 13. - Особистості та взаємодії важливіше процесів та інструментів. - Робочий програмний продукт має перевагу над детальною документацією. - Співпраця з замовником вище договірних умов. - Готовність до змін важливіше, ніж дотримання плану. AGILEМАНІФЕСТ
- 14. ЦІКАВИЙФАКТ
- 15. - Agile - Scrum - Kanban - Екстремальне програмування (XP) ІТЕРАТИВНІ МЕТОДОЛОГІЇ
- 16. - Робота в Scrum - Ролі в Scrum - Scrum Master - Власник продукту - Команда розробників SCRUM
- 17. - Agile - Scrum - Kanban - Екстремальне програмування (XP) ІТЕРАТИВНІ МЕТОДОЛОГІЇ
- 18. KANBAN
- 19. - Візуалізуйте робочий процес - Обмежуйте роботу в процесі - Керуйте потоком - Робіть політики процесів явними - Реалізуйте зворотній зв'язок - Співпрацюйте для еволюції KANBAN
- 20. ЦІКАВИЙФАКТ
- 21. - Agile - Scrum - Kanban - Екстремальне програмування (XP) ІТЕРАТИВНІ МЕТОДОЛОГІЇ
- 22. - Розробка через тестування (TDD) - Постійна інтеграція - Парне програмування - Колективна власність коду - Рефакторинг ЕКСТРЕМАЛЬНЕПРОГРАМУВАННЯ(XP)
- 23. ЦІКАВИЙФАКТ
- 25. - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ
- 28. ЦІКАВИЙФАКТ
- 29. ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення
- 30. ГНУЧКІСТЬ
- 31. ГНУЧКІСТЬ
- 32. ГНУЧКІСТЬ
- 33. ЦІКАВИЙФАКТ
- 34. ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення
- 37. ЦІКАВИЙФАКТ
- 38. - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення ПЕРЕВАГИІТЕРАТИВНОЇРОЗРОБКИ
- 40. ЦІКАВИЙФАКТ
- 42. ПЕРЕВАГИ: - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення ІТЕРАТИВНИЙПІДХІД МЕТОДОЛОГІЇ: - Agile - Scrum - Kanban - XP
- 43. "НЕМАЄНІЧОГОБІЛЬШБЕЗГЛУЗДОГО,ЯК ЕФЕКТИВНОРОБИТИТЕ,ЩОВЗАГАЛІНЕ ПОВИННОБУТИЗРОБЛЕНО." ПІТЕР ДРУКЕР
- 51. ЦІКАВИЙФАКТ
- 52. - Послідовність - Модульність - Документація - Тестування ПРАКТИКИДЛЯЯКОСТІКОДУ
- 54. - Вільне зв’язування (Loose coupling) - Використання патернів (проектування, дизайн, тощо) - Правильна обробка помилок - Контроль версій - Перевірка коду ПРАКТИКИДЛЯПІДТРИМУВАНОСТІКОДУ
- 57. ЦІКАВИЙФАКТ
- 61. - Швидший розвиток - Спрощене тестування - Поліпшена підтримка та супровід - Сприяння співпраці ПЕРЕВАГИКОМПОНЕНТНО-ОРІЄНТОВАНОЇРОЗРОБКИ
- 62. ЦІКАВИЙФАКТ
- 64. - React - Vue - Angular - Svelte КОМПОНЕНТНО-ОРІЄНТОВАНІФРЕЙМВОРКІ
- 65. РЕКОМЕНДАЦІЇ: - Єдність - Модульність - Тестування - Документація НАЙКРАЩІПРАКТИКИДЛЯКОМПОНЕНТІВ ПРАКТИКИ: - Чітке визначення обов'язків - Коректна інкапсуляція стану та логіки - Використання утиліт та міксінів - Послідовність у найменуваннях - Документація та коментарі
- 70. - @gitlab/ui - MUI (раніше відома як Material-UI) - Ant Design - Bootstrap - Tailwind - інші ПОПУЛЯРНІБІБЛІОТЕКИКОМПОНЕНТІВТАСИСТЕМИДИЗАЙНУ
- 72. РЕФАКТОРИНГ
- 73. - Зменшення технічного боргу - Покращення зрозумілості коду - Покращення підтримуваності - Збільшення розширюваності ПЕРЕВАГИ ІНКРЕМЕНТАЛЬНОГО РЕФАКТОРИНГУ
- 74. - Правило хлопчика-скаута - Червоний-Зелений- Рефакторинг - Розділити та панувати СТРАТЕГІЇ ІНКРЕМЕНТАЛЬНОГО РЕФАКТОРИНГУ
- 75. - Зменшення технічного боргу - Покращена зрозумілість коду - Покращена підтримуваність - Збільшена розширюваність - Вища якість коду - Співпраця та обмін знанням - Спрощення перевірок коду та інтеграції ПЕРЕВАГИІНКРЕМЕНТАЛЬНОГОРЕФАКТОРИНГУ
- 76. - JavaScript - Simplifying Complex Conditional ПРИКЛАДРЕФАКТОРІНГУ function canAccessContent(user) { if ( user.isLoggedIn && user.subscription.isActive && user.subscription.level > 2 && user.age >= 18 ) { return true; } return false; }
- 77. - JavaScript - Simplifying Complex Conditional - Incrementally refactor this to make it more readable ПРИКЛАДИРЕФАКТОРІНГУ function canAccessContent(user) { 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; } function canAccessContent(user) { return user.isLoggedIn && isSubscribed(user) && isOfAge(user); }
- 82. - Покращена якість коду - Швидкий розвиток та легке відлагодження - Покращене співробітництво ПЕРЕВАГИTDDТА ЮНІТ-ТЕСТУВАННЯ
- 84. Пишемо тест який падає 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); });
- 85. Пишемо МІНІМАЛЬНИЙ функціонал щоб тест пройшов 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 };
- 86. Оптимізація, помилки, додаткові перевірки, тощо РЕФАКТОРИНГ // user-list.js function renderUserList(users) { const userListItems = users.map((user) => { const status = user.isOnline ? "online" : "offline"; return `<li>${user.name} (${status})</li>`; }); return `<ul>${userListItems.join("")}</ul>`; } module.exports = { renderUserList }; // 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 };
- 87. - Використовуйте описові назви тестів ПОРАДИДЛЯЮНІТ-ТЕСТУВАННЯ
- 88. Пишемо тест який падає 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); });
- 89. - Використовуйте описові назви тестів - Зберігайте тести простими та фокусованими - Не забувайте про крайні випадки ПОРАДИДЛЯЮНІТ-ТЕСТУВАННЯ
- 92. ІСТОРІЯCI/CD
- 94. - Виявлення помилок на ранніх етапах - Швидкий зворотний зв'язок - Стабільний користувацький досвід ЧОМУCI/CDВАЖЛИВІ ДЛЯFRONTEND?
- 96. - Скоріший випуск змін коду - Більша надійність - Стабільний користувацький досвід ПЕРЕВАГИCI/CDВРОЗРОБЦІПЗ
- 97. CI/CDALPHA
- 98. - GitLab CI/CD - Jenkins - CircleCI - Travis CI - Github Actions ІНСТРУМЕНТИCI/CD
- 99. - Коллекція шаблонів CI/CD конфігурацій ПРИКЛАДИУGITLAB https://tinyurl.com/yc3dx8d9
- 100. - Коллекція шаблонів 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
- 101. - Коллекція шаблонів CI/CD конфігурацій ПРИКЛАДИУGITLAB https://tinyurl.com/yc3dx8d9 # .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
- 104. - Використання Git для контролю версій - Єдині стандарти кодування та перевірка коду на помилки (Linting) - Правильне документування та коментування коду - Парне програмування НАЙКРАЩІПРАКТИКИІТЕРАЦІЇНАФРОНТЕНДІ
- 106. - Коміти: Атомарні, Часті та Інформативні - Гілки: для контекстуальної ізоляції та структуризації - Merge vs. Rebase: стратегічний вибір - Merge / Pull Requests як платформа для співпраці та рецензування - .gitignore як охоронець вашого репозиторію ВИКОРИСТАННЯGIT ДЛЯКОНТРОЛЮВЕРСІЙ
- 107. - Використання Git для контролю версій - Єдині стандарти кодування та перевірка коду на помилки (Linting) - Правильне документування та коментування коду - Парне програмування НАЙКРАЩІПРАКТИКИІТЕРАЦІЇНАФРОНТЕНДІ
- 110. - Покращена читабельність - Зменшення помилок - Покращена підтримуваність - Збільшена продуктивність ПЕРЕВАГИСТАНДАРТІВ КОДУВАННЯ
- 115. - 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}
- 117. - Використання Git для контролю версій - Єдині стандарти кодування та перевірка коду на помилки (Linting) - Правильне документування та коментування коду - Парне програмування НАЙКРАЩІПРАКТИКИІТЕРАЦІЇНАФРОНТЕНДІ
- 120. - Чіткість мети ДОКУМЕНТУВАННЯТА КОМЕНТУВАННЯКОДУ function addToCart(id, qty) { // TODO: implement }
- 121. - Чіткість мети ДОКУМЕНТУВАННЯТА КОМЕНТУВАННЯКОДУ function addToCart(id, qty) { // 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. */ function addToCart(id, qty) { // TODO: implement }
- 122. - Чіткість мети - Послідовність - JSDoc для JavaScript - Sphinx для Python - Doxygen для C++ - ESLint та Prettier ДОКУМЕНТУВАННЯТА КОМЕНТУВАННЯКОДУ
- 124. КОД - Docusaurus - MkDocs - VuePress - etc. API - Swagger - Postman АВТОМАТИЗАЦІЯДОКУМЕНТУВАННЯ
- 125. - Read the Docs - Con fl uence - GitLab Wiki - GitHub Wiki ІНСТРУМЕНТИДЛЯРОЗМІЩЕННЯДОКУМЕНТАЦІЇ
- 128. ВАЖЛИВІСТЬПРИКЛАДІВ КОДУВДОКУМЕНТАЦІЇ /** * 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 }
- 129. ВАЖЛИВІСТЬПРИКЛАДІВ КОДУВДОКУМЕНТАЦІЇ /** * 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 } /** * 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. * * Example usage: * * const cart = [ * { id: '1', qty: 2, price: 50 }, * { id: '2', qty: 1, price: 100 }, * ]; * calculateTotal(cart); */ function calculateTotal(cart) { // TODO: implement }
- 130. - Використання Git для контролю версій - Єдині стандарти кодування та перевірка коду на помилки (Linting) - Правильне документування та коментування коду - Парне програмування НАЙКРАЩІПРАКТИКИІТЕРАЦІЇНАФРОНТЕНДІ
- 131. ПАРНЕПРОГРАМУВАННЯ
- 132. - Регулярна зміна ролей - Ефективна комунікація - Повага та терпіння - Збалансований підбір пар - Робіть перерви НАЙКРАЩІПРАКТИКИПАРНОГО ПРОГРАМУВАННЯ(LISTBELOW)
- 134. HANSEI
- 137. ПЕРЕРВА 10 ХВИЛИН
- 138. HANDS-ONЗАВДАННЯ
- 139. ВИСНОВКИТАПІДСУМКИ