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

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

2. ДОБРОГОДНЯ

3. ХТОЯ?

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

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

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

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

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

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

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

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

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

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

14. ЦІКАВИЙФАКТ

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

18. KANBAN

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

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

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

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

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

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

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

30. ГНУЧКІСТЬ

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

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

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

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

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

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

42. ПЕРЕВАГИ: - Управління ризиками - Гнучкість і адаптивність планування - Швидкий вихід на ринок - Постійне покращення ІТЕРАТИВНИЙПІДХІД МЕТОДОЛОГІЇ: - Agile - Scrum - Kanban - XP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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); }

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

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

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

81. ПОДОРОЖУЧАСІ: ІСТОРІЯТЕСТУВАННЯ AGILE РЕВОЛЮЦІЯ

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

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

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

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

92. ІСТОРІЯCI/CD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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}

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

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

119. - Чіткість мети ДОКУМЕНТУВАННЯТА КОМЕНТУВАННЯКОДУ

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 ДОКУМЕНТУВАННЯТА КОМЕНТУВАННЯКОДУ

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

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

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

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

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

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 }

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

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

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

134. HANSEI

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

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

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

138. HANDS-ONЗАВДАННЯ

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

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

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

Recommandé

Contenu connexe

Plus de Fwdays

Plus de Fwdays(20)

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