DEV Community: paulmojicatech

(G)UI is Dead

paulmojicatech — Thu, 17 Jul 2025 19:59:43 +0000

Sorry for the the click bait-y title. Though it is a bit of hyperbole, I do believe that there will be a fundamental paradigm shift in the near future with the proliferation of MCP servers and clients.

What is MCP?

MCP stands for Model Context Protocol. It is a new protocol established to link together tools along with using LLMs (large language models).

How it works?

The first thing you need to do is create an MCP server. This is a long running service that is the entry point of your clients. Then you just create a set of tools with an id, description, and inputSchema. And that's about it. You will have your app (clients) that call into the MCP server with a prompt. The MCP server will use an LLM to try and decide which tools to call into to get the proper response. The responses can be sent via server sent events back to the client.

How this changes things?

As a frontend engineer, we have had to very cognizant of where to place elements on the screen. Will it be discoverable? Will it catch the user's eye? Does it tell the user what the call to action is? With this new UI paradigm, a user simply tells the application what it is s/he wants to see. Now everything is discoverable. If you are a company with a lot of data and struggle with how to display it on the screen, this could be a way to allow the user to discover it all.

There will still need to be some decisions and patterns on the exact interface. Will there be a set of related questions after the initial? Do you show a visual representation of the data requested? While the patterns are still being ironed out, it is clear that a disruption is here for the future.

For more content follow me on:
LinkedIn
Dev.To
Blue Sky

Integrate OpenAI Inside of Angular App

paulmojicatech — Mon, 16 Dec 2024 05:11:42 +0000

Overview

Generative AI is all the rage today. It seems we can't go a day without hearing about AI, especially in the tech industry. OpenAI is a big reason why. OpenAI provides an API to leverage their trained models. One of the most popular access they provide is access to their LLMs (large language models).

What are we doing?

In this article, we will show how we can utilize OpenAI to create a chat bot that you can ask up to 3 questions and it will generate an answer for each question. We call the application Chat Genie.

The code for this is located on Github.

What are we NOT doing?

This app will use Angular and NgRx. We will show and explain the code, but we will not go deep into explaining NgRx.

OpenAI Mechanics

OpenAI allows you to call an API for their text generation service. The documentation is located here. With this API, you can string together questions to continue to build context. In our application, we allow up to 3 questions to be strung together.

Please note: OpenAI bills based on tokens. Tokens are the words and / or phrases that are part of the request.

Let's Get To It

src/app/app.component.ts

import { NgClass } from '@angular/common';
import { Component, computed, ElementRef, inject, ViewChild } from '@angular/core';
import { Store } from '@ngrx/store';
import { v4 } from 'uuid';
import { OpenAIHttpPostRequest } from './model/message.interface';
import { addMessage, resetMessages } from './ngrx/actions/messages.action';
import { selectMessages, selectRequest } from './ngrx/selector/messages.selector';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgClass],
  template: `
    <section class="full-height">
      <header>
        <span>Chat Genie</span>
      </header>
      <div class="messages-container">
        @for (message of messagesS(); track $index) {
          <div class="messages" [ngClass]="{'user': message.role === 'user', 'openAI': message.role === 'openAI'}">
            {{message.content}}
          </div>
        }
      </div>
      <footer>
        <div class="action-container">
          <input #messageInput type="text" placeholder="Enter your message"/>
          <button [disabled]="isSendDisabled()" class="primary" (click)="addMessage(messageInput.value)">Send</button>
          <button class="default" (click)="resetQuestions()">Reset</button>
        </div>
      </footer>
    </section>
  `,
  styles: `
  .full-height {
      height: 100vh;
    }

    header {
      height: 3rem;
      background-color: #2563eb;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
    }

    button {
      padding: .5rem;
      text-align: center;
      margin-left: .5rem;
      border-radius: 8px;
      color: white;
      border: none;

      &:disabled {
        opacity: 0.5;
      }
      &.primary {
        background-color: #2563eb;
      }
      &.default {
        background-color: #a8a29e;
        color: #111827;
      }
    }

    .messages-container {
      height: calc(100vh - 9rem); // header + footer + margin-top
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      margin: 1rem 1rem 0 1rem;
      .messages {
        border-radius: 8px;
        padding: 1.5rem;
        width: 20rem;
        margin-bottom: 1rem;
        text-align: center;

        &.user {
          align-self: flex-start;
          background-color: #fcd34d;
        }
        &.openAI {
          align-self: flex-end;
          background-color: #bbf7d0;
        }
      }
    }

    footer {
      position: sticky;
      bottom: 0;
      height: 5rem;
      justify-self: center;
      .action-container {
        display: inline-flex;
        height: 50%;
        justify-content: center;
        input {
          width: 50vw;
          border-radius: 8px;
        }
      }
    }
  `
})
export class AppComponent {

  @ViewChild('messageInput') messageInput!: ElementRef<HTMLInputElement>;

  private _store = inject(Store);

  messagesS = this._store.selectSignal(selectMessages);

  isSendDisabled = computed(() => {
    const messages = this._store.selectSignal(selectMessages)();
    return messages.some(message => message.isProcessing) || messages.length > 6;
  });

  addMessage(message: string) {
    const storeRequest = this._store.selectSignal(selectRequest)();
    let messages: {
      role: string;
      content: string;
    }[] = [];
    if (!storeRequest) {
      messages = [{ role: 'system', content: 'You are a helpful assistant.' }, { role: 'user', content: message }]
    } else {
      messages = [...storeRequest.messages, { role: 'user', content: message }];

    }
    const requestBody: OpenAIHttpPostRequest = {
      appId: v4(),
      model: 'gpt-3.5-turbo',
      messages,
      temperature: 0.7
    };
    this._store.dispatch(addMessage(requestBody));
    this.messageInput.nativeElement.value = '';
  }

  resetQuestions(): void {
    this._store.dispatch(resetMessages());
  }
}

This is the component the shows messages. When a user hits the Send button, an action is dispatched that will kick off the request.

src/app/ngrx/messages.effects.ts

import { Injectable, inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { OpenAiHttpService } from '../../services/open-ai-http.service';
import { addMessage, addMessageSuccess, openAIError } from '../actions/messages.action';
import { catchError, filter, map, switchMap, withLatestFrom } from 'rxjs';
import { Store } from '@ngrx/store';
import { selectMessages } from '../selector/messages.selector';
import { OpenAIResponse } from '../../model/message.interface';

@Injectable()
export class MessagesEffects {
  private _actions$ = inject(Actions);
  private _openAiHttpService = inject(OpenAiHttpService);
  private _store = inject(Store);

  addMessage$ = createEffect(
    () => this._actions$.pipe(
      ofType(addMessage),
      withLatestFrom(this._store.select(selectMessages)),
      filter(([action, messages]) => {
        return messages.length <= 6;
      }),
      switchMap(([action]) => this._openAiHttpService.getOpenAiResponse(action.requestBody).pipe(
        map(response => addMessageSuccess({ response })),
        catchError(error => ([openAIError({ error })]))
      ))
    )
  );

  addMessagesLimit$ = createEffect(
    () => this._actions$.pipe(
      ofType(addMessage),
      withLatestFrom(this._store.select(selectMessages)),
      filter(([action, messages]) => messages.length > 6),
      map(([action]) => {
        const updatedMessage: OpenAIResponse = {
          model: action.requestBody.model,
          appId: action.requestBody.appId,
          choices: [
            {
              index: 0,
              message: {
                content: 'The Great Chat Genien only answers 3 questions!',
                role: 'openAI'
              }
            }
          ]
        };
        return addMessageSuccess({ response: updatedMessage });
      })
    )
  );
}

This file shows 2 effects. One is to call the service that makes the HTTP request to OpenAI. This effect is called only when the number of messages in the store is 6 or less. The reason for 6 is because we allow 3 questions and each question is comprised of 2 messages, one is the user question and the second is the response from OpenAI. The second effect adds a new message that lets the user know that the limit has been hit instead of making this HTTP call to OpenAI.

src/app/services/open-ai-http.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { OpenAIHttpPostRequest, OpenAIResponse } from '../model/message.interface';
import { Observable, catchError, map, throwError } from 'rxjs';
import { OPEN_AI_API_KEY } from '../secrets';

@Injectable({
  providedIn: 'root'
})
export class OpenAiHttpService {

  private _httpClient = inject(HttpClient);


  private readonly _OPEN_AI_API_URL = 'https://api.openai.com/v1/chat/completions';
  private readonly _OPEN_AI_API_KEY = OPEN_AI_API_KEY;

  getOpenAiResponse(reqBody: OpenAIHttpPostRequest): Observable<OpenAIResponse> {
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', `Bearer ${this._OPEN_AI_API_KEY}`);
    headers = headers.append('Content-Type', 'application/json');
    const clonedBody = {...reqBody};
    delete clonedBody.appId;

    return this._httpClient.post<OpenAIResponse>(this._OPEN_AI_API_URL, clonedBody, {headers}).pipe(
      map(response => ({...response, appId: reqBody.appId!})),
      catchError((error: any) => {
        console.error('Error in OpenAiHttpService:', error);
        return throwError(() => error);
      })
    )
  }
}

The one thing to notice here is that we delete the property appId from the request body. This property is used in the reducer to map the pending request in the store to the response after the API request is successful.

src/app/model/message.interface.ts

export interface OpenAIHttpPostRequest {
  appId?: string;
  model: string;
  messages: {
    role: string;
    content: string;
  }[];
  temperature: number;
}

export interface OpenAIResponse {
 appId?: string;
 id?: string;
 object?: string;
 created?: Date;
 model: string;
 messages?: {role: string; content: string}[];
 choices: {
  index: number;
  message: {
    content: string;
    role: string;
  },
  logprobs?: string;
 }[];
 usage?: OpenAIUsage;
}

export interface OpenAIUsage {
  prompt_tokens: number;
  completion_tokens: number;
  total_tokens: number;
}

This is the interface for the request and response from the OpenAI contract.

src/app/ngrx/reducer.messages.reducer.ts

import { createReducer, on } from '@ngrx/store';
import { OpenAIHttpPostRequest, OpenAIResponse } from '../../model/message.interface';
import { addMessage, addMessageSuccess, resetMessages } from '../actions/messages.action';
export interface MessageState {
  request: OpenAIHttpPostRequest | undefined;
  messages: {appId?: string, role: string, content: string, isProcessing: boolean}[];
}

export const initialState: MessageState = {
  request: undefined,
  messages: []
};

export const messageReducer = createReducer(
  initialState,
  on(
    addMessage,
    (state, { requestBody }) => {
      const lastQuestionIndex = requestBody.messages.length - 1;
      const newMessage: {role: string, content: string, isProcessing: boolean} = {
        role: requestBody.messages[lastQuestionIndex].role,
        content: requestBody.messages[lastQuestionIndex].content,
        isProcessing: false
      };
      return {
        ...state,
        messages: [...state.messages, newMessage, {appId: requestBody.appId!, role: 'openAI', content: '...', isProcessing: true}],
        request: requestBody
      }
    }
  ),
  on(
    addMessageSuccess,
    (state, { response }) => {
      const foundQuestionIndex = state.messages.findIndex((message) => message.appId === response.appId);
      const newMessage: {appId: string, role: string, content: string, isProcessing: boolean} = {
        appId: response.appId!,
        role: 'openAI',
        content: response.choices[0].message.content,
        isProcessing: false
      };
      const updatedMessages = structuredClone(state.messages);
      updatedMessages[foundQuestionIndex] = newMessage;
      return {
        ...state,
        messages: updatedMessages
      };
    }
  ),
  on(
    resetMessages,
    (state) => {
      return initialState;
    }
  )
);

This is what updates the store that the app.component.ts listens to. When the addMessage action is dispatched, we update the messages value to append the new request with the 'user' role item and set the temporary 'openAI' role with a ... value. After the success message, we switch the ... value to the response from OpenAI.

That's All Folks

I hope this article was helpful. All the code is posted on my Github. The only thing needed is to create src/app/secrets.ts to include your own OPEN_AI_API_KEY.

Using Angular Inside of Astro

paulmojicatech — Sat, 07 Dec 2024 12:33:37 +0000

Using Angular Inside of Astro

What is Astro?

Astro is a framework to build websites and web apps in a way to optimize performance and progressive enhancement. It does this by allowing for a "zero-bundle" strategy sent over the wire. It uses a mix of static site generation, server-side rendering, and partial hydration to let developers opt-in to how much javascript they want to send to their users in an incremental fashion. While this blog is not about what Astro is nor is it about why would we use it, I do have a blog that discusses the evolution of web development and reasons why it may be useful to try out technologies like Astro.

What is AnalogJs

AnalogJs is a metaframework for Angular built by Brandon Roberts. To me, it is to Angular developers what Next.js is to React developers (and, as we will see with this blog, more). It provides things like file-system routing, server-side rendering, and partial hydration. These are all things that the Angular ecosystem, until recently with the release of v19, has been lacking.

But there is more...

Because of the work Brandon is doing with AnalogJs and using Vite as the build system, we can now embed Angular components within an Astro application. There are already integrations for React, Svelte, and Vue for Astro, and now there is an Angular option as well.

Let's get to it

Below are the steps to embed an Angular component into your Astro application

First we need to create an Astro project. To do this, run npm create astro@latest -- --template minimal. From Astro docs
Next, follow the steps on the AnalogJs docs
Run npx astro add @analogjs/astro-angular
Add a tsconfig.app.json file to the root of your project

{
  "extends": "./tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "noEmit": false,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "allowJs": false
  },
  "files": [],
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Add the AnalogJs/Angular integration into your astro.config.mjs file at the root of your project and enable Vite for the integration.

// @ts-check
// @ts-check
import { defineConfig } from 'astro/config';

import analogjsangular from '@analogjs/astro-angular';

// https://astro.build/config
export default defineConfig({
  integrations: [analogjsangular({
    vite: {
      inlineStylesExtension: 'scss|sass|less'
    }
  })],
  vite: {
    ssr: {
      // transform these packages during SSR. Globs supported
      noExternal: ['@rx-angular/**'],
    }
  }
});

Create your Angular component, using inline styles and inline templating.

import {Component, EventEmitter, Output, output} from '@angular/core';

@Component({
  selector: 'pmt-best-framework',
  standalone: true,
  imports: [],
  template: `
    <section>
      <p>What is the best frontend framework?</p>
      <div class="frameworks">
        <form>
          <fieldset>
            <legend>Select the best framework</legend>
            <div class="question-container">
              <label>
                <input (click)="handleSelectFramework('angular')" type="radio" id="angular" name="framework" value="angular"/>
                <span>Angular</span>
              </label>
              <label>
                <input (click)="handleSelectFramework('react')" type="radio" id="react" name="framework" value="react"/>
                <span>React</span>
              </label>
              <label>
                <input (click)="handleSelectFramework('vue')" type="radio" id="vue" name="framework" value="vue"/>
                <span>Vue</span>
              </label>
              <label>
                <input (click)="handleSelectFramework('svelte')" type="radio" id="other" name="framework" value="svelte"/>
                <span>Svelte</span>
              </label>
            </div>
          </fieldset>
        </form>
      </div>
    </section>
  `,
  styles: `
    section {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .question-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      justify-content: center;
    }
  `
})
export class BestFrameworkComponent {

  @Output() selectFrameworkEv = new EventEmitter<'angular' | 'react' | 'vue' | 'svelte'>();

  handleSelectFramework(framework: 'angular' | 'react' | 'vue' | 'svelte') {
    this.selectFrameworkEv.emit(framework);
  }

}

Update your Astro page to include the Angular component. We can create a script tag to listen for outputs using addOutputListener from @analogjs/astro-angular/utils

---
import {BestFrameworkComponent} from '../components/best-framework.component';

---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro</h1>
        <BestFrameworkComponent data-analog-id="bestFrameworkCmp"  client:visible />
        <div id="answer">

        </div>
        <script>
            import { addOutputListener } from '@analogjs/astro-angular/utils';

            addOutputListener('bestFrameworkCmp', 'selectFrameworkEv', (output) => {
                const answer = document.querySelector('#answer') as HTMLDivElement;
                let answerText;
                switch (output.detail) {
                    case 'angular':
                        answer.style.color = 'green';
                        answerText = 'Good job!';
                        break;
                    case 'react':
                        answer.style.color = 'red';
                        answerText = 'React is not a framework, but even if it was you would still be wrong';
                        break;
                    case 'vue':
                        answer.style.color = 'red';
                        answerText = 'Vue is not bad, but try again';
                        break;
                    case 'svelte':
                        answer.style.color = 'red';
                        answerText = 'Close but no cigar';
                        break;
                    default:
                        break;
                }
                answer.innerHTML = answerText as string;
            });

        </script>
    </body>
</html>

That's all folks!

And now we have integrated an Angular component inside of Astro. Hope you all had fun reading this.

Github
Follow me at Bluesky
LinkedIn

NGINX and Angular SPA Redirect

paulmojicatech — Sun, 27 Nov 2022 04:44:23 +0000

Purpose

In this post, we will discuss how to configure NGINX when hosting an Angular application so that refreshing a page does not give you a 404 error.

The Problem

SPA's (Single Page Applications) have changed the way we develop web applications in the last 8 - 10 years (though it is falling out of fashion lately per my post). A SPA runs the entire application on the client (browser). This makes an application much more responsive.

However, one of the pitfalls is that routing also happens on the client. This becomes an issue both with SEO (search engine optimization) as well as trying to refresh a route that is not the home route. The problem is that the web server does not know the route because routing happens on the client. So foo.com/bar is an unknown route to the web server. The web server only know foo.com and it serves the index.html page when that requests comes in. The /bar piece is something that the client knows how to handle because there is javascript sent from the web server to the client that is knows how the routing should work.

The Solution

There are several solutions to get around the routing issue. One is to use MPA's (multi page applications). Both Angular (Angular Universal, Scully, and more recently released Analog) and React (NextJs and Remix) have meta-frameworks that provide a server side rendered solution.

The other solution, which is the one this article will discuss, is allowing NGINX handle the routing.

NGINX Config

NGINX is a very fast reverse proxy that acts as a web server to host your web app. It has several configuration files that decide how incoming requests to the web server should be handled.

Below is a snippet of the configuration you can add that will serve the index.html file (which contains the SPA routing information) to all unknown incoming URLs.

server {
      listen 80;
      listen [::]:80;
      server_name localhost;

      location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html =404;
      }
}

The important part of this code block is try_files $uri $uri/ /index.html =404;. This tells NGINX if a URL comes in that it does not recognize, use the URI (Uniform Resource Identifier) and serve the index.html file. Note: The =404; part should never be hit but it is common practice to add it as well. This says if index.html is not found, serve the default 404 page.

Conclusion

This was a short article the shows how you can configure NGINX to workaround a limitation in SPAs where routing is broken because the web server does not know how to process routes be default.

If you would like to hear more about web development, please follow me on BlueSky, Mastodon(@paulmojicatech@hachyderm.io), or LinkedIn.

Happy Coding!

Evolution of Web Development

paulmojicatech — Thu, 08 Sep 2022 05:42:45 +0000

In this post, we will take a look a new pattern emerging on the front end development world called islands architecture. Much of this article is inspired from patterns.dev.

History

Let's go ahead and start with the history of web development. In the beginning, we server rendered everything on the web. This means that we had a web server that ran all the code. A user would open a browser, type the web site address, and be routed to a web server hosting the web site. That web server would would execute the code to run the web site.

The problem with this approach is that the web site is static. This means that the data would be retrieved and consumed by a file that the website would serve and the user would see the web site on the screen but they could not really interact with the page. All they could do was consume the document on the screen that the web server served.

But this was not enough. Users needed to interact with the screen. They needed to click a button that would show or hide some part of the screen. They needed to show a dialog to ask the user if they really wanted to click that button. Enter javascript. Now, when a user goes to a web site, the web server send back a file with some javascript along with the document. Javascript allowed code to be executed on the client (the user's machine). Now there was a way for a user to actually interact with the document on their screen.

But there was still a problem. When a user wants to go to a different screen, another request need to go back over the network, the web server would serve a completely different document. Whatever items that were shared between the previous screen and the next one, needed to exist in both documents. The code needed be executed on the previous document would need to be executed again. The back and forth between the web server and the client (the user's computer) happened many times as the user navigated the website. Also, all of the state during the user session was stored on the server. The client, for the most part, didn't really have access to it.

This lead to the next stage of evolution, SPAs. A SPA (single page application) flipped the paradigm where the client would run all the code. When a user navigates to a web site, the web server would serve only one document, the index.html file. But along with that file, the web server would send down all the javascript files needed to execute for the web site to run. The index.html file would have references to the javascript that would run on the client. This means that would a user navigates between screens, the client doesn't need to go over the network unless it needs data from the server. Also, a developer can layout a screen so that parts of the application can be shared between screens. Another benefit is the application state moves from the server to the client. This gives the user a smoother experience, especially navigating between screens.

This sounds great right. We have now solved the world's problems. Not so fast... SPAs have a significant drawback. As web applications grew in complexity, so did the size of the javascript files that needed to go over the wire. It only makes sense right, the more complex the application, the more code that needs to be executed. The more code to execute the bigger the files that need to be shipped to the client. Some frameworks "solved" this problem with bundling and lazy loading. This was accomplished by the need of a compile step to break the javascript files up into smaller chunks (or bundles). Lazy loading made it so that not all javascript needed to go over the wire right away. The web server would only send the javascript that needed to be executed on the first screen. As the user navigates to a new screen, the existing javascript would know to call over the network to fetch new javascript for the new screen.

The big problem with this approach is it had its performance issues when rendering the new javascript. When new javascript came in, the client needed to understand how to consume it. This is what is called hydration. The new javascript would come down and the client needs to know where on the screen to render the new data or updates. Different frameworks handled this different ways. Some tracked the state of the DOM (this document and its elements) and the new javascript would make its updates in a virtual DOM (clone of the current DOM) and then sync the changes. Some frameworks completely destroyed the old DOM and reconstructed it again with the new javascript. Either way, more compute was happening on the client that needed to happen.

Some attempts to fix this was to go back to SSR (server side rendered) applications but we still have client side hydration. This helped with screen load time since the web page can be rendered on the server right away while the parts that the client needed for interactivity was sent over the wire. When a user navigates to a new screen, the request would be sent to the web server and a new document would be rendered and new javascript files sent over the wire. However, this did not solve the hydration problem. While hydration still could happen on the client, that hydration would still need a way to keep track of how to update the DOM. This again caused code to execute on the client that to keep track of the DOM state.

And finally we get to the latest pattern, islands architecture.

What is it?

Islands architecture tries to solve the problem by having multiple entry points on a screen. Static content would be served on the server while the dynamic parts of the application would be encapsulated into another entry point that contains the javascript to execute. The execution only happens within that entry point, hence the code living on an "island". This can also be described as micro-frontends. Each dynamic "island" doesn't care about any other part of the screen, so there is no need to keep track of the entire DOM on the screen. Code is executed only as needed.

This is still a fairly new paradigm so implementation is still at its infancy. There are currently several frameworks that hope to help implementing this pattern. One is Astro. Astro is explicitly aimed at implementing island architecture. It has integrations with React, Svelte, and Vue to name a few frameworks that can be used.

Another framework that hopes to aid with the implementation is a framework created by Misko Hevery called Qwik. Misko was also the author of one the first highly adopted SPA frameworks AngularJs and later Angular. Qwik's strategy is around what they call "resumablility". This means that the web server sends only the HTML and CSS over the network. It serializes all of the bindings for the DOM elements in the HTML. This framework know that javascript needs to be fetched by parsing the serialized data. When a user interacts with an element that needs new javascript, the framework fetches the javascript, parses the serialized data, and "resumes" the application by executing the javascript based on the bindings. This means that it does not need to rehydrate other elements on the screen. The javascript knows which parts to update based on the serialized binding data.

A third framework is called Fresh. Fresh runs on the Deno runtime. Deno is a newer javascript runtime created by the original Node author Ryan Dahl (Deno itself is a whole other topic). Astro and Fresh are very similar is philosophies, the major difference being Fresh is run in a Deno environment.

Conclusion

The evolution of web development has seem different stages, from fully rendering on the server, to fully rendering on the client, to loading partly on the server and partly on the client using hydration for interactivity. The next big shift is the islands architecture. It boasts faster load times and even allows for interacting with a web site with javascript turned off. It accomplishes this by providing multiple entry points to a web site. The static parts of the side site is served on the server with no javascript needed. The dynamic parts are encapsulated into an entry point that executes the javascript on the client. If javascript is turned off, the static parts of the app still work.

Hopefully you enjoyed reading this article. I am hoping to do a deeper dive into the different frameworks in future articles.

Follow me on Bluesky.

Angular's Mission To Make DX Better With Standalone Components

paulmojicatech — Sat, 27 Aug 2022 05:21:32 +0000

This article to highlight Angular 14's new feature for allowing standalone components and how it can be implemented to replace Angular Modules. This feature was delivered to improve developer experience as well as make the framework more approachable for newer developers.

The History

The first iteration of Angular (AngularJs) was a game changer to front end web development. The magic of creating 2 way binding without having to wire up event handlers for elements was an instant win for the community. But the problem was that "magic" could (and most often did) create unmaintainable and non-performant web apps as the complexity of the app grew.

So the Angular team decided to overhaul and re-write from scratch the Angular framework. (This caused a near revolt around the community since AngularJs was heavily adopted and would NOT be compatible with the future versions of Angular, but the Angular team learned from this as well with the ngUpdate feature of the CLI). The re-write would focus heavily on code organization and maintainability of the codebase. This was done by being very opinionated how Angular apps should be written. One of opinions of the Angular team is that using a type system makes things more maintainable and landed on forcing developers of Angular apps to use TypeScript, a subset of Javascript that transpiles the TypeScript code to Javascript.

Another core tenant on maintainability was the ngModule. This concept is that a related set of features should be contained in a module. This, along with the fact that the TypeScript code needed to be transpiled, allowed Angular's compiler to create smaller bundles of Javascript to ship to the browser. But this came at a cost. The compiler needed to read the ngModule file in order to bundle pieces of code together. For instance, a component / directive could not be used unless it was declared in the module. A service could not be injected (more on dependency injection later) into a class unless it was registered (or provided) in the module. The router could lazy load Javascript bundles but the compiler needed to know the module (or Javascript bundle) that needs to be loaded lazily.

In the sections below, we will show how Angular 14 removes the need to create ngModules to accomplish the tasks above. Note: I will be using the term feature as a substitute for ngModule in the sections below to show that the core tenant of maintainability is not lost in the new way to write Angular apps. You still should still create a scaffolding of your app based on features. Most of this is now possible due to the rewrite of Angular's view engine to Ivy. Ivy made it so that the compiler could know with more certainty how to create the Javascript bundles. Ivy is a big topic in itself but just know that a lot of what we can do now in Angular apps is due to Ivy.

Components

Components that are to be used in a feature needed to be declared in the ngModule file like below.

Old Way

   @NgModule({
     imports: [
       CommonModule /* This is an Angular Module that allows what is 
                     exported form this module to be used 
                     in other modules */
     ],
     declarations: [
       MyComponent
     ],
     exports: [ // Anything in this array allows us to use in other modules
       MyComponent
     ]
   })
   export class MyModule(){}

    @Component({
       selector: 'my-comp',
       template: `<div></div>`,
       styleUrls: ['./my-component.component.scss']
    })
    export class MyComponent{}

To use it in a new different feature you would do:

   @NgModule({
     imports: [
       CommonModule,
       MyModule
     ]
   })
   export class NewModule{}

New Way

@Component({
  selector: 'my-comp',
  template: '<div></div>',
  styleUrls: ['./my-component.component.scss'],
  standalone: 'true',
  imports: [
    CommonModule
  ],
  exportAs: 'my-comp'
})
export class MyComponent(){}

To use it from a legacy module you could do:

@NgModule({
  imports: [
    CommonModule,
    MyComponent
  ]
})
export class NewModule{}

To use it from another standalone component you could do:

@Component({
  ...,
  imports: [
    CommonModule,
    MyComponent
  ],
  standalone: true
})
export class NewComponent

Dependency Injection And Services

Angular leaned heavily into using dependency injection as a core tenant of Angular. Dependency injection provides a way to logically separate the concerns of a codebase to make your apps more maintainable and testable.

In Angular, the instance of a class that is injected into a another class is must be registered. This can be done at the app, module, or component level. For instance, if the service is registered in the app.module.ts file, which is the module that is bootstrapped when the application started, the class registered in the app module would be a singleton. This means that there is only one instance of the class running in the application.

Angular strongly leans towards making an injectable class as a singleton so they create a way to register the class within the class. To do so, you can simply register the class by

@Injectable({
  providedIn: 'root'
})
export class MyService{}

Routing

We talked about the ability to lazy load modules (or Javascript bundles) only when the code is really needed. This is done through Angular's routing system. Since before we were using modules to group together code, Angular could derive when to actually send that bundle down to the browser to use based on if a user navigated to a certain route. Below we show the old way to do it, followed by how to do it in Angular 14 with standalone components.

Old Way

main.ts
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) =>  console.error(err));


