DEV Community: Harshal Shah

MarkoJS Frontend Development with Generative AI: A Modern Approach

Harshal Shah — Wed, 06 Nov 2024 14:11:35 +0000

In the ever-evolving face of web development, MarkoJS takes center stage as one of the most capable front end frameworks, providing unique capabilities such as server-side rendering of HTML at compile time and greatly simplifying reactive components. Combining this with the newer capabilities of generative AI, MarkoJS cements its position to take on the needs of developers in creating modern, efficient, and dynamic web applications.

In this article, we will explore MarkoJS generative AI in developing more intuitive front-end development that is intelligent, automates tasks, minimizes unnecessary work, and crafts personalized user experiences.

What is MarkoJS?

MarkoJS is an extremely fast, efficient javascript based framework for user interface development. Unlike most traditional client-side frameworks, MarkoJS is good out of the box with server-side rendering and also supports reactive components.

Key features in MarkoJS include:

Declarative Syntax: MarkoJS is based on a templating language that makes it much easier to construct reusable components.

Server side rendering: Instead of immediately loading an empty page, HTML is rendered on the server, improving SEO and user experiences.

Efficient reactivity: Marko doesn’t re-render the entire page but updates those parts of UI which have changed.

Generative AI in Front end development

Generative AI is a shorthand for algorithms, mainly machine learning models, which can independently create new content by leveraging the patterns they learn from data. This generative AI could assist a front end developer by doing the following:

1) Code Generations: Automate mundane coding tasks, such as scaffolding of components, CSS styles, or even HTML markup.

2) Content generations: Dynamic creation of content on web pages, including personalized recommendations, blog posts or different UI variants.

3) Design systems: Given user preferences or brand guidelines, automatically generate consistent UI layouts or designs.

4) Testing and debugging: AI powered testing of an applications to uncover bugs, suggestions for optimizations or quite simply, the automated writing of unit tests for each component.

How MarkoJS can benefit from Generative AI

1) Automatic component creation

MarkoJS has declarative syntax that can be dynamically generated by AI. For example, generative AI might look at the existing components in a program and create new ones automatically if it sees a pattern. This can be useful for large applications with lots of repetitive components.

For example, a generative AI model could learn your UI design pattern and generate a new Marko component for the user profile card from some design specifications. This reduces development time and would therefore assure consistency throughout the application.

<profile-card> <div class="user-info"> <img src=AI_GENERATED_AVATAR alt="user avatar"> <h2>@AI_GENERATED_NAME</h2> <p>@AI_GENERATED_BIO></p> </div> </profile-card>

2) Personalized user interface

Generative AI can personalize web applications built on MarkoJS by generating active content to automatically adopt to user behavior. Suppose you are building an e-commerce site, AI will study what the user prefers and generate suggestions of related products, or even dynamically alter UI elements reflecting interests relevant to the said user.

3) Optimizing Performance with AI-driven Predictions

MarkoJS already has a name for performance out of the box, thanks to server side rendering and optimized reactivity. Still, generative AI could push the bar even higher in respect of performance. AI may anticipate user behavior and either preload or pre-render components users will most likely interact with. this kind of anticipatory loading is what makes applications feel snappier because it reduces perceived load times.

It might, for example, use the customer’s past behavior on the shop’s website to allow it to pre-load Marko components for categories or products they have already demonstrated interest in so that the page appears immediately when they go to that section.

4) Content generation for SEO

MarkoJS is a great contender for SEO due to its capability of server side rendering HTML. Due to AI driven content generation tools, developers can generate SEO friendly content on the fly. Generative AI model such as GPT can generate product description, blog posts, or metadata tags that may be directly embedded into the server rendered HTML to improve search engine visibility.

Through this, the AI generated content updates in real time to new trends, keywords, or search terms that user may use, thereby yielding a competitive edge on the website with respect to SEO rankings.

5) AI assisted testing and debugging

Generative AI extends this development workflow by providing the ability to automatically detect bugs or performance bottlenecks within MarkoJS applications. For instance, AI-driven utilities can scrutinize code for potential inefficiencies, propose optimizations, and even produce automated tests for your Marko components.

For example, an AI tool can create unit tests for a form component in MarkoJS to ensure that said form acts as expected under a variety of conditions-everything from validation rules to API interactions.

`describe('Form Component', () => {
it('should render the form with default values', () => {
const form = renderFormComponent();
expect(form.find(('input[name="username"]).value).toBe("");
});

it('should show error message for invalid input', () => {
const form = renderFormComponent({ username: "invalid_user"});
expect(form.find('error-message').textContent).toBe("invalid username")
});
})
`

Real world applications

By integrating generative AI into MarkoJS, the following undustry use cases open up:

1) E-Commerce: Dynamic product recommendations and personalizations: AI content creation for marketing/SEO.

2) Content Platforms: Personalized new feeds, auto generation of content, intelligent UI updates depending on user interactions

3) Enterprise applications: Automation of dashboard components, predective analytics embedded in th UI, and enhanced collaboration tools via AI generated content or components.

Conclusion

With the integration of generative AI into MarkoJS, a whole new frontier of front end development has unfolded. Automation can free one up to more strategic levels of application build-designs, functionalities and business logic- so performance optimization and personalizations for user experiences could be meted out. MarkoJS is the perfect candidate for AI enhanced workflows due to its declarative, server side rendered approach; hence, enabling teams to build faster, smarter and more efficient web applications.

In summary, generative AI will be a dominant factor in how front end development will be done in future, and some of these frameworks, like MarkoJS, will be at the fore.

Turn your angular application into PWA through service worker

Harshal Shah — Wed, 19 Feb 2020 19:36:55 +0000

What is Service worker?

A Service worker is a script (JavaScript file) that runs in background and contributes in offline first web application development. A Service worker cannot directly interact with the webpage nor it can directly access the DOM. It runs on a different thread but can communicate with webpages through messages (Post Messages).

Service workers are fully asynchronous. They are working on a different thread that’s why they don’t block your application in any way.

APIs such as synchronous XHR and localStorage can’t be used inside a service worker.

Service workers are terminated when not in use and restored when required.

Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them. For example, they can query a local cache and deliver a cached response if one is available. Proxying isn't limited to requests made through programmatic APIs, such as fetch; it also includes resources referenced in HTML and even the initial request to index.html. Service worker-based caching is thus completely programmable and doesn't rely on server-specified caching headers.

Service Workers in Angular

Starting with version 5.0.0, Angular ships with a service worker implementation. Angular developers can take advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs.

The Angular service worker's behavior follows that design goal:

Caching an application is like installing a native application. The application is cached as one unit, and all files update together.

A running application continues to run with the same version of all files. It does not suddenly start receiving cached files from a newer version, which are likely incompatible.

When users refresh the application, they see the latest fully cached version. New tabs load the latest cached code.

Updates happen in the background, relatively quickly after changes are published. The previous version of the application is served until an update is installed and ready.

The service worker conserves bandwidth when possible. Resources are only downloaded if they've changed.

To support these behaviors, the Angular service worker loads a manifest file from the server. The manifest describes the resources to cache and includes hashes of every file's contents. When an update to the application is deployed, the contents of the manifest change, informing the service worker that a new version of the application should be downloaded and cached. This manifest is generated from a CLI-generated configuration file called ngsw-config.json.

Why to add Service Worker in Angular application?

Simple answer of this question is, to convert your application to WPA (Web Progressive Application) which responds even when there is no network connection.

How to add Service Worker?

Adding Service workers in angular app is as easy as adding a module. You just need to run following command.

ng add @angular/pwa --project project-name

where project-name Is a name you already defined in your angular.json file.

The above command will do following code change in your angular project out of the box. You do not need to do anything.

1.Enables service worker build support in the CLI by installing related packages (‘@angular/pwa’ and ‘@angular/service-worker’). It also add those package in package.json file.

Add following lines in index.html

Add following line in app.module imports.

ServiceWorkerModule.register('ngsw-worker.js', { enabled: true })

Create manifes.webmanifest file is src folder
Create service worker configuration file called ngsw-config.json file in root folder
Update angular.json file with following changes in configuration object.

"configuration": {

"production": {

    "serviceWorker": true,

     "ngswConfigPath": "ngsw-config.json"

}

}

Installs icon files to support the installed Progressive Web App (PWA).

How to debug Service Worker?

1.Build the project
ng build –prod

Run the project with http-server
http-server –port 8080 dist
Go to localhost:8080 in browser. When you load first time with network, it will cached necessary resources(whatever you have mentioned in config file).
Go to network , checked offline and make network unavailable. Refresh the page and observe the network tab. You will see little gear icon and in the initiator column, you will see initiated by service-worker.js file.

Another way to debug whether Service workers are working correctly or not:

To see the audits results, go to Audits in the developer tools of Google Chrome and run the audits. Audits will tell you whether your application satisfies all the criteria for PWA or not. If service workers are working correctly then you will see green dot next to following points:

Registers a service worker that controls page and start_url
Current page responds with a 200 when offline
start_url responds with a 200 when offline

Above three points are the proof that your service workers are working correctly.

See how easy to convert your angular application to PWA. Convert it today and let me know the feedback in comment.

Angular: Component vs Directive

Harshal Shah — Thu, 06 Feb 2020 20:14:53 +0000

Directives

“The mechanism by which we attach behaviour to elements in the DOM, consisting of Structural, Attribute and Component types.”

Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

In addition to components, there are two other kinds of directives: structural and attribute. Angular defines a number of directives of both kinds, and you can define your own using the @Directive() decorator.

Just as for components, the metadata for a directive associates the decorated class with a selector element that you use to insert it into HTML. In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.

Example:

import {Directive} from 'angular2/angular2';

@Directive({
selector: "[myDirective]",
hostListeners: {
'click': 'showMessage()'
}
})

class Message {

constructor() {
    // initilization
}

showMessage() { console.log('Hello Directive'); }

}

Click here

Components

“The specific type of directive that allows us to utilize web component functionality - encapsulated, reusable elements available throughout our application.”

Components are basically just a new type of directive that is designed for component-based architecture. In a lot of ways, components are more restricted in their functionality, instead encouraging better conventions and design that actually leads to more maintainable and reusable code.

Components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

“Component is a directive with a view or template”

Example:

import {Component, View} from 'angular2/angular2';

@Component({
selector: 'message'
})

@View({
template: <h1>Hello Angular {{version}}</h1>
})

class Message {
constructor(public version: string) {}
}

Differences:

Components

For register component we use @Component meta-data annotation.
Component is a directive which use shadow DOM to create encapsulate visual behavior called components. Components are typically used to create UI widgets.
- Component is used to break up the application into smaller components.
- Only one component can be present per DOM element.
- @View decorator or templateurl template are mandatory in the component.
- Component is used to define pipes

Directives

For register directives we use @Directive meta-data annotation.
Directives is used to add behavior to an existing DOM element.
Directive is use to design re-usable components.
Many directive can be used in a per DOM element
Directives don’t have View.
You can’t define Pipes in directive.

Circular dependency warnings in angular

Harshal Shah — Wed, 29 Jan 2020 21:28:09 +0000

What is Circular Dependency?

In software engineering, a circular dependency is a relation between two or more modules which either directly or indirectly depend on each other to function properly. Such modules are also known as mutually recursive.

In very large software designs, software engineers may lose the context and inadvertently introduce circular dependencies. There are tools to analyze software and find unwanted circular dependencies.

Circular Dependency in Angular

Angular’s dependency injection is a great feature to productivity, but even it has its limits.

While not an everyday occurrence, it is quite possible to come across a circular dependency. This happens when service A injects service B, but service B in turn injects service A, usually indirectly. For example, B depends on service C which depends on A – A -> B -> C -> A forms a nice little circle.

When Angular’s bootstrap process tries to setup all the services and inject each service’s dependencies, it detects when such a scenario happens and errors out, instead of getting stuck in an infinite loop.

In most cases, circular dependencies are code smells for design that could be made clearer. Most likely you have a service that’s gotten too big, and splitting it will result in cleaner code and no circular dependency.

Circular Dependency can result in a crash of an application. We should definitely remove circular dependency present in codebase.

Circular Dependency Warnings in Angular

Circular dependency is definitely harmful but warnings about circular dependency may or may not be. Many times we get lots of circular dependency warnings but our application still runs smoothly. So what are those warnings about?

As I said, those may not be harmful, but definitely those are annoying. I would not love at all to see lots of yellow text yelling at me "You might be doing Something Wrong", when I build my application. Those warnings are the indication that you are doing something unusual in your code.

Major Culprit for Circular dependency warning

One of the major drawback of importing things thorough index file is it might cause circular dependency warning in your codebase during build if you don't use index file wisely.

Index.js is not about having to type out slightly shorter file names. It is about encapsulation.

The idea is that your directories should have files and classes or services or whatever you want it have but everything this is public should be exported or exposed in the index.js.

The idea is to never require a file from inside another directory directly as whatever it exposes should be that "package" 's internals and are private.

Of course this is not enforced in JavaScript, but it is important for writing clean, well organised code.

Let's say following is your directory structures.

--- /Services
--- a.service.js
--- b.service.js
--- c.service.js
--- index.js

  --- /models
       --- a.model.js
       --- b.model.js
       --- c.model.js
       --- index.js


  --- /Components
       --- /a
             --- a.component.js
             --- a.html
             --- a.scss
       --- /b
            --- b.component.js
            --- b.html
            --- b.css

We have services, models and components. Services and models have import.js file which exports all services and models. So in any file if you require some service or model you can technically write:

import AService from 'services';
import Amodel from 'models';

But if above line 1 is written in any service file or line 2 written in any model file might generate circular dependency error. You should not use index import inside of the folder itself where index file stays. Index import is meant to be for outside files.