Today, Kleeen software is excited to announce our new patent-pending flagship feature Infusion. Infusion is a whole new way to easily and seamlessly add features, generated by Kleeen, to your existing project while preserving the full functionality of both projects and maintain a smooth front-end experience.
Originally, Kleeen conceived our authoring platform for people who needed an easy way to build new applications that have a great UI utilizing best practices, security, and top-shelf features. All right out of the box. But users who already had an existing application and wanted to take advantage of the Kleeen solution either had to build a second application, replace their UI, or find another way to hack together two systems. For us here at Kleeen, this wouldn’t do. Kleeen is committed to great UI and the ability to be the foundation of an application, not the ceiling.
What is Kleeen Infusion?
Infusion gives users the ability to combine an existing application with features and front-end built by Kleeen without detracting from the end-user experience. Also, Infusion doesn’t require the front-end framework (Angular/React/etc) to be the same, it allows the two sets of front-end code (your manually generated code and Kleeen code) to work together as opposed to side by side.
Kleeen Infusion is an improved way to allow pages and workflows to live side-by-side INSIDE your application. This has some really exciting implications where Kleeen can now augment existing projects that you may need to work on:
- Kleeen code now lives in your same repo
- End users will only see the original web-browser tab and your project’s navigation system, no new pages need to open up
- And unlike “embedded” apps, this actually will feel like a normal page you built out to and end-user as links, filters, and everything else will work as expected (in other words it isn’t a sandboxed page)
- Routing between applications is now aligned to ensure all cross-links and navigation are now infused together
- Kleeen (which is in react) can also now run inside of apps that are NOT react.
There is no entry point for an infused application. It functions in an “on-demand” state – almost as a library that the base application can ask for these new content pages. And then, when a given page is requested, the content from the infused application generated by kleeen is loaded in that moment.
If you would like to learn more about how Infusion works from a technical side, please check out our documentation here.
Before Infusion
Whether internal or customer-facing, product creation and development is a long and error-prone process. But oftentimes, development and product teams want to leapfrog ahead by adding functionality that is created by 3rd party vendors into their own offering. But how do you bring this content into your existing project when the 3rd party vendor knows nothing about your project and the design and development decisions you’ve made?
Code Libraries
If the feature that is desired is small and modular, using a coding library can be quite helpful. Think of visualizations (D3, HighCharts) or UI Components (Material Design, Ant). These are low-level elements that have a high degree of reusability. Your engineering team can then download a library file(s), and use form fields, buttons, pie charts and other visualizations in the existing development work. This is assuredly a speed up so that team members do not need to reinvent the wheel (or at least the standardized wheel in the specific ways this wheel was intended to be used).
This is a great power-up for developers, but still requires a considerable amount of effort to use – in that – these components do not function on their own. A pie chart or radio button itself is not a “feature.” A pie chart must be placed on a page, attached to data, be connected to any filters or other business logic in the application.
Embedding with iFrames
The most common way of bringing in fully-baked features into existing software is with iFrames. You can think of an iFrame as a web browser nested inside your application’s webpage. This is a very speedy way to drop 3rd party web-applications and web-content into your application. This is often used to embed videos or other small elements into websites.
However, there are numerous limitations to iFrames which has turned embedded applications into the ugly-step-child of product development. First, iFrames can slow down your page – as you are literally loading an entirely new application, warts and all. Second, there is a security risk, since you do not own the content. If the web application you embedded is corrupted or compromised, now so is your product.
Lastly, content in an iFrame is not interactive with the rest of your application. Since an iFrame is like a mini-webbrowser, what you do inside that iFrame is limited to just that iFrame. You cannot navigate to other parts of your product, send information or state back and forth, etc. It is a dead end.
All in all, iFrame is a powerful element if you want more engagement for your visitors. But use it sparingly and not as an integral part of your webapp. Sadly, this is how most embedded BI tools work, making their integration a necessary evil for adding BI functionality. This limits how integrated that BI tools is with your application, and produces a stifled and stiff experience for end users.
Micro Frontends
The solution, up to this point to iFrames are Micro Frontends. Think of every “feature” as a service that the main application can call to leverage. This allows multiple independent teams at a company to build new features (or sub apps), but they are all tied together with an orchestrator. This is an amazingly elegant solution, allowing shared functionality to be owned by the base application, but still facilitating each micro app to be developed independently.
The largest challenge with this approach is that you need to have a brand new project with that framework and another set of extra rules you need to comply with (or undertake a massive re-architecture).
Further, each micro app must also know exactly how to interface with your base application – otherwise, they cannot play well together. This means if you didn’t set things up correctly upfront and/or the 3rd party service you want to use wasn’t set up correctly – no go.
Infusion: The best of all worlds
Kleeen infusion threads the needle between the ability of an iFrame to be deployed in any existing application, but with the interactivity and connectivity of micro front ends – thus creating a seamless experience for end-users while allowing a third party to create a feature to include in your project without any apriori architecture decisions.
Unlike an iFrame, an Infused application is actual code, running on your webserver; eliminating the security concerns since. Plus, through our innovative infusion technology, an infused app can fully interact with the base application – unlike an iFrame.
With our novel approach to infusion, 3rd party applications can fully integrate with your base application, including state/context passing, and integrating the two routing systems. All of this being done without any architectural changes to your base application – unlike Micro Frontends. We call this interaction Features on Demand.
Not only does Infusion have the benefits of Micro Frontends, and integrates with whatever you have. An infused application can even use a different framework (e.g. react) than the host application (e.g. angular). This further reduces the impact of apriori technology decisions on later integrations. There is no ramp-up process as a result, even if you do not know react – the touchpoints are not react. And as a result, the infused application truly can be an independent and fully realized application in its own right, and still play nice with the base application behind the scenes.
Summary
Kleeen’s Infusion is a game-changing technology. Kleeen lets you build amazing features and workflows for your application. If you don’t have an app already, don’t worry, we provide you a mono repo configured to deploy you new app with the features you want.
If you have an app already deployed, with Infusion, you can use those features on demand into your main app. This allows any web application to create new features and functionalities above and beyond what their human development team is producing. This approach, coupled with Kleeen’s delivery of the full source code, means that you can stand by your product’s functionality, and have the ability to rapidly enhance your project. Just author, get your code, and infuse.