app.module.ts
const routes: Route[] = [
  {
    'path': 'my-feature',
    'loadChildren': () => import('./my-feature/my-feature.module').then(m => m.MyModule)
  },
  {
    'path': '',
    redirectTo: 'my-feature'
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    StoreModule.forRoot({})
  ]
})
export class AppModule{}


my-feature.ts
const routes: Route[] = [
  {
    path: 'comp-one',
    component: ComponentOne
  },
  {
    path: '',
    component: ComponentTwo,
    pathMatch: 'full'
  }
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forFeature(routes),
    StoreModule.forFeature('my-feature', featureReducer)
  ]
})
export class FeatureOne{}

New Way


my-feature.routes.ts
const MY_FEATURE_ROUTES: Route[] = [
  {
    path: 'comp-one',
    loadComponent: () => import('./components/comp-one.component.ts').then(c => c.ComponentOne)
  },
  {
    path: '',
    loadComponent: () => import('./components/comp-two.component.ts’).then(c => c.ComponentTwo),
    pathMatch: 'full'
  }
];

main.ts

const routes: Route[] = [
  {
    path: 'my-feature',
    loadChildren: () => import('./my-feature.routes.ts').then(m => m.MY_FEATURE_ROUTES),
    providers: [
      importProvidersFrom(
        StoreModule.forFeature('my-feature', featureReducer)
      )
    ]
  }
];

bootstrapApplication(
  AppComponent,
  {
     providers: [
       importProvidersFrom(
         RouterModule.forRoot(routes),
         StoreModule.forRoot({}),
         EffectsModule.forRoot([]),
         StoreDevtoolsModule.instrument({}),
         HttpClientModule,
         BrowserAnimationsModule
       )
    ]
  }
)

And that's it. Now we do not need any modules in our Angular apps! Happy coding!

Follow me on BlueSky

An Introduction to RxJs and NgRx

paulmojicatech — Fri, 29 Apr 2022 19:31:21 +0000

What is RxJs?

RxJs is the javascript representation of the ReactiveX programming pattern which deals with code execution in an asynchronous environment. It uses the pub / sub model where there is a publisher (something that broadcasts data) and a subscriber (something that is interested in that data).

RxJs is written in a declarative way instead of in an imperative way. This is done by using RxJs's operators that listen for data to be published, then can transform that data and pass it to the next operator to do more transformations. Take a look at the code below:

Imperative Way

@Component({
    template: `
        <div>
            <button (click)="getJokes()">Get Jokes</button>
        </div>
        <ul>
            <li *ngFor="let joke of allJokes">
                <span>{{joke.author}}</span>
                <div>{{joke.details}}</div>
            </li>
        </ul>
    `
})

constructor (private _jokesHttpSvc: JokesHttpService, private _authorsHttpSvc: AuthorsHttpService){}

allJokes: { author: string; details: string;}[] = [];

getJokes(): void {
    this._jokesHttpSvc.getJokes.subscribe(jokes => {
        this._authorsHttpSvc.getAuthors().subscribe(authors => {
            jokes.forEach(joke => {
                authors.forEach(author => {
                    if (author.id === joke.authorId) {
                        this.allJokes.push({
                            author: author.name,
                            details: joke.details
                        });
                    }
                })
            })
        })
    })
}

Declarative Way

@Component({
    template: `
        <div>
            <button #getJokesBtn>Get Jokes</button>
        </div>
        <ul>
            <li *ngFor="let joke of allJokes$ | async">
                <span>{{joke.author}}</span>
                <div>{{joke.details}}</div>
            </li>
        </ul>
    `
})

constructor (private _jokesHttpSvc: JokesHttpService, private _authorsHttpSvc: AuthorsHttpService){}

@ViewChild('getJokesBtn')
getJokesBtn: ElementRef<HTMLButtonElement>;

allJokes$: Observable<{ author: string; details: string;}>[];

ngAfterViewInit(): void {
    const jokes$ = this._jokesHttpSvc.getJokes();
    const authors$ = this._authorsHttpSvc.getAuthors();
    this.allJokes$ = fromEvent(this.getJokesBtn.nativeElement, 'click').pipe(
        switchMap(() => forkJoin([jokes$, authors$]).pipe(
            map(joinedStream => {
                const [jokes, authors] = joinedStream;
                return jokes.map(joke => {
                    const jokeAuthor = authors.find(author => author.id === joke.authorId);
                    return {author: jokeAuthor.name, details: joke.details};
                });
            })
        ))
    )
}

Things to Note:

In the imperative way, we bind the button to a click event that calls a method in the component. In the declarative way, we create the listener by creating an observable for (fromEvent operator) for when the button is clicked.
In the imperative way, we mutate the component by updating the allJokes property every time the Get Jokes button is clicked. In the declarative way, we create an observable allJokes$ that listens for the button clicks then executes code to transform the responses to an object that we want to consume. This makes the component pure (no side effects) as the allJokes$ property is never mutated.
We use Angular's async pipe to make the allJokes$ observable "hot". Observables are by default "cold" meaning they will not execute until something is listening (or subscribing) to it. This is different from a promise where a promise executes immediately but only executes once. An observable executes until the subscription or observer completes. Async pipe is Angular's way to subscribe from the HTML template, which will auto complete when the component is destroyed.

NgRX and Why We Need It

In a complex application, pieces of data must be used in different parts of the application. The way that data is shared across the application is stat management. We must think about how / when we should get that data as well as how we should share the data. We also want to think about how we write our code in such a way that is maintainable and understandable to the team.

Enter NgRx. NgRx is the Angular implementation of the Redux pattern. It heavily utilizes RxJs (Ng = Angular, Rx = RxJs) for this implementation. The redux pattern centers around state being an immutable object. The thought is that we should be able to trace back any events (actions) that occur in the system to get a true representation of the application in a moment of time.

There are 4 main pieces to NgRx:

Actions
Effects
Reducers
Selectors

Actions

Actions are the events that are flowing through the application. Dispatching an action means publishing an event that may contain data. We then have listeners (or subscribers) to these events.

Effects

Effects are one of the subscribers / observers to the actions that are published by the system. Actions that are going to mutate the state of the application should be handled by effects. We specifically call out the effect will mutate the application and NOT the state store itself.

An effect takes in an observable (the Actions observable from the `@ngrx/effects` package) and returns another obserable. The observable returned is in the form of an action, which our reducer listens (or subscribes) to. Note: You can have an effect that does not return an action but you must specify `{dispatch: false}`, otherwise your browser will get very mad at you... trust me. The dispatch: false tells our application that we are not dispatching an action from the effect. This is useful when you want an effect to open / dismiss a modal or spinner.

Reducers

Reducers are another subscriber to actions. The difference between an effect and a reducer is that it updates the state store object by creating a new state store object when an action is dispatched (or published) with new data. An important piece to a reducer is that it does NOT mutate the state store. Instead, it creates a new state store with the updated data from the action. This allows for us to have an audit trail of events in the application to get a historical representation of the state of the application at any given point.

Selectors

Selectors are subscribers to the state store that emit (or publish) an event that other parts of the application can subscribe to. Selectors can take parts of the entire store and expose those slices of state. The selectors are memoized to help with application performance.

Conclusion

RxJs in conjunction with NgRx is a powerful way to maintain state in an application. It delivers a declarative and functional (non mutating) implementation which makes debugging the state of the application much easier. It also resembles the pub / sub and event driven design patterns that seasoned developers may be familiar with. I have another article (Domain Driven Design with NgRx) that goes into NgRx a little more.

I hope you found this article useful. If you want to hear more about my thoughts on software, follow me at

@paulmojicatech on Twitter.

Thanks and happy coding!

Domain Driven Design with NGRX

paulmojicatech — Wed, 20 Apr 2022 13:36:34 +0000

What is Domain Driven Design?

Domain Driven Design is a method of implementing software around a construct called domain models. These models define the business rules and processes around a specific domain. This method differs from other methods in that it puts the development team in direct exposure to the business and the stakeholders.

What is NgRx?

NgRx is is Angular's implementation of the redux pattern to manage state within an application. There are 3 main pieces to NgRx:

Actions:
- Actions are events that are dispatched to update the state of the application.
Reducers:
- Reducers are pointers to the current state of the application. We should be able to stitch our reducers (or state stores) to get an accurate representation of the current state of the application.
Effects:
- These are listeners to actions (or events) that execute code to mutate (or cause side effects) the state of the application. A canonical example is when an action is dispatched to load data, an effect listens for that action and makes an HTTP call to fetch the data, and then dispatches another action stating that the HTTP call was completed successfully or failed, thus updating the state of the application.
- An effect takes an observable (the action dispatched it was listening for) and returns another observable (the action with the payload data that will update the state).

Event Storming

Domain driven design has a concept of event storming. The idea around event storming is bringing the business and the dev team together to create an artifact the describes the business rules in the terms of domain events happening in the system. The events are put on a board (either physical or digital) in a linear, time based sequence. This will be the artifact that is delivered at the end of the event storming meeting/s.

How Does NgRx Fit In?

NgRx relies heavily (even in the name) on RxJs. RxJs is the javascript implementation of the Reactive programming pattern. This pattern provides a declarative approach to coding software where event streams flow through the system and based on these events code is executed. One can, hopefully see, how domain events and the Reactive programming pattern can complement each other. Consider the requirements below:

The Requirements

We are building a native application using Ionic so we can leverage our team's web skills. Our application will allow a user to both create a grocery list of items to get and also keep track of grocery list items that have been bought and are in the house.

We want the lists to be stored in device storage so no internet is needed to use the app.

Below is a part of the artifact created during event storming that describes the situation when a user wants to move an item from the items to get list to the current items in the house list.

From event storming to implementation

Domain driven design use a programming paradigm called CQRS, which stands for Command Query Responsibility Separation. This is the pattern of separating the responsibilty of updating (or adding or deleting) in the system from the reading (or querying) what is already in the system.

To me, this has a pretty clear mapping to NgRx where our effects will be our update models and our reducers / selectors will be our read models. The actions that are dispatched are our domain events occurring in any given time and are dispatched through user interaction.

Dispatch the action:

<pmt-mobile-toolbar title="Things to Get" [actionItems]="['create-outline']"
    (actionItemEvent)="itemsToGetStateSvc.setIsModalOpen(true)">
</pmt-mobile-toolbar>

<ion-content *ngIf="viewModel$ | async as viewModel">
    <pmt-input placeholder="Search" [isMobile]="true" (changeEvent)="itemsToGetStateSvc.handleSearchValueUpdated($event)"></pmt-input>
    <ion-list *ngIf="viewModel.itemsNeeded?.length; else noItemText">
        <ion-item *ngFor="let item of viewModel.itemsNeeded | pmtSearchValue : 'name' : viewModel.searchValue!" lines="full">
            <div class="grocery-item-container">
                <ion-checkbox (ionChange)="itemsToGetStateSvc.removeItemFromItemsToGet(item)" class="checkbox"></ion-checkbox>
                <span class="item-name">{{item.name}}</span>
                <span class="qty">Qty: {{item.qty}}</span>
            </div>
        </ion-item>
    </ion-list>
    <ion-modal #ionModal [isOpen]="viewModel.isModalOpen">
        <ng-template>
            <pmt-mobile-toolbar title="Add item" [actionItems]="['close-outline']" (actionItemEvent)="itemsToGetStateSvc.setIsModalOpen(false)"></pmt-mobile-toolbar>
            <div class="form-container">
                <form novalidate [formGroup]="itemsToGetForm">
                    <div class="autocomplete-container">
                        <pmt-autocomplete (valueChangedEv)="handleAutocompleteChangeEv($event)" [allItems]="viewModel.allAvailableItems" label="Enter an item"></pmt-autocomplete>
                    </div>
                    <pmt-input formControlName="qty" label="Qty"></pmt-input>
                    <div class="action-container">
                        <button [disabled]="itemsToGetForm.invalid" mat-raised-button color="primary" (click)="addItem()">Add Item</button>
                    </div>
                </form>
            </div>
        </ng-template>
    </ion-modal>
    <ng-template #noItemText>
        <main class="no-item-section">
            <div>
                {{viewModel.noItemsText}}
            </div>
        </main>
    </ng-template>

</ion-content>

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import {
  CurrentGroceryItem,
  GroceryItem,
} from '@pmt/grocery-list-organizer-shared-business-logic';
import {
  BehaviorSubject,
  ignoreElements,
  map,
  merge,
  Observable,
  tap,
} from 'rxjs';
import {
  addItemToGet,
  loadItemsToGet,
  removeItemToGet,
  setIsItemsToGetModalOpen,
} from './actions/items-to-get.actions';
import {
  getAllAvailableItems,
  getIsAddItemsToGetModelOpen,
  getItemsToGet,
} from './index';
import { ItemsToGetState } from './models/items-to-get-state.interface';
import { ItemsToGetViewModel } from './models/items-to-get.interface';

@Injectable()
export class ItemsToGetStateService {
  readonly INITIAL_STATE: ItemsToGetViewModel = {
    itemsNeeded: [],
    noItemsText: 'You currently do not have any items on your grocery list.',
    isModalOpen: false,
    allAvailableItems: [],
    searchValue: undefined,
  };

  private _viewModelSub$ = new BehaviorSubject<ItemsToGetViewModel>(
    this.INITIAL_STATE
  );
  viewModel$ = this._viewModelSub$.asObservable();

  constructor(private _store: Store<ItemsToGetState>) {}

  getViewModel(): Observable<ItemsToGetViewModel> {
    this._store.dispatch(loadItemsToGet());
    const items$ = this._store.select(getItemsToGet).pipe(
      tap((items) => {
        this._viewModelSub$.next({
          ...this._viewModelSub$.getValue(),
          itemsNeeded: items,
        });
      }),
      ignoreElements()
    );
    const isModalOpen$ = this._store.select(getIsAddItemsToGetModelOpen).pipe(
      tap((isOpen) => {
        this._viewModelSub$.next({
          ...this._viewModelSub$.getValue(),
          isModalOpen: isOpen,
        });
      }),
      ignoreElements()
    );
    const allAvailableItems$ = this._store.select(getAllAvailableItems).pipe(
      map((allAvailableItems) => {
        return allAvailableItems.map((item) => item.name);
      }),
      tap((allAvailableItems) => {
        this._viewModelSub$.next({
          ...this._viewModelSub$.getValue(),
          allAvailableItems,
        });
      }),
      ignoreElements()
    );

    return merge(this.viewModel$, items$, isModalOpen$, allAvailableItems$);
  }

  setIsModalOpen(isOpen: boolean): void {
    this._store.dispatch(setIsItemsToGetModalOpen({ isOpen }));
  }

  addItem(itemToAdd: GroceryItem): void {
    this._store.dispatch(addItemToGet({ item: itemToAdd }));
    this._store.dispatch(setIsItemsToGetModalOpen({ isOpen: false }));
  }

  removeItemFromItemsToGet(itemToRemove: CurrentGroceryItem): void {
    this._store.dispatch(removeItemToGet({ itemToRemove }));
  }

  handleSearchValueUpdated(searchValue: string): void {
    this._viewModelSub$.next({
      ...this._viewModelSub$.getValue(),
      searchValue,
    });
  }
}

Things to Note:

This shows the HTML template for the items to get screen component. The component has a localized service (ItemsToGetStateService) that handles the business logic for the component. The template calls the service to removeItemFromItemsToGet when the checkbox (ion-checkbox) is checked. The implementation for that method is to simply dispatch the removeItemToGet action.

Actions:


export enum CurrentItemActionType {
  ADD_ITEM_TO_CURRENT_LIST = '[Current] Add Item to Current List'
}

export const addItemToCurrentList = createAction(
  CurrentItemActionType.ADD_ITEM_TO_CURRENT_LIST,
  props<{ itemToAdd: CurrentGroceryItem }>()
);

export enum ItemsToGetActionType {
  REMOVE_ITEM_TO_GET = '[Items to Get] Remove Item to Get',
}

export const removeItemToGet = createAction(
  ItemsToGetActionType.REMOVE_ITEM_TO_GET,
  props<{ itemToRemove: GroceryItem }>()
);

Things to Note:

We created two state stores (one for current list and one for items to get). While this keeps the actions, effects, and reducers separate, we can still listen for events (or actions) from either store as long as the EffectsModule is already registered.
We have one action in each store, one to add an item to the current items list, and one to remove an item from the items to get list.

Current Item Effects:

@Injectable()
export class CurrentGroceryItemsEffects {
  constructor(
    private _actions$: Actions,
    private _currentItemsUtilSvc: CurrentGroceryItemsUtilService
  ) {}


  addItemToCurrentListUpdateStorage$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(addItemToCurrentList),
        tap((action) => {
          this._currentItemsUtilSvc.addItemToCurrentListOnStorage(
            action.itemToAdd
          );
        })
      ),
    { dispatch: false }
  );

}

