Working with Existing Applications: Kleeen Infusion

Originally, Kleeen conceived our authoring platform for people who were in need of 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. Our philosophy includes a commitment to great UI and the ability to be the foundation of an application, not the ceiling.

Luckily, we have brilliant engineers that we let chase down the innovative solutions they dream up. This brings us to Kleeen Infusion. Infusion gives users the ability to combine an application built by Kleeen with an existing application in a way that doesn't detract from the end-user experience. We would like to point out, a few features, like crosslinking, will not yet extend into your existing application.

What is Kleeen Infusion?

Kleeen Infusion is an improved way to allow pages and workflows to live side-by-side INSIDE your application.

Kleeen Infusion gives users the ability to combine an application built by Kleeen with an existing application in a way that doesn't detract from the end-user experience, doesn’t require the front-end frameworks be the same, and allows the two sets of front-end code (manually generated and kleeen generated) to work together (rather than just side by side).

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, 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.

How Does Infusion Work?

Infusion works through an NPM package that allows you to use your Kleeen authored application like an NPM Package. You then infuse your application into your angular, react, or VueJS web app uses it as a Javascript module.

The information below is the documentation for developers that wish to understand further how infusion works.

What does Infusion Do?

Kleeen Infusion installs as a library through NPM; This means that our libraries can be imported and consumed on the parent application.

When a developer imports our context exchange library, it can easily send or receive pieces of context through our helpers.* Such functions will allow sharing information from one app to another through a simple method invocation mechanism, allowing, for example, to pass on filters, id’s, queries, and URIs.

The exchange library works as a middleware that sits in between the two applications. Its APIs allow information sharing, making possible integrations between what otherwise would be different language communication. Despite frameworks being Javascript, the actual framework implementation is not. With the usage of Kleeen, the integration and accessing of context into the infuse app problem is solved, and developers should only worry about passing on the required information and integrate the information received on their parent application when needed.

Exporting your Application for Infusion

On the Kleeeen export configuration page, you will select Kleeen Infusion instead of standard export. On the Kleeen Hompage, you will follow the standard export process. The standard process is to relaunch your prototype if you haven't already and export your code. After successful export, the repository will be ready for you to build your package following the instructions below.

Step 1: Build

How to Build infusion package

After exporting your code and making a local clone of the repository, you will need to set up the application to run locally, as described in the read me file. If you previously exported your code, you will need to export your code again and tell the Kleeen UI that you are going to infuse the code.

The next step is running the following  command in the root of the end-product to build the infusion package using:

npm run build:infusion

This command will create a production-ready code and the package needed to import it like an NPM package in your web app.

Step 2: Enable

Using the Kleeen Infusion package

Once the infusion build is ready, it can be published to NPM or used locally using a local installation. Here you can find more information about downloading and installing NPM packages. For example, the Infusion package will look like this:

{
  "name": "@Kleeen/authoring-tool",
  "version": "1.0.0",
  "description": "End Product Infusion app",
  "main": "index.js",
  "files": [
    "sw.js",
    "main.*.esm.js",
    "polyfills.*.esm.js",
    "vendor.*.esm.js",
    "runtime.*.js",
    "*.ico",
    "*.css",
    "*esm.js.LICENSE.txt",
    "assets"
  ]
}

Kleeen Infusion will use your company and product name to create your package name, configured in the Kleeen Authoring Tool once the Infusion package is installed. Then, you can import it in your Main.ts or index.ts or any entry-point for your web app like this:

import '@kleeen/authoring-tool';

 

Kleeen Infusion CSS and assets

The Kleeen infusion package will include the CSS and assets for the end-product.

It depends on the module bundler and tools your web apps are being built with but here you can find some examples.

CSS

Using React CSS is needed to import it directly from node_modules like this:

import '@kleeen/authoring-tool/styles.#hashid.css';

Using Angular-cli it is needed to add it directly from node_modules to the build file angular.json like this:

"styles": [
  "./node_modules/@kleeen/authoring-tool/styles.#hashid.css",
  "src/styles.scss"
],

Assets

Using create-react-app assets should be added to webpack.config.js file like this:

plugins: [
  new TransferWebpackPlugin([
    { from: 'node_modules/@kleeen/authoring-tool/assets', to: path.join(__dirname, '/public/assets') }
  ]),
...

Using Angular-cli assets should be added to angular.js a file like this:

"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/@kleeen/authoring-tool/assets",
    "output": "./assets/"
  }
],
...

If you need more information or would like to explore an infusion of your own, please reach out to [e-mail], and we will be happy to help.

Step 3: Integrate

Enable your app to work with web components

On Angular, you will add the Custom Element Schema to your modules:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BestSellerComponent,
    DepartmentComponent,
    BookStoreMainComponent,
    DepartmentDetailsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

More information can be found on https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA  and https://vaadin.com/learn/tutorials/using-web-components-in-angular#_enable_custom_elements.

Once your app supports web components, it's just a matter of adding the infusion component to the desired view:

On Angular

<div class="best-seller-container">
  <div>hello world!</div>
  <ks-workflow route="/best-seller"></ks-workflow>
</div>

or React

const App = () => {
  return (
    <div>
      <span>Hello world!</span>
      <ks-workflow route="/department"></ks-workflow>
    </div>
  );
}

* A helper function is a function that performs part of the computation of another function. Helper functions are used to make your programs easier to read by giving descriptive names to computations. They also let you reuse computations, just as with functions in general. https://web.cs.wpi.edu/~cs1101/a05/Docs/creating-helpers.html.