[blog] 2019 in review and beyond (mui#19478)

* [blog] 2019 in review and beyond

* fix build

* fix typo

* flexibility

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/pages/blog/2019.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* Update docs/src/pages/company/software-engineer/software-engineer.md

Co-Authored-By: Matt <[email protected]>

* polish premium description

Co-authored-by: Matt <[email protected]>

docs/pages/blog/2019.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import markdown from './2019.md';
+
+export default function Page() {
+  return <TopLayoutBlog markdown={markdown} />;
+}

docs/pages/blog/2019.md

@@ -0,0 +1,102 @@
+---
+description: 2019 was a great year for Material-UI. It puts us on an exciting path to solve even greater challenges in the coming years!
+---
+
+# 2019 in review and beyond
+
+The core team. January 25, 2020.
+
+2019 was a great year for Material-UI.
+It puts us on an exciting path to solve even greater challenges in the coming years!
+
+## Growth
+
+- 📦 From 2.2M to [3.2M](https://www.npmjs.com/package/@material-ui/core) downloads per month.
+- 📈 From 1.6M to 3.1M unique visitors per year on the documentation.
+- ⭐️ From 43.1k to 53.3k stars, leave us [yours 🌟](https://github.com/mui-org/material-ui).
+- 👨‍👩‍👧‍👦 From 1,064 to [1,581](https://github.com/mui-org/material-ui/graphs/contributors) contributors.
+- 💰 Grew financial support by 76% in 2019, compared to 2018.
+- 🏢 From 1.5 to 3 full-time equivalent developers, spread among multiple financially supported [core team members](https://material-ui.com/discover-more/team/).
+
+The numbers speak for themselves. 2019 was super exciting and made Material-UI one of the most advanced open-source, React-based, UI component libraries!
+
+## In review
+
+When we started 2019, we were celebrating the launch of the **first stable release** of the framework and iterating to polish it (looking at the list of breaking changes, v3 is almost identical to v1).
+We thought we were almost done, and that we had done the hardest part with the release of the stable version. All we would need to do going forward was to keep up with the Material Design specification and fix a couple of bugs.
+
+We have quickly realized that we could do way way more. It was just the beginning :D.
+Some of the key factors:
+
+- The results of the [2019 Developer Survey](https://medium.com/material-ui/2019-material-ui-developer-survey-results-c9589434bbcf) have highlighted the immense potential for working on advanced components and features, especially for enterprise users.
+Developers are craving for a UI framework that they can learn once (e.g. few breaking changes, only one solution per problem) and use everywhere (e.g. comprehensive, customizable, high-quality).
+- Bootstrap had successfully released [a theme store](https://themes.getbootstrap.com/).
+Following this approach opened an opportunity to capture a fraction of the value Material-UI creates for its users, and funnel it back into R&D on the framework.
+- The market for paid UI components is in the order of a couple of $100m/year,
+with dozens of companies positioned in this market.
+While React is only one technology among many (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc) with which to build a UI, but we believe that Web and React will become the dominant technology in the next 5 years for enterprises. Material-UI is uniquely positioned to address this market with non-MIT features.
+- Building UIs should be simpler, it still too slow and complex.
+Designers and developers should benefit from a more integrated experience.
+- Every now and then, we witness the appearance of a new React UI component library built from scratch ([UXPin](https://adele.uxpin.com/) keeps track of some of them).
+And every time we asked ourselves, "what could have we done differently to empower this library"?
+We believe that starting from scratch, while maximizing freedom, is incredibly inefficient.
+Most UI libraries need the same features but are implemented with a wide spectrum of accessibility, developer experience, and overall design quality.
+We won't rest until we successfully unify these efforts. It's a long term mission and will probably take years. The foundation will be the release of an un-styled version of our components.
+
+## Achievements
+
+- We have released [v4](/blog/material-ui-v4-is-out/).
+- We have introduced many new components (some in the core, some in the lab):
+  - [Autocomplete](/components/autocomplete/)
+  - [Backdrop](/components/backdrop/)
+  - [Breadcrumbs](/components/breadcrumbs/)
+  - [ButtonGroup](/components/button-group/)
+  - [Container](/components/container/)
+  - [Link](/components/links/)
+  - [Rating](/components/rating/)
+  - [Skeleton](/components/skeleton/)
+  - [Slider](/components/slider/)
+  - [TextareaAutosize](/components/textarea-autosize/)
+  - [TreeView](/components/tree-view/)
+- We have fixed a significant number of [accessibility issues](https://github.com/mui-org/material-ui/issues?q=is%3Aissue+label%3Aaccessibility+is%3Aclosed).
+- We have introduced global class names.
+- We have migrated the whole codebase to hooks.
+- We have migrated all the demos to TypeScript (while also offering transpiled JS demos).
+- We have introduced [native tree-shaking](/guides/minimizing-bundle-size/) support.
+- We have introduced [built-in localization](/guides/localization/).
+- We have remove a good number of external dependencies and increased the `features/bundle size` density.
+- We have introduced an [icon search page](/components/material-icons/).
+- We have released a [store for Material-UI](https://themes.material-ui.com/).
+
+## Looking at 2020
+
+2019 was great, 2020 is going to be even more exciting!
+We will continue in the same direction.
+
+### Survey
+
+The developer survey we ran [last year](/blog/2019-developer-survey-results/) was so insightful that we plan to run it every year.
+It's a great opportunity for us to adjust the strategy and to pause to analyse the outcome of the actions we took in the previous year.
+
+### Open source roadmap
+
+Most of the time we work in the open. Here's our our [public roadmap](/discover-more/roadmap).
+We plan to release a new major around the end of the year (v5).
+We will promote components that are in the lab to the core, migrate to styled-components, and more.
+
+### Store
+
+We will increase the depth of content available with more themes and templates.
+We have recently released a Sketch design library, and are planning to support Figma, and Adobe XD too. For Framer, we have made the key components available as a [Framer package](https://packages.framer.com/package/material-ui/material-ui).
+
+### Enterprise
+
+We plan to release an enterprise class offering, starting with the data grid.
+Enterprise features will build on the open source version of the components.
+
+### Hiring
+
+We are looking for a [full-time software developer](/company/software-engineer/) to join us!
+
+If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project).
+Spreading the word to other developers that are looking for a great UI framework is also extremely helpful 🙌.

docs/pages/company/jobs.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/jobs', false, /\.(md|js|tsx)$/);
+const reqSource = require.context('!raw-loader!../../src/pages/company/jobs', false, /\.(js|tsx)$/);
+const reqPrefix = 'pages/company/jobs';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}

docs/pages/company/software-engineer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany';
+
+const req = require.context('docs/src/pages/company/software-engineer', false, /\.(md|js|tsx)$/);
+const reqSource = require.context(
+  '!raw-loader!../../src/pages/company/software-engineer',
+  false,
+  /\.(js|tsx)$/,
+);
+const reqPrefix = 'pages/company/software-engineer';
+
+export default function Page() {
+  return <TopLayoutCompany req={req} reqSource={reqSource} reqPrefix={reqPrefix} />;
+}

docs/src/modules/components/Ad.js

@@ -61,7 +61,7 @@ const inHouseAds = [
       'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-2',
     img: '/static/in-house/themes-2.jpg',
     description:
-      '<b>Premium Templates</b><br />Sart your project with the best themes for admins, dashboards and more.',
+      '<b>Premium Templates</b><br />Start your project with the best themes for admins, dashboards and more.',
   },
   {
     name: 'themes',

docs/src/modules/components/AppDrawer.js

@@ -99,7 +99,7 @@ function reduceChildRoutes({ props, activePage, items, page, depth, t }) {
 
   if (page.children && page.children.length > 1) {
     const title = pageToTitleI18n(page, t);
-    const topLevel = !activePage || activePage.pathname.indexOf(`${page.pathname}/`) === 0;
+    const topLevel = activePage ? activePage.pathname.indexOf(`${page.pathname}/`) === 0 : false;
 
     items.push(
       <AppDrawerNavItem

docs/src/modules/components/AppDrawerNavItem.js

@@ -40,7 +40,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function AppDrawerNavItem(props) {
+export default function AppDrawerNavItem(props) {
   const {
     children,
     depth,
@@ -112,5 +112,3 @@ AppDrawerNavItem.propTypes = {
   title: PropTypes.string.isRequired,
   topLevel: PropTypes.bool,
 };
-
-export default AppDrawerNavItem;

docs/src/modules/components/AppFooter.js

@@ -140,6 +140,11 @@ function AppFooter(props) {
                     Contact Us
                   </Link>
                 </li>
+                <li>
+                  <Link color="inherit" variant="body2" href="/company/jobs/">
+                    Jobs
+                  </Link>
+                </li>
               </ul>
             </Grid>
           </Grid>

docs/src/modules/components/MarkdownDocs.js

@@ -43,7 +43,7 @@ const styles = theme => ({
     },
   },
   toc: {
-    [theme.breakpoints.up('md')]: {
+    [theme.breakpoints.up('sm')]: {
       width: 'calc(100% - 175px)',
     },
     [theme.breakpoints.up('lg')]: {

docs/src/modules/components/TopLayoutBlog.js

@@ -19,8 +19,9 @@ const styles = theme => ({
   },
   container: {
     marginBottom: theme.spacing(20),
-    maxWidth: 680 + 64,
+    maxWidth: 680 + theme.spacing(8 + 4),
     '& .markdownElement': {
+      paddingRight: theme.spacing(4),
       fontSize: 18,
       lineHeight: 1.7,
     },

docs/src/modules/components/TopLayoutCompany.js

@@ -14,6 +14,10 @@ const styles = theme => ({
   },
   container: {
     marginBottom: theme.spacing(20),
+    maxWidth: 680 + theme.spacing(8 + 4),
+    '& .markdownElement': {
+      paddingRight: theme.spacing(4),
+    },
   },
 });
 

docs/src/modules/components/useMarkdownDocs.js

@@ -140,7 +140,7 @@ ${headers.components
 
           return (
             <Demo
-              key={content}
+              key={`${content}${index}`}
               demo={demos[name]}
               demoOptions={demoOptions}
               githubLocation={`${SOURCE_CODE_ROOT_URL}/docs/src/${name}`}

docs/src/pages.js

@@ -214,11 +214,9 @@ const pages = [
       { pathname: '/discover-more/languages' },
     ],
   },
-  { pathname: '/versions', displayNav: false },
+  { pathname: '/versions', disableNav: true },
   { pathname: '/', displayNav: false, disableDrawer: true },
   { pathname: 'https://medium.com/material-ui', title: 'Blog' },
-  { pathname: '/company/about', displayNav: false, disableDrawer: true },
-  { pathname: '/company/contact', displayNav: false, disableDrawer: true },
 ];
 
 export default pages;

docs/src/pages/company/jobs/jobs.md

@@ -0,0 +1,6 @@
+# Work with us!
+
+<p class="description">Join our team!</p>
+
+- [Software Engineer](/company/software-engineer/) • Remote or Paris<br />
+  We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple.

docs/src/pages/company/software-engineer/software-engineer.md

@@ -0,0 +1,89 @@
+# Software Engineer
+
+<p class="description">We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple.</p>
+
+## About Us
+
+Material-UI is a community and developer focused team that makes it easy to build amazing user interfaces, for any device, with React.
+
+Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type.
+
+Material-UI started back in 2014 to unify React and Material Design. Today, Material-UI has grown to become one of the world's most popular React UI libraries, backed by a vibrant community of more than 1M developers in over 180 countries.
+
+## Details of the Role
+
+- Type of work: Contractor (long mission, full-time, convertible to an employee position)
+- Start date: Immediately
+- Location: Remote (preference for UTC-5 to UTC+4), or Paris
+
+## Why we’re hiring
+
+Both our open source products and community, and our premium products are [growing fast](https://www.rank2traffic.com/material-ui.com) and we need talented engineers to keep that going!
+
+We need help to continue to improve the health of Material-UI open source: make the library easier to use, make it support more use cases, improve performance, make it more accessible, and make it easier to customize. We also need help keeping up with the community, guiding developers to answers, and just generally being a positive presence in the open source community.
+
+We also need to develop our premium content. We have a premium store, and soon an enterprise class offering, starting with the data grid.
+Enterprise features will build on the open source version of the components.
+
+## Why this is interesting
+
+Our solution is empowering React developers to build awesome applications. It should be easy, it shouldn’t require any advanced technical skills. Hundreds of thousands of developers use Material-UI every month. Let’s reach the full potential :D!
+
+Our premium products portfolio is still small, with a million interesting and challenging problems to solve.
+
+## What you’ll do on a day-to-day basis
+
+Depending on the day, you’ll:
+
+On the open source side:
+
+- **Help guide architectural decisions**. From modernizing the way we handle styles to building new components, the future of Material-UI is discussed and planned in our public RFCs and issues. You’ll be helping drive these conversations and guiding Material-UI toward the best possible solutions.
+- **Contribute to deep, meaningful refactors and feature releases**. Material-UI is a complex codebase. Components we’ve shipped recently, such as the Tree View and Slider have required weeks of dedicated, careful work.
+- **Reduce friction**. A large amount of the work on Material-UI is reducing friction and making it easier to use. This might involve careful API design, identifying and fixing top bugs, creating easier to understand error messages, and writing documentation and blog posts about features you ship.
+- **Collaborate with the community**. Many small as well as meaningful fixes and features have been contributed by the community. Your role as a core team maintainer is to draw the best out of the community — to inspire those across the world to create and contribute through your reviews of their issues and pull requests.
+- **Experiment and play**. Great, unexpected features and heisenbug fixes have come from a number of sources — relentlessly methodical processes of elimination, free-flowing team collaboration, inspiration by adjacent libraries and projects, and difficult-to-explain individual strokes of brilliance. Whatever your preferred style is for creating new things that others might not have thought of, you’ll find a welcome home on the team.
+
+Premium components:
+
+- **Take ownership of features from idea/mockup to live deployment**. You’ll shape and guide the direction of crucial new features, including new components.
+- **Ship. Early and often**. You’ll iterate and ship frequently. You’ll have a real impact on the end-user experience and you’ll love working on a team that builds stunning UIs and prioritizes delivering real user value as often as possible.
+
+## Experience you should have
+
+- **Expertise in the modern JavaScript ecosystem**. Material-UI is built on the shoulders of giants, making use of technologies such as ES2015+, TypeScript, Node.js, React, Next.js, webpack, and Babel.
+- **A track record of demonstrating an eye for design and solving real world user problems**. If you have a knack for shipping beautiful, intuitive software, we want you on our team.
+- **Experience building and shipping production code in a team setting** with a passion for writing tested, performant, and high-quality code.
+- **Strong written and verbal communication skills**. As part of the team, you’ll interface both directly and indirectly with community members and enterprise customers, and contribute to user documentation. Clear communication is fundamental in creating intuitive and compelling resources.
+- **Ability to dive into complex problems**. You should be able to quickly assess, understand, and iterate upon aspects of our codebase.
+- **Ready and willing to ask and answer questions**. If you’re comfortable saying you’re unsure, asking for help; but equally reaching out to assist others, you’ll be an incredible addition to our team. We thrive because of continuous learning. First time mistakes should be celebrated, not blamed.
+- **Avoid monolithic deliverables**. You scope and stage your work into well-defined milestones to ship.
+- **Past work with frontend infrastructure**. Perhaps you’ve created your company’s design system, written a babel plugin, or written complex React components. It would be great if you could address this in your cover letter!
+
+## Experience it would be nice if you had, but isn’t required
+
+- **You’ve maintained an active repository before**. Maybe you’ve helped maintain a popular open source repo, or perhaps you’ve worked on internal repos that saw contributions from multiple teams. Previous experience with highly active repo workflows is a definite plus for this role.
+- **You have used Material-UI before**. You have built a non trivial application with Material-UI in the past. You know the limitations of the library, you know a few areas that could be improved.
+- **You have contributed code to Material-UI before**. A history of contributing to Material-UI would be a definite plus.
+
+## The best parts of this job
+
+- **You’ll be at the cutting edge of application development** — working on one of the fastest-growing UI frameworks on the market.
+- **You’ll be part of an active, open, friendly community** of developers that are really excited about building awesome applications.
+- **Your role will be key to making Material-UI the go to UI framework** for building applications and design systems with React.
+
+## The worst parts of this job
+
+- **Shifting context.** You will necessarily have to shift context and dive into a different feature before the current one is done. It may even be in an area of the code base you’re unfamiliar with or don’t have a ton of understanding about. It’s fun, rewarding work, but it can be very challenging.
+- **We move quickly, but don’t sacrifice quality**. We ship early, often, and quickly. You may not be initially comfortable with the cadence with which we ship high-quality features and improvements to end users. By doing so, we sacrifice on solving each problem 100% in exchange for fast feedback. Solving 50-70% of the issue with quality should be enough for any given iteration. Our users quickly tell us when we haven't pushed a solution far enough.
+- **Material-UI is a large codebase**. You may bang your head against the wall at times, and then write tests to assist future you 😌.
+The work you would be doing is somewhat unique and idiosyncratic. You probably have not had a similar role before.
+- **In open source, you’re faced with a nonstop stream of bug reports and support requests**. That means you need to develop an intuition of when to ignore something and when to dig in further.
+
+## Benefits for you
+
+- A competitive compensation.
+- Flexible workplace & hours.
+
+## Apply
+
+[Apply for this position 📮](https://airtable.com/shrHB2jnnhdtsGkEN)