Web Assembly

Web Asembly + JavaScript == 🥰

What?

Question? 🤔

Will web assembly replace JavaScript?

No

JavaScript Begins

Recognise this JavaScript code?

@Component({
  selector: 'app-click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{clickMessage}}`
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'You are my hero!';
  }
}

Reclaim JavaScript

Sytax

Razor

@for (...)
{
  var name = $"div-{i}";
  <div class="@($"class-{name}")"></div>
}

Angular

<li *ngFor="let user of users; index as i; first as isFirst">
  {{i}} of {{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

An Example

todo.razor from offical docs

@page "/todo"

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Something todo" @bind="newTodo" />
<button @onclick="AddTodo">Add todo</button>

@code {
    // TODO: Move into partial class todo.razor.cs
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }
}

Project structure

JS Modules

export function InitDesigner(dotNetEditorService: DotNet.DotNetObject) {
  ...
}
...
export module Functions {
    export var designer = DesignerFunctions;
    ...
}
...
window['functions'] = Functions;

JS Interop

public static class DesignerFunctions
{
        public static string Namespace = "functions";
        public async Task InitDesigner(IJSRuntime js)
        {
                await js.InvokeVoidAsync($"{Namespace}.designer.init", DotNetObjectReference.Create(this));
            
        }

        public static async Task ExtendDesignerStyles(this IJSRuntime js, Dictionary<string, string> properties)
        {
            await js.InvokeVoidAsync($"{Namespace}.designer.extendDesignerStyles", properties);
        }
        ...
}

Call .Net methods

this.change = fromEvent(this.markdownEditor.codemirror, "changes");
this.changeSub = this.change.pipe(
    debounceTime(500)
).subscribe(this.editorChanges.bind(this));
...
editorChanges(e) {
    if (e[1] && 
        e[1][0].text.some(str => str)) {
        this.dotNetEditorService.invokeMethodAsync("EditorChanges", this.markdownEditor.value());
    }
}

Alternatives

Demo

obrienluk89@gmail.com

jollify.app