リミックスの最初の観察.ラン

30057 ワード

今日Remix Run サポータープレビューがついに起動.リミックスは、新しい反応フレームワークです.
リミックスに関して私を最も興奮させるものの1つは、それの後のチームです.そして、いくつかの反応コミュニティで最も知識のエンジニアであり、多くのものを構築しているReact Router , UNPKG and Reach UI ) 私が個人的に、AWSで無数の時間を使用して、私が相談したとき、顧客と働くとき.
私を興奮させるもう一つのことは、反応が最初にリリースされて以来、ここ数年にわたって起こったイノベーションであり、どのようにリミックスでそれらのアイデアに基づいて構築されています.
このクイックポストでは、リミックスがどのように機能するかを示します

新しいプロジェクトの作成

資格情報の設定

ルーティングの設定

動的ルーティングの追加

ダイナミックデータフェッチ

経路パラメータを用いた動的データ取得

グローバルリミックスの設定

You can also check out my video walkthrough of how Remix works

リミックス

価格
リミックスは無料ではありません.リミックスを使用するには、インディーズ(年間250ドル)または企業(年間1000ドル)ライセンスを購入する必要があります.これについて多くの意見があります.私は双方に良い議論があると思います.
私は個人的には、1時間のトレーニングのための250ドル以上の私は、私はチームからのサポートの全年のためのコンサルティングに入ってきたので、私はそれが簡単にアプリを構築するためにフレームワークを信頼することができます-私はそれが価値があると思う.次のようなフレームワークも見てください.無料で、それが価値がないと決めるJS.両方の意見は完全に有効なIMOです.
一日の終わりに私はちょうど高品質のアプリを構築することができるし、迅速かつ効率的に品質を損なうことなく、できるようにしたいと時間がお金を私はしばしば私はより速く、より私を作ることができるツールに投資する(特に私は私の既存のskillsetを活用することができます).

SSR
リミックスの背後にある全体のアイデアは、すべてがSSRです.また、次のようなAPIよりも低いレベルのAPIを持っています.JSは、リクエストオブジェクト全体を公開し、ページをレンダリングする前にヘッダーのようなものを変更することができます.私はまだそれのすべての機能を知らないが、一見して、私はそれに近い次の金属/より多くの設定可能なバージョンとして表示します.しかし、SSGなしで、私が正直にまだまだ調査されなかったネストしたルートへの若干の利益があります、しかし、それは面白い感じがします.

ルーティング
リミックスと他のフレームワーク(next . jsのような)の間のもう一つの大きな違いは、ルーティングがどのように機能するかです.入れ子にされたルートとparamsはリミックスでサポートされています.
を使うOutlet 反応ルータDOMから、あなたはAPIを使用するかなり簡単で入れ子状のルートの階層を構築することができます:

import React from "react";
import { Link, Outlet } from "react-router-dom";
import { useRouteData } from "@remix-run/react";

export default function Team() {
  let data = useRouteData();
  return (
    <div>
      <h2>Team</h2>
      <ul>
        {data.map((member) => (
          <li key={member.id}>
            <Link to={member.login}>{member.login}</Link>
          </li>
        ))}
      </ul>
      <hr />
      <Outlet />
    </div>
  );
}

を使用して移動するときLink , アウトレットは新しいルートをナビゲーションルートからレンダリングします.

HTTPキャッシング
リミックスは、あなたがちょうどルートのためにデータを返すだけでなく、キャッシュ制御ヘッダーを送ることを含む完全な応答を送るのを可能にするローダのこの考えを持っています.ローダーやルートのヘッダーを設定する簡単なAPIを持つことにより、簡単にブラウザ(およびCDN)のキャッシュ機能を内蔵の利点を取ることができます.
たとえば、あなたの応答にキャッシュヘッダーを設定する場合は、ユーザーが同じルートを訪問すると、それも';データを取得しない、それはキャッシュを使用します.そして、あなたがあなたのサーバーの前でCDNを置くならば、CDNがそれをキャッシュさせたので、サーバはめったに要求を取り扱いません

コード
説明のために、コードを見てみましょう.

プロジェクトの作成
リミックスライセンスのサブスクリプションを購入すると、ダッシュボードへのアクセスを与えられます.このダッシュボードでは、ライセンスの詳細、ドキュメント、および課金情報を表示することができます.

これは私が使用しているほとんどのフレームワークよりもはるかに異なった経験です.
このダッシュボードからは、クイックスタートチュートリアルを含む、行くために必要なすべてがあります.
開始するには、彼らはopen source starter project これはサーバとしてExpressを使用します.

$ git clone git@github.com:remix-run/starter-express.git my-remix-app

ボックスから、単一のコマンドを使用して配備するFireBaseをサポートします.

firebase deploy

将来、これらの異なるクラウドサービスプロバイダへの配備をサポートする予定です.

火の粉

ベセル

AWS増幅

建築家

紺碧

ネットリファイ

アクセスの制限
あなたはどのように彼らは有料のお客様へのアクセスを制限する疑問があります.彼らがこれをする方法は、最新版をインストールすることですnode-modules アプリを実行するために必要な、設定する必要があります.あなたの秘密鍵を含むようにこのように見えるNPMRCファイル

//npm.remix.run/:_authToken=your-unique-token

# This line tells npm where to find @remix-run packages.
@remix-run:registry=https://npm.remix.run

一旦これが構成されるならば、あなたはNPMまたは糸を使っている依存関係をインストールすることができます.

プロジェクト構造
ここでは、リミックス固有のプロジェクト構成を見てみましょう

remix-app  
└───app
│   │   App.tsx
│   │   entry-browser.tsx
│   │   entry-server.tsx
│   │   global.css
│   │   tsconfig.json
│   └───routes
│       │   index.js
│       │   404.js
│       │   500.js
│       │   index.css
└───config
│   │   shared-tsconfig.json
└───loaders
│    │   global.ts
│    │   tsconfig.json
│
└───public
│    │   favicon.ico
│    
└───.npmrc
│
└───remix.config.js
│
└───server.js

エントリポイントアプリです.TSX、以下のようになります.

import React from "react";
import { Meta, Scripts, Styles, Routes, useGlobalData } from "@remix-run/react";

export default function App() {
  let data = useGlobalData();

  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <Meta />
        <Styles />
      </head>
      <body>
        <Routes />
        <Scripts />
        <footer>
          <p>This page was rendered at {data.date.toLocaleString()}</p>
        </footer>
      </body>
    </html>
  );
}

おもしろいことが一つあります.

let data = useGlobalData();

ローダ/グローバルで.グローバルな値、変数(静的、動的)、またはあなたのベースレイアウトをレンダリングするためにサーバーから読み込む必要があるものを設定できます.たとえば、我々はここでアプリのバージョンを定義したいと私たちのアプリを通してそれを使用したいと言う、ここで定義することができます:

import type { DataLoader } from "@remix-run/core";

let loader: DataLoader = async () => {
  return {
    date: new Date(),
    version: "V2.0"
  };
};

export = loader;

それから以下のように使います:

let data = useGlobalData();
const version = data.version;

ルーティング

From the docs: Routes in remix can be defined two ways: conventionally inside of the "app/routes" folder or manually with remix.config.routes.

それで、私がルート/接触と呼ばれているファイルをつくるならば.JSは、それはで利用できるようになりますhttp://myapp/contact .
しかし、あなたはまた、リミックスでそれらを定義することができます言及.設定.js
リミックスのコードコメントから.設定.js

A hook for defining custom routes based on your own file
conventions. This is not required, but may be useful if
you have custom/advanced routing requirements.

以下の例を示します.

routes(defineRoutes) {
  return defineRoutes(route => {
    route(
      // The URL path for this route.
      "/pages/one",
      // The path to this route's component file, relative to `appDirectory`.
      "pages/one.tsx",
      // Options:
      {
        // The path to this route's data loader, relative to `loadersDirectory`.
        loader: "...",
        // The path to this route's styles file, relative to `appDirectory`.
        styles: "..."
      }
    );
  });
},

これを行うには、リミックスの意見をバイパスする必要がある場合は、カスタムルートの設定を定義することができます.

データ読み込み
リミックスについて最も興味深く、強力なものの一つは、それがどのようにロードデータです.
このアプローチは、動的データ取得を可能にするために、ルートとローダを結合する.

From the docs: Page data in Remix comes from files called "route data loaders". These loaders are only ever run server side so you can use whatever node modules you need to load data, including a direct connection to your database.

あなたがローダをルートと同じ名前にするならば、リミックスは自動的にそれをレンダリングの前にそれを呼んで、あなたのルートで利用できるそのデータを作ります.
これがどのように働くか見てみましょう.
ルート/ページでルート/ページを作成しましょう.このように見えるts :

// routes/people.ts
import React, { useState, useEffect } from "react";

export default function People() {
  return (
    <div>
      <h2>Star Wars Characters</h2>
      // todo, fetch & map over star wars characters from API
    </div>
  );
}

このルートがレンダリングされるとき、私は人々の配列のためにデータを取って、コンポーネントで利用可能にしたいです.
これを行うには、ローダ/ルートディレクトリの人々と呼ばれる新しいファイルを作成することができます.ts以下のコード

// loaders/routes/people.ts
module.exports = () => {
  return fetch(`https://swapi.dev/api/people/`);
};

これで、useRouteData リミックスからAPIへのアクセスを得る

// routes/people.ts
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { useRouteData } from "@remix-run/react";

export default function People() {
  const data = useRouteData()
  return (
    <div>
      <h2>Star Wars Characters</h2>
      {
        data.results.map((result, index) => (
          <div key={index}>
            <Link to={`/person/${index + 1}`}>
              <h1>{result.name}</h1>            
            </Link>
          </div>
        ))
      }
    </div>
  );
}

大きな問題
なぜ、我々はフェッチを待つ必要がありませんでした.リミックスがあなたのローダを待って、レスポンスに解決して、リミックスは正確にそのタイプのオブジェクトを予想しています.

From the docs: You might be scratching your head at that last bit. Why didn't we have to unwrap the fetch response with the usual await res.json()?

If you've been around the Node.js world for a while you'll recognize that there are many different versions of "request" and "response". The express API req, res is probably the most ubiquitous, but wherever you go it's always a little different.

When browsers shipped the Fetch API, they didn't just create a spec for window.fetch, but they also created a spec for what a fetch sends and returns, Request, Headers, and Response. You can read about these APIs on MDN.

Instead of coming up with our own API, we built Remix on top of the Web Fetch API.

キャッシュの追加
私がどのようにこのポストの開始で言及したキャッシュメカニズムを実装するかもしれないか見てみましょう.
次のアップデートを行うことができます.

const { json } = require("@remix-run/loader");
let res = await fetch(swapi);
let data = await res.json();
return json(data, { headers: { "cache-control": "max-age=3600"}})

次の時間のために、ブラウザは再びそのリソースを要求しません、そして、次の訪問者のために、CDNはどちらもしません.

動的ルートとルートパームとデータフェッチの結合
どのように、これはダイナミックなルートのために働きますか?たとえば、私は/人/人の人のIDのようなルートにドリルダウンしてデータを取得する場合はどうですか?
ここでどのように動作します.私たちは2つの新しいファイルを必要とします.
まず、ローダ/person/id . jsにローダを作ります.

// loaders/person/$id.js
module.exports = ({ params }) => {
  return fetch(`https://swapi.dev/api/people/${params.id}`)
};

次にルート/person/$ id . jsのようなルートを作成します.リミックスはURL(person/$ idの$ id部分)からparamsを解析して、それらをローダに渡します.

// routes/person/$id.js
import React from "react";
import { useRouteData } from "@remix-run/react";

export default function Person() {
  const user = useRouteData()
  return (
    <div>
      <h2>{user.name}</h2>
      <h3>Homeworld - { user.homeworld }</h3>
      <p>Height - {user.height}</p>
    </div>
  );
}

APIから取得されたデータが利用可能になりましたuseRouteData .

アップとリミックスを実行します.ビデオを見る

結論
全体的に私は本当にリミックスを使用して楽しんでいます.それは我々が長年にわたって現代とレガシーWeb技術の両方で見た進歩に基づいて構築されたハイブリッド反応Webアプリケーションを構築する全く新しいアプローチです.
私は、リミックスが時間とともによりよくなっているのを見ると思っています、しかし、それがossでないと考えて、どれくらい速く、または、それが速くなるのを確信していません.
私は新しい支払いモデルを試みるためにライアンとマイケルを賞賛して、それがどのようにわかるかについて楽しみにします.OSSの収益化の挑戦はまだ完全には解決されていないので、そうすることにおけるどんな新しいアプローチも、彼らのオープンソースの仕事を将来的に、そして将来的に有益にしたいと考えている誰のための基盤も置いた.
また、私の記事を少しリミックスと次の違いに行くをチェックしてください.js

How is Remix different from Next.js

Nader Dabit ・ Oct 29 '20 ・ 2 min read

#discuss #jamstack #react #webdev

Reference

この問題について(リミックスの最初の観察.ラン), 我々は、より多くの情報をここで見つけました https://dev.to/dabit3/a-first-look-at-remix-run-449a

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Android 10 BLE Bluetooth 4.0デバイスをスキャンできません

Androidにおけるユーザジェスチャー検出の詳細(OnCliskListener、OnTouchListener、GestureDetecter)