Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Privileged Apps with Vue.js

masawada
November 15, 2014

Privileged Apps with Vue.js

masawada

November 15, 2014
Tweet

More Decks by masawada

Other Decks in Programming

Transcript

  1. Privileged Apps with Vue.js
    Firefox OS ίʔυϦʔσΟϯάϛʔτΞοϓ #11 (2014/11/15)
    @masawada

    View full-size slide

  2. FxOSϋοΧιϯͱ͔ओ࠵

    View full-size slide

  3. http://masawada.me

    View full-size slide

  4. εϥΠυ50ຕͳͷͰ
    ඈ͹͠·͢

    View full-size slide

  5. Privileged Apps with Vue.js

    View full-size slide

  6. MVVMϑϨʔϜϫʔΫ

    View full-size slide

  7. MVCͷѥछΈ͍ͨͳͷ

    View full-size slide

  8. ৄࡉ͸ׂѪ

    View full-size slide

  9. (͜Θ͍͓͡͞Μ͜Θ͍)

    View full-size slide

  10. Model
    View
    ViewModel

    View full-size slide

  11. Model
    var model = {
    hello: “”
    };

    View full-size slide

  12. ViewModel
    var app = new Vue({
    el: "#app",
    data: model
    });

    View full-size slide

  13. ViewͱModelΛ
    ViewModel͕όΠϯυ

    View full-size slide

  14. Privileged Apps (ಛݖΞϓϦ)

    View full-size slide

  15. Privileged Apps
    ɾHosted AppsͰ͸࢖͑ͳ͍API͕࢖͑Δ
    ɾmanifest.webappʹࢦఆΛॻ͘
    ɾ੍͍͔ͭ͘ݶ͕͋Δ
    ɾΞϓϦΛެ։͢Δͱ͖ʹ৹͕ࠪ͋Δ

    View full-size slide

  16. ੍͍͔ͭ͘ݶ͕͋Δ

    View full-size slide

  17. Content Security Policy

    View full-size slide

  18. Content Security Policy
    ɾؔ਺ίϯετϥΫλͷېࢭ
    ɾeval ͷېࢭ
    ͳͲͳͲ…
    https://developer.mozilla.org/ja/Apps/CSP
    ΛݟͯͶ

    View full-size slide

  19. ؔ਺ίϯετϥΫλଟ༻ͯͨ͠

    View full-size slide

  20. Ͳ͏΍࣮ͬͯݱ͍ͯ͠Δ͔

    View full-size slide

  21. mmckegg/notevil

    View full-size slide

  22. mmckegg/notevil
    ɾNode.jsͷϞδϡʔϧ
    ɾVue.jsͰ͸͜ΕΛforkͯ͠ґଘϥΠϒϥϦΛ݁߹
    ɾariya/esprimaͰparseͯ͠Δ
    ɾάϩʔόϧΦϒδΣΫτʹΞΫηε͠ͳ͍

    View full-size slide

  23. mmckegg/notevil
    case 'BinaryExpression':
    var l = walk(node.left)
    var r = walk(node.right)
    switch(node.operator) {
    case '==': return l === r
    case '===': return l === r

    View full-size slide

  24. .oO(not evil …?)

    View full-size slide

  25. ศརͳͷͰ࢖͍·͠ΐ͏

    View full-size slide

  26. ݱ஍͔Β͸Ҏ্Ͱ͢

    View full-size slide

  27. ίʔυϦʔσΟϯάͷ
    ͓ͱ΋ʹ

    View full-size slide

  28. git find ίϚϯυ

    View full-size slide

  29. git find
    ɾgit subcommand
    ɾPATHͷ௨Δॴʹgit-findϑΝΠϧΛஔ͘
    → git findͰ࣮ߦͰ͖Δ
    ɾpeco͕ඞཁ

    View full-size slide

  30. pecoͷΠϯετʔϧ (mac)
    $ brew tap peco/peco
    $ brew install peco

    View full-size slide

  31. git find
    DST_PATH=$(git grep -n $1 | grep -v
    "[0-9]:\s*//" | peco | awk -F ":"
    '{print "-c "$2" "$1}');
    if [ ${#DST_PATH} -ne 0 ]; then
    vim $DST_PATH;
    fi

    View full-size slide

  32. [git find peco][ݕࡧ]

    View full-size slide

  33. ͥͻ͓࢖͍͍ͩ͘͞

    View full-size slide

  34. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide