#BlackLivesMatter
AMP

The AMP Project Roadmap

The ongoing development of AMP is conducted in working groups, each with knowledge or interest in a specific area of AMP.

To make their work visible to the community all groups provide regular status updates with details of what they have accomplished and what's up next.

All of the updates listed here are available as issues on GitHub and we'd love you to join the conversation there!

Select working groups

Bento

Status Update Mon Sep 14 2020

What was accomplished

  • Initial amp-inline-gallery and amp-inline-gallery-pagination completed.
  • Improved style propagation from Web components to Preact components.
  • Started experimentation with auto-envelope for Bento: a smaller custom-element wrapper that could allow us to run Bento components w/o runtime.
  • amp-date-countdown design and initial work on Preact component completed.
  • JSS support completed and ready for use.
  • Completed design review for ad-frame components (amp-facebook-comments and amp-twitter).
  • Prototyping completed for ::part CSS.

Lessons learned

  • Using fake timer when testing Preact has to be done very carefully to avoid "stuck" global queues. Always call clock.runAll() in afterEach. A more stable solution is in research.
  • The ::part CSS could be very natural for Bento. However, our typical markup is incompatible with it and would need to be changed. However, that often limits some of the CSS/markup that we've been using.
All details on GitHub

What's next

  • Review light-DOM components, especially template-based ones.
  • amp-instagram support.
  • amp-date-countdown AMP/Bento bindings.
  • Working on "developer preview" plans.
All details on GitHub

Bento

Status Update Mon Aug 31 2020

What was accomplished

  • Video Manager Preact implementation in review
  • New Bento Storybook mode deployed to @ampproject/storybook-addon
  • Mutation Observer system imlpemented
  • Supported declarative shadow DOM spec (proof of concept)
  • Started work on auto-eveloped extensions prototype
  • JSS supported for Bento components and recompiled for AMP mode.
  • Imperative API support

Lessons learned

All details on GitHub

What's next

  • JSS design review on Sep 2nd
  • Inline gallery Bento implementation
  • amp-date-countdown Bento implementation
  • Continue video manager work
All details on GitHub

Bento

Status Update Mon Aug 03 2020

What was accomplished

  • Started Video Player implementation
  • Started work on advanced carousel components: inline-gallery and streaming-gallery
  • Context API: subscriber and component APIs in review
  • CSS design ready based on JSS framework
  • Model for container wrappers based on the contain CSS as an alternative to AMP's layouts.
  • amp-img SSR work in progress.
  • Main social-share redesign complete with more advanced customization.
  • New embedding mode with non-empty passthrough when a shadow DOM is given a slot only when children are available. This allows us to support text nodes as well as elements as children.
  • Renewed focus on unit and integration testing of both: Preact and AMP elements.

Lessons learned

  • Our carousel ecosystem is very advanced.
  • How useful display:none in React world?
All details on GitHub

What's next

  • Start using Context API
  • Storybook: Bento mode that does not reload the whole AMP page.
  • Continued progress on advanced carousels
  • Continued progress on video players
  • Prototype auto-enveloped extensions that can run without v0.js
  • CSS implementation for components and shadow DOM.
All details on GitHub

Bento

Status Update Mon Jul 20 2020

What was accomplished

  • Context API introduced to AMP for discovery phase, value propagation in progress
  • Using externs to define types for props, allowing direct prop access and destructuring in components
  • amp-social-share:
    • update experiment name
    • design documentation
    • configurable color and backgroundColor for preconfigured providers
  • Video players design
  • amp-base-carousel:
    • Initial Preact implementation with looping and smooth scrolling
    • AMP layer and default arrow UI in progress
All details on GitHub

What's next

  • Continued progress on Context API
  • Add passthrough-non-empty for amp-social-share
  • Continued progress on Carousel
  • Prototype video players
  • Prototype extension "auto-envelope" for Bento and AMP modes
All details on GitHub

Bento

Status Update Mon Jun 22 2020

What was accomplished

  • Teams were off on FixIt. So limited progress.
  • Intersection observer polyfill fully launched. But some research regarding possibly duplicate firings.
All details on GitHub

What's next

  • Start video work
  • More progress on carousels
  • More progress on context propagation
  • More progress on social share
All details on GitHub

Bento

Status Update Tue May 26 2020

What was accomplished

  • IntersectionObserver polyfill goes live this week. But it can't be yet relied on 100% until inabox launch happens.
  • amp-selector and amp-fit-text are in.
  • fixed long-standing layout bugs for text content and unupgraded elements.
  • layout=responsive support in Bento
  • amp-social-share: working on a better boundary between the component and AMP.
  • Work started on the context propagation design
  • Aspect-ratio CSS: functional in the Chrome Dev. Looking for cross-browser solutions.

Lessons learned

  • At least in case of amp-fit-text, there are significant improvements to the Web Component with the new model both in terms of functionality and UX. So there are many improvement opportunities over the current state.