Current Item Util Service


import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import {
  CurrentGroceryItem,
  IonicStorageService,
  IonicStorageType,
} from '@pmt/grocery-list-organizer-shared-business-logic';
import { filter, forkJoin, from, map, take } from 'rxjs';
import { loadCurrentItemsSuccess } from '../actions/current-grocery-items.actions';
import { CurrentListState } from '../models/current-list.interface';

@Injectable({
  providedIn: 'root',
})
export class CurrentGroceryItemsUtilService {
  constructor(
    private _store: Store<CurrentListState>,
    private _storageSvc: IonicStorageService
  ) {}


  addItemToCurrentListOnStorage(itemToAdd: CurrentGroceryItem): void {
    this._storageSvc
      .getItem(IonicStorageType.CURRENT_ITEMS)
      .pipe(take(1))
      .subscribe((itemsStr) => {
        const currentItems = itemsStr
          ? [...JSON.parse(itemsStr), itemToAdd]
          : [itemToAdd];
        this._storageSvc.setItem(
          IonicStorageType.CURRENT_ITEMS,
          JSON.stringify(currentItems)
        );
      });
  }

}

Things to Note:

We inject the util service into the effects. In the util service, we inject both the store and the storage service, where the store allows us to query the store for the current state of the application and the storage stores the items to device storage.
The effects listen for the addItemToCurrentList action to be dispatched, then calls the util service to execute code. We also specify that the effect {dispatch: false}. Since an effect takes in an observable and returns an observable, if we did not specify {dispatch: false}, we would find ourselves in an endless loop.

