아무래도, 안하루입니다.

Hyperapp는 최고입니다.

Hyperapp은 무엇입니까?

빠르고 1KB라는 초경량 프런트 엔드 프레임 워크.
Elm 아키텍처를 기반으로합니다.
TypeScript에도 대응!
매우 간단하기 때문에 즉시 이해할 수있어 사용하기 쉽습니다.
Qiita의 프런트 엔드에 Hyperapp가 채용되고 있다.
htps : // 기주 b. 코 m / 조 게 부탄 / hype 라 p

우선 이 이미지를 보고

이 이미지를 보면 Hyperapp의 단순성을 알 수 있습니다.
React + Redux의 경우 Redux의 흐름에 따라 reducer를 쓰고, action 쓰고, props에 연결하고, 매우 귀찮네요.
그러나 Hyperapp에서는 app 함수 state, actions가 view에 자동으로 로드되어 보다 간단하게 되어 있습니다.

Hyperapp의 좋은 점은 무엇입니까?

간단하게 쓸 수 있다

redux에서는 설정에 시간을 소비하고 데이터 흐름을 처리하기 위한 코드를 작성해야 합니다.

최근 내가 발표한 서비스, 타구마루 tagmaru.me 에서는, React + Redux가 사용되고 있습니다만, 하나의 기능을 더하는 것만으로도, 매우 귀찮은 작업이었습니다.
다음으로 개발하는 웹 서비스에서는 프런트 엔드에 Hyperapp를 사용하고 싶습니다.

그러나 Hyperapp에서는 그 흐름을 단순화합니다. (첫 번째 이미지처럼)

학습 비용이 낮음

Hyperapp 저자인 Jorge Bucaran은 2018년은 Hyperapp의 해에서 이렇게 말합니다.

프로젝트의 코드를 1KB 정도로 정리하면, JS의 프로그래머라면 1, 2시간으로 모든 코드를 읽을 수 있는, 구조를 완전하게 이해할 수 있다.
오픈 소스의 세계에서는 소스는 퍼블릭이기 때문에 물론 누구라도 읽을 수 있지만, 읽을 수 있는 것과 '전부 파악하고 있다'는 또 다른 것이다. 사용하면서도 항상 블랙박스 부분이 있다. 그렇지만 300행이라면, 백야드의 모든 것을 이해한 후에 사용할 수 있다. 그것을 실현하고 싶었다.

아무래도 큰 프로젝트가 되면, 스스로 전부 이해하기는 어렵지만, Hyperapp는 300행이니까 뒤에서 어떻게 움직이고 있는지 파악할 수 있다고 합니다.

아직 Hyperapp 코드를 읽지 않았기 때문에 모르겠지만 w
추가 2019/3/12
Hyperapp의 코드를 읽었습니다. 제가 개발중인 Rubelm이라는 프런트 엔드 프레임 워크 구현의 참고 (VDom)입니다.

어쨌든이 단순함은 누구나 이해할 수 있습니다.

부작용 취급 접근법

Hyperapp에서 부작용에 사용되는 함수는 값을 반환할 필요가 없습니다.

부작용으로 상태를 업데이트하려면 다른 작업을 호출할 수 있습니다.

const actions = {
  upLater: value => (state, actions) => {
    setTimeout(actions.up, 1000, value)
  },
  up: value => state => ({ count: state.count + value })
}

이 방법은 부작용을 동반하므로 테스트하기가 어렵습니다.

Hyperapp에서는 부작용을 다루는 또 다른 방법이 있습니다.

@hyperapp/fx를 사용하는 방법

입니다.

예를 들어 GET 요청을 보낼 때.

import { withFx, http } from "hyperapp-fx"

const state = {
  // ...
}

const actions = {
  foo: () => http("/data", "dataFetched"),
  dataFetched: data => {
    // data will have the JSON-decoded response from /data
  }
}

withFx(app)(state, actions).foo()

http 함수는, 그것이 실행되었을 때에 나중에 실시하는 요구가 들어간 데이터를 돌려줍니다.
따라서 동일한 인수의 경우 항상 동일한 데이터가 반환됩니다.
즉, http 함수는 순수한 함수입니다. 테스트도 쉽게 할 수 있습니다.

마지막으로

다시 말해, Hyperapp는 최고입니다.

참고

htps : // 메이 m. 코 m / hype rap p / hy pe rap p fu r r-re-x-re-fuge s-2507c9dd1dc
h tps:// 퀵했다. 작은 m/여자 r 게 부 하란/있어 MS/C48446 바베 0627 그림 25 예 6