AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Pianificazione del progetto AMP

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

Tutto User Interface & Accessibility AMP for Email Infrastructure Outreach Runtime Caching Viewers Stories Analytics Monetization Performance Bento

Bento

Status Update Mon Mar 01 2021

What was accomplished ✅

Fix it week 🔨

  • amp-youtube supports currentTime and duration in imperative API https://github.com/ampproject/amphtml/pull/32804
  • amp-selector has stylistic support for hybrid disabled + selected state https://github.com/ampproject/amphtml/pull/32825
  • amp-accordion 0.1 and 1.0 respect pre-existing role attributes https://github.com/ampproject/amphtml/pull/32915
  • amp-timeago 0.1 and 1.0 migrated to latest timeago.js library (from third_party/ to node_modules) and now have support for 7 more languages
  • e2e tests for amp-sidebar https://github.com/ampproject/amphtml/pull/32837, amp-social-share https://github.com/ampproject/amphtml/pull/32881, and amp-accordion https://github.com/ampproject/amphtml/pull/32958
  • Documented media-based attributes and enabled on amp-fit-text https://github.com/ampproject/amphtml/pull/32824
  • BaseElement['props'] refactor to simplify children configurations https://github.com/ampproject/amphtml/pull/32936
  • objstr:
    • used in more components https://github.com/ampproject/amphtml/pull/32893
    • compiles down https://github.com/ampproject/amphtml/pull/32872
  • JSS:
    • transform compiled output to export const className for filesize https://github.com/ampproject/amphtml/pull/32888
    • collect z-index https://github.com/ampproject/amphtml/pull/32847
  • Shadow DOM polyfill https://github.com/ampproject/amphtml/pull/32820

General 🍱

  • LightboxGallery Preact implementation
  • component file restructuring for npm packaging
  • NPM binary generation with ES build
  • design review for deferred build and async pause systems
  • Use gulp get-zindex [--fix] to make sure css/Z_INDEX.md is up to date
All details on GitHub

Lessons learned 👩‍🎓

What's next ⏩

  • amp-lightbox-gallery AMP layer
  • amp-sidebar active development
  • video docking active development
  • Analysis of amp-fit-text 0.1 -> 1.0 auto upgrade performance implications
All details on GitHub

Bento

Status Update Mon Feb 01 2021

What was accomplished

  • npm packaging in progress
  • Video docking in progress
  • Contributing to obj-str Babel transformations for an improved classname construction
  • Sidebar animations completed
  • Started the load experiment for Bento components in AMP using amp-fit-text
  • Progress on component isolation: measurements, pause/resume and deferred build. Presenting at tomorrow's design review.
  • aspect-ratio rollout is continuing
  • Started the project to refactor log writers.
  • Started work on lightbox gallery

Lessons learned

  • We've been rendering and testing visual diffs on different browser versions, which explains some flakes.
All details on GitHub

What's next

  • Fixit week
  • Working on the next set of Bento component priorities.
  • Continued progress on video docking, sidebar, and lightbox gallery.
  • Continued progress on component isolation
All details on GitHub

Bento

Status Update Mon Feb 01 2021

What was accomplished

  • 🎉 We launched our dev preview!
  • 🎯 amp-social-share:focus support through shadow DOM
  • ⬆️ amp-date-countdown countUp feature
  • 📦 Design doc for releasing Bento components on npm
  • ✅ e2e tests now support sharing fixtures across component versions
  • ⏰ Dispatch DOM events in Bento components
  • 📝 Document imperative API for Bento mode
  • 🛥️ Draft Preact docking implementation
  • 📸 aspect-ratio rollout
  • 🐛 Various bug fixes:
  • iOS web scrolling
  • non-zero line-height for [placeholder] elements
  • media attributes

Lessons learned

All details on GitHub

What's next

  • 📝 Documentation / Deep Dive for delegatesFocus
  • 📂 Demo changes in component file structure to prepare for releasing on npm
  • 🛥️ Continued progress with media docking
  • 💡 LightboxGallery design and implementation
  • 🔖 Sidebar continued progress
All details on GitHub

Bento

Status Update Tue Jan 05 2021

What was accomplished

  • Most folks OOO
  • Bug fixes from year end bug bash
  • Imperative API
  • Work started on amp-sidebar

Lessons learned

  • box-styles propagation through display: contents 1-pager
All details on GitHub

What's next

  • Preparing amp.dev with high level Bento information and usage guides
  • Developer preview of our first 16 components
  • amp-truncate-text
All details on GitHub

Bento

Status Update Fri Jan 01 2021

What was accomplished

  • Ready for dev preview. Waiting for some amp.dev updates to go public.
  • Dev-preview related minor fixes.
  • Sidebar: RTL and styling fixes
  • We now have ResizeObserver polyfill across all of AMP
  • Initial resize-code refactoring.

Lessons learned

All details on GitHub

What's next

  • Continuing: Video docking
  • Start: lightbox gallery
  • Social share: focus outline work
  • Continuing: amp-truncated-text
  • Upgrading storybook
  • Start: npm packages for (P)react components
All details on GitHub

Bento

Status Update Mon Dec 07 2020

