Ever wondered when you started coding as a beginner, and after a few months, the same piece of code you wrote becomes difficult to read or understand. This is a genuine problem for every beginner or new developer joining the team. Thus there is a need to follow coding protocols to rescue this basic problem. Following best coding practices helps us understand the code later. It becomes easy to maintain and extend our application whenever any new member joins the team as they will also be following the same set of principles maintaining uniformity across the team.
Going further, we will be looking into some of the standard best coding practices currently followed in the tech industry (probably in the React Native world).
1. Structure the files and folder properly –
No matter what your application is all about, one basic principle popular in the react ecosystem is keeping all the code-related files and folders into the src folder (source folder) and images or any resource file into the separate assets folder. This src and assets folders are exposed in the root folder as depicted in the below layout (React-Native app).
2. Keep the component and screen clean –
The next important point to note is keeping the component clean which means for all the API fetch or DB operations we need to dispatch an action from the component and finally, the reducer should change the state.
One should also keep all the long-coded logic wrapped inside a helper function and call that function from the component.
3. Keep the app responsive and avoid Inline Styling –
Ensure your app doesn’t break when rendered on different-sized devices. Define styles at the proper breakpoint and use responsive elements such as flex and provide relative values instead of absolute ones while styling. Inline stylings should be avoided as it distracts the reader from the main code and confuses them with a lot of unnecessary lines. Keep them into a separate style.css file.
It’s good to use
<SafeAreaView> when using react native to render the component. It ensures the component remains positioned correctly in all iPhone devices.
4. Utils Folder –
Ensure your utils folder contains helper, constant, and enum files only. For config files, keep them in a separate folder.
5. Ordering imports in the file –
Divide all imports into segments logically and provide one line gap between each segment as it helps during code review. Ensure you should order all the imports added in the component/screen file alphabetically and sequentially in the below order.
6. Use ES6 Concepts and get rid of legacy code
It’s always advisable to use the latest version of libraries present and use ES6 concepts if starting from scratch.
For instance: Usage of
const instead of
7. Document everything neatly –
Ensure to add meaningful JSDoc comments to the function created by you. It will guide new developers on what this function is all about.
8. Remove logs from the final app build –
Remove all the
console.log() statements from the final build as too many log statements may impact the performance of the app.
9. Add test cases in your app –
As we know no app is deployment ready until it’s tested thoroughly, so testing plays a vital role in app development. One can do unit testing, snapshot testing using JEST and Enzyme to test the component being rendered as per expectation.
So these were some of the best coding practices which you can follow while building your project. It will definitely reduce the number of bugs and crashes in your application. Thanks for reading!
Mobile App Development Best Practices – 21.09
iOS Closures vs. Delegates in Swift iOS How to use the new inspector SwiftUI view modifier How to create an...
2023 App Threat Report
In 2022 alone, the number of mobile app downloads surpassed a staggering 200 billion, emphasizing the pervasive presence of these...
ElectricSQL – Local-first sync layer for web and mobile apps
Local-first sync layer for web and mobile apps. Build reactive, realtime, local-first apps directly on Postgres. What is ElectricSQL? ElectricSQL...
GitHub Copilot Chat opened to individual developers
Like similar chatbots, Copilot Chat sits in the sidebar of the IDE, and developers can use it to have lengthy...
ComposeCard – A beautifully designed payment view library
ComposeCards is a beautifully designed payment view library for Credit and Debit Cards. Made using Jetpack Compose 🎉. It allows...
Mobile App Development Best Practices – 20.09
Airship has released another study of mobile users aka shoppers. A lot of interesting things about habits and tasks in...