Angular now has a static site generator

1. Welcome to Scully and some background...

Scully has arrived. It’s a static site generator for Angular projects. And we’re super excited about it. Why? Read on…

If you read our other posts, you will know that we are big fans of static site generators (SSGs). 

Quick recap… SSGs build your website by merging all your content with your templates. They do this each time you edit your content. They provide you with quick and secure websites. Jekyll is an example of a classic SSG.*

We also love Angular. The framework that allows developers to build single page apps. Single page apps are the future.

Quick recap… single page apps are websites that behave like native apps but in your web browser. They offer super-fast interaction,which in turn helps things like customer conversion. But as the title suggests, they only have one page. Single page apps create the other pages as you navigate around the site. It feels like software but looks like a website. And it all happens in your browser… there’s no refreshing of pages as you navigate to a new page (like the old days!).

2. So what? What's the benefit?

So what? Another SSG? Well, Scully will tackle the inherent issues of a single page app (built with Angular*). As follows…

1. SEO: they’re not search engine friendly. Search spiders visit the single page app on the server… they don’t see the other dynamic pages that you can visit in your web browser. I’m sure this will change but this is the story right now.
2. Loading speed: They have more code to load when they load for the first time (after that they’re super-fast). So slower to load… and this can spoil user experience.

(*Scully works with Angular only. Other front-end frameworks / libraries have other static site generators. E.g. React has Gatsby.)

Scully will build all your single page app’s pages (or views, if that sounds confusing) as static html files. This pleases…

• Search bots… phew, this is like the old days”. A good old plain html file to visit, read and index
• Users… the small html pages download first, providing fast content. The dynamic aspect of the app downloads in the background. Perfect for slow mobile connections.

Scully generates your websites pages by using some clever machine learning.

This means you get the beauty and wonder of a classic static site generator, like Jekyll. And you get the software-like experience that Angular provides. Everything is awesome!

3. Why's it called Scully

Um, I don’t know… sorry.

4. Game changer...

This is an enormous game changer for us. Especially, when providing dynamic type solutions.

For example, I had an enquiry the other day from a customer who wanted a directory type website. SEO was a very important criteria for the project. The customer wanted users to be able to like and short-list luxury hotels from the directory. In a perfect world, I wanted to use Angular… I wasn’t confident on the Angular SEO situation* and so offered a Jekyll + Angular type solution. Content in Jekyll, business directory in Angular. Not a perfect combo and I lost the enquiry.

(*having heard that Angular Universal wasn’t smooth sailing for many).

After losing this enquiry, I set about researching other options. I was investigating (serious investigation by the way!) Vue and Gridsome. I didn’t want to switch from Angular. I like all the tools and the structured approach it takes for building a web app. And I did not want to dilute my personal development with learning a new library during 2020. I’d rather concentrate my efforts on Angular. 

Luckily, some developer somewhere, re-tweeted Aaron Frosts tweet about Scully. It was like Christmas… in fact it was Christmas! What a great present!

Aaron is the lead developer on the project. Thank you Aaron and all the other developers involved with Scully at HeroDevs. I follow you now so I get all your updates.

Find out more about Aaron and HeroDevs. HeroDevs are a Utah-based web development company.

5. Angular now caught up?

For a while it seemed that Angular was falling behind. For example, Gatsby has been rocking the boat here for some time… Gatsby is the static site generator for React built apps. And there are also some other players as mentioned above. These include, Vue + Gridsome or Vue + VuePress.

With the release of Scully and Angular 9 ‘Ivy’, the future looks bright. The Vue and Gridsome books are now on the bottom shelf : )

6. What now?

We have plans to use it as soon as possible. In fact we plan to use it with the membership web app that we’re going to build. We’d like to see it running on Netlify and with a headless CMS. We’ll write more when we have had a chance to play with it.