この投稿では、フロントエンド開発の世界からの2つの新しいツールを見ていきます。 どちらもシンプルさと使いやすさを考慮して設計されています。 最初のツールは非常に小さなフロントエンドHyperappフレームワークであり、2番目のツールはParcel bundlerです。 これらを合わせて、2018年初頭に軽量アプリを作成するための最良の選択肢になる可能性があります。
私は通常、React＆Webpackを使用してインタラクティブなWebアプリケーションを開発しています。 しかし、多くの場合、このスタックを使用して新しいプロジェクトをブートストラップすると、時間がかかりすぎてかさばります。 検索と価格の表示を備えたシンプルで大きなものではないインタラクティブなウィジェットが必要な場合にReactを使用すると、やり過ぎに見えます。
ハイパーアプリ
Hyperappの主な機能はそのサイズで、わずか1kbです。 React＆Reduxユーザーは自宅にいるように感じます。Hyperappと非常によく似ています。
HyperappはReact Rickの小さなバージョンのように見えます
Hyperappは、仮想DOMシステムを使用してDOM更新を計算します。また、HTMLを介したコンポーネントおよび要素の同様の抽象化を追求し、JSXの使用を可能にします。 主な違いは、コンポーネントに状態がないことです。アプリケーション全体のグローバル状態は1つだけであり、すべてのコンポーネントはステートレスとして表示されます。
Hyperappの状態管理は、かつてReduxに影響を与えたElmアプローチに影響を受けています。
不変の状態と新しい状態を返すアクションの概念は、Reduxで使用されるものと非常に似ています。 ただし、Hyperappにはレデューサーはなく、引数を取り、新しい状態を返すアクションのみがあります（Promiseを返す非同期アクションも存在します）。
小包
パーセルは、新しい種類のフロントエンドバンドラーであり、一種のより高速で事前構成されたWebパックです。 私はwebpackのファンですが、他の人と同じように、webpackの構成はかなり面倒であることに気付くことができます。
すぐに使える小包は、HOC（ホットモジュール交換）とコード分割を提供します。 驚いたことに、.sassファイルをインポートした後、パーセルサーバーメイドを起動した後、自動的にnode-sassをインストールし、CSSファイルを組み立てました！ 区画が非現実的に高速であることも注目に値します。
それでは、これら2つのツールをどのように使用すればよいのでしょうか？
Hyperapp＆Parcelを使用してアプリケーションを作成します。非常にシンプルで、Github APIを使用して基本的なユーザー情報を表示します。
ターンキーソリューションへのリンク新しいディレクトリを作成し、必要な依存関係をインストールすることから始めましょう。
mkdir hyperparcel && cd $_ && npm init -y && npm i hyperapp parcel-bundler babel-plugin-transform-react-jsx babel-preset-env
興味のある主要ツールに加えて、古い環境のコードをトレースするためのbabelプリセットをインストールしました。
$ _は「最後のコマンド引数」を意味します
次に、index.htmlおよびindex.jsファイルを追加しましょう。
index.html
<html> <body> <script src="./index.js"></script> </body> </html>
index.js
console.log('hello parcel')
また、サーバーdevを起動するスクリプトを追加し、package.jsonにスクリプトをビルドしましょう。
... "start": "parcel index.html", "build": "parcel build index.html
devサーバーを起動$ npm start at localhost：1234ブラウザーでページが利用可能になり、コンソールでindex.jsからconsole.logの結果を確認できます。
わかりました、今Hyperappアプリ。 簡単にするために、ES6とJSXを使用します-babelコンパイラを使用します。 幸いなことに、デフォルトではParcelにあり、envプリセットを指定し、HyperappでJSXをコンパイルするだけです。 （React.createElementの代わりに、h関数を呼び出す必要があります）。
プロジェクトルートに.babelrcファイルを作成します。
{ "presets": ["env"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] }
この時点で、環境のセットアップが完了し、アプリケーションの作成を開始できます。 簡単なHyperappビューから始めましょう。
import { h, app } from 'hyperapp' const view = () => <div> hello hyperapp </div> app({}, {}, view, document.body)
Parelはホットリロードを使用するため、すぐに結果が表示されます。
コードは非常にシンプルで、Hyperappの詳細な知識は必要ありません。
Hyperappから必要なものをインポートし、コンテンツの表示を担当するビュー関数を作成し、アプリ関数を使用してこれらすべてをページの本文にレンダリングします。
それでは、Githubユーザー情報フードを取得しましょう。 まず、ユーザー入力とAPIから受け取ったデータを保存するために、何らかの状態が必要です。 （冒頭で述べたように、Hyperappのコンポーネントには独自のサイトがありません）。
const state = { username: '', userData: null, }
この状態を変更する方法も必要です。 Hyperappの状態の変更は、ElmおよびReduxで行われる方法に似ており、アクションで状態を受け入れて新しい状態を返す関数として表示されます。
const nameChangeAction = (name) => (state, actions) => ({...state, name})
この場合、アクションは次のようになります。
const actions = { updateUsername: (username) => (state, actions) => { getUserData(username).then(actions.setUserData) return { username } }, setUserData: userData => state => ({ userData }) }
ご覧のとおり、updateUsernameは非同期であり、異なるアクションを使用して状態を変更します。
もちろん、getUserData関数が必要です。 Github APIを使用して、ユーザーがニックネームを入力したGithubアカウントに関する情報を取得します。
各キャラクターでAPIをプルしないように、デバウンスを使用します。
npm i debounce-promise babel-preset-es2015
const getUserDataFn = username => { return fetch(`https://api.github.com/users/${username}`) .then(res => res.json()) } const getUserData = debounce(getUserDataFn, 700)
スタイルファイルを作成します（
ここで取得できます ）。.sassとindex.jsでそれを台無しにします。
ビューも更新します。
const view = (state, actions) => <main> <div>Search github users:</div> <input type='text' className='searchInput' value={state.username} oninput={e => actions.updateUsername(e.target.value)} /> <br/> <div className='userCard'> {state.userData ? ( <div> <img class='userCard__img' src={state.userData.avatar_url} /> <div class='userCard__name'>{state.userData.name}</div> <div class='userCard__location'>{state.userData.location}</div> </div> ) : ( <div> search 'em</div> )} </div> </main> app(state, actions, view, document.body)
以上です！ 小さなアプリケーションの準備ができました。
結論として
HyperappとParcelは、開発者ツールの進化の良い例です。 リッチなインタラクティブインターフェイスを備えたフロントエンドアプリケーションを作成するための多くのアイデアとアプローチがあります。 それらのいくつかは、新しい現実とニーズにすぐに適応し、それらのいくつかは、Javascript開発のこの素晴らしい世界に取り残されます。 React＆Reduxは開発者の間で非常に人気のある選択肢であり、その主要機能はHyperappで使用されています。 次に、Webpackはバンドラーの世界に影響を与え、Parcelが関心を持ち、将来的には主導的地位を獲得する可能性があることを知っている新しい基準を設定しました。 進化は、同じツールセットを使用してすべての新しい問題を解決しようとするべきではない理由でもあります。