{ I Want to Believe }

Making Angular Apps More
Performant with Scully

Jennifer Wadella

Jennifer Wadella headshot

Jennifer Wadella


  • Lead Angular Consultant at Bitovi
  • Expert Tarantula Catcher
  • Fermentista

"When all links are created equal, your ideas can win simply because people like them. The future of innovation will be made, not managed."

- Alexis Ohanian, Without Their Permission

  1. Have an idea (code)
  2. Help people find your idea (SEO)
  3. Make people love your idea (performance)

Achieve This With JAMstack

JavaScript - application functionality

APIs - server side interactions

Markup - statically served HTML files

JAMstack Goals

  • Better application performance
  • Easier scaling
  • Improved developer experience
  • Heightened security

Angular App Success Equation

Improved Searchability Over Competitors

+ Delighting Users with Great Performance

= How Businesses Can Benefit Immediately


The JAMstack toolchain Angular devs have been craving.

Demo App:
Animal Crossing Field Guide




  • Improve performance by pre-rendering all application pages
  • Improve SEO by adding custom meta data to pages
  • Improve performance by caching API calls

Goal #1

Pre-render application pages

Let's Get Started With Scully

Make Sure Your Application Has Routes

Scully uses the router to find pages to pre-render

Scully Plugin System

The plugin system allows developers to provide specific instructions to Scully on how to pre-render the application.

There are router, render, and file handler plugin types, and several built-in utility plugins already available


Static pages for all 391 villagers pre-rendered!

Community Plugins

  • minifyHtml - Render plugin - link
  • disableAngular - Render plugin - link
  • toc - Render pluginlink
  • lazyImages - Render plugin link
  • sitemap - Render plugin - link

Goal #2

Add custom meta data to application pages

Let's Make These Pages Searchable!

Tag Data Available on Static Pages

Cool tool to check tags: https://metatags.io/

Goal #3

Cache API Calls

Built App Performance

lighthouse scores


  • Scully ROCKS for JAMstacking Angular
  • Generate static pages of your application
  • Generate pages from dynamic routes using plugins
  • Add SEO content using Meta and Title
  • Use useScullyTransferState to cache API calls






Why You Should Be Using TransferState (& Scully) to Cache Your API Calls in Angular

Rendering Static Pages from Dynamic Routes in Angular with Scully


Slides available at: tehfedaykin.github.io/IWantToBelieve

Catching Tarantulas
dev.to/likeomgitsfeday@likeOMGitsFEDAY SW-8534-5881-1506