
# A mental model for engineering productivity

Your SaaS company is scaling. But you have a problem. Engineering is no longer cranking out new features. Engineering is stuck fixing bugs, replacing existing features and scaling infrastructure.

Business leadership is frustrated and every new CPO and VP Engineering promises a return to feature development glory. But, over time CPOs have come and gone, VPs of Engineering have been replaced, but the one thing that remains constant is the inability of engineering and product to return to rapid feature development.

What accounts for this gap between the expectations of the business and the output of the engineering and product organizations?

Is prior experience with on-prem software leading us astray? Unfortunately, yes, prior experience with on-prem software is giving us the wrong mental model to understanding engineering's role in a scaling SaaS business.

## Why is SaaS so different?

In on-prem software, you outsource maintenance and scaling to the customer. With SaaS, customers outsource maintenance and scaling to you.

In SaaS, scaling is feature development.

"But wait", you say. "Engineering should add new customer facing features as we scale the business. In my prior experience at International On-prem Software Co we continued to add features to the product as the business scaled. My expection is that we can rapidly add features while simultaneously scaling our SaaS product."

SaaS is fundamentally different. Scaling is making your product accessible to more customers. So, while scaling is not customer facing for existing customers, it is definitely customer facing for new customers who would otherwise be unable to use your product.

> In on-prem software, you outsource maintenance and scaling to the customer. With SaaS, customers outsource maintenance and scaling to you.

Let's use an example to highlight why scaling is feature development. In this example, we started a new company together which we named Global Cookies. We are going to start Global Cookies out of our home, but the company names indicates our large aspirations to disrupt the cookie industry.

In our Global Cookies example we are going to focus on the Head of Logistics. The physical nature of logistics, specifically transportation, provides a good proxy for understanding scaling as feature development. Also, the patterns to scale manufacturing and retail are more well-defined vs. SaaS. In big box retail there is pithy saying for scaling: "Perfect the box. Then build more boxes." Let's get started with our example.

## Launch

<figure style="display: inline-block; margin: 20px;">
    <img src="/website/blog/transportation/car.jpg"
         alt="Transportation at launch">
    <figcaption style="text-align: center; font-size: .7em; font-style: italic;">Transportation at launch is handled by our car</figcaption>
</figure>

At launch, we start by baking cookies in our home oven. Baking new cookie varieties (i.e. new features) is super easy.

Even shipping is easy. We pack our cookies in a generic bulk container and drive them in our car to local stores. Transportation of our cookies is easily handled by our personal car.

## Local growth

<figure style="display: inline-block; margin: 20px;">
    <img src="/website/blog/transportation/commercial-van.jpg"
         alt="Transportation during early growth">
    <figcaption style="text-align: center; font-size: .7em; font-style: italic;">Transportation during early growth is handled by commercial van</figcaption>
</figure>

Global Cookies is a hit and we're starting to see big demand. To support this growth we move out of our home and rent an industrial facility. Our home oven is now replaced by an industrial oven. Our bulk containers are still sufficient, but shipping is starting to become a problem so we replace our car with a commercial van.

Notice what's happening. We don't have any new cookies. We're scaling our business by replacing (i.e. scaling) the following infrastructure:

- our location has moved from our home to an industrial kitchen
- our home oven has been replaced with an industrial oven
- our car has been replaced by a commercial van

But wait you say? Where's the innovation? Why have we not developed new baked goods like cakes and croissants (i.e. new features)? Mom and pop stores bake so many different products and they release a new item every month! By comparison, our business is now providing cookies to a much larger customer base than the mom and pop stores. In other words, our innovation is focused on delivering value to more customers by scaling (i.e. replacing) what was previously working with more industrial alternatives.

## Local to regional growth

<figure style="display: inline-block; margin: 20px;">
    <img src="/website/blog/transportation/semi-truck.jpg"
         alt="Transportation during local to regional growth">
    <figcaption style="text-align: center; font-size: .7em; font-style: italic;">Transportation while going regional switches to semi-trucks</figcaption>
</figure>

We have achieved true product/market fit with two of our cookies: Chocolate Chip and Oatmeal Raisin Cookies. Growth is accelerating so we have limited our focus to these two types of cookies (i.e. we removed features to achieve scale).

People love our cookies. We are now transitioning from local to regional. Our original investors continue to add to our new funding rounds and now we're adding a new class of investors who focus on local to regional growth.

Our previous infrastructure is not able to handle cookie production and distribution for the entire Western United States. It's time to replace our commercial vans with semi trucks. We now outsource last mile logistics to companies that specialize in last mile. Previously we owned our own commercial vans, but now we can afford to offload this work to vendors. We also replace our prior industrial kitchen facility with a manufacturing plant. At our current scale, we develop customized boxes that keep our cookies fresh as they move across states.

Let's do a sanity check. Should we be upset with our business' performance overall? Is our Logistics department failing to meet expectations? The Head of Logistics is not adding any new functionality. Yet, quarter after quarter we're adding increased headcount to the logistics department. Logistics spend is the second largest for any department with only Sales consuming more cash. And, semi-trucks just move cookies from point A to point B. Our personal car also moved cookies.

At this stage we again replace the same few features that existed since our early days:

- our location has moved from an industrial kitchen to a manufacturing plant
- our industrial oven has been replaced by production lines and robotics
- our commercial van has been replaced by a fleet of semi-trucks

## Regional to national growth

<figure style="display: inline-block; margin: 20px;">
    <img src="/website/blog/transportation/train.jpg"
         alt="Transportation during regional to national growth">
    <figcaption style="text-align: center; font-size: .7em; font-style: italic;">Transportation as a national company adds trains to the mix</figcaption>
</figure>

The picture is becoming clear now. For completeness in our example, Global Cookies has transformed the regional cookie market. Given our performance we have raised fresh capital to fund our regional to national growth.

We are once again scaling our infrastructure to deliver a 10x cookie performance to ever greater numbers of customers.

To support our growth, we are now rethinking much of our infrastructure:

- our single manufacturing plant is now part of a series of regional plants
- our fleet of semi-trucks has been expanded and is now combined with refrigerated train cars

From a feature perspective, we have added no new functionality. And yet, scaling our infrastructure by replacing facilities, equipment and transportation now enables us to deliver our product to customers who would otherwise suffer without the superior Global Cookies experience.

## IPO and international growth

<figure style="display: inline-block; margin: 20px;">
    <img src="/website/blog/transportation/plane.jpg"
         alt="Transportation after IPO">
    <figcaption style="text-align: center; font-size: .7em; font-style: italic;">Transportation as an international company necessitates cargo planes</figcaption>
</figure>

We have hit a major milestone. Global Cookies has dominated the domestic cookie market and is going public to raise fresh capital to fund our global expansion. To support this growth we are again scaling our delivery capability by adding cargo planes. The narrative is clear at this point. Our focus has been on scaling the "transportation" feature, not on adding new features. We scaled from our personal car to commercial vans to semi-trucks to trains to airplanes.

So what about engineering? The Global Cookies engineering and product org built an industry-leading Cookie Ordering System (COS). As a cookie company, business leadership had the same expectations for engineering as logistics. Scale with the business. The Global Cookies COS SaaS app did not add many new features during our rapid growth. The primary focus was on scaling to deliver an exceptional cookie experience to an increasingly large customer base.

Global Cookies is just getting started. Now that we've achieved scale, it's time to prioritize new features ahead of scaling. Thanks to our focus on scale we now have substantial financial resources to invest into dominating the global cookie industry. This quarter Global Cookies is expanding our product portfolio to win the second largest cookie segment, Peanut Butter Cookies.

## Wrapping things up

Most SaaS companies hit a point in their growth curve where business leadership becomes frustrated with the lack of new feature development. Often this is expressed as frustration with a perceived lack of innovation from engineering and product. Much of this frustration originates from the lack of industry standard mental models to understand the various stages of growth. What follows is a game of musical chairs as the business cycles through product and engineering leadership in an attempt to return to new feature development at exactly the wrong time. Equally destructive, the business loses focus on scale as the primary objective.

Our example startup, Global Cookies, leveraged the well-defined growth inflection points of customer facing retail products. In our example, we saw how the Head of Logistics focused on scaling as a feature rather that new functionality. Delivery scaled from a personal car all the way to semi-trucks, trains and cargo planes.

Global Cookies did a few feature tweaks along the way, but shifted focus back to new product innovation after achieving scale. At scale, Global Cookies had a superior brand, more financial resources and a larger distribution network to win adjacent cookie markets.

Unfortunately, SaaS companies do not benefit from the long history that retail, manufacturing and other industries benefit from. The various growth inflection points are not as well-defined and do not benefit from physical breakpoints (such as changing from an industrial kitchen to a manufacturing plant or geographic changes during regional to national growth) that make inflection points obvious in other industries.

How can we apply these lessons to SaaS?

The first key takeaway is to understand the various growth inflection points in your SaaS company. It's key to know when to add features at the expense of scale and when to scale at the expense of new features. Scaling is expensive in money, time and people's focus. But the upside is immense. A scaled SaaS business is extremely valuable, so it's key to know when to prioritize scale.

## What is Eminate.io

Eminate.io helps SaaS businesses scale the product organization by improving information flows. Eminate.io delivers super powered messaging by automating Slack.

[Join the Eminate.io waitlist](/waitlist) to be added to our closed beta as new spots open up.


Why your engineering org is stuck fixing bugs and rebuilding existing features


# Introducing Eminate.io to enable Product and Engineering managers to save 5+ hours per week

## Eminate.io automates and orchestrates team communication in Slack

PALO ALTO, CA - September 3, 2021 - Eminate.io today launches the Eminate.io app for Slack that saves managers 5+ hours per week. Eminate.io is the first communication orchestration layer that enables managers to automate and visualize communication across product teams.

> If you could get all the people in an organization rowing in the same direction, you could dominate any industry, in
> any market, against any competition, at any time. Traction by Gino Wickman

The pandemic accelerated the adoption of Work From Anywhere (WFA). While WFA has many benefits it introduces new communication challenges for managers and teams as employees are no longer centrally located in an office. High fidelity in-person communication has been replaced by asynchronous Slack messages and emails combined with Zoom meetings. Keeping everyone informed and aligned requires substantial effort by managers. For engineers, PMs, and other team members staying informed is nearly impossible due to the excessive noise caused by a deluge of messages in Slack and email.

A second key trend in product teams (engineering, product management, SRE, and program management, etc) is a change in how teams work. The old way of working involved managing tasks and processes which was akin to managing "how" teams and people work. Today, highly skilled teams are managed by driving alignment and measuring outcomes. In other words, modern managers no longer focus on how teams work (ie tasks and processes) and instead focus on aligning high performance teams with a shared understanding of the desired outcomes.

> Driving alignment and managing outcomes is more effective than managing tasks and processes.

Eminate.io is based on the premise that people know how to do their jobs and that a manager's role is to align people to focus on achieving the desired outcome. We believe that managing how people work is micromanagement.

## Eminate.io

### Organizational Cadence

Eminate.io provides managers with the ability to define and share an organizational cadence. A cadence provides everyone in the organization with a shared understanding of the key events that drive a company forward.

> Cadence: A rhythmic sequence or flow

For example, a company may define a cadence that includes an annual performance review, a quarterly update to product strategy plus a quarterly offsite, a quarterly business review (QBR), a monthly team-wide meeting, and a weekly newsletter along with additional important events that repeat in a rhythmic pattern.

### Closed-loop Communication

Managers spend 5 or more hours per week following up with peers and direct reports. Eminate.io automates follow-up and aggregates responses.

> If you say something once, it's as if you haven't said it at all.

As an example, a Director of Production Engineering may request everyone on her team to review and provide their input on proposed changes to the software development lifecycle (SDLC). Eminate.io will automatically follow-up with everyone on the team who has not yet reviewed the new SDLC and provides the Director with visibility into who has completed this request.

### Org Structure Awareness

Eminate.io is aware of your org structure and can route messages based on the org structure and/or based on a matrix structure. Org structure awareness routes messages to your manager, peers and direct reports as well as teams and individuals. Knowledge of your org structure allows Eminate.io to cascade messages down an org structure in a way that is not possible today (we explain cascaded messages below).

### Cascade Messages

Corporations have complex messaging needs that require human intervention to filter and refine at each level of management as the information flows through an organization.

For example, a Chief Product Officer (CPO) may share information with his/her leadership team that must be filtered and refined before cascading down from VPs to Directors. In this example, a CPO may share an unannounced acquisition with the VPs which is not yet ready to be distributed to the Directors and below. Eminate.io's Cascaded Message functionality allows the CPO to cascade the message to everyone in the organization where each level of management creates a linked message that shares the theme provided by senior management but is appropriately messaged to each level of the organization. Cascaded messages provide human-in-the-loop intelligence while ensuring critical information is delivered to everyone in the company.

### How to get started

[Join the Eminate.io waitlist](/waitlist) to be added to our closed beta as new spots open up.

## FAQ


Introducing Eminate.io


So you've build a great looking Blitz.js or Next.js application with Material UI and it's time to deploy. You've tested your application and everything looks perfect. But then you run your production build and your UI is completely broken. The wrong styles are applied to most of your custom components.

Why does this happen? Why does code that works perfectly in development break when built for production.

Look no further than Webpack.

Webpack is not used in development but is used during the production build. Webpack introduces two changes that mess with the CSS and you'll need to fix both to get a consistent production build that matches the development build.

- Order of precedence
- className conflicts

## Order of precedence

First, Webpack changes Material UI's order of precedence. By default, styles for Material UI provided components should come before styles for your custom components.

Material UI prefixes its classes with `Mui`. You want all `Mui*` CSS to come first, so add an option to `makeStyles` to push your custom styles down:

### Hooks

Add the `index` option as shown below if you're using hooks.

```
const useStyles = makeStyles({
    // put your styles here
}, {index: 1})
```

### Higher order components (HOC)

Add the `index` option as shown below if you're using higher order components (HOC).

```
MyCustomComponent = withStyles({
    // put your styles here
}, {index: 1})(MyUnstyledCustomComponent)
```

## className conflicts

The second issue is that the classes you define in Material UI have nondeterministic class names. This is done to prevent name collisions.

However, the way that Blitz/Next split up bundles causes Material UI to get confused which results in the wrong classes being used by each custom component. This is what breaks during the build. Fortunately, there's a solution.

The key to solving this issue is the fact that the default Material UI class names are deterministic. These start with `Mui`.

We are going to use the `Mui` prefix, then combine a prefix for our company, then a component name. For example, for the `BlogArticle` component we combine `Mui` with `Mn8` (for Eminate) with `BlogArticle`, which results in a name of `MuiMn8BlogArticle`.

> There is a caveat. You no longer benefit from Material UI's work to prevent name collisions, so you need to provide some type of scoping prefix to avoid name collisions.

### Hooks and Mui prefix

The example below shows how to combine the `index` change from above with the `name` correction when using hooks.

```
const useStyles = makeStyles({
    // put your styles here
}, {index: 1, name: "MuiMn8MyCustomComponent"})
```

## Hooks and global styles

The example below shows how to combine the `index` change from above with a global style when using hooks.

```
const useStyles = makeStyles((theme) => ({
  "@global": {
    ".mn8TestRule": {
      backgroundColor: "red",
    }
  },
  flexGrow: {
    flexGrow: 1,
  },
}), {index: 1, name: "MuiMn8MyCustomComponent"})

... and then in your JSX

<div className="mn8TestRule">
    I am a test
</div>
```

### Higher order components (HOC) and Mui prefix

The example below shows how to combine the `index` change from above with the `name` correction when using Higher Order Components (HOC).

```
MyCustomComponent = withStyles({
    // put your styles here
}, {index: 1, name: "MuiMn8MyCustomComponent"})(MyUnstyledCustomComponent)
```

## Additional reading

- <a href="https://material-ui.com/getting-started/faq/" target="_blank">https://material-ui.com/getting-started/faq/</a>


Blitz.js Production Builds with Material UI


Comparing CSS / React UI frameworks can be difficult. This article not another shootout between Tailwind CSS, Chakra UI, Material UI and other CSS / React frameworks. There are many blog posts that compare these frameworks and adding another will not help much.

However, many engineers are tripped up due to that lack of nuanced language to explain the differences between these options. Too often people are making apples to oranges comparisons (ie which one is better) when it would be more productive to think about the level of abstraction provided by each solution.

<a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a> is excellent, as is <a href="https://chakra-ui.com" target="_blank">Chakra UI</a>, as is <a href="https://material-ui.com" target="_blank">Material UI</a>, and as are many other UI frameworks. Comparing each is not an apples to apples comparison and very often does not make sense.

So, let's introduce some new terms and/or refine current terms.

### CSS

Definition: CSS is the language we use to style and HTML document and HTML elements.

### CSS Framework

Definition: A CSS framework combines CSS into utility classes that form the foundation of a design system.

<a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a> is a good example of a CSS framework.

A CSS framework saves you time by providing combinations of CSS into the foundation of a design system.

### CSS Components

Definition: CSS components combine CSS framework utility classes into visual, not functional UI components.

<a href="https://tailwindui.com" target="_blank">Tailwind UI</a> and <a href="https://getbootstrap.com" target="_blank">Bootstrap</a> are good examples of CSS Components.

Note: <a href="https://getbootstrap.com" target="_blank">Bootstrap</a> provides both a CSS framework and CSS components, plus some JavaScript. However, the JS is not useful when building a React app. We'll address this below.

CSS components provide UI components that provide visual solutions, however they do not provide the React and JavaScript/TypeScript required to provide functionality.

CSS components save you the trouble of combining CSS utility classes into UI components, such as a Toolbar or a Card or even a larger component such as a pricing section. This is a good choice when you want attractive CSS components but want to exercise control over all JavaScript/TypeScript used in your application.

### React Base Components (Primitives / Building blocks)

Definition: Low-level, composable React components that can be combined into higher level application components.

<a href="https://chakra-ui.com" target="_blank">Chakra UI</a> is a good example of a library that provides low level React components. Chakra provides composable React components that are styled via its design system. Chakra is flexible and enables you to compose application level components, such as a `Topbar` / `Appbar`/ `Navbar`, by combining `Box`, `Link`, `Text`, `Stack` and other components.

React base components save you time by removing the need to write the foundational JavaScript/TypeScript required to make your low-level React components functional. this is a good choice when you don't want to write foundational functionality but would like to exert more control over your application components by composing them yourself.

### React application components

Definition: React application components provide React UI components that are ready to drop into your application.

<a href="https://material-ui.com" target="_blank">Material UI</a> provides React application components such as an `App Bar`, `Menu` and other application level components. If you're using Bootstrap then <a href="https://react-bootstrap.github.io" target="_blank">React Bootstrap</a> is a viable option.

React application components make it easier to build applications as most components can be quickly combined into a complete application. The downside is a steeper learning curve which is offset by the benefit of leveraging someone else's work for the core JavaScript/TypeScript functionality.

### Unstyled components

There's a another class of component libraries that are worth mentioning. Unstyled components can be either React base components, React application components, or a mix of the two. What sets unstyled components apart is the fact that they are uncoupled from a CSS framework / CSS components.

Unstyled components will save you time by providing JavaScript/TypeScript functionality while not forcing your application to look like commonly used CSS frameworks/components.

- <a href="https://reakit.io" target="_blank">Reakit</a>
- <a href="https://headlessui.dev" target="_blank">Headless UI</a>: Built by the Tailwind UI team.
- <a href="https://reach.tech" target="_blank">Reach UI</a>
- <a href="https://rebassjs.org" target="_blank">Rebass</a>

## Wrapping up

Hopefully it is now clear why comparing Tailwind CSS with Chakra UI is an apples to oranges comparison. The following should help clarify which library / framework to select depending on your requirements:

- **CSS framework**: Choose a CSS framework if you want maximum control at the expense of doing more work yourself. <a href="https://tailwindcss.com" target="_blank">Tailwind CSS</a> is a good choice if you want low-level control.
- **CSS components**: Ideal if you want attractive UI components but want to write the JS/TS yourself. <a href="https://tailwindui.com" target="_blank">Tailwind UI</a> is a solid CSS framework as is <a href="https://getbootstrap.com" target="_blank">Bootstrap</a>.
- **React base components**: Choose this option if you want to save time by composing ready made low-level React components, but still want to compose application-level components yourself. <a href="https://chakra-ui.com" target="_blank">Chakra UI</a> is a good choice at this level.
- **React application components**: This is a good choice if you want to quickly put together an application's UI at the expense of learning curve and some generic styling. <a href="https://material-ui.com" target="_blank">Material UI</a> is a good choice for higher level components.
- **Unstyled React components**: Unstyled components are ideal when you want to leverage pre-written React components but want flexibility with styling.

Join the conversation. <a href="https://twitter.com/EminateIO/status/1380256238554902529" target="_blank">Share your thoughts and feedback on Twitter.</a>


Welcome to the Eminate.io Blog

Articles about management, leadership, and improving communication within companies.

Why your engineering org is stuck fixing bugs and rebuilding existing features

Introducing Eminate.io

Blitz.js Production Builds with Material UI

Tailwind CSS vs. Chakra UI vs. Material UI