AMP aims to deliver super-fast content for mobile websites. You've decided that you really need it; how do you do turn AMP on? In this post i'll walk through a method I've been experimenting with to deliver alternative AMP views in ASP.NET MVC with the Kentico Cloud sample site.
Accelerated Mobile Pages (AMP), it’s an open-source project sponsored by Google aimed at allowing mobile website content to render nearly instantly. It's been around for a while now, and is something that I've been meaning to look into and have been thinking about having this entire site converted to AMP.
Before I could convert anything, I felt like I needed to try it out. The basics of what makes an AMP page are easy to find, so I won't re-type the internet and tall you all about that. If you need to find that bit out, then there is plenty of good content on the AMP project website. What I was keen to avoid was have a pile of additional code to determine what should be shown in normal mode and what should be in AMP mode.
The challenge I set myself was to take the Dancing Goat sample site and the Kentico Cloud Boilerplate and create an alternative view in
While researching, I stumbled across the View Location Expander interface. These give us a tidy way to alter the location in which the razor view engine looks for our views. By examining the URL my visitors were using, I could alter patterns used to find views to specify that I wanted AMP views. This way, I get to keep the rest of the application logic the same and just use different views based upon the URL. To illustrate what I mean here, this is what my Views folder looks like for this project:
You'll notice for example that Article.cshtml has friend named Article.amp.cshtml which will be used to serve up the AMP HTML.
Project setup
To get things started, I pulled down the boilerplate and connected it to the sample project. Then modified the layout to do two things:
- Put a link in the footer to what will be the AMP version.
- Add a <link rel="amphtml" ...> tag.
By this point, I've decided that my AMP content will be served under http://foo.com/amp, so I just need to extend my routes in MVC to handle that:
Expanding the views
So far so good, now I just need to tell the view engine to look in a different place. For this, I added a view expander as follows:
This can then be registered in the ConfigureServices method in Startup.cs as follows:
That's pretty much it, but what does it all do?
There are two methods in our view expander: PoplateValues and ExpandViewLocations. This first method is called when a request is made. It's job is to populate the expander context. This is done for performance reasons; if the conext is the same between requests, then the view locations are left alone. If the context differs however, then the ExpandViewLocations method can be called.
ExpandViewLocations does as it's name suggests, you modify the contents of the available locations. In my case, by simple adding a '.amp' the file prefix.
You can see this in action on a sample site that I put together. It's a rough demo site, so don't expect much in terms of ground-breaking visuals.
Summary
This is just a brief proof of concept and there is more work to do before this could be considered production ready, but it is a step in the right direction for me. I know that there are tools out there that say that convert HTML to AMP on the fly, but I'm not sure I trust them and there really should be design considerations when serving your content in a different way.
These go to 11
I can't use the image for this post without noting where it came from, so here's a video to explain it: