POSTD PRODUCED BY NIJIBOX

POSTD PRODUCED BY NIJIBOX

ニジボックスが運営する
エンジニアに向けた
キュレーションメディア

Miško Hevery

本記事は、原著者の許諾のもとに翻訳・掲載しております。

コードを書いて新たな発見をするほど楽しいことはありません。 ついにnpm init qwikの登場です。 どんなサイズでもリーンで高パフォーマンスなWebアプリを開発するための新たな方法をお試しください。 builder.ioのサイトも同じ技術で開発されており、PageSpeed Insightsで100点中100点を獲得しています。

QwikスターターCLIは、Qwikを試しに直接体験してみて、他のフレームワークとの違いを深く理解するためのシンプルなスターターです。 このCLIに含まれている例は次の4つで、近い将来に拡張される予定です。

  • starter:基本的なHello Worldプログラム。
  • starter-builder:基本的なHello Worldプログラムをbuilder.ioのQwik APIと統合したもの。
  • starter-partytown:基本的なHello Worldプログラム。Partytownを利用して、Web Workerで重いタスクを実行できることを明らかにします。
  • todo:古典的なTodoMVCアプリケーション。

基本的なスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-starter
✔ Select a starter › Starter
✔ Select a server › Express

⭐️ Success! Project saved in qwik-starter directory

📟 Next steps:
   cd qwik-starter
   npm install
   npm start

> (cd qwik-starter; npm install; npm start)

StackBlitzで試す

Builder Qwik APIを利用するスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-builder
✔ Select a starter › Starter Builder
✔ Select a server › Express

⭐️ Success! Project saved in qwik-builder directory

📟 Next steps:
   cd qwik-builder
   npm install
   npm start

> (cd qwik-builder; npm install; npm start)

StackBlitzで試す

Partytownを利用するスターター

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-partytown
✔ Select a starter › Starter Partytown
✔ Select a server › Express

⭐️ Success! Project saved in qwik-partytown directory

📟 Next steps:
   cd qwik-partytown
   npm install
   npm start

> (cd qwik-partytown; npm install; npm start) 

古典的なTodoMVC

> npm init qwik
💫 Let's create a Qwik project 💫

✔ Project name … qwik-todo
✔ Select a starter › Todo
✔ Select a server › Express

⭐️ Success! Project saved in qwik-todo directory

📟 Next steps:
   cd qwik-todo
   npm install
   npm start

> (cd qwik-todo; npm install; npm start)

StackBlitzで試す

プロファイラで解析

開発ツールを開き、上記の例をすべてプロファイラで解析してみてください。 メインスレッドでほとんど時間がかかっていないのが分かるでしょう。

皆さんのコーディングが楽しくなることを願っています。ぜひフィードバックをお寄せください。

シリーズ記事一覧

info

シリーズ記事一覧はこちらから参照できます。