Operations | Monitoring | ITSM | DevOps | Cloud

React

Tips for Optimizing React Native Application Performance - Part 2: Using Sentry SDK for Performance Monitoring

Monitoring performance in front-end applications is vital. It focuses on the areas of the application users experience. These areas are slow rendering or frame rate, network request errors, and unresponsive user experience. Your application’s users expect the experience of using the application to be fast, responsive, and smooth. In the first article of this series, we discussed some tips for optimizing your React Native application performance.

Implementing OpenTelemetry in React applications | Tutorial

More about SigNoz: SigNoz - Monitor your applications and troubleshoot problems in your deployed applications, an open-source alternative to DataDog, New Relic, etc. Backed by Y Combinator. SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. SigNoz uses distributed tracing to gain visibility into your software stack. If you need any clarification or find something missing, feel free to raise a GitHub issue with the label documentation or reach out to us at the community slack channel.

Tips for Optimizing React Native Application Performance: Part 1

React Native is an amazing framework for building cross-platform mobile applications. It helps you provide a high-quality, native-looking application that runs on multiple platforms, using a single codebase. The current React Native architecture uses the UI (or main) thread and the JavaScript thread. The JavaScript thread is used to run business logic, make API calls, process touch events, etc. The UI thread is where animations and transitions are done.

Continuous integration for React applications using Jest and Enzyme

React continues to be the web framework of choice for many UI developers, surpassing jQuery as the most popular framweork in the 2021 Stack Overflow Developer Survey. It provides an intuitive model for building data-driven user interfaces, and efficiently updates the DOM when this data changes. React pairs nicely with Redux for managing the data that React needs to render interfaces. Redux offers a predictable way to structure and update the data in those frontend applications.

Implementing OpenTelemetry in React applications

OpenTelemetry can be used to trace React applications for performance issues and bugs. You can trace user requests from your frontend web application to your downstream services. OpenTelemetry is an open-source project under the Cloud Native Computing Foundation (CNCF) that aims to standardize the generation and collection of telemetry data. React (also known as React.js or ReactJS) is a free and open-source frontend JavaScript library for building user interfaces based on UI components.

Creating snapshots in Jest for testing React applications

Automated tests are especially important in large applications that have lots of moving parts. It is smart to learn about many methods of testing applications so that you can provide as much coverage as possible. If you are not familiar with using snapshots in testing, read on. Snapshot tests are written as part of frontend test automation.

Deploying a React application to Netlify

React, a front-end framework for building user interfaces, uses component-based architecture and non-opinionated design principles, making it a developer favorite. React has been widely adopted and has a large community of developers behind it. Netlify is a popular framework for hosting React applications, but it does not provide your team with the highest level of control over the deployment process. As a result, you are not able to perform important tasks like running automated tests.

Tracking Stability in a Bluetooth Low Energy-Based React-Native App

For most of my career I’ve worked with health and wellness startups. Most of these companies have a wearable that tracks movement, heart rate, body weight or stimulates a body part. The common denominator between these apps is their use of sensor data to determine physiological progress an athlete is making. Problem is, your Bluetooth Low Energy (BLE) device does not have an internet connection and cannot send diagnostics anywhere if there are errors.

Building a React dashboard to visualize workflow and job events

Data visualization is the process of translating large data sets and metrics into charts, graphs, and other visuals. The resulting visual representation of data makes it easier to identify and share real-time trends, outliers, and new insights about the information represented in the data. Using CircleCI webhooks, we can gather data on workflow and job events. In this tutorial, I will lead you through the steps to create a React-based dashboard to visualize this data.