What was accomplished

  • Most of carousel baseline features completed
  • Accordion: display locking completed.
  • Imperative APIs: design completed.
  • Troubleshooting IntersectionObserver spec problems.

Lessons learned

All details on GitHub

What's next

  • Bug bash
  • Sidebar
All details on GitHub

Bento

Status Update Mon Nov 09 2020

What was accomplished

  • Video iframe code merged for Preact
  • Progress on docking
  • Static Storybook deployment
  • Implemented CE disconnect/connect as Preact mount/unmount
  • Built support for media attributes, including boolean media attributes
  • amp-bind is supported in the Storybook
  • Imperative API for accordion completed
  • Bind protocol for accordion completed
  • Continued progress on viewportCallback removal
  • Started lightbox implementation

Lessons learned

All details on GitHub

What's next

  • amp-video-iframe binding for video iframe
  • auto-advance in carousel
  • carousel thumbnails
  • carousel snapping features
  • DOM event support for accordion
  • Restructure accordion for better Preact semantics and support display locking
  • Preact and AMP bindings implementation of lightbox
All details on GitHub

Bento

Status Update Mon Nov 02 2020

What was accomplished

  • amp-accordion:
  • external API restructure
  • accessibility attributes
  • amp-base-carousel snap-align feature to view slides either at start or center of carousel viewport
  • amp-lightbox initial implementation
  • amp-selector:
  • keyboard-select-mode feature for Arrow key navigation and selection configuration
  • Preact unit tests
  • Ongoing fixes for resource loaders and intersection observers
  • Imperative API design and discussion
  • Documentation written for amp-instagram, amp-youtube, amp-lightbox
  • Removed viewportCallback from BaseElement
  • PR deploy bot integration with Storybook

Lessons learned

  • You can run Preact Devtools in Storybook by adding import 'preact/debug'; to the start of the story.
  • We make sure hidden is display:none in AMP but it is much more fragile (overridable) to use it in Bento mode.
All details on GitHub

What's next

  • Finalizing dev preview feature set and planning for beta
  • Continued progress on imperative API
  • amp-accordion:
  • display locking
  • final touches
  • amp-base-carousel:
  • e2e tests
  • orientation feature to configure the carousel as horizontal or vertical scrolling
  • dir="rtl" support
  • amp-selector integration with forms
All details on GitHub

Bento

Status Update Fri Oct 02 2020

What was accomplished

  • Prototypes created for mixed-length and streaming carousel types
  • Accordion: a11y support and styling.
  • Accordion: work started on imperative APIs.
  • Video iframes and YouTube components are code complete.
  • Started lightbox components. Presented in design review.
  • Replacing viewportCallback with IntersectionObserver throughout the runtime.

Lessons learned

All details on GitHub

What's next

  • Continue work on video docking
  • Continue work on stream and mixed-length carousel types.
  • Continue work on lightbox components.
  • Continue work on accordion imperative APIs, a11y, and structure.
  • Support media-query attributes.
All details on GitHub

Bento

Status Update Thu Oct 01 2020

What was accomplished

  • Design work has started on the AMP/JSX templates.
  • YouTube component is in progress.
  • More carousel features added such as controls and snapping.
  • DateCountdown component - code-complete.
  • Accordion: animations done.
  • amp-img SSR is launching and collecting metrics.
  • Instagram component completed.
  • Aspect ratio supported for layout=responsive. Unfortunately, it doesn't work for layout=intrinsic.
  • Did some evaluations and filed bugs on Goober - a potential alternative for JSS.

Lessons learned

  • Animations could potentially be easier solved with Web Animations API. The big benefit is that some CSS properties can be easier managed for setup and cleanup as the keyframes definition.
All details on GitHub

What's next

  • Video docking.
  • StreamGallery component.
  • Complete accordion features.
  • Make decision on auto-envelope for dev preview.
  • LIghtbox components.
  • Start reducing AMP Runtime reliance on the measuring code.
All details on GitHub

Bento

Status Update Wed Sep 02 2020

What was accomplished

  • amp-video complete.
  • MediaSession support for videos: close to be done.
  • VideoIframe component has been started.
  • Loading model is redone via loading prop.
  • layout=responsive implementation via aspect-ratio CSS completed
  • social-share: fixed error handling
  • social-share: refresh of all styles and icons completed
  • date-countdown: AMP mapping in progress
  • JSS support has been completed on the infra side.
  • finished analysis for JSS competitors: Emption, Goober, and Aphrodite.
  • Instagram: code complete, tests WIP.
  • Improved AMP mode in the storybook to make parameter selections sticky.
  • Shadow DOM support: automatically discover slot distribution changes.
  • Multi-attribute parsing supported where different input formats can map to a single Preact prop.
  • Fixed Closure bugs on destructured property typing.
  • Auto-envelope experimentation in progress to execute extensions w/o v0.js.

Lessons learned

All details on GitHub

What's next

  • Working on dev preview launch plans.
  • Start templates-via-JSX design.
  • Start YouTube component.
  • Start Accordion component.
  • Complete date-countdown and instagram support.
All details on GitHub

Bento

Status Update Tue Sep 01 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 03 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 Thu Jul 02 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 Tue Jun 02 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