About Cosense
Help
Log in
uki00a
T
a
n
S
t
a
c
k
S
t
a
r
t
#
T
a
n
S
t
a
c
k
#
V
i
n
x
i
#
V
i
t
e
#
S
S
R
h
t
t
p
s
:
/
/
t
a
n
s
t
a
c
k
.
c
o
m
/
s
t
a
r
t
-
F
u
l
l
-
d
o
c
u
m
e
n
t
S
S
R
,
S
t
r
e
a
m
i
n
g
,
S
e
r
v
e
r
F
u
n
c
t
i
o
n
s
,
b
u
n
d
l
i
n
g
a
n
d
m
o
r
e
,
p
o
w
e
r
e
d
b
y
T
a
n
S
t
a
c
k
R
o
u
t
e
r
,
V
i
n
x
i
,
a
n
d
V
i
t
e
.
R
e
a
d
y
t
o
d
e
p
l
o
y
t
o
y
o
u
r
f
a
v
o
r
i
t
e
h
o
s
t
i
n
g
p
r
o
v
i
d
e
r
.
h
t
t
p
s
:
/
/
g
i
t
h
u
b
.
c
o
m
/
T
a
n
S
t
a
c
k
/
r
o
u
t
e
r
/
t
r
e
e
/
v
1
.
8
6
.
0
/
p
a
c
k
a
g
e
s
/
s
t
a
r
t
Related
Sort by
Related
Modified
Created
Last visited
Most linked
Page rank
Title
Links
Vinxi
#Nitro #Vite #SSR #React #Solid.js #OpenAPI #MDX[https://github.com/nksaraf/vinxi]
Vite
#esbuild #Rollup #Vue.js #TypeScript[[概要]]https://github.com/vitejs/viteフロントエンドビルドツール[[リンク]]
TanStack
TanStack Query
#React_Query #TanStack #React #Vue.js #Angular #Svelte #Solid.js[[パッケージ]][https://www.npmjs.com/package/@tanstack/react-query @tanstack/react-query] ([React Query])[https://www.npmjs.com/package/@tanstack/vue-query @tanstack/vue-query]
TanStack Router
#TanStack[https://speakerdeck.com/ytaisei/tanstack-routerdexing-an-quan-katuxiao-lu-de-naruteinguwoshi-xian TanStack Routerで型安全かつ効率的なルーティングを実現 - Speaker Deck]
Vite
Denoでフロントエンド(SPA)開発をする
#Deno #フロントエンド #書きかけ[** はじめに][Deno]+[Vite]+[Preact]を使用してフロントエンド開発のための環境をセットアップしてみます今回は[SSR]の利用はせず、SPAの開発を想定してセットアップしていきます※もし[SSR]が必要な場合は、[Fresh]や[Remix]あたりの使用を検討すると良いと思います
Fresh v2
#Fresh #Preact[** はじめに][fresh v2]向けに開発されていたコードが[fresh]の`main`ブランチにマージされています ([https://github.com/denoland/fresh/pull/2449 major: import Fresh 2.0 code (#2449)]) (2024/05/25)そろそろ[fresh v2]がリリースされる可能性がありそうなため、現時点で判明している変更点などについてまとめていきます
Rolldown
#Rust #Vite #Rollup[https://github.com/rolldown-rs/rolldown][https://github.com/rolldown-rs/rolldown_legacy][https://voidzero.dev/posts/announcing-rolldown-vite]
shadcn/ui
#Tailwind_CSS #Radix_UI #class-variance-authority #Next.js #Remix #Vite #Laravel #tsconfig.json[[関連ページ]][shadcn/uiとその類似ライブラリ/プロジェクトについて][[リンク]]https://github.com/shadcn/ui
VoidZero
#Vite #OXC #Rolldown #Vitest[https://voidzero.dev/posts/announcing-voidzero-inc][https://voidzero.dev/posts/voidzero-nuxtlabs-vite-devtools]
HonoX
#Hono #メタフレームワーク #Vite #Island_Architecture[[リンク]][https://github.com/honojs/honox][https://zenn.dev/yusukebe/articles/724940fa3f2450 HonoXについて][https://speakerdeck.com/yusukebe/honotohtmx Honoとhtmx - Speaker Deck]
Denoの使用事例
#Deno[** はじめに][Deno]や[Deno Deploy]が採用されているプロジェクトや[OSS]などについてまとめます[** Deno公式プロダクト][[[deno.land]]]
@deno/vite-plugin
#Deno #Vite[Deno]公式の[Vite]プラグイン[https://github.com/denoland/deno-vite-plugin][create-vite-extra]で採用されているようです ([https://github.com/bluwy/create-vite-extra/blob/8ae5c7449f6b329cbce9339834f6f6115d0110cf/template-deno-preact/deno.json#L14C6-L14C23 template-deno-preact/deno.json])
create-vite-extra
#Vite #Node.js #Deno #React #Preact #Solid.js[https://github.com/bluwy/create-vite-extra][[関連ページ]][Denoでフロントエンド(SPA)開発をする]
Tailwind CSS v4
#Tailwind_CSS #Vite #PostCSS[https://tailwindcss.com/blog/tailwindcss-v4][https://github.com/shadcn/app-tailwind-v4]
OneJS
#Tamagui #React #Vite #Hono #React_Native[https://github.com/onejs/one] - [/ ❶ One is a new [React] framework that makes cross-platform simple. Target web and native with just [Vite].][https://zenn.dev/trusthub/articles/989823d515fa55 Webとネイティブを融合させてRemixのようなデータ取得ができるフレームワーク”One”と、RSCの未来]
Rust製のフロントエンドエコシステム
#Rust #フロントエンド[** [Linter]/[Formatter]/バンドラー/パーサー][[[Biome]]][Rust]製の[linter]/[formatter]を提供してくれるツール[[[Deno]]]
Vitest
#Vite #testinghttps://github.com/vitest-dev/vitest[https://github.com/vitest-dev/vscode][https://github.com/vitest-dev/eslint-plugin-vitest]
Nuxt 3
#Nuxt.js #Vue.js #Vite #Vue_3[** 概要][https://github.com/nuxt/nuxt]後述する[Nitro]は様々な環境で動作させられるように実装されており、[Cloudflare Workers]や[Firebase](Cloud Functions+Hosting), [Deno Deploy]などの様々な環境へデプロイが可能[** [Nitro]]
Denoのユースケースについて考える
#Deno #書きかけ[** [Deno]が向いていそうな領域][[スクリプティング]][deno fmt]や[deno lsp]など、開発をする上で必要になるであろう機能があらかじめ組み込まれており、スクリプトを書く上でとても使い勝手が良い[npm]パッケージなどの外部ライブラリを事前インストール不要で利用できる ([npm install]や[package.json]がいらない)
vxrn
#React_Native #Vite #Tamagui[https://github.com/universal-future/vxrn] - [/ A collection of Vite packages enabling developing and building applications for React Native on web and native platforms (iOS and Android).]
Analog
#Angular #Vite #Nitro #メタフレームワーク[https://github.com/analogjs/analog] - [/ Analog is the meta-framework for building applications and websites with Angular.]
Farm
#Vite #Rusthttps://github.com/farm-fe/farm[https://medium.com/@1521488775/6x-faster-than-vite-10ms-hmr-farm-an-extremely-fast-web-build-tool-written-in-rust-90deccefbdcc 6x faster than Vite, 10ms HMR, Farm: An extremely fast web build tool wr
Hono v4
#Hono #メモ[[はじめに]][Hono v4]が2024/02/09にリリースされる予定のようです。 ([https://zenn.dev/yusukebe/articles/b20025ebda310a Honoのv4が2月9日にリリースされます])おもしろそうだったため内容をメモ[[SSG]]
Vite周辺のエコシステム
#Vite #フロントエンド[** テスト][[[Vitest]]][Jest]ライクなAPIを提供するテストフレームワークテストコードでも開発や本番用のビルドに使用する[Vite]の設定をそのまま流用できるなどのメリットがある
@fastify/vite
#Fastify #Vite[https://github.com/fastify/fastify-vite]
Fastify DX
#fastify #Vitehttps://github.com/fastify/fastify-dx現在は[@fastify/vite]にリネームされているようです。
SSR
Next.js
#SSR #React #Vercel[[パッケージ]][https://github.com/tatethurston/nextjs-routes] - [/ Type safe routing for Next.js][https://github.com/sainsburys-tech/next-logger next-logger][https://github.com/ryanto/next-s3-upload next-s3-upload]
DenoのWebアプリケーションフレームワークの比較
#Deno[** はじめに][Deno]におけるWebアプリケーションフレームワークについてまとめています[Denoのnpmパッケージサポート]により、[Node.js]製のフレームワークも[Deno]で動かせる場合があります ([Node.jsのWebアプリケーションフレームワーク])[** フレームワーク]
precompiled JSX transform
#Deno #Preact #Fresh #JSX #TypeScript #hono/jsx #JSX_transform[** [precompiled JSX transform]とは][Deno]では独自に`compilerOptions.jsx`で`precompile`というオプションをサポートしています。([https://uki00a.github.io/deno-weekly/articles/deno/v1.38 v1.38])
Fresh
#Deno #Deno_Deploy #Preact #Tailwind_CSS #Twind[** 概要][https://github.com/denoland/fresh Fresh]は[Deno]公式のWebフレームワークです。[Deno Deploy]で動作させることにより、エッジサーバ上での[SSR]などを提供します[Preact]コンポーネントの[SSR]や [Next.js]ライクなファイルシステムルーティングをサポートします
Fresh 入門
[** はじめに]Freshに関する概要などについては、[Fresh]を参照ください🙇♂️[** プロジェクトの初期化]`init.ts`を実行すると、プロジェクトが作成されます`$ deno run -A -r https://fresh.deno.dev <ディレクトリ名>`
Freshで静的サイトを作る
#Fresh #Deno[[はじめに]]本来、[Fresh]は主に[SSR]や[Island Architecture]などを活用して動的なサイトやサービスを開発することを想定したフレームワークです。ただ、少し工夫をすると、静的なWebページを作れるのではないかと思い、試してみました。最終的に作ったサイトについては[https://uki00a.github.io/awesome-fresh/ こちら]になります。([awesome-fresh])
SvelteKit
#Sveltehttps://kit.svelte.dev/[** ディレクトリ構成]`src/lib` - 共通のライブラリコードを配置するディレクトリで、ここに置いたモジュールは`$lib`経由で`import`可能`src/lib/server` - サーバでのみ利用したいコードを置くディレクトリで、`$lib/server`経由で`import`可能
DenoのSSR/SSGフレームワークAleph.jsについて
#Aleph.js[** [Aleph.js]とは?]https://github.com/postui/aleph.js[Aleph.js]は[Next.js]に影響を受けた[Deno]のフレームワークです[[特徴]]
Aleph.js
#Deno #React #SSR[[概要]]https://github.com/alephjs/aleph.js[Deno]で実装された[React]フレームワーク[Vue.js]などのフレームワークもサポートされています ([https://github.com/alephjs/aleph.js/tree/main/examples/vue-app examples/vue-app])
SolidStart
#Solid.js #SSR #SSG #Deno #Cloudflare_Workers #Netlifyhttps://github.com/solidjs/solid-start
nanossr
#SSR #Denohttps://github.com/AaronO/nanossr[Nano JSX]と[Twind]のラッパーライブラリ[WinterCG]の[https://github.com/wintercg/www Webサイト]で使われています[crux.land]で配信されてます
Created
8 months ago
by
uki00a
Updated
8 months ago
by
uki00a
Views: 8
Page rank: 4
Copy link
Copy readable link
Start presentation
Hide dots
TanStack Start
#TanStack
#Vinxi
#Vite
#SSR
-
Full-document
SSR
, Streaming, Server Functions, bundling and more, powered by TanStack Router,
Vinxi
, and
Vite
. Ready to deploy to your favorite hosting provider.