AMP

Lộ trình cho Dự án 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

Bento

Status Update Fri Oct 01 2021

What was accomplished 🍱

  • bento cdn & npm builds + bento css
  • documentation
  • e2e testing
  • knowledge transfer
All details on GitHub

What's next ⏩

  • amp-jwplayer
  • amp-analytics
  • more components
All details on GitHub

Bento

Status Update Thu Sep 02 2021

What was accomplished 🍱

  • amp-reddit: testing
  • amp-iframe: implement viewability feature
  • amp-mathml: converted to Bento
  • amp-lightbox-gallery: bug fixes
  • worker-dom: improving performance
  • more documentation!
All details on GitHub

What's next ⏩

  • amp-dailymotion: converting to bento
  • amp-analytics: converting to bento
  • amp-jwplayer: converting to bento
  • publishing bento packages to npm
All details on GitHub

Bento

Status Update Wed Sep 01 2021

What was accomplished 🍱

Components

  • BentoDailymotion code complete
  • useIntersectionObserver custom hook merged and in use by amp-timeago, amp-iframe
  • BentoCarousel bug fixes in RTL support
  • Added support for toggling placeholder and fallback and consumed in AMP mode ampproject/amphtml#35821
  • Renamed Bento Preact components to be Bento prefixed
All details on GitHub

Tooling

  • Ongoing Storybook migration from knobs (deprecated) to controls
  • Storybook doc updates to testing.md and styling recommendations
  • Fix for eslint-plugin-react where it would consider lowercase names (<div>) as used variables https://github.com/yannickcr/eslint-plugin-react/pull/3070
  • README.md files created for npm publishing for existing Bento components

What's next ⏩

  • Build extension twice for Bento vs. AMP Web Components (bento-.js and amp-.js)
  • Last mile bits for documentation following last sprint
  • amp-mathml/bento-mathml/BentoMathml continued progress
  • amp-dailymotion/bento-dailymotion continued progress
All details on GitHub

Bento

Status Update Mon Aug 02 2021

General updates 🆕

  • Welcome to the team @kvchari 🎉 🎉 🎉

What was accomplished 🍱

  • amp-audio implementation has begun
  • amp-brightcove port complete
  • amp-copy implementation has begun
  • amp-dailymotion port in progress (Preact layer done)
  • amp-iframe investigation against native iframe - findings
  • amp-lightbox-gallery port complete, barring gestures feature
  • amp-sidebar port complete, also barring gestures feature
  • amp-render launch follow-up bug fixes
  • amp-twitter placeholder bug fix
All details on GitHub

What's next ⏩

  • amp-analytics early investigations and design
  • amp-audio continued progress
  • amp-copy discussion at design review
  • amp-dailymotion port in progress (AMP layer)
  • amp-iframe continued progress
  • Investigate existing gestures library and solutions going forward in Bento
All details on GitHub

Bento

Status Update Sun Aug 01 2021

What was accomplished 🍱

  • Auto-envelope is ready
  • amp-analytics:0.1 feature scoping and design discussions
  • amp-facebook-* components now valid AMP
  • amp-iframe runtime-less dynamic resizing via IntersectionObserver in progress https://github.com/ampproject/amphtml/pull/35566
  • amp-ima-video in progress
  • Preparing example documentation for React/Preact and Bento modes
  • ProxyIframeEmbed extrapolation from AMP-specific runtime dependencies (build constants, getMode, etc.)
All details on GitHub

What's next ⏩

  • amp-analytics Services inventory and investigation
  • amp-dailymotion WIP
  • amp-iframe WIP
  • amp-ima-video WIP
  • amp-reddit WIP
  • React/Preact compatibility improvements
All details on GitHub

Bento

Status Update Wed Jul 07 2021

What was accomplished

  • auto envelope changes to use restrictive methods
  • IE polyfill for new Set
  • amp-lightbox-gallery basic, grouping, captioning, and uniqueness features
  • forceChangeHeight -> attemptChangeHeight in Bento components for the AMP layer
  • started on amp-iframe
  • amp-render final launch bits, including resizeToContents, validations, and blog
  • amp-tiktok is merged
  • getting Bento compiler thread safe
  • Remove amp-viz-vega
  • Consolidating amp-facebook discussed at design review + implementation
  • overflow support in PreactBaseElement
All details on GitHub

What's next

  • taking over GA4
  • land auto-envelope, going to split work to restrictive access of this methods
  • amp-lightbox-gallery video support, analytics events, and validations
  • AMP 0.1 component changes over the next few weeks to extract from their buildCallbacks - separating pieces that modify DOM, including amp-fit-text
  • amp-dailymotion implementation
All details on GitHub

Bento

Status Update Mon Jun 07 2021

What was accomplished

General - Improving performance of ...rest object spread operator: - Share objectWithoutProperties helper across modules (size reduction, ampproject/amphtml#34601) - Hoist omitted keys (runtime performance, babel/babel#13384) - Bento onboarding doc is a central location for Bento-related resources - npm automated publishing is live now

Components - amp-dailymotion implementation has begun - Facebook and amp-facebook now code complete - amp-render last mile bits: - binding support - documentation - remaining TODOs and bug fixes - Unit tests for LightboxGallery, Facebook, amp-fit-text - Toolbar addition to Sidebar merged

All details on GitHub

What's next

General - Auto envelope (so Bento components will be usable without v0 on the page!) - 3p Iframe Bento Contribution Guide - src/core migration continues, we may be able to start type checking Bento components this sprint

Components - continued work on amp-dailymotion - VideoProxyIframe for amp-ima-video implementation - amp-facebook-page and amp-facebook-like - LightboxGallery UI features

All details on GitHub

Bento

Status Update Sun May 02 2021

What was accomplished

  • amp-facebook consolidating internal implementations and testing in progress
  • amp-render
  • fallback Support
  • placeholder Support
  • validation
  • amp-sidebar
  • preact SSR implementation of Toolbar
  • NPM Publishing
  • Initial conversations with Dev Rel for NPM Readme creation
  • 13 components completed conversion required for publishing (latest was amp-base-carousel)
All details on GitHub

What's next

  • amp-render
  • loading indicator
  • support for binding
  • amp-sidebar
  • amp SSR implementation of Toolbar
  • NPM Publishing
  • Convert two remaining components from Dev Preview
  • Updates needed to package file and generation scripts
All details on GitHub

Bento

Status Update Sat May 01 2021

What was accomplished

  • Guide to building a Bento video player
  • Support amp make-extension flag --nojss
  • amp-video-iframe merged with validation
  • amp-vimeo merged with validation
  • amp-ima-video port in progress
  • Requires restructuring ProxyIframeEmbed for combined use with VideoBaseElement
  • Changes to iframe loaded by both versoins: structured children and uniform method names
  • OWNERS change and test cleanup
  • amp-ima-video user experience improvements
  • Investigate introducing sandbox attribute to amp-facebook-* components
  • Preact Twitter component and Storybooks merged
  • npm publishing
  • 10 components on npm i.e. amp-fit-text
  • 4 additional components require file structure conversion to publish
  • amp-sidebar toolbar Preact implementation merged
  • (Invalid AMP): Support for img in components that integrate with amp-img in progress
All details on GitHub

What's next

  • Continue in-progress tasks:
  • amp-ima-video
  • amp-sidebar toolbar
  • img support
  • npm publication
  • Bento video players to pass consent with the consent Service in AMP layer
  • Bento port of amp-brightcove
  • Investigate safely removing examples/ which are exhaustively covered via Storybook samples
  • Bento port of other amp-facebook components
  • amp-render support for placeholder
All details on GitHub

Bento

Status Update Fri Apr 02 2021

What was accomplished

  • amp-facebook-comments initial implementation
  • amp-render
  • xssi-prefix and subobject support
  • URL replacement substitutions in review
  • amp-sidebar toolbar feature discussed in design review
  • amp-video-iframe implementation in review
  • amp-vimeo implementation
  • Validation contributions for developer preview components
  • Removed concept of a "lite" viewer
  • Extension generator implementation is now shared for Bento and Classic.
  • Chore: Deprecating Storybook use of withAlly and replaced with updated config
  • Chore: Updated some OWNERS files to belong to Bento/Components
All details on GitHub

What's next

  • amp-facebook-* follow-up tasks and components:
  • Try including sandbox (previously excluded for these only)
  • Branch component embeds by enum rather than custom element tag name
  • amp-render
  • placeholder and fallback support
  • layout=container
  • amp-sidebar
  • investigate CLS
  • execute on toolbar feature with design review learnings
  • manually publishing Bento components to npm
  • Deep dive for handling 3rd party issues and contributions
  • Design Review for compiling mustache into JSX
  • Reworking autoplay detection.
  • Next Bento video player, likely amp-brightcove or amp-dailymotion
All details on GitHub

Bento

Status Update Thu Apr 01 2021

What was accomplished 🍱 ✅

  • amp-render bindable src PR merged
  • Collaboration with caching team on validator changes for developer preview components (still under experiment)
  • Storybook upgraded to version 6
  • Display locking removed from amp-accordion due to chrome team change in API
  • Early Bento feedback(technical/ product) here
  • Bento Compiler in security and privacy review
  • Presented on Shadow DOM on Deep Dive 4/6 - slides, video
All details on GitHub

What's next ⏩

  • Continue Validator work on all developer preview components (still under experiment)
  • amp-render support for object and amp-render
  • amp-sidebar toolbar feature in AMP mode
  • amp-twitter ongoing work
  • amp-next-page initial assessment
All details on GitHub

Bento

Status Update Tue Mar 02 2021

What was accomplished 🍱 ✅

  • Automated design review issue creation
  • Started validating developer preview components (still under experiment)
  • Wrapped up CLS investigations on carousel components
  • Introduced scheduling for Bento components, i.e. lightbox and sidebar
  • Merged Sidebar Toolbar feature in Preact mode
  • Now generating npm binaries during build/dist for npm publishing
  • amp-render initial implementation with support for remote, bindable src and amp-state protocol
  • Prototype for amp-twitter
All details on GitHub

What's next ⏩

  • Working with infra 👋 🏗️ to release npm binaries
  • Validate all developer preview components (still under experiment)
  • amp-sidebar toolbar feature in AMP mode
  • amp-render support for amp-script protocol and placeholder
  • amp-twitter ongoing work
  • Tune in for shadow DOM demo in next week's deep dive
All details on GitHub

Bento

Status Update Mon Mar 01 2021

What was accomplished 🍱 ✅

  • amp-fit-text server-side experiment to measure performance with v0
  • amp-render base implementation
  • amp-sidebar toolbar design
  • Investigating CLS in amp-carousel, amp-base-carousel, and related

Lessons learned 👩‍🎓

All details on GitHub

What's next ⏩

  • Bento npm publishing
  • amp-render
    • loading from amp-script
    • placeholder support
  • Fixing some carousel CLS issues
  • First look at amp-twitter
  • Video docking active development
All details on GitHub

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 Mon Apr 06 2020

What was accomplished 🍱 ✅

  • amp-render bindable src PR merged
  • Collaboration with caching team on validator changes for developer preview components (still under experiment)
  • Storybook upgraded to version 6
  • Investigating a visual diff test that outputs CLS changes
  • Discussion with bento.dev and legal for naming
  • Reviewing element that may cause issues for existing / future bento migrations
All details on GitHub

What's next ⏩

  • Remove existing implementation of display locking per changes to chromium team's support
  • Working with infra 👋 🏗️ to release npm binaries
  • Validate all developer preview components (still under experiment)
  • amp-sidebar toolbar feature in AMP mode
  • amp-render support for amp-script protocol and placeholder
  • amp-twitter ongoing work
  • Tune in for shadow DOM demo in today's deep dive
All details on GitHub