We can’t send you updates from Justia Onward without your email.
Unsubscribe at any time.
Google I/O 2017 is winding up and so is our Live Blog coverage, but we have one more session to attend. Join us as we learn about how AMP can be used for more than just plain content #io17
Google I/O 2017 is coming to a close but I have one last session to attend and one last live blog to write. Yesterday I attended a session on upgrading AMP Pages to Progressive Web Applications, but thanks to the new feature <amp-bind>, as well as some powerful existing features like <amp-list> and amp-form, there is a great deal of interactivity you can add directly to an AMP page without needing to leave an AMP page. This session shows how these new features can take AMP enabled sites beyond articles to full interactive e-commerce websites.
Session Video
Live Blog Transcript
here's my last session live blog of Google I/O 2017
is your view of the screen has massive keystone issues 🙂
Promotions with <amp-carousel>
Search items with amp-form
Product image gallery with <amp-carousel>
Product refinement with <amp-selector>
Additional content with <amp-selector> to create a tabbed panel.
Shopping cart with amp-form
amp-form supports variable substitutionuse CLIENT_ID to create a unique id, which you can include as a hidden field in an amp-form
Implement buy now using the payment request api using <amp-iframe>
Related products list using <amp-list> to pull a list from a json endpoint and a mustache template
- Wrap non-AMP page in
<amp-iframe>🙁 - Submit pull request on GitHub... time... more time...
- Use
<amp-bind>🙂
- State
- Binding
- Mutation
JSON data in your document, <amp-state> lets you either add json directly to the dom inline or with remote fetch
Text is bound to an expression which can refer to state
AMP action system can update the state
code on bit.ly/amp-apple
Basically JavaScript "lite"
Touring Complete, don't actually build a touring simulator in your amp pages... but you can
<amp-bind>- fast, doesn't not run on page load
- Concurrency via Web Worker
- Safe
- Safe javascript subset
amp-bind is available in experimenting & launching soon
Myntra: Ambarish Kenghe (@kenghe) Chief Product Officer is taking the stage
- 18M monthly active
- 50M pageviews/day
- 5M sessions/day
- $1B+ revenue runrate
- 60% incoming traffic
- 30% bounce
- 7s pageload
- 1 second pageload delay
- 11% fewer pageviews
- 16% lower satisfaction
- 7% fewer conversions
- Read documentation & build a simple page using amp-list
- confidence = boosted
<amp-list>call to load results was slow did server side rendering- page was just 14kb gzipped
- Built interactivity through
<amp-bind>for search & sort <amp-bind>was experimental, but the results were promising
- Added custom fonts & crafted the UX to perfection
- Couldn't distinguish amp page from non-amp
<amp-analytics>for tracking with GA- Nested
<amp-accordion>s to achieve multi-level side navigation
- Crafted filters
- DONE!
Applause, they converted their site to AMP with just a few engineers
<amp-bind>to modify amp-list src to avoid page reload on sort, pagination<amp-install-serviceworker>to prefetch next non-amp page content- PWAMP - enage users early via amp and retain them with an app like pwa
so other than ecommerce, what else can you do?
- new layer of dynamic behavior on AMP components
- Add interactions to regular HTML elements
- AMP: ampproject.org
- Samples and documentation: ampbyexample.com
- amp-bind: bit.ly/amp-bind
- Developer support: ampproject.org/support/developer
- Youtube: youtube.com/TheAMPProject
And that's it from our #io17 Live Blogs
Thank you for joining me on my live blogs these last 3 days. Thanks to Barbara for being my camerawoman taking pictures of slides and speakers while I worked on taking notes.
I'll update all of these blog posts over the next couple of days to make them finalized blog posts
