like an
* Scully like an alternative to Angular Universal
alternative to
Angular Global Summit '21
Stepan Suvorov
-
CTO @ Studytube
-
with Angular since 2013
-
Angular Kharkiv(Ukraine) Meetup organizer
-
Dutch Angular Group co-organizer
-
Angular Workshops on learn.javascript.ru
-
Angular Pro Screencast https://angular.ninja/
Agenda
What is Jamstack?
The Goals of Jamstack
- Pre-render everything
- Still boot a SPA
- Cache data calls during pre-rendering
- Use Power of CDN!
- Decrease cost
- Increase security
- Simplify prod env
What is Scully?
Static Site Generator
The Goals of Scully
- Provide all Jamstack goals
- Dot it for 100% of Angular projects
- Require ~no effort to integrate
- Support Markdown
- Plugin system/ecosystem
- ...
Before
/index.html
After
/index.html
/about/index.html
/settings/index.html
/cats/1/index.html
/cats/2/index.html
...
Before
/index.html - 1kb
After
/index.html - 26kb
main.js 264kb
polyfill.js 131kb
runtime.js 1kb
so for an EMPTY app 396kb vs 26kb
How Scully works ?
- Find all your routes
- Generate all the pages
Router Plugins
Render Plugins
Router Plugins
/
/about
/settings
/cats
/cats/:catId
CatPlugin
/
/about
/settings
/cats
/cats/1
/cats/2
/cats/3
...
getting routes from json
Blog with Scully
ng g @scullyio/init:blog
published: true
Angular Universal
SSR
🤔
Why to SSR?
-
SEO
-
First screen
-
Social friendly preview
Angular Universal
$ ng add @nguniversal/express-engine
$ ng add @scullyio/init
$ npm run dev:ssr
$ ng build
$ npm run scully
$ npm run scully:serve
init
dev env
prod env
$ npm run build:ssr
$ npm run serve:ssr
$ ng build --prod
$ npm run scully
you need nodejs server!
you can just upload your files to CDN
rebuild
Angular Universal
rendering
is done with help of a real browser - Puppeteer
- document/window/navigator
- jQuery old plugins
with help of ngExpressEngine (without real browser)
JIT
is built for it
was not made to compile pages on fly (regeneration takes too much time)
partial
you can regenerate any specific page
--routeFilter "*/pages/*"
Angular Universal
benchmarks
speed
Angular Universal
benchmarks
file size
Angular Universal
extra
plugins: gives you full control up to rendering process where you can remove Angular at all
blog out of box (schematics)
.md files compilation out of box
ng g @scullyio/init:blog
ng g @scullyio/init:post --name="This is my post1"
Conclusion
Thank you for your attention.
Questions?
18:10-18:40 (GMT)
JAMstack your Angular applications with Scully
Steffi Keran Rani
@steffikeranj
Angular Global Summit - Scully like an alternative to SSR
By Stepan Suvorov
