HaMIS 2.0

a.k.a. Next Generation HaMIS

SEEKING FOR

The best possible way of developing, scaling and maintaining our application.

WE LOVE

fast, efficient, practical and understandable

GREAT VALUE/RESULT

FOR THEM

better to use and understand ==> great delivering of work

FOR US

more fun/easier to develop, scale and maintain

Good, but not good enough!

Why HaMIS 2.0?

GUI/Front-end Developer friendly(er) eco-system
Supporting great(er) UX Vision
Simplifying the process of kickstarting new Web App

Use the tools and apply best practices

GREAT VALUE/RESULT

Full blown Angular2 App which consumes other Angular2.modules

HAMIS 2.0 APP

APP1.module

APP2.module

...

a.k.a. PortView

/***** Hamis 2.0 Application ******/
npm install hamis-ng-work-request


/*app-routing.module.ts*/
import { RouterModule, Routes } from "@angular/router";
import { NgModule } from "@angular/core";

const appRoutes: Routes = [
    { path: "", redirectTo: "home", pathMatch: "full" },
    { path: "work-request", loadChildren: "hamis-ng-work-request/work-request#WorkRequestModule" }
];
@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {
}

/*app-routing.module.ts*/
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { WorkRequestMenuModule } from "hamis-ng-work-request/menu";

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        ...
        AppRoutingModule,
        WorkRequestMenuModule.forRoot()
    ],
    providers: [
       ...
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() {
        console.log("===> AppModule wordt geinitialiseerd!");
    }
}

<!-- app.component.html -->

<!-- class="notifications-container" is required for an optimal UX design -->
<div #notificationsContainer class="notifications-container"></div>

<header>HaMIS NG</header>
<div class="content">
  <nav role="navigation">
    <ul role="menubar">
      <li role="menuitem" routerLink='home' routerLinkActive="selected">Module Menu1</li>
      <app-work-request-menu-item routerLink='work-request' routerLinkActive #rla="routerLinkActive" [selected]="rlaSafe && rla.isActive"></app-work-request-menu-item>
    </ul>
  </nav>
  <section role="main">
    <router-outlet></router-outlet>
  </section>
</div>
<footer>Footer part</footer>

Lazy loading module: URL path (slug) determines which module to load

Full app workflow

Full Angular2 App

hamis-ng
hamis-ng-menu
hamis-ng-work-request

git push

hamis-ng-[module2]

hamis-ng-[module3]

deploy

npm install

Stand-alone module workflow

hamis-ng-[app-name]

hamis-ng
hamis-ng-menu
hamis-ng-work-request

git push

npm publish

hasModules()

npm install

hamis-ng-[module2]

hamis-ng-[module3]

Creating HaMIS 2.0 compatible stand-alone modules

npm publishable
minimun sub-modules:
- app-[app-name]-routing.module
- app-[app-name].module
- app-[app-name]-menu-item.module
stick to the [app-name] convention
[app-name] should be used as a url slug

Module alternatives

Embedding interactive content via <iframe />

Module alternatives

Appending interactive content via HTML CSS and JS

<html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="http://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="http://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</body>
</html>