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

止まっちゃいけないフロントエンド開発

 止まっちゃいけないフロントエンド開発

DevLOVE甲子園2014 東日本大会 技トラック 5回表

stormcat24

August 23, 2014
Tweet

More Decks by stormcat24

Other Decks in Programming

Transcript

  1. 止まっちゃいけない
    フロントエンド開発
    Akinori Yamada / @stormcat24
    DevLOVEߕࢠԂ2014 ౦೔ຊେձ

    View full-size slide

  2. ‣ @stormcat24
    ‣ CyberAgent, Inc.
    ‣ Technical Engineer
    ‣ Server-side
    ‣ Front-end?
    ‣ DevOpts

    View full-size slide

  3. アメーバ事業本部所属

    View full-size slide

  4. Ҿ༻ɿ4PDJBM(BNF*OGP

    View full-size slide

  5. 技術本部所属

    View full-size slide

  6. 本日のアジェンダ

    View full-size slide

  7. ‣ AmebaεϚϗ։ൃͷόοΫάϥ΢ϯυ
    ‣ ๊͍͑ͯͨ໰୊఺
    ‣ ϑϩϯτΤϯυͷॏཁੑͱຊདྷͷ໾ׂ
    ‣ ։ൃޮ཰޲্ͷͨΊʹॻ͍ͨπʔϧ΍ࢪࡦ

    View full-size slide

  8. 2012年
    Amebaスマホスタート

    View full-size slide

  9. スマートフォン開発へのシフト
    ‣ 30ԯԁϓϩϞʔγϣϯʢ2012೥11݄ʣ
    ‣ 2೥Ͱ100ͷ৽نࣄۀ
    ‣ ૊৫վฤɺେ෯૿һͰҰؾʹγϑτ
    ‣ ϒϥ΢βϓϥοτϑΥʔϜઓུ
    ‣ ήʔϜɾίϛϡχςΟ

    View full-size slide

  10. 技術的バックグラウンド
    ‣ ΋ͱ΋ͱJavaܦݧऀ͕ଟ͍ձࣾ
    ‣ ݴޠͷׂ߹
    ‣ ήʔϜ͸΄΅Java
    ‣ ίϛϡχςΟ͸Ruby΍PHP΋͋ͬͨ
    ‣ ࠷ۙ͸Node.js͔ͳΓ୆಄ɺJavaൺ཰ˣ

    View full-size slide

  11. Ameba定番アーキテクチャ
    ‣ Java
    ‣ Spring
    ‣ MySQL
    ‣ Memcached
    ‣ Freemarker

    View full-size slide

  12. フロントエンドは・・・
    ‣ αʔόαΠυςϯϓϨʔτ͕ओྲྀʢFTL)
    ‣ ͨ·ʹBackbone.jsϓϩδΣΫτ͕ͪΒ΄Β
    ‣ ϑϩϯτΤϯυ͕βϧͳϓϩδΣΫτ͕ଟ͔ͬͨ
    ‣ ʢҰԠʣ෼ۀͱ͍͏͜ͱʹͳͬͯΔ

    View full-size slide

  13. 抱えていた問題点

    View full-size slide

  14. ‣ αʔόαΠυ͕ແ͍ͱɺϑϩϯτΤϯυͷ΄ͱΜͲ
    Λಈ͔͢͜ͱ͕Ͱ͖ͳ͍
    ‣ Τϥʔ͕͋Δͱ࡞ۀ͕ࢭ·Δ
    ‣ DBͷσʔλʹґଘ͢Δ࡞ۀ
    ‣ ৬छͰ෼͚ͯ෼ۀͬͯݴͬͯΔ͚ͩ
    強いサーバサイド依存

    View full-size slide

  15. ىಈʹʙ෼
    ଴ͬͯͶ͆͆͆ /VMM1PJOUFS&YDFQUJPO
    0VU0G.FNPSZ&SSPS
    མͪΔʁϚελσʔλ͓͔͍͠Ͷ͆
    ͋͋ɺͦΕ
    ൿ఻ͷಈ͔͠ํ͕ʢ͈́
    ΋͏୲౰ऀؼΓ·ͨ͠
    αʔηϯXXX

    View full-size slide

  16. 強まるサーバサイド支配
    ×分業 ◯下請け
    神聖サーバサイド帝国・トムキャット8世

    View full-size slide

  17. 待つことの辛さ
    マンガでも読んで
     気長に待つか・・・
    いや、もっとやるべきことが
    あるはずだ
    意識低い人 意識高い人

    View full-size slide

  18. フロントエンドにとっての
    専門外領域

    View full-size slide

  19.   強いられる
         専門外の作業

    View full-size slide

  20. フロントエンドエンジニアの専門領域

    View full-size slide

  21. やること大杉ワロタw

    View full-size slide

  22. 高まりつづける専門性
    ‣ ઈ͑ͣΠϯϓοτɾΞ΢τϓοτ͕ඞཁ
    ‣ εϚϗ։ൃͷ৔߹ɺϨεϙϯε͸ಛʹγϏΞ
    ‣ "OESPJEରԠ@ ཀAʯ㲃
    @
    ‣ ϝϯςφϒϧͳ։ൃ
    ‣ ςετख๏

    View full-size slide

  23. サーバサイド待ってる暇とか無い
    ɾɾɾ

    View full-size slide

  24. 水のように消費されるレッドブル

    View full-size slide

  25. 目指すべき
     開発スタイル

    View full-size slide

  26. ઐ໳֎ྖҬ͔Βͷ୤٫
    ‣ ϑϩϯτΤϯυΤϯδχΞ͕ɺઐ໳ྖҬʹϦιʔε
    Λ஫ྗͰ͖Δ࢓૊ΈΛͭ͘Δ͜ͱ
    ‣ 7BHSBOU$IFG͡Όຊ࣭ͷղܾʹͳΒͳ͍

    View full-size slide

  27. αʔόαΠυґଘ͔Βͷ୤٫
    ‣ ϑϩϯτΤϯυʹͱͬͯɺαʔόαΠυ͕ΫϦςΟ
    Χϧɾύεʹͳͬͯ͸ͳΒͳ͍
    ‣ αʔόαΠυͷঢ়ଶʹؔΘΒͣɺ։ൃͰ͖Δ͜ͱ

    View full-size slide

  28. ΠϯλϑΣʔεࢦ޲։ൃ
    ‣ αʔόαΠυͱϑϩϯτΤϯυΛऔΓ࣋ͭɺ7JFX
    ͷΠϯλϑΣʔεϕʔεͷ։ൃʹγϑτ͢Δ
    ‣ ׬શͳ෼ۀΛཱ֬ͤ͞Δ

    View full-size slide

  29. αΫαΫ։ൃɾলϦιʔε
    ‣ "1αʔόͷىಈ଴ͪ࣌ؒΛແ͘͢͜ͱ
    ‣ ࡞ۀʹ͓͚Δ҉໧஌Λແ͘͢͜ͱ
    ‣ গͳ͍ϚγϯϦιʔεͰ࣮ݱ

    View full-size slide

  30. 超えるべき壁
    ‣ ੵ΋Γੵ΋ٕͬͨज़తෛ࠴
    ‣ ӡ༻εϐʔυΛམͱͯ͠͸͍͚ͳ͍
    ‣ طଘͷγεςϜʹ෭࡞༻Λ༩͑Δ΋ͷͰ͋ͬͯ͸ͳ
    Βͳ͍
    ‣ ఍߅੎ྗͱͷઓ͍

    View full-size slide

  31. ツールを書きました

    View full-size slide

  32. +7.ܥςϯϓϨʔτΤϯδϯͷϞοΫαʔό
    ςϯϓϨʔτʴσʔλʢ+40/:".-ʣˠ)5.-
    4DBMB
    +40/Ϩεϙϯε ੩తίϯςϯπ
    "NFCBͷ+BWBϓϩδΣΫτͰಋೖ
    ϛυϧ΢ΣΞෆཁ
    Aeromock is
    αʔόαΠυϞδϡʔϧෆཁ
    ࠶ىಈෆཁ ਺ඵͰىಈ লϝϞϦ

    View full-size slide

  33. https://github.com/CyberAgent/aeromock
    OSS Released !! Now Available!!
    来週公開!!
    OSS Released !! Now Available!!

    View full-size slide

  34. 来週公開!!

    View full-size slide

  35. テンプレートと
    データを用意するだけ

    View full-size slide



  36. map.propSimple = ${map.propSimple}
    <#list map.propList as value>
    map.propList[${value_index}] = ${value}
    #list>
    map.propMap.childSimple = ${map.propMap.childSimple}
    <#list map.propMap.childList as value>
    map.propMap.childList[${value_index}] = ${value}
    #list>


    View full-size slide

  37. map:
    propSimple: propSimpleValue
    propList:
    - 11111
    - 22222
    - 33333
    propMap:
    childSimple: childSimpleValue
    childList:
    - child11111
    - child22222
    - child33333
    :".-ͰσʔλΛͭ͘Δ͚ͩ
    ίϝϯτॻ͚ΔͷͰ:".-ਪ঑
    +40/Ͱ΋Մ

    View full-size slide

  38. そんな簡単な例ばかりじゃない

    View full-size slide



  39. target.prop1 = ${target.prop1}
    target.exeucte1() = ${target.execute1()}
    <#assign execute2Result = target.execute2() >
    target.exeucte2().id = ${execute2Result.id}
    target.exeucte2().name = ${execute2Result.name}


    .FUIPE$BMM

    View full-size slide

  40. target:
    prop1: prop1Value
    __methods:
    - name: execute1
    value: execute1Value
    - name: execute2
    value:
    id: 100
    name: foobar
    ϝιου΋ఆٛͰ͖Δ
    Ҿ਺ͷ਺͸໰Θͳ͍
    ωετ0,

    View full-size slide

  41. カスタムタグ・ファンクション

    View full-size slide


  42. <@div>

    @div>

    FH'SFFNBSLFS
    5BH шʆ



    'VODUJPO

    View full-size slide

  43. if (arguments.isEmpty()) {
    throw new IllegalArgumentException("Argument required.”)
    }
    return "http://$HOST${arguments[0]}"
    TUBUJD6SMHSPPWZ
    (SPPWZͰ'VODUJPOͷग़ྗΛίϯτϩʔϧ

    View full-size slide

  44. _writer.write(‘for (entry in _params) {
    _writer.write(‘${entry.key}=“‘ + entry.value + ‘“ ’)
    }
    _writer.write(‘’)
    EJWHSPPWZ
    (SPPWZͰ5BHͷग़ྗΛίϯτϩʔϧ

    View full-size slide

  45. ガールフレンド(仮)
    on Aeromock

    View full-size slide

  46. 対応済テンプレートエンジン
    ‣ Freemarker
    ‣ Handlebars.java
    ‣ Jade4J
    ‣ Velocity
    ‣ Groovy Templates
    ‣ Thymeleaf
    ‣ ଓʑରԠ༧ఆ

    View full-size slide

  47. 開発に必要なもの

    View full-size slide

  48. Aeromockで開発する利点

    View full-size slide

  49. "1αʔόىಈ଴͕ͪແ͘ͳͬͨ
    αʔόαΠυʹࠨӈ͞Εͳ͘ͳͬͨ
    σʔλߏ଄͑͞ԡ͑͞ͱ͚͹Կͱ͔ͳΔ
    ϫϯλΠϜܥͷදࣔ֬ೝ͕͠΍͍͢
    ۾ͳ͘ςετͰ͖Δ
    ͍ܰ
    νʔϜؒͰΪεΪε͠ͳ͘ͳͬͨ
    τϥΠΞϯυΤϥʔָ͕
    :".-Ͱ໌֬ͳ࢓༷ͷऔΓܾΊߦ͍ɺೝࣝ૬ҧ͕ݮͬͨ
    ઐ໳ྖҬ֎ʹ෷͏ίετ͕֨ஈʹݮͬͨ

    View full-size slide

  50. ෳ਺ύλʔϯσʔλ
    ڞ௨σʔλϑΝΠϧ
    ΧελϜϧʔςΟϯά 7JSUVBM)PTU
    その他の機能たち
    7BHSBOU4IBSF
    7JFXͱσʔλͷςετ

    View full-size slide

  51. Vagrant Share

    View full-size slide

  52. 7BHSBOU4IBSF
    ‣ 7BHSBOUͰߏஙͨ͠ήετ04ͰՔಇ͢ΔΞϓϦΛɺ
    Ұ࣌తʹάϩʔόϧʹެ։͢Δ࢓૊Έ
    ‣ "FSPNPDLͰ͸ϩʔΧϧελϯυΞϩϯ൛ͱ͸ผ
    ʹɺ7BHSBOU4IBSFެ։༻΋༻ҙ͍ͯ͠Δ
    ‣ /HJOY"FSPNPDL#BTJDೝূߏ੒
    ‣ ྨࣅαʔϏεʹOHSPL MPDBMUVOOFM

    View full-size slide

  53. ローカルを即実機確認
    ࣮૷ॳظஈ֊͔Β࣮ػ֬ೝ
    ग़དྷӫ͑ͷڞ༗΋ૣظʹ
    %FW؀ڥཁΒͣ
    มߋ͸ଈ൓ө

    View full-size slide

  54. 普及活動

    View full-size slide

  55. ‣ ('ʹ͏͔ͬΓಋೖͯ͠ط੒ࣄ࣮Խʹ੒ޭ
    ‣ ֤ϓϩδΣΫτʹσϞ࣋ͬͯӦۀ
    ‣ ಋೖোน؇࿨ͷͨΊɺॳظߏ੒Λ13Ͱೲ඼
    ‣ ӡ༻αϙʔτ
    ‣ ಋೖ͸ϓϩδΣΫτ͸௒͑ͨ͘Β͍

    View full-size slide

  56. https://github.com/CyberAgent/aeromock
    Please your star and Pull Request!!
    来週公開!!

    View full-size slide

  57. ‣ ܰࢹ͞Ε͕ͪͳϑϩϯτΤϯυɺͦͷՁ஋ΛࠓҰ౓
    ݟ௚ͦ͏
    ‣ ύϫʔόϥϯε͕࿪ͳϓϩδΣΫτ͸ɺ୭͔͕ͦͷ
    ୅ঈΛ෷͍ͬͯΔ
    ‣ ֤ʑ͕஫ྗ͢΂͖υϝΠϯΛࠓҰ౓ߟ͑Α͏
    ‣ ։ൃޮ཰ͷϘτϧωοΫΛղফ͢ΔࡦΛߟ͑ɺ֤ʑ
    ͷϦιʔεΛ࢖͍͖Ζ͏

    View full-size slide

  58. 止まるな、止めるな
    フロントエンド

    View full-size slide

  59. に興味のあるひと
    GPMMPX!TUPSNDBU

    View full-size slide

  60. ご清聴ありがとうございました
    - Thank you for listening -

    View full-size slide