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
Top comments (0)