December 2023 Summaries

In this tutorial, we learn how to add typing indicators to a chat room within a simple tic-tac-toe game. Typing indicators are important as they provide users with information about when the other person is preparing to speak, similar to real-life body language cues. The implementation involves using Ably's Presence service and creating a custom hook called useTypingStatus. This hook manages the typing status of players in the chat room by sending updates when a user starts or stops typing. Additionally, it uses a debounce mechanism to limit unnecessary updates. Finally, we create a Status component to display messages indicating when an opponent is typing.

In this tutorial, a React application is created that allows users to see not only who else is currently viewing the grid but also what row each user has selected using AG Grid and Ably Spaces. The application uses an Avatar Stack component from Flowbite to display the online status of members in an application by showing an avatar for each member. Additionally, the tutorial explores how to set up initial member state and how to use Component Locking feature of the Ably Spaces SDK for simultaneous editing control.

The recent hackathon projects by Dolphin focused on enhancing productivity through realtime collaboration. Three notable projects include Cling, a multilingual chat app that breaks language barriers; Jsonbank, an online JSON data storage solution with CRUD access via API; and Atlas, a collaborative map for travel planning and event coordination. These projects leverage Ably's realtime capabilities to improve global connectivity and collaboration. The hackathon project gallery showcases more submissions, while users can sign up for free to build their own projects using Ably's services.

The recent hackathon challenge focused on creating innovative realtime information displays and dashboards using Ably's capabilities. Participants were judged based on the usefulness of their application, data visualization, and utilization of data sources. Winning projects included Mading Live, a bulletin board application; Mosaic, a collaborative workspace; and Real Time Log Monitor, an event logging and monitoring tool. These winning submissions showcase Ably's potential for realtime dashboard development.

WebSockets have come a long way since their introduction in 2011, but they still face compatibility issues with some browsers, firewalls, and proxies. While most modern systems support WebSockets, there are still edge cases where connections can fail due to outdated antivirus software, network providers, or strict security settings. Libraries like Socket.IO and SignalR provide HTTP fallbacks as a solution, but scaling these alternatives can be complex and time-consuming. Developers building realtime features with Ably can benefit from maximum compatibility and efficiency without worrying about backend infrastructure.

The State of Developer Ecosystem 2022 report reveals that JavaScript is the most popular language among developers, used by 65% of them and also as the primary language for 34%. Of all the JavaScript developers, 80% use at least one JavaScript framework. Factors influencing a framework's popularity include ease of use, relevancy, security, and flexibility. The blog post discusses some of the best JavaScript frameworks, including frontend, backend, fullstack, and realtime frameworks. React, Angular, Vue, Express, Fastify, Nest, Meteor, Next, Nuxt, Ably, Socket.IO, and Sails are among these frameworks. Each framework has its unique features, pros, cons, use cases, and applications. React is a component-based framework for single-page applications with reusable components and server-side rendering support. Angular is another TypeScript-based frontend JavaScript framework developed by Google that offers two-way data binding and built-in routing and forms. Vue is a progressive framework known for its easy learning curve, reusable components, and animations/transitions. In the backend, Express is the most popular framework with MVC architecture, middleware integration, and template engine support. Fastify is a lightweight framework built on top of Express that offers high speed and scalability. Nest is a progressive framework designed for enterprise-scale web applications and supports TypeScript and microservices. Fullstack JavaScript frameworks include Meteor, Next, and Nuxt. These frameworks handle both frontend and backend logic of a JavaScript application with features like server-side rendering, static site generation, routing, and realtime capabilities. Realtime JavaScript frameworks such as Ably, Socket.IO, and Sails provide functions to simplify the development of realtime features in an application. These frameworks offer Pub/Sub messaging, streaming data sources, push notifications, automatic reconnection, old browser support, packet buffering, ORM, auto-generated REST APIs, WebSocket support, etc. To choose the best JavaScript framework, consider project requirements, community support and documentation, common limitations, and flexibility.

The recent hackathon focused on demonstrating the benefits of realtime collaboration using Ably's capabilities, including its new Spaces product. Participants were judged based on the usefulness of their application, use of Ably collaboration features, and overall functionality. Winners included SharedOS, a realtime collaborative workspace; Plan it, a collaborative project management tool; and Ionic, a collaborative science experiment platform. These projects showcase the potential of Ably's technology in various applications and inspire others to build their own projects using Ably's offerings.