Deno 전단 개발의 동향 [2021년 가을]

약 반년 전에 나는 디노 전단 개발에 관한 총결산에 관한 글을 한 편 썼다.
https://zenn.dev/uki00a/articles/frontend-development-in-deno-2021-spring
반년 동안 또 여러 가지 변화가 생겼으니 다시 한 번 정리해 봅시다.

요약

  • Deno Node。js 호환 모드 구현
  • Aleph.js v0.삼베타가 나왔습니다.

  • Fresh,packup,Ultra 등 새로운 프레임워크/도구가 등장

  • Snel에 따라 Svelte 애플리케이션
  • 제작 가능
  • vno는 SSR 및 SSG 등을 지원합니다.
  • Velociraptor는 Giit hooks 지원
  • npm 패키지와의 상호 운용성


    Node.js 호환 모드


    Deno v1.5 노드.js 호환 모드를 실현했습니다.
    현재expresskoa의 포장도 어느 정도 작동하고 있다.
    https://zenn.dev/uki00a/articles/node-compat-mode-introduced-in-deno-v1-15
    지금 이 노드는js 호환 모드, Vite 및 Next를 사용합니다.js 등의 대응을 이동하기 위해 시도되고 있습니다.
    https://github.com/denoland/deno/issues/12577
    한편 디노 핵심 팀원Bartek Iwańczuk씨에 따르면 에스린트는 곧 움직일 예정이다.

    esm.업데이트


    esm.sh는 npm 포장을 보내는 목적의 CDN이다.
    https://github.com/alephjs/esm.sh
    이거.sh에서는 매크로 패키지의 별칭 기능을 지원합니다.
    https://esm.sh/[email protected]?alias=react:preact/compat
    
    이걸로 preact/compat 등의 사용이 편리해졌어요.
  • https://github.com/alephjs/esm.sh/issues/89
  • Aleph.js v0.3beta 출시


    Aleph.js는 Next입니다.js의 영향을 받는 React 기반 프레임워크
    https://github.com/alephjs/aleph.js
    이거 Aleph.js의 v0.삼베타가 발표됐습니다.
    큰 변경점은 다음과 같다.
    아직 베타 발표 단계입니다. 정식으로 발표할 때 사용 방법에 변화가 생길 수 있으니 주의하세요!

    구축 기초를 esbuild+swc로 이동


    원래 Aleph였어요.js에서 구축기초tsc(정확히 말하면 소프트웨어 패키지로 사용한다.
    v0.3beta에서 구축 기초는esbuild와swc로 옮겨졌다.
    이로써 건물의 고속화를 기대할 수 있다.

    새 플러그인 시스템


    플러그인 시스템, Aleph를 통해js의 운행 시간을 확장하고 코드 변환 과정에 개입하며 사용자 정의 파일 형식 지원을 추가할 수 있습니다.
    공식적으로는 다음과 같은 세 가지 플러그인을 제공합니다.
  • CSS Loader (builtin)
  • Markdown Loader
  • JSON Loader
  • JSON Loader 플러그인은 Deno 호스트JSON Modules에서 삭제됩니다https://github.com/denoland/deno/issues/7623.
    또한, Aleph.js의 작성자미스터에 따라 Windi CSS 플러그인을 제공합니다.
    https://github.com/ije/aleph-plugin-windicss
    // aleph.config.ts
    import windicss from 'https://deno.land/x/[email protected]/plugin.ts'
    import type { Config } from 'aleph/types'
    
    export default {
      plugins: [windicss]
    } as Config
    
    Tailwind CSS 호환 수준을 활용할 수 있습니다.
  • https://github.com/alephjs/alephjs.org/blob/5297a70c4f36e024181898d376a9e580bf8f8962/pages/docs/api-reference/plugin-api.md
  • <link> 태그 기반 역할 영역 CSS 지원


    이것은 어떻게 된 일인지 말하자면 다음과 같다. <link> 파일을 읽는 것 *.module.css 은 유한한 범위의 CSS 스타일을 만들어 낸다.
    이 스타일$은 접두사를 추가해서 인용할 수 있습니다.
    import React from 'react'
    
    export default function App() {
      return (
        <>
          <link rel="stylesheet" href="../style/app.module.css" />
          <h1 className="$title">Hello world!</h1>
        </>
      )
    }
    
  • https://github.com/alephjs/alephjs.org/blob/5297a70c4f36e024181898d376a9e580bf8f8962/pages/docs/basic-features/built-in-css-support.md#using-link-tag
  • 페이지 구성 요소의 ssr 옵션 지원


    페이지 구성 요소 지원ssr 옵션.
    Next입니다.js에서getStaticProps/getStaticPaths의 기능에 해당한다.
    import React from 'react'
    import type { SSROptions } from 'aleph/types'
    
    export const ssr: SSROptions = {
      props: async router => ({ date: Date.now() }),
      paths: async () => [],
    }
    
    export default function Page(props) {
      return (
        <p>{props.date}</p>
      )
    }
    
  • https://github.com/alephjs/alephjs.org/blob/5297a70c4f36e024181898d376a9e580bf8f8962/pages/docs/basic-features/ssr-and-ssg.md#ssr-options
  • Oak과의 합병


    Oak는 Deno의 웹 응용 프레임워크입니다.
    Node.jsKoa의 영향을 받다.
    이것3beta버전에서 aleph/server/mod.tsoakify()이라는 함수를 추가하여 Aleph 대상을 중간부품화할 수 있습니다.
  • https://github.com/alephjs/alephjs.org/blob/5297a70c4f36e024181898d376a9e580bf8f8962/pages/docs/advanced-features/custom-server.md#custom-server
  • API 중간부품 지원

    api/_middlewares.ts 또는 aleph.config.ts에서 중간부품을 정의할 수 있습니다.
    Logging과 응답 등 다양한 기능을 설정할 수 있습니다.
  • https://github.com/alephjs/alephjs.org/blob/5297a70c4f36e024181898d376a9e580bf8f8962/pages/docs/basic-features/apis.md#middlewares
  • Fresh


    https://github.com/lucacasonato/fresh
    Deno 핵심 팀원Luca Casonato이 개발한 Proeact 기반 웹 프레임워크.
    기본적으로 Deno Deploy가 작동할 것이라고 생각하는 것 같습니다.(먼저 Deno CLI도 작동)
    설치와 사전 구축 등 없이 서버에서 필요에 따라 구축하고 구현할 수 있다.(FrreshREADME.md에서 JIT 렌더링이라고 함)
    또한 <Suspense> 등의 기능도 지원한다.
    /** @jsx h */
    import { h, Suspense, useData } from "../deps.ts";
    
    export default function Home() {
      return (
        <Suspense
          fallback={(
            <div>
              Loading...
            </div>
          )}
        >
          <SuspendedComponent />
        </Suspense>
      );
    }
    
    function SuspendedComponent() {
      const message = useData("/api/message", fetchMessage);
      return <div>{message}</div>;
    }
    
    async function fetchMessage(key: string): Promise<string> {
      const res = await fetch(key);
      return await res.text();
    }
    
    참고로 데노 린트의 공식 페이지lint.deno.land는 이 Freesh와twind로 제작되었습니다.[1]
    향후 GiitHub issue는 다음과 같은 기능 등을 제시했다.
  • 페이지 캐시
  • 브라우저당 번들 최적화
  • App 구성 요소 지원(pages/app.tsx)
  • 나는 개인적으로 웹 페이지의 캐시를 지원할 수 있다면 사용하기에 비교적 편리할 것이라고 생각한다.

    Ultra


    https://github.com/exhibitionist-digital/ultra
    React 기반 Ultra 프레임워크가 공개되었습니다.
    특징.
  • ReactDOM.renderToReadableStream 기본 SSR
  • Vite 등과 같은 주문형 코드 변환
  • esbuild+swc 기반의 구축 시스템

  • SWR에 실시간 홍보
  • Import maps 기반 의존 관리
  • 스캔들 등은 아직 제공되지 않았기 때문에 사용 시 참고정식 보일러판 등을 부탁드립니다.
    방금 공개된 프레임이라 본격적으로 사용하려면 오래 걸릴 것 같다.

    packup


    https://github.com/kt3k/packup
    packup은 Parcel의 영향을 받는 esbuild 기반의 구축 도구입니다.
    저자는 디노 핵심 팀의 구성원선생님이다.
    Parcel과 마찬가지로 설정 없이 HTML 파일을 packup 명령의 매개 변수로 지정하면 됩니다.
    또한 기본적인 Sass 지원 등도 제공합니다.

    Snel


    https://github.com/crewdevio/Snel
    Snel은 Svelte 애플리케이션의 구축 툴/프레임워크입니다.
    내부는 Bundlerdeno-rollup(포크판) 등을 바탕으로 실시된다.
    의존 관계의 관리 및 임무 관리Trex로서 Import Maps를 사용하여 의존 모듈을 관리할 수 있다.
    또 실험적인 SSG 등도 지원한다.(SSR은 향후 지원될 예정)

    버전 업그레이드


    https://github.com/open-source-labs/vno
    vno는 Deno Vue입니다.js 응용 프로그램을 개발하는 구축 도구입니다.
    지금 최신 버전 vnov1을 시험해 봤어요.주의5.1 Deno에서는 움직일 수 없을 것 같아요.🙇
    최근 반년 동안 실시된 최대 변경 사항은 다음과 같다.
  • SSR 및 dev 서버에서 실시간 재로드 지원v1.3.0
  • SSG 지원vno ssg build 명령v1.4.1
  • 단, 문서에 아직 설명이 없음
  • CSS 관련 추세


    현재 디노의 공식 문서twind는 사용/소개하는 경향이 있다.
    예제)
  • lint.deno.land
  • https://dash.deno.com/playground/example-nanossr
  • 또한 Denotwd에서Tailwind CSS 쓰기 스타일을 설명하는 도구라도 내부에 이 트위터를 사용했다.
    또 Aleph야.js 제공 CSS ModulesWindi CSS 지원 등.

    Velociraperv1 출시


    Velociraptor는 데노의 미션 주자다.
    https://github.com/jurassiscripts/velociraptor
    이 Velociraper의 v1이 발매되었습니다.
    이 버전은 추가되었습니다Giit 연계 지원.
    scripts.yml
    scripts:
      format:
        cmd: deno fmt
        gitHook: pre-commit
    
    설정 파일에 이렇게 기술하면 vr 명령을 실행할 때 자동으로 Giit 갈고리를 생성합니다.
  • https://github.com/jurassiscripts/velociraptor/releases/tag/1.0.0
  • 끝말


    나는 반년 전과 비교해 선택항목이 증가했다고 생각한다.
    그렇긴 하지만 정작 프런트엔드 개발을 하려면 Aleph가 필요하다.js/Fressh/packup의 주류가 발매될 때까지 나는 여전히 좀 심각하다고 생각한다.
    하지만, 노드.개인적으로 js 호환성 모델에 따라Vite가 이동할 수 있다면 솔직히 이걸로 하면 된다고 생각합니다.(정식 출시 시 제품을 만들어야 하며, 개발 시 Node.js 호환 모드를 사용하는 비용도 큰 문제가 없다)
    관심 있는 물건이 있으면 꼭 써 보세요!
    각주
    원본, lint.deno.land는Dext였다.ts 및 Tailwind CSS로 작성됨최근에 다시 썼어요.↩︎

    좋은 웹페이지 즐겨찾기