Javascript 생태계는 매일 확장되고 있습니다. 때때로 javascript는 Island 아키텍처, Resumability, 세분화된 반응성 등과 같은 개발자 경험을 향상시키는 새로운 개념과 새로운 방법을 열정적으로 소개합니다.

이 블로그 게시물에서는 Fresh 프레임워크를 살펴보고 github rest api를 사용하여 작은 github를 빌드할 것입니다.

Deno는 V8을 사용하고 Rust로 구축된 JavaScript, TypeScript 및 WebAssembly를 위한 간단하고 현대적이며 안전한 런타임입니다.

Preact는 후크, 컨텍스트 등과 같은 최신 API와 반응하는 자바스크립트 기반 프런트엔드 프레임워크 대안입니다.

Fresh는 deno, preact 및 Island 아키텍처 패턴 위에 구축된 서버 렌더링 웹 프레임워크입니다.
Fresh에 대한 아름다운 사실은 빌드가 없기 때문에 Deno-Deploy에 Fresh를 배포하면 라이브로 전환하는 데 시간이 훨씬 적게 걸린다는 것입니다.

이 프로젝트에서는 ui 디자인을 위해 api와 같은 순풍을 제공하는 twind를 사용할 것입니다.

Fresh를 사용하여 프로젝트를 생성하고 로컬에서 실행

deno run -A -r https://fresh.deno.dev fresh-hub
cd fresh-hub
deno task start

안으로 들어가 routes/index.tsx

/** @jsx h */
import { h } from "preact";
import { tw } from "@twind";
import { PageProps, Handlers } from "$fresh/server.ts";
import { fetchUserInfo } from "../services/github.ts";
import Layout from "../components/Layout.tsx";

export const handler: Handlers = {
  async POST(req, ctx) {
    try {
      // get form data from request
      const formData = await req.formData();
      // extract username from form data
      const username = formData.get("username");
      // add validation
      if (!username || username.toString().trim().length === 0) {
        return ctx.render({ error: "Username should not be empty" });
      }

      // check if username exists
      const [status] = await fetchUserInfo(String(username));
      // handle different error status code
      if (status === 404) {
        return ctx.render({ error: "User not found" });
      }
      if (status === 403) {
        return ctx.render({
          error: "Exceeded github api limit try after an hour",
        });
      }

      // redirect to user profile screen
      return new Response(undefined, {
        headers: {
          location: `/${username}`,
        },
        status: 302,
      });
    } catch (error) {
      return ctx.render({ error: error.message });
    }
  },
};
export default function Home({ data }: PageProps) {
  return (
    <Layout title={"Home"}>
      <form
        method="post"
        className={tw`max-w-md  mx-auto bg-gray-800 p-4 rounded-xl shadow-md`}
      >
        <div className={tw`flex flex-col space-y-2`}>
          <label htmlFor="username">Github Username</label>
          <input
            autoFocus
            type="text"
            name="username"
            id="username"
            className={tw`bg-gray-700 px-4 py-2 rounded-md border-2 ${
              data?.error ? "border-red-400" : "border-blue-400"
            } focus:outline-none`}
            placeholder={"harshmangalam"}
          />
          {data?.error && (
            <p className={tw`text-sm text-red-400`}>{data.error}</p>
          )}
        </div>
        <button
          className={tw`focus:outline-none hover:bg-gray-600 bg-gray-700 text-lg font-bold w-full mt-4 py-2 px-4 rounded-md`}
        >
          Continue
        </button>
      </form>
    </Layout>
  );
}

레이아웃은 탐색 표시줄과 웹 페이지 제목을 포함하는 간단한 구성 요소입니다.

양식을 제출하면 처리기 POST 메서드가 실행됩니다.

양식 데이터에 액세스하려는 경우 req.formData()를 반환하는 FormData 메서드를 호출합니다.
fetchUserInfo는 github rest api에서 데이터를 가져오는 유틸리티 메서드입니다. 인증되지 않은 사용자인 경우 github rest api에 시간당 60개의 요청만 할 수 있습니다.
ctx.render() 페이지 속성data 속성 내에서 사용할 수 있는 응답을 반환합니다.

라이브 데모를 보려면 https://freshhub.deno.dev/을 방문하십시오.

전체 소스 코드를 탐색하려면 github에서 사용할 수 있습니다.

거친 망 갈람 / freshHub

FreshHub는 GIthub REST api를 사용하는 deno fresh로 구동되는 풀스택 웹 앱입니다.

프레쉬허브

용법

프로젝트 시작:

deno task start

살다
Deno Deploy


View on GitHub