Items To Get Effects


@Injectable()
export class ItemsToGetEffects {
  constructor(
    private _actions$: Actions,
    private _storageSvc: IonicStorageService,
    private _itemsToGetUtilSvc: ItemsToGetUtilService
  ) {}

  removeItemFromItemsToGetUpdateStorage$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(removeItemToGet),
        switchMap((action) =>
          this._storageSvc.getItem(IonicStorageType.ITEMS_TO_GET).pipe(
            tap((itemsStr) => {
              const itemsToGet = (
                JSON.parse(itemsStr) as CurrentGroceryItem[]
              ).filter((item) => item.name !== action.itemToRemove.name);
              this._storageSvc.setItem(
                IonicStorageType.ITEMS_TO_GET,
                JSON.stringify(itemsToGet)
              );
            })
          )
        )
      ),
    { dispatch: false }
  );

  removeItemFromItemsToGetAddItemToCurrentList$ = createEffect(() =>
    this._actions$.pipe(
      ofType(removeItemToGet),
      map((action) => {
        const itemToAdd: CurrentGroceryItem = {
          ...action.itemToRemove,
          id: `${new Date()}_${action.itemToRemove.name}`,
          datePurchased: new Date().toDateString(),
        };
        return addItemToCurrentList({ itemToAdd });
      })
    )
  );
}

Things to Note:

We create 2 effects to listen for one action (removeItemToGet). When this action is dispatched, we have one effect that where we use {dispatch: false} to update the device storage.
The other effect dispatches the addItemToCurrentList action, which we listen for in our effect we discussed above.

Reducers:


const initialState: CurrentListState = {
  currentItems: undefined,
};

export const currentGroceryItemsReducer = createReducer(
  initialState,
  on(addItemToCurrentList, (state, { itemToAdd }) => {
    const updatedItems = [...(state.currentItems ?? []), itemToAdd];
    return { ...state, currentItems: updatedItems };
  })
);

const initialState: ItemsToGetState = {
  itemsToGet: [],
  isLoaded: false,
  isAddItemModalVisible: false,
  allAvailableItems: [],
};

export const itemsToGetReducer = createReducer(
  initialState,
  on(removeItemToGet, (state, { itemToRemove }) => {
    const itemsToGet = state.itemsToGet.filter(
      (item) => item.name !== itemToRemove.name
    );
    return { ...state, itemsToGet };
  })
);

Things to Note:
We have 2 reducers that update our 2 stores (or read models for CQRS folks) when the 2 actions are dispatched.

Conclusion

In this article we showed how we can think about how the implementation to NgRx can be similar to the implementation of domain driven design. Both NgRx and Domain Driven Design rely heavily on events occurring in the system to derive the state of the system / application. We can also see how NgRx is similar to the CQRS (Command Query Responsibility Separation) that is a tenant of Domain Driven Design.

Separate Business Logic from UI Presenational Logic Using NX

paulmojicatech — Mon, 28 Mar 2022 19:28:11 +0000

Separate Business Logic from UI Presenational Logic Using NX

Description

In this article, we will be discussing the practice of separating an application's business logic from the UI presentational logic. We achieve this by using NX, utilizing the design of creating an app, which is where the presentational components will be, and libs, which is where the business logic will be.

Why though?

I have been in many codebases that have 1000+ lines of code for a given component. The problem with this is that we are more than likely not separating WHAT the component does vs. HOW it does it.

But wait a minute, why should we separate those things? Below are some reasons why I think it is important:

It makes testing easier. When all business logic occurs in an injected service, it is easier to test the presenation (WHAT) the UI shows by mocking when the service returns. For example, if you have some form validation logic that disables the submit button based on cross form validation, you can have a method on the service that returns a boolean (or better yet an observable / subject of type boolean) that you can mock to test the state of the button. You can also expose a method that handles inputs on the form where in your unit test you can just test that the input changes call the service to perform the validation. In the unit tests for the service, you can test that method to validate that validation is correct.
It allows for more declarative / reactive programming. Your component simply displays data and is aware of UI interaction. Your service/s are doing the data orchrestation to pass your component and also the processing of the UI interactions.
It allows code resusability. Consider the situation where your team is tasked with creating a web application. Six months later, the business says that there is a need to create a mobile, either via native web view hybrid or simply making it more responsive, if you built out your component to be presentational only, then you really only need to peel the potato in a different way. The receipe remains the same, meaning you will not have to make many changes to the logic of how the component works.

The Approach

We will create separate libs in our NX monorepo that will export our services needed by our component as well as any interfaces, types, and enums needed. We will also export our state store so that we can initialize our state store in the application.

Last thing to note about this is that the app is an Ionic app. This is not pertinent to this article.

Current List Module

The component

component.html


    <pmt-mobile-toolbar class="header" title="Current Items">
    </pmt-mobile-toolbar>

    <ion-content *ngIf="viewModel$ | async as viewModel">
        <ion-list *ngIf="viewModel.currentItems?.length; else noItemText">
            <ion-item-sliding *ngFor="let item of viewModel.currentItems;">
                <ion-item-options side="start">
                    <ion-item-option color="danger">
                        <ion-icon name="trash-sharp"></ion-icon>
                    </ion-item-option>
                </ion-item-options>
                <ion-item-options side="end">
                    <ion-item-option (click)="currentListStateSvc.markItemAsUsed(item)">
                        <ion-icon name="checkmark-sharp"></ion-icon>
                    </ion-item-option>
                    <ion-item-option (click)="currentListStateSvc.decrementItem(item)" *ngIf="item.qty > 1"><ion-icon name="remove-sharp"></ion-icon></ion-item-option>
                </ion-item-options>
                <ion-item lines="full">
                    <div class="grocery-item-container">
                        <span class="item-name">{{item.name}}</span>
                        <div class="item-details">
                            <div class="details-container">
                                <span class="label">Date Purchased:</span>
                                <span>{{item.datePurchased}}</span>
                            </div>
                            <div class="details-container">
                                <span class="label">Qty Left:</span>
                                <span class="qty">{{item.qty}}</span>
                            </div>
                        </div>
                    </div>
                </ion-item>

            </ion-item-sliding>
        </ion-list>
        <ng-template #noItemText>
            <main class="no-item-section">
                <div>
                    {{viewModel.noItemsText}}
                </div>

            </main>
        </ng-template>
    </ion-content>

