コンポーネントとは

コンポーネントについて、いろんな説がありますが、とりあえず、例を上げさせていただきます。

VueJSの中で、コンポーネントは

ReactJSの中で、コンポーネントは


class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  ReactDOM.render(
    <HelloMessage name="Jane" />,
    mountNode
  );

Polymerの中で、コンポーネントは

<dom-module id="contact-card">
    <template>
      <style>
        compA {
          font-size: 12
        }
      </style>
      <div class="compA">I am a component</div>
    </template>
    <script>
      class ContactCard extends Polymer.Element {
        static get is() { return "contact-card"; }
        static get properties() {
          return {
            starred: { type: Boolean, value: true }
          }
        }
      }
      customElements.define(ContactCard.is, ContactCard);
    </script>
</dom-module>

Web componentsの公式説明は

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

個人的な理解は

コンポーネント化とは、コンポーネント単位でコンポーネントに関わるHTML/JS/CSSを揃えてひとまとめにする事を言います。
ひとまとめの意味は、一つのファイルでも一つのfolderでもかまいません
（PS：もちろん上述以外にもcustom elements/shadow DOM..等の概念が含まれます。）

コンポーネント化のメリット

VueJS／React／AngularJS／Polymer等を使ったことがある人はコンポーネントのメリットを強く実感していると思います。

目下の課題

いま流行っているframeworkはコンポーネントのシステムを提供する以外にも、Data BindやVirtualDOM等の機能も提供していますが
私が適用したいのは大規模なCMSサイトであり、SEO戦略に多くリソースを割いていることから、影響範囲を絞ってのFramework導入は困難だと思います。
加えて、VirtualDOMやData Bind等は、大規模的なCMSでは有用性があまりない機能であると思います。

Frontend Framework無しでコンポーネント化できるか

上述の課題を考慮した上で、webpackの力を借りればコンポーネント化を実現できると思います。
以下、図解になります。

上記は私が作成したwebpack-component-loaderの概念設計となります。
ご覧の通り、開発環境でコンポーネント単位で切り出した部品を、該当のコンポーネントに関わるtemplate/JS/CSSを揃えて同じfolderに置きます。
開発が完了したら、loderが自動的にtemplateをbackendのtemplateのdirectoryに置きます。さらにJS/CSSをbundleしてfrontendのjsとcssのdirectoryに置きます。
このように、開発時はコンポーネント化の恩恵を受けながら、現行の本番環境の構成に影響を及ばさないことが可能となります。

Link

github: webpack-component-loader

Frontend Framework無しでComponent化を導入する