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

俺的フロントレンド2013総括

1644fba8a219c89987390ef4f23d06bf?s=47 Ayumu Sato
December 18, 2013

 俺的フロントレンド2013総括

と、コラボ特別編「JavaScript engineer's Night~サイバーエージェント×DeNA フロントエンドエンジニアの仕事@渋谷ヒカリエ~」 http://www.creativevillage.ne.jp/PR/seminar109.html で利用したスライドです。本編10分(!!)

1644fba8a219c89987390ef4f23d06bf?s=128

Ayumu Sato

December 18, 2013
Tweet

Transcript

  1. ԶతϑϩϯτϨϯυ ૯ׅ ͱɺίϥϘ $ZCFS"HFOU *OD"ZVNV4BUP http://www.flickr.com/photos/scion02b/2684518880

  2. "ZVNV4BUP ࠤ౻า ͞ͱ͏͋ΏΉ  !BIPNV ϑϩϯτΤϯυ ΤϯδχΞcϒϩΨʔcεϐʔΧʔ  IUUQBIPNV

  3. http://www.flickr.com/photos/ektogamat/2687444500 ৽ŋେ ϑϩϯτϨϯυ

  4. )JHI1FSGPSNBODF8FC'SPOUFOE ೥݄೔ ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ

  5. < 1000ms ࢮकઆ@ϞόΠϧ http://googlewebmastercentral-ja.blogspot.jp/2013/08/making-smartphone-sites-load- fast.html

  6. ʁ

  7. High Performance Web Frontend http://www.flickr.com/photos/tbisaacs/2407175368

  8. ! /FUXPSL $PNQVUF # 3FOEFS

  9. ͜͜Ͱ༗ݖऀʹ ૌ͍͑ͨͷ͸

  10. Χοίྑͯ͘΋ ஗͍αΠτ͸Ϋι

  11. ΫιͳͷͰ ͋Γ·͢

  12. Web Frontend Rendering Per formance Knowledge & Tips http://www.flickr.com/photos/ryanready/4996206922

  13. ඇྗͳ8FCͱ ૷০ίετ

  14. 5IF#VUUPO

  15. {} {} /* ͍ΘΏΔϘλϯ */ ! .the_button { ! width:

    200px; height: 50px; ! ! background: linear-gradient (top, #48a2fb, #005cc2); border-radius: 5px; box-shadow: 0 3px 5px rgba(0,0,0,0.6) } 5IF@#VUUPODTT -BZPVU 1BJOU
  16. OPOF   CPYTIBEPX  CPSEFSSBEJVT  EPUUFECPSEFS  TIBEPX

    EPUUFE  TIBEPX SBEJVT  SBEJVT EPUUFE  BMMNJY  http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html
  17. ύϑΥʔϚϯε ˍ ࣮ߦ؀ڥͷཧղ

  18. K2VFSZUP#BDLCPOF+4"SDIJUFDUVSF ೥݄೔ ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ

  19. jQuery to Backbone アーキテクチャを意識したJavaScript入門 http://www.flickr.com/photos/vagawi/2257918524

  20. Backbone $ Router # % # # Views Models Collection

    via. Backbonification - Migrating NewsBlur From DOM Spaghetti to Backbone.js https://speakerdeck.com/samuelclay/backbonification-migrating-newsblur-from-dom-spaghetti-to-backbone-dot-js?slide=12
  21. ·ͣ༗ݖऀʹ ૌ͍͑ͨͷ͸

  22. #BDLCPOF "OHVMBS ͲͪΒ͕ྑ͍͔ʁ

  23. *U%FQFOET ࣌ͱ৔߹ʹΑΔ

  24. ࣍ͷτϨϯυ͕ ͙͢ʹདྷΔ͚ͩ ͳͷͰ͋Γ·͢

  25. +4Λ८Δ ΞʔΩςΫνϟ͸ طʹڥք͕ᐆດ

  26. MEAN Stack http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb- expressjs-angularjs-and

  27. Full-Stack JavaScript http://coding.smashingmagazine.com/2013/11/21/introduction-to-full- stack-javascript/

  28. Node UI Layer http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web- front-end/

  29. Web Components http://www.w3.org/standards/techs/components#w3c_all

  30. γεςϜશମʹ దԠ͢Δ஍ྗ

  31. ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ ೥Y݄Z೔ -BOHVBHF#BSSJFS

  32. ݴޠͷน -BOHVBHF#BSSJFS

  33. Stack Overflow http://stackoverflow.com/

  34. 74

  35. Yahoo! ஌ܙା http://chiebukuro.yahoo.co.jp

  36. w ӳޠݍϦιʔεͷޡ༁ΩϡϨʔγϣϯʹ࿭Θ͞ΕΔ w 4UBDL0WFSqPXʹࡌͬͯΔࣄΛ೔ຊޠͰ୳͠ճΔ w 044ࢁࢣͷΞδςʔγϣϯʹৼΓճ͞ΕΔ w ਺ϲ݄୯Ґͷ͕࣌ࠩ͋Δ৘ใΛ༗ྉηϛφʔͰฉ͘ w ͭΒ͍

    ӳޠݍͱͷ஗ԆϦεΫ
  37. ͱʹ͔͘༗ݖऀʹ ૌ͍͑ͨͷ͸

  38. ΋͠ӳޠΛ ආ͚͍ͯΔ ͷͰ͋Ε͹

  39. ӳޠΛಡΊͳ͍ ΑΓ΋ਂࠁͳ ෆརӹΛඃͬͯ ͍ΔͷͰ͋Γ·͢

  40. raad.aho.mu http://read.aho.mu/

  41. Smashing Magazine http://coding.smashingmagazine.com/

  42. A List Apart http://alistapart.com/

  43. HTML5 Rocks http://www.html5rocks.com/

  44. Daily JS http://dailyjs.com/

  45. FT Labs http://labs.ft.com/

  46. Bocoup Blog http://weblog.bocoup.com/

  47. Google+ Communities https://plus.google.com/communities/

  48. ͕Μ͹Ζ͏

  49. http://www.flickr.com/photos/ektogamat/2687444500 ૯࿦

  50. 4ZTUFN"SDIJUFDUVSF ⚙ ( 1SPEVDU2VBMJUZ ♥ 'SPOUFOE %FTJHOFS &OHJOFFS

  51. wϑϩϯτͷઐ໳ੑͰΠχγΞνϒΛ࣋ͯ w஥ཱͪͱόϥϯεײ֮ΛॏΜ͡Α wϙʔτϑΥϦΦΛݟ௚͠ଓ͚Α ϑϩϯτੜଘઓུ

  52. Thank you IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! ⌂ http://www.flickr.com/photos/mujitra/4231528810