Solid-최고의 JavaScript UI 라이브러리?

얼마 전에 날씬함의 가장 중요한 장점인 post을 썼습니다.당시 이 틀은 막 중대한 갱신을 받았는데, 이것은 상당히 핫한 화제였다.지금도 먼지가 걷힌 후에도 스웨트는 여전히 많은 장점을 가지고 있지만, 이전에는 눈치채지 못했던 단점도 있다.
나는 이 작은 문제들에 대해 노발대발하고 싶지 않다. 왜냐하면 이것은 본문의 중점이 아니기 때문이다. 게다가 나는 정말 날씬한 것을 좋아한다.참고로 다음과 같습니다.

TypeScript 지원 - it's been added recently이지만 Svelte가 빠르게 유행할 때는 존재하지 않습니다.따라서 대부분은 여전히 작지만 프레임 생태계에 매우 중요하기 때문에 지원하지 않을 가능성이 높다.

문법 차이 - 익숙해졌을 때 Svelte는 기분이 좋았지만 컴파일러의 특성을 바탕으로 일부 문법 세부 사항은 초보자들이 어색함을 느낄 수 있다. 예를 들어 전용 템플릿 문법, $: 수동 라벨(기술적으로 효과적인 JS임에도 불구하고) 등이다.

소형 생태계 - 이것은 흔히 볼 수 있는 문제입니다. React, Vue, Angular, 또는 [이곳에 당신의 큰 틀을 삽입하거나 웹 구성 요소에 100% 의존하지 않으면 반드시 겪어야 합니다.Svelte가 최근 인기를 끌면서 상당히 존경받는 생태계를 개발했고, its good support for Web Components (Svelte를 이렇게 번역할 수도 있다) 은 큰 문제가 아니지만, 여전히 기억해야 한다.

그래서 날씬함은 이상적이지 않다. 아무것도 이상적이지 않다. 이것이 바로 우리가 다른 선택을 하는 이유다.컴파일러의 생각이 당신에게 매력적이고 Svelte의 문법적 결함 없이 위에서 아래로의 TypeScript 호환성을 실현하고 싶다면 Solid에 흥미를 느낄 수 있습니다.

든든한 소개
따라서 Solid(S.O.L.I.D. principles이 아니라 Solid UI 라이브러리)은 "사용자 인터페이스를 만드는 데 사용되는 선언적인 JavaScript 라이브러리"입니다.그럼 또 다른 UI 프레임워크가 있습니까?그래, 그렇지만 아니야. 봐라, 솔리드는 우리가 이전에 보지 못했던 좋은 개념 조합을 도입하여 붐비는 UI 라이브러리 사람들 속에서 자신을 효과적으로 돋보이게 한다.
고체는 무슨 소용이 있습니까?나에게 있어서 몇 가지가 있다. 그것은 TypeScript로 작성된 것이고 TypeScript에 일류의 지원을 한다. 이것은 JSX를 지원하고 추가적인 React vibes를 지원한다. 예를 들어 세션, 비동기 렌더링과 갈고리식 기능이다. 마지막으로 가장 중요하지 않은 것은 wicked-fast이다. 이것은 vanilla JS와 일률적이다.

코딩 데모
나는 내가 너의 흥미를 불러일으켰으면 한다.이제 솔리드 어셈블리의 예를 살펴보겠습니다.

// index.tsx
import { Component, createState, onCleanup } from "solid-js";
import { render } from "solid-js/dom";

const App: Component = () => {
  const [state, setState] = createState({ count: 0 });
  const timer = setInterval(
    () => setState("count", (count) => count + 1),
    1000
  );

  onCleanup(() => clearInterval(timer));

  return <div>{state.count}</div>;
};

render(() => <App />, document.getElementById("app"));

위에서 당신은 간단한 counter component을 볼 수 있습니다.만약 네가 이전에 React를 사용한 적이 있다면, 너는 그것이 좀 익숙하다고 느낄 것이다.
우리는 직접 지정한 형식의 화살표 함수를 사용하여 App 구성 요소를 만듭니다.Solid가 TypeScript와 잘 어울린다는 것을 알려주는 찌라시입니다.
다음은 createState() 함수의 사용과 익숙한 수조 분해 모드를 볼 수 있습니다.
이것은 React hooks처럼 보일 수도 있지만, 단지 밖에 있을 뿐이다.내부에서는'갈고리 규칙'이 강제로 집행될 수 없고 낡은 클립에 대해서도 문제나 곤혹스러움이 없다.이것은 Solid의 구성 요소가 한 번만 실행되고 코드에 남겨진 특정한 부분(예를 들어'Solid hooks'에 전달되는 리셋)을 다시 실행하기 때문이다.더욱이 React는 다시 렌더링할 때마다 render() 방법이나 같은 효과 기능 구성 요소를 호출하고 Solid는 구성 요소 함수를 특정한'구조 함수'로 사용하여 모든 다른 반응 부분을 설정하기 위해 한 번만 실행한다.
그래서 우리는 우리 나라가 있다.현재 우리는 일반적인 setInterval() 함수를 사용하여 계수기 기능을 실현하고 감속기와 유사한 방식으로 setState()(고체 상태에서 setState()의 많은 가능한 방식 중 하나)을 사용하여 상태를 갱신한다.
마지막으로, 우리는 구성 요소 처리를 위해 갈고리와 유사한 onCleanup() 함수를 사용하여 리셋을 등록합니다.핵심 구성 요소 함수는 한 번만 실행되기 때문에 onCleanup()과 같은 '갈고리' 는 수동적인 행위를 처리하는 유일한 방법이라는 것을 기억해라.
이제 JSX 요소로 돌아가 어셈블리를 렌더링하면 됩니다!이거 복잡하지 않아요?

기억해야 할 일
그래서 이것은 단지 간단한 시범으로 사물의 외관에 대해 기본적인 이해를 하게 할 뿐이다.더 깊은 지도를 얻으려면 the official docs을 보십시오. 완전한 강좌를 보고 싶으면 평론을 발표하세요.
하지만 이제는 고체를 시험해 보고 싶다면 기억해야 할 것들을 지적하고 싶다.
우선, 나는 내가 한 번 반복했다는 것을 알고 있지만, 구성 요소 함수가 한 번만 실행된다는 사실은 매우 중요하다.Solid는 JSX를 사용하고 React의 계발을 받았기 때문에 개발자가 최소한 React에 대해 익숙하고 코드가 왜 정상적으로 작동하지 못하는지 곤혹스러울 수 있다고 안전하게 가정할 수 있다.이러한 차이를 이해하는 것은 솔리드에 익숙해지는 방법에 매우 중요하다.
다음은 Solid가 컴파일러이기 때문에 정확한 개발 경험을 얻기 위해 추가 설정이 필요합니다.가장 간단한 방법은 Babel 플러그인(babel-preset-solid) 또는 미리 구성된 템플릿에서 시작하는 것입니다.

npm init solid app my-app

현대 인터넷 개발은 이미 바벨 등의 도구에 심각하게 의존하기 때문에 다른 플러그인을 추가하는 것은 큰 문제가 되지 않을 것이다.
마지막으로 고체의 반응성에 대해서는 더 많은 것을 기억해야 한다.대량의 최적화와 컴파일러를 바탕으로 한 디자인 때문에 처리 상태에 문제가 존재한다.그 중에서 가장 중요한 것은 컨디션을 파괴해서는 안 된다는 것이다. 예를 들어 다음과 같다.

const { count } = state;

구문 분석에서 파생된 값은 수동적이지 않으므로 JSX에서 사용할 때 업데이트되지 않습니다.만약 당신이 정말로 끊임없이 완전한 상태 속성 경로를 입력하는 것을 참을 수 없다면 (진정으로 서투른 상태 대상을 제외하고는) 당신은 여전히 이렇게 처리할 수 있습니다.

const count = () => state.count;

// later
count();

기본적으로 state 속성에 접근하기 위해thunk (또는 간단한 단축키) 를 만듭니다.간단한 상태를 처리할 때, 이것은 약간 낭비될 수 있지만, 두 개 이상의 깊이를 처리할 때도 매우 유용할 것이다.
그러나 상기 예에서처럼 매우 간단한 속성 상태에 대해 사용 대상은 과도한 사용이다.이런 상황에 대해 Solid는 이른바 신호인'Getter와setter로 구성된 원자불변 단원'을 제공했다.기본적으로 상태 객체의 이터레이션이지만 약간 다릅니다.

import { createSignal } from "solid-js";

const App = () => {
  const [getCount, setCount] = createSignal(0);
  //...

  return <div>{getCount()}</div>;
};

createSignal() 방법은 한 쌍의 함수를 되돌려줍니다. 첫 번째 함수는 접근 유지 값에 사용되고, 두 번째 함수는 유지 값을 설정하는 데 사용됩니다.
보시다시피 신호는 대상 상태에 기반한 벙어리 버전과 비슷하지만 약간 비슷합니다.봐라, Solid는 신호를 더욱 고급 반응 기능의 구축 블록으로 사용한다.이것은 대상을 바탕으로 하는 상태를 포함하는데 그 핵심은 비교적 작은 수요에 따라 신호로 구성된 에이전트이다.
한마디로 Solid를 시도하고 싶다면, Solid의 개념을 이해하는 것은 개발 경험을 많이 희생하지 않고 효율적인 코드를 만드는 데 매우 중요하다.

결점
Solid를 "다음 큰일"또는 "최고의 JS UI 라이브러리"로 발표하기 전에 몇 가지 단점을 지적할 필요가 있습니다. 솔직히 이런 단점은 많지 않습니다.
Solid가 UI 라이브러리로서의 관점에서 볼 때, 우리는 내가 열거한 모든 API와 문법 문제, 그리고 내가 열거하지 않은 문제가 모두 결점으로 여겨질 수 있다고 생각할 수 있다.그러나 간단한 UI 라이브러리가 소프트웨어의 본질에 어긋나기를 기대할 수는 없습니다.JavaScript 자체의 한계와 Solid 컴파일러를 기반으로 한 디자인은 약간의 타협이 필요하다.그러나 적어도 내가 보기에, 일단 네가 익숙해지면, 그것들은 큰 문제가 되어서는 안 된다.
그 다음으로 생태계는 매우 작다.본문을 작성할 때, 이 라이브러리에는 약 4K GitHub 별이 있었고, 그것에 관한 글도 적지 않았다.그러나 그 주변에는 생태계가 거의 없다.Vue에서는 Vuetify을, React에서는 Material UI을 사용하므로 어셈블리 라이브러리가 없습니다.당신이 가진 것은 단지 당신이 쓴 것일 뿐입니다. 사용하고 싶다면 Web Components을 더하세요.
마지막으로 제가 말하고자 하는 것은 이 문서들은 매우 상세하고 주제에 대한 해석도 매우 좋으나 GitHub repo에 사는 가격 인하 파일일 뿐 화려한 로그인 페이지나 유사한 것이 없습니다.나는 알고 있다. 나는 지금 꼬치꼬치 캐묻고 있지만, 개발자들이 라이브러리에 흥미를 가지도록 '도덕적 마케팅'을 해야 한다. 그렇지 않으면, 기본적인 테스트와 본문과 유사한 문장에서만 그것을 이해할 수 있다.이 문서들은 이미 충분합니다. 로고는 보기에 매우 좋고, 또한 많은 예시 항목들이 당신에게 보여 줄 수 있습니다. 단지 로그인 페이지가 없습니다.

이게 미래인가?
결론적으로 Solid는 매우 유망한 UI 라이브러리로서 많은 장점을 가지고 있다.JSX와 React 개념에 대한 익숙함과 Svelte의 속도와 패키지 크기는 이상적인 UI 라이브러리처럼 보입니다.
Solid의 몇 가지 단점은 그다지 나쁘지 않거나 라이브러리의 끊임없는 발전에 따라 쉽게 복구할 수 있습니다.
전반적으로 말하자면, 그것은 나의 믿을 만한 추천을 받았다. (내가 거기서 무엇을 했는지 봐라.)나는 네가 가서 보라고 강력히 건의한다.읊다, 읊조리다
최신 웹 개발 내용을 더 알고 싶으면 반드시 Facebook으로 전화하거나 my personal blog으로 저에게 연락하십시오.읽어주셔서 감사합니다. S.O.L.I.D. 코딩을 기원합니다.