9 ms·

Build Your First Thing with WebAssembly

195 points by NickLarsen 10y ago

wofo 10y ago
Thanks for the writeup! I had a hard time figuring out how to compile C++ to WebAssembly a couple of weeks ago and finally gave up given the lack of maturity of the implementation. I am sure this will help more people get interested in WebAssembly!
- NickLarsen 10y ago
  I had the exact same problem when I first started. Someone once told me "what we can throw away to solve this problem", so I kept removing parts until I got here which I think is currently the easiest way to get started.
  - binji 10y ago
    Ultimately you should be able to use your C compiler and generate wasm files directly, rather than go through asm.js. There is an experimental backend of LLVM that you can try, but it will require building LLVM from source currently. Emscripten has an option to do this automatically, I believe. You can also write the AST format by hand, which IMO is much easier to do than writing asm.js by hand, just more verbose. I wouldn't advise anyone do this, as the format has been changing over time. Finally, there is work on specifying a true "text format" that is meant to be used with view-source and directly maps to the binary format. You can see some proposals if you look at the pull requests in the design repo. When a proposal is accepted and we implement the tooling, you will be able to generate a binary directly from this format, which will be much nicer.
    - NickLarsen 10y ago
      I'm familiar with the LLVM direct to wasm tool, but I was unable to get it working using the steps from the emscripten docs. The binaryen toolchain is pretty easy to digest, but I've been using the emsdk almost exclusively for the convenience. Once you have to rework part of it from source, I just don't know enough about it to debug it yet. Thanks for the info on where to find outstanding proposals.
tdumitrescu 10y ago
Nice investigation! A minor point about your description of wasm: "WebAssembly or wasm is a bytecode specification for writing performant, browser agnostic web components." The term "web components" already has a pretty specific meaning referring to the in-progress specs for custom html ui elements and surrounding technologies (see https://developer.mozilla.org/en-US/docs/Web/Web_Components https://developer.mozilla.org/en-US/docs/Web/Web_Components). You probably don't want to overload that term given how close the domains already are.
- NickLarsen 10y ago
  That's fair. Originally asm.js was named capsule.js but that was taken and didn't really mean what it was. We could also call it modules but there is another very related spec out there for that as well. What would you call it instead?
  - pavlov 10y ago
    Object files? https://en.m.wikipedia.org/wiki/Object_file https://en.m.wikipedia.org/wiki/Object_file Of course the term "object" is confusingly overloaded too...
    - koko775 10y ago
      web object file? Not like anyone aside from Apple uses WebObjects seriously anymore...
  - Longwelwind 10y ago
    I believe "module" in classic Javascript already corresponds to a "self-contained" Javascript file.
    - azdle 10y ago
      How about a "Web Assembly Module Object"? I don't know if that is technically correct, but it does let you call them a "WAMO" file.
Fej 10y ago
On one hand, I want to bash WebAssembly because it takes away our ability to see what we're running on our own PCs. On the other, it helps us slowly get away from the mess that is modern JavaScript.
- pducks32 10y ago
  Totally agree. I really think it's important for the community that there be a easy, free, and open way to view the source code (or some readable not obfuscated version) of any site.
  - db48x 10y ago
    Yes, definitely use source maps in all of your JS.
- vertex-four 10y ago
  With Javascript build tools and minimisers, it's already usually impossible to understand what you're running.
- vonklaus 10y ago
  I think "this javascript mess" is largely bourne out of an attempt to mitigate content blocking. asm.js is pretty fast and I am not sure how much improvement wasm will provide, but if given access to more of the low-level environment I am concerned advertisers will implement maliscious code and pop-ups in wasm that is non-trivially blocked.
  - colordrops 10y ago
    It's the same VM as JS, so why would it be any less secure?
    - vonklaus 10y ago
      I am not sure exactly how it can be implemented, but I imagine that compiling and serving a binary file could allow for some maliscious things. My biggest worry is that many content blockers override js and search scripts for keywords and functionality which they muitigate. I could see a binary file executing code which provides pop-ups, advertisements or drm which would be harder to eliminate than it is now. I am not 100% sure if this is true, but it seems possible.
benkuykendall 10y ago
Huh, the AST looks pretty human readable. Anyone have tips for writing WebAssembly without using asm.js? Even a pointer to decent documentation would be great.
- niftich 10y ago
  Well, if you're comfortable with that AST text-format, check [1] for docs and examples (the .wast files in the links). If you're super brave, there's hints about the Binary AST format here [2] [1] https://github.com/WebAssembly/design/blob/master/TextFormat.md https://github.com/WebAssembly/design/blob/master/TextFormat... [2] https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md https://github.com/WebAssembly/design/blob/master/BinaryEnco...
- flamedoge 10y ago
  github.com/WebAssembly/sexpr-wasm-prototype github.com/WebAssembly/spec github.com/WebAssembly/design
- binji 10y ago
  See my comment above, ultimately you should be able to generate WebAssembly directly from your C compiler (and other languages too). You can write it by hand as well, but that's not the primary goal of the specification. We should have a text format soon too, which will be nicer than the AST format to read/write by hand.
_pmf_ 10y ago
Hey, the intermediate language is actually a nice step up from JS.
vonklaus 10y ago
I suspect webassembly will fail miserably. If it succeeds anywhere it will be for gaming applications. I could be totally wrong, but most web developers who build applications and sites will not be likely to embrace this given the leverage JS provides and the simplicity of use. Again, I am not extremely against wasm, but this writeup is pretty well done and my take away was that it was non-trivial to pickup, buggy and has poor documentation. I am curious who web assembly is for and who is really excited about it. Is it gaining traction in gaming, and also what am I missing(serious)? edit: Can advertisers bypass content blockers by compiling to wasm?
- aphextron 10y ago
  The idea is that we will be able to write web applications in a sane, proper language like C# or similar, and then compile to Web Assembly. I, for one, embrace this idea whole heartedly.
  - vonklaus 10y ago
    I can respect that. However, my point is, are you a web developer who primarily writes code for the web at your day job. Anecdotally, I haven't seen a lot of overlap between people writing web applications and C# developers. I have seen a lot of C family devs think this is awesome, but have no plans to actually develop directly for the front-end web. edit: the first major demonstration was Unity's angry bots according to Wikipedia. So it appears this is for game devs, and game developers who want to build for the browser will be excited about this. I just think webassembly to be really far down on the ist of improvements we should make to the browser.
    - BrutallyHonest 10y ago
      I would rather have a permanent top-level tracking banner section built right into my browser as long as I don't have to write JS anymore. It's very high on my priority list.
    - Retra 10y ago
      Web Assembly is exciting to me precisely because I'm not a web developer, and the whole idea of being a web developer as distinct from any other kind of developer is a bit absurd, especially considering the ubiquity of the web and the fact that it basically means you're a JavaScript programmer of some variant. Your language choice shouldn't determine your infrastructure.
shurcooL 10y ago
This is super useful and helpful, thanks for writing it up!
bobajeff 10y ago
I still see a lot of misunderstanding here about what WebAssembly is. It's not really a "bytecode" like JVM's. The best simplest way to describe it is a virtual ISA for compilers to target. So the languages that make use of it will be compiled languages like C, C++, Pascal, Fortran etc.
gscott 10y ago
I have a problem with making designing websites more complicated. This snobbery of finding a new complex way of doing something that should be made easier... not harder.
- thomasfoster96 10y ago
  If you understand the problem - that a dynamically typed, interpreted language has performance issues that prevent it being useful in computationally intensive scenarios, but can't be replaced easily - then this solution is actually quite reasonable.

195 points by NickLarsen 10y ago

wofo 10y ago

Thanks for the writeup! I had a hard time figuring out how to compile C++ to WebAssembly a couple of weeks ago and finally gave up given the lack of maturity of the implementation. I am sure this will help more people get interested in WebAssembly!

NickLarsen 10y ago
I had the exact same problem when I first started. Someone once told me "what we can throw away to solve this problem", so I kept removing parts until I got here which I think is currently the easiest way to get started.
- binji 10y ago
  Ultimately you should be able to use your C compiler and generate wasm files directly, rather than go through asm.js. There is an experimental backend of LLVM that you can try, but it will require building LLVM from source currently. Emscripten has an option to do this automatically, I believe. You can also write the AST format by hand, which IMO is much easier to do than writing asm.js by hand, just more verbose. I wouldn't advise anyone do this, as the format has been changing over time. Finally, there is work on specifying a true "text format" that is meant to be used with view-source and directly maps to the binary format. You can see some proposals if you look at the pull requests in the design repo. When a proposal is accepted and we implement the tooling, you will be able to generate a binary directly from this format, which will be much nicer.
  - NickLarsen 10y ago
    I'm familiar with the LLVM direct to wasm tool, but I was unable to get it working using the steps from the emscripten docs. The binaryen toolchain is pretty easy to digest, but I've been using the emsdk almost exclusively for the convenience. Once you have to rework part of it from source, I just don't know enough about it to debug it yet. Thanks for the info on where to find outstanding proposals.

tdumitrescu 10y ago

Nice investigation! A minor point about your description of wasm: "WebAssembly or wasm is a bytecode specification for writing performant, browser agnostic web components." The term "web components" already has a pretty specific meaning referring to the in-progress specs for custom html ui elements and surrounding technologies (see https://developer.mozilla.org/en-US/docs/Web/Web_Components https://developer.mozilla.org/en-US/docs/Web/Web_Components). You probably don't want to overload that term given how close the domains already are.

NickLarsen 10y ago
That's fair. Originally asm.js was named capsule.js but that was taken and didn't really mean what it was. We could also call it modules but there is another very related spec out there for that as well. What would you call it instead?
- pavlov 10y ago
  Object files? https://en.m.wikipedia.org/wiki/Object_file https://en.m.wikipedia.org/wiki/Object_file Of course the term "object" is confusingly overloaded too...
  - koko775 10y ago
    web object file? Not like anyone aside from Apple uses WebObjects seriously anymore...
- Longwelwind 10y ago
  I believe "module" in classic Javascript already corresponds to a "self-contained" Javascript file.
  - azdle 10y ago
    How about a "Web Assembly Module Object"? I don't know if that is technically correct, but it does let you call them a "WAMO" file.

Fej 10y ago

On one hand, I want to bash WebAssembly because it takes away our ability to see what we're running on our own PCs. On the other, it helps us slowly get away from the mess that is modern JavaScript.

pducks32 10y ago
Totally agree. I really think it's important for the community that there be a easy, free, and open way to view the source code (or some readable not obfuscated version) of any site.
- db48x 10y ago
  Yes, definitely use source maps in all of your JS.
vertex-four 10y ago
With Javascript build tools and minimisers, it's already usually impossible to understand what you're running.
vonklaus 10y ago
I think "this javascript mess" is largely bourne out of an attempt to mitigate content blocking. asm.js is pretty fast and I am not sure how much improvement wasm will provide, but if given access to more of the low-level environment I am concerned advertisers will implement maliscious code and pop-ups in wasm that is non-trivially blocked.
- colordrops 10y ago
  It's the same VM as JS, so why would it be any less secure?
  - vonklaus 10y ago
    I am not sure exactly how it can be implemented, but I imagine that compiling and serving a binary file could allow for some maliscious things. My biggest worry is that many content blockers override js and search scripts for keywords and functionality which they muitigate. I could see a binary file executing code which provides pop-ups, advertisements or drm which would be harder to eliminate than it is now. I am not 100% sure if this is true, but it seems possible.

benkuykendall 10y ago

Huh, the AST looks pretty human readable. Anyone have tips for writing WebAssembly without using asm.js? Even a pointer to decent documentation would be great.

niftich 10y ago
Well, if you're comfortable with that AST text-format, check [1] for docs and examples (the .wast files in the links). If you're super brave, there's hints about the Binary AST format here [2] [1] https://github.com/WebAssembly/design/blob/master/TextFormat.md https://github.com/WebAssembly/design/blob/master/TextFormat... [2] https://github.com/WebAssembly/design/blob/master/BinaryEncoding.md https://github.com/WebAssembly/design/blob/master/BinaryEnco...
flamedoge 10y ago
github.com/WebAssembly/sexpr-wasm-prototype github.com/WebAssembly/spec github.com/WebAssembly/design
binji 10y ago
See my comment above, ultimately you should be able to generate WebAssembly directly from your C compiler (and other languages too). You can write it by hand as well, but that's not the primary goal of the specification. We should have a text format soon too, which will be nicer than the AST format to read/write by hand.

_pmf_ 10y ago

Hey, the intermediate language is actually a nice step up from JS.

vonklaus 10y ago

I suspect webassembly will fail miserably. If it succeeds anywhere it will be for gaming applications. I could be totally wrong, but most web developers who build applications and sites will not be likely to embrace this given the leverage JS provides and the simplicity of use. Again, I am not extremely against wasm, but this writeup is pretty well done and my take away was that it was non-trivial to pickup, buggy and has poor documentation. I am curious who web assembly is for and who is really excited about it. Is it gaining traction in gaming, and also what am I missing(serious)? edit: Can advertisers bypass content blockers by compiling to wasm?

aphextron 10y ago
The idea is that we will be able to write web applications in a sane, proper language like C# or similar, and then compile to Web Assembly. I, for one, embrace this idea whole heartedly.
- vonklaus 10y ago
  I can respect that. However, my point is, are you a web developer who primarily writes code for the web at your day job. Anecdotally, I haven't seen a lot of overlap between people writing web applications and C# developers. I have seen a lot of C family devs think this is awesome, but have no plans to actually develop directly for the front-end web. edit: the first major demonstration was Unity's angry bots according to Wikipedia. So it appears this is for game devs, and game developers who want to build for the browser will be excited about this. I just think webassembly to be really far down on the ist of improvements we should make to the browser.
  - BrutallyHonest 10y ago
    I would rather have a permanent top-level tracking banner section built right into my browser as long as I don't have to write JS anymore. It's very high on my priority list.
  - Retra 10y ago
    Web Assembly is exciting to me precisely because I'm not a web developer, and the whole idea of being a web developer as distinct from any other kind of developer is a bit absurd, especially considering the ubiquity of the web and the fact that it basically means you're a JavaScript programmer of some variant. Your language choice shouldn't determine your infrastructure.

shurcooL 10y ago

This is super useful and helpful, thanks for writing it up!

bobajeff 10y ago

I still see a lot of misunderstanding here about what WebAssembly is. It's not really a "bytecode" like JVM's. The best simplest way to describe it is a virtual ISA for compilers to target. So the languages that make use of it will be compiled languages like C, C++, Pascal, Fortran etc.

gscott 10y ago

I have a problem with making designing websites more complicated. This snobbery of finding a new complex way of doing something that should be made easier... not harder.

thomasfoster96 10y ago
If you understand the problem - that a dynamically typed, interpreted language has performance issues that prevent it being useful in computationally intensive scenarios, but can't be replaced easily - then this solution is actually quite reasonable.