7 posts tagged with "angular"

Introduction​

Web Components have been around for quite some time now, but it's probably fair to say that they have not reached the widespread adoption that in the early days it seemed they might. I never really started using them for various reasons:

• Incomplete browser support JsPlumb needs to work on as many browsers as possible and does not have the luxury of requiring the latest browsers. It took quite some time for all of the major browsers to bring their web components support up to the spec.
• Relatively poor documentation Nowadays there's a wealth of articles discussing web components, including a great one on MDN, but this was not the case at first.
• Clunky developer interface This is of course a subjective viewpoint, but it's certainly not just me who thought so. One of the fundamental issues for me was trying to figure out how they could be composed as easily as something like React/Angular etc, particularly when the only input to a web component is through its attributes, and they have to be strings.

Recently I've been looking at web components anew: with the upcoming 7.x release of JsPlumb we're keen to explore all opportunities to use up-to-date technologies, and we thought web components deserved a second look. There seems to be a groundswell of people adopting them, and so we're interested in exploring if there's any value for our licensees in us adding some kind of web components support.

Specifically, we're wondering if we can support something like this:

At the time of writing, JsPlumb has a test suite consisting of almost 11 000 unit tests, covering every aspect of the library including its integrations with Angular, React, Vue and Svelte. We like having this many unit tests: it gives us confidence both in the quality of the library and in making updates. When we develop new features we first add a bunch of tests that break and then we update the code until our new tests - and all of the tests we had previously - work.

How do you test a UI built with JsPlumb, though? What are the sorts of things you might like to test? A non-exhaustive list:

• Are my nodes/groups being rendered the way I expect?
• Can users drag edges in the way I expect them to be able to?
• Is node dragging behaving the way I expect?
• Can users edit nodes with an inspector?
• Are events firing in the way I expect?
• Is the integrity of my dataset ok?

Angular's new(ish) Signals system is a great addition to their library, and one which we're keeping an eye on with a view to updating JsPlumb's Angular integration to help you make the best use of it.

Signals were introduced in Angular 16 and have been improved upon in Angular 17. We know that upgrading Angular versions is not something people take lightly, so for the time being we are focusing on what Angular 16 offers, and we'll be looking at ways of releasing support in JsPlumb.

Right now, though - if you're already using Angular 16 or 17 - we thought you might like to see how you can take advantage of signals with the current version of JsPlumb.

Recently we documented the process of building a chatbot app in 3 hours and 37 minutes. A couple of days later we documented porting that to make an Angular Chatbot, and now in today's post we're going to look at porting the vanilla chatbot to React.

Yesterday we documented the process of building a chatbot app in 3 hours and 37 minutes. We wrote that app in "vanilla" JS but we know one of the features of JsPlumb that people love is its deep integration with libraries such as Angular, Vue, React and Svelte. In today's post we're going to look at porting the vanilla chatbot to Angular.

Recently we had the idea that a good addition to our list of starter applications might be a chatbot demo. In this post we're going to track the process in real time, or real-ish time, at least. We're going to write this in ES6, and we'll use esbuild to create our bundle.

The source code of this demo is available on Github. If you're not a licensee of JsPlumb, you can start your 30 day free trial of JsPlumb here.

So - here goes.

8:10am - initialisation​

One of the core concepts when working with components in Angular is that of @Inputs and @Outputs. For instance, maybe you have some component that expects to be told what text to use as its title, and which will output an event when the user clicks a button:

@Component({
    selector:"app-my-component",
    template:`
        <div>
            <h1>{{title}}</h1>
            <button class="btnEmit" (click)="emitEvent('test')">Click Me</button>
        </div>    
    `
})
export class MyComponent {
  @Input() title:string

  @Output() outputEvent = new EventEmitter<string>()

  emitEvent(value:string) {
    this.outputEvent.emit(value)
  }
}

From version 5.6.2, JsPlumb's Angular integration now offers a couple of ways of working with these that earlier versions did not support.