feat(demos): Add global `demoReady()` function #1919

acdvorak · 2018-01-10T05:11:18Z

For this PR, I only updated the button demo page to use the new demoReady() function. #1920 updates the remaining demo pages.

Also note that our packaged JS is now being loaded with async, which speeds up initial rendering time over slow connections. Using "Mid-tier mobile" network emulation in Chrome devtools, the TTFMP of the button demo page was reduced from ~10.5s to ~9.5s, and the time to render the Material icon font dropped from ~12s to ~10.5s.

For this PR, I only updated the button demo page to use the new demoReady() function. I will create a separate follow-up PR to update the remaining demo pages to use demoReady().

# DO NOT MERGE This PR depends on #1919. Please merge #1919 before merging this PR. Our packaged JS is now being loaded with `async`, which speeds up initial rendering time over slow connections. Using "Mid-tier mobile" network emulation in Chrome devtools, the [TTFMP](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) of the button demo page was reduced from ~10.5s to ~9.5s, and the time to render the Material icon font dropped from ~12s to ~10.5s.

codecov-io · 2018-01-10T05:36:10Z

Codecov Report

Merging #1919 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1919   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files          84       84           
  Lines        3721     3721           
  Branches      484      484           
=======================================
  Hits         3700     3700           
  Misses         21       21

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update aeed3bd...aed9e13. Read the comment docs.

bonniezhou · 2018-01-11T22:20:54Z

demos/ready.js

