import React from 'react';

import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';

import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';

const pageFilename = 'blog/2020';

const requireRaw = require.context('!raw-loader!./', false, /2020\.md$/);

export default function Page({ docs }) {

return <TopLayoutBlog docs={docs} />;

Page.getInitialProps = () => {

const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });

return { demos, docs };

title: 2020 in review and beyond

description: 2020 has been another great year, not only for Material-UI, but also for the ecosystem.

date: 2020-12-31T00:00:00.000Z

authors: ['oliviertassinari', 'mbrookes']

card: true

2020 has been another great year, not only for Material-UI, but also for the ecosystem.

We have taken on ambitious challenges and started to scale the project.

- 📦 From 3.2M to [6.4M](https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&from=2019-11-30&to=2020-12-31) downloads per month (from 14% to 18% share of the React ecosystem).

- 📈 From 3.1M to 4.6M unique visitors per year on the documentation.

- ⭐️ From 53.3k to 63.8k stars, leave us [yours 🌟](https://github.com/mui-org/material-ui).

- 👨‍👩‍👧‍👦 From 1,581 to [2,052](https://github.com/mui-org/material-ui/graphs/contributors) contributors.

- 💰 Grew financial support by 2.1X in 2020, compared to 2019.

- 🏢 From 3 to 6 full-time equivalent developers, spread among multiple financially supported [core team members](https://material-ui.com/discover-more/team/).

The numbers speak for themselves. We have reproduced the [traction we got in 2019](/blog/2019/).

When we started 2020, we were celebrating the launch of many new components.

We were busy building features to match feature parity with Ant Design, and more importantly, acting on the top feedback we got doing the [first user survey](/blog/2019-developer-survey-results/).

We have spent the year continuing in the same direction, polishing past components and introducing new ones. We ran a [second user survey](/blog/2020-developer-survey-results/), 15 months after the first one. It was a great opportunity to evaluate the effectiveness of our past efforts. For instance, we were very pleased to see that the slider component was almost a solved problem, and that the TypeScript definitions significantly improved. We also noticed the emergence of trends:

- The more new components we add, the more developers want new ones. For instance, we rarely heard about the need for providing charts in 2019, it's now one of the top requested. In our last survey, we had 10% more requests for new components, even though, we brought new ones. We were surprised, it was counter-intuitive to us.

- The pain around the customization of the components is growing. We also frequently hear that there is a steep learning curve for using `@material-ui/styles`. We are reaching a larger audience used to raw CSS without extensive knowledge of specificity.

- The demand for Material Design is stable, no longer growing. At the same time, the request for new ready-to-use themes is up. Our strategy around providing building blocks to build custom designed UI starts to gain traction.

We have started to leverage these trends as opportunities in the next version of the library: v5.

We have achieved most of what we could have hoped for.

- The most important, we have welcome 3 new members in the company: [Damien](/blog/spotlight-damien-tassone/), [Marija](/blog/marija-najdova-joining/), and [Danail](/blog/danail-hadjiatanasov-joining/).

- We have made significant progress with [v5](https://next.material-ui.com/). We have made half the breaking changes planned. We have migrated our [first component](https://next.material-ui.com/components/slider/) to the new style architecture (emotion by default, adapter for styled-components, and unstyled).

- We have introduced new components (some in the core, some in the lab):

- [Alert](/components/alert/)

- [DataGrid](/components/data-grid/)

- [DatePicker](https://next.material-ui.com/components/date-picker/)

- [LoadingButton](https://next.material-ui.com/components/buttons/#loading-buttons)

- [Timeline](/components/timeline/)

- [TrapFocus](https://next.material-ui.com/components/trap-focus/)

- We have fixed most of the issues with the [Autocomplete](/components/autocomplete/). We have received an overwhelming interest in the component. It was impressive to see.

- We have completed the work for [strict mode](https://reactjs.org/docs/strict-mode.html) support.

- We have increased the adoption of TypeScript in the codebase. We don't plan a dedicated migration but to write new code in TypeScript, as we go.

- We have migrated most of the tests from Enzyme to [Testing Library](https://testing-library.com/).

- We have modernized the system, introducing an [`sx` prop](https://next.material-ui.com/system/basics/) to be used in all the core components.

- We have added support for [Figma](/store/items/figma-react/) and [Adobe XD](/store/items/adobe-xd-react/).

- We have released the first Enterprise component in an alpha version: [XGrid](/components/data-grid/#commercial-version).

2020 was great, 2021 is going to be even more exciting!

We will continue in the same direction, it's still [**day one**](https://www.sec.gov/Archives/edgar/data/1018724/000119312517120198/d373368dex991.htm). Here is a breakdown of our [roadmap](/discover-more/roadmap/).

Up until now, we never had a mindful reflection on what the branding of Material-UI should be. We picked a color from the 2014 Material Design palette, and that's it.

The [material-ui.com](https://material-ui.com/) marketing website will soon wear a brand new style! We need to create our own identity, distinct from Material Design.

We started to deliver advanced React components in 2020 with the data grid, including a [commercial version](/components/data-grid/#commercial-version) and the beginning of a [date range picker](https://next.material-ui.com/components/date-range-picker/).

We will double down on these existing components as long as necessary to have them find the market.

By the end of 2021, we aim to have released these components as stable, implement all the [features planned](/components/data-grid/getting-started/#feature-comparison), and at least double the size of the team.

We will release the next major iteration of the library. A highlight of the key improvements coming ✨:

- Polish and promote most of the components that were in the lab in v4 to the core.

- A new style engine. Migrate from JSS to emotion (default) and styled-components's `styled` API.

- Improve customizability. Add new powers to the theme with dynamic color & [variant](https://next.material-ui.com/customization/typography/#adding-amp-disabling-variants) support. Add a new [`sx` prop](https://next.material-ui.com/system/basics/) for quick customizations to all the components. Expose global class names. Deprecate the `makeStyles` and `withStyles` API.

- Breaking changes on the API to make it more intuitive.

- Add full support for React strict mode. We recommend to enable it.

- Improve the performance of the system by a x3-x5 [factor](https://github.com/mui-org/material-ui/issues/21657#issuecomment-707140999).

- Reduce bundle size: split IE11 into a different bundle [-6kB](https://github.com/mui-org/material-ui/pull/22814#issuecomment-700995216), migrate to emotion [-5kB](https://github.com/mui-org/material-ui/pull/23308#issuecomment-718748835), Popper.js v2 upgrade [-700B](https://github.com/mui-org/material-ui/pull/21761#issuecomment-657135498).

- Improve the documentation website: search shortcut, page rating, fast material icons copy button, etc.

And [much more](https://github.com/mui-org/material-ui/issues/20012).

While Material Design is a predominant design choice for building rich client-side applications, it's not the only popular design trend. We plan to provide a [second theme](https://github.com/mui-org/material-ui/issues/22485) to expand the range of use cases for Material-UI, striking a balance between:

- alignment with the best-looking design trends of hot startups in the US.

- optimization of its usage for rich client-side applications while keeping it good enough for landing pages.

- simplicity of the design for allowing simpler customizations.

- complementarity with Material Design.

It will be built on top of the unstyled components.

While the completion of the unstyled components was originally part of the v5 milestone,

we will likely finish this effort independently.

Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `componentsProps`, [RFC #20012](https://github.com/mui-org/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand.

If we sustain the current growth rate, we should be able to double the size of the team, from 6 to over 10 members in the company without raising. While we will focus on strengthening all the efforts that we have started, it should start to give us room to take on significantly more ambitious problems guided by the following foundations:

- React dominance in the UI development landscape will increase and stay for a very long time.

- Developers are looking to build faster and more appealing UIs.

- Low-code will progressively become mainstream for professional developers and knowledge workers.

If like us, you are excited about bringing joy to developers and enabling more people to build apps, check our positions, [we are hiring](/company/jobs/)!

See you in 2021 🚀

mbrookes: {

name: 'Matt Brookes',

github: 'mbrookes',

},

gap: theme.spacing(3),

'& > div': {

marginTop: theme.spacing(-1),

display: 'flex',

alignItems: 'center',

marginBottom: theme.spacing(5),

fontWeight: theme.typography.fontWeightMedium,

'& .MuiAvatar-root': {

marginRight: theme.spacing(1),

},

<div className={classes.avatar}>

{headers.authors.map((author) => (

<div key={author}>

<Avatar src={`https://github.com/${authors[author].github}.png`} />

{authors[author].name}

</div>

))}

</div>