diff --git a/docs/pages/blog/2020-developer-survey-results.js b/docs/pages/blog/2020-developer-survey-results.js new file mode 100644 index 00000000000000..0f85331540a683 --- /dev/null +++ b/docs/pages/blog/2020-developer-survey-results.js @@ -0,0 +1,15 @@ +import React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'blog/2020-developer-survey-results'; +const requireRaw = require.context('!raw-loader!./', false, /2020-developer-survey-results\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md new file mode 100644 index 00000000000000..f5907ea2b0952f --- /dev/null +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -0,0 +1,314 @@ +--- +description: 2020 Material-UI Developer Survey results +--- + +# 2020 Material-UI Developer Survey results + +Marija Najdova, Olivier Tassinari, Matt Brookes. June 27, 2020. + +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 the 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"](#Introduction), ["About you"](#about-you) and ["Your product"](#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](https://en.wikipedia.org/wiki/Net_Promoter) +(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](#8-which-of-the-following-best-describes-your-current-job-role) +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](https://material.io/design/communication/data-visualization.html). +- 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](https://npm-stat.com/charts.html?package=react-dom,react-native) 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](/discover-more/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](/discover-more/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](#5-how-can-we-improve-material-ui-for-you) that we should: + +1. Provide more flexibility on the components, unstyled components (pure hooks?). +1. Make the customization easier and implement custom themes with Material-UI. Maybe provide a theme builder. +1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (e.g. dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material-UI v5). +1. Improve upon the paid advanced versions of the components (e.g. complex data grid, date range picker, tree view drag & drop, virtualization, etc). + +**We will update [our ROADMAP](/discover-more/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.

diff --git a/docs/public/static/blog/2020-survey/1.png b/docs/public/static/blog/2020-survey/1.png new file mode 100644 index 00000000000000..5d14bad86f3615 Binary files /dev/null and b/docs/public/static/blog/2020-survey/1.png differ diff --git a/docs/public/static/blog/2020-survey/10.png b/docs/public/static/blog/2020-survey/10.png new file mode 100644 index 00000000000000..f59a8953edbaf8 Binary files /dev/null and b/docs/public/static/blog/2020-survey/10.png differ diff --git a/docs/public/static/blog/2020-survey/11.png b/docs/public/static/blog/2020-survey/11.png new file mode 100644 index 00000000000000..784757464c8ea4 Binary files /dev/null and b/docs/public/static/blog/2020-survey/11.png differ diff --git a/docs/public/static/blog/2020-survey/12.png b/docs/public/static/blog/2020-survey/12.png new file mode 100644 index 00000000000000..dccc1c79d49c88 Binary files /dev/null and b/docs/public/static/blog/2020-survey/12.png differ diff --git a/docs/public/static/blog/2020-survey/13.png b/docs/public/static/blog/2020-survey/13.png new file mode 100644 index 00000000000000..105e98665f9a8b Binary files /dev/null and b/docs/public/static/blog/2020-survey/13.png differ diff --git a/docs/public/static/blog/2020-survey/14.png b/docs/public/static/blog/2020-survey/14.png new file mode 100644 index 00000000000000..57ed70e70e8c63 Binary files /dev/null and b/docs/public/static/blog/2020-survey/14.png differ diff --git a/docs/public/static/blog/2020-survey/15.png b/docs/public/static/blog/2020-survey/15.png new file mode 100644 index 00000000000000..08a32e87d45aa4 Binary files /dev/null and b/docs/public/static/blog/2020-survey/15.png differ diff --git a/docs/public/static/blog/2020-survey/16.png b/docs/public/static/blog/2020-survey/16.png new file mode 100644 index 00000000000000..394c57bb54e61b Binary files /dev/null and b/docs/public/static/blog/2020-survey/16.png differ diff --git a/docs/public/static/blog/2020-survey/17.png b/docs/public/static/blog/2020-survey/17.png new file mode 100644 index 00000000000000..051823ade17bd9 Binary files /dev/null and b/docs/public/static/blog/2020-survey/17.png differ diff --git a/docs/public/static/blog/2020-survey/18.png b/docs/public/static/blog/2020-survey/18.png new file mode 100644 index 00000000000000..9f7aa0d573c134 Binary files /dev/null and b/docs/public/static/blog/2020-survey/18.png differ diff --git a/docs/public/static/blog/2020-survey/19.png b/docs/public/static/blog/2020-survey/19.png new file mode 100644 index 00000000000000..e6de8a826182e9 Binary files /dev/null and b/docs/public/static/blog/2020-survey/19.png differ diff --git a/docs/public/static/blog/2020-survey/20.png b/docs/public/static/blog/2020-survey/20.png new file mode 100644 index 00000000000000..dab7bcdee80daa Binary files /dev/null and b/docs/public/static/blog/2020-survey/20.png differ diff --git a/docs/public/static/blog/2020-survey/21.png b/docs/public/static/blog/2020-survey/21.png new file mode 100644 index 00000000000000..bc8914a7e87cce Binary files /dev/null and b/docs/public/static/blog/2020-survey/21.png differ diff --git a/docs/public/static/blog/2020-survey/2a.png b/docs/public/static/blog/2020-survey/2a.png new file mode 100644 index 00000000000000..6b71c418792170 Binary files /dev/null and b/docs/public/static/blog/2020-survey/2a.png differ diff --git a/docs/public/static/blog/2020-survey/2b.png b/docs/public/static/blog/2020-survey/2b.png new file mode 100644 index 00000000000000..2497f11877561c Binary files /dev/null and b/docs/public/static/blog/2020-survey/2b.png differ diff --git a/docs/public/static/blog/2020-survey/3.jpg b/docs/public/static/blog/2020-survey/3.jpg new file mode 100644 index 00000000000000..eacc41b6560f7e Binary files /dev/null and b/docs/public/static/blog/2020-survey/3.jpg differ diff --git a/docs/public/static/blog/2020-survey/4.jpg b/docs/public/static/blog/2020-survey/4.jpg new file mode 100644 index 00000000000000..b48147e8e07d54 Binary files /dev/null and b/docs/public/static/blog/2020-survey/4.jpg differ diff --git a/docs/public/static/blog/2020-survey/6.png b/docs/public/static/blog/2020-survey/6.png new file mode 100644 index 00000000000000..136e78c3074d4a Binary files /dev/null and b/docs/public/static/blog/2020-survey/6.png differ diff --git a/docs/public/static/blog/2020-survey/7.png b/docs/public/static/blog/2020-survey/7.png new file mode 100644 index 00000000000000..b19f88ee78dd1b Binary files /dev/null and b/docs/public/static/blog/2020-survey/7.png differ diff --git a/docs/public/static/blog/2020-survey/8.png b/docs/public/static/blog/2020-survey/8.png new file mode 100644 index 00000000000000..bc2b7fcbb3d160 Binary files /dev/null and b/docs/public/static/blog/2020-survey/8.png differ diff --git a/docs/public/static/blog/2020-survey/9.png b/docs/public/static/blog/2020-survey/9.png new file mode 100644 index 00000000000000..31b7733d4b784f Binary files /dev/null and b/docs/public/static/blog/2020-survey/9.png differ