【Ma_gician #02】 変化の術

## Ma_gician の特徴

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

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

3. Vue.js + jQuery = Ma_gician


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

---

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

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

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

---

## Ma_gician の学習コスト

```HTML:Ma_gicianのリアクティブ
<script src="assets/js/ma_gician"></script>

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

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

---

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

---

# そうでもない。<br><br>なぜなら・・・

---

# 変化の術が使えるから。

---

## AngularJS + Vue.js + jQuery のデモ

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

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

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

これだけ。

---

## AngularJS のリアクティブ

```HTML: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 のリアクティブ

```HTML: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 のリアクティブ

```HTML: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 で書き替え

* といっても、やることは「ロード用 &lt;script&gt;」を Ma_gician 向けに書き替えるだけ。

```HTML
<!--
<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)

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

---

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

* AngularJS --- 1.4MB

* Vue.js --- 341KB

* jQuery --- 280KB

* Ma_gician --- 271KB （最小）

---

## あるツッコミ (2/2)

* React は？

### JSX 難しすぎて放置なぅ

---

## 当初のキャッチコピー

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

<br><br><br><br>

ところが・・・

---

## 慈愛のフレームワーク

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

---

## いいことたくさん

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

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

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

---

## Ma_gician で実装済みの機能

* Scoped &lt;style&gt;
* Vuex, Redux のような Flux モジュール
* SPA
* &lt;img&gt; の fallback 一括指定
* etc.

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

---

## Ma_gician を作った人
* 名前: Stew Eucen （悉生 游漩）  
読み方: 英字・漢字共に 「しちゅう ゆうせん」
* 国籍: 日本

## SNS
* Twitter: [@StewEucen](https://twitter.com/StewEucen) 
* Facebook: [stew.eucen](https://www.facebook.com/stew.eucen)

---

## 募集

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

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

---

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