Skip to content

Commit

Permalink
Added home and setup sections. WIP: navigation, network and state
Browse files Browse the repository at this point in the history
  • Loading branch information
Santi Casas committed Jul 22, 2024
1 parent 42e42d1 commit 428d6b3
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 20 deletions.
1 change: 1 addition & 0 deletions .ruby-version
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
3.2.0
7 changes: 7 additions & 0 deletions docs/navigation.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Navigation
layout: default
nav_order: 3
---

# Navigation
9 changes: 9 additions & 0 deletions docs/network.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: Network Management
layout: default
nav_order: 5
---

# Data handling

Axios is utilized as the HTTP client for making network requests in React Native. Fetch API provided by the browser is powerful but lacks features like interceptors, request cancellation, and automatic JSON parsing. Axios, with its intuitive API, support for Promise-based requests, and features such as interceptors and automatic JSON parsing, offers a robust solution for handling data fetching and communication with backend services.
37 changes: 37 additions & 0 deletions docs/setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: Environment setup
layout: default
nav_order: 2
---

# Environment Setup

Hey team! Getting our React Native app up and running with Expo is a breeze. Here’s a quick guide to help you set everything up. We'll keep it light and link you to the detailed docs where needed.

## Steps

### 1. Install Node.js

First things first, we need Node.js. It's like the engine that runs our app. Head over to the [Node.js website](https://nodejs.org/) and grab the latest LTS version.

### 2. Create a New Expo Project

With Node installed and ready to go, let’s start a new project. Run:

```bash
npx create-expo-app@latest
```

Pick a template you like and you're all set! If you need more info, the [Expo project setup guide](https://docs.expo.dev/get-started/create-a-project/) has you covered.

### 3. Run the app

Once the project has been created just go to the project folder and run:

```bash
expo start
```

### 4. Connect a Device

