Мінус $45 тис. і 1700 годин роботи: розробники показали, чому не треба писати сайт на Flutter

Розробники сервісної компанії Lampa Software вирішили поексперементувати — захотіли написати корпоративний вебсайт на Flutter замість традиційних JS-фреймворків.

Про цей досвід Co-founder компанії Борис Барський розповів у блозі на DOU.

Чому Flutter?

Розробники зазначили, що планували використати сайт як свого роду «вітрину» Flutter для потенційних замовників, які все ще з острахом ставились до нової технології.

Вселяло оптимізм й те, що перші спроби були досить вдалими —  розробка на платформі мала низку суттєвих переваг (і мовиться не лише про економію бюджету).

Початок роботи

До результату розробники поставили ряд конкретних вимог:

• проактуалізувати дизайн сайту;
• повністю оновити застарілий технічний стек;
• підготувати та наповнити вебсайт додатковими розділами та даними для більш потужного SEO;
• реорганізувати навігацію та форму зворотного зв’язку;
• покращити швидкість роботи та продуктивність сайту;
Курс QA Manual (Тестування ПЗ мануальне) від Powercode academy.
Навчіться знаходити помилки та контролювати якість сайтів та додатків.
Записатися на курс
• відключити російськомовну версію .

Для реалізації задуманого була сформована команда в такому складі:

• два дизайнери (основний та арткерівник);
• два Flutter-розробники;
• backend-розробник;
• QA-спеціаліст;
• project-менеджер.

Сумарно розробка першої версії корпоративного сайту на Flutter, а також API та власної CMS зайняла орієнтовно 3-4 календарних місяці.

За цей час ми відмалювали приблизно 90% сторінок (десктоп, планшет та мобільну версію) й реалізували близько 75% всього майбутнього функціоналу сайту.

Проблема №1:SEO

Як зазначив фаундер Lampa Software, у проєкті на базі цього фреймворку завжди існує статична сторінка, яка змінюється тільки тоді, коли повністю завантажиться рушій Flutter. І вже після цього починають прописуватися всі метатеги, розмітка та інші інструменти для індексації, а сайт стає видимим для пошукових ботів.

Проблема в тому, що зазвичай боти не дочікуються повного завантаження контенту, тому сайт не може нормально індексуватися у пошукових системах. Тобто фактично можливості SEO «з коробки» просто відсутні.

Для розв’язання аналогічної проблеми в типових JS-фреймворках був придуманий SSR, але у Flutter він не підтримується. Натомість все грунтується на CSR (client side rendering). Цей нюанс впливає також і на відображення превʼю посилань на сайт, поширених у соцмережах, месенджерах тощо.

Відповідно, будь-яке посилання на певну сторінку сайта завжди відображатиме один і той самий статичний контент, який був прописаний для першої сторінки.

Проблема №2. Погана продуктивність

Оскільки Flutter побудований навколо CSR, весь інтерфейс завжди промальовується на потужностях самого пристрою. Тому фреймворк надмірно навантажує пристрої, на яких запускається програма.

Особливо гостро це відчувається під час завантаження на мобільних девайсах.

Розробники порівняли продуктивність сайту на Flutter та React.js:

Цікавий нюанс: швидкість завантаження була різною для різних роздільних здатностей екрана. Найкращий результат зафіксували на розширенні 1080×1920.

Проблема №3. Низька швидкість завантаження

Під час блекаутів в жовтні 2022-го розробники тестували сайт за допомогою 3G-модему. Його завантаження займало 30-40 секунд для кожного циклу. І це за умови, що корпоративний сайт тоді складався з відносно простих та «легких» елементів.

Висновки

Розробники отримали практичний досвід та наглядно побачили, чи варто розробляти сайт на Flutter. Тому експеримент можна вважати успішним.

Проте з комерційної точки зору таку розробку назвати вдалою аж ніяк не можна — можна втратити купу часу, зусиль, грошей і фактично не отримали жодного результату.

Сумарно на розробку версії Flutter було витрачено понад 1,700 робочих:

• Design — 370 годин.
• Flutter — 500 годин
• Back-end — 350 годин.
• Project-менеджмент — 380 годин.
• QA — 160 годин.

Що цікаво,  у своїх пошуках девелопери натрапили на твіт одного з топменеджерів Flutter (тепер уже колишніх). У ньому йшлося про те, що, попри офіційну підтримку, фреймворк не варто застосовувати для розробки вебсайтів.

«Якщо припустити, що ми б замовили розробку такого сайту в невеликій сервісній компанії, а команда складалася б навіть не з найбільш дорогих мідлів з середніми рейтами $25-30, сумарна вартість проєкту для нас як для замовника становила б не менше $45,000», — резюмують розробники.

Читайте також:

«Вбити JavaScript не вийшло»: за що ми любимо Dart — мову створення застосунків на Flutter (та кому вона підходить)

Що таке Flutter та які його особливості

Навіть досвідчені розробники стикаються з неочевидними речами: як обрати архітектуру додатку на Flutter