ブログ システムのアーキテクチャに関する考察 (パート 2) -- Static と CQRS_html/css_WEB-ITnose
複雑なシステムの場合、前の記事のアプローチは非常に優れています。しかし、単純なシステムにとって、これはやりすぎでしょうか?ブログシステムを設計したい場合、書き込みと読み取りを分離することを検討できますか?
CQS
コマンドとクエリの責任の分離 Command Query Responsibility Segregation (CQRS) は、読み取りと書き込みを分離する方法です。システムの動作 これは 2 つの独立したモデルのアーキテクチャ パターンです。
このアーキテクチャについての深い考察は、DDD の以前の理解に基づいています。 DDD分野で広く使われているという。 CQRS を理解するには、読み取りおよび書き込みリクエストを処理するための別のモデルと API セット、つまり CQS (Command Query Separation) モードを使用することから始めることができます。 CQS パターンは、ソフトウェアの第一人者である Bertrand Meyer (エッフェル言語の父であり、オブジェクト指向のオープンクローズ原則 OCP の提案者) によって最初に提案されました。彼は、オブジェクトの動作にはコマンドとクエリの 2 種類しかないと考えています。
このタイプのアーキテクチャを以下に示します。
最適化されたクエリ タイプを作成することに加えて、読み取る API の部分を簡単に変更できます。一部のキャッシュ メカニズム、または読み取り API リクエストを別のサーバーに移動することもできます。
読み取りと書き込みが類似しているアプリケーションの場合、このアーキテクチャは適切に見えます。同じ RDBMS を使用するこのアーキテクチャには、依然としてボトルネックの問題が存在します。書き込み量が多く、読み取り量が少ないアプリケーションにとって、このアーキテクチャは依然として不合理です。
この問題を解決するために、人々は当然キャッシュを使用してこの問題を解決します。アプリケーション サービスの外部に HTTP サーバーがあり、ユーザーが存在する一部のリソースをキャッシュするために HTTP サーバーの外部にキャッシュ サーバーがあります。以下に示すように:
実際、そのようなサーバーは冗長である可能性があります。なぜ HTML を直接生成しないのでしょうか?
編集と出版の分離
おそらく、Martin Folwer によって提案された編集と出版の共有アーキテクチャについて聞いたことがあるでしょう。つまり、記事は編集時にはある形式で、公開時には別の形式になります。たとえば、マークダウンで編集され、HTML で公開されます。
最も典型的なアプリケーションは、GitHub で人気のある Hexo フレームワークや Jekyll フレームワークなどの静的 Web サイトです。以下の図に示すように、Hexo のワークフローは次のとおりです。
プロジェクトをローカルに生成し、新しいブログを作成したり、コンテンツの作成を開始したりできます。これにより、このサービスをローカルで実行できるようになり、ブログのコンテンツを表示したり、スタイルなどを変更したりすることもできます。上記の作業を完了したら、静的コンテンツを生成し、アプリケーションを GitHub ページにデプロイできます。
これはすべて完璧に見えます。2 つの異なるデータ ソースがあります。1 つは md 形式のテキストで、もう 1 つは最終的に生成された HTML です。彼らは読み書き/分離を実装しました:
しかし、フロントエンド開発者として、JSON がなく、Ajax リクエストを使用できない場合、ブログをシングルページ アプリケーションにするにはどうすればよいでしょうか?
編集、出版、開発の分離
ブログを hexo 形式ではなく JSON に変換する必要があるためです。これらの JSON ファイルの存在により、Git を NoSQL データベースとして扱うことができます。同時に、これらの JSON ファイルは API として直接使用することもできます
次に、これらのブログは hexo のような HTML を生成する必要もあります。
さらに、開発者は開発中のエディタの使用に影響を与えないため、次のアーキテクチャがあります:
これには 2 つの違いがあります データ形式は JSON ですMarkdown データと最終的に生成された HTML を保存するファイル。
ブログの数が少ない Web サイトや一般的な Web サイトの場合、上記のテクノロジーを使用しても問題ありません。しかし、大量のデータを含む Web サイトはどうなるでしょうか? EventBus の使用
以前にプレイしたデモでは、Python の Scrapy クローラーを使用して既存の動的 Web サイトをクロールし、それらを静的 Web サイトに変換し、AWS S3 にデプロイしました。
しかし、これだけだとまだ問題がいくつかあります:
-
検索機能
-
オートコンプリート
待ってください。
どう思いますか?次の記事のタイトルはもうお分かりかと思います~~、ここでは明かしませんが、動的ブログと静的ブログはすでに分析済みです。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
