Azion Console Kit: Building a new interface

In the world of edge computing, Azion is leading the way, innovating and facing challenges with determination. We understand that in order to maintain this leadership, it is essential to continually evolve, especially in relation to the user interface (UI) of our products. They are innovative by nature, but we recognize the opportunity to improve our interface, making it more unified, easier to develop and use, which reflects our commitment to excellence and usability.

Through innovation, we’ve taken our challenges as an opportunity to streamline our development process. Challenges like extended software cycles and interface inconsistencies have fueled our commitment to enhancing efficiency and ensuring seamless user experiences.

Thus, we sought to reimagine our front-facing platform to both developers and end-users. To this end, we outlined specific goals for this project:

1. Establish clear usage definitions for interface elements.
2. Achieve a uniform user interface and experience across the platform.
3. Minimize the learning curve for understanding our products.
4. Expedite interface delivery timelines.
5. Streamline validation efforts for deliverables.
6. Facilitate direct and replicable test processes.

The Decision-making Process

The first decision involved abandoning the existing design system, recognizing its limitations in supporting an already established interface.

Then, we opted to adopt a popular component library from the market. We sought and open source library that was easy to use, with clear documentation and community support. It had to fit well with our brand and be something that both software developers and business partners would appreciate.

To speed things up, we organized a hackathon that lasted a standard sprint length. We called it a “hackasprint”. During this event, we looked at different platforms, frameworks, and libraries we could use. We picked the ones that were good for our design and engineering needs at Azion.

Exploring Technologies and Pivots

During our exploration phase, we tried out technologies like React, and even delved into AI and Flutter to speed up our development process. Alongside using open-source libraries like PrimeVue, Flowbite, Primer, and Carbon Design System, we assessed how AI could fit into our workflow.

While AI seemed promising at first, we ran into challenges with adapting the generated code and connecting it with other systems. This led us to shift our focus back to a more traditional coding approach.

As we resumed the project, we set some basic principles. We wanted our new platform’s code to be open, easy to set up on local machines, able to scale with demand, easily customizable, and most importantly, compatible with our Edge Computing Platform. We prioritized having clean, well-organized code right from the start, along with thorough documentation. Adhering to Azion’s design standards was crucial, and we aimed for prototyping to be simple and intuitive.

Building UI Blocks

As we progressed, we carefully outlined how our products would be used, with designers and software developers working closely to match the interface with what our stakeholders envisioned. Through weekly meetings, we realized that having a set of basic building blocks would be helpful for our teams going forward, as it would promote uniformity across our platform.

To address this, we’ve created our own collection of UI Blocks called Azion Blocks. These blocks are designed specifically for the scenarios we identified. Although we took inspiration from the Prime Blocks library by PrimeVue, we decided against it because it didn’t meet our needs. This is because some of our products are highly specific and adaptable and require a larger library of blocks.

Choosing to develop Azion Blocks using PrimeVue allowed us to offer a tailored solution that perfectly aligns with our vision and what our users need, ensuring a seamless and efficient user experience.

The adoption of Azion Blocks has already showcased several positive outcomes:

• Improved prototyping efficiency.
• Reduced platform development learning curve.
• Promoted a consistent visual experience.
• Addressed interface pain points.
• Interface with simplified layout.

Console Kit: An Open Initiative

The Azion Console Kit is a front-end software development toolkit we’ve developed to make using the Azion Edge Computing Platform easier and better for our users.

At the heart of the Azion Console is the Azion public API, or Application Programming Interface. This kit follows modern software practices and a headless architecture. It’s all about being open source and working seamlessly with the Azion REST API, which has its own API specification and can also connect with other remote APIs. We’re sharing the source code of the new Azion Console as part of our effort to help our business partners strengthen their connection with Azion.

The Azion Console is already live, with the same features available in our previous platform, Real-Time Manager (RTM). Our goal is to migrate our current user base to use the Console by the end of 2024. However, as part of the Azion Console Kit launch, we’re committed to maintaining and providing support to RTM and updating the current API stack during the transition period. As we move towards a more modern structure, we’ve put our effort into making sure everything works as intended, all while launching updates and maintaining the code base.

Conclusion

Azion embarked on a journey to revamp its interface, making strategic decisions and adopting a fresh approach to our technology. By creating our own UI blocks and sharing the Azion Console Kit with the community, we’re not only tackling present software development challenges but also laying the groundwork for a more collaborative and efficient future in Edge Computing.

In essence, Azion’s interface overhaul wasn’t just a project: it was a bold move to redefine the future of our product development and user experience.

---

Create an Azion account to explore the Azion Console. Check out the Console Kit on GitHub and launch your project. You can also connect with Azion through our platforms and reach developers directly through our Discord server.