THISISAGOODNAME / fuckFrontEnd2017

WTF in 2017

fuckFrontEnd2017

WTF in 2017

Web Assembly

fetchAndInstantiate('./add.wasm').then(function (instance) {
  console.log(`1 + 2 = ${instance.exports.add(1, 2)}`);
});

// fetchAndInstantiate() found in wasm-utils.js
function fetchAndInstantiate(url, importObject) {
  return fetch(url).then(response =>
    response.arrayBuffer()
  ).then(bytes =>
    WebAssembly.instantiate(bytes, importObject)
  ).then(results =>
    results.instance
  );
}

Wasm demo

more demos

WebGPU(Only works on Safari Technology Preview)

https://webkit.org/demos/webgpu/

HelloTriangle

2D Effects

Simple Cube

Cubes

font rendering(power by opentype.js)

glyph-inspector

ES6 import in browser(chrome 61+, Firefox 54+, Edge 38+, Safari 10.1+)

<script type="module" src="module.js"></script>
<script type="module">
  // or an inline script
  import {helperMethod} from './providesHelperMethod.js';
  helperMethod();
</script>

// providesHelperMethod.js
export function helperMethod() {
  console.info(`I'm helping!`);
}