From 06b9b403bbd7c9cae1f747deb6035f7f77d23c15 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Mar 2019 13:54:37 +0100 Subject: [PATCH 01/27] [docs] Update the ROADMAP --- ROADMAP.md | 71 ++++++++++++++++++++++----- docs/src/pages/demos/tables/tables.md | 4 +- 2 files changed, 63 insertions(+), 12 deletions(-) diff --git a/ROADMAP.md b/ROADMAP.md index 7a2c5ccab9d7ac..0994bbb2731e95 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -2,14 +2,63 @@

The roadmap is a living document, and it is likely that priorities will change, but the list below should give some indication of our plans for the next major release, and for the future.

-Our priorities: -1. **Material Design**. The Google Design team has recently released a new iteration on the Material Design specification which is focused on *themability*. This is great news! We will do our best to keep up to date. It also validates that heavily investing in customizability for v1 was a good call. We will continue our efforts in this area. -1. **More utils**. We want to work on new utility components: Spacing, Display, Color, etc. -1. **Performance**. We can’t optimize something we can’t measure, and we don’t currently have a CI performance benchmark, so we will need to build one and start investigating bottlenecks. -1. **Learning materials**. The quality of the documentation is equally as important as the quality of the implementation, and while the reference documentation is comprehensive, we could author a learning tutorial like Next.js has done, or an egghead.io course. -1. **Themes**. We want to provide common layouts example to make getting started even easier. We also plan on adding more premium themes. -1. **Documentation**. We want to translate the documentation into Chinese and other languages. Any help is welcomed! -1. **Bundle size**. The library needs to be as small as possible, so we need to work on solutions to further reduce the bundle size, for example, supporting Preact or Nerv can help. -1. **Type checking**. We will continue to improve the TypeScript and possibly the Flow coverage of the library. - -You can follow [our milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview. +## Methodology + +We work on the problems that resonate the most with our users. +Please **upvote** πŸ‘ the issues you are the most interested in on GitHub. +Thank you for participating [to our developer survey](https://material-ui.com/blog/2019-developer-survey-results/). + +## Our priorities + +These are our top priorities, by weight of importance: + +- 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle. Building and maintaining a professional component takes an incredible amount of time. +Everybody underestimate it, we have a relatively small core team. We gonna try the following strategy: + - Identify frequently needed components. We have different leverages for this: the developer survey answers, the GitHub upvotes, the Algolia search volume, the Google search volume, documentation usage volume, npm downloads, etc. + - Prioritize the creation of frequently needed components. + - Optimize for the people maintaining the components. The more people maintaining the components the better. + - Encourage the usage of third-party components if they already exist and are well maintained. We can create [a search experience](https://xpvrpr7r4o.codesandbox.io/) for this. +- 0.5 - **Better customization.** πŸ’… We want to make our component customization intuitive, no matter if you are using global CSS or styled-components: + - Improve the documentation. + - Better support styled-components. + - Work on the core solution. + - Provide [more examples like this](https://mui-treasury.com/). +- 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following dimensions: + - Beginner tutorials & Video lessons. + - Page Layout Examples. They make people started really fast, we need more of them! + - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and better prioritize. + - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. +- 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: + - The documentation. We want to provide a TypeScript variant to most of our demos. + It should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). + - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome. We encourage people to use [makeStyles()](/css-in-js/basics/#hook-api). It should be much better with this Hook API. + The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. +- 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. We can notice stark differences when rendering a large table or list. +Performance is all about doing less work. We have the following leverages: + - Make the core faster. Using our table components is x3 slower than using native table elements. + What's the difference? a Material-UI table component creates many **intermediary components**, slowing the rendering. + We are working on removing these intermediary components. We are migrating the codebase from class based components to hook based components. + [It will yield a theoretical **+30%** performance gain](https://github.com/mui-org/material-ui/issues/10778#issuecomment-472840548), as well as making the DX much better. + Here is the React Dev Tools output for the same node: + + **Before (v3)** + + ![Before](https://pbs.twimg.com/media/D1obANqX4AAAZgJ?format=png&name=360x360) + + **After (v4)** + + ![After](https://pbs.twimg.com/media/D1oZvtsXcAIyAb4?format=png&name=360x360) + - Avoid re-rendering. It's the responsibility of our users to prune the React rendering tree efficiently. + Most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). + If you find a good opportunity for it, let us know, we will be happy to work on the problem. + - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it after 100 items. +- 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). +It's a continuous effort. v4 is 15% smaller so far, while adding new features. +We are eager to find new bundle size reduction opportunities. + - JSS can we reduce the overhead of this module? + - Migrating from class components to hooks [helps](https://twitter.com/olivtassinari/status/1106905745264652289). + - Popper.js is working [on a smaller v2](https://bundlephobia.com/result?p=popper.js@2.0.0-next.4) version. + - We can replace [react-event-listener](https://bundlephobia.com/result?p=react-event-listener@0.6.6) with the hook API. + - react-transition-group will remove [react-lifecycles-compat](https://bundlephobia.com/result?p=react-lifecycles-compat@3.0.4). +- 0.2 - **Material Design Update.** πŸŽ€ The material design specification is evolving, so should we. We have a few open issues about it. +- 0.1 - **Accessibility.** ♿️ We have relatively few accessibility issues, but we are eager to address them all. diff --git a/docs/src/pages/demos/tables/tables.md b/docs/src/pages/demos/tables/tables.md index 2ef6cfdcb164fe..bd1f172e50b55c 100644 --- a/docs/src/pages/demos/tables/tables.md +++ b/docs/src/pages/demos/tables/tables.md @@ -70,7 +70,9 @@ A simple example with spanning rows & columns. ## Virtualized Table -In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. It renders 200 rows and can easily handle more. +In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. +It renders 200 rows and can easily handle more. +Virtualization helps with performance issues. {{"demo": "pages/demos/tables/ReactVirtualizedTable.js"}} From b329cca43b31901a40349a00e1b746ae0581d4be Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 17 Mar 2019 22:17:21 +0100 Subject: [PATCH 02/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 0994bbb2731e95..9caf0b30186d4c 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -6,7 +6,7 @@ We work on the problems that resonate the most with our users. Please **upvote** πŸ‘ the issues you are the most interested in on GitHub. -Thank you for participating [to our developer survey](https://material-ui.com/blog/2019-developer-survey-results/). +Thank you for participating [in our developer survey](https://material-ui.com/blog/2019-developer-survey-results/). ## Our priorities From 9b462e8f92adfaf7736751bcae36cc242c7f8dee Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 17 Mar 2019 22:17:46 +0100 Subject: [PATCH 03/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 9caf0b30186d4c..4ed3395bc2532e 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -13,7 +13,7 @@ Thank you for participating [in our developer survey](https://material-ui.com/bl These are our top priorities, by weight of importance: - 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle. Building and maintaining a professional component takes an incredible amount of time. -Everybody underestimate it, we have a relatively small core team. We gonna try the following strategy: +Everybody underestimates it, we have a relatively small core team. We are going to try the following strategy: - Identify frequently needed components. We have different leverages for this: the developer survey answers, the GitHub upvotes, the Algolia search volume, the Google search volume, documentation usage volume, npm downloads, etc. - Prioritize the creation of frequently needed components. - Optimize for the people maintaining the components. The more people maintaining the components the better. From 21c78dd5384567409f9055a633979183dc042c95 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 17 Mar 2019 22:17:55 +0100 Subject: [PATCH 04/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 4ed3395bc2532e..638d1672fba322 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -23,7 +23,7 @@ Everybody underestimates it, we have a relatively small core team. We are going - Better support styled-components. - Work on the core solution. - Provide [more examples like this](https://mui-treasury.com/). -- 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following dimensions: +- 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: - Beginner tutorials & Video lessons. - Page Layout Examples. They make people started really fast, we need more of them! - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and better prioritize. From e29f9cc8b1405cb1edfebca557e4107a8f84e37d Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 17 Mar 2019 22:18:05 +0100 Subject: [PATCH 05/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 638d1672fba322..7b7bbaebaca444 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -25,7 +25,7 @@ Everybody underestimates it, we have a relatively small core team. We are going - Provide [more examples like this](https://mui-treasury.com/). - 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: - Beginner tutorials & Video lessons. - - Page Layout Examples. They make people started really fast, we need more of them! + - Page Layout Examples. They get people started really quickly, we need more of them! - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and better prioritize. - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: From 066ecc20737675457a7e36924e0ba9d65d0184b1 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Sun, 17 Mar 2019 22:19:33 +0100 Subject: [PATCH 06/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 7b7bbaebaca444..599db650828076 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -10,7 +10,7 @@ Thank you for participating [in our developer survey](https://material-ui.com/bl ## Our priorities -These are our top priorities, by weight of importance: +Here are our top priorities, ordered by importance: - 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle. Building and maintaining a professional component takes an incredible amount of time. Everybody underestimates it, we have a relatively small core team. We are going to try the following strategy: From 3fe2be49a1fcd7fe06993b914727f6e4c1181409 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Mar 2019 22:27:18 +0100 Subject: [PATCH 07/27] Update ROADMAP.md --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 599db650828076..5c506b9e7f21c2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -22,7 +22,7 @@ Everybody underestimates it, we have a relatively small core team. We are going - Improve the documentation. - Better support styled-components. - Work on the core solution. - - Provide [more examples like this](https://mui-treasury.com/). + - Provide [more examples like this](https://mui-treasury.com/components/card). - 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: - Beginner tutorials & Video lessons. - Page Layout Examples. They get people started really quickly, we need more of them! From d0219b22c83e6b2f54b89df30b5de312bbc50116 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Mar 2019 22:28:21 +0100 Subject: [PATCH 08/27] Update ROADMAP.md --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 5c506b9e7f21c2..bca43f99e98211 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -26,7 +26,7 @@ Everybody underestimates it, we have a relatively small core team. We are going - 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: - Beginner tutorials & Video lessons. - Page Layout Examples. They get people started really quickly, we need more of them! - - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and better prioritize. + - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and prioritize the pages that need the most to be improved. - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: - The documentation. We want to provide a TypeScript variant to most of our demos. From e7d57720a3d8b004266a75da5c18ce15186d0d85 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 17 Mar 2019 22:29:33 +0100 Subject: [PATCH 09/27] Update ROADMAP.md --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index bca43f99e98211..4b9204ab0ae1ff 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -55,7 +55,7 @@ Performance is all about doing less work. We have the following leverages: - 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). It's a continuous effort. v4 is 15% smaller so far, while adding new features. We are eager to find new bundle size reduction opportunities. - - JSS can we reduce the overhead of this module? + - JSS. Can we reduce the overhead of this module? - Migrating from class components to hooks [helps](https://twitter.com/olivtassinari/status/1106905745264652289). - Popper.js is working [on a smaller v2](https://bundlephobia.com/result?p=popper.js@2.0.0-next.4) version. - We can replace [react-event-listener](https://bundlephobia.com/result?p=react-event-listener@0.6.6) with the hook API. From e31fbf6d81a857c009a08089e0ec7778510fd5cd Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Mon, 18 Mar 2019 09:47:39 +0100 Subject: [PATCH 10/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 4b9204ab0ae1ff..9bd4c96c339111 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -20,7 +20,7 @@ Everybody underestimates it, we have a relatively small core team. We are going - Encourage the usage of third-party components if they already exist and are well maintained. We can create [a search experience](https://xpvrpr7r4o.codesandbox.io/) for this. - 0.5 - **Better customization.** πŸ’… We want to make our component customization intuitive, no matter if you are using global CSS or styled-components: - Improve the documentation. - - Better support styled-components. + - Better support for styled-components. - Work on the core solution. - Provide [more examples like this](https://mui-treasury.com/components/card). - 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: From 068c59c9a996b566145229b7d43737fd21661b2b Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:26:32 +0100 Subject: [PATCH 11/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 9bd4c96c339111..087ee34a83105e 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -12,7 +12,7 @@ Thank you for participating [in our developer survey](https://material-ui.com/bl Here are our top priorities, ordered by importance: -- 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle. Building and maintaining a professional component takes an incredible amount of time. +- 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle, as building and maintaining a professional component takes an incredible amount of time. Everybody underestimates it, we have a relatively small core team. We are going to try the following strategy: - Identify frequently needed components. We have different leverages for this: the developer survey answers, the GitHub upvotes, the Algolia search volume, the Google search volume, documentation usage volume, npm downloads, etc. - Prioritize the creation of frequently needed components. From 1cef1d174c86380b30e25c4ebb324caeb6f063bd Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:26:42 +0100 Subject: [PATCH 12/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 087ee34a83105e..ba876d12c42aeb 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -13,7 +13,7 @@ Thank you for participating [in our developer survey](https://material-ui.com/bl Here are our top priorities, ordered by importance: - 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle, as building and maintaining a professional component takes an incredible amount of time. -Everybody underestimates it, we have a relatively small core team. We are going to try the following strategy: +Everybody underestimates it. As we have a relatively small core team, we are going to try the following strategy: - Identify frequently needed components. We have different leverages for this: the developer survey answers, the GitHub upvotes, the Algolia search volume, the Google search volume, documentation usage volume, npm downloads, etc. - Prioritize the creation of frequently needed components. - Optimize for the people maintaining the components. The more people maintaining the components the better. From b023f3fdcc42d06fbeb61c900636055e3c853e18 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:26:58 +0100 Subject: [PATCH 13/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index ba876d12c42aeb..42ce06826e3bd5 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -14,7 +14,7 @@ Here are our top priorities, ordered by importance: - 1.0 - **More components**. 🧰 People want more components. This is challenging for us to handle, as building and maintaining a professional component takes an incredible amount of time. Everybody underestimates it. As we have a relatively small core team, we are going to try the following strategy: - - Identify frequently needed components. We have different leverages for this: the developer survey answers, the GitHub upvotes, the Algolia search volume, the Google search volume, documentation usage volume, npm downloads, etc. + - Identify frequently needed components. We have different resources we can leverage for this: the developer survey answers, GitHub issue upvotes, Algolia search volume, Google search volume, documentation usage volume, npm downloads, etc. - Prioritize the creation of frequently needed components. - Optimize for the people maintaining the components. The more people maintaining the components the better. - Encourage the usage of third-party components if they already exist and are well maintained. We can create [a search experience](https://xpvrpr7r4o.codesandbox.io/) for this. From 3290bb121f1ccdf88ed8bc4465ed7889ab8f826f Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:27:51 +0100 Subject: [PATCH 14/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 42ce06826e3bd5..6e9830b24647da 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -53,7 +53,7 @@ Performance is all about doing less work. We have the following leverages: If you find a good opportunity for it, let us know, we will be happy to work on the problem. - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it after 100 items. - 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). -It's a continuous effort. v4 is 15% smaller so far, while adding new features. +It's a continuous effort – v4 is 15% smaller so far, while adding new features. We are eager to find new bundle size reduction opportunities. - JSS. Can we reduce the overhead of this module? - Migrating from class components to hooks [helps](https://twitter.com/olivtassinari/status/1106905745264652289). From 7076ef4a2463d0faa39c27d6f80a28053767f2bb Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:29:00 +0100 Subject: [PATCH 15/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 6e9830b24647da..dc12fbebbe4a9c 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -51,7 +51,7 @@ Performance is all about doing less work. We have the following leverages: - Avoid re-rendering. It's the responsibility of our users to prune the React rendering tree efficiently. Most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). If you find a good opportunity for it, let us know, we will be happy to work on the problem. - - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it after 100 items. + - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it above 100 items. - 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). It's a continuous effort – v4 is 15% smaller so far, while adding new features. We are eager to find new bundle size reduction opportunities. From e2dcfbd22636f8cc1b2fe61f9ca1d8b19153faa0 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:30:47 +0100 Subject: [PATCH 16/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index dc12fbebbe4a9c..1e6f3b44c7edd1 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -50,7 +50,7 @@ Performance is all about doing less work. We have the following leverages: ![After](https://pbs.twimg.com/media/D1oZvtsXcAIyAb4?format=png&name=360x360) - Avoid re-rendering. It's the responsibility of our users to prune the React rendering tree efficiently. Most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). - If you find a good opportunity for it, let us know, we will be happy to work on the problem. + If you find a good opportunity for it, let us know, and we will be happy to work with you on the problem. - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it above 100 items. - 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). It's a continuous effort – v4 is 15% smaller so far, while adding new features. From 4eeab640c29ce1b7aa20344d572cf01e4a7f13ef Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:30:58 +0100 Subject: [PATCH 17/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 1e6f3b44c7edd1..5e4388f7c29315 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -49,7 +49,7 @@ Performance is all about doing less work. We have the following leverages: ![After](https://pbs.twimg.com/media/D1oZvtsXcAIyAb4?format=png&name=360x360) - Avoid re-rendering. It's the responsibility of our users to prune the React rendering tree efficiently. - Most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). + as most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). If you find a good opportunity for it, let us know, and we will be happy to work with you on the problem. - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it above 100 items. - 0.2 - **Bundle size.** πŸ“¦ You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core@4.0.0-alpha.4). From 6d56195f2eeeab7b5de9477fb238270016a61b1d Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:31:09 +0100 Subject: [PATCH 18/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 5e4388f7c29315..90853e7a208cf4 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -48,7 +48,7 @@ Performance is all about doing less work. We have the following leverages: **After (v4)** ![After](https://pbs.twimg.com/media/D1oZvtsXcAIyAb4?format=png&name=360x360) - - Avoid re-rendering. It's the responsibility of our users to prune the React rendering tree efficiently. + - Avoid re-rendering. It's the responsibility of the user to prune the React rendering tree efficiently, as most of our APIs are too low level to implement efficient memoization (React.useMemo, React.PureComponent, React.memo). If you find a good opportunity for it, let us know, and we will be happy to work with you on the problem. - Avoid rendering. We are documenting [how to implement virtualization](/demos/tables/#virtualized-table) for the Table components. It's important to consider it above 100 items. From c4895fa4c7e682087987a59c4960450ebf9df6ca Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:33:12 +0100 Subject: [PATCH 19/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 90853e7a208cf4..37991113f1082a 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -29,7 +29,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and prioritize the pages that need the most to be improved. - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: - - The documentation. We want to provide a TypeScript variant to most of our demos. + - The documentation. We want to provide a TypeScript variant to most of our demos, It should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome. We encourage people to use [makeStyles()](/css-in-js/basics/#hook-api). It should be much better with this Hook API. The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. From c6f373ccf46af77762d6e5a1eb66ea03f12ce847 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:33:45 +0100 Subject: [PATCH 20/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 37991113f1082a..8e9c4d12695ef2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -30,7 +30,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: - The documentation. We want to provide a TypeScript variant to most of our demos, - It should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). + which should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome. We encourage people to use [makeStyles()](/css-in-js/basics/#hook-api). It should be much better with this Hook API. The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. - 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. We can notice stark differences when rendering a large table or list. From 59479ee91159f1c60b0478abe31fd45e19f901cd Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:34:03 +0100 Subject: [PATCH 21/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 8e9c4d12695ef2..ec098f69c3fa3e 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -38,7 +38,7 @@ Performance is all about doing less work. We have the following leverages: - Make the core faster. Using our table components is x3 slower than using native table elements. What's the difference? a Material-UI table component creates many **intermediary components**, slowing the rendering. We are working on removing these intermediary components. We are migrating the codebase from class based components to hook based components. - [It will yield a theoretical **+30%** performance gain](https://github.com/mui-org/material-ui/issues/10778#issuecomment-472840548), as well as making the DX much better. + [This will yield a theoretical **+30%** performance gain](https://github.com/mui-org/material-ui/issues/10778#issuecomment-472840548), as well as making the DX much better. Here is the React Dev Tools output for the same node: **Before (v3)** From f08b5ab2d0716d376d6fc85a3e01984fcaa2b27c Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:34:18 +0100 Subject: [PATCH 22/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index ec098f69c3fa3e..001188ff9ec781 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -31,7 +31,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: - The documentation. We want to provide a TypeScript variant to most of our demos, which should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). - - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome. We encourage people to use [makeStyles()](/css-in-js/basics/#hook-api). It should be much better with this Hook API. + - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome, so we encourage you to use [makeStyles()](/css-in-js/basics/#hook-api) instead. It should be much better with this Hook API. The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. - 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. We can notice stark differences when rendering a large table or list. Performance is all about doing less work. We have the following leverages: From 799121fbd24601eedfde904719dc87cc81794fcc Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:34:36 +0100 Subject: [PATCH 23/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 001188ff9ec781..500e3b15f739f9 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -33,7 +33,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi which should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome, so we encourage you to use [makeStyles()](/css-in-js/basics/#hook-api) instead. It should be much better with this Hook API. The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. -- 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. We can notice stark differences when rendering a large table or list. +- 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. You will notice stark differences when rendering a large table or list. Performance is all about doing less work. We have the following leverages: - Make the core faster. Using our table components is x3 slower than using native table elements. What's the difference? a Material-UI table component creates many **intermediary components**, slowing the rendering. From 92cbf93ada76ea560a42894f4ebc57e91032b528 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:34:55 +0100 Subject: [PATCH 24/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 500e3b15f739f9..0c840a62adc60f 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -34,7 +34,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi - The definitions. We are **continuously** improving them. We are aware that correctly typing withStyles() is cumbersome, so we encourage you to use [makeStyles()](/css-in-js/basics/#hook-api) instead. It should be much better with this Hook API. The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Maybe for v5, we will see. - 0.2 - **Performance.** πŸš€ React abstraction has a cost. The more components you render, the slower your page will be. You will notice stark differences when rendering a large table or list. -Performance is all about doing less work. We have the following leverages: +Performance is all about doing less work. We can leverage the following: - Make the core faster. Using our table components is x3 slower than using native table elements. What's the difference? a Material-UI table component creates many **intermediary components**, slowing the rendering. We are working on removing these intermediary components. We are migrating the codebase from class based components to hook based components. From 9df1006f78dad74b46fd029525326492b07fd44b Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Mon, 18 Mar 2019 17:35:03 +0100 Subject: [PATCH 25/27] Update ROADMAP.md Co-Authored-By: oliviertassinari --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 0c840a62adc60f..b30b488f76be01 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -37,7 +37,7 @@ Everybody underestimates it. As we have a relatively small core team, we are goi Performance is all about doing less work. We can leverage the following: - Make the core faster. Using our table components is x3 slower than using native table elements. What's the difference? a Material-UI table component creates many **intermediary components**, slowing the rendering. - We are working on removing these intermediary components. We are migrating the codebase from class based components to hook based components. + We are working on removing these intermediary components by migrating the codebase from class based components to hook based components. [This will yield a theoretical **+30%** performance gain](https://github.com/mui-org/material-ui/issues/10778#issuecomment-472840548), as well as making the DX much better. Here is the React Dev Tools output for the same node: From 9c70f1740917e69d461d4e5b2b73516b17a839be Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 18 Mar 2019 17:45:18 +0100 Subject: [PATCH 26/27] Update ROADMAP.md --- ROADMAP.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ROADMAP.md b/ROADMAP.md index b30b488f76be01..8f925b7ab88681 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -22,12 +22,12 @@ Everybody underestimates it. As we have a relatively small core team, we are goi - Improve the documentation. - Better support for styled-components. - Work on the core solution. - - Provide [more examples like this](https://mui-treasury.com/components/card). + - Provide [more examples like this](https://mui-treasury.com/components/button). - 0.3 - **Better documentation.** πŸ“š It's a wide topic. We don't know exactly what people want. We will focus our effort in the following areas: - Beginner tutorials & Video lessons. - Page Layout Examples. They get people started really quickly, we need more of them! - Page documentation rating πŸ₯‡πŸ₯ˆπŸ₯‰. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and prioritize the pages that need the most to be improved. - - Internationalization. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. + - Localisation. Not everybody can read & understand English. The documentation pages are synced with [Crowdin](https://translate.material-ui.com/). They should always be up-to-date. - 0.3 - **TypeScript.** πŸ“ There are two dimensions to this problem: - The documentation. We want to provide a TypeScript variant to most of our demos, which should make it straightforward to use Material-UI with TypeScript. You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897). From 5f0262374e787dc9a1aa698491c4a27e111b03a1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 18 Mar 2019 18:17:21 +0100 Subject: [PATCH 27/27] Update ROADMAP.md --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 8f925b7ab88681..46e7f2b7baabde 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -16,8 +16,8 @@ Here are our top priorities, ordered by importance: Everybody underestimates it. As we have a relatively small core team, we are going to try the following strategy: - Identify frequently needed components. We have different resources we can leverage for this: the developer survey answers, GitHub issue upvotes, Algolia search volume, Google search volume, documentation usage volume, npm downloads, etc. - Prioritize the creation of frequently needed components. - - Optimize for the people maintaining the components. The more people maintaining the components the better. - Encourage the usage of third-party components if they already exist and are well maintained. We can create [a search experience](https://xpvrpr7r4o.codesandbox.io/) for this. + - Offer an option to the highly used and well maintained components to move to the official organization: mui-org/x on GitHub, @material-ui/x on npm and x.material-ui.com for the documentation. - 0.5 - **Better customization.** πŸ’… We want to make our component customization intuitive, no matter if you are using global CSS or styled-components: - Improve the documentation. - Better support for styled-components.