Skip to Content
All posts

GSoC-2020 Proposal

 — #react#redux#node.js

Project description

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

This project is about building an inspector intercepting and visualizing server-sent event traffic to help the developer to easily see what exact data are received from the server and when. This inspector should be a part of the existing Network panel in Firefox DevTools. This project should ideally build upon the existing WebSocket inspection tab by adding support for server-sent events inspection.

Goals

  • View the size of the packets and the time when it was received.

  • View the payload of each event.

  • Support for sort and filter with respect to parameters like time and size.

  • View the event headers, source and content in an organized manner as well as in JSON format.

Implementation plan

Client side development plan:

  • To create an interface that supports and visualizes the JSON packets that are being obtained onto the client machine. This will be added upon as an additional tab in the networks panel in the DevTools section.

  • A change in the Toolbar section of the codebase to include the UI change to navigate to the tab, and a modification to the base function will be added to incorporate the same.

  • An additional CSS file that contains the styles of the above mentioned tab will be appended to src/assets directory.

  • A React function that governs the UI and the general framework of the panel is to be developed. Redux reducers will be used to respond to the changes by making the necessary changes to the panel.

Server side development plan:

  • An actor is to be created that will reside on the server (browser). The code will be a part of the devtools/server/actors/network-monitor directory on Mozilla devtools.

  • This actor will be responsible for monitoring the events received and relying the information to the client via JSON objects.

  • The actor will ensure the proper formatting of the objects before it is sent to the client. This includes the checks for headers, content, timestamps among others.

Architecture plan:

  • The Remote Debugging protocol (RDP) is a Mozilla debugging protocol that allows a debugger to connect to a browser, discover what sorts of things are present to debug or inspect, select JavaScript threads to watch, and observe and modify their execution. This protocol is to be used to communicate between the client and the server.

  • All communication between debugger (client) and browser (server) is in the form of JSON objects. This makes it easier to implement, debug and test the components being developed.

  • Client is responsible for rendering data it receives from the server and the server is responsible for collecting data and sending it over to the client with necessary information.

Sequence diagram:

Sequence Diagram

Testing strategies

  • Static code analysis using SonarQube/SonarCloud.

  • Unit testing for the individual functions written in Javascript.

  • Integration testing to ensure the rest of the components are working as expected.

Timeline

May 4 - May 15

Familiarize myself with the code, mentor and community, the version control system, the documentation, the development environment and test system used.

May 16 - June 1

Modularize the final goal and set a deadline for each of the module completion after discussing with the mentor. Also, get the environment ready and potentially develop, test and commit a small portion to the development environment.

June 2 - June 15

Build the UI for the client side debugger to support the JSON objects received from the server. This will also include the support to sort and filter the objects received using parameters like size, timestamp and payload.

June 16 - August 5

Develop the server side actor that will essentially monitor the requests and relays the information to the debugger. Also write tests that control the quality of the code being developed.

August 6 - August 15

Polish the existing UI and improve upon it to render a neat view visualizing the details of individual events. This period is also to be used for extensive testing to make sure the components are working as expected and does not modify the behavior of other components.

August 16 - August 24

Document the written code and release the component into production after final mentor review and testing.