Hoodieの紹介：フロントエンド開発者向けのフルスタック開発

公開: 2022-03-11

パーカーについてまだ聞いたことがない場合は、チェックしてください。

Hoodieは、フロントエンド開発者によるフルスタック開発に最適なツールです。

Hoodieは、フロントエンド開発者向けの進歩的な新しいライブラリであり、アプリ開発とユーザーエクスペリエンスの両方を変革する可能性のあるいくつかの注目すべき新しい哲学を採用しています。 Hoodieは、フルスタック、フロントエンドアプリの開発を完全にフロントエンド開発者とユーザーエクスペリエンスの達人の手に委ね、バックエンドの対応者の不可解な技術的異議から解放します。 さらに、Hoodieアプリは、ユーザーが途切れることのない接続の束縛から解放され、外出先、空中、海中などで気にせずにアプリを使用できるようにします。

プラットフォームはまだ揺籃期にありますが、ゲームを先取りしたいフロントエンド開発者にとって試してみる価値のある強力な新しいツールをすでに提供しています。 Hoodieの背後にあるチームは、CouchDB、Async、Mustache.jsなど、他の非常に成功したプロジェクトに取り組んできた実績があります。

Hoodieフルスタック開発ライブラリの作業内容を学び、プロジェクトに非常に興奮した後、自分で試してみることにしました。 Hoodieについてもう少しお話しし、優れたアプリを開発するためにHoodieが持つ可能性のいくつかをお見せしましょう。

パーカーとは何ですか？

まず第一に、パーカーとは何ですか？ 何がそんなに素晴らしいのですか？ Hoodieは、オープンソースの完全なJavaScriptプラットフォームおよびAPIであり、いくつかの強力な新しいパラダイムを1つのフルスタック開発パッケージに組み合わせて、Hoodieアプリを構築する開発者とそれらを操作するエンドユーザーの両方の利益になります。 これらの概念の中で最も重要なのは、「noBackend」と「Offline First」の動きと、APIを構築するための「Dreamcode」と呼ばれる強力なコミュニティ主導のプロセスです。

noBackend

Hoodieは、優れたフロントエンドアプリ開発の鍵は、アプリの見栄えを良くし、楽しく使用する方法を知っているが、バックエンドの技術によって制限されることが多すぎるユーザーエクスペリエンスの専門家や開発者の手にあると考えています。彼らがコントロールできないこと。 ユーザーのサインアップ/サインイン、データストレージ、メールディスパッチなど、これまでずっと続いてきた基本的なサーバーインタラクションでは、新しいアプリごとに時間のかかるカスタム実装が引き続き必要であり、フロントエンド開発者は新しいバックの学習とコーディングを余儀なくされます。毎回癖を終わらせる。

noBackendは、バックエンド開発者が必要ないことを意味します。

Hoodieは、バックエンドを完全に抽象化することにより、コントロールをフロントエンドの設計者と開発者の手に戻します。 Hoodieフロントエンドアプリの開発では、サーバー側を気にする代わりに、Hoodieに組み込まれているシンプルで習得と実装が簡単なフロントエンドAPIだけを気にする必要があります。 たとえば、新しいユーザーを登録したいですか？ これは、1行のコードで実行できます。

 hoodie.account.signUp(username, password);

これは、Hoodieが完全に取り組んでいるnoBackendイニシアチブの背後にある考え方です。 noBackendは、バックエンド開発者が必要ないことを意味します。 Hoodieバックエンドをサーバーにデプロイするだけで、忘れてしまいます。

パーカーは完全にJavaScriptで書かれています。 その自己完結型のバックエンドは、データベースとしてApacheCouchDBを備えたNode.JSを使用します。 この記事を書いている時点で、Hoodieがすでに実装しているコア機能には、ユーザーのサインアップと管理、データの読み込み、保存、メールなどがあります。 これらのコア機能は、Node.jsプラグインを追加することで簡単に拡張できます。

ドリームコード

Hoodieは何よりもまずAPIです-これがnoBackendを可能にするものです。 Hoodieの実装は時間の経過とともに変更および改善される可能性がありますが、開発者に提供されるインターフェースは同じままであるため、心配する必要はありません。

