Overview
Sonobi’s data-driven supply side platform (SSP) directly integrates with publishers and is built out for direct advertiser access to enable both parties to utilize their own, first-party data to find targeted audiences for specific ads without reliance on third party cookies to deliver its privacy-forward solutions.
Global Deals – List View
A key part of Sonobi’s Jetstream UI is the Global Deals UI. This is where I spent most of my time. This list view uses a combination of legacy jQuery code with the addition of new components being constructed in React. This UI operates on a few different backend technologies in a similar fashion using PHP as it’s legacy codebase and GraphQL for the modern/newly created assets.
I implemented the use of a “Lazy load” for the content coming back from the APIs. Page load times were upwards of 20-30 seconds on larger accounts causing a huge issue in workflow for the clients. Using React and GraphQL I created a server-side search system that decreased the initial UI Paint to 1-2 seconds. The following callouts to fill the remaining fields would then start up, displaying individual spinners for each item waiting for it’s response.
Global Deals – Details
In the Detail view, a need to display all information in an organized way was key. During my time at Sonobi there were plenty of additional data points that needed to be added without redesigning the entire UI to accommodate them.
In addition, the lower half of this UI is dedicated to the CRUD operations surrounding line items related to the deal that is being viewed/edited. This entire process works on modal windows specifically tailored to each action removing the cumbersome reloading of each form submit.
Global Deals – Form
This multi-step form process uses just about everything previously mentioned with an emphasis on integrating clean, new react components into the legacy jQuery system.
These search select components previously had used a bulky, slow jQuery solution. Building a new Search Select component was necessary to decrease page loads and callouts when the field is interacted with.
With similar techniques to the List view I build a new React component for the frontend that would pass pagination parameters to the GraphQL API that would then perform server-side pagination and searching. This improvement cut dropdown callouts returning thousands of rows to only pull 100 at a time both increasing wait times as well as usability.