DEV Community: kwst

Very light frontend development environment

kwst — Fri, 23 Mar 2018 07:58:49 +0000

I introduce making a very light frontend evironment (parcel, typescript, hyperapp, picostyle, jest). I wanted to create a frontend development environment immediately for less dependencies and more simple. There are good minimal libraries.

Getting started

yarn init

Minimal frontend libraries

hyperapp

hyperapp is very a light library for front-end JavaScript like React.
If you want to know how to use, you can get started from this article. This is very very small(1.4KB) and no dependencies. This includes also the light function state management like Redux. "Action" can change the "State".

yarn add hyperapp

picostyle

picostyle is a very light library for CSS in JS. This is 0.4KB and also no dependeices. You can use this instead of styled-components.

hyperapp and picostyle was created by the members of the same company.

yarn add picostyle

Module bundler

parcel is a simple module bundler. This has no complicated config.

yarn add parcel-bundler -D

Transform

I want to use type so I selected TypeScript. "State" of hyperapp should be defined by type so it gets very easy to use the state from components. tslint is linter for TypeScript.
You should add tsconfig.json and tsliny.json.

yarn add typescript tslint -D

Testing framework

Jest is a testing framework for JavaScript made by Facebook. This is often used with React. I added ts-jest to use TypeScript in this case.

yarn add jest ts-jest @types/jest

And I added setting into package.json for ts-jest.

{
  "jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

My test code for hyperapp is here.

Result Project

https://github.com/SatoshiKawabata/parcel-hyperapp-typescript

How can I upload profile image?

kwst — Tue, 13 Mar 2018 03:27:30 +0000

Hi anybody, how can I upload my profile image into dev.to? I want change my profile image.

I can't find upload button in setting page...

プロフ画像変えられない…

Try “asm-dom” that is virtual DOM library by using WebAssembly

kwst — Tue, 13 Mar 2018 03:19:20 +0000

What is “asm-dom”?

https://github.com/mbasso/asm-dom
asm-dom is a virtual DOM library using WebAssembly. Its “diff” and “patch” algorithm of virtual DOM are implemented by WebAssembly and it’s a minimal implementation so it doesn’t have high function as React. I expect it is very fast by WebAssembly.

The date of the initial commit is 2017/2/26 so it’s a year old.
Copyright and Lisense includes the name of “snabbdom”. It maybe related to snabbdom.

Simon Friis Vindum, 2015 as part of project snabbdom

Usage

It can be written by C++ but I used JS like WEB in this time.

npm i --save asm-dom

npm i -D arraybuffer-loader

I added webpack and webpack-dev-server to bundle by webpack.

npm i -D webpack webpack-dev-server

webpack.config is like this. I added arraybuffer-loader to load .wasm file. I refer to the document for JS.

var resolve = require('path').resolve;

module.exports = env => {
  const dist = env.prod ? 'docs' : 'dist';
  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: resolve(__dirname, dist),
      pathinfo: !env.prod,
    },
    node: {
      fs: 'empty'
    },
    devtool: env.prod ? 'source-map' : 'eval',
    devServer: {
      contentBase: resolve(__dirname, dist),
      historyApiFallback: true,
      compress: true,
      port: 9000
    },
    module: {
      loaders: [
        {
          test: /\.wasm$/,
          loaders: ['arraybuffer-loader']
        }
      ]
    }
  };
}

VS "virtual-dom"

I compared speed of "asm-dom" with "virtual-dom" that is a virtual DOM library. I measured the time of replacing 30000 text elements of <div>. I used Chrome ver61.

"asm-dom" won

"asm-dom" is 2 times faster than "virtual-dom". I never imagined this result. WebAssembly is awesome. I would like to compare also only "diff" and "patch" algorithm of React.

asm-dom result

virtual-dom result

The code for measuring

I uploaded the code into this.
You can define DOM like hyperscript so make nodes by h() and apply diff by patch() like as virtual-dom.

asm-dom code

import init from 'asm-dom';

init().then(asmDom => {
  const { h, patch } = asmDom;

  const root = document.getElementById('root');

  let vnode = h('div', {}, []);
  patch(root, vnode);

  let cnt = 0;
  const id = setInterval(() => {
    console.time('apply patch in 30000 elements');
    const list = [];
    for (let i = 0; i < 30000; i++) {
      list.push(
        h('div', {}, [ Math.random() + '' ])
      );
    }
    const newVnode = h('div', {}, list);
    patch(vnode, newVnode);
    vnode = newVnode;
    console.timeEnd('apply patch in 30000 elements');
    cnt++;
    if (cnt >= 10) {
      clearInterval(id);
    }
  }, 100);
});

virtual-dom code

const h = require('virtual-dom/h');
const diff = require('virtual-dom/diff');
const patch = require('virtual-dom/patch');
const createElement = require('virtual-dom/create-element');

let cnt = 0;
let tree = h('div', {}, []);
let rootNode = createElement(tree);
document.body.appendChild(rootNode);

const id = setInterval(function () {
  console.time('apply patch in 30000 elements');
  const list = [];
  for (let i = 0; i < 30000; i++) {
    list.push(
    h('div', {}, [ Math.random() + '' ])
    );
  }
  const newTree = h('div', {}, list);
  const patches = diff(tree, newTree);
  rootNode = patch(rootNode, patches);
  tree = newTree;
  console.timeEnd('apply patch in 30000 elements');
  cnt++;
  if (cnt >= 10) {
    clearInterval(id);
  }
}, 1000);