Download to read offline
Uploaded byFwdays
"Як ми переписали Сільпо на Angular", Євген Русаков
Цей доклад починається з короткого огляду історії фронтенду, згадуючи часи домінування AngularJS та причини його подальшого спаду популярності (зокрема, складність та поява React). Презентація доводить, що завдяки нововведенням Angular став значно простішим, гнучкішим та зрозумілішим, особливо для новачків, і закликає розробників не боятися розглядати його для своїх проєктів.
"Як ми переписали Сільпо на Angular", Євген Русаков
- 1.
- 2. Хто Я? Привіт, менезвати Євген! Займаюсь більше 10 років фронтендом. Працював на позиціях Tech Lead, Front-end Lead, Staff Engineer
- 3.
- 4.
- 5. Сільпо 1.0 ● React16 ● TFS замість Git ● Немає SSR ● Stylus ● Recompose ● Redux-thunk ● Formik ● Webpack
- 6. Час змін Старий бекендне витримував навантаження Ми планували повністю оновити UI/UX Новий Бек-енд Редизайн 🎨 SPA не надто дружні до SEO SEO � � Виникало багато нюансів під час оформлення замовлення Стабільність
- 7. Вибір стеку черездосвід команди ➔ Швидкий старт. Команда не витрачає час на вивчення нового фреймворку. ➔ Менше ризиків. Більше впевненості в рішеннях завдяки вже наявному досвіду. ➔ Якість. Досвід дозволяє уникнути типових помилок. ➔ Легше масштабувати. Наявність досвідченої команди спрощує залучення нових розробників.
- 8. Плюси Angular Routing, DI, Forms,HTTP, SSR, Services, Tests, etc. Чітка і організована архітектура для легшої розробки і масштабува Все з коробки Структура Angular розроблений з використанн ям TypeScript з самого TypeScript � � � � ️
- 9. Забудьте про модуліЦе щось типу useState LifeCycle Angular стає ще зручнішим Standalone Signals Її майже видалили Тільки два З Signals більше не треба турбуватись про це Тепер ще зручніще @if, @else, @for @switch etc. Zone.js Change Detection Control Flow 🔗 ⚡ 🔄 🌐 🔁 ✅
- 10.
- 11. CI Граф залежностей Nx підтримуєконцепцію доменів, зон доступу та правил імпорту між ними. Має велику бібліотеку CI генераторів (Angular, React, Vue, etc.)для створення шаблонів в один рядок команди. Архітектура Граф залежностей на рівні файлів — точне визначення, що треба перебудувати. Кеш Кешує результати задач (build, test, lint), файли і дістає з кеша ті, що не змінилися.
- 12. Monorepo Сільпо Онлайн супермаркет Back-office Адмін-панель для Сільпо, LOKO LOKO Додатокшвидкої доставки Payments Віджет оплат Web apps
- 13.
- 14.
- 15. 🔄 Поступовий переїзд Мивирішили не переписувати весь продукт одразу, а рухатися поетапно: ✅ Визначили пріоритетні модулі Зібрали аналітику, які компоненти й фічі використовуються найчастіше на старій версії. Відібрали ті, що критичні для старту MVP. ️ 🗺️Склали карту міграції Обрали, що переносимо в першу чергу, а що — пізніше.
- 16. Список товарів у вибраномурозділі Вітрина з добірками товарів у форматі каруселей Вибір адреси Основні компоненти для переїзду Каталог Головна Фінальний етап, де Гість підтверджує замовлення, обирає доставку та оплату Інтерактивна карта з адресами та переліком типів доставки Вибрані товари перед оформленням замовлення Сторінка з результатами пошуку за введеним запитом Чекаут Корзина Пошук
- 17.
- 18.
- 19. Базовий UI каталогу(версія MVP) Картки товарів Чіпси Фільтр и Тайм-слоти Сортуванн я Breadcrumb s Пагінація
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34. ➔ Приблизно 20млрд грн виторгу за 3 роки ➔ 1 млн замовлень за цей період ➔ 6 млн унікальних Гостей ➔ Релізів: 26 тис. ➔ Більше 30 тис. merge requests (MR)
- 35.