[blog] 2019 in review and beyond

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: The year 2019 was a great one 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.
+
+The year 2019 was a great one 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 library!
+
+## 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, that we did the hardest part with the release of the stable version. We thought that 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 has successfully released [a premium store](https://themes.getbootstrap.com/).
+The approach opens an opportunity to capture a fraction of the value Material-UI creates for its users and fuel it back into R&D on the framework.
+- The market for paid UI components is in the order of a couple of $100m/year.
+They are dozens of companies positioned in this market.
+While React is only one technology to build UI among others (jQuery, Angular, ASP.NET, Blazor, Vue, WPF, UWP, etc), 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 of UI libraries out there need the same features but are implemented with a wide spectrum of accessibility, API 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. This will likely mean releasing an unstyled 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 (source of truth).
+- We have introduced [native tree-shaking](/guides/minimizing-bundle-size/) support.
+- We have introduced [built-in localization](/guides/localization/).
+- We have remove a good chunk 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 the previous year.
+
+### Open source roadmap
+
+Most of the time, we work in the open, you can find 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 are looking into the support of Sketch, Figma, and Adobe XD.
+
+### Enterprise
+
+We will start an enterprise offering, for advanced use cases, with the data grid.
+The enterprise features will be built 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, we document [a couple of ways](/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project).
+For instance, spreading the word to other developers that are looking for a great UI framework is extremely useful 🙌.

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/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

@@ -137,6 +137,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,87 @@
+# 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 2015 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 / 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 improving 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, 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 themes and templates marketplace, and soon premium components bundled under a Material-UI Pro offering.
+
+## 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.
+
+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 build 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. Meaningful features we’ve shipped recently, like a Tree View component, Slider component, they have often required a couple weeks to a month of dedicated, careful work.
+- **Reduce friction**. A large amount of the work of 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-use 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 on the team 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.
+
+On the premium side:
+
+- **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 like ES2015+, TypeScript, Node.js, React, Next.js, webpack, and Babel.
+- **A track record 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 our open source team, you’d interface both directly and indirectly with community members, 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, and reaching out to assist others, you’ll be an incredible addition to our team. Our team thrives 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 maybe 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 solution** for building applications and design systems with React.
+
+## The worst parts of this job
+
+- **Shifting context.** You may 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 give up on solving each problem at 100%. Solving 50-70% with quality should be enough for any given iteration. Our users manifest themselves, they quickly tell us when we don’t push 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.
+
+## Apply
+
+[Apply for this position 📮](https://airtable.com/shrHB2jnnhdtsGkEN)