React JS 16.0 released

New version of React JavaScript library available now with many new features
27 September 2017   1086

Popular JavaScript library, created to design user interfaces, received new update.

What's new?

Let's check what's inside. According to the official blog, among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.

New render return types: fragments and strings

You can now return an array of elements from a component's render method. Like with other arrays, you'll need to add a key to each element to avoid the key warning:

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

Support for returning strings was added too:

render() {
  return 'Look ma, no spans!';
}

Portals

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

render() {
  // React does *not* create a new div. It renders the children into `domNode`.
  // `domNode` is any valid DOM node, regardless of its location in the DOM.
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

Support for custom DOM attributes

Instead of ignoring unrecognized HTML and SVG attributes, React will now pass them through to the DOM. This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.

Reduced file size

Despite all these additions, React 16 is actually smaller compared to 15.6.1!

  • react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
  • react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
  • react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).

Better server-side rendering

React 16 includes a completely rewritten server renderer. It supports streaming, so you can start sending bytes to the client faster. And thanks to a new packaging strategy that compiles away process.env checks (Believe it or not, reading process.env in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.

See official website for more information. 

What is Vim.Wasm?

Small introduction to Vim port to WebAssembly with screenshot and developer notes
16 July 2018   91

Vim.wasm is experimental fork of Vim editor to compile it into WebAssembly using emscripten and binaryen.

Developer added some notices:

  • Please access from a desktop browser (Chrome/Firefox/Safari/Edge). Safari seems the best on macOS.
  • Please avoid mobile networks. Your browser will fetch some large files (up to 2.5MB).
  • vim.wasm takes key inputs from DOM keydown event. Please disable your browser extensions which affect key inputs (incognito mode would be the best).
  • This project is very early phase of experiment. Currently only tiny features are supported. More features will be implemented (please see TODO section). And you may notice soon on trying it... it's buggy :)
  • If inputting something does not change anything, please try to click somewhere in the page. Vim may have lost the focus.

The goal of this project is running Vim editor on browser by compiling Vim C sources into WebAssembly. 

Vim.wasm screenshot
Vim.wasm screenshot 

WebAssembly frontend for Vim is implemented as a new GUI frontend. C sources are compiled to each LLVM bitcode files and then they are linked to one bitcode file vim.bc by emccemcc finally compiles the vim.bc into vim.wasm binary using binaryen and generates HTML/JavaScript runtime.

You can find more info at GitHub.