+  }
+
+  function startTimer() {
+    if (isReady() || timer) {


If I'm following the logic correctly...I think this conditional can be removed since

it seems like timer will always be null here

in the case where isReady() is true but timer is null, the handler will never get called

Good catch! Removed the isReady() check.

timer will only be null the first time addHandler() is called, so I think we need to keep that check.

bonniezhou

LGTM!

commit cc107d7 Merge: 5eae605 da34cc9 Author: Andy Dvorak <[email protected]> Date: Thu Jan 11 17:37:51 2018 -0800 Merge branch 'master' into feat/demos/ready-all # Conflicts: # demos/button.html # demos/checkbox.html # demos/dialog.html # demos/drawer/persistent-drawer.html # demos/drawer/temporary-drawer.html # demos/fab.html # demos/grid-list.html # demos/icon-toggle.html # demos/linear-progress.html # demos/list.html # demos/radio.html # demos/ready.js # demos/ripple.html # demos/select.html # demos/simple-menu.html # demos/slider.html # demos/snackbar.html # demos/tabs.html # demos/text-field.html # demos/theme/index.html # demos/toolbar/default-flexible-toolbar.html # demos/toolbar/menu-toolbar.html # demos/toolbar/waterfall-flexible-toolbar-custom-style.html # demos/toolbar/waterfall-flexible-toolbar.html # demos/toolbar/waterfall-toolbar-fix-last-row.html # demos/toolbar/waterfall-toolbar.html commit da34cc9 Author: Andrew C. Dvorak <[email protected]> Date: Thu Jan 11 17:09:46 2018 -0800 feat(demos): Add global `demoReady()` function (#1919) For this PR, I only updated the button demo page to use the new `demoReady()` function. #1920 updates the remaining demo pages. Also note that our packaged JS is now being loaded with `async`, which speeds up initial rendering time over slow connections. Using "Mid-tier mobile" network emulation in Chrome devtools, the [TTFMP](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) of the button demo page was reduced from ~10.5s to ~9.5s, and the time to render the Material icon font dropped from ~12s to ~10.5s. commit aeed3bd Author: Andrew C. Dvorak <[email protected]> Date: Thu Jan 11 16:18:24 2018 -0800 docs: Remove broken link from team README (#1940) Fixes #1929 commit ffff10c Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 15:47:46 2018 -0800 style(checkbox): Sort CSS so there is no descending specificity (#1939) commit 6b1cabb Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:34:51 2018 -0800 style(snackbar): Sort CSS so there is no descending specificity (#1936) commit fd0c675 Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:32:57 2018 -0800 fix(dialog): Remove code that does nothing (#1935) commit 3e5f6e0 Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:06:46 2018 -0800 fix(list): Fix the height of the dense avatar list (#1905) commit 2267e0f Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 12:15:15 2018 -0800 style(list): Sort CSS so there is no descending specificity (#1904) commit 271a05e Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 12:12:48 2018 -0800 style(grid-list): Sort CSS so there is no descending specificity (#1903) commit 103d9bd Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 09:38:23 2018 -0800 style(checkbox): Remove confusing nesting (#1874) commit 5eae605 Author: Andy Dvorak <[email protected]> Date: Wed Jan 10 10:18:26 2018 -0800 WIP: Remove arrow function for IE 11

commit 738c81c Merge: d51d2e9 d62beff Author: Andy Dvorak <[email protected]> Date: Fri Jan 12 14:05:58 2018 -0800 Merge remote-tracking branch 'origin/master' into feat/demos/ready-all # Conflicts: # demos/theme/index.html commit d51d2e9 Author: Andy Dvorak <[email protected]> Date: Fri Jan 12 14:05:33 2018 -0800 WIP: Squashed commit of the following: commit d62beff Author: Andrew C. Dvorak <[email protected]> Date: Fri Jan 12 12:42:09 2018 -0800 chore(demos): Remove ripple examples from theme page (#1954) Ripple isn't an actual component, and other components on the page already have ripples, so there's no need for separate ripple examples on the page. commit 145217c Author: Will Ernest <[email protected]> Date: Fri Jan 12 09:01:55 2018 -0800 chore(select): Remove multi-select from mdc-select. (#1917) BREAKING CHANGE: Removes mdc-multi-select from the mdc-select package. Use lists to create components that allow multiple items to be selected. commit d62beff Author: Andrew C. Dvorak <[email protected]> Date: Fri Jan 12 12:42:09 2018 -0800 chore(demos): Remove ripple examples from theme page (#1954) Ripple isn't an actual component, and other components on the page already have ripples, so there's no need for separate ripple examples on the page. commit 145217c Author: Will Ernest <[email protected]> Date: Fri Jan 12 09:01:55 2018 -0800 chore(select): Remove multi-select from mdc-select. (#1917) BREAKING CHANGE: Removes mdc-multi-select from the mdc-select package. Use lists to create components that allow multiple items to be selected. commit cc107d7 Merge: 5eae605 da34cc9 Author: Andy Dvorak <[email protected]> Date: Thu Jan 11 17:37:51 2018 -0800 Merge branch 'master' into feat/demos/ready-all # Conflicts: # demos/button.html # demos/checkbox.html # demos/dialog.html # demos/drawer/persistent-drawer.html # demos/drawer/temporary-drawer.html # demos/fab.html # demos/grid-list.html # demos/icon-toggle.html # demos/linear-progress.html # demos/list.html # demos/radio.html # demos/ready.js # demos/ripple.html # demos/select.html # demos/simple-menu.html # demos/slider.html # demos/snackbar.html # demos/tabs.html # demos/text-field.html # demos/theme/index.html # demos/toolbar/default-flexible-toolbar.html # demos/toolbar/menu-toolbar.html # demos/toolbar/waterfall-flexible-toolbar-custom-style.html # demos/toolbar/waterfall-flexible-toolbar.html # demos/toolbar/waterfall-toolbar-fix-last-row.html # demos/toolbar/waterfall-toolbar.html commit da34cc9 Author: Andrew C. Dvorak <[email protected]> Date: Thu Jan 11 17:09:46 2018 -0800 feat(demos): Add global `demoReady()` function (#1919) For this PR, I only updated the button demo page to use the new `demoReady()` function. #1920 updates the remaining demo pages. Also note that our packaged JS is now being loaded with `async`, which speeds up initial rendering time over slow connections. Using "Mid-tier mobile" network emulation in Chrome devtools, the [TTFMP](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) of the button demo page was reduced from ~10.5s to ~9.5s, and the time to render the Material icon font dropped from ~12s to ~10.5s. commit aeed3bd Author: Andrew C. Dvorak <[email protected]> Date: Thu Jan 11 16:18:24 2018 -0800 docs: Remove broken link from team README (#1940) Fixes #1929 commit ffff10c Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 15:47:46 2018 -0800 style(checkbox): Sort CSS so there is no descending specificity (#1939) commit 6b1cabb Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:34:51 2018 -0800 style(snackbar): Sort CSS so there is no descending specificity (#1936) commit fd0c675 Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:32:57 2018 -0800 fix(dialog): Remove code that does nothing (#1935) commit 3e5f6e0 Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 13:06:46 2018 -0800 fix(list): Fix the height of the dense avatar list (#1905) commit 2267e0f Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 12:15:15 2018 -0800 style(list): Sort CSS so there is no descending specificity (#1904) commit 271a05e Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 12:12:48 2018 -0800 style(grid-list): Sort CSS so there is no descending specificity (#1903) commit 103d9bd Author: Lynn Jepsen <[email protected]> Date: Thu Jan 11 09:38:23 2018 -0800 style(checkbox): Remove confusing nesting (#1874) commit 5eae605 Author: Andy Dvorak <[email protected]> Date: Wed Jan 10 10:18:26 2018 -0800 WIP: Remove arrow function for IE 11

feat(demos): Add global demoReady() function

9d9d858

For this PR, I only updated the button demo page to use the new demoReady() function. I will create a separate follow-up PR to update the remaining demo pages to use demoReady().

acdvorak mentioned this pull request Jan 10, 2018

feat(demos): Update remaining demo pages to use demoReady() #1920

Merged

acdvorak and others added 2 commits January 10, 2018 11:19

WIP: Remove arrow function for IE 11

563422f

Merge branch 'master' into feat/demos/ready-js

7d01ef4

bonniezhou suggested changes Jan 11, 2018

View reviewed changes

acdvorak and others added 2 commits January 11, 2018 16:13

WIP: Remove redundant isReady() check and blank line

727d6e6

Merge branch 'master' into feat/demos/ready-js

b0fa695

bonniezhou approved these changes Jan 12, 2018

View reviewed changes

Merge branch 'master' into feat/demos/ready-js

aed9e13

acdvorak merged commit da34cc9 into master Jan 12, 2018

acdvorak deleted the feat/demos/ready-js branch January 12, 2018 01:09

This was referenced Jan 17, 2018

Text field demo site has "Uncaught ReferenceError: mdc is not defined" error #1808

Closed

demo(text-field): Move script into head #1636

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(demos): Add global `demoReady()` function #1919

feat(demos): Add global `demoReady()` function #1919

acdvorak commented Jan 10, 2018 •

edited

Loading

codecov-io commented Jan 10, 2018 •

edited

Loading

bonniezhou Jan 11, 2018

acdvorak Jan 12, 2018

bonniezhou left a comment

feat(demos): Add global demoReady() function #1919

feat(demos): Add global demoReady() function #1919

Conversation

acdvorak commented Jan 10, 2018 • edited Loading

codecov-io commented Jan 10, 2018 • edited Loading

Codecov Report

bonniezhou Jan 11, 2018

Choose a reason for hiding this comment

acdvorak Jan 12, 2018

Choose a reason for hiding this comment

bonniezhou left a comment

Choose a reason for hiding this comment

feat(demos): Add global `demoReady()` function #1919

feat(demos): Add global `demoReady()` function #1919

acdvorak commented Jan 10, 2018 •

edited

Loading

codecov-io commented Jan 10, 2018 •

edited

Loading