Many people are now producing documents, designs, meeting summaries, requirements, and even software without deeply understanding the subject. They record a meeting, let AI transcribe it, ask AI to generate documentation, and share the results.

The output often looks great.

But it made me wonder…

Are we creating knowledge, or are we simply orchestrating it?

I don’t think this is a bad thing. In fact, I believe AI is one of the biggest productivity breakthroughs we’ve seen.

My theory is simple.

AI should help us do three things:

• Capture knowledge
• Orchestrate knowledge
• Increase human productivity

Imagine every meeting recorded, every decision captured, every design searchable, and every piece of organizational knowledge available in seconds. That’s incredibly powerful.

The real value isn’t that AI writes documents.

The value is that it helps preserve what organizations know and makes that knowledge available to everyone.

But there are also new challenges emerging.

Some people may become very good at using AI without truly understanding the work behind the output.

Future professionals might know which prompt to use but not why the answer is correct.

Organizations could slowly lose deep expertise if everyone relies on AI instead of learning the fundamentals.

This creates a new responsibility.

I think one of the most valuable skills in the AI era won’t be writing documents — it will be validating them.

Critical thinking, asking the right questions, and knowing when AI is wrong may become more important than creating the first draft.

Maybe we’re seeing the birth of a new role.

Not just a software engineer.
Not just a business analyst.
Not just a project manager.

But a Knowledge Orchestrator — someone who knows how to connect people, AI, data, and organizational knowledge to solve problems faster.

For me, AI isn’t about replacing experts.

It’s about making experts dramatically more productive while capturing knowledge that would otherwise disappear after a meeting, a phone call, or when someone leaves the company.

We’re still in the early days of this transformation.

The technology will continue to improve.

The bigger question is whether we’ll use it to replace thinking — or to amplify it.

I’d love to hear what others are seeing.

Are we creating a generation of AI-assisted experts, or a generation of AI operators?

Overview

The goal is to create a shell application with a left-side navigation menu that allows users to switch between two separate modules: a SmartGWT-based “Employee” module and an Angular-based “Student” module. The integration involves serving the Angular application separately and dynamically loading it within the shell application, alongside managing the SmartGWT module.

Prerequisites

• Node.js and npm installed for Angular development.
• Java SDK and GWT SDK for SmartGWT development.
• Angular CLI installed (npm install -g @angular/cli).

Step 1: Create the Shell Application Layout

The shell application should have a basic layout with a left-side menu containing two items (“Employee” and “Student”) and a right-side area to dynamically display the selected module.

Shell Application Layout (HTML)

<div id="app">
    <div id="menu">
        <ul>
            <li onclick="loadEmployeeModule()">Employee</li>
            <li onclick="loadStudentApp()">Student</li>
        </ul>
    </div>
    <div id="content">
        <!-- Dynamic content will be loaded here -->
    </div>
</div>

Step 2: Serve the Angular Student App Separately

Building the Angular Student Application

1. Create the Angular application (ng new student-app).
2. Develop the student management functionality.
3. Build the application for production (ng build --prod).
4. Serve the built application from a server accessible via URL.

Angular Student Application (TypeScript Example)

// student.ts
export class Student {
  id: number;
  name: string;
  grade: number;
}
// student.service.ts
import { Injectable } from '@angular/core';
import { Student } from './student';
@Injectable({
  providedIn: 'root',
})
export class StudentService {
  private students: Student[] = [{ id: 1, name: 'John Doe', grade: 90 }];
  
  getStudents(): Student[] {
    return this.students;
  }
  addStudent(student: Student) {
    this.students.push(student);
  }
}

Step 3: Load the Angular App on Demand

When the “Student” menu item is clicked, load the Angular app using an iframe within the shell application.

Dynamically Loading the Angular App

function loadStudentApp() {
    document.getElementById('content').innerHTML = '<iframe src="http://localhost:4200" style="width:100%; height:100%;" frameborder="0"></iframe>';
}

Step 4: Integrate the SmartGWT Employee Module

Develop the “Employee” management functionality using SmartGWT within the shell application. When the “Employee” menu item is clicked, dynamically load the SmartGWT Employee module.

SmartGWT Employee Module (Java Example)

public void loadEmployeeModule() {
    VLayout layout = new VLayout();
    layout.setWidth100();
    layout.setHeight100();

    ListGrid employeeGrid = new ListGrid();
    employeeGrid.setWidth100();
    employeeGrid.setHeight100();
    // Configure the grid with employee data
    layout.addMember(employeeGrid);
    RootPanel.get("content").add(layout);
}

Step 5: Switch Between Modules Dynamically

Attach event listeners to the “Employee” and “Student” menu items to dynamically load the respective module content into the shell application.

document.getElementById('employeeMenuItem').onclick = loadEmployeeModule;
document.getElementById('studentMenuItem').onclick = loadStudentApp;

Final Considerations

• Integration Complexity: Bridging two significantly different frameworks requires careful consideration, especially for routing, state management, and look-and-feel consistency.
• Performance and UX: Using an iframe to embed the Angular app might not provide the best user experience and could have implications for performance and styling.
• Maintenance: Maintaining a hybrid application with components from two different technology stacks can increase the complexity of upgrades, debugging, and performance optimization.

This guide outlines a basic approach to integrating SmartGWT and Angular applications within a single shell application, providing a starting point for developers looking to leverage the strengths of both frameworks in a unified project.

Spent a lot of time in a Angular 6 single page application where I had to use different base paths for router and static assets. Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below. But use of the subpath makes it complicated

To solve my problem, I used —-base-href and —-deploy-url options as shown below.

ng build -prod --base-href /ui --deploy-url /ui

The Dockerfile

FROM node:10.14.2 AS builder
COPY . ./src
WORKDIR /src
RUN npm i
RUN npm rebuild node-sass
RUN $(npm bin)/ng build --base-href '/ui/' --deploy-url '/ui/'

FROM nginx
COPY --from=builder /src/dist/* /etc/nginx/html

Docker build

docker build -t agui .

Running your docker

docker run -p 8080:80 agui

http://localhost:8080/ui should render the application.