-
Notifications
You must be signed in to change notification settings - Fork 19
4. Technologies
The backend of a web app is the part that runs on a server and handles the logic, data storage and communication of the app. It is responsible for processing user requests, interacting with databases and APIs, and sending responses to the frontend (the part that runs on a browser and displays the user interface). The backend enables complex functionality, security, and scalability of a web app. Without a backend, a web app would be limited to static content and simple interactions that do not require any data manipulation or verification.
Firebase is a Backend-as-a-Service (BaaS) platform that provides developers with a suite of tools for building and managing web and mobile applications. Firebase offers a range of services including real-time databases, authentication, hosting, storage, and more. These services can be integrated into web or mobile applications with just a few lines of code, allowing developers to focus on building the core functionality of their applications rather than worrying about managing the backend and making sure it is secure and reliable. Firebase is known for its ease of use, scalability, and real-time capabilities, making it a popular choice among developers for building and deploying dynamic and fast-paced applications.
Firebase offers a suite of services that can be used to build, manage, and scale applications. Some of the key features of Firebase include real-time database, authentication, hosting, cloud functions, storage, and machine learning. The real-time database provides a way to store and retrieve data in real-time, which is ideal for real-time applications such as chat apps and multiplayer games. The authentication service provides a way to authenticate users using email, phone number, or social media logins. The hosting service provides a way to host and serve web content. The cloud functions service provides a way to run backend code in response to events triggered by Firebase features and HTTPS requests. The storage service provides a way to store and serve files such as images, videos, and audio. The machine learning service provides a way to build and train machine learning models. With these services and tools, Firebase provides a complete solution for building and deploying web and mobile applications.
The current system uses Firebase for its backend services. Firebase is easy to start with as it provides many tools such as authentication, database, cloud functions, etc. as mentioned before. This allows for faster development and is well-tested and proven, as many developers use it. Additionally, these tools also for faster development as less functionality has to be implemented as less rigorous testing is required. Furthermore, as this is a service, there is less maintenance as this is handled by the provider in this case Google.
However, it is a paid service for large applications and the costs add up rapidly. Additionally, the database (Firestore) is non-relational, which may not be suitable for all applications, especially for highly relational data which was the case for this application. Firebase may also be less flexible as it is not custom-built for the exact specifications of the system. Despite these limitations, Firebase is widely used, and there is a large community of developers with many resources available.
The front end of a website is the part that users can see and interact with on their browsers. It includes elements such as text, images, buttons, menus, forms, and animations. The front end is also called the client-side because it runs on the user's device. It is important to make the front-end well designed, engaging, and accessible as it is what users directly interact with.
React is a popular JavaScript library for building user interfaces and has been widely adopted by developers for building web and mobile applications. React allows developers to create reusable UI components and manage the state of their applications, making it easier to build complex and dynamic user interfaces. React uses a virtual DOM (Document Object Model) to efficiently update the UI and optimize performance. This makes React a fast and reliable option for building high-performance applications.
For this project, both the first prototype and the current system use React. Both also use React component libraries for faster and more agile development.
React component libraries are pre-built and pre-styled UI components that can be easily imported and used in React projects. These libraries provide a set of components with consistent design, behavior, and functionality, making it easier for developers to build user interfaces and ensure consistency across their applications. React component libraries are a great way to speed up development and reduce the amount of time spent on creating and styling individual components. They also help to maintain a consistent design and user experience, making it easier for users to navigate and understand the application.
As mentioned before, both the current system and the first prototype use React and component libraries for faster development and well-tested styling that adheres to accessibility guidelines. This means that high-level components do not have to be created from scratch and custom CSS does not have to be developed and thoroughly tested. However, the use of component libraries makes it less flexible, making it harder to implement more complex UI designs that were not added to the library.
Chakra UI has proven to be easier to use compared to Material UI. It has a smaller library of components, but this has not been a problem in the current system. Chakra UI is also more flexible in terms of using custom designs, as it does not follow a set design standard like Material UI but rather allows the developer to build from what is provided. Additionally, Chakra UI provides a theme object that changes the theme of the entire app at once, making it easier to manage the overall design and reducing the risk of inconsistencies.
In React, state is an updatable structure (observable object) that is used to contain data or information about the component. State is used by React to control how a component behaves depending on its current state. This state changes when certain events take place or by specific user interactions. Once the state changes due to the event, the component would observe this and re-render. Because state is dynamic, a component can keep track of changing information between renders, thereby keeping it dynamic and interactive.
State management is the process of handling state changes in a React application. State management involves creating, updating, and accessing the state object in a component. State management also involves passing state data to other components as props. The purpose of state management is to make the application consistent, predictable, and easy to debug. State management helps to avoid unnecessary re-rendering of components and ensures that the UI reflects the latest state data. State management also helps to organize and modularize the code by separating concerns and responsibilities among components. Furthermore, using state a manager helps avoid fetching data from the backend caching the data locally and reusing it across components.
React has a built-in tool for managing the state called React Context API. This is not suitable for large projects for various reasons. One of the reasons is that it is cumbersome to use when there are multiple pieces of state that need to be shared across different components. Multiple context providers and consumers need to be created, which can result in a lot of boilerplate code and nested components, and makes it difficult to manage the state. Another reason is that it does not support derived or computed state that can depend on other state or external sources requiring additional libraries or custom logic to achieve this functionality. Finally, it can cause unnecessary re-rendering of components that consume the context, even if they don't use the part of the state that changed.
A state manager is a tool or library that helps with state management in a React application. A state manager provides features such as global state, actions, reducers, selectors, middleware, etc. that simplify and optimize state management. For example, Redux is a popular state manager for React that implements the Flux architecture. The main reason to use a state manager is to handle complex and large-scale applications that have many components that share and manipulate state data. A state manager can help with performance optimization by avoiding unnecessary re-rendering of components. A state manager can also help with code readability and maintainability by enforcing best practices and patterns for state management.
For this project, Recoil is the state management tool that was used. It provides many advantages over the Context API built into React. Recoil uses atoms and selectors, which are fine-grained units of state that can be subscribed to individually, this prevents unnecessary re-rendering from components that may be related to a state. Recoil provides one context provider (atom or selector) which can be accessed from any component, this eliminates the need to create multiple context providers. Finally, Recoil supports derived state with selectors, which can also handle asynchronous operations and error handling unlike the Context API.
There are several state management solutions available, each with its own unique features and benefits. Redux is one of the most popular state management solutions for React. Jotai is a relatively new state management solution that provides a simpler and more intuitive approach to state management. Rematch is another popular state management solution for React. Zustand is another minimalistic state management solution that is easy to use and implement. Recoil was chosen for this project because it provides a unique approach to state management that combines the best features of other state management solutions.
In conclusion, the choice of state management solution depends on the specific requirements of the project. Recoil was chosen for this project because it provided a balanced approach to state management, combining the best features of other popular state management solutions. However, for other projects, a different state management solution may be a better fit depending on the project's requirements and complexity. It is important to consider the benefits and drawbacks of each solution and choose the one that best fits the project's needs.