خارطة طريق مشروع 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 2021What was accomplished 🍱
- bento cdn & npm builds + bento css
- documentation
- e2e testing
- knowledge transfer
Bento
Status Update Thu Sep 02 2021What was accomplished 🍱
amp-reddit
: testingamp-iframe
: implement viewability featureamp-mathml
: converted to Bentoamp-lightbox-gallery
: bug fixesworker-dom
: improving performance- more documentation!
What's next ⏩
amp-dailymotion
: converting to bentoamp-analytics
: converting to bentoamp-jwplayer
: converting to bento- publishing bento packages to npm
Bento
Status Update Wed Sep 01 2021What was accomplished 🍱
Components
BentoDailymotion
code completeuseIntersectionObserver
custom hook merged and in use byamp-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 progressamp-dailymotion
/bento-dailymotion
continued progress
Bento
Status Update Tue Aug 03 2021What was accomplished 🍱
amp-date-display
: SupporttimeZoneName
andtimeZoneNameShort
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 hookamp-tiktok
: fixing CLS issuebento-dailymotion
: wipbento-reddit
: wip- fix Placeholder / Fallback toggling across Bento components
Bento
Status Update Mon Aug 02 2021General updates 🆕
- Welcome to the team @kvchari 🎉 🎉 🎉
What was accomplished 🍱
amp-audio
implementation has begunamp-brightcove
port completeamp-copy
implementation has begunamp-dailymotion
port in progress (Preact layer done)amp-iframe
investigation against native iframe - findingsamp-lightbox-gallery
port complete, barring gestures featureamp-sidebar
port complete, also barring gestures featureamp-render
launch follow-up bug fixesamp-twitter
placeholder bug fix
What's next ⏩
amp-analytics
early investigations and designamp-audio
continued progressamp-copy
discussion at design reviewamp-dailymotion
port in progress (AMP layer)amp-iframe
continued progress- Investigate existing gestures library and solutions going forward in Bento
Bento
Status Update Sun Aug 01 2021What was accomplished 🍱
- Auto-envelope is ready
amp-analytics:0.1
feature scoping and design discussionsamp-facebook-*
components now valid AMPamp-iframe
runtime-less dynamic resizing viaIntersectionObserver
in progress https://github.com/ampproject/amphtml/pull/35566amp-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 investigationamp-dailymotion
WIPamp-iframe
WIPamp-ima-video
WIPamp-reddit
WIP- React/Preact compatibility improvements
Bento
Status Update Wed Jul 07 2021What was accomplished
- auto envelope changes to use restrictive methods
- IE polyfill for new Set
amp-lightbox-gallery
basic, grouping, captioning, and uniqueness featuresforceChangeHeight
->attemptChangeHeight
in Bento components for the AMP layer- started on
amp-iframe
amp-render
final launch bits, includingresizeToContents
, validations, and blogamp-tiktok
is merged- getting Bento compiler thread safe
- Remove
amp-viz-vega
- Consolidating
amp-facebook
discussed at design review + implementation overflow
support inPreactBaseElement
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
buildCallback
s - separating pieces that modify DOM, includingamp-fit-text
amp-dailymotion
implementation
Bento
Status Update Mon Jun 07 2021What 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
Bento
Status Update Sun May 02 2021What was accomplished
amp-facebook
consolidating internal implementations and testing in progressamp-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
Bento
Status Update Sat May 01 2021What was accomplished
- Guide to building a Bento video player
- Support
amp make-extension
flag--nojss
amp-video-iframe
merged with validationamp-vimeo
merged with validationamp-ima-video
port in progress- Requires restructuring
ProxyIframeEmbed
for combined use withVideoBaseElement
- 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 toamp-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 withamp-img
in progress
What's next
- Continue in-progress tasks:
amp-ima-video
amp-sidebar
toolbarimg
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 forplaceholder
Bento
Status Update Fri Apr 02 2021What was accomplished
amp-facebook-comments
initial implementationamp-render
xssi-prefix
and subobject support- URL replacement substitutions in review
amp-sidebar
toolbar feature discussed in design reviewamp-video-iframe
implementation in reviewamp-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
oramp-dailymotion
Bento
Status Update Thu Apr 01 2021What 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-renderamp-sidebar
toolbar feature in AMP modeamp-twitter
ongoing workamp-next-page
initial assessment
Bento
Status Update Tue Mar 02 2021What 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, bindablesrc
andamp-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 modeamp-render
support foramp-script
protocol andplaceholder
amp-twitter
ongoing work- Tune in for shadow DOM demo in next week's deep dive
Bento
Status Update Mon Mar 01 2021What was accomplished 🍱 ✅
amp-fit-text
server-side experiment to measure performance with v0amp-render
base implementationamp-sidebar
toolbar design- Investigating CLS in
amp-carousel
,amp-base-carousel
, and related
Lessons learned 👩🎓
What's next ⏩
- Bento npm publishing
amp-render
- loading from
amp-script
- placeholder support
- loading from
- Fixing some carousel CLS issues
- First look at
amp-twitter
- Video docking active development
Bento
Status Update Mon Mar 01 2021What was accomplished ✅
Fix it week 🔨
amp-youtube
supportscurrentTime
andduration
in imperative API https://github.com/ampproject/amphtml/pull/32804amp-selector
has stylistic support for hybriddisabled
+selected
state https://github.com/ampproject/amphtml/pull/32825amp-accordion
0.1
and1.0
respect pre-existingrole
attributes https://github.com/ampproject/amphtml/pull/32915amp-timeago
0.1
and1.0
migrated to latesttimeago.js
library (fromthird_party/
tonode_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, andamp-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/32936objstr
:- 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
- transform compiled output to
- 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 surecss/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 layeramp-sidebar
active development- video docking active development
- Analysis of
amp-fit-text
0.1
->1.0
auto upgrade performance implications
Bento
Status Update Mon Feb 01 2021What 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
Bento
Status Update Mon Feb 01 2021What 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
Bento
Status Update Tue Jan 05 2021What 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
Bento
Status Update Fri Jan 01 2021What 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
Bento
Status Update Mon Dec 07 2020What was accomplished
- Most of carousel baseline features completed
- Accordion: display locking completed.
- Imperative APIs: design completed.
- Troubleshooting IntersectionObserver spec problems.
Lessons learned
Bento
Status Update Mon Nov 09 2020What 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
Bento
Status Update Mon Nov 02 2020What was accomplished
amp-accordion
:- external API restructure
- accessibility attributes
amp-base-carousel
snap-align
feature to view slides either atstart
orcenter
of carousel viewportamp-lightbox
initial implementationamp-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
fromBaseElement
- 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
isdisplay: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 scrollingdir="rtl"
supportamp-selector
integration with forms
Bento
Status Update Fri Oct 02 2020What 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
withIntersectionObserver
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.
Bento
Status Update Mon Apr 06 2020What 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 modeamp-render
support foramp-script
protocol andplaceholder
amp-twitter
ongoing work- Tune in for shadow DOM demo in today's deep dive