Skip to content
Back to blog

The 2020 Material UI Developer Survey: here's what we discovered

Marija Najdova

@mnajdova

Olivier Tassinari

@oliviertassinari

Matt Brookes

@mbrookes
+

Continuing the tradition from last year, we launched a Developer Survey a few months ago, to which we received 1488 responses. This is twice as many as last year (734), so we thank you all for your participation! The survey is closed and we can now give a detailed summary of the results.

Like last year, the survey was again broken into three sections: "Introduction", "About you" and "Your product".

Introduction

In this section, we wanted to hear what developers think is going well, what we should keep doing, and which areas need improving to make the library even better.

1. How would you feel if you could no longer use Material UI?

Pie chart: 73.3% Very disappointed, 21.3% somewhat disappointed, 5.4% not disappointed.

Similar to last year, over 94% of the respondents would be disappointed if they could no longer use Material UI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category!

The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! 🙂 We'd love to understand more about those who use Material UI, but would happily use other solutions, so a follow-up question might be needed next year.

2. How likely is it that you would recommend Material UI to a friend or colleague?

Bar chart: 0.20% - 1, 0% - 2, 0.20% - 3, 0.20% - 4, 1.02% - 5, 1.97% - 6, 8.71% - 7, 22.52% - 8, 20.88% - 9, 44.29% - 10 Pie chart: 73.3% Very disappointed, 21.3% somewhat disappointed, 5.4% not disappointed.

As last year, we again calculated the Net Promoter Score (promoters less detractors). This year it is again a pretty high number 61.54%! (As the values for NPS range between -100 and +100, a "positive" score is considered "good", greater than 50 is "excellent", and above 70 is considered "world class").

3. Who do you think would most benefit from Material UI?

Word cloud of who would benefit most

This word cloud was generated with wordclouds.com.

Developers are again at the center of our universe 🙂 (And "people" and "teams" in general, of course!) This is understandable, given the job role demographic of the majority of respondents. We will push hard on making the experience for you even better over the next year.

4. What is the main benefit you receive from Material UI?

Word cloud of the main benefit of Material UI

The responses to this question are a very clear indicator to us about what we need to continue to do more of. Some of the most common points were: the range of components, ease of use, documentation quality, as well as the design. We will, of course, continue to work on all of these.

5. How can we improve Material UI for you?

As the answers to these questions were pretty different, we grouped them into different categories and counted the different number of times the concern was mentioned. You can see all of them sorted in descending order:

306more components
202more components - ?
15more components - data grid
12more components - carousel
12more components - charts
10more components - lab to core
10more components - upload
9more components - icons
6more components - big calendar
5more components - layout
4more components - navbar
4more components - nested menu
2more components - rich text editor
2more components - splitter
1more components - masonry
1more components - nav bar
1more components - numberpad
1more components - onboarding
1more components - prompt
1more components - scrollspy
1more components - swappable tabs
1more components - timeline
1more components - video player
1more components - virtualization
1more components - drag and drop
1more components - dropdown
1more components - image
189customization
85customization - easier
22customization - docs
16customization - dynamic color & variant
15customization - improve custom themes
13customization - provide more themes (not just Material Design)
11customization - ?
9customization - unstyled components
8customization - support system in all components
8customization - theme editor (visual tool)
2customization - theme gallery (coming from the community)
155docs
46docs - ?
45docs - more examples
33docs - more templates
16docs - beginner friendly
8docs - smaller demos
8docs - tutorials
3docs - api integration with components
2docs - better search
2docs - spanish
1docs - chinese
1docs - translations
1docs - detailed api
1docs - easier discoverability of components
1docs - generated DOM
1docs - japanese
1docs - more realistic examples
1docs - nested props
1docs - plugins
1docs - ssr
64performance
31performance - ?
32performance - bundle size
1performance - DOM size
56styles
19styles - styled components
7styles - docs
5styles - simpler
4styles - ?
3styles - CSS syntax
3styles - better dark/light switch
3styles - emotion
3styles - performance
2styles - agnostic to engine
2styles - CSS modules
2styles - utility class names
1styles - atomic compiled CSS-in-JS
1styles - keep jss
1styles - remove JSS
25typescript
19typescript - ?
3typescript - docs
3typescript - faster check
21date picker - improve
19react native
13form
13material design updates
12animations
8animations - ?
2animations - docs
1animations - declarative API
1animations - SVG
11test
4test - jest
3test - stable snapshot
1test - ?
1test - docs
1test - styles
1test - testing library integration
8more opinionated
8simplify
7class components
7mobile
7fewer breaking changes
7designers
2designers - bridge design tools and code
2designers - Adobe XD material
2designers - Figma material
1designers - ?
6free vs paid balance
6tree view - improve
6less abstracted components
5more abstracted components
4accessibility
1accessibility - ?
1accessibility - auto id
1accessibility - full audit
1accessibility - more examples
4system
1system - CSS grid
1system - docs
1system - performance
1system - rework breakpoints
3components consistency
3grid - improve

