"frourio"초경량 프레임워크, 명령 하나만 있으면 꿈꾸는 TypeScript 환경을 만들 수 있습니다!

2020년 6월 도쿄에서 열린 TypeScript Meetup#4 행사에서 처음으로 발표되고 10월에 업데이트되어 더욱 멋있게 할 수 있도록 허락해 주십시오!
frourio는 프로그램 전체를 전방에서 후단으로 컴파일하는 프레임워크와 '하나의 유형 스크립트' 의 대상 관계 (O/R) 맵입니다.통합 유형 검사도 지원합니다.
이것은 하나의 디렉터리에 포함되어 있기 때문에 전체적으로 보이지만, 전단과 후단은 형식을 통해 연결된 항목을 제외하고는 단독 항목 (패키지. json) 으로 나뉘어져 있습니다.
이렇게 하면 Vercel에 프런트엔드를 배포하거나 AWS에 프런트엔드를 배포할 수 있습니다.

다음은 new frourio의 새로운 기능입니다.

세계에서 가장 빠른 타자 스크립트 프레임워크

프런트엔드 SPA+REST 서버 + 또는 맵을 포함하여 단일 명령

을 사용하여 개발 환경 설정

Vercel의 React Hooks 라이브러리 "SWR"

함수

에 의존항 주입 사용 가능

이 로고 귀엽다!

하나씩 설명해 드릴게요.

세계에서 가장 빠른 타자 스크립트 프레임

참고 문헌: https://github.com/frouriojs/benchmarks
프루리오가 너무 빠른 데는 이유가 있어.그것의 서버 핵심은Fastfy인데 이것은 frourio가 세계에서 가장 빠른 엔진이라는 것을 의미한다.
그러나 frourio를 사용하는 것은 자신이Fastfy에서 쓰는 것보다 훨씬 빠르다.
frourio는 간단한 기능을 결합시켜 루트 비용을 방지하는 데 목적을 두고 있다.컴파일할 때 유형 정보에 따라 최적화됩니다.
이것이 바로frourio가Fastify 웹 프레임워크의 기능을 어떻게 충분히 활용하는가이다.

프런트엔드 SPA+REST 서버 + 또는 맵을 포함한 개별 명령을 사용하여 개발 환경 설정

* 10월 25일부터 일부 Windows Subsystem for Linux(WSL) 환경에서 설치를 수행하는 동안 오류가 발생할 수 있습니다.
frourio는 명령 하나만 사용하면 모든 내용을 설정할 수 있습니다.이것은 마치 다음과 같다.CreateNext 응용 프로그램과 Nuxt를 사용할 때 js 응용 프로그램을 사용합니다.create nuxt 프로그램을 사용할 때 js 프로그램을 사용합니다.

다음 명령을 실행하십시오.

$ npx create-frourio-app

$ yarn create frourio-app

설치 후 다음 메시지가 표시되고 브라우저 창이 자동으로 열립니다.
*브라우저 창이 열려 있지 않으면 URL을 직접 엽니다.

open http://localhost:3000 in the browser

카탈로그 이름에 항목 이름을 입력합니다. 이 이름은 패키지의 이름으로도 사용됩니다.json.
Fastify를 핵심 프레임워크로 추천합니다. 왜냐하면 적극적으로 개발 중이기 때문에 그 기준 속도는 다른 웹 프레임워크의 5배입니다.
너는 다음을 선택할 수 있다.js 또는 Nuxt전단 설정에 사용되는 js입니다.

데몬 관리자가 인수하기 전에 설치 과정을 계속 진행하는 방법을 결정합니다.

Prisma는 O/R 맵에 권장되는 괜찮은 데이터베이스 키트입니다.
SQLite는 충분히 테스트할 수 있습니다.
사전 설치 없이 프로젝트 내부에서 종료할 수 있습니다.
SQLite의 데이터베이스 파일 위치는 기본 위치일 수 있습니다.

종속 주입 코드 예제를 보려면 Jest를 선택하고 Create 버튼을 클릭합니다.

모드 창이 표시되고 터미널 창에서 설치가 시작됩니다.

설치하면 브라우저가 자동으로 다시 로드되고 Next/Nuxt ToDo List 응용 프로그램이 표시됩니다.설치 후 구축 과정은 시간이 걸릴 것이다.

Vercel의 React Hooks 라이브러리 "SWR" 개편

다음 단계를 선택했다면js, pages/index.tsx 에서 다음 코드를 찾을 수 있습니다

10행에서 useAspidasWR은 SWR 패키지입니다.
ApiClient를 사용하여 GET 요청/tasks을 보냅니다.임무가 관건이다.
응답 데이터는 SWR과 동일합니다.
사실 이 매개 변수는 frourio 컨트롤러와 정적 연결됩니다.
API의 유형 정의는 server/api/tasks/index.js에 포함됩니다.
서버/api 이후의 디렉토리 이름은api URL에 해당합니다.

테스트를 위해 resBody의 형식을string으로 변경합니다.

다음.js: 페이지/인덱스.tsx

frourio:server/api/tasks/controller.ts

Next에서 둘 다 오류가 발생했습니다.js와 frourio, 이것은 frourio의 가장 멋진 부분입니다!

함수에 의존 주입을 사용할 수 있다

frourio에서 검증기를 제외한 모든 내용은 함수에서 작성됩니다.

함수로 작성된 컨트롤러에서 주입에 의존하는 모드를 사용하는 것은 일반적으로 환영을 받지 못하지만,frourio는 함수 주입에 의존하는 방법을 채택했다.
설치 시 테스트 프레임워크로 Jest를 선택하면 frourio 테스트 코드가 포함됩니다.
아래 8행에서 보듯이 주입된 Prisma 객체인 "findAllTask"를 정의합니다.

상향 전환은 의존항을 나중에 쉽게 사용할 수 있도록 'as' 를 사용하여 실행됩니다.

다음 7행 참조;"findAllTask"및 "print"는 컨트롤러에 주입됩니다.

네가 가장 좋아하는 도구를 사용하여 테스트 코드를 작성해라.
다음 7행 참조;컨트롤러와findAllTask(8번째 줄) 모두 주입에 의존해야 하는데, 이것이 바로 그것이 왜 끼워 넣었는가 하는 것이다.
그러나 'print' 는 의존항이 없기 때문에arrow 함수에 직접 주입됩니다.

테스트 결과입니다.

보시다시피, 그 작성은 전형적인 구조 함수 기반 의존 주입보다 훨씬 간단합니다.
이것은 velona라는 라이브러리를 설치함으로써 이루어진 것이다.
(실제로velona는 파생 라이브러리로frourio에서 의존 주입을 어떻게 사용하는지 탐색한 후)

이 로고 귀여워!

귀여운 캐릭터 로고는 인도네시아 디자이너가 디자인했습니다!

주문 방송 좀 해주세요.
https://frourio.io/