Repository navigation
Technical Report
- React Native library with Expo as the framework.
React Native
React Native is an open-source UI software framework created by Facebook Inc (now Meta Platforms). It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities. It follows a “Learn Once, Write Anywhere” philosophy.
Examples of apps made with it: Facebook, Instagram, Discord.
Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
- ExpressJS framework with NodeJS as the runtime environment. MongoDB as database.
ExpressJS
Express.js is a back end web application framework for building RESTful APIs with Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs.It has been called the de facto standard server framework for Node.js.
NodeJS
Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser.
Node.js lets developers use JavaScript to write command line tools and for server-side scripting. The ability to run JavaScript code on the server is often used to generate dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, as opposed to using different languages for the server- versus client-side programming.
MongoDB
In the social networking project, MongoDB is used as the primary database due to its ability to handle large volumes of dynamic and unstructured data, such as user profiles, posts, and connections. Its document-oriented structure allows for flexible and scalable data storage, making it easy to accommodate evolving app features without the need for rigid schemas.
MongoDB's support for indexing and efficient querying ensures fast retrieval of user-generated content, which is crucial for maintaining a responsive and engaging user experience. Additionally, its replication and sharding features provide high availability and scalability, essential for managing the growing user base and data traffic typical of social networking platforms.
We chose the above stack for various reasons. We chose React Native because of our earlier knowledge of JavaScript, which makes learning it easier than other stacks. RN follows a JSX-like syntax and is similar to React.js except that the tags are platform-agnostic.
We chose to add Expo to make development easier and quicker, as it provides a readymade framework.
Since we were using React Native, it was natural that we used node.js and Express.js as they’re based on JavaScript and thus we have a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language.
We used this tech stack because of our earlier knowledge of JS, thus it becomes easy for us to use it. The technologies used in this project are used in real-world situations by companies around the world. And being JS-based technologies, the devs are in high demand due to the existing environments.
The other motivation was our placements. Since the tech stack is in high demand, it would be great if we leant it as it can be a good addition to our CV.
-
Cross-Platform Development: Allows you to build mobile apps for both iOS and Android using a single codebase.
-
Native Components: Uses native components for better performance and a more native look and feel.
-
Hot Reloading: Enables you to see the changes you make in your code immediately without rebuilding the app.
-
Rich Ecosystem: Extensive libraries and third-party plugins to enhance functionality.
-
Development Tools: Provides a set of tools and services to build, deploy, and quickly iterate on React Native apps.
-
Managed Workflow: Simplifies the development process by handling native code and dependencies.
-
Over-the-Air Updates: Allows you to push updates to your app without going through the app store review process.
-
Cross-Platform APIs: Offers a wide range of APIs for camera, location, notifications, and more.
-
JavaScript Runtime: Allows you to run JavaScript on the server side.
-
Event-Driven Architecture: Handles multiple connections efficiently using non-blocking I/O.
-
NPM Ecosystem: Access to a vast repository of open-source libraries and modules.
-
Scalability: Suitable for building scalable network applications.
-
Minimalist Framework: Lightweight framework for building web applications and APIs.
-
Middleware Support: Allows you to use middleware to handle requests, responses, and routing.
-
Routing: Provides robust routing capabilities for handling different HTTP methods and URL paths.
-
Template Engines: Supports various template engines for rendering dynamic content.
-
NoSQL Database: Stores data in flexible, JSON-like documents.
-
Scalability: Designed to scale out horizontally with sharding.
-
High Performance: Optimized for read and write operations.
-
Aggregation Framework: Powerful querying and data aggregation capabilities.
-
ODM Library: Object Data Modeling library for MongoDB and Node.js.
-
Schema-Based: Defines schemas for your data models, enforcing structure and validation.
-
Middleware: Supports middleware for pre and post hooks on various operations.
-
Query Building: Provides a fluent API for building and executing queries.
React Native was built as a platform-independent app development tool using the “Learn Once, Write Anywhere” philosophy. It uses a JavaScript thread which uses JavaScript components and renders it on the native thread using native components. Thus it can work on any modern operating system like Android, Android TV, iOS, macOS, tvOS, Web, Windows etc as if it’s a natively-run app.
We are primarily using it to run on Android devices with possible support for the web.
-
React Native has a mature and large community compared to others, with a wealth of resources, tutorials, and third-party libraries available. Being based on JavaScript, it benefits from the extensive ecosystem of the JavaScript community. This can make development easier and faster due to the availability of pre-built components and solutions.
-
When compared to job opportunities, React Native is preferred due to its longer time in the market. React Native devs are in higher demand as it’s an established technology.
-
Since we know JavaScript already, it made sense to use the MERN stack as we don’t have to learn new languages from scratch.
-
React Native uses a bridge to communicate between the JavaScript thread and native thread, which can introduce performance bottlenecks, especially for complex applications.
-
React Native relies on native components for rendering, which can sometimes lead to inconsistencies and performance issues compared to Flutter's approach.
We are using both Windows and Linux (Fedora Linux) for development.
On Windows
-
Install node.js using the prebuilt node.js installer
-
Open the terminal and install the React Native CLI
`npm install –g react-native-cli`
`react-native init <app name>`
- Follow the instructions on the command line
On Linux
- Install node.js through the terminal (dnf/apt/pacman etc)
`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash`
`nvm install 20`
- Open the terminal and install the React Native CLI
`npm install –g react-native-cli`
`react-native init <app name>`
- Follow the instructions on the command line
We are using MongoDB as the database. It is a popular NoSQL database that manages data in a document – oriented form. It stores data as collections within which there are documents that store key value pairs. The documents are stored in BSON format (Binary JSON) which is similar to JavaScript’s JSON format. This allows easy integration with JavaScript based application.