Roadmap Proyek AMP

What was accomplished

Lessons learned

What's next

Accomplished

• Justin
• Progress on Bento auto-envelope
• Make auto-injected script tags parse as modules in ESM
• Fix to Closure Compiler to correctly support sequence expressions in destructures
• Jake
• Bento styling
  • Design review (https://docs.google.com/document/d/1EiBj4Hy7cxhgl8GXw-8FeW7zIyL8reRI7NC9dJB7SR0)
  • Deterministic classname generation and watch mode support (https://github.com/ampproject/amphtml/pull/30065, https://github.com/ampproject/amphtml/pull/30115)
• Fixes:
  • Teach babel-plugin-tests how to pass on Windows machines (https://github.com/ampproject/amphtml/pull/30165)
  • Protocol adapters: support load-more attr (https://github.com/ampproject/amphtml/pull/30101)
  • Resources system IntersectionObserver experiment bugs:
  • Using outdated measure: https://github.com/ampproject/amphtml/pull/30188
  • Fill layout skips layout: https://github.com/ampproject/amphtml/pull/30167

Next

• Justin
• Finish auto-envelope, write doc
• Begin amp-img SSR tests
• Update perf metrics to handle SSR experiments
• Jake
• Dockerized optimizer: blocked on reviews
• Integration tests for layout sizing during build
• Wrap up Bento styling work
• Research better experiment analytics for runtime/internal csi

Accomplished

• Justin

  • amp-img SSR CLs have landed

    • Made sure SSR'd <img> is visible: https://github.com/ampproject/amphtml/pull/29955

  • Various bug fixes

    • https://github.com/ampproject/amphtml/pull/29951

    • https://github.com/ampproject/amphtml/pull/29950

    • https://github.com/ampproject/amphtml/pull/29947

  • Worked on auto-envelope

• Jake

  • 🎉Launched strict experiment (ampproject/amphtml/pull/29929)

  • Merged bento styling babel transform (ampproject/amphtml/pull/29777)

  • 📈  Opened up pull request to add Dockerized AMP Optimizer into amp-toolbox

  • Fixes

    • <amp-script>: don’t assign onerror if init failed (ampproject/amphtml/pull/29875)

    • <amp-script>: improved error messages (ampproject/amphtml/pull/29875)

    • worker-dom: dirty flag for value hydration (ampproject/worker-dom/pull/913)

    • worker-dom: .click() support (ampproject/worker-dom/pull/919)

• Will

  • Left wg-runtime. Farewell Will! 🎺😿


Learned

Next

• Justin

  • Finish auto-envelope

  • Fix follow ups with amp-img SSR

  • Fixit:

    • amp-bind SSR support in extension

• Jake

  • Get AMP Optimizer through amp-toolbox review

  • Bento Styling: 

    • Design review

    • Deterministic classname generation

    • Run through css optimizer / decide on jss plugins

  • fixits: 

    • <amp-script> validator extension bug: ampproject/amphtml#29457

What was accomplished

• amp-img SSR work is almost done, cleaning up the code now before creating CL
• Bento Reviews for Context and Styles
• TC39: logical assignment operators will be in ES2021
• Merged protocol-adapters for amp-list, amp-script[nodom] (https://github.com/ampproject/amphtml/pull/29329, https://github.com/ampproject/amphtml/pull/29541)
• "nodom" binary for worker-dom (https://github.com/ampproject/worker-dom/pull/882)
• Investigating 1% ads query regression in intersect-resources and created another candidate fix

Lessons learned

• For changes that may affect ads, start minimal and incrementally diverge instead of starting with a big refactor and paring down

What's next

• Auto-envelope pattern for Bento binaries
• Fix more TODOs with amp-img SSR
• Support <link rel=preload imagesrcset>
• Support auto srcset generation for SSR'd <img>
• Cleanup code paths
• Research inputmask bug to see if related to the strict experiment
• Follow up on removeCalcTask & content prioritization. CSI effects seemed negligible.
• Documentation for new amp-list/amps-script features and launch experiment: ampproject/amphtml#29603
• Implement Bento JSS Proposal
• Fixit:
• Clean up "layoutbox-invalidate-on-scroll" experiment ampproject/amphtml#25203
• amp-bind: remove the need for treewalking ampproject/amphtml#27590
• Fixit:
• <amp-script> improve hash error: ampproject/amphtml#29614
• <amp-script> validator extension bug: ampproject/amphtml#29457
• Fixit: AMP.navigateTo
• ampproject/amphtml#26248
• ampproject/amphtml#24798

What was accomplished

Justin

• CL reviews for amp-img ssr work, finding bugs in other go transformers
• Helped with debugging cherry-pick issues
• https://github.com/ampproject/amphtml/pull/29771
• https://github.com/ampproject/amphtml/pull/29775
• Cleaned up 2 ancient experiments (fixit!)
• https://github.com/ampproject/amphtml/pull/29728
• https://github.com/ampproject/amphtml/pull/29665
• Worked on auto-envelope, but unhappy with it
• Bundling 2 element implementations seems wasteful for amp-mode, and bundling specific code in bento-mode
• Created experimental cache transform for amp-bind

Jake

• 🎉 Launched protocol adapters (ampproject/amphtml/pull/29689)
• 📈 Made headway on bento css integration (ampproject/amphtml/pull/29713, ampproject/amphtml/pull/29794)
• 🔎 Made a prototype amp-optimizer docker image
• 🛠️ Fixes:
• inputmask incorrect usage static this: of ampproject/amphtml/pull/29646
• inputmask attempting to mask svgs: ampproject/amphtml/pull/29624
• <amp-script> improve hash error: ampproject/amphtml#29614

Will

• Rolled out “intersect-resources” to 100% prod
• Fixed a couple email-related bugs in amp-list (ampproject/amphtml#29726)
• Fix-it bugs related to AMP.navigateTo

Lessons learned

• In our error logs, we get a referrer url which can significantly help reproducing issues

What's next

Justin

• Finish CL of amp-img ssr and related transformers
• Finish auto-envelope for Bento
• Update amp-bind code to support SSR transform

Jake

• Continue work on bento css + amp-optimizer docker image
• 🤞 Launch StrictCompilation
• fixits:
• <amp-script> validator extension bug: ampproject/amphtml#29457

Will

• Transition plan
• Fix-it: clean up old TODOs

What was accomplished

Lessons learned

What's next

What was accomplished

• Merged PRs for validator to support amp-img SSR
• Code reviews for Bento, including Context APIs in AMP code
• Merged experiment to remove calcTaskTimeout (https://github.com/ampproject/amphtml/pull/28453/commits)
• Merged server experiment for compiling v0/extensions in strict mode (https://github.com/ampproject/amphtml/pull/28793)
• Merged cross-document navigation for AMP.goBack (https://github.com/ampproject/amphtml/pull/26585)
• Fixed too-small rootMargin vs. loadRect in “intersect-resources”

Lessons learned

• Kittens are cute

What's next

• Finishing amp-img SSR cache transforms
• Prototyping Bento "auto-envelope" pattern to support components in/out of AMP runtime
• Wrap up in-progress worker-dom feature work
• Lite binary for worker-dom (https://github.com/ampproject/worker-dom/pull/882)
• Protocol adapters (https://github.com/ampproject/amphtml/pull/29329)
• Continue investigating the ~1% regression in ad queries for "intersect-resources"

What was accomplished

Lessons learned

What's next

Recap

Justin
 * Opened PR for deferring buildCallback
 * Doesn't affect LCP as much as we thought, maybe it'll help FID
 * PR Reviews


Jake
 * Submitted a fix so that we don’t send documentHeight until it is ready. Potentially two bugs with one stone: (b/154603596, b/143078110).
 * In-progress
 * New metrics eer/ser (https://github.com/ampproject/amphtml/pull/28401)
 * Improved e2e viewer tests (https://github.com/ampproject/amphtml/pull/28531).
 * Adding runtime pages to the gulp performance (https://github.com/ampproject/amphtml/pull/28503).
 * Protocol adapters worker-dom implementation (https://github.com/ampproject/worker-dom/pull/850).


Will
 * intersect-resources
 * Candidate fix for idle render merged, pending ads metrics


Learned

• Use DCL to normalize metrics like LCP
 


Next

Justin
 * Finish buildCallback PR
 * Finally write doc about WorkerDOM/amp-bind in same-origin iframe (with sync messaging)
 * Look into removing Owners System, replace with InOb polyfill


Jake
 * IE11 Minimum support explorations
 * Continue many in-progress PRs with the goal of eventually optimizing
 * Load rect
 * Resource loading prioritization


Will
 * intersect-resources
 * Prod rollout and manual QA test plan

Recap

• Justin

  • Auto link stacktrace frames to code in bug reports

  • Added support for module/nomodule script pairs

  • Fixed devAssert/userAssert for closure's type narrowing

  • Persistent browserify caching!

  • Helped remove AmpPass, various fixes to infra builds

  • Added linting to chai assertions, fixed tests

  • Added a few missing unresolved element CSS styles

  • Made blurry-image non-interactable when it's opacity: 0.

  • Fixed CEv1 in Safari 9 and Yandex

  • Made getMode().test and friends DCE in prod (again)

• Jake

  • documentHeight bugfix, unit test, and integration test.

  • amp-script worker exceptions caught as user errors instead of dev errors. 

  • Protocol Adapters unit tests and manual e2e test.

  • Small improvements to the e2e testing flow (--extensions and --fast options)

• Will

  • “intersect-resources” experiment

    • Fixed ads regression

    • Looks like 1-2% LCP, 5-6% FID improvement

  • Reviewed to-date progress on code mauve in CSI data


Learned

• Persistent module state in unit tests is tricky

• Old browsers still get a small (but noticeable) percentage in traffic

  • Does this effectively constrain our true browser support set?


Next

• Justin

  • Hoping to add persistent file transform cache to Babel

  • Deferring buildCallback (should be easier, now that I've looked into it)

    • See if any elements expect really early buildCallback

• Jake

  • New metric for in-viewport but not rendered latency

  • worker-dom Protocol Adapters PRs

  • IE11 Minimum support explorations

• Will

  • Figure out and run a manual QA plan and start prod rollout 🤞

Recap

• Justin

  • Fixed CEv1 in IE 11, again

  • Fixed integration test in IE11, added simple amp-img test

  • Opened PR to use localName/tagName based on whether using uppercase/lowercase

  • Quick Promise.resolve() transform to share instance

  • Banning newer ES features, removingPromise.p.finally use

• Jake

  • Mauve related

    • Removed force option from toggleLoading. Afterwards: fixed bugs it caused (gh/27508, gh/27905)

    • Removed unnecessary measures from the toggleLoading calls in hide() and the video-player (gh/27730, gh/27654, gh/27760, )

  • Other

    • Implemented draft of protocol adapter support in worker-dom (gh/worker-dom/850)

    • Found/fixed an iOS bug where we were missing a needed measure (gh/27729)

    • amp-script: improved illegal mutation messaging (gh/27834)

    • Added [data-tweetid] to the validator (gh/27787)

• Will

  • Finished IntersectionObserver test plan, fixed a few more edge cases, and enabled in canary (4/28)

  • Wrapped up some email-related tasks in amp-list

  • Found documentHeight/premature remeasure bug


Learned

• We need an integration test for documentHeight for email (do we have any for other viewer messages?)

• Closure's Conformance config won't ban prototype accesses with BANNED_NAME


Next

• Justin

  • Finish connectedCallback PR

    • Reduce dom mutations

    • Defer buildCallback

• Jake

  • Mauve

    • Fix documentHeight bug

    • Runtime perf test pages

  • Other

    • Protocol adapters

  • Discuss: intern/step

• Will

  • Try out IntersectionObserver in canary

What was accomplished

• First PreactBaseElement was merged!
• Minimal CEv1 Polyfill launched
• Work on IntersectionObserver based Resources, now enabled in experimental build
• Updated enabling development mode for amp-script
• amp-state can now be the source for an amp-list
• Using performance.now for metrics deltas
• DomPurify is now much faster for pages that have multiple amp-mustache templates
• Caching amp-access evaluations, for faster evaluations
• Fixed sourcemaps, multiple times.
• Fixed iOS scrolling issues
• Removed remeasure from toggleLoading

Lessons learned

• The venerable 2015 MBP is slowly showing its age…
• Verify Resource prototypes on real pages

What's next

• Delaying BaseElement construction until connectedCallback
• Speeding/prioritizing connectedCallback/buildCallback
• Protocol adapters for remote data
• InOb verification and fixes
• More Perf work!

Recap

• Justin

  • TC39

  • Reviewed with Babel minifier transforms

  • Fixing sourcemaps (again)

  • Opened PR to delay constructing BaseElement construct until connectedCallback

• Jake

  • optimization: removed remeasure from toggleLoading (gh/27482)

  • refactor: slightly cleaned up toggleLoading flow (gh/27527)

  • more toggleLoading changes in-flight

• Will

  • IntersectionObserver testing & edge cases

  • Other stuff


Learned

• Justin needs to get a new computer


Next

• Justin

  • Land delaying BaseElement construction to connectedCallback

  • Make connectedCallback less expensive 

• Jake

  • Complete inflight changes to toggleLoading

  • Create unit tests for loader.js and amp-loader.js

  • Protocol adapters

  • Performance

    • Skip amp-bind tree walking

    • Reduce cost of reparenting

    • Prioritize layout of in-viewport elements

• Will

  • Finish testing & enable IntersectionObserver in canary

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

Lessons learned

What's next

What was accomplished

• Custom Elements v1 shipped
• With IE11 cherry-pick
• CL out for non-polyfill in supported browsers
• Resources now invalidates children of Scroll boxes
• Goal after of Layers failure
• CL for removing query params before navigate (ITP 2.3)
• CLs for Action Trust
• Actions should propagate the trust they receive
• Breaking async cycles

Lessons learned

• IE11's HTMLElement class does not extend from Function
• So, HTMLElement.call doesn't exist
• Errors in cross-origin scripts aren't reported, still.

What's next

• @choumx away at summit & training
• @jridgewell on release duty
• Adding crossorigin=anonymous to AMP scripts

What was accomplished

• AMP Contributor Summit

Lessons learned

• ACS Debrief
• Let’s improve documentation

What's next

• 📧Email
• Recursive XHR issue
• Unified sender registration
• SSR-dependent “documentHeight” message
• 🍱React-based AMP components
• Launch plan
• ⚙Runtime
• CSI migration design

What was accomplished

• [WIP] React-based AMP components
• amp-script: amp-state [WIP], improved docs
• Fixed DOM clobbering of AMP globals

What's next

• React-based AMP components
• amp-script + amp-state

What was accomplished

• Opt in for individual AMP experiments now uses LocalStorage instead of cookies.
• Tons o' work on amp-bind
• Perf improvements
• amp-script launched!
• Inline scripts support
• Canvas support
• LocalStorage support
• AMP setState support
• 1-pass build work
• Concatenate and prune intermediate module dependencies into a single final JS file
• Fix sourcemaps
• Fixit week:
• Faster ads/analytics configuration parsing via JSON.parse
• amp-list DOM diffing instead of innerHTML
• Bento
• Exploring using React internally to simplify components
• Exploring how to wrap React in AMP and "Bento" modes
• Layers was disabled and removed

What's next

• AMP Contributor Summit!
• Continuing Bento explorations
• Better support for AMP Emails

What was accomplished

What's next

What was accomplished

• Fix-it
• Launch amp-script
• jsonConfiguration()
• amp-list: DOM diffing and error UI

Lessons learned

• Code branching on const private props are not DCE’d

/** @const */
this.nope_ = false;

if (this.nope_) {
  foo(); // Still bundled.
}

What's next

• amp-script + amp-state

What was accomplished

• amp-script: Local storage, better reference docs
• worker-dom: Unwrap author script, upgrade TS, bug fixes and code clean up
• 1-pass: Source map compat for intermediate bundles
• AMP4EMAIL: Investigate mustache rules at runtime
• amp-bind: Fix bug in canary
• @jridgewell on release duty

Lessons learned

• Read APIs carefully for DOM traversal edge cases

What's next

• Launch amp-script
• amp-script: Actions/events as component interface
• Bento: Start design and prototyping for service decoupling
• AMP4EMAIL: Error UI for amp-list and DOM diffing