Scully es un generador de sitios estáticos basado en Angular, lanzado por primera vez en 2019, para aplicaciones Angular y que admite Angular v9.xx y v10.xx con Node.js 12 o superior.
En otras palabras, Scully se encarga de renderizar las páginas de tu app Angular y generar archivos estáticos HTML y CSS que no necesitan Javascript para cargar.
Un hecho importante es que Scully usa Chromium y su sistema operativo debe permitir su instalación y ejecución. Lo mejor de Scully es que solo estás codificando con Angular. No es necesario volver a diseñar o modificar su aplicación.
¿Como funciona? 😲
Scully se puede integrar fácilmente con un proyecto Angular existente usando un comando simple. Si desea utilizar archivos Markdown y utilizar la representación previa para sus aplicaciones, puede hacerlo todo posible con Scully.
Típicamente, una app Angular es un archivo HTML prácticamente vacío que enlaza a varios archivos Javascript. Cuando visitas una página de este tipo, tu navegador muestra una página en blanco, se descarga el JS asociado y lo ejecuta. Es entonces, cuando aparece en pantalla tu flamante página creada con Angular.
Más que un simple generador de sitios estáticos, Scully es una cadena de herramientas Jamstack para el desarrollo angular.
Scully explora la estructura de rutas de su aplicación Angular y la usa para crear una lista de rutas. Luego genera un index.html para cada ruta, renderizando previamente cada página de su aplicación en HTML y CSS sin formato, y crea una versión estática de la misma. Si tiene 1000 rutas en su aplicación, creará 1000 Index.htmlarchivos.
Una vez que tu aplicación esté pre-renderizada, aparecerá en la vista del usuario; no tendrán que esperar hasta que se carguen todos los archivos JavaScript para seguir interactuando con el sitio web.
Ahora, tienes un conocimiento básico de Scully y cómo funciona.
Pre Rendering
El pre-rendering consiste en renderizar las páginas de tu aplicación ANTES de que se realice la petición del cliente. Todas esas páginas ya renderizadas las subes entonces a un host o CDN, para hacerlas accesibles a cualquier persona que quiera acceder a ellas.
Hay muchas estrategias. Puedes hacer pre-rendering como un paso intermedio en tu proceso de deploy, o tener una tarea periódica que actualiza tus páginas de vez en cuando, por ejemplo.
Eso ya depende de tus necesidades, pero lo importante son las ventajas que ofrece respecto a SSR:
Más rápido: cuando el cliente navega, la página se sirve de inmediato (ya renderizada), como una página estática.
«Sin» servidor: no necesitas un servidor en marcha todo el tiempo que reciba las visitas de tus usuarios y renderice lo mismo una y otra vez.
El pre-rendering, de hecho, es una pieza clave en las arquitecturas JAMStack que tan de moda se están poniendo últimamente.
Es la arquitectura que tienen en mente los generadores de sitios estáticos como Gatsby.js (para React), Nuxt (para Vue) y ahora Scully (para Angular).
Elegir o no elegir Scully 🙏
llegados a este punto surge la duda Pero la pregunta es, ¿deberíamos usar Scully? ¿Vale la pena el esfuerzo? Obtendrá su respuesta en la siguiente sección cuando analice las características que lo harán enamorarse de Scully.
Si bien Angular seguía careciendo de un generador de sitios estáticos, otros marcos y bibliotecas populares como Vue.js y React fueron ricos en SSG durante años. Como resultado, actualmente están en la cima. Entonces, no sería del todo justo comparar a Scully con ellos.
Aún así, Scully tiene algunas características interesantes que la hacen única entre otros generadores de sitios estáticos.
Velocidad
La razón más beneficiosa por la que debería utilizar Scully es que le ayuda a establecer una excelente experiencia de usuario.
Nada hará que su proyecto Angular sea tan rápido como usar Scully y adoptar Jamstack. - Aaron Frost
Sistema de complementos
Los complementos juegan un papel importante en los generadores de sitios estáticos. Scully también tiene un sistema de complementos flexible y extensible para incorporar complementos de ruta y complementos de transformación de datos.
De esta manera, creará sus funcionalidades personalizadas dentro de Scully o optará por diferentes complementos creados por la comunidad o complementos incorporados para ayudarlo a hacer las cosas.
Hay cinco tipos principales de complementos que permiten la inyección de código en diferentes fases del ciclo de vida del proceso de Scully:
- Routercomplementos: dígale a Scully cómo obtener los datos necesarios de los parámetros de ruta para que sean páginas renderizadas previamente.
render complementos: para convertir el HTML renderizado. - FileHandlercomplementos: el contentFoldercomplemento los usa durante la fase de renderizado.
- RouteDiscoveryDone complementos: se llama inmediatamente después de que se hayan recopilado todas las rutas y se hayan completado todos los complementos del enrutador.
allDone. - Los complementos son como routeDiscoveryDonecomplementos, incluso si se llaman después de que Scully haya realizado todos los procedimientos.
Tendrás acceso a un archivo de configuración en cada proyecto de Scully y te permitirá administrar toda la aplicación desde un solo lugar.
export interface ScullyConfig {
projectRoot: string;
homeFolder: string;
ourDir?: string;
distFolder?: string;
routes: RouteConfig;
extraRoutes?: string [];
appPort: number;
hostName?: string;
hostUrl?: string;
}Potente CLI
La CLI de Scully es extremadamente poderosa para hacer que los proyectos angulares y angulares-híbridos sean factibles para JAMstack.
Esta CLI también viene con algunas opciones interesantes de línea de comandos que le ayudan a reducir el tiempo de desarrollo:
--baseFilter
Las opciones le permiten señalar rutas específicas que necesita renderizar y esto puede ahorrar mucho tiempo ya que no es necesario renderizar previamente toda la aplicación. ( npx scully --baseFilter /route)
--configFile/--cf permite usar diferentes archivos de configuración.
--statsahorra las últimas estática de construcción en un archivo llamado JSON scullyStats.jsone incluirá detalles como numberOfRoutes, generatingTime, routesPerSecond, entre otros.
Es posible generar un sitio Scully a través de acciones de Github. Puede crear e implementar su sitio de Scully en las páginas de GitHub utilizando Github Action Scully Publish . Permitirá a sus usuarios explorar su contenido de una de las formas más rápidas posibles.
Usar Scully 😎
Scully también utiliza schematics, así que usarlo es igual de simple:
- Añadir Scully a un proyecto Angular
- ng add @scullyio/init
- Compilar el proyecto
- ng build
Y renderizarlo con Scully (usamos scanRoutes para que encuentre rutas estáticas)
npm run scully -- --scanRoutes
Resumen:
Ventajas
- Permite usar archivos markdown para generar el contenido de las páginas a renderizar, así que puede ser muy útil a la hora de crear un blog.
- Se puede extender con plugins, para realizar cosas interesantes como minificar del HTML en el proceso de pre-rendering.
- Su ecosistema de plugins de momento es pequeño, pero tiempo al tiempo. Además, siempre puedes crearte tus propios plugins.
- Dado que corre en Puppeteer, el entorno de pre-rendering sigue siendo «browser», así que no tienes que preocuparte de si objetos como document están definidos o no.
Desventajas:
- Justamente porque corre en Puppeteer, el proceso de pre-rendering es mucho más lento. Si solo renderizas 10 páginas, no notarás la diferencia, pero he visto benchmarks donde al renderizar 1000 páginas, el proceso en Scully es 4 veces mayor que en Universal.
- Además de lento, también es un proceso que consume más recursos. Si quieres añadir pre-rendering como un paso más de tu integración continua, Universal puede ser mejor opción.
- Scully es muy reciente y puedes encontrarte con algún bug que otro. De momento, Universal es una solución más segura para ir a producción.
Quiero más
Por supuesto! gracias al apoyo que se ha conseguido por todos ustedes (comentando, suscribiéndote y compartiendo) se agregaron nuevos videos, en esta ocasión iniciamos el curso de testing en angular, curso de node, curso mongo y mucho más