To see your app live, scan the QR code generated by Expo CLI with the Expo Go app (available on the [App Store](https://apps.apple.com/us/app/expo-go/id982107779) and [Google Play](https://play.google.com/store/apps/details?id=host.exp.exponent&pli=1)) or connect your emulator. If you want to run the app without Expo Go or you want to know more about how to run the app on a device, here’s the [Expo Go guide](https://docs.expo.dev/get-started/set-up-your-environment/).
24 changes: 24 additions & 0 deletions docs/state.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
title: State Management
layout: default
nav_order: 4
---

# State Management

In this section, we're going to dive into how we manage app state in the projects we work on at the company. We'll explore different approaches and tools, like the Context API and Redux Toolkit, and discuss when and why we might choose one over the other.

Using the Context API for state management in a microservice architecture can be a pretty cool approach, especially if your app's state management needs are on the simpler side and pretty localized. The Context API lets you pass data through your component tree without having to manually pass props down at every level, which makes it super handy for managing state shared across multiple components within the same subtree.

In a microservice setup, where each service handles its own state management and communication with other services, the Context API can be a great fit. Here’s why:

Simplicity: Setting up and using the Context API is much easier compared to something like Redux Toolkit, especially for smaller applications where you don’t need all those complex state management features.
Decentralization: Each microservice can manage its own state independently with the Context API, promoting a decentralized architecture where services are loosely coupled and can evolve on their own.
Scalability: The Context API scales well as your app grows in size and complexity. Each microservice can encapsulate its own state and logic without the extra overhead from a centralized state management solution like Redux.
Performance: Since the Context API doesn’t require a global store and reducers, you can often see better performance. It reduces the amount of boilerplate code and avoids unnecessary re-renders.
However, there are a few things to keep in mind when choosing between the Context API and Redux Toolkit:

Complexity: If your app’s state management needs are complex, with features like time-travel debugging, middleware, or serialization, Redux Toolkit might be a better fit. It offers a comprehensive feature set and a robust ecosystem.
Cross-cutting Concerns: If multiple microservices need to share state or communicate with each other frequently, a centralized state management solution like Redux might provide better coordination and consistency across services.
Developer Familiarity: Consider what your development team is more familiar with. If your team has experience with Redux and prefers its patterns and conventions, it might make sense to stick with Redux even in a microservice architecture.
In summary, while the Context API can be a great choice for state management in a microservice architecture—especially for simpler applications or when you value decentralization—the decision should ultimately be based on your project’s specific requirements, complexity, and constraints, as well as your team’s preferences and expertise.
43 changes: 23 additions & 20 deletions index.md
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
---
title: Home
layout: home
layout: default
nav_order: 1
---

This is a *bare-minimum* template to create a Jekyll site that uses the [Just the Docs] theme. You can easily set the created site to be published on [GitHub Pages] – the [README] file explains how to do that, along with other details.
# Welcome to the Mobile Team's React Native Code Guidelines!

If [Jekyll] is installed on your computer, you can also build and preview the created site *locally*. This lets you test changes before committing them, and avoids waiting for GitHub Pages.[^1] And you will be able to deploy your local build to a different platform than GitHub Pages.
![Mobile Development](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExa25idWVmanJwOHVwMmV2Zm5td2Rkd2E1dTA4M3dxaTZyd3FxMjBnOSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/yBwgX64KAPrHW2ltZ2/giphy.webp)

More specifically, the created site:
Hey Team!

- uses a gem-based approach, i.e. uses a `Gemfile` and loads the `just-the-docs` gem
- uses the [GitHub Pages / Actions workflow] to build and publish the site on GitHub Pages
Welcome to our React Native Code Guidelines! 🎉 Here, you'll find everything you need to know about writing clean, efficient, and maintainable code for our mobile apps. Whether you're a seasoned developer or just getting started, these guidelines will help us all stay on the same page and produce top-notch code.

Other than that, you're free to customize sites that you create with this template, however you like. You can easily change the versions of `just-the-docs` and Jekyll it uses, as well as adding further plugins.
## Why Do We Need This?

[Browse our documentation][Just the Docs] to learn more about how to use this theme.
Great question! Consistency is key to our success. By following these guidelines, we can:

To get started with creating a site, simply:
- **Collaborate Smoothly**: When everyone writes code in a similar way, it's easier to understand and work on each other's code.
- **Maintain Quality**: Clean code is easier to debug, test, and maintain. This means fewer bugs and faster development!
- **Onboard Quickly**: New team members can get up to speed faster if our codebase is consistent and well-documented.
- **Enjoy the Process**: Let's face it, writing and reading clean code is just more fun!

1. click "[use this template]" to create a GitHub repository
2. go to Settings > Pages > Build and deployment > Source, and select GitHub Actions
## What You'll Find Here

If you want to maintain your docs in the `docs` directory of an existing project repo, see [Hosting your docs from an existing project repo](https://github.com/just-the-docs/just-the-docs-template/blob/main/README.md#hosting-your-docs-from-an-existing-project-repo) in the template README.
Here's a sneak peek of what we cover:

----
- **Code Structure**: How to organize files and folders in our projects.
- **Styling**: Our rules for writing clean and readable code, including naming conventions and formatting.
- **Best Practices**: Tips and tricks for writing efficient and maintainable code.
- **Common Pitfalls**: Mistakes to avoid and how to fix them.
- **Useful Tools**: Recommended tools and libraries that make our lives easier.

[^1]: [It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll#creating-your-site).
## Let's Make It Happen!

[Just the Docs]: https://just-the-docs.github.io/just-the-docs/
[GitHub Pages]: https://docs.github.com/en/pages
[README]: https://github.com/just-the-docs/just-the-docs-template/blob/main/README.md
[Jekyll]: https://jekyllrb.com
[GitHub Pages / Actions workflow]: https://github.blog/changelog/2022-07-27-github-pages-custom-github-actions-workflows-beta/
[use this template]: https://github.com/just-the-docs/just-the-docs-template/generate
Remember, these guidelines are here to help us, not to restrict us. Feel free to suggest improvements or ask questions anytime. Let's work together to keep our codebase clean, efficient, and fun to work with.

Happy coding! 🚀

0 comments on commit 428d6b3

Please sign in to comment.