Things to Note:

We are using a pmt-mobile-toolbar component. This is another library in our monorepo that is a wrapper around Ionic's toolbar component.
We using a variable called viewModel$. This is an observable that contains all the data needed for this component. We use async pipe here as a best practice for Angular applications.
We bind to some elements' click handler where we call the service directly.

component.ts

import { Component, OnInit } from '@angular/core';
import {
  CurrentListStateService,
  CurrentListViewModel,
} from '@pmt/grocery-list-organizer-business-logic-current-grocery-items';
import { Observable } from 'rxjs';

@Component({
  selector: 'pmt-current-list',
  templateUrl: './current-list.component.html',
  styleUrls: ['./current-list.component.scss'],
  providers: [CurrentListStateService],
})
export class CurrentListComponent implements OnInit {
  viewModel$!: Observable<CurrentListViewModel>;

  constructor(public currentListStateSvc: CurrentListStateService) {}

  ngOnInit(): void {
    this.viewModel$ = this.currentListStateSvc.getViewModel();
  }
}

Things to Note:

We import items from the @pmt/grocery-list-organizer-business-logic-current-grocery-items. This is the library we created in the monorepo. This library is a one for one map to the module that contains this specific component. Also, the items we import are both the service and the view model.
We inject our state service directly into our component. We will see later that in the service, we don't use providedIn: root when using the @Injectable annotation. This means that this service will be both created and destroyed when this component is created and destroyed.
This is a very lean component that really only takes the data from the service.

app.module.ts

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage-angular';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {
  GlobalEffects,
  globalReducer,
} from '@pmt/grocery-list-organizer-shared-business-logic';
import { EffectsModule } from '@ngrx/effects';
import {
  CurrentGroceryItemsEffects,
  currentGroceryItemsReducer,
} from '@pmt/grocery-list-organizer-business-logic-current-grocery-items';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserAnimationsModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    StoreModule.forRoot({
      app: globalReducer,
      'current-list': currentGroceryItemsReducer,
    }),
    EffectsModule.forRoot([GlobalEffects, CurrentGroceryItemsEffects]),
    StoreDevtoolsModule.instrument({}),
    AppRoutingModule,
    ReactiveFormsModule,
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Things to Note:

This is the app module file. Since the default screen is the current list view, we import our state exports here (currentGroceryItemsReducer and CurrentGroceryItemsEffects). For other lazy loaded modules, we can import the state exports in that module specifically.

@pmt/grocery-list-organizer-business-logic-current-items

current-list-state service

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { CurrentGroceryItem } from '@pmt/grocery-list-organizer-shared-business-logic';
import { map, Observable } from 'rxjs';
import { getCurrentItems } from '..';
import {
  decrementItemQty,
  markItemAsUsed,
} from '../actions/current-grocery-items.actions';
import {
  CurrentListState,
  CurrentListViewModel,
} from '../models/current-list.interface';

@Injectable()
export class CurrentListStateService {
  constructor(private _store: Store<CurrentListState>) {}

  getViewModel(): Observable<CurrentListViewModel> {
    const viewModel$ = this._store.select(getCurrentItems).pipe(
      map((currentItems) => {
        const itemsToReturn: CurrentGroceryItem[] = currentItems ?? [];
        const viewModel: CurrentListViewModel = {
          currentItems: itemsToReturn,
          noItemsText: 'You currently have no items.',
        };
        return viewModel;
      })
    );
    return viewModel$;
  }

  markItemAsUsed(usedItem: CurrentGroceryItem): void {
    this._store.dispatch(markItemAsUsed({ usedItem }));
  }

  decrementItem(itemToDecrement: CurrentGroceryItem): void {
    this._store.dispatch(decrementItemQty({ itemToDecrement }));
  }
}

Things to Note

We do not use providedIn: root in the @Injectable annotation here, as we discussed earlier.
We inject the store directly into this service.
This is a straight forward service where getViewModel orchestrates the data to pass to the component, and the markItemAsUsed and decrementItem handle th UI interactions but just dispatching actions to the store.

actions.ts

import { createAction, props } from '@ngrx/store';
import { CurrentGroceryItem } from '@pmt/grocery-list-organizer-shared-business-logic';

export enum CurrentItemActionType {
  LOAD_CURRENT_ITEMS = '[Current] Load Current Items',
  LOAD_CURRENT_ITEMS_SUCCESS = '[Current] Load Current Items Success',
  ADD_ITEM_TO_CURRENT_LIST = '[Current] Add Item to Current List',
  MARK_ITEM_AS_USED = '[Current] Mark Item As Used',
  DECREMENT_ITEM_QTY = '[Current] Decrement Item Qty',
}

export const loadCurrentItems = createAction(
  CurrentItemActionType.LOAD_CURRENT_ITEMS
);

export const loadCurrentItemsSuccess = createAction(
  CurrentItemActionType.LOAD_CURRENT_ITEMS_SUCCESS,
  props<{ currentItems: CurrentGroceryItem[] }>()
);

export const addItemToCurrentList = createAction(
  CurrentItemActionType.ADD_ITEM_TO_CURRENT_LIST,
  props<{ itemToAdd: CurrentGroceryItem }>()
);

export const markItemAsUsed = createAction(
  CurrentItemActionType.MARK_ITEM_AS_USED,
  props<{ usedItem: CurrentGroceryItem }>()
);

export const decrementItemQty = createAction(
  CurrentItemActionType.DECREMENT_ITEM_QTY,
  props<{ itemToDecrement: CurrentGroceryItem }>()
);

reducer.ts

import { createReducer, on } from '@ngrx/store';
import {
  addItemToCurrentList,
  decrementItemQty,
  loadCurrentItemsSuccess,
  markItemAsUsed,
} from '../actions/current-grocery-items.actions';
import { CurrentListState } from '../models/current-list.interface';

const initialState: CurrentListState = {
  currentItems: undefined,
};

export const currentGroceryItemsReducer = createReducer(
  initialState,
  on(loadCurrentItemsSuccess, (state, { currentItems }) => ({
    ...state,
    currentItems,
  })),
  on(addItemToCurrentList, (state, { itemToAdd }) => {
    const updatedItems = [...(state.currentItems ?? []), itemToAdd];
    return { ...state, currentItems: updatedItems };
  }),
  on(markItemAsUsed, (state, { usedItem }) => {
    const currentItems = state.currentItems?.filter(
      (item) => item.id !== usedItem.id
    );
    return { ...state, currentItems };
  }),
  on(decrementItemQty, (state, { itemToDecrement }) => {
    const updatedItems = state.currentItems?.map((item) => {
      if (item.id === itemToDecrement.id) {
        const updatedItem = { ...item, qty: itemToDecrement.qty - 1 };
        return updatedItem;
      }
      return item;
    });

    return { ...state, currentItems: updatedItems };
  })
);

effects.ts

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { initializeApp } from '@pmt/grocery-list-organizer-shared-business-logic';
import { tap } from 'rxjs';
import {
  addItemToCurrentList,
  decrementItemQty,
  markItemAsUsed,
} from '../actions/current-grocery-items.actions';
import { CurrentGroceryItemsUtilService } from '../services/current-grocery-items-util.service';
@Injectable()
export class CurrentGroceryItemsEffects {
  constructor(
    private _actions$: Actions,
    private _currentItemsUtilSvc: CurrentGroceryItemsUtilService
  ) {}

  initAppLoadItems$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(initializeApp),
        tap(() => this._currentItemsUtilSvc.loadItemsFromStorage())
      ),
    { dispatch: false }
  );

  addItemToCurrentListUpdateStorage$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(addItemToCurrentList),
        tap((action) => {
          this._currentItemsUtilSvc.addItemToCurrentListOnStorage(
            action.itemToAdd
          );
        })
      ),
    { dispatch: false }
  );

  markItemAsUsed$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(markItemAsUsed),
        tap((action) => {
          this._currentItemsUtilSvc.updateStorageAfterItemMarkedAsUsed(
            action.usedItem
          );
        })
      ),
    { dispatch: false }
  );

  decrementItemUpdateStorage$ = createEffect(
    () =>
      this._actions$.pipe(
        ofType(decrementItemQty),
        tap((action) => {
          this._currentItemsUtilSvc.updateStoargeAfterDecrementItem(
            action.itemToDecrement
          );
        })
      ),
    { dispatch: false }
  );
}

