Help us understand the problem. What is going on with this article?

【Ma_gician #02】 変化の術

【Ma_gician #02】 変化の術

by StewEucen
1 / 24

Ma_gician の特徴

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

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

  3. Vue.js + jQuery = Ma_gician

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


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

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

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


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 のデモ

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

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

  3. 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 の記法でも動作可能に進化 (笑)

いいことたくさん

  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


募集

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

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


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

StewEucen
「Stew Eucen」「悉生 游漩」は「しちゅう ゆうせん」と読みます。新しい JavaScript フロントエンドフレームワーク x-ninja の中の人です。
http://x-ninja.org
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした