Very light frontend development environment

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 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

SatoshiKawabata / parcel-hyperapp-typescript

readme