Ruby
 Computer >> コンピューター >  >> プログラミング >> Ruby

JavaScript イベントを使用して React.js を StimulusJS とシームレスに統合する

最近、AppSignal に「はじめに」ページを追加しました。このページには、新規ユーザーに AppSignal エクスペリエンスを最大限に活用するための推奨手順が満載されたページが表示されます。

AppSignal を使い始める際にサポートを受けることを楽しむユーザーもいますが、単独で製品を探索することを好むユーザーや、すでに AppSignal の経験があるユーザーもいます。

すべてのユーザーにガイド付きエクスペリエンスまたはソロ エクスペリエンスのオプションを提供するために、「はじめに」ページの表示と非表示を切り替えるトグルを設計しました。

挑戦

ユーザーが個人設定メニューから「はじめに」ページを切り替える機能を提供することは、予想よりも少し困難でした。これは、「はじめに」ページが React.js で構築されており、個人設定メニューが React アプリの外部でレンダリングされる Rails 生成のテンプレートであるためです。

私たちは、理想的には現在の状態をサーバーにポーリングせずに、Rails で生成されたメニューと React メニューのトグル状態を同期する方法を見つける必要がありました。

解決策

React 以外のインタラクションでは、AppSignal は「Rails 方式」で StimulusJS を使用します。 、アプリケーション全体に JavaScript のインタラクティブな喜びを散りばめます。

StimulusJS バニラ JS を選択したのは、標準化された構造が十分に文書化されており、JavaScript の経験がある Rails 開発者なら誰でも簡単に採用できるためです。

React.js と StimulusJS の同期を保つために、ドキュメント本文にディスパッチされるカスタム イベントを作成しました。 hide_getting_started に接続してリッスンするように React と StimulusJS のセットアップを構成しました。 イベント。

StimulusJS 内

StimulusJS コントローラーが接続すると、ドキュメント上のイベントをリッスンします。 JavaScript を整理整頓した状態に保つために、切断時にイベント リスナーを削除します。

 
React.js 内
 

 React.js でも StimulusJS で行うのと同じことを行います。 React.js コードはドキュメント上のイベントをリッスンし、切断時にイベント リスナーを削除します。
 
 
オンに切り替え、オフに切り替え
 

 この設定を使用すると、独立した React.js 実装と StimulusJS 実装の両方からカスタム イベントを発行できるため、相互に対話し、常に正しい状態を反映できるようになります。
 
 

 JavaScript の優れた点は、さまざまなフレームワークを使用する今回のようなシナリオでも、イベントを利用して React.js または StimulusJS のコンポーネントやコントローラーの外部での変更を処理できることです。
 

 このシンプルで簡単なソリューションにより、DOM を変更したり、バックエンドとフロントエンドの間でリクエストをやり取りするより複雑なソリューションを作成したりすることなく、異なる JavaScript 実装間の状態を管理できます。
 
AppSignal を使用してフロントエンド JavaScript を監視する
 

 開発者が開発者のために作成したツールを使用して、アプリケーションの JavaScript フロントエンドを監視してみませんか?開発者は、次のような利点があるため、モニタリングを使用するのが楽しいと言っています。
 
     
  • 操作が簡単な直感的なインターフェース
    • 
 
  • シンプルで予測可能な価格設定
    • 
 
  • 開発者間のサポート
    • 
 

 

 AppSignal を初めて使用する場合は、無料のストロープワッフルを忘れずにリクエストしてください。アプリケーションのすべてのメトリクスを指先で操作できるのと同じくらいおいしいです 😉🍪
 JavaScript イベントを使用して React.js を StimulusJS とシームレスに統合する  
コナー・ジェームス
 

 AppSignal のデベロッパー マーケティング マネージャー。カノーリをこよなく愛するポッドキャスト中毒者で、名前をコノーリに変更することを検討中。彼は色に「u」があると考えています。彼がマイクの上で、ステージ上で、または勤務時間外にソファに横たわっているのを見つけるかもしれません。
 

 Connor James
によるすべての記事 JavaScript イベントを使用して React.js を StimulusJS とシームレスに統合する  
ロバート・ビークマン
 

 ロバートは共同創設者として、私たちの最初のコミットを書きました。彼は私たちのサポートのロールモデルでもあり、コードの細かい詳細についてすべて知っています。旅行と写真 (同時に)。
 

 Robert Beekman によるすべての記事
 

            


            
   


            

                

                    
                           
                

                

                        
                    
                

             


             

                 
    
                    
 
  1. 
                         
                         
    
                             
                                 Rubyでのマージソートの調査 
                             
                             
    
                               これは、Rubyを使用したさまざまなソートアルゴリズムの実装を検討するシリーズのパート3です。パート1ではバブルソートについて説明し、パート2では選択ソートについて説明しました。   このシリーズの以前の投稿で説明したように、データの並べ替え方法を理解することは、ソフトウェアエンジニアのツールキットの不可欠な部分です。幸い、Rubyのようなほとんどの高級言語には、配列のソートに効率的な組み込みメソッドがすでに組み込まれています。たとえば、.sortを呼び出す場合 アレイでは、内部でクイックソートを使用しています。この投稿では、クイックソートと同様のアルゴリズム（マージソート）を学習します。これ                             
    
                         
    
                     
    2. 
 
  2. 
                         
                         
    
                             
                                 すべてのWeb開発者が機械学習を検討する必要がある理由 
                             
                             
    
                               私にはまだ子供がいませんが、子供がいるときは、2つのことを子供に学んでもらいたいです。  パーソナルファイナンス 機械学習   特異点が近いと信じているかどうかにかかわらず、世界がデータで実行されていることは否定できません。そのデータがどのように知識に変換されるかを理解することは、最近の成人にとって重要であり、開発者にとってはさらに重要です。   これは、フルスタックのRuby開発者が機械学習（ML）にアクセスできるようにするシリーズの最初の記事です。自由に使えるMLツールを理解することで、利害関係者がより良い意思決定を行えるように支援できます。今後の記事では、個々のテクニックと実際の例に焦点                             
    
                         
    
                     
    3.