Welcome aboard! 🛥️
As we have active users that uses this boilerplate, we will try to improve communication about updates we're releasing. It's important for us to give you new reasons to try this boilerplate out! We would love to have new ideas to make it even more convenient!
To do so, we will post a changelog every major updates. Unlike the changelog in the releases tab, we will here provide more details and maybe some examples.
In this first post, we will present the current state of this boilerplate.
This boilerplate is the core of every react-native applications we develop at TheCodingMachine. This means that we are the first users! If an issue appear we are the first affected 🥺, that's why this project is actively maintained!
The main idea behind this boilerplate is to have just the necessary and well-known stuff to have a very "easy to use" boilerplate for little and big real world apps.
We don't include components libraries, we don't depend on third-party libraries (like Firebase for example). It's just a good template project that is build on top of all the accumulated experience of our mobile teams. It also provides a solid architecture that facilitates separation of concerns between the UI, the state management and the business logic. Like that, everyone can add its own touch! 🖌️
🚨 Every decision about the technical stack are made regarding our preferences (every library has his pros and cons).
Installation has been facilitated since the v2.0.0, thanks to the use of the react-native-cli and custom template. To run this boilerplate, the only commands you need are
That's this simple! 🚀
Since the v3.0.0, during the installation, you can choose to use typescript for your new app. All the boilerplate will then be translated in typescript.
That's this simple! 🚀
As I said before, main concerns are simplicity and scalability. Each of the used libraries are well-known, tried and tested.
For the state management we use Redux (redux + redux toolkit + redux persist). Some people like it, some people don't. We are really comfortable with this library, it's not so difficult to learn, and the implementation is well-known, recognized as a good choice and easy to debug! Thanks to this boilerplate and redux-toolkit, the state management is ready out of the box. A complete example is even included. This way, you can easier understand how it works. To deal with the navigation, React Navigation is THE reference for screen navigation. For the internationalization we use I18next. Well-know library, really easy to use and providing nice hooks.
This project is a Redux-toolkit wrapper (yes... it's obvious 😅) used to write less code regarding classic CRUD operations.
Redux-toolkit provide a lot of abstraction for async operations, but we always have to create a
state and associated reducers.
Redux-toolkit-wrapper abstract these async operations. For a classic "fetch one user" operation all you need is adding these files :
Next, you can use your state in your container like this:
That's this simple! 🚀
For more details about redux-toolkit-wrapper jump here
Still hesitating ? Let's make a recap and see what this beautiful boilerplate can provide you:
- No headaches! 🤒 Thanks to the quick and easy install, the documentation and of course the included example! (if you have all the installed requirements of course)
- Never again sailing on troubled waters with React Navigation: THE powerful library to handle navigation 📱
- Redux (with redux-toolkit and redux-toolkit-wrapper 😉) : handling redux store has never been as easy as this!! ⚡
- DarkMode or colorful app? Give your users the power to choose! Multi-theming and darkMode support 🌗 (see here)
- French kisses aren't translatable, but you can translate your app! i18n friendly 🌐 (see here)
- You don't like bug hunt? Use Flipper debugging 🐛 (see here)
- Maintained by passionate developers ⚛️
Just Test It 🧪 !!
Freshly in the v3.0.0 we created an installation plugin system. Of course, the first plugin added is the typescript one. 😉 We are now able to add local or npm plugins to our boilerplate in order to apply them during the installation. This way, we get the app template with the features we asked for. In other words, no unwelcome pieces of code will lay in your app architecture anymore.
You got it, it's only the beginning thinking about the many plugins we could create for this project. 🤩 So wait and see what could be the next plugins...🕓🤐
Before starting this project, we looked for already existing boilerplates. We've found some, but while many were (and are always) awesome, we did not find what we were looking for: a light, scalable, and flexible boilerplate with a great separation of concerns.
One of the most popular was Matt Mcnamee's React Native Starter Kit, which unfortunately missed Redux middleware and React Navigation.
Digging deeper in the react-native boilerplates (ignoring unmaintained projects), many popular boilerplates were too opinionated: they included 3rd party services or very strong architecture choices that we were not comfortable with. To name a few:
- Snowflake ran with a Hapi Server running on Redhat OpenShift,
- Apollo's StarterKit is based on GraphQL using Apollo,
- Meteor Boilerplate is based on Meteor.
Finally, some did not contain the architecture we were looking for (the separation of concerns), for example re-start.
One interesting exception was Ignite IR Boilerplate "Andross", but after consideration we decided not to use it because of the large amount of unnecessary code/components it provided out of the box.
In 2021, some react-native boilerplates have changed. Let's see what are the differences:
|Boilerplate||Difference from our|
|bartonhammond/snowflake||Seems not maintained anymore (last release was in 2017) 💤|
|spencercarli/react-native-meteor-boilerplate||Seems not maintained (no release, last commit was in 2018) 💤|
|react-everywhere/re-start||Seems not maintained (last release was in 2017) 💤|
So there is no reason to hesitate : come 🧲, test 🧪 and leave a star ⭐
Thanks for reading, See you for the next release. 🏷️