Things to Note:

This actions and reducer file are straight forward and have nothing noteworthy to point out.
On the effects file, we inject a util service that will NOT be exported as part of the library. We want to only allow access to that service from within this library.
We are managing UI state through events that we listen for in our effects which will be a separate article.

index.ts

export * from './lib/actions/current-grocery-items.actions';
export * from './lib/reducer/current-grocery-items.reducer';
export * from './lib/effects/current-grocery-items.effects';
export * from './lib/index';

export { CurrentListStateService } from './lib/services/current-list-state.service';
export * from './lib/models/current-list.interface';

Things to Note:

This is our contract for the library. You can see that while we export our models, state service, and store arifacts, we do not export our util service. That service is internal for this library.

Conclusion

I hope you enjoyed this article on my approach of using NX to separate out UI pieces from the business logic in our applications. Hopefully, you all can give it a try and let me know how it works for you. You can reach me via Twitter @paulmojicatech. Happy Coding!

Install SSL on Ubuntu NGINX server

paulmojicatech — Fri, 25 Feb 2022 18:21:58 +0000

Description

We are going to walk through how to set up website using nginx that is served via https. We will be using Certbot to accomplish this.

Steps

Go to Certbot webpage
On the webpage, select Nginx and Ubuntu 18 in the drop downs
Follow the steps on the webpage. (Note:Ubuntu 18 comes with the snap program already installed so no need to do a apt-get.
Certbot will automatically find the nginx sites for you to serve behind https. Just pick websites you want the SSL certificate to be applied to.

Conclusion

With Let's Encrypt and tools like Certbot, serving content over a secure channel has never been easier.

Senior to Lead, What You Need to Know

paulmojicatech — Sun, 13 Feb 2022 07:20:12 +0000

Overview

This is the third installment of documenting my journey as a software engineer.

The previous two posts are:

In this article, I want to talk about growing from a senior engineer to a tech lead / staff / architect / principal level engineer. Note: Some companies have different levels for the above roles, but in this post, I will lump them together.

Document, Document, Document

As you progress in your career, you will find more and more that you are doing much less of the implementation details of features. Rather, you will start to drive patterns on how a feature should be implemented. This sometimes means to build out a few initial features to follow the pattern, but soon becomes a task of getting team buy-in. And to get buy-in, the patterns need to be documented in a way that is easily consumable by the team. It also needs to be discoverable. If your team does not know where to find the documentation for the new pattern, getting them to follow you on the journey will be a tough road.

Get Good at Presenting

You undoubtably be asked to present the patterns you want to implement in your new role. In order to do this, you should get good (and comfortable) with speaking in front of both people on your team AND not directly on your team.

One suggestion is to write an article (or documentation) on what you want to present first. This organizes your thoughts and serves as a good rough sketch of your presentation.

Another suggestion is to present to your team before presenting to a bigger audience. You know your teammates and will be more comfortable with them as you get valuable practice time.

Also, know your audience. Do you want your presentation from a 10,000 foot, 5,000 foot, or 500 foot view? If you are talking to a more business focused audience, you probably want to stick to benefits to the business. Even if you are talking to a highly technical group, they could still have technical expertise that is not in the category that you will be presenting. In this case, you want to be technical but not in the same detail level as when you present to an audience that is more comfortable working in the same space as the item you are presenting.

Soft skills Are Paramount

When you become a leader, whether it is in software, sports, or really anything else, you need to get your teammates come along with you. To accomplish this, you must be someone that does not rub people the wrong way. Sometimes the best engineers are not necessarily the best leaders because of this. You can churn out line after line of code but if you are constantly telling others on your team how good you are and how bad their PRs are, you will have a tough time getting them to come with you.

To get your team to the final destination, you first need everyone to face the same direction. And the more distributed the team, the harder it is to accomplish this. This means that communication is imperative. One suggestion is to use the collaboration tools (Slack, MS Teams, WebEx, etc) to get a pulse on all of the different teams. Know what they are working on and provide constructive feedback when you see something BOTH good AND bad. I tend to look at PRs occasionally even if they are not assigned to me. I will provide feedback and sometimes send a small PR to illustrate my suggestions.

Also listen to your team and the suggestions they make. Being a leader does not mean you make unilateral decisions but instead you facilitate discussions on the road ahead. Acknowledge when you have made a mistake, praise the team on wins, and bear the load on losses. I have found this helps get you respect from the team and respected leaders get more followers.

I hope this has been helpful. Happy Coding!

Exposing DotNet Core 6.0 WebApi From a Cloud Server With Docker

paulmojicatech — Sun, 23 Jan 2022 16:06:15 +0000

Overview

In this article, we will go over how to deploy a DotNet Core 6.0 Web API endpoint on a cloud server. I will be using Linode as my cloud hosting provider because you can spin up a hosting instance for $5 / month. I will use Cloudflare as my public proxy since they have a free service to proxy incoming requests to an SSL connection.

Getting Started

First, let's set up our Linode instance. Once you have signed up, you can click on Create Linode on the dashboard. When creating, I used the Ubuntu flavor of Linux. In the Linode Plan section, you can select the Shared CPU plans and pick the Nanode 1GB instance. This will give you 1GB of RAM, 1CPU, and 25GBs of storage for $5 / month. Once that is created, you should see your instance now on your dashboard.

Setting up Linode instance

Now let's go ahead and set up our instance.

SSH into our instance by typing ssh root@<ipaddress> and entering your password in your terminal.
Run apt-get update.
Install Git by running apt install git-all.
Install Docker by running:

apt-get update
apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

Install Nginx by running apt update then apt install nginx.

For now, we are done with installing what we need on our Linode instance.

Setting up Cloudflare proxy

Let's set up our Cloudflare public proxy so we can serve our requests over https. Note: We can do this on our Linode instance itself by using OpenSSL, but it requires extra configuration set up on nginx and why not use a free service right?

Sign up for Cloudflare
Register a domain name
Log on to Cloudflare.
On the dashboard, you can click Add a site
Enter your domain name and select the free plan
On the dashboard, select the site you just created then select DNS on the left panel.
Add an A record that points to your Linode IP Address
- Make sure you select Proxied for your proxy status.

Your Cloudflare proxy should now be set up. Note: You may have to wait up to 48 hours for your changes to propagate.

Setting up our local environment

Since we will be using DotNet Core 6.0 to expose our API, we need to set up our development environment. Note: We won’t need to do this in our Linode instance since we will be running it inside a container.

Download the .NET 6.0 SDK and runtime.
Create a directory on your computer and run the command dotnet new webapi. This will create your .NET project
Open the directory and initialize the Git repository by running git init.
Create a dockerfile in root directory and add the contents below:

# Download Microsoft SDK container
FROM mcr.microsoft.com/dotnet/sdk:6.0-alpine as build

WORKDIR /test

COPY ./*.csproj .
RUN dotnet restore

COPY . ./
RUN dotnet publish -c Release -o out

#Download Microsoft runtime container
FROM mcr.microsoft.com/dotnet/aspnet:6.0-alpine as runtime

WORKDIR /test

COPY --from=build /test/out .

EXPOSE 80

ENTRYPOINT [ "dotnet", "test.dll" ]

Now we can build this image by running docker build -t my-dotnet-image .
- The -t option specifies the tag name as my-dotnet-image
Create a container from the image by running docker run -p 3000:80 my-dotnet-image
- This creates the container and proxies the localhost's port 3000 to the container's port 80.
Now you should be able to open Postman and get a response back when you call http://localhost:3000/weatherforecast
Now you should commit your local changes to your Github repo.
- We will be pulling this down on your Linode cloud instance.

Finishing up

Now let's wrap it up by ssh'ing into our cloud instance, pulling our code down from Github, and spinning up our container. Then, we will configure nginx to proxy the requests to our container.

SSH into our Linode instance
Once in, run:

cd ..
mkdir dev
cd dev
git init
git remote add origin <your Github repo>
git pull origin <your Github branch>
docker build -t my-dotnet-image .
docker run -p 3000:80 my-dotnet-image

Here, we pulled down our code we ran locally and now are running it on the cloud. The last thing to do is proxy incoming traffic to our container. To do this, we need to go into our nginx config files. The file we will update is the default file in the the etc/nginx/sites-enabled directory.
Once you cd into the directory, run vi default to open the default file. Then, enter i to edit the file. Then, you can update the server section with the contents below:

server {
    listen 80;
    listen [::]:80;
    server_name <your cloudflare url>;
    location / {
        proxy_pass http://localhost:3000;
    }
}

Press your esc key to get out of edit mode, then type :wq to save your changes.
Lastly, we need to restart nginx by running nginx -s stop then nginx.

You now should be able to call https://<your url>/weatherforecast to get a valid response.

Conclusion

In this article, we were able to use proxies and containers to cheaply expose an API to the public. In a future article, I will write about setting up microservices, using this article as a jump point.