September 2023 Summaries

Modern web development requires realtime experiences and communication between users and servers. WebSocket is a protocol that allows full-duplex two-way communication over a single TCP connection. React applications can use WebSockets to receive updates and notifications without delay, with components subscribing to WebSocket events and updating the UI in response to incoming data or events. Alternatives to WebSockets include HTTP long polling, Server-sent events (SSE), and WebRTC. This article explores top WebSocket libraries for React applications, including React useWebSocket, Socket.IO, SockJS Client, and WS, along with their pros, cons, and use cases. Factors to consider when choosing a WebSocket library include project requirements, library limitations, React compatibility, and community support.

Ably, a realtime data delivery platform, has introduced support for React Hooks in its JavaScript SDK. This integration allows developers to efficiently and idiomatically integrate Ably's realtime functionality into their React-based applications. The use of React Hooks enhances code quality, maintainability, and performance while making it easier to integrate with the Ably platform. Ably's suite of React Hooks features includes the AblyProvider component for setting up the Ably client, useChannel hook for subscribing to a channel and receiving messages, usePresence hook for subscribing to presence events on a channel, useConnectionStateListener hook for attaching a listener to be notified of connection state changes in the Ably client, useChannelStateListener hook for attaching a listener to be notified of channel state changes, and useAbly hook for accessing the Ably client instance provided by the AblyProvider context.

When building a React web application, one feature you might consider is a notification system. Notifications enhance user experience by providing real-time updates, alerts, or calls to action. The choice between building a custom notification system from scratch or going for an off-the-shelf solution can influence your project's overall cost, resource allocation, and success. Building a custom React notification system involves several factors such as the notifications source (local or push), methods of pushing notifications from server to clients (Push API, SSE, WebSockets), displaying notifications to end users (Notifications API for browser notifications, In-app Toast notifications for React), and expanding user notifications to additional channels. However, building a custom notification system can incur hidden costs such as upfront development costs, maintenance and scaling costs, missed opportunity costs, and costs of inadequate functionality. Off-the-shelf notification solutions like Firebase Cloud Messaging (FCM), OneSignal, Pusher, Twilio, Sendbird, and Ably can be a great alternative to building a custom solution. These services come pre-built with features such as push notifications, in-app messaging, user segmentation, and analytics. When choosing between off-the-shelf solutions and custom notification systems, consider factors like reliability, scalability, feature set, ease of use, performance, and data handling control. Ably is a great option for adding notifications in React apps due to its feature-rich experience, reliability, scalability, and ease of integration.

Ably is hosting its first virtual hackathon on DevPost, offering $19,000 worth of prizes. The event runs from September 18th to November 1st and features two categories: Realtime Dashboards and Collaboration Experiences. Participants can also participate in a bonus React challenge. Prizes include cash, virtual meetings with Ably team leaders, blog posts featuring projects, and swag bags. Submissions require a video demo and either a functional app or public code repository. Helpful resources are available, and regular office hours will be hosted on Discord during the hackathon period.

In this article, we explored the top 11 React chart libraries to consider for your next project. These include react-google-charts, D3.js, Recharts, Visx/Airbnb's Visx, react-flow-chart, react-financial-charts, react-charts, ant-design-charts, MUI charts, react-chartkick, and react-chartjs-2. Each library has its unique features, strengths, and weaknesses, making them suitable for different project requirements. When choosing a React chart library, consider factors such as the nature of your project, design consistency, performance and scalability, customization and flexibility, integration and compatibility, and the learning curve and documentation.

Spaces is an innovative product that offers a purpose-built SDK to enable developers to integrate realtime collaboration features into their existing applications. The intuitive APIs allow for quick integration of avatar stacks, live cursors, member location, and component locking. This high-performing tool is built on market-proven infrastructure with five nines SLAs and messaging guarantees. Spaces works seamlessly with Ably's other products like Pub/Sub Channels to provide end-to-end realtime messaging throughout the app. The beta release includes APIs for Space, Members, Member location, Live cursor, and Component locking. Developers can sign up for a free developer account and explore Spaces further through its documentation and webinar.

Category Visionaries is a podcast featuring interviews with founders and CEOs who are disrupting their industries. Recently, Matthew O'Riordan, CEO of Ably, discussed his inspiration for founding the company and its focus on realtime technology. He cited Stripe as an influence due to its clear mission statement and Netflix's book about its journey of disruption. The vision behind Ably was a future built on realtime collaboration, which led to the development of reliable realtime infrastructure. Despite initial challenges in defining Ably's business category, it has become a unique service with various use cases. Developers have been crucial to Ably's success, and its product-led growth strategy relies heavily on them.

Research from Matillon and IDG reveals that data volumes increase by 63 percent per month on average in an organization, making it crucial to have the right tools for examining such substantial amounts of data. Data visualization is key to deriving useful insights from this data, as it turns complex raw figures into meaningful visual representations. Google Charts is a free data visualization library provided by Google that offers a straightforward API, diverse chart options, customization capabilities, and interactivity. The React community has developed a "react-google-charts" library to streamline the integration of Google Charts into React applications. This tutorial provides an overview of how to get started using Google Charts with React, including setting up a basic React project using Vite, installing and importing Google Charts using react-google-charts, creating your first chart with Google Charts and React, customizing charts in Google Charts, dynamic data integration in React Google Charts, using APIs or live data sources with Google Charts in React, interactivity and event handling, and customizing tooltips.