Elm과 React/Redux 비교

최근에 Elm에서 웹 응용 프로그램을 만드는 것을 탐색해 봤는데 제가 과거에 참여했던 일반적인 React/Redux 프로젝트에 비해 신선한 공기라는 것을 발견했습니다.
* 면책 성명: 만약에 조작이 정확하다면 React/Redux는 대형 팀에게 매우 좋고 실행 가능하다고 생각합니다.본고는 내가 서로 다른 회사의 대형 팀에서 일할 때의 문제점과 왜 Elm이 어떤 상황에서 더 좋은 선택이라고 생각하는지 설명할 것이다.

아픔점
한동안 내가 참여한 많은 React/Redux 프로젝트는 거대해졌다. 수백 개의 복원 프로그램, 수백 개의 구성 요소, epics,thunks,reselect Selector,sagas와 맞춤형 중간부품의 혼합물이 있었다.핫 모듈 교체가 느려지고 구축 시간이 느려지며 런타임 성능이 느려지고 감사 점수가 낮아지며 번들 크기가 커지면서 애플리케이션이 전송될 때마다 런타임 오류가 점점 더 많이 발생합니다.
나는 이것이 모든 사람의 경험이 아니라는 것을 안다. 만약 당신이 개발 과정에서 엄격한 규칙을 집행한다면, 당신은 이 모든 문제를 가지지 않을 것이다.하지만 너도 그 중 몇 가지 아픔을 겪었을 수도 있다.(이런 고통을 겪어본 적이 없다면 열심히 일하는 것은 어려운 쾌거이다)
내가 '규칙' 개발을 언급했을 때, 나는 린트 규칙과 더 아름다운 규칙을 가리키는 것이 아니다.제 말은 제3자 라이브러리를 너무 많이 설치하지 말고 모듈에 적당한 코드 분할을 하고 매주 또는 매달lighthouse 심사를 실시하여 팀이 개선할 수 있는 부분을 확인하라는 것입니다.

솔루션
Elm은 이런 고통을 많이 피할 수 있는 아름다운 생태계를 가지고 있다.물론 그것도 자신의 발악이 있지만, 내가 보기에, 이것은 가치가 있는 것이다.
Elm의 강점:

런타임 예외 없음

모든 것이 변하지 않는

묶음 사이즈

내장형 이벤트 송신기 및 글로벌 상태 스토리지(Redux

과 유사)

1페이지 어플리케이션 내장형 라우터

내장 코드 포맷 프로그램(예를 들어prettier)

강력한 시스템

과 JS

의 손쉬운 상호 운용성

놀라운 컴파일러 오류 메시지 및 빠른 컴파일 시간

이러한 장점은 엔드 유저에게 더욱 신뢰할 수 있는 네트워크 응용, 더 좋은 DX와 더 좋은 체험을 가져다 주었다.

Elm 아키텍처를 React/Redux와 비교
Elm을 배우는 것은 매우 어려운 임무인 것 같다. 특히 모든 새로운 문법과 개념에 대해. 그러나 이것이 바로 본고의 목적이며, 어떻게 반응하는지 돕고 설명하는 데 목적을 두고 있다.
다음은 Elm과 React/Redux에서 비슷한 점을 보여주기 위해 같은 프로그램을 만들었습니다.

프레젠테이션
Redux에는 응용 프로그램 상태를 저장하는 전역 저장소가 있는데, Elm은 유사한 개념을 가지고 있는데, 이를 모델이라고 하는데, 이것은 저장의 강력한 유형 버전이다.
Redux 감속기의 초기 상태

const initialState = {
  count: 0
}

Elm 초기 모델 및 타자

type alias Model =
  { count : Int }

initialModel =
  { count = 0 }

Elm의 유형 별칭은count 속성에서 하나의 숫자만 분배됩니다.

행동
Redux에서는 특정 상태 변경 또는 부작용을 트리거하는 작업을 작성해야 합니다.Elm의 소식은 매우 비슷하지만 모두 인쇄된 것이다.
반복 작업

// action types
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

// actions
export const increase = () => ({ type: INCREMENT })
export const decrease = () => ({ type: DECREMENT })

Elm 메시지

type Msg = Increase | Decrease

감속기
사용자가 만든 모든 Redux 동작에 해당하는 Reducer가 있습니다.Elm에서는 거의 동일하지만, 메시지마다 업데이트 함수 (감속기) 를 항상 사용해야 합니다.
환원제

export function myReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 }

    case DECREMENT:
      return { count: state.count - 1 }

    default:
      return state
  }
}

Elm 업데이트

update msg model =
  case msg of
    Increase ->
      { model | count = model.count + 1 }

    Decrease ->
      { model | count = model.count - 1 }

Elm의 모든 컨텐트는 변경될 수 없으므로 레코드(객체)를 업데이트하려면 파이프 및 새 레코드 구문을 사용하여 상태의 새 복사본과 업데이트된 속성을 반환해야 합니다.

구성 요소
React의 구성 요소가 뷰를 생성하여 사용자에게 표시합니다.Elm에는 어셈블리가 없고 렌더링할 뷰 함수가 하나만 있습니다.
React JSX

import React from 'react'
import { connect } from 'react-redux'
import { increase, decrease } from './reducer'

const App = ({ increase, decrease, count }) => (
  <div>
    <button type="button" onClick={increase}>+1</button>
    <div>{count}</div>
    <button type="button" onClick={decrease}>-1</button>
  </div>
)

// Connect to redux
const mapStateToProps = ({ count }) => ({ count })
const mapDispatchToProps = { increase, decrease }

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

Elm 뷰 함수

view model =
  div []
    [ button [ onClick Increment ] [ text "+1" ]
    , div [] [ text <| String.fromInt model.count ]
    , button [ onClick Decrement ] [ text "-1" ]
    ]

잇닿다
React/Redux에서 구성 요소는 자동으로 Redux 저장소나 조작/복원 프로그램에 접근할 수 없으며, 명시적으로 연결해야 합니다.react-redux라는 다른 라이브러리를 사용하면 연결을 잘 끝낼 수 있습니다.Elm에서는 모든 컨텐트가 저장소의 모든 메시지 유형과 데이터에 자동으로 액세스할 수 있습니다.
반응/반복

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { myReducer } from './reducers'
import App from './App'

const store = createStore(myReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

느릅나무

main =
  Browser.sandbox
    { init = initialModel
    , update = update
    , view = view
    }

결론
그래서 우리는 간단한 계수기 프로그램을 만들었다.전체적으로 말하자면, 이것은 매우 가볍다. 레드ux가 필요로 하는 어떤 템플릿 파일도 필요하지 않고, 유효 부하를 입력했다.이 예를 가지고 싶으면 ellie-app을 클릭하세요.
이 기사가 관심을 끌고 Elm에 대한 자세한 내용을 보려면 다음 자료를 참조하십시오.

Official Elm Guide

Elm Programming Tutorial

Elm Syntax

Elm Syntax VS Javascript

트위터에 따라와!