«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
- 1. Организация frontend-разработки на крупном проекте Кузнецов Дмитрий 01
- 2. Обо мне Новосибирск 2GIS Online Lead Frontend 02
- 4. 04
- 5. Сейчас же 05
- 6. 06
- 7. 07 Много всякого разного фронтенда
- 8. Проблемы 1. Анимация на каждый чих 2. Бизнес-логика на клиенте 3. Высокая связность внутри frontend-команды 08
- 9. Да ладно ✌ 09
- 10. 10
- 11. Нельзя так просто взять и переиспользовать процессы разработки backend-приложений для frontend-приложений! 11
- 12. Команда Процесс Ó Процесс Инструмент 12
- 13. Frontend Design Testing JavaScript Команда Management 13
- 16. 16 Все другие ♘♙♖
- 17. Команда Процесс Ó Процесс Инструмент 17
- 18. Процесс 1. Дизайн 2. Разработка 3. Тестирование 18
- 19. 1. Дизайн 19
- 20. 2. Разработка — Конвертация psd в html / css / js — Смотрите в следующих слайдах... DOM-тесты спасают вёрстку! 20
- 21. 3. Тестирование — Функциональные тесты 21
- 22. Процесс 1. Дизайн 2. Разработка 3. Тестирование 22
- 24. Процесс 1. Дизайн 2. Разработка 3. Тестирование 24
- 25. 1. Определение модуля FE JS 2. Формат данных FE 3. HTML-шаблон FE 4. Вёрстка FE 5. Анимация FE 6. DOM-тесты FE JS 7. Внутримодульная логика JS 8. Интеграция модуля JS 9. Ревью FE JS 25
- 26. 26
- 27. 1. Определение модуля 27
- 28. 2. Формат данных { title: ITmozg.ru, Информационный сайт address: Обуховской обороны проспект, 70 к2 attrs: Наличный расчет, Visa, MasterCard, Безналичный расчет, MaestroCard status: Открыто } 28
- 29. 3. HTML-шаблон <article class="mini-card"> <h1 class="mini-card__title"> {{title}} </h1> <address class="mini-card__address"> {{address}} </address> <div class="mini-card__attrs"> {{attrs}} </div> <div class="mini-card__status"> {{status}} </div> </article> 29
- 30. 4. Верстка .mini-card { display: flex; justify-content: center; align-items: center; flex-direction: column; -webkit-user-experience: fantastic; background: url(assets/baron.svg); } 30
- 31. Проверяем верстку Вёрстка 31
- 32. 5. Анимация 32
- 33. 33
- 34. 6. DOM-тесты — Наличие важных элементов, классов и стилей — Отработка скриптов по событиям — Показ или скрытие каких-то элементов при определенных условиях — ... 34
- 35. Пример DOM-тестов it('Не заполнено имя', function() { $('.feedback__name').empty(); $('.feedback__form').trigger('submit'); var hasErrCls = $('.feedback__name').hasClass('error'); assert(hasErrCls, 'Выставлен класс ошибки'); }); 01. 02. 03. 04. 05. 06. 35
- 37. 7. Внутримодульная логика 37
- 38. 8. Интеграция модуля 38
- 39. 9. Ревью 39
- 40. 1. Определение модуля FE JS 2. Формат данных FE 3. HTML-шаблон FE 4. Вёрстка FE 5. Анимация FE 6. DOM-тесты FE JS 7. Внутримодульная логика JS 8. Интеграция модуля JS 9. Ревью FE JS 40
- 41. Команда Процесс Ó Процесс Инструмент 41
- 42. Передача верстки в разработку 1. Определение модуля FE JS 2. Формат данных FE 3. HTML-шаблон FE 4. Вёрстка FE 5. Анимация FE 6. DOM-тесты FE 7. Ревью FE 1. Внутримодульная логика JS 2. Интеграция модуля JS 3. Ревью JS 42
- 43. Процесс Дизайн Разработка Тестирование Дизайн Разработка Тестирование Дизайн Разработка Тестирование 43
- 44. Команда Процесс Ó Процесс Инструмент 44
- 45. 45
- 46. 46
- 47. 47
- 48. Команда Процесс Ó Процесс Инструмент 48
- 49. Резюме — Frontend-разработчик и javascript-программист — Передача контекста — самое важное в процессе — Делайте инструменты под себя 49
- 50. Вопросы? d.kuznecov@2gis.ru github.com/diokuz @diokuz 50