DEV Community

loading...

Very light frontend development environment

kwbtsts profile image kwst ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

Minimal frontend libraries

hyperapp

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Module bundler

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

yarn add parcel-bundler -D
Enter fullscreen mode Exit fullscreen mode

Transform

TypeScript
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
Enter fullscreen mode Exit fullscreen mode

Testing framework

Jest
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
Enter fullscreen mode Exit fullscreen mode

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"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

My test code for hyperapp is here.

Result Project

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

Discussion (0)

pic
Editor guide