All details on GitHub

What's next

  • amp-carousel
  • Additional code-style improvements are on the way, such as unquoted props support.
  • Storybook addon for AMP is being released as a separate package.
All details on GitHub

Bento

Status Update Mon May 11 2020

What was accomplished

  • IntersectionObserver polyfill code in PROD. Monitoring for launch.
  • SocialShare: an updated component API.
  • AmpSelector: active progress.
  • AmpFitText: active progress.

Lessons learned

  • Switching to major-version bump for all bento components.
  • Balance between keeping the old code and fixing the legacy issues. For instance, AmpSocialShare has a config that always requires asynchronous rendering. Or AmpFitText over-nests DOM elements and provides an extra z-index layering.
All details on GitHub

What's next

  • We will soon cover all unique component types and can focus on performance and quality.
  • Display locking: migrate to new Chrome API.
  • Aspect ratio CSS: active collaboration with Chrome team to get it done.
  • React context and DOM tree.
  • ResizeObserver polyfill.
All details on GitHub

Bento

Status Update Mon Apr 27 2020

What was accomplished

  1. IntersectionObserverPolyfill: code complete for AMP/shadow/bento modes. In 0.5% binary experiment.
  2. IntersectionObserverPolyfill for inabox: in review.
  3. Some disruption to the team for UI, Mauve, and animation/streams work streams. Trying to minimize disruption.
  4. Display locking: original trial launch work for SCS in review.
  5. Revisiting amp-social-share component: need to improve the code distribution between the React and Web components.
  6. Working on amp-selector and detached model for React/Web-component mapping.
  7. Performance research on DOM tree parent search for context propagation.

Lessons learned

  1. IntersectionObserverPolyfill: design review to follow.
  2. Storybooks very quickly demonstrates API problems and inconsistencies.
  3. Some major performance changes for DOM tree parent navigation observed comparing to the original measurements several years ago. To be published soon.
All details on GitHub

What's next

  1. IntersectionObserver: code complete and launching started for all modes.
  2. amp-social-share revisit
  3. Display-locking launch
  4. amp-selector
  5. React context support: start development work.
All details on GitHub

Bento

Status Update Mon Apr 13 2020

What was accomplished

  1. Some disruption for Bento team due to performance work and stories work.
  2. Good progress on amp-selector. In review.
  3. amp-accordion renderSubtree version is in the launch pipeline.
  4. The universal IntersectionObserver in review. IntersectionObserver polyfill improvements are in the review with the w3c owners.
  5. Storybook testing is integrated into Bento.
  6. Slow, but some progress on the overall styling strategy for components, including structural (mandatory) and stylistic (optional) styles.

Lessons learned

  1. The state of stylesheets for components is still very not great on the Web today.
All details on GitHub

What's next

  1. Form integration for amp-selector
  2. React context propagation in DOM
  3. Video system component design/prototyping
  4. Continue progress on IntersectionObserver, amp-selector, renderSubtree launch, etc.
All details on GitHub

Bento

Status Update Mon Mar 30 2020

What was accomplished

  1. React-based amp-social-share has been merged.
  2. React-based amp-selector, and possibly amp-fit-text starting.
  3. Design of video ecosystem in React has started

Lessons learned

  1. Draw a more clear boundary between AMP and React. The React components should stand on their own.
  2. How to reconcile mostly-async AMP APIs with React sync patterns is not yet fully flashed out.
All details on GitHub

What's next

  1. Introduce Storybook tools.
  2. Continue work on amp-selector/amp-fit-text.
  3. Continue work on video APIs in React.
  4. Start React context propagation work in AMP Core.
All details on GitHub

Bento

Status Update Wed Mar 18 2020

What was accomplished

  • AMP team went through the React training.
  • A lot of work has been completed to make React development idiomatic, but compatible with Closure compiler used by AMP.
  • A separate testing infrastructure has been set up.
  • amp-timeago, amp-date-display, amp-social-share are reimplemented as React components.
  • Initial runtime infrastructure has been built to connect Web Components and React components.

Lessons learned

  • Make everything idiomatic
  • Use more React tools
All details on GitHub

What's next

  • Continue to improve idiomatic React style.
  • Setup storybook and more tools.
  • More sophisticated components. Specifically composite components such as carousel and accordion.
  • Design the pattern for all video players.
  • Improve Web Components/React mapping in AMP Runtime.
  • Build the first launch plans.
All details on GitHub

Bento

Status Update Mon Mar 16 2020

What was accomplished

  1. React-based amp-social-share in review
  2. Working on React-based design for amp-accordion
  3. Working on React-based design for video players
  4. JSX syntax is enabled
  5. React linting is enabled
All details on GitHub

What's next

  1. Continue work on React components
  2. Fix prop access in React components to drop quotes
  3. Discovery: use storybook for React component testing
  4. Discovery: inter-element context propagation
All details on GitHub