Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
止まっちゃいけない フロントエンド開発 Akinori Yamada / @stormcat24 DevLOVEߕࢠԂ2014 ౦ຊେձ
Slide 2
Slide 2 text
‣ @stormcat24 ‣ CyberAgent, Inc. ‣ Technical Engineer ‣ Server-side ‣ Front-end? ‣ DevOpts
Slide 3
Slide 3 text
アメーバ事業本部所属
Slide 4
Slide 4 text
だった
Slide 5
Slide 5 text
Ҿ༻ɿ4PDJBM(BNF*OGP
Slide 6
Slide 6 text
技術本部所属
Slide 7
Slide 7 text
本日のアジェンダ
Slide 8
Slide 8 text
‣ AmebaεϚϗ։ൃͷόοΫάϥϯυ ‣ ๊͍͑ͯͨ ‣ ϑϩϯτΤϯυͷॏཁੑͱຊདྷͷׂ ‣ ։ൃޮ্ͷͨΊʹॻ͍ͨπʔϧࢪࡦ
Slide 9
Slide 9 text
2012年 Amebaスマホスタート
Slide 10
Slide 10 text
スマートフォン開発へのシフト ‣ 30ԯԁϓϩϞʔγϣϯʢ201211݄ʣ ‣ 2Ͱ100ͷ৽نࣄۀ ‣ ৫վฤɺେ෯૿һͰҰؾʹγϑτ ‣ ϒϥβϓϥοτϑΥʔϜઓུ ‣ ήʔϜɾίϛϡχςΟ
Slide 11
Slide 11 text
技術的バックグラウンド ‣ ͱͱJavaܦݧऀ͕ଟ͍ձࣾ ‣ ݴޠͷׂ߹ ‣ ήʔϜ΄΅Java ‣ ίϛϡχςΟRubyPHP͋ͬͨ ‣ ࠷ۙNode.js͔ͳΓ಄ɺJavaൺˣ
Slide 12
Slide 12 text
Ameba定番アーキテクチャ ‣ Java ‣ Spring ‣ MySQL ‣ Memcached ‣ Freemarker
Slide 13
Slide 13 text
フロントエンドは・・・ ‣ αʔόαΠυςϯϓϨʔτ͕ओྲྀʢFTL) ‣ ͨ·ʹBackbone.jsϓϩδΣΫτ͕ͪ´ ‣ ϑϩϯτΤϯυ͕βϧͳϓϩδΣΫτ͕ଟ͔ͬͨ ‣ ʢҰԠʣۀͱ͍͏͜ͱʹͳͬͯΔ
Slide 14
Slide 14 text
抱えていた問題点
Slide 15
Slide 15 text
‣ αʔόαΠυ͕ແ͍ͱɺϑϩϯτΤϯυͷ΄ͱΜͲ Λಈ͔͢͜ͱ͕Ͱ͖ͳ͍ ‣ Τϥʔ͕͋Δͱ࡞ۀ͕ࢭ·Δ ‣ DBͷσʔλʹґଘ͢Δ࡞ۀ ‣ ৬छͰ͚ͯۀͬͯݴͬͯΔ͚ͩ 強いサーバサイド依存
Slide 16
Slide 16 text
ىಈʹʙ ͬͯͶ͆͆͆ /VMM1PJOUFS&YDFQUJPO 0VU0G.FNPSZ&SSPS མͪΔʁϚελσʔλ͓͔͍͠Ͷ͆ ͋͋ɺͦΕ ൿͷಈ͔͠ํ͕ʢ͈́ ͏୲ऀؼΓ·ͨ͠ αʔηϯXXX
Slide 17
Slide 17 text
強まるサーバサイド支配 ×分業 ◯下請け 神聖サーバサイド帝国・トムキャット8世
Slide 18
Slide 18 text
待つことの辛さ マンガでも読んで 気長に待つか・・・ いや、もっとやるべきことが あるはずだ 意識低い人 意識高い人
Slide 19
Slide 19 text
フロントエンドにとっての 専門外領域
Slide 20
Slide 20 text
強いられる 専門外の作業
Slide 21
Slide 21 text
フロントエンドエンジニアの専門領域
Slide 22
Slide 22 text
やること大杉ワロタw
Slide 23
Slide 23 text
高まりつづける専門性 ‣ ઈ͑ͣΠϯϓοτɾΞτϓοτ͕ඞཁ ‣ εϚϗ։ൃͷ߹ɺϨεϙϯεಛʹγϏΞ ‣ "OESPJEରԠ@ ཀAʯ㲃 @ ‣ ϝϯςφϒϧͳ։ൃ ‣ ςετख๏
Slide 24
Slide 24 text
サーバサイド待ってる暇とか無い ɾɾɾ
Slide 25
Slide 25 text
水のように消費されるレッドブル
Slide 26
Slide 26 text
目指すべき 開発スタイル
Slide 27
Slide 27 text
ઐ֎ྖҬ͔Βͷ٫ ‣ ϑϩϯτΤϯυΤϯδχΞ͕ɺઐྖҬʹϦιʔε ΛྗͰ͖ΔΈΛͭ͘Δ͜ͱ ‣ 7BHSBOU$IFG͡Όຊ࣭ͷղܾʹͳΒͳ͍
Slide 28
Slide 28 text
αʔόαΠυґଘ͔Βͷ٫ ‣ ϑϩϯτΤϯυʹͱͬͯɺαʔόαΠυ͕ΫϦςΟ ΧϧɾύεʹͳͬͯͳΒͳ͍ ‣ αʔόαΠυͷঢ়ଶʹؔΘΒͣɺ։ൃͰ͖Δ͜ͱ
Slide 29
Slide 29 text
ΠϯλϑΣʔεࢦ։ൃ ‣ αʔόαΠυͱϑϩϯτΤϯυΛऔΓ࣋ͭɺ7JFX ͷΠϯλϑΣʔεϕʔεͷ։ൃʹγϑτ͢Δ ‣ શͳۀΛཱ֬ͤ͞Δ
Slide 30
Slide 30 text
αΫαΫ։ൃɾলϦιʔε ‣ "1αʔόͷىಈͪ࣌ؒΛແ͘͢͜ͱ ‣ ࡞ۀʹ͓͚Δ҉Λແ͘͢͜ͱ ‣ গͳ͍ϚγϯϦιʔεͰ࣮ݱ
Slide 31
Slide 31 text
超えるべき壁 ‣ ੵΓੵٕͬͨज़తෛ࠴ ‣ ӡ༻εϐʔυΛམͱ͍͚ͯ͠ͳ͍ ‣ طଘͷγεςϜʹ෭࡞༻Λ༩͑ΔͷͰ͋ͬͯͳ Βͳ͍ ‣ ߅ྗͱͷઓ͍
Slide 32
Slide 32 text
ツールを書きました
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
+7.ܥςϯϓϨʔτΤϯδϯͷϞοΫαʔό ςϯϓϨʔτʴσʔλʢ+40/:".-ʣˠ)5.- 4DBMB +40/Ϩεϙϯε ੩తίϯςϯπ "NFCBͷ+BWBϓϩδΣΫτͰಋೖ ϛυϧΣΞෆཁ Aeromock is αʔόαΠυϞδϡʔϧෆཁ ࠶ىಈෆཁ ඵͰىಈ লϝϞϦ
Slide 35
Slide 35 text
https://github.com/CyberAgent/aeromock OSS Released !! Now Available!! 来週公開!! OSS Released !! Now Available!!
Slide 36
Slide 36 text
来週公開!!
Slide 37
Slide 37 text
テンプレートと データを用意するだけ
Slide 38
Slide 38 text
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>
Slide 39
Slide 39 text
map: propSimple: propSimpleValue propList: - 11111 - 22222 - 33333 propMap: childSimple: childSimpleValue childList: - child11111 - child22222 - child33333 :".-ͰσʔλΛͭ͘Δ͚ͩ ίϝϯτॻ͚ΔͷͰ:".-ਪ +40/ͰՄ
Slide 40
Slide 40 text
そんな簡単な例ばかりじゃない
Slide 41
Slide 41 text
target.prop1 = ${target.prop1}
target.exeucte1() = ${target.execute1()}
<#assign execute2Result = target.execute2() >
target.exeucte2().id = ${execute2Result.id}
target.exeucte2().name = ${execute2Result.name}
.FUIPE$BMM
Slide 42
Slide 42 text
target: prop1: prop1Value __methods: - name: execute1 value: execute1Value - name: execute2 value: id: 100 name: foobar ϝιουఆٛͰ͖Δ ҾͷΘͳ͍ ωετ0,
Slide 43
Slide 43 text
カスタムタグ・ファンクション
Slide 44
Slide 44 text
<@div>
@div> FH'SFFNBSLFS 5BH шʆ 'VODUJPO
Slide 45
Slide 45 text
if (arguments.isEmpty()) { throw new IllegalArgumentException("Argument required.”) } return "http://$HOST${arguments[0]}" TUBUJD6SMHSPPWZ (SPPWZͰ'VODUJPOͷग़ྗΛίϯτϩʔϧ
Slide 46
Slide 46 text
_writer.write(‘
’) EJWHSPPWZ (SPPWZͰ5BHͷग़ྗΛίϯτϩʔϧ
Slide 47
Slide 47 text
ガールフレンド(仮) on Aeromock
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
対応済テンプレートエンジン ‣ Freemarker ‣ Handlebars.java ‣ Jade4J ‣ Velocity ‣ Groovy Templates ‣ Thymeleaf ‣ ଓʑରԠ༧ఆ
Slide 50
Slide 50 text
開発に必要なもの
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Aeromockで開発する利点
Slide 53
Slide 53 text
"1αʔόىಈ͕ͪແ͘ͳͬͨ αʔόαΠυʹࠨӈ͞Εͳ͘ͳͬͨ σʔλߏ͑͞ԡ͑͞ͱ͚Կͱ͔ͳΔ ϫϯλΠϜܥͷදࣔ֬ೝ͕͍͢͠ ۾ͳ͘ςετͰ͖Δ ͍ܰ νʔϜؒͰΪεΪε͠ͳ͘ͳͬͨ τϥΠΞϯυΤϥʔָ͕ :".-Ͱ໌֬ͳ༷ͷऔΓܾΊߦ͍ɺೝࣝ૬ҧ͕ݮͬͨ ઐྖҬ֎ʹ͏ίετ͕֨ஈʹݮͬͨ
Slide 54
Slide 54 text
ෳύλʔϯσʔλ ڞ௨σʔλϑΝΠϧ ΧελϜϧʔςΟϯά 7JSUVBM)PTU その他の機能たち 7BHSBOU4IBSF 7JFXͱσʔλͷςετ
Slide 55
Slide 55 text
Vagrant Share
Slide 56
Slide 56 text
7BHSBOU4IBSF ‣ 7BHSBOUͰߏஙͨ͠ήετ04ͰՔಇ͢ΔΞϓϦΛɺ Ұ࣌తʹάϩʔόϧʹެ։͢ΔΈ ‣ "FSPNPDLͰϩʔΧϧελϯυΞϩϯ൛ͱผ ʹɺ7BHSBOU4IBSFެ։༻༻ҙ͍ͯ͠Δ ‣ /HJOY"FSPNPDL#BTJDೝূߏ ‣ ྨࣅαʔϏεʹOHSPL MPDBMUVOOFM
Slide 57
Slide 57 text
ローカルを即実機確認 ࣮ॳظஈ֊͔Β࣮ػ֬ೝ ग़དྷӫ͑ͷڞ༗ૣظʹ %FWڥཁΒͣ มߋଈө
Slide 58
Slide 58 text
普及活動
Slide 59
Slide 59 text
‣ ('ʹ͏͔ͬΓಋೖͯ͠طࣄ࣮Խʹޭ ‣ ֤ϓϩδΣΫτʹσϞ࣋ͬͯӦۀ ‣ ಋೖোน؇ͷͨΊɺॳظߏΛ13Ͱೲ ‣ ӡ༻αϙʔτ ‣ ಋೖϓϩδΣΫτ͑ͨ͘Β͍
Slide 60
Slide 60 text
https://github.com/CyberAgent/aeromock Please your star and Pull Request!! 来週公開!!
Slide 61
Slide 61 text
まとめ
Slide 62
Slide 62 text
‣ ܰࢹ͞Ε͕ͪͳϑϩϯτΤϯυɺͦͷՁΛࠓҰ ݟͦ͏ ‣ ύϫʔόϥϯε͕ͳϓϩδΣΫτɺ୭͔͕ͦͷ ঈΛ͍ͬͯΔ ‣ ֤ʑ͕ྗ͖͢υϝΠϯΛࠓҰߟ͑Α͏ ‣ ։ൃޮͷϘτϧωοΫΛղফ͢ΔࡦΛߟ͑ɺ֤ʑ ͷϦιʔεΛ͍͖Ζ͏
Slide 63
Slide 63 text
止まるな、止めるな フロントエンド
Slide 64
Slide 64 text
に興味のあるひと GPMMPX!TUPSNDBU
Slide 65
Slide 65 text
ご清聴ありがとうございました - Thank you for listening -