September 7, 2020 • ☕️ 3 min read

Reactを触ってからMVCでプロジェクトを開発するチャンスがだんだん少なくなってきました。最近多く採用されたモダンな開発手法とはフロント側React, Vue, AngularJS、バックエンド側はGraphQL、LambdaまたAPIサーバーとなりますが、レガシーは単純なMVC、jQueryと考えられます。

レガシーvsモダンの開発手法をコンペアしたいので、久々MVCフレームワークを使ってウェブサイトを構築してきました。

下記の観点は個人的な感覚なので、MVCの本当の潜在性が見極めていないかもしれません。

レガシーアーキテクチャ

.net core 3.1のMVC、ビュー側はもちろんjQueryを採用しています。

作ったウェブサイトは:https://traveljp.info

MVCの優位点

  1. とりあえずサクサク画面を作れる。データのバイディングがcshtml中で行われるのがすごく簡単。開発スピードが早い
  2. C#がエレガントでインターフェースなどTypeScriptよりまったく強力的、使いやすい
  3. サーバーサイドレンダリングなので、SEOに問題ない(ReactならNext.jsでもSSR対応できるが、MVCより難しい)

MVCの問題点

  1. コンポーネント化が難しい レイアウトの定義である程度のコード共有ができるが、コンポーネント単位で分割すると分割されるファイルの管理が容易ではない 2020-06-28-aspnet-core-nested-layout
_LayoutSearch.cshtml
@{
  Layout = "~/Views/Shared/_Layout.cshtml";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />

@await Html.PartialAsync("_Header")

<div class="container margin_60_30">
  <div class="row">
    @RenderBody()
  </div>
  .
  .
  .
</div>

@await Html.PartialAsync("_Footer")

@section Scripts {
  ...
}
LayoutSearch.js
function LayoutSearch({ children }) {
  // any scripts
  return (
    <>
      <Header />
      <div class="container margin_60_30">
        <div class="row">
          {children}
        </div>
        .
        .
        .
      </div>
      <Footer />
    </>
  );
}
  1. 各共通コンポーネント専用のcssとjsを作成することが難しい

    • [React]:jsはもちろん、cssならstyled-componentsjssなど利用すれば、簡単にできる
    • [MVC(.net core)]:jsなら難しい、cssはほぼ無理
  2. TreeShaking(不要なコードの削除)が無理 たとえbootstrapのほんの少しだけしか使っていなくても、bootstrap cssとjsの全てのソースコードをダウンロードしなければいけない。そのため、余計なコードがダウンロードされる問題が発生する。FontAwesomeのようなデカいアイコンライブラリを使用するときは災難的。TTFB(Time to first byte)がWebpackのsplit機能を利用するページと比べるとはるかに遅い。CDNを利用すればなんとなく早くなるが。。。
  3. スパゲッティコードになりやすい htmlとjs両方とも綺麗にモジュール化できないため、プロジェクトが大きければ大きいほどスパゲッティになりやすくなる

完了

感想:

レガシー(MVC) モダン(Reactなど)
開発スピード
SSR(サーバーサイドレンダリング)
ページスピード
メンテナンス

関連投稿

vagrant boxのnodejs、React開発環境

February 24, 2018

Blog part of ThunderMiracle.com