最近のWebアプリケーション

Question

の「API最初のアーキテクチャ」である私は、Webアプリケーションに適用するためにAPI最初のアーキテクチャを理解しようとすると、ここでいくつかの情報を発見し、私の下Advantages of a separate REST backend API?

は、より良い答えを例を添付します質問。 フロントエンドにAngular.jsを使用し始めます。 Node.js、サーバー用のExpress.js。

フォルダ構造

|-- server.js 
|-- app 
     |-- models 
     |-- views 
      |-- index.html 
      |-- about.html 
      |-- contact.html 
     |-- controllers 
      |-- app.js 
|-- node-modules 

appフォルダは、角度のアプリのためのMVC構造です。 POST GET PUT DELETE、MongoDB、Redis接続はすべてserver.jsにあります。しかし、サーバーファイルが大きくなると、それらのビジネスロジックを整理する最良の方法は何ですか？

server.jsにはビューエンジンが設定されていません。明示的に "routes"フォルダを作成すると、実際にはAPIの最初のコンセプトが実行されますか？たとえば、ユーザーがボタンをクリックしてブラウザからフォームを直接送信すると、この場合、プレゼンテーションレイヤの役割はサーバーですか？

index.htmlを

<form method='POST' action='/register'> 
    // some code here.. 
    <button type='submit'>submit</button></form> 

server.js

var rootPath = './app/views' 
router.post('/register' (req, res) =>{ 
    // some code here... 
res.sendFile(rootPath + 'index.html'); 
}); 

事前に感謝します。

Answer 1

APIファーストアーキテクチャーは、実際のフロントエンドの実装に集中することなく、バックエンドとフロントエンドの間のインターフェースを最初に設計することを意味します。今後、新しいクライアントをAPIに簡単に追加することができます。いくつかの良いイントロ以下を参照してください。

• http://www.api-first.com/
• https://www.programmableweb.com/api-university/understanding-api-first-design
• https://medium.com/adobe-io/three-principles-of-api-first-design-fa6666d9f694
Webコンテキストで
• https://dzone.com/articles/an-api-first-development-approach-1

それは通常、RESTfulなAPIを備えた単一ページのアプリケーション（のSPA）で行われていますすべてのデータをJSONとして渡します.HTMLはバックエンドで生成されません。

現代のシングルページアプリケーションを作成する場合は、通常、フロントエンドへのリクエストごとに同じHTMLファイルを提供します。ユーザーはこれらのリンクのいずれかをクリックしたときに同じHTMLが返されます：

• http://www.example.com/
• http://www.example.com/some/page
• http://www.example.com/some/other/page

ここにトリッキーである何、あなたがドンことを確認する必要があるということですtサーバーはスタイルや画像のような他のアセットのためのHTMLを持っているので、通常はファイルが見つからない場合にそれを提供します。例えば。ユーザーが/css/style.cssを取得したい場合、実際のCSSを提供しますが、存在しない/ a/b/cを取得したい場合は/index.htmlを提供します。

フロントエンドファイル - HTML、CSS、クライアントサイドのJavaScript、画像などは、サーバが常にクライアントに同じコンテンツを送信するという意味で、常に静的です。これらは、APIまたは別のサーバーと同じサーバー上、同じドメイン上または別のドメイン上（ただし、フロントエンドアセットとバックエンドAPIに異なるドメインを使用する場合はCORSを正しく処理する必要があります）で送信できます。

フロントエンドとバックエンドのやりとりはすべて、ページをリロードせずに で行われるため、フォームの送信に対する応答としてサーバーにHTMLを提供しません。通常は、JSONデータまたはHTMLの代わりに（あまり一般的ではない）XMLを提供します。

たとえば、router.post('/register')ハンドラーは、res.json({ some: { object: 'example' } });というHTMLで送信されたものを返信することができます。

これは通常行われている方法です。フロントエンドとバックエンドを明確に定義されたAPIの境界線で区切り、読み込まれたHTMLページをリロードしません。

詳細については、SPA、REST、JSON、XML、AJAX、GraphQLの詳細を検索してください。