www.digitalmars.com         C & C++   DMDScript  

digitalmars.D.announce - Webassembly TodoMVC

reply Sebastiaan Koppe <mail skoppe.eu> writes:
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;
---
Sep 21 2018
next sibling parent Suliman <evermind live.ru> writes:
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!
Sep 22 2018
prev sibling parent reply aberba <karabutaworld gmail.com> writes:
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?
Sep 22 2018
parent reply Sebastiaan Koppe <mail skoppe.eu> writes:
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?
Sep 22 2018
next sibling parent reply Suliman <evermind live.ru> writes:
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!
Sep 23 2018
next sibling parent Paolo Invernizzi <paolo.invernizzi gmail.com> writes:
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
Sep 23 2018
prev sibling parent Sebastiaan Koppe <mail skoppe.eu> writes:
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.
Sep 23 2018
prev sibling next sibling parent reply Joakim <dlang joakim.fea.st> writes:
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.
Sep 23 2018
next sibling parent Vladimir Panteleev <thecybershadow.lists gmail.com> writes:
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.
Sep 23 2018
prev sibling parent Sebastiaan Koppe <mail skoppe.eu> writes:
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?

 https://github.com/jfbastien/musl

 Druntime and ldc support Musl.


Thanks for the link, I will have a look at it!
Sep 23 2018
prev sibling parent aberba <karabutaworld gmail.com> writes:
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
Sep 23 2018