タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
preact コードリーディング
preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。 preact とは React の軽量版・サブセットです。 公式では Fast 3kB React alternative with the same modern API. Components & Virtual DOM. と説明されています。 (p)react には、 状態を持て、書き換えも可能である 状態を書き換えるとそれに対応して HTML が書き換わる という特徴があります。 それがどのようにして実現されているのかを見ていきましょう。 前提となる知識 preact のコードリーディングを進める上では VNode というオブジェクトに慣れる必要があります。 これは JSX を仮想 D
モダンフロントエンド = 宣言的 UI = 仮想 DOM ターゲット npm ツールチェインが使えない環境で、パフォーマンスを悪化させずにモダンフロントエンドをやりたい人 サードパーティスクリプトを提供する人 方向性 省ビルドサイズを目指す とくに外部から読み込まれる 3rd party script は、サイズ要求が厳しい lighthouse で 100 点の環境の点数を落とさないためには、おそらく 3rd は 20~30kb 未満を目指す必要がある 今後パフォーマンスが SEO に関わってくるので、このへんは重要 Google、ウェブサイトの UX 健全性を示す Web Vitals を導入。3 つの重要指標は LCP/FID/CLS | 海外 SEO 情報ブログ 実行時パフォーマンス要求 よほど複雑なアルゴリズムを実行するので無い限り、省ビルドサイズ制限を満たせば十分 モバイルで重
preact を読みやすいように色々削りました
Cloudflare Pages + Functions + Workers KV + vite + preactで簡単なページを作った
今回作ったページは下記。 https://haropuro-shuffle.pages.dev/ 元ネタ リポジトリ YuheiNakasaka/haropuro-shuffle 簡単なルーレットアプリ。ルーレットで出た結果をWorkers KVに保存。保存された文字を都度更新して表示(リアルタイムではない)。結果が1000件を超えるとクリアされる。 開発の流れ Workers KVの設定 vite + preactのアプリ開発 Cloudflare Pages/Functionsにデプロイ Workers KVの設定 Workers KVとは PagesやFunctionsから呼び出せるKey-Valuesストア。ここ見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。 設定方法 まずGUIからだとWorkersのページからnamespace(database
Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・！ まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか
Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能
Denoのフルスタックフレームワーク「Fresh 1.1」登場。プラグインシステム、Preact DevTools対応、404ページのレンダリングなど新機能 JavaScriptやTypeScriptのサーバサイドランタイム「Deno」を開発するDeno Land Inc.は、Deno用のフルスタックフレームワーク「Fresh」最新版となる「Fresh 1.1」をリリースしました。 Fresh v1.1 has been released with significant improvements: Automatic mode JSX Plugin system Preact DevTools integration New Tailwind plugin Preact Signals support ...and much more! Read the full release not
DeepLのデスクトップアプリをRustとPreactとTailwind CSSでつくった | うなすけとあれこれ
これはなに https://github.com/unasuke/deplore https://github.com/unasuke/deplore/releases/tag/v0.1.0 DeepLのAPI keyを使って翻訳を行う、DeepLが公式に提供しているデスクトップアプリのようなものの個人開発版です。 UI部分にPreactとTailwind CSS (Tailwind UI)、アプリケーションの土台やAPIとの通信部分にはRust (Tauri)を使っています。 名前は、DeepLのアプリなので、 ^d.*p.*l.*$ にマッチする英単語から適当に選んで “deplore” としました。 動機 英語は英語のまま理解できるのがもちろん一番いいのですが、長すぎる英文の概要だけでもサッとつかみたい場合などは機械翻訳は非常に役立ちます。 近年、機械翻訳ではDeepLの精度がとても
GitHub - natemoo-re/microsite: Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - nanostores/nanostores: A tiny (286 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
A tiny state manager for React, React Native, Preact, Vue, Svelte, Solid, Lit, Angular, and vanilla JS. It uses many atomic stores and direct manipulation. Small. Between 286 and 818 bytes (minified and brotlied). Zero dependencies. It uses Size Limit to control size. Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
viteでreact(or preact)+typescript(+tailwindcss)な開発環境を構築 | DevelopersIO
吉川@広島です。 最近viteが非常に快適でハマって（良い意味の方）おり、ReactとPreactの環境構築を試してみたので備忘録がてら紹介します。 Getting Started | Vite viteには npm init vite@latest my-vue-app -- --template vue のように自分で設定することなくscaffoldする機能があるのですが、今回はこれを使わずに構築する手順を共有したいと思います。 環境 node 15.11.0 yarn 1.22.10 npm 7.18.1 vite 2.4.4 プロジェクト作成 ディレクトリを作って入ります。 mkdir my-app cd my-app 必要パッケージのインストール react, react-dom (or preact) vite (+ @vitejs/plugin-react-refresh o
もちろんそのパッケージに含まれるすべての機能を利用する場合の数値であり、実際の利用時にはもう少し小さいはずですが、それでもその差は歴然です。 そのほかの違いですが、パッケージとしてのpreactは、reactとreact-domが備えるすべてのAPIをそっくりそのまま実装しているわけではありません。ここは少し冒頭のコピーが誤解を招くところかもしれません。 まとめるとPreactは「ブラウザ独自のAPIを利用しつつ、必要最小限のAPIを選びぬいた分だけ軽い、ブラウザ専用のReact」というわけです。 preact/compatという互換レイヤー PreactはAPIを厳選しているため、Reactをターゲットにして作られた周辺ライブラリは、Preactを利用したプロジェクトでそのまま使えないのも事実です。 また、Reactで作られた既存のアプリケーションをPreactで置き換えたいと思っても、
Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact
tl;dr: Preact X is the next major version of Preact fully packed with features like Fragments, Hooks, componentDidCatch, Test-Utils, Debug-Warnings, many compatibility fixes and so much more 🎉 It's finally happening! After months of hard work we've crossed the finish line and are over the moon with excitement to finally mark Preact X as stable. We'd like to thank everybody who tested it and submi
Introducing Signals – Preact
Introducing Signals Signals are a way of expressing state that ensure apps stay fast regardless of how complex they get. Signals are based on reactive principles and provide excellent developer ergonomics, with a unique implementation optimized for Virtual DOM. At its core, a signal is an object with a .value property that holds some value. Accessing a signal's value property from within a compone
Preactの環境構築 of 2020
所用で先週preactを初めて触っていたのですが、環境構築をしているときに「この情報ドキュメントにないよね？」「情報が間違ってそう？」っていうのを節々で感じた部分があって難航したので、これから環境構築する人がググった時の助けになるようメモを残しておきます。 とはいえ自分が preact 初心者で自分が間違っている可能性も大いにあるので、そういうのがありましたら指摘していただけると助かります。 React をある程度書いたことある人が preact に挑戦することを想定して書いています。 主に「React でやるときのあれは preact でどうするんだっけ」という情報です。 目指すゴール 環境構築のゴールが何かというと一つには Hello World があるとは思いますが、それよりかはもっと踏み込んでアプリケーションとして欲しくなる機能をとりあえず全部実装していこうと思います。 それが何か
ViteでPreactのTypescript環境を構築するNo bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。 はじめにVite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。 ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。 今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。 できあがったテンプレートはこちらにあります。 やることpreact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。 ツールを個別に導入できるよう、それぞれ順
Preact + Typescript + Parcel + Redux Zero: Rebuilding the QMENTA Front-End focusing on Performance and Minimalism.
Preact + Typescript + Parcel + Redux Zero: Rebuilding the QMENTA Front-End focusing on Performance and Minimalism. At QMENTA we have been rebuilding the front-end from scratch, seeking simplicity and performance not only in design, but also in the technology stack used for it . This article provides a comprehensive overview of the different parts that compound the new platform, such as how decorat
// Preact 8.x import Preact from "preact"; // Preact X import * as preact from "preact"; // Preferred: Named exports (works in 8.x and Preact X) import { h, Component } from "preact"; Preact 8.xから10.xへのマイグレーションガイドも公開されているので、合わせて見てください。 Upgrading from Preact 8.x | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM. ウェブサイト向けのLintツールであるwebhintのブラウザ拡張版がv1となりました。 Announc
GitHub - lucacasonato/dext.ts: The Preact Framework for Deno
To create a new project run dext create myproject. This will scaffold a new dext project in the myproject folder. This folder contains a few files: deps.ts contains all of your projects dependencies. pages/index.tsx is the source for the / of your project. pages/user/[name].tsx is the source for all routes at /user/[name] (e.g. /user/luca and /user/bartek). tsconfig.json is the TypeScript configur
Signal Boosting – Preact
Signal Boosting The new release of Preact Signals brings significant performance updates to the foundations of the reactive system. Read on to learn what kinds of tricks we employed to make this happen. We recently announced new versions of the Preact Signals packages: @preact/signals-core 1.2.0 for the shared core functionality @preact/signals 1.1.0 for the Preact bindings @preact/signals-react 1
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
What if…? Wednesday, 28th of July @ trivago
You are viewing the documentation for an older version of Preact. Switch to the current version. Differences to React Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is a thin layer over Preact that attempts to achieve 100% compatibility with React. The reason P
という気持ちが高まったので、とりえあず2020年末の情報として、書き残しておくことにした。 Preactとは preactjs.com いわゆるReactのジェネリックで、`react-dom`が圧縮しないと130KBくらいあるところ、なんと3KB！というもの。 Reactとの互換レイヤーである`preact/compat`を使っても、余裕でお釣りがくるというわけで、ぜひとも使いたい！となる。 なんでそんなに軽いのかも書いておくと、 `react-dom`がやってるイベントシステムを実装してない DOMネイティブのを使ってる コードゴルフがんばってる 読めばわかるけど、結構がんばってる VDOMの実装も最低限 というわけで、軽量さにフォーカスして書かれており好感が持てる。 基本的にはよい Hooksも使えるし、基本的にはなんの問題もなく、そのうえ軽くてよい。 `className`って書か
Preact を使って作ったコンポーネントを Web Components として誰でも使えるように実装してみます。 Preact とは Preact は軽量な alternative React です。 Fast 3kB alternative to React with the same modern API React よりも軽量ながら React と同じような API で UI を作成できます。 Web Components とは Web Components は、Web のアプリケーションの中で再利用可能でカプセル化された独自の HTML タグを作成するための Web プラットフォームの API です。 Web Components は以下の 3 つの主な技術からなっているもので、それらを組み合わせることで独自の HTML タグを作成できます。 カスタム要素 Shadow DOM
GitHub - scurker/preact-and-typescript: Some simple patterns for Typescript usage with Preact
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Use Preact in Next.js 13
Introduction Next.js uses React by default. In this blogpost, I want to replace React with Preact and compare the build differences. Preact is a JavaScript library, considered the lightweight 3kb alternative of React with the same modern API and ECMA Script support. Preact has the fastest Virtual DOM compared to other JavaScript frameworks. It is small in size. Tiny! It is designed to work in a br
Reactのサブセットライブラリとして、Preactというものがあります。より軽量なReactという位置付けで、ダウンロードするjsファイルのサイズが肥大しがちなSPAサイトにおいて、パフォーマンスを向上させるための有効な選択肢の一つとして捉えられているようです。 使い方などを勉強してみたので、メモ代わりとしてPreactプロジェクトの始め方、Reactとの違いなどについてまとめておきます。 Reactとのサイズ差 PreactはReactより軽量ということですが、具体的にどのくらい違うのでしょうか？公式ドキュメントには3kB!!と書かれています。それではReactのライブラリサイズは...？ということで、「BUNDLE PHOBIA」というサイトで調べてみると、 React: 6.4kB（minified）, 2.6kB(minified & gzipped) Preact: 9.5kB
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
省ビルドサイズ要求環境でモダンフロントエンドをやる (主に preact の話)
preactの仕組みを理解する軽量版教育用preactを作ってる話
PreactにSignalsがきた - console.lealog();
Preactで始める軽量コンポーネント指向開発 | 第1回 Preactの特徴
ViteでPreactのTypescript環境を構築する | miyauci.me
2019-10-09のJS: Preact X(10)、webhint browser extension v1、TypeScript 3.7β
PreactチームがWMRをリリース、最新のWebアプリ開発を簡単に
Preact 2021 - What if? @Trivago
Differences to React – Preact Version 8
Preactを使いたいのに使えない - console.lealog();
Preactで作ったコンポーネントをWeb Components として公開する
Preactの始め方&Reactとの違い - Qiita
ayaka5.vp.bex.jp
yeti3776.hatenablog.jp
jocr.jp
www.taishogoes.com
abolished-school.hatenablog.jp
www.yomiuri.co.jp