Comparison with last year

There are a couple of noticeable differences compared to last year. Some can be explained by our work, others by the evolution of the ecosystem. Each item is prefixed by the multiplication factor of the pain point for 2020 relative to 2019.

Decreasing pain:

  • x0: Slider. No requests. The requirements are mostly met, especially with the introduction of the range feature.
  • x0.1: Strict mode. We fixed a lot of strict mode compatibility issues this year. However, since Create React App has made this mode a default, we have seen a lot more requests for it.
  • x0.1: Autocomplete. We added a new component, and have resolved a large number of issues opened since. This will be moved from lab to the core in v5.
  • x0.2: Fewer breaking changes. Only releasing minor versions under v4 for over a year helps a lot. However, we still need to be careful with CSS changes.
  • x0.3: Accessibility. We have been able to leverage GitHub issues opened by a11y experts, often coming from large companies using Material UI at scale to improve it a lot this year.
  • x0.4: Material Design. We didn't do much for it this year, at least not as much as we could have. Maybe the reduction is because fewer people care? It seems that we start to resonate more with developers building custom design systems.
  • x0.4: TypeScript. The continued migration of all the demos to TypeScript and of all the props to IntelliSense is paying off.
  • x0.5: Date picker. We did a lot for it this year. We probably still need the range feature, and to move it into the main repository (docs migration, etc.) for consistency.
  • x0.7: Performance. We didn't do much this year, so perhaps developers are leveraging React more effectively with virtualization, update pruning, etc?

Growing pains:

  • ∞: Forms is a new item. It seems that we should at least work more closely with react-hook-form, formik, and react-final-form.
  • ∞: Charts is a new item. Material Design even has a page dedicated to date visualization.
  • x5: Custom themes.
  • x5: Simpler customization. We have improved customizability this year by introducing global class names and reducing the CSS specificity of some selectors. However, it seems that we are now tapping into a new audience. We need to do better.
  • x1.5: Animations.
  • x1.2: React native. We still have no plans for it. The market is too small to make it sustainable with our model.
  • x1.1: More components. The more we offer, the more developers ask for! We will try to help solve this with the enterprise version, both because it's the best model we have found that can sustain the development of advanced components, and because it allows us to reinvest in the open source components. The first early access will land this year.

6. What are your key criteria when choosing a UI library?

Bar chart: 21.99% The design, look & feel, 21.64% Documentation quality, 16.38% Customizability, 8.42% TypeScript integration, 6.89% Comprehensiveness, 5.35% Enterprise ready, 4.68% Bundle size, 4.92% Popularity, 4.45% Accessibility, 2.62% Documentation quality, 1.88% Offered support & help, 0.12% Performance, 0.67% Other.

The number of answers was limited to 3.

About you

7. How did you hear about Material UI?

Bar chart: 50.65% Search, 26.18% Word of mouth, 10.76% Social, 5.10% Blog, 7.31% Other.

8. Which of the following best describes your current job role?

Bar chart: 52.18% Full-stack developer, 27.11% Frontend developer, 11.65% Entrepreneur (I do it all), 3.47% Beginner learning web development, 1.23% Backend Developer, 1.16% UX Designer, 0.34% Student, 0.20% CTO, 2.66% Other.

This was expected :)

9. How big is your organization?

Bar chart: 12.30% Hobby / side project, 13.40% Self-employed, 35.60% 2-5 people, 16.10% 6-10, 10.30% 11-20, 5.10% 21-50, 2.50% 51-100, 4.60% 100+

It seems we are consistently popular with small to medium-sized organizations, so we will keep working on the ease of use of the components, while at the same time, allowing designers to style them to match their organizations' brand.

10. How long have you been developing with JavaScript

Bar chart: 3.60% I'm just getting started!, 7.40% 6 months +, 20.80% 1 year +, 27.80% 3 years +, 24.30% 5 years +, 9.80% 10 years +, 4.10% 15 years +, 2.30% 20 years +

We can see the normal distribution of developer experience here, where most have moderate level of experience (between 1 and 5 years).

11. How long have you been developing with React?

Bar chart: 10.70% I'm just getting started!, 15.60% 6 months +, 24.60% 1 year +, 21.40% 2 years +, 23.10% 3 years +, 4.60% Bleeding edge baby! 5 years +

12. How long have you been developing with Material UI?

Bar chart: 20.50% I'm just getting started!, 24.90% 6 months +, 28% 1 year +, 17.40% 2 years +, 7.50% 3 years +, 1.70% I'm a pioneer! 4 years +

13. What were you primarily using before Material UI?

Bar chart: 47.08% Bootstrap, 16.04% Custom system, 13.68% Started with Material UI, 6.67% Angular Material, 4.44% Semantic-UI, 3.19% Ant Design, 8.89% Other

Similar to last year, it seems that most respondents were previously using Bootstrap. We can see also that custom solutions, as well as some other frameworks, were replaced with Material UI.

14. How many Material UI based projects have you built?

Bar chart: 11.50% 0 (I'm just getting started), 23% 1, 54.80% 2-5, 7.80% 6-10, 2.90% 10+

Your product

15. What are you building?

Bar chart: 23.43% Enterprise application, 20.31% Dashboard admin app, 7.40% A design system, 7.40% A set of UI components, 7.37% playing with tech, 7.34% A prototype, 6.40% Landing page, 5.41% e-commerce site, 4.80% CMS, 3.59% Portfolio or resume, 1.88% Blog, 4.69% Other

Enterprises and dashboards are at the top of the heap, and yes, we know that for many of you, the systems you are building are internal, but if you have something that you would like to share as part of the showcase, let us know by opening a PR. Also for those of you building UI components, we'd be happy to give you a shout out in the related projects section.

16. What "delivery mechanism" are you using?

Bar chart: 68.37% Single page app (Create React App, etc), 18.24% Server-side rendered website (Next.js, Gatsby, etc), 6.22% Desktop app (Electron, etc), 4.65% Native mobile app (Cordova, etc), 0.10% React Native, 2.40% Other

17. Who are you building it for?

Pie chart: 55.17% For my company
22.86% For a client, 16.94% Side project, 5.03% More than one of these.

18. Which JS framework are you using, if any?

Pie chart: 57.34% Create React App, 16.40% Custom Webpack, 12.35% Next.js, 5.40% Gatsby, 8.51% Other.

19. What styling system are you using?

Pie chart: 53.84% Material UI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other

The response seems to be similar to the one from the last year's survey, so we will push with better support for styled components.

20. Has your organization ever paid for UI components?

Pie chart: 89.90% No, 10.10% Yes

21. What type system are you using?

Bar chart: 54.08% None
30.87% TypeScript 3.8, 7.31% TypeScript 3.7, 1.90% Flow, 1.55% TypeScript 3.6, 0.98% TypeScript 3.5, 3.31% Other

Almost half of the community is using TypeScript. Next year, it might even become more popular than JavaScript.

Conclusion

This data is incredibly valuable for our team. Thank you again for participating! We want to work on the problems that resonate the most with our users. It's clear that we should:

  1. Provide more flexibility on the components, unstyled components (pure hooks?).
  2. Make the customization easier and implement custom themes with Material UI. Maybe provide a theme builder.
  3. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (for example dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material UI v5).
  4. Improve upon the paid advanced versions of the components (for example complex data grid, date range picker, tree view drag & drop, virtualization, etc).

We will update our ROADMAP in the coming days. We will run a similar survey next year to keep track of our progress.

If you want to continue to influence our roadmap, please upvote 👍 the issues you are the most interested in on GitHub.

How to upvote on GitHub

Help us prioritize by upvoting.