Краткий пересказ утерянных глав руководства по фронтенду

Артём Арутюнян рассказывает об общих ошибках в архитектуре приложений и базовых концепциях, которые влияют на скорость разработки и стоимость поддержки.

Полезные материалы: https://telegra.ph/Kratkij-pereskaz-uteryannyh-glav-rukovodstva-po-frontendu-Ssylki-12-29

Transcript

1. Краткий пересказ утерянных глав руководства по фронтенду CSSSR Артём Арутюнян @artalar
2. ◦ @artalar ◦ CSSSR ◦ 5+ лет в ИТ ◦ ~2 года делаю фронтенд ◦ ~15 веб-приложений ◦ пописываю блог, реактивный стейт-менеджер CSSSR @artalar Обо мне
3. Утерянные главы? CSSSR @artalar О докладе
4. Утерянные главы? CSSSR @artalar О докладе
5. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией. CSSSR @artalar О докладе
6. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией… CSSSR @artalar О докладе
7. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией… CSSSR @artalar О докладе
8. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией… CSSSR @artalar Типизация
9. Сценарный язык (язык сценариев) — высокоуровневый язык сценариев — кратких описаний действий, выполняемых системой. Разница между программами и сценариями довольно размыта. Сценарий — это программа, имеющая дело с готовыми программными компонентами Википедия CSSSR @artalar Типизация
10. Типизация
11. Типизация
12. Типизация CSSSR @artalar
13. JS — терминальный язык для удобного (и простого) манипулирования готовыми программными компонентами (API DOM) CSSSR @artalar Типизация
14. Веб-приложения CSSSR @artalar Типизация
15. Типизация
16. Программы = алгоритмы + структуры данных CSSSR @artalar Никлаус Вирт Типизация
17. Типизация CSSSR @artalar
18. Типизация CSSSR @artalar
19. Типизация CSSSR @artalar
20. Тип данных (тип) — множество значений и множество операций на этих значениях. CSSSR @artalar Типизация
21. Тип данных (тип) — множество значений и множество операций на этих значениях. CSSSR @artalar Типизация
22. Типизация CSSSR @artalar
23. Типизация CSSSR @artalar
24. Контрактное программирование CSSSR @artalar Типизация
25. Контрактное программирование function square(n) { if (typeof n !== ‘number’) { throw new TypeError() } return n * n } CSSSR @artalar Типизация
26. Думайте о том, как вы будете в будущем поддерживать этот код ◦ архитектурно фундаментальна (первична); ◦ можно описывать без статической типизации: валидация, контрактное программирование; ◦ flow, TS, ReasonML, ClojureScript, Kotlin, Elm, Dart… CSSSR @artalar Типизация. Выводы
27. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией… CSSSR @artalar
28. CSSSR @artalar
29. Утерянные главы? JavaScript — мультипарадигменный язык программирования с динамической типизацией… CSSSR @artalar Семантика
30. Сема́нтика — раздел лингвистики, изучающий смысловое значение единиц языка. CSSSR @artalar Семантика
31. Сема́нтика — раздел лингвистики, изучающий смысловое значение единиц языка. - читаемость кода CSSSR @artalar Семантика
32. Сема́нтика — раздел лингвистики, изучающий смысловое значение единиц языка. - читаемость кода - явность кода CSSSR @artalar Семантика
33. Сема́нтика — раздел лингвистики, изучающий смысловое значение единиц языка. явное лучше неявного CSSSR @artalar Семантика
34. Смысловой порядок CSSSR @artalar Семантика
35. Смысловой порядок CSSSR @artalar bigArray.filter(some => some === this.props.v) VS const { v } = this.props; bigArray.filter(some => some === v) Семантика
36. Семантика CSSSR @artalar
37. Семантика CSSSR @artalar
38. Производительность? CSSSR @artalar bigArray.filter(some => some === this.props.v) VS const { v } = this.props; bigArray.filter(some => some === v) Семантика
39. Proxy, get, set CSSSR @artalar bigArray.filter(some => some === this.props.v) VS const { v } = this.props; bigArray.filter(some => some === v) Семантика
40. JSX CSSSR @artalar Семантика
41. CSSSR @artalar Семантика JSX
42. JSX CSSSR @artalar Семантика
43. render-props CSSSR @artalar Семантика
44. CSSSR @artalar Семантика
45. CSSSR @artalar Семантика
46. renderSome CSSSR @artalar Семантика
47. renderSome CSSSR @artalar Семантика
48. Структура файлов CSSSR @artalar Семантика
49. Структура файлов. Деление CSSSR @artalar Семантика ◦ по бизнес-сущностям VS по технологиям ◦ фрактально VS глобально
50. Структура файлов CSSSR @artalar Семантика
51. Думайте о том, как вы будете в будущем поддерживать этот код ◦ явное лучше неявного; ◦ группируйте смысловые блоки, бейте их на компоненты; ◦ следите за структурой проекта, модулей, файла; ◦ попробуйте не использовать JSX для контейнеров. CSSSR @artalar Семантика. Выводы
52. Документация CSSSR @artalar Прикладные советы
53. Документация CSSSR @artalar Прикладные советы ◦ JSDoc
54. Документация CSSSR @artalar Прикладные советы ◦ JSDoc
55. Документация CSSSR @artalar Прикладные советы ◦ JSDoc; ◦ пишите тесты
56. Документация CSSSR @artalar Прикладные советы ◦ JSDoc; ◦ пишите тесты; ◦ средства дебага: react-devtools, redux-devtools, kuker, debugger в IDE.
57. Документация CSSSR @artalar Прикладные советы ◦ README.md ◦ CONTRIBUTING.md ◦ CODE_OF_CONDUCT.md ◦ LEGACY.md
58. README.md CSSSR @artalar Прикладные советы ◦ общее описание бизнес-цели проекта; ◦ ссылки на основные ресурсы: ◦ git, jira (backlog, sprint, готовые фильтры под это); ◦ список сред (дев, стейдж, тест, прод) и прав доступа к ним; ◦ ссылки на контакты ключевых ответственных лиц в проекте: ◦ ПМ, техлид (бэк и фронт), тимлид (бэк и фронт), тестировщик, дизайнер, девопс, сетевик, сами разработчики; ◦ их почты, телефоны, чаты.
59. CONTRIBUTING.md CSSSR @artalar Прикладные советы ◦ инструкция по настройке инфраструктуры, среды: ◦ требования к окружению (windows/linux, node version); ◦ общие правила и их выражения в конфигах линтеров: ◦ eslint, stylelint, commitlint, prettier; ◦ gitflow; ◦ правила ревью кода.
60. CODE_OF_CONDUCT.md CSSSR @artalar Прикладные советы ◦ принятые архитектурные паттерны; ◦ структура модуля/проекта; ◦ структура файла.
61. LEGACY.md CSSSR @artalar Прикладные советы ◦ техдолг ◦ комментарии к тегам; ◦ легаси ◦ устаревшие библиотеки.
62. CSSSR @artalar Ссылки на материалы ◦ Контрактное программирование: - Проектирование по контракту — краткое знакомство с контрактным программированием; - Flow: Контракты — короткое видео с примером на flow; - typed-contracts — библиотека для контрактного программирования с выводом типов (только flow). - mobx-state-tree — стейт менеджер с встроенной валидацией модели стейта при его изменении ◦ Структура проекта: - Atomic Design; - Feature Slices; - Subatomic Design Systems. ◦ Структура файла: - Структура React-компонента; ◦ Разработка, дебаг, рефакторинг: - Подсветка TODO и FIXME; - Kuker — расширение для лога событий и данных (показывает диф); - babel-macro — кодогенерация (полезно для декларативного программирования); - Соглашения по именованию коммитов. ◦ Документация: - Docusaurus; - GitBook.
63. Спасибо CSSSR Артём Арутюнян @artalar