SvelteBase

Svelte + Sapper + Firebase = ❤

SvelteBase es un proyecto de pasatiempo que se inició hace unos años con un objetivo: para crear un marco web ligero, simple y moderno que haga que la creación de prototipos y el desarrollo de proyectos web de cualquier escala sean fáciles y divertidos, mientras aprovecha lo mejor de las herramientas modernas y sigue prácticas simples e intuitivas que encienden tanto arquitectura creativa e inteligente.

Características

Varios idiomas listos para usar

  • El contenido generado del lado del servidor viene traducido
  • Traductor JSON incorporado usando GoogleTranslate
  • Habilidad para conservar valores dinámicos en el contenido del texto usando XDATA (solución hacky complicada)
  • Solución de modelos de Firebase traducibles

Compatible con SEO

  • SSR: representación del lado del servidor proporcionada por Sapper
  • Componente de análisis de Google
  • Urls multilingües adecuados y uso de meta hreflang
  • Generador de mapa del sitio

Redirecciones sofisticadas

Los redireccionamientos configurables del lado del servidor le permiten configurar redireccionamientos de URL con facilidad, así como crear reglas y comportamientos de redireccionamiento complicados.

deslumbrantemente rápido

Cualquiera que haya oído hablar de Svelte en primer lugar sabe que es absolutamente el marco SPA completo más rápido y ligero del mundo.

SvelteBase no afectó el rendimiento de Svelte y Sapper. Firebase también es uno de los BE más rápidos si se usa correctamente.

Los sitios web creados con SvelteBase obtienen un punto de referencia de 100 en PageSpped para dispositivos móviles y de escritorio.

Emuladores locales de Firebase

Firebase es un sistema maduro que proporciona suficientes funciones y herramientas para desarrollar y probar todo localmente.

Problemas y desafíos

sincronización de package.json y functions/package.json

La configuración de SvelteBase requiere tener contenido del directorio /functions cuyo contenido se implementará en Firebase.

Por lo tanto, necesita su propio paquete.json que incluye los paquetes necesarios tanto para Svelte & Sapper como para Firebase.

Básicamente, significa que cualquier paquete que se agregue a package.json durante el proceso de desarrollo deberá agregarse a functions/packages.json .

Sin acceso al atributo lang de la etiqueta de apertura html

Para obtener la mejor plataforma multilingüe, también debe especificar el atributo lang en la etiqueta html raíz.

Pero, lamentablemente, la versión actual de Sapper no admite marcadores de posición personalizados en template.html .

Es por eso que, de forma predeterminada, el atributo lang no se especifica y solo usamos metadatos hreflang .

Materializar CSS

Actualmente, SvelteBase utiliza Materialise como marco CSS porque es simple e intuitivamente fácil de usar. Sin embargo, parece que no está mejorando mucho y no crece. También en mis proyectos personales ya comencé a notar muchas limitaciones y ahora considero cambiar a otro Framework CSS o introducir la capacidad de utilizar diferentes marcos.

Los scripts del lado del servidor y del lado del cliente pueden ser confusos

  • Las páginas Sapper utilizan dos tipos de scripts de tiempo de ejecución: del lado del servidor y del lado del cliente.
  • Los scripts del lado del servidor usan el entorno node.js ; tienen el atributo context="module"
  • Los scripts del lado del cliente usan el entorno del navegador
  • Si desea obtener todos los beneficios de SSR, debe usar secuencias de comandos del lado del servidor para representar el contenido necesario en el lado del servidor.

Desventajas de Firebase

Cantidad limitada de proyectos en Firebase

De forma predeterminada, puede crear hasta 5 proyectos en Firebase. Pero si necesita más, se le pedirá que solicite proyectos adicionales.

Paginación de Firestore

Con Firebase no hay forma de implementar la paginación clásica con desplazamiento y límite y, en su lugar, debe usar conceptos como "startAfter" o "startAt" para indicar después o en qué punto desea obtener el conjunto de datos.

Sincronización de índices de Firestore

Firestore le permite (y para algunas consultas lo requiere) usar índices para tener un rendimiento adecuado de las consultas.

Sin embargo, permite configurar índices usando Firebase Console y firestore.indexes.json .

Pero si los índices se configuran con Firebase Console , no se reflejarán automáticamente en firestore.indexes.json .

Por lo tanto, debe hacerlo manualmente, porque si implementa su código en otro proyecto de Firebase, deberá configurar los índices nuevamente.

Respuesta lenta de la red

Firebase parece tener un retraso de inicio en frío, cuando la función del nodo no se ejecuta con la frecuencia suficiente.