Экосистема Javascript расширяется с каждым днем. Время от времени энтузиасты javascript представляют новые концепции и новые способы улучшения работы разработчиков, такие как островная архитектура, возобновляемость, мелкозернистая реактивность и многое другое.
В этой статье мы рассмотрим фреймворк Fresh и построим небольшой github, используя github rest api.
Deno — это простая, современная и безопасная среда выполнения для JavaScript, TypeScript и WebAssembly, которая использует V8 и построена на Rust.
Preact — это фронтенд-фреймворк на основе javascript, альтернатива react с тем же современным api, таким как hooks, context и т.д..
Fresh — это серверный веб-фреймворк, построенный на основе deno, preact и архитектурного паттерна Island.
Прекрасным фактом о Fresh является то, что у него нет сборки, поэтому если вы развернете Fresh на Deno-Deploy, это займет очень мало времени.
В этом проекте мы будем использовать twind, который предоставляет tailwind api для разработки ui.
Создайте проект с помощью 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>
);
}
Layout — это простой компонент, который содержит навигационную панель и заголовок веб-страницы.
Когда мы отправим форму, будет запущен обработчик метода POST.
Если вы хотите получить доступ к данным формы, вызовите метод req.formData(), который вернет FormData.
fetchUserInfo — это вспомогательный метод, который извлекает данные из github rest api. Если вы неавторизованный пользователь, то вы можете сделать только 60 запросов в час к github rest api.
ctx.render() возвращает Response, который будет доступен внутри реквизита страницы data.
Если вы хотите посмотреть живую демонстрацию, посетите сайт https://freshhub.deno.dev/.
Если вы хотите изучить полный исходный код, он доступен на github
harshmangalam / freshHub
harshmangalam / freshHub FreshHub — это веб-приложение на базе deno fresh, использующее GIthub REST api.
FreshHub
Использование
Запустите проект:
deno task start
LiveDeno Deploy