Eugene

Web

Devs

2019

what we are up to

Hack for a Cause

https://hackforacause.org

Workshops

AWS Microservice Workshop

Thank you to everyone that donated their time!!!

https://github.com/eugenewebdevs/workshops

Weekend Events

No more live streams in favor or higher quality recordings.

Planning 2 more workshops this year

AWS based

Web ASSEMBLY

in your browser

KILL JAVASCRIPT!!!!!

NO

JAvascript

Will continue to be the scripting language in the browser.

 

People will still use it for everything even when it's not the best idea.

wasm

Meant to work with JavaScript by design (Sorry NO KILLING).

 

Very new. Has a long way to go for everyday use.

WASM

What does it do?

Designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

V8 with wasm

stolen from: https://blog.sessionstack.com/how-javascript-works-a-comparison-with-webassembly-why-in-certain-cases-its-better-to-use-it-d80945172d79

you can also use node.js

WASM Goals

  • Speed
  • Safe
  • Open and debuggable

Where will it Run?

Feb 2017 - WebAssembly consensus and end of Browser Preview

March 2017

Oct      2017

Sept    2017

April    2017

https://caniuse.com/#feat=wasm

enabled in browser by default

(including mobile)

How can I run it?

Emscripten

Emscripten provides numerous methods to connect and interact between JavaScript and compiled C or C++

After we write C code, we compile with emscripten to generate a .wasm

Javascript Interaction

in my browser

#include <emscripten.h>

EM_JS(void, call_alert, (), {
  alert('hello world!');
  throw 'all done';
});

int main() {
  call_alert();
  return 0;
}

EM_JS

EM_JS(void, call_alert, (), {
  alert('hello world!');
  throw 'all done';
});

int main() {
  call_alert();
  return 0;
}

EM_JS

int x = EM_ASM_INT({
  console.log('I received: ' + $0);
  return $0 + 1;
}, 100);
printf("%d\n", x);

EM_ASM_

Things to consider

EM_JS’s implementation is essentially a shorthand for implementing a JavaScript library.

Also it's like just running eval

Type is going to matter on the JS side.

https://developer.mozilla.org/en-US/docs/WebAssembly/Loading_and_running

Launch via JS

WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
.then(results => {
  // Do something with the results!
});

WebAssembly.instantiateStreaming

Now I get the speed?

Yes and no

Faster than JS here

MAybe not every time

  • Is the library used before compiling efficient when in wasm?
  • Is the tasks large enough to show enough difference?
  • this is all still so new and MVP

Use Cases now

Games
Web APps
Security

https://www.funkykarts.rocks/demo.html

Written for Native Mobile

Re done in Web Assembly

Crazy long documentation of the whole experience

https://www.rossis.red/wasm.html

https://github.com/shamadee/web-dsp

Edit video online beyond normal JS API

get a large performance boost, but mostly when making edits

Still kinda slooow

Application code not visible to front end user

Type matters

Compiler will complain about security

Still Needs

https://webassembly.org/docs/future-features/

On the horizon

  • Better Exception handling
  • Garbage collection
  • Bulk memory operations
  • Import/Export Mutable Globals
  • Type Reflection for WebAssembly JavaScript API
  • Better optimization between browsers

Do I use it now??

Maybe, but probably not yet

  • Is this a game?
  • Do you already write C or Rust?
  • Is JavaScript able to do something?
  • Just looking to have fun?

Front End Devs

You will need to care about type more, and may pass off parts of your page experience to wasm

back end Devs

Congrats you are a new kind of front end web dev now.

Welcome to the show.

Take Aways

Made with Slides.com