SvelteBase

Svelte + Sapper + Firebase = ❤

SvelteBase – це хобі-проект, який було розпочато кілька років тому з метою: створити легкий простий і сучасний веб-фреймворк, який зробить створення прототипів і розробку веб-проектів будь-якого масштабу легким і цікавим, одночасно використовуючи найкраще з сучасних інструментів і дотримуючись простих та інтуїтивно зрозумілих практик, які запалюють обидва креативна та розумна архітектура.

особливості

Багатомовність із коробки

  • Вміст, створений сервером, перекладається
  • Вбудований перекладач JSON за допомогою GoogleTranslate
  • Можливість збереження динамічних значень у текстовому вмісті за допомогою XDATA (хитре хакерське рішення)
  • Перекладене рішення моделей Firebase

SEO Friendly

  • SSR – візуалізація на стороні сервера, надана Sapper
  • Компонент Google Analytics
  • Належне використання багатомовних URL-адрес і мета-hreflang
  • Генератор карт сайту

Складні переадресації

Настроювані на сервері перенаправлення дозволяють легко налаштовувати перенаправлення URL-адрес, а також створювати складні правила перенаправлення та поведінку.

Швидко палає

Кожен, хто коли-небудь чув про Svelte, насамперед знає, що це найшвидший і найлегший повний каркас SPA у світі.

SvelteBase не вплинув на продуктивність Свелта та Сапера. Firebase також є одним із найшвидших BE за умови правильного використання.

Веб-сайти, створені за допомогою SvelteBase, отримують 100 тестів на PageSpped як для комп’ютерів, так і для мобільних пристроїв.

Локальні емулятори Firebase

Firebase — це зріла система, яка надає достатньо функцій та інструментів для розробки та тестування всього локально.

Проблеми та виклики

синхронізація package.json і functions/package.json

Щоб налаштувати SvelteBase, потрібно мати каталог /functions, вміст якого буде розгорнуто у Firebase.

Тому йому потрібен власний package.json, який містить пакети, необхідні як для Svelte & Sapper, так і для Firebase.

По суті, це означає, що будь-який пакет, доданий до package.json під час процесу розробки, потрібно буде додати до функцій/packages.json .

Немає доступу до атрибута lang початкового тегу html

Щоб отримати найкращу багатомовну платформу, вам також потрібно вказати атрибут lang у кореневому тегу html.

Але, на жаль, поточна версія Sapper не підтримує користувальницькі заповнювачі в template.html .

Ось чому за замовчуванням атрибут lang не вказано, і ми використовуємо лише метадані hreflang .

Матеріалізуйте CSS

Наразі SvelteBase використовує Materialize як структуру CSS, оскільки вона проста та інтуїтивно зрозуміла у використанні. Однак правильно, здається, що він не отримує значних покращень і не росте. Також у моїх особистих проектах я вже почав помічати багато обмежень і тепер розглядаю можливість переходу на інший CSS Framework або представити можливість використовувати різні фреймворки.

Серверні та клієнтські сценарії можуть заплутати

  • Сторінки Sapper використовують два типи сценаріїв виконання: серверні та клієнтські
  • Серверні сценарії використовують середовище node.js – вони мають атрибут context="module".
  • Сценарії на стороні клієнта використовують середовище браузера
  • Якщо ви хочете отримати всі переваги SSR, вам потрібно використовувати сценарії на стороні сервера для відтворення необхідного вмісту на стороні сервера

Мінуси Firebase

Обмежена кількість проектів на Firebase

За замовчуванням ви можете створити до 5 проектів у Firebase. Але якщо вам потрібно більше, вам буде запропоновано запросити додаткові проекти.

Пагінація Firestore

У Firebase немає способу реалізувати класичну розбивку сторінок зі зміщенням і обмеженнями , натомість вам потрібно використовувати такі поняття, як «startAfter» або «startAt», щоб вказати після або в який момент ви хочете отримати набір даних.

Синхронізація індексів Firestore

Firestore дозволяє (а для деяких запитів вимагає) використовувати індекси для належної продуктивності запитів.

Однак це дозволяє налаштовувати індекси за допомогою Firebase Console і firestore.indexes.json .

Але якщо індекси налаштовано за допомогою Firebase Console, вони не будуть автоматично відображені у firestore.indexes.json .

Тому вам потрібно зробити це вручну, тому що якщо ви розгортаєте свій код в іншому проекті Firebase, вам потрібно буде знову налаштувати індекси.

Повільна відповідь мережі

Схоже, Firebase має затримку холодного запуску, коли функція вузла виконується недостатньо часто.