パーカーはまだ急速に成長しており、新しい機能が常に追加されています。 Hoodieは、他のnoBackendプロジェクトと同様に、コミュニティ主導のアプローチを使用して、Dreamcodeと呼ばれるAPIを設計します。 基本的に、あなたは自分が書きたいコードを夢見て、それがコミュニティから十分なサポートを得れば、Hoodieはそれを実現します。

このAPIファーストのクラウドソーシングによるHoodieAPIの設計アプローチは、Hoodieコードが簡単に記述でき、簡単に読み取れることを意味します。 それはあなたの夢のコードです！

オフラインファースト

Hoodieは、noBackend、Dreamcode駆動型APIを使用して、フロントエンドアプリ開発者の多くの問題を解決します。 しかし、Hoodieの主な目標の1つは、ユーザーにとっても大きな問題を解決することです。ユーザーは接続性に依存していることがよくあります。

モバイルアプリを備えたモバイルデバイスへの移行が進むにつれて、継続的な接続の古いデスクトップベースの仮定は変更されていません。 この間ずっと、どこへ行ってもインターネットがそこにあるという約束がありました。 今日まで、接続の喪失は異常として扱われ、ユーザーがオンラインに戻るまで何かを実行する能力をシャットダウンします。 しかし、ご存知のとおり、通信ネットワークはこの約束を果たすことができませんでした。 接続性は、飛行機、地下鉄、田舎道、およびその他の無数の状況で窓の外に出ます。 そして、それは世界の先進地域にあります！ 地球の広大な地域では、安定したインターネットアクセスはこの規則のまれな例外です。

オフラインファースト運動は、この単純な人生の事実との優雅な調和を求めています。 オフラインファーストでは、非接続性はアプリケーションのもう1つの通常の状態です。 実際、これがデフォルトの状態です。 パーカーは熱心にこの哲学を採用しています。 APIの背後には、一時的なローカルストレージの完全なフロントエンド実装と、接続が利用可能になるたびに自動的に適切に同期される機能があります。

Hoodieを使用したフロントエンドアプリ開発とは、ユーザーが接続に依存する必要がないオフラインファーストモデルを意味します。

Hoodieを使用すると、接続を気にすることなく、コメントの投稿、メールの送信、アカウントの編集など、日常のほとんどのアクティビティを実行できます。 データを失うことを恐れることなく、ストレージと同期システム全体をいつでも中断できます。

もちろん、このモデルには独自の設計上の課題とアプローチのセットが付属していますが、Hoodieのチームはこれらの課題を解決するための技術を開拓しています。

オフラインファーストは、採用の初期段階にあるアプリ開発のエキサイティングな新しい見方です。 必要な技術を開発するためにやるべきことはまだたくさんあります。 パーカーがどのようにそれを行うかを見るには、ここを見てください。

パーカーを使ったシンプルなアプリ

フロントエンド開発ツールとしてのHoodieの使用法を示すために、コミュニティメンバーが独自のイベントを作成し、他のエンジニアが閲覧してスケジュールに追加できるように公開できるシンプルなアプリを作成することにしました。 ここでの目標は、Hoodieをデモンストレーションすることであり、本番環境に対応したアプリを提供することではないことに注意してください。 コードは私のGitHubページにあります。

Hoodieは基本的に、NodeJSに組み込まれているサーバー側とクライアント側のJavaScriptライブラリを組み合わせたものです。 単純なインストールと展開のプロセスに加えて、アプリで作業する開発者はクライアント側のコードでのみ作業します。 組み込みライブラリは、開発者がそれがどのように機能するかについて何も知らなくても、サーバー側と通信できます。

アプリでサーバー上でカスタム処理を行う必要がある場合はどうなりますか？ いつでもHoodieプラグインを作成できます。 プラグインに関する詳細情報は次のとおりです。

パーカーアプリを始める

Hoodieアプリのフルスタック開発の最初のステップは、Hoodieコマンドラインツールを使用して私たちを軌道に乗せることです。

 hoodie new toptalCommunity

これにより、すでにいくつかのコードが配置されている初期化されたHoodieアプリが作成され、アプリを実行できるようになります。 入力すると

cd toptalCommunity hoodie start

ブラウザは、Hoodieチームのサンプルアプリで開きます。

これは、Hoodieが提供するフロントエンドアプリのサンプルです。

この時点で少しハウスキーピングを行いました。 現在、HoodieアプリにはBootstrapとPrismが付属していますが、提供されているバージョンを削除しました。 Prismは必要なく、自分のバージョンのBootstrapを使用したかったので、使用したいフォントとJSを使用できました。 また、アプリを作成するときにmain.cssにいくつかの変更を加えて、独自のスタイルを設定し、単純なブートストラップテンプレートを使用できるようにしました。 DOMの操作とイベントにはjQueryのみを使用しました。 パーカーは他のすべての面倒を見る。

パーカーとドリームコード

このサンプルアプリの作成に取り組んでいると、Hoodieを使用することのすべての利点にすぐに気付きました。 プロジェクトを開始するときに答える必要のある通常の質問の多くは、そこにありませんでした。 Hoodieを使用すると、コードを記述して、アプリがライブで動作していることを確認できました。

ユーザーアカウント管理にはどのような戦略を使用する必要がありますか？ パーカーアカウントプラグインがその答えです。 データをバックエンドにどのように保存する必要がありますか？ Hoodieの非常にシンプルなストレージAPIがそれを処理し、OfflineFirst機能を無料で提供します。 このHoodieアプリをオフラインで動作させるための作業は必要ありませんでしたが、動作するだけです。

いくつかの実装についてもう少し深く掘り下げてみましょう。

ユーザーアカウント管理

Hoodieには、 hoodie-plugin-usersと呼ばれるアカウント管理を行うプラグインがあります。 APIはこれ以上ないほどシンプルです。

新しいユーザーを追加するにはどうすればよいですか？

 function signUp() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signUp(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

ユーザーをログインするにはどうすればよいですか？

 function signIn() { var email = $('#txtEmail').val(); var password = $('#txtPassword').val(); hoodie.account.signIn(email, password) .fail(function(err){ console.log('Log error...let the user know it failed'); }); }

ユーザーがログインしていますか？

 if(hoodie.account.username) { // modify the page accordingly setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); }

これは本当に簡単なことではありません。 ちょっと待ってください。UIはそのすべてにどのように反応しますか？ パーカーはあなたのためにイベントを用意しています

ユーザーがサインインしたときに反応します。

 hoodie.account.on('signin', function (user) { showMyEvents(); setUsername(); $('#lnkSignUp').hide(); $('#lnkSignIn').hide(); });

データストレージ

サンプルアプリでは、ユーザーが独自のイベント（プライベートデータ）を作成し、必要に応じて公開（データを公開）して、他のユーザーがイベントに参加できるようにします。

Hoodieを使用すると、ログインせずにローカルストアにデータを追加できます。では、このデータがどのユーザーに属しているかをどのようにして知ることができますか？ それはローカルに保持され、そのユーザーがサインインするまでサーバーと同期しません。Hoodieは、そのユーザーだけがそのデータにアクセスできることも確認します。

それで、これがどのように機能するかです：

 hoodie.account.signIn(email, password); //Let's sign in hoodie.store.add('myevent',event); //Store the data, hoodie takes care of using the session to make sure this data belongs to our user

とても簡単です！ さて、それは私たちがイベントを作成するのに役立つでしょう、それを他の人とどのように共有しますか？ これは、 global share pluginが私たちを助ける場所です。 デフォルトのプラグインではないため、インストールする必要があります。

 hoodie install global-share

これでプラグインが配置されました。それを使用しましょう。 ユーザーストアにすでに追加したデータをグローバルストアに公開する必要があります。

 hoodie.store.findAll('event').publish();

これにより、このユーザー用に保存されたすべてのイベントにパブリックのフラグが付けられ、グローバルストアにクエリを実行すると、そのデータが結果として取得されます。

 hoodie.global.findAll('event'); //This is read-only

[マイイベント]ページで、ユーザーはグローバルストアに直接公開されるイベントを作成できます。

 var event = {}; event.name = $('#txtName').val(); event.date = $('#txtDate').val(); event.time = $('#txtTime').val(); hoodie.store.add('event',event).publish();

Hoodieのフロントエンド開発ツールにより、クリーンな「イベントの作成」構成が実現します。

公開されたイベントはすべてのユーザーに表示されるため、すべてのユーザーが[イベント]ページで作成されたイベントを表示できるようになりました。

Hoodieは、Toptalイベントカレンダーのクリーンで効率的なフルスタック開発プロセスを作成します。

では、公開してはならないデータについてはどうでしょうか。 ユーザーが適用したイベントを保存し、[イベント]ページに表示します。 ユーザーが適用ボタンをクリックすると、これが実行されます。

 var id = $(this).parent().parent().data('id'); hoodie.global.find('event',id) .done(function(event){ hoodie.store.add('myevent',event); });

以下の2つのスクリーンショットは、同時に実行されている2つのブラウザウィンドウを示しています。 最初のブラウザでは、ユーザーはAイベントに申し込んだユーザーa@aaとしてログインしています。 2番目の例では、ユーザーb @ bbがログインし、 Bイベントに申請しました。

私のHoodieアプリのこのスクリーンショットは、1人のユーザーがログインしていることを示しています。

このスクリーンショットは、私のサンプルアプリにログインしている別のサンプルユーザーを示しています。

ロングポーリング

Hoodieが提供するいくつかのイベントをサブスクライブすることで、ロングポーリングなどの手法を透過的に使用できます。これにより、さまざまなユーザーが使用して共同作業を行うときに、アプリケーションに興味深い機能が提供されます。

これは本当に簡単です。 サンプルアプリでは、1行でトリックが実行されました。

 hoodie.global.on('add:event', loadEvent);

この単純な行は、サーバーを長時間ポーリングして、他のユーザーによって追加された可能性のある新しいイベントをチェックし、それらを[マイイベント]ページに追加します。

いくつかの懸念

Hoodieとそのフロントエンドアプリ開発機能で遊ぶためにこのサンプルアプリを作成した後、私はそれが提供するものに非常に興奮しています。 しかし、いくつかの明確な問題が私には際立っていました。

Hoodieを使用すると、開発者はサーバーとの通信が非常に簡単になるため、開発者はコンソールを使用するだけでデータベースにデータを追加できます。これは、明らかにセキュリティとデータの整合性に大きな影響を及ぼします。

また、ライブラリには、データ検証、リンク可能なURL、テストフレームワーク、データのプライベート共有など、本番アプリで必要となる多くの重要な機能がまだありません（ただし、この最後のアプリではすでに順調に進んでいます）。 現在、Hoodieを本番環境で使用するには、AngularJS、Emberなどの別のソリューション、またはフロントエンドプロジェクト用に適切に構造化され保守可能なJavaScriptコードを確保するのに役立つ他の多くのソリューションと組み合わせる必要があります。 これらのフレームワーク自体が最近のバックエンドテクノロジーの複雑さに近づいているため、このソリューションはHoodieの目的を大きく損なうことになります。

パーカーの未来

パーカーは、これらすべての問題を解決するために、まだ大規模な開発を行っています。 チームは、プラットフォームを大量消費できるようにするために、新しい機能の実装と既存の機能の改善に懸命に取り組んでいます。もちろん、このプロセスには時間がかかります。 今すぐ新しい本格的なアプリを計画している場合は、この時期にそれを構築するための別のプラットフォームを見つけることをお勧めします。

ただし、それまでの間、Hoodieを使用したフロントエンドアプリの開発をいじくりまわすのは時期尚早ではありません。 パーカーにはすでに強力な新しいアイデアがたくさん組み込まれており、非常に人気が出ると思います。 これらのことでゲームを先取りすることは、おそらく悪い考えではありません。

Hoodieのチームが懸命に仕事を続けているのであれば、APIはすぐにプライムタイムの準備ができているはずです。 Hoodieチームの進捗状況を追跡したい場合は、マイルストーントラッカーをご覧ください。

Hoodieは、引っ越し業者やシェーカー向けの優れたアプリの開発を簡単にすることを約束します。 Hoodieが具体化するアイデアが定着した場合、新しいプロジェクトごとにバックエンド開発者のチームの必要性が過去のものになる可能性があります。 このようなプロジェクトでは、それほど遠くない将来のフロントエンド開発者にとって黄金時代を想像するのは簡単です。 同様に、Offline Firstの理想によって提供されるユーザーへのメリットは、アクセシビリティの大きな一歩であり、モバイルで接続されたライフスタイルの範囲をインターネット自体が行き渡らない場所にまで拡大します。

Hoodieに向かい、Hoodieの進歩を追跡し、Hoodieが先導する準備をしているエキサイティングな新しい変更の一部になります。

パーカーチームに感謝します。 Hoodieオープンソースプロジェクトの許可を得て使用されているHoodieロゴ