Github Copilot: Write Unit Test Case in React Native Component & Expo for Frontend Developers

 If you don't have prior knowledge about Github Copilot, Please refer my Previous Article https://sureshdotariya.blogspot.com/2024/03/getting-started-with-github-copilot-gpt.html 

Setup React Native Project using Expo

We are going to setup a new React Native Project using Expo CLI Tool. Please refer the installation documentation  https://docs.expo.dev/tutorial/create-your-first-app/ . Once your setup is complete, You will find the below folder structure and App Running in your Simulator or Real Device.

How to use GitHub Copilot

To use GitHub Copilot, you need to have a subscription to GitHub Copilot for Individuals or GitHub Copilot for Business. (Free trials are available). You also need to install the GitHub Copilot extension for Visual Studio Code or the JetBrains IDE plugin. Once you have the extension or plugin installed, you can start using GitHub Copilot in your editor.

GitHub Copilot works by analyzing the code and comments in your file and suggesting relevant code snippets that you can accept or reject. You can also write natural language prompts to ask GitHub Copilot to generate code for specific tasks or scenarios.

After, you signup to Github Copilot from the Visual Studio Code, You will see Copilot Chatbot icon in left hand side (last one).

Write Unit Test in Github Copilot

• open App.js file in VSCode Editor

• In Github Copilot Chatbox input, Please type this text "Write unit test case for the selected component" and press enter.

• Github Copilot will generate the  unit test case for the App.js Component.

• create a new app.test.js  file in the root directory and paste the generated unit test case.

• Also you need to install jest, jest-expo & react-native testing library

       npx expo install jest-expo jest        

 

     npm install --save-dev @testing-library/react-native

• In Package.json, enter Jest Script & Jest Configurations 

                "scripts": {

                    "test": "jest"

                  },

                "jest": {

    "preset": "jest-expo",

    "transformIgnorePatterns": [

      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"

    ]

  },

• Finally, run 'npm run test', which will execute the Unit test cases and execution result will be displayed. 

Getting Started with GitHub Copilot GPT-3 AI Model

Github Copilot is the future of software development, which helps the developers to build productive and good quality of Software. Github Copilot is an AI pair programmer that helps you write code faster and with less work. It is similar to Code Completion tool, but it's been designed with ChatGPT-3 Algorithm . It draws context from comments and code to suggest individual lines and whole functions instantly. GitHub Copilot is powered by OpenAI Codex, a generative pre-trained language model created by OpenAI.

Github Copilot  has been trained with the GPT-3 Artificial Intelligence Model. Here are the advantages for GPT-3 AI Model.

• It's stand for Generative Pre Trainer Transformer
• It' has been trainedwith more than 100 billion parameters / Source Code. Mostly Open Source Code
• It generates Source Code based on the language you pick. It will generate decent code which won't be production ready. As per their docs and research survey, Github Copilot will generates 46 % of code and remaining 54% of code will be written by developers.

How to use GitHub Copilot

To use GitHub Copilot, you need to have a subscription to GitHub Copilot for Individuals or GitHub Copilot for Business. (Free trials are available). You also need to install the GitHub Copilot extension for Visual Studio Code or the JetBrains IDE plugin. Once you have the extension or plugin installed, you can start using GitHub Copilot in your editor.

GitHub Copilot works by analyzing the code and comments in your file and suggesting relevant code snippets that you can accept or reject. You can also write natural language prompts to ask GitHub Copilot to generate code for specific tasks or scenarios.

After, you signup to Github Copilot from the Visual Studio Code, You will see Copilot Chatbot icon in left hand side (last one).

Ultimate Guide to React Native Optimization On Tour by CallStack

Callstack is organising the Ultimate Guide to React Native Optimization Tour in San Francisco on April 11 2024. This Meetup will take place in the Gefen Gallery, a contemporary and modern art gallery in the heart of San Francisco located at 315 Grant Ave, San Francisco. 

WHAT'S ON THE AGENDA

Get ready for an evening packed with knowledge! We've lined up three captivating talks featuring experts from Callstack and a special guest from Shopify:

• Łukasz Chludziński (Callstack) - Deep dive into optimizing a React Native TV app with real-life enterprise project insights.

• Adam Horodyski (Callstack) - Unpack the performance optimization journey of the Expensify app with React Native, revealing the process and outcomes.

• Talha Naqvi (Shopify) - Explore a fascinating case study on improving the Shopify app’s performance and discover how the development team cut app launch and screen load times significantly.

Please click here to Signup for the event.

Also, if you are interested to improve the React Native Performance Techniques, Please download this free ebook Ultimate Guide to React Native Optimization eBook.

React Native Performance: How to Profile the Hermes JS Engine

Today, we came across an React Native Performance Tool react-native-release-profiler , While listening the CallStack Performance Optimization Technique Webinars. 

Callstack Performance Optimization Recording Webinar

React-Native-Release-Profiler 

As per Github Docs, It is a simple library to passively profile JS/Hermes performance in production and release builds.

Usually performance issues are profiled in debug builds, which could lead to false positives (e.g. JS Garbage Collectors, Hermes-specific debug markers, or other LLDB hangs).

react-native-release-profiler allows you to profile your app in release builds, both in a local environment to profile specific issues, as well as in a production environment to spot regressions or collect performance samples from a wider variety of user devices.

For Installation and code usage, Please refer the below GitHub Link and Issues

https://github.com/margelo/react-native-release-profiler

https://github.com/facebook/hermes/issues/760

React Strict DOM : Cross Platform Development Made Easy

In February 2024, React Facebook team introduced React Strict DOM as an Experimental one that aims to improve and standardize the development of styled React components for web and native apps. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at Meta ship features faster, to more platforms, with fewer engineers.

In Real World, We have to maintain two separate Development team for Web Application development using ReactJS & Native Mobile App Development using React Native.  Reactjs is a library which uses React DOM to communicate with Browser API's. React Native is a Mobile Framework that helps to Development Native Mobile application for Android & IOS Platforms, Android TV, Apple TV, Watch & VisionOS.  

Problem in React DOM

React DOM package is great for creating web applications using ReactJS. It is a package that provides DOM-specific api's that can be used at the top level of a web app to enable an efficient way of managing DOM HTML elements in the context of a Web application. However, when developers want to migrate the cool features and seamless experience of their web apps to mobile devices, they hit a roadblock. The problem is, React DOM doesn’t naturally fit into the native world. This means developers often have to create a separate version of their app using React Native, which is designed for mobile platforms.

Doing this basically doubles the workload. Not only do developers have to learn and manage two different development team (React DOM for web and React Native for mobile), but they also have to duplicate their efforts to make sure both versions of the app work well and offer a consistent experience to users, regardless of the device they’re using. In certain scenarios, this process can be time-consuming, complex, and prone to errors, making it harder to keep the app updated and running smoothly across all platforms.

The existing solution for targeting web with React Native framework is to use React Native for Web. React Native for Web is a user-space library built on top of React DOM and native DOM APIs. It shims React Native components and APIs on the web. The tooling for an existing React DOM app simply maps the ‘react-native’ export to ‘react-native-web’. — Nicolas Gallagher (https://github.com/necolas)

What is React Strict DOM

React Strict DOM (RSD, react-strict-dom) represents a groundbreaking step forward in the world of cross-platform development using React. It aims to unify these development paths by offering a set of APIs and components that are designed to work seamlessly across both web and native. It achieves this by adhering to a strict subset of the DOM API that is compatible with both web and native environments. This means that developers can write their code once and expect it to run everywhere — be it a web browser, iOS, Android, etc — with minimal platform-specific adjustments.

The idea behind RSD is not just about reducing the workload for developers but also about enhancing the consistency and reliability of React applications across platforms. By standardizing the behavior of components and APIs, RSD ensures that applications behave predictably no matter where they are run. This is a significant improvement over the current scenario, where subtle differences between React DOM and React Native can lead to bugs and inconsistencies in cross-platform applications.

Furthermore, RSD integrates closely with StyleX, a CSS-in-JS library from Meta, to provide a unified styling solution that works across platforms. This integration allows developers to style their applications using a familiar CSS-like syntax while benefiting from the performance and safety features of StyleX.

Please refer the original  medium blog regarding code Implementation..

How to integrate New Relic, A Real User Monitor Tool into ReactJS Web Application

 What is New Relic

As per their official docs, New Relic is a web-based software used for full-stack monitoring. It allows you to monitor applications, infrastructure, web browsers, and other components on a single platform. This tool tracks and provides your web application performance details in real time.

Today, we are going to look, how we can integrate New Relic Browser Monitoring tool into ReactJS Web Application. 

It provides a real user monitoring (RUM) solution. It measures speed and performance as your end users navigate to your site through different web browsers, devices, operating systems, and networks. But browser monitoring goes far beyond providing information about the initial page load. Use it to measure full page life cycle data and start getting the info you need to help ensure customer satisfaction.

New Relic lets you monitor the data from browser activity and optimize performance across your entire stack. Use browser monitoring to help ensure successful deployments and quickly troubleshoot customer-visible problems. Monitor your stack at a glance and make sure all your entities are operating as they should. Visualize application speed and performance, JavaScript errors, AJAX requests, and more. Spend less time trying to chase down issues and more time delivering a perfect digital experience to customers.

Step 1: 

Signup to the New Relic Free Account, https://newrelic.com/signup

Step 2:

After Signup, You will be redirected to their dashboard Screen

Step 3:

From Side menu, Click 'Browser', You will be requested to create an Application by selecting the respective Frontend programming language (Angular, ReactJS & Javascript).

Enter Application Name and Pick the programming language as ReactJS.

Step 4:

Copy the Javscript code snippet and put in your ReactJS Web Application index.html, before closing <head> tag.

Once it is done, Refresh your web application and navigate to others pages. You will see real time monitoring data will be reflected in the New Relic Dashboard.