Ma_gician の特徴

1. コード量が極端に減る。

2. 環境構築なしで開発ができる。

3. Vue.js + jQuery = Ma_gician

企業が導入を検討する可能性が高い。

新しいフレームワークの導入問題

1. 新しいフレームワークの学習コスト

2. 既存のコードを書き替えるコスト

Ma_gician の学習コスト

<script src="assets/js/ma_gician"></script>

<div ::>
  <input -model="message">
  <p>Message = {{ message }}</p>
</div>

• <script> タグは、Ma_gician の本体をロードするひとつだけ。
  
• リアクティブにするためのコードが :: だけ。

でも、書き替えコストは必要よね？

そうでもない。

なぜなら・・・

変化の術が使えるから。

AngularJS + Vue.js + jQuery のデモ

1. AngularJS と Vue.js と jQuery で最小リアクティブを作成。

2. それぞれのコア部分をロードする <script> を削除。

3. Ma_gician をロードする <script> を追加。

これだけ。

AngularJS のリアクティブ

<script src="assets/js/angular-1.7.5.js"></script>

<section ng-app="myApp">
  <div ng-controller="MessageController">
    <input ng-model="messageAngular">
    <p>Message = {{ messageAngular }}</p>
  </div>

  <script>
    window.angular
          .module('myApp', [])
          .controller(
            'MessageController',
            $scope => {}
          )
  </script>
</section>

Vue.js のリアクティブ

<script src="assets/js/vue-2.5.21"></script>

<div id="controller-vue">
  <input v-model="messageVue">
  <p>Message = {{ messageVue }}</p>
</div>

<script>
  new Vue({
    el: '#controller-vue',
    data: {
      messageVue: ''
    }
  })
</script>

jQuery のリアクティブ

<script src="assets/js/jquery-3.4.1"></script>

<div>
  <input id="controller-input-jquery">
  <p class="message-box-frame">Message = <span id="message-box-jquey"></span></p>
</div>

<script>
  $('#controller-input-jquery')
    .on(
      'keypress',
      event => $('#message-box-jquey').html(event.target.value)
    )
</script>

Ma_gician で書き替え

• といっても、やることは「ロード用 <script>」を Ma_gician 向けに書き替えるだけ。

<!--
<script src="assets/js/angular-1.7.5.js"></script>
<script src="assets/js/vue-2.5.21"></script>
<script src="assets/js/jquery-3.4.1"></script>
-->

<script src="assets/js/ma_gician"></script>

• Lightning Talk では、ここでライブコーディングします。

からくり

• Ma_gician には、アダプターモジュールがあり、
  他のフレームワークのコードに擬態できる。

• アダプターモジュールを使えば、
  既存のプロジェクトの書き替えコストは
  限りなくゼロに近づく。

寛容的な Ma_gician

• 他のフレームワークの書式で書いても、
  頑張れば動作できる。

• 多少間違えてても動作する。

• AngularJS の要素に
  new Vue() を当てても結構いける。

（この様子はライブコーディングで見られます）

あるツッコミ (1/2)

• 他のフレームワークのコードを全部
  ma_gician.js に書いたんじゃないか？

ソースコード比較（圧縮前）

• AngularJS --- 1.4MB

• Vue.js --- 341KB

• jQuery --- 280KB

• Ma_gician --- 271KB （最小）

あるツッコミ (2/2)

• React は？

JSX 難しすぎて放置なぅ

当初のキャッチコピー

• 世界中のフロントエンダーを jQuery の記法から解放する

ところが・・・

慈愛のフレームワーク

• jQuery の記法でも動作可能に進化 （笑）

いいことたくさん

1. 他のフレームワークやライブラリと同じ記法が使えるので、学習コストが極端に減る。

2. Ma_gician ＋ アダプターモジュールで導入後は、以降のコードを Ma_gician の正書法で追加できる。

3. 運用しながら学習すれば、少しずつ Ma_gician の正書法に置き替えられる。

Ma_gician で実装済みの機能

• Scoped <style>
• Vuex, Redux のような Flux モジュール
• SPA
• <img> の fallback 一括指定
• etc.

希望者の方にデモ画面をご覧いただけます。
最寄りの Stew Eucen まで御申し出下さいな。

Ma_gician を作った人

• 名前: Stew Eucen （悉生 游漩）
  読み方: 英字・漢字共に 「しちゅう ゆうせん」
• 国籍: 日本

SNS

• Twitter: @StewEucen
• Facebook: stew.eucen

募集

• 令和元年のオープンソース化を目指してます。

• オープンソース活動を支援していただけるスポンサーを募集してます。

ご静聴ありがとうございました!!