The AMP Project Roadmap

What was accomplished 🍱

• bento cdn & npm builds + bento css
• documentation
• e2e testing
• knowledge transfer

What's next ⏩

• amp-jwplayer
• amp-analytics
• more components

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!

What's next ⏩

• amp-dailymotion: converting to bento
• amp-analytics: converting to bento
• amp-jwplayer: converting to bento
• publishing bento packages to npm

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

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

What was accomplished 🍱

• amp-date-display: Support timeZoneName and timeZoneNameShort
• amp-iframe: wrap iframe in shadow-dom and ContainWrapper
• fixed broken npm bento packages
• fixed sporadic render issues on SSR'd AMP pages

What's next ⏩

• Documentation Sprint
• useIntersectionObserver: custom hook
• amp-tiktok: fixing CLS issue
• bento-dailymotion: wip
• bento-reddit: wip
• fix Placeholder / Fallback toggling across Bento components

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

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

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.)

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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 👩‍🎓

• We have docs on how to format docs!

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

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

Lessons learned 👩‍🎓

• We can stop prettier from exploding the boilerplate code on HTML documents by disabling prettier for the <head> node.

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

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.

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

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

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

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

What's next

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

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

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

What was accomplished

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

Lessons learned

What's next

• Bug bash
• Sidebar

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

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

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.

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

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

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.

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

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