Hey guys,

Following the D->emscripten->wasm toolchain from CyberShadow and Ace17 I created a proof of concept framework for creating single page webassembly applications using D's compile time features.

This is a proof of concept to find out what is possible.

At https://skoppe.github.io/d-wasm-todomvc-poc/ you can find a working demo and the repo can be found at https://github.com/skoppe/d-wasm-todomvc-poc

Here is an example from the readme showing how to use it.

---
struct Button {
  mixin Node!"button";
  @prop innerText = "Click me!";
}
struct App {
  mixin Node!"div";
  @child Button button;
}
mixin Spa!App;
---

On Friday, 21 September 2018 at 14:01:30 UTC, Sebastiaan Koppe wrote:
> Hey guys,
>
> Following the D->emscripten->wasm toolchain from CyberShadow and Ace17 I created a proof of concept framework for creating single page webassembly applications using D's compile time features.
>
> This is a proof of concept to find out what is possible.
>
> At https://skoppe.github.io/d-wasm-todomvc-poc/ you can find a working demo and the repo can be found at https://github.com/skoppe/d-wasm-todomvc-poc
>
> Here is an example from the readme showing how to use it.
>
> ---
> struct Button {
>   mixin Node!"button";
>   @prop innerText = "Click me!";
> }
> struct App {
>   mixin Node!"div";
>   @child Button button;
> }
> mixin Spa!App;
> ---

Very cool! Thanks!

On Friday, 21 September 2018 at 14:01:30 UTC, Sebastiaan Koppe wrote:
> Hey guys,
>
> Following the D->emscripten->wasm toolchain from CyberShadow and Ace17 I created a proof of concept framework for creating single page webassembly applications using D's compile time features.
>
> This is a proof of concept to find out what is possible.
>
> At https://skoppe.github.io/d-wasm-todomvc-poc/ you can find a working demo and the repo can be found at https://github.com/skoppe/d-wasm-todomvc-poc
>
> Here is an example from the readme showing how to use it.
>
> ---
> struct Button {
>   mixin Node!"button";
>   @prop innerText = "Click me!";
> }
> struct App {
>   mixin Node!"div";
>   @child Button button;
> }
> mixin Spa!App;
> ---

Can the SPA code be released as a separate module for WebAssembly web app development?

On Saturday, 22 September 2018 at 14:54:29 UTC, aberba wrote:
> Can the SPA code be released as a separate module for WebAssembly web app development?

Currently the whole thing is not so developer-friendly, it was just the easiest way for me to get it up and running.

Right now I am trying to ditch emscripten in favor of ldc's webassembly target. This will make it possible to publish it as a dub package (ldc only), as well as reduce some of the bloat.

The downside is that ditching emscripten means I have to implement things like malloc and free myself.

There is some obvious overlap between this and recent efforts by others (I remember D memcpy, and people trying to run it without libc, etc.), so I expect a situation in the future where all these efforts might be combined.

Regardless, I don't need much from the C library, just enough to make (de)allocations and parts of the D standard library work.

TL;DR I intend to publish it on dub, but it does takes some more time.

What do you think of the struct approach compared to a traditional jsx/virtual-dom?

>What do you think of the struct approach compared to a traditional jsx/virtual-dom?
jsx is sucks. Look at Vue.js way, if you will able to fo you framework Vue-style it will be perfect!

On Saturday, 22 September 2018 at 19:51:48 UTC, Sebastiaan Koppe wrote:
> On Saturday, 22 September 2018 at 14:54:29 UTC, aberba wrote:
>> [...]
>
> Currently the whole thing is not so developer-friendly, it was just the easiest way for me to get it up and running.
>
> [...]

Vladimir mentioned that there's a Musl port to wasm, have you tried it?

https://github.com/jfbastien/musl

Druntime and ldc support Musl.

On Sunday, 23 September 2018 at 17:53:32 UTC, Suliman wrote:
>>What do you think of the struct approach compared to a traditional jsx/virtual-dom?
> jsx is sucks. Look at Vue.js way, if you will able to fo you framework Vue-style it will be perfect!

Being a Vue user for three years now,  I completely agree.

/P

On Saturday, 22 September 2018 at 19:51:48 UTC, Sebastiaan Koppe wrote:
> On Saturday, 22 September 2018 at 14:54:29 UTC, aberba wrote:
>> Can the SPA code be released as a separate module for WebAssembly web app development?
>
> Currently the whole thing is not so developer-friendly, it was just the easiest way for me to get it up and running.
>
> Right now I am trying to ditch emscripten in favor of ldc's webassembly target. This will make it possible to publish it as a dub package (ldc only), as well as reduce some of the bloat.
>
> The downside is that ditching emscripten means I have to implement things like malloc and free myself.
>
> There is some obvious overlap between this and recent efforts by others (I remember D memcpy, and people trying to run it without libc, etc.), so I expect a situation in the future where all these efforts might be combined.
>
> Regardless, I don't need much from the C library, just enough to make (de)allocations and parts of the D standard library work.
>
> TL;DR I intend to publish it on dub, but it does takes some more time.
>
> What do you think of the struct approach compared to a traditional jsx/virtual-dom?

As a pro web developer, I think JSX will be the perfect abstraction for maximum adoption. React, being one of the most popular library for developing web applications, is loved by the community. Its the perfect way to model UI components that fits well in my logic.

"ReactJS provided the solution that developers were looking for. It uses JSX (a unique syntax that allows HTML quotes as well as HTML tag syntax application for rendering specific subcomponents) This is very helpful in promoting construction of machine-readable codes and at the same time compounding components into a single-time verifiable file. ...
...
It allows developers to write their apps within JavaScript. JSX is one of the greatest features that not only makes ReactJS easy but fun too. Developers can easily make a new UI feature and see it appear in real time. It brings HTML directly into your JS. ...
...
Components allow developers to break down complex UI. The idea of components is what makes ReactJS unique. Instead of worrying about the entire web app, it makes it possible to break the complex UI/UX development into simpler components. This is crucial in making every component more intuitive."

See JSX:
https://medium.com/@thinkwik/why-reactjs-is-gaining-so-much-popularity-these-days-c3aa686ec0b3

I'm personally not tied to any framework or library. Only use React/JSX because its solves a real and practical problem for me. Something most web developers agree from the stackoverflow 2017 survey: https://insights.stackoverflow.com/survey/2017

On Sunday, 23 September 2018 at 17:53:32 UTC, Suliman wrote:
>>What do you think of the struct approach compared to a traditional jsx/virtual-dom?
> jsx is sucks. Look at Vue.js way, if you will able to fo you framework Vue-style it will be perfect!

The reason I made this wasm experiment was not to port some js-framework over to D, just to do the same thing but then in D.

If I like some js framework out there, I would just use that one.

My goal here is to bring something new to the table.

On Sunday, 23 September 2018 at 18:36:11 UTC, Joakim wrote:
> Vladimir mentioned that there's a Musl port to wasm, have you tried it?

My knowledge of the intersection of Musl and WASM is that Musl is used as the libc in Emscripten (and, as extension, in Dscripten), and Emscripten/Dscripten can target WASM as well as asm.js / regular ol' JavaScript.