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

改善React道

Avatar for hosomichi hosomichi
February 17, 2016
1.1k

 改善React道

20160217 OSSユーザのための勉強会

Avatar for hosomichi

hosomichi

February 17, 2016
Tweet

Transcript

  1. ࣗݾ঺հ ॴଐݞॻɿɹɹɹɹɹɹɹɹ+4εϖγϟϦετ 5XJUUFSIPTPNJDIJ !KTIPTPNJDIJ  2JJUBIPTPNJDIJ +4͓͘ͷ΄ͦಓ  ࠷ۙͷ͓࢓ࣄ ɹɾ+4ͷςΫχΧϧͳࣄฑʹؔ͢ΔΑΖͣ԰

    ɹɾΠϯλʔωοτ޿ࠂ؅ཧը໘։ൃ ɹɾΠϯλʔωοτ޿ࠂ഑৴+4։ൃ ɹɹɾΞϓϦέʔγϣϯઃܭ։ൃίʔυϨϏϡʔ ɹɹɾπʔϧϥΠϒϥϦબఆಋೖ։ൃ 
  2. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  

    Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  3. γεςϜߏ੒ HTML JS Web Server Web App Data base Other

    App Other App Other App ɾ)5.-ͱ+4͸੩తϑΝΠϧ αʔόੜ੒Ͱ͸ͳ͍  ɾը໘Ұ෦඼໺ͨΊʹ3FBDUͰ࡞ͬͨΓ͸͍ͯ͠ͳ͍ ɾ)5.-͸΄΅ۭͰը໘͸+4ϑΝΠϧͰ֓Ͷߏங ɾը໘ͱαʔόʔαΠυ͸ҟͳΔϦϙδτϦӡ༻ Repository A Repository B Web Server Ϣʔβ޲͚഑৴ Ajax௨৴ ͸సૹ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃
  4. ॳظνʔϜ ى্ͪ͛ظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾجૅઃܭ։ൃ ɹɾ։ൃϧʔϧࡦఆ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ

    ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ やるべきことの範囲が広いが、 まだアプリもそこまで複雑ではないし、 殆どのコードに目を通している状態 なので、管理はし易い状態
  5. ࣣϲ݄ޙͷνʔϜ ֦େظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ੒

    σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ νʔϜ௕ /&8  ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ एख /&8  ɹɾػೳ։ൃ やるべきことの範囲は狭まったが コード量や複雑化度合いは増し、 人も増えたのでアンコントローラブル な部分も増えました。
  6. ࠓ೥࢛݄Ҏ߱ͷνʔϜ .PSF֦େظ ʙਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ੒

    σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ एख ɹɾػೳ։ൃ ߋʹ̎ʙ̏ਓ+0*/ͷ ༧ఆ νʔϜ௕ ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ コードの書き手がさらに増え、放った らかしにしておくとカオス状態に成る のが目に見えています。
  7. ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ 8FCαʔό HVMQpMFKT͸͜Ε͚ͩͰ ྑ͍ͱࢥͬͯ·͢ɻ HVMQXFCTFSWFSͷػೳͱͯ͠͸ ɾ8FCαʔό ɾ-JWF3FMPBE +4ߋ৽࣌ʹϒϥ΢βߋ৽  ɾϓϩΩγػೳ

    "KBYϦΫΤετΛผαʔόʹࡹ͚Δ  Λ࢖ͬͯ·͢ɻศརʂ  ϓϩΩγͷ63-पΓʹมͳڍಈ΋͋ΔΜͰ͕͢ɻ సૹޙͷ63-຤ඌʹ͕উखʹ෇͘ 
  8. Browser HTML JS Web Server Web App Web Server Ajax௨৴సૹ

    (Gulp-WebServerͷϓϩΩγ) ͜ͷηοτͰϘνϘνੜ࢈ੑ͍͋͛ͯ·͢ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ίʔυมߋ -> Webpackͷ watchϏϧυ(଎͍) LiveReloadͰࣗಈϒϥ΢βߋ৽
  9. ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ΤσΟλ 8FC4UPSN "UPN $ISPNF ϓϩμΫτίʔυ͸ ओʹίϨͰॻ͍ͯ·͢ɻ ϝϯόʔશһ࢖ͬͯ·͢ɻ ແ͍ͱਏ͍Ͱ͢ɻ ϥΠϒϥϦΛ࢖ͬͨΓͨ͠

    ͪΐͬͱͨ͠ίʔυεχϖοτ ࡞੒ʹ࢖ͬͯ·͢ɻ #0.ͱ͔ωΠςΟϒϝιου͸ $ISPNFίϯιʔϧ࢖ͬͯ·͢ɻ ਆิ׬ɻ