{ I Want to Believe }

Making Angular Apps More
Performant with Scully

Jennifer Wadella

Jennifer Wadella

@likeOMGitsFEDAY

• Director of Angular @ Bitovi
• Angular GDE
• 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

Scully

The JAMstack toolchain Angular devs have been craving.

Demo App:
Animal Crossing Field Guide

https://animalcrossingfieldguide.web.app/

https://github.com/tehfedaykin/acnh-fieldguide

Goals:

• 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

Tada!

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

Summary

• 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
• Take Advantage of CLI arguments of Scully dependencies

DEMO APP:

https://animalcrossingfieldguide.web.app/

CODE HERE:

https://github.com/tehfedaykin/acnh-fieldguide

ARTICLES:

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

Rendering Static Pages from Dynamic Routes in Angular with Scully

Useful Tips for Debugging with Scully

Questions?

Slides available at: tehfedaykin.github.io/IWantToBelieve