Announcing Ignite Bowser 3.0 — The Flattening

We are pleased to announce the release of Ignite Bowser 3.0!

Bowser is the latest and greatest React Native boilerplate created by us here at Infinite Red for our wildly popular app generator, Ignite CLI. As a successor to our popular Andross boilerplate, Bowser introduced not only a new stack (MobX State Tree, and Typescript) but also a revamped folder structure.

However, if you’ve used Bowser, and you felt that folder structure was a bit confusing and hard to follow, you’re not alone.

Just opening up the main directory, you find src… and then app… and a whole lot of configuration files before finding the actual application code.

And then once you get to the end of the alphabet and find all of the screens and components under views, things continue to nest, and it can be difficult to find what you’re looking for.

Then there are domains. What is a domain anyway? Something you buy from GoDaddy? Well yes, but in our case, domains were supposed to be a helpful way of organizing your components and screens into folders related to your application’s business logic. In reality, they are more confusing than helpful and didn’t end up being the universal value-add we had hoped.

So what’s new with 3.0?

After listening to your feedback about Bowser, and using it ourselves, we’ve decided to flatten out the folder structure, AKA “The Flattening”.

• First of all, there is no more src directory. Everything now lives in app, since that’s what we’re building… an app!
• All components now live under app/components.
• All screens now live under app/screens.
• Generators no longer prompt you to pick a “domain” when generating a new component, screen, or model. We simply place the new item under components, screens, or models.
• We consolidated main.tsx and root-component.tsx into one app.tsx which lives at the root of app.
• We moved setup-root-store.ts into app/models/root-store/
• We also renamed lib to utils because that felt like a more descriptive name.

Here’s what the new folder structure looks like as a whole:

app/
  components/
    text-field/
      index.ts
      text-field.tsx
      text-field.story.tsx
      text-field.props.ts
  i18n/
  models/
    root-store/
      setup-root-store.ts
  navigation/
  screens/
    first-example-screen/
      first-example-screen.tsx
      bowser.png
      bowser@2x.png
      index.ts
  services/
    api/
    reactotron/
  theme/
    fonts/
    color.ts
    spacing.ts
    typography.ts
    index.ts
  utils/
    validate.ts
    keychain.ts
    delay.ts
    storage/
  app.tsx
  environment-variables.ts

For a more in-depth look at what’s in each folder, check out the README.

Where can I see an example?

Good news! We recently tested this new structure out on the app for our popular React Native conference, Chain React.

infinitered/ChainReactApp2018

And while you’re at it, sign up for the Chain React Newsletter because tickets are going on sale January 28!

What’s not changing in 3.0?

We aren’t changing everything!

• The stack you love, including MobX State Tree, Typescript, and react-navigation isn’t going anywhere.
• We are continuing the pattern of storing helper files like tests, stories, and image assets right alongside their relevant component, screen, or model. This is in contrast to having separate directories for test files, stories, images, etc.

How do I get the update?

If you’re about to Ignite a new app, just choose Bowser when asked “Which boilerplate would you like to use?” and you’ll get the latest and greatest!

What if I liked the old way better?

We know some of you may have been partial to the “domain” way of life. We believe that this new, flatter, structure will serve as a more generic starting point for the majority of people. In fact, we think it will actually make it easier for folks to re-organize and sort their components in ways that make sense to them. So go forth and make folders!

However, if you’d prefer to keep using the old folder structure and you are Igniting a new app, Ignite CLI 2.2.0 allows you to specify the boilerplate version, so you can run:

ignite new FooApp -b ignite-bowser@2.0.3

What does this mean for my existing Bowser app?

If you’ve already Ignited an app using the Bowser boilerplate, nothing much will change for you. You may want to pin ignite-bowser to 2.0.3 to avoid any changes to your generators.

Acknowledgments

Thank you to the team here at Infinite Red for their hard work on Bowser throughout all of its iterations and for their thoughtful feedback on this restructure.

Additional thanks for Cindy Nguyen for the Bowser graphic!

Robin Heinze is a senior software engineer building React Native apps at Infinite Red, an app design and development agency. Follow her on Twitter or Github.