Welcome to the comprehensive documentation of the Akinon UI project. This guide highlights our two primary components: the UI Kit and the UI Protocol. Our goal is to provide you with the necessary knowledge and tools to effectively use these components in your frontend development projects.

Purpose and Scope

This documentation is designed to be a thorough resource that assists developers in using and configuring the UI Kit and the UI Protocol. It includes detailed explanations, examples, and best practices to ensure a comprehensive understanding of these components.

Target Audience

This documentation is intended for frontend developers who are part of the Akinon teams. Familiarity with APIs, web-based interfaces, and React development is essential for fully benefiting from the contents of this guide.

UI Kit

The UI Kit is a comprehensive React UI library crafted to support the development of user interfaces across various Akinon frontend applications. It includes a range of UI components, design patterns, and best practices, aimed at delivering a consistent and efficient development experience.

The UI Kit is designed to be non-themable, maintaining a consistent appearance across all Akinon products and offering a unified user experience without the need for extensive customization.

UI Protocol

The UI Protocol includes the AppShell and AppClient libraries and is key to enabling effective communication and data exchange between micro and main frontend applications. Leveraging the postMessage API, it adds functionality that supports robust integration within Akinon’s micro frontend architecture.

Main and Micro Frontend Applications

Akinon’s frontend ecosystem categorizes applications as main or micro frontends. Main applications like Omnitron and Seller Center serve as central interfaces, while micro frontends like Marketplace Dashboard and Integrator are specialized units designed to integrate smoothly into main applications.

Benefits of the UI Protocol

• Modularity: Facilitates the development of modular applications, making maintenance and updates more manageable.
• Consistency: Provides a consistent approach to data sharing and communication.
• Efficiency: Simplifies the integration process between micro and main applications, speeding up development.

For a detailed implementation guide and best practices, refer to the UI Protocol Documentation.

Command-Line Interface (CLI)

The CLI tool simplifies several development processes, including project setup, testing, and dependency management. It helps developers quickly start new projects, offering templates for both types of frontend applications.

Features of the CLI

• Project Templates: Offers various starter templates suitable for different project requirements.
• Dependency Management: Streamlines the management and installation of project dependencies.
• Testing Integration: Incorporates testing setups to ensure code reliability.

For more information on CLI capabilities, visit the CLI Documentation.

Additional Resources

Explore these resources to further enhance your understanding of the Akinon UI project and modern UI development practices:

• Monorepos: Learn about monorepos and their benefits, which are foundational for the Akinon UI project.
• Turborepo: Explore Turborepo, a tool that enables the management of monorepos with Git.
• Vite: Discover Vite, a fast and lightweight development server for modern web development.
• Vitest: Learn about Vitest, a testing framework for Vite projects.
• React Testing Library: Explore React Testing Library, a simple and complete testing library for React applications.

UI Kit

• React Official Documentation: Start here to get acquainted with React and its ecosystem, ensuring a solid foundation for working with the Akinon UI Kit.
• Ant Design: Explore the Ant Design library, which serves as the foundation for the Akinon UI Kit.
• UI Design Best Practices: Explore industry best practices to enhance your UI design and development skills.
• Component Libraries: An Overview: Understand the benefits and practices of using component libraries in modern web development.

UI Protocol

• Micro Frontends: A Complete Guide: Dive into the concept of micro frontends and learn how they can enhance your application’s architecture.
• Using the postMessage API: Gain a thorough understanding of the postMessage API, which is foundational for UI Protocol’s communication system.
• Micro Frontends in Action: This book offers practical insights and patterns for implementing micro frontend architectures.
• Framebus: Explore Framebus, A message bus that operates across iframes.

Command-Line Interface (CLI)

• Command-Line Basics for Beginners: If you’re new to command lines, this beginner-friendly guide will help you get started.
• Commander.js : Discover Commander.js, a popular Node.js command-line interface library.
• Inquirer.js: Explore Inquirer.js, a library that simplifies the creation of interactive command-line interfaces.