Ma_gician の特徴
-
コード量が極端に減る。
-
環境構築なしで開発ができる。
-
Vue.js + jQuery = Ma_gician
企業が導入を検討する可能性が高い。
新しいフレームワークの導入問題
-
新しいフレームワークの学習コスト
-
既存のコードを書き替えるコスト
Ma_gician の学習コスト
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 のデモ
-
AngularJS と Vue.js と jQuery で最小リアクティブを作成。
-
それぞれのコア部分をロードする
<script>を削除。 -
Ma_gician をロードする
<script>を追加。
これだけ。
AngularJS のリアクティブ
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 のリアクティブ
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 のリアクティブ
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 の記法でも動作可能に進化 （笑）
いいことたくさん
-
他のフレームワークやライブラリと同じ記法が使えるので、学習コストが極端に減る。
-
Ma_gician ＋ アダプターモジュールで導入後は、以降のコードを Ma_gician の正書法で追加できる。
-
運用しながら学習すれば、少しずつ 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
募集
-
令和元年のオープンソース化を目指してます。
-
オープンソース活動を支援していただけるスポンサーを募集してます。