What’s new in AMP by Example

The following was posted on Medium by Sebastian Benz, Developer Advocate, Google.

A lot has happened since I last wrote about AMP by Example. This post gives you a quick overview about new samples and what’s new on the site itself.

A new Design

We completely re-designed www.ampbyexample.com using the brand-new AMPStart template and component library. The other big change: samples no longer use a three column layout. Instead, code snippets and live previews are embedded into the documentation.

ampbyexample1The new design

Interactive AMP Playground

If you want to play around with the sample code: all samples can now be opened in an interactive playground. At the moment it’s limited to only editing existing samples, but we plan to make this even more useful by making it possible to share samples with others.

ampbyexample2Open any sample in the playground

AMP Component Updates

There have been quite a few updates to the AMP component samples:

 

ampbyexample3amp-fx-parallax

  • amp-gist: developers rejoice, finally it’s possible to embed Github Gists into AMPs.
  • amp-iframe: update to the existing sample demonstrating how amp-iframes can resize themselves. This can be very useful when embedding third-party content via iframe.

ampbyexample4resizesable amp-iframe

More AMP Use Cases

New samples demonstrating how to combine AMP components to solve complex use cases:

  • Tab Panels in AMP: eBay contributed a sample demonstrating how to implement tabs in AMP. One thing to note: while creating the sample, eBay discovered that the current implementation doesn’t fulfill their accessibility requirements yet. This is the issue tracking what needs to be done to fix this.

ampbyexample5Tab Panels with AMP

  • Poll Sample: how to implement a single page poll in AMP making sure that users can only vote once.

ampbyexample6Single-page poll in AMP

AMP Ads galore!

Big update to the AMP Ads section demonstrating how to build AMP ads:

  • AMP Ad sample previews are now served as real AMP ads via DFP. Previously, AMP ad previews were embedded using iframes which didn’t make use of the optimized AMP ad rendering performance.
  • Hello World Sample: learn how to create an AMP Ad.
  • Video Ad Sample: a sample ad really showing off what is possible with AMP.
  • Speed comparison: see how fast an AMP Ad loads in comparison to a regular ad. Best viewed on a 3G connection.

ampbyexample7AMP ads load almost instantly

What’s next?

We’ll continue providing samples for new AMP components, but also plan to focus more on how complex use cases can be solved by combining existing AMP components. Please let us know if there any specific use cases where you would like to see samples.

Posted by Sebastian Benz, Developer Advocate, Google.

What’s new in AMP by Example

Test amp-bind on your site with an origin trial

All features in AMP need to be tested (that’s why we build things using experiments). However, particularly large, complex, and flexible features need a bit more attention. In particular, they need to be implemented end-to-end in real-world applications, for real users. That way, we can be sure that these features work well when they’re launched.

We recently announced amp-bind, an experimental data binding system that provides a more flexible, expansive way of supporting interactivity in AMP. Along with that flexibility comes a lot of complexity, unknowns, and the necessity to thoroughly test in order to make sure it works right from the start. For that reason, amp-bind stands to gain a lot from the ability to run in production, on websites where developers can implement with a real-world purpose. That’s why we’re setting up origin trials for amp-bind.

 

What is amp-bind?

In short, amp-bind fundamentally changes the model for interactivity in AMP, while retaining AMP’s essential performance and UX assurances. amp-bind works more like a coding layer on top of AMP—going beyond the AMP Project’s historical approach of limiting interactivity to scoped, use-case-driven components like amp-carousel and amp-accordion. amp-bind links user actions with triggers for different document states, giving developers much more freedom in the types of interactions they can define.

product-detail-bind.gif

To get an idea of what amp-bind can support on your AMP pages, check out some of its basic behaviors, such as how it can work together with an image carousel. You can also see how it can be integrated into a basic product detail page.

 

What are origin trials?

Origin trials (inspired by the Google Chrome team) are useful when a feature is far enough along that it’s ready to be tested with real users, but some changes are still expected based on developer feedback.

Traditionally, a feature at this stage is put into experimental mode, where developers can try it in development, but it won’t work in production yet. This can be useful, but developers won’t necessarily try something out unless they see immediate benefit, so it’s hard for them to justify putting work into something that won’t work in production.

Enter origin trials: interested developers can opt-in to a test where they can use a new feature in production, with the expectations a) that the test is for a limited time, and b) that the feature will likely undergo some changes after origin trials. Unlike Chrome origin trials, which restrict the experiment to a small percentage of users, amp-bind origin trials will enable the feature for every visitor visiting a whitelisted domain.

Origin trials are a great opportunity to try out a new feature before it’s fully live: you get to benefit immediately from the work you put into a feature (because the feature will be live on your site, rather than still guarded by an experiment), and your feedback can directly influence the direction of the feature.

 

How to whitelist your site for origin trials with amp-bind

Sign up here to let us know you’re interested origin trials for amp-bind on your site, and we’ll get back to you with next steps. Note that we can whitelist only a limited number of domains for the feature, given the AMP team’s limited bandwidth for developer support.

As always, we want your feedback for amp-bind—whether your site is whitelisted for origin trials, or if you’ve just checked out the documentation and samples. Once we have enough input from the AMP community, and have made any necessary changes, we’ll release the feature to production for all sites, regardless of their status with respect to origin trials. We’re looking forward to hearing from you, and to seeing a lot more interactivity in AMP!

Posted by Eric Lindley, Product Manager, AMP Project

Test amp-bind on your site with an origin trial

From AMP to Progressive Web App

PWA_AMP1If you’ve invested in AMP and are also getting ready to upgrade your mobile website to a next-generation Progressive Web App, I have good news for you: AMP and Progressive Web Apps can be combined and used together to create a fantastic user journey. And we have a new set of docs on AMPproject.org to help with just that.

AMP makes for an ideal entry point into your site due to the almost-instant prerendered load, and the <amp-install-serviceworker> component allows you to warm up and preload a Progressive Web App while your users are reading an AMP page. Users clicking on links to your origin will now instantly upgrade to the full-featured Progressive Web App. This means you can start fast with AMP and stay fast with your Progressive Web App experience.

In addition, you can now reuse the entire content library you already have in the form of AMP pages and use them as a centerpiece in your Progressive Web App, saving engineering resources and complexity.

To learn more about how to combine AMP and Progressive Web Apps, head to one of the following resources:

  1. Our brand new set of docs discussing AMP and Progressive Web Apps, deep diving into how to enable Progressive Web App features for your AMP pages, how to preload your Progressive Web App from your AMP Pages and embed & use AMP as a data source
  2. The primer released in Smashing Mag
  3. The conference talk by Alex Russell from the AMP Conf 2017

Get in touch via our developer support channels if you have questions or feedback. We can’t wait to see what you will build!

Posted by Paul Bakaus, Developer Advocate, AMP Project

From AMP to Progressive Web App

AMP Conf 2017 Recap (and videos!)

Last month we held our first AMP Conf, and it was a blast. Over 300 of you showed up in-person, and thousands tuned into the live stream.

Over two days, 19 talks, panels and workshops – with over half from outside the AMP team – covered topics including building interactive AMP pages and using AMP pages for e-commerce.

If you couldn’t make it to AMP Conf, you can relive and watch all the talks on the AMP Channel:

We had many community announcements, such as Baidu, Sogou, and Yahoo Japan linking to AMP pages. The core AMP team had lots to share as well– among the announcements at AMP Conf:

And dear to my heart were the thoughtful discussions many of us had with people at the conference looking at the AMP Project’s direction. A lot of the conversations were captured in detail during the AMP & the web and The roles platform play panels.

We might not have all the right solutions yet, but with your help we can get there. It’s clear that we still have much to do, but AMP Conf opened the door for more open collaboration and conversation with the web community. So get involved and come help us! Creating a long-term, healthy mobile web ecosystem is complex and needs the voices of many.

See you soon at another conference!

Posted by Paul Bakaus, Developer Advocate, AMP Project

AMP Conf 2017 Recap (and videos!)