The Building Block of our New Developer Console
Paul Ofili | Software Engineer, Core Services and Integration
I was opportune to be part of the team that built the new Developer Console. In this article, I will explain the technologies and architectural design used in the developer console, why we used them, and a bit about the new user interface.
Developer Console Emergence
At Interswitch, we build software products that aim to ensure that transactions become a seamless part of our users’ lives. Some of these products enable exchange, access, security, convenience, entertainment, engagement, inclusion, etc.
In line with our goal, we decided to build a platform that could effectively act as a console for developers to consume a wide variety of our APIs on various platforms.
The Developer Console provides self-service integration, giving developers the ability to access Interswitch product APIs, authentication parameters, sandbox and production keys, documentation, and seamless project management.
The Technologies Used
Authentication
We adopted OAuth2 as it is secure, easy to implement, and completely decouples the clients from the protected APIs. It is the industry-standard for authorization offering a wide range of support for common processes and use-cases.
To expatiate on OAuth2 authentication flow, the Developer Console (client) needs access to APIs provided in the API management gateway (server).
This API management gateway provides an entry point to all other services & products within the company. It generates a valid access token and returns the requested resources through the APIs based on users’ access levels.
Frameworks and Library
React
We used the React framework to build the Developer Console because we needed to ship out the MVP (Minimum Viable Product) as soon as possible. Using vanilla JavaScript would have done the trick but not as fast and pain-free as React.
With React, you get to build large scale applications efficiently and quickly by creating reusable components that perform single responsibilities that make up your app. This promotes good coding principles. React also supports Virtual Dom which allows frequent UI updates with fast or minimal page refreshes. This improves user experience which is one of our top priorities.
React is easy to learn with lots of support and libraries in the tech ecosystem which makes it very fun and less difficult to create large complex apps such as Interswitch Developer Console.
Ant Design
React was used with one of my favorites. We used the React components library, Ant Design. Ant Design takes away the pain of manually styling every React components as it comes loaded with a massive collection of components beautifully styled and configured just begging to be used. This was a weapon in the hands of someone like me who isn’t a kung-fu expert with UI Design but instead allows me to focus on the logic, the flow, and the overall user experience when using the platform. (Ant Design link is in the relevant resources section below, you are welcome).
Redux
In simple terms, Redux makes handling and managing the state of the whole application feel like a piece of cake. As mentioned previously, the Developer Console was going to be massive with a lot of data all over the place. We needed a more efficient way of handling such data and Redux just happened to come to the rescue. Redux also ships in more features that truly make working with Redux a remarkable experience. (Well, after configuring though which takes no time).
React-Redux
React does not just connect with Redux right out the box. So, we use a library called React-Redux also, from the makers of Redux to easily bind the React components with the Redux store. Setting this up is part of the configuration process for Redux.
React-Cookie
For pleasant and good user experience, we needed to be able to store user data in a secure and safe persistent storage. Cookies were preferred over session storage because we wanted the user to still be logged in even after moving to a different tab, session storage clears the user tab when you close that particular tab. Local storage does not do that, but instead, it persists the data in a more persistent fashion by default. This did not seem like a safe option. Cookies are gotten from the server and they allow you to specify an expiry date in which if exceeded the data is then safely removed. To include this functionality into the Developer Console react app, we used the React-Cookie library.
Redux-Saga
The Redux-Saga library is a middleware that helps handle and manage the side-effects that happen in your React application. An example of a side-effect is the act of making asynchronous API calls and we were going to make a lot of this. One way of handling this was with Redux-thunk but this introduced a bit of an issue known as callback hell when the application grew large and complex. Redux-Saga comes with many useful features that make testing React application a smooth and enjoyable experience. I would highly encourage everyone to try it in their next React applications.
Lodash
A helpful JavaScript utility library for easy and safe manipulation of JavaScript data structures. Just one of those tools used to add a bit of pizazz in our JavaScript coding. Feel free to check out Lodash in all its glory.
React Architecture and Testing
CSS-in-JS Styling
There are a lot of ways to style React components, from regular CSS to SASS OR SCSS and CSS-in-JS components. They all have their pros and cons but, in the end, we went with CSS-in-JS. While SCSS was simple to learn and implement, it used global namespaces for CSS selectors which could lead to conflict. We adopted CSS-in-JS as it enables us to write CSS styles scoped to each component by generating unique class names when styles are converted to CSS. So, in our project, we wrote styles scoped to individual components and kept them within such components. This resolved the potential CSS styling conflict and made navigation or modification of the modular components easier.
Directory Structure
We decided to adopt a modular directory structure where every component of the product lived in a separate folder. The reusable components, the views or screens, the stylesheets, the Redux store with a lot more were kept separate in the root directory. This made the codebase easier to understand and pick up by future developers. It also allowed us to write tests targeted at these components.
Testing
A code is only as good as its tests. In that regard, we wrote tests for every aspect of the Developer console. These include the reusable components, the action functions, the reducer functions, and the saga generators which all come from or complement the Redux library. This was done to future-proof the project and make it more resilient to code failures caused by changes.
Conclusion
Developer Console was arguably one of the best projects I had worked on. It exposed me to numerous concepts and areas of front-end web development. From authentication to data caching and effective data management, knowledge of these fields and more were essential in the development of this project.
Use our Developer Console to create powerful tools and products with Interswitch APIs.
