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

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

Transcript

1. ԶతϑϩϯτϨϯυ
   ૯ׅ ͱɺίϥϘ
   
   $ZCFS"HFOU
   *OD
   
   "ZVNV
   4BUP http://www.flickr.com/photos/scion02b/2684518880
2. "ZVNV
   4BUP ࠤ౻
   า
   
   ͞ͱ͏
   ͋ΏΉ
   
   !BIPNV
   ϑϩϯτΤϯυ ΤϯδχΞcϒϩΨʔcεϐʔΧʔ
   IUUQBIPNV
3. “
4. http://www.flickr.com/photos/ektogamat/2687444500 ৽ŋେ
   
   ϑϩϯτϨϯυ
5. )JHI
   1FSGPSNBODF
   8FC
   'SPOUFOE ೥݄೔ ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ
6. < 1000ms ࢮकઆ@ϞόΠϧ http://googlewebmastercentral-ja.blogspot.jp/2013/08/making-smartphone-sites-load- fast.html
7. ʁ
8. High Performance
   Web Frontend http://www.flickr.com/photos/tbisaacs/2407175368
9. ! /FUXPSL $PNQVUF # 3FOEFS
10. ͜͜Ͱ༗ݖऀʹ
    ૌ͍͑ͨͷ͸
11. Χοίྑͯ͘΋
    ஗͍αΠτ͸Ϋι
12. ΫιͳͷͰ
    ͋Γ·͢
13. Web Frontend Rendering Per formance Knowledge & Tips http://www.flickr.com/photos/ryanready/4996206922
14. ඇྗͳ8FCͱ
    ૷০ίετ
15. 5IF
    #VUUPO
16. {} {} /* ͍ΘΏΔϘλϯ */ ! .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
17. OPOF
    
     CPYTIBEPX
    
     CPSEFSSBEJVT
     EPUUFECPSEFS
    
     TIBEPX EPUUFE
    
     TIBEPX SBEJVT
    
     SBEJVT EPUUFE
    
     BMM
    NJY
    
     http://havelog.ayumusato.com/develop/performance/e560- css_rendering_with_skia_debugger.html
18. ύϑΥʔϚϯε
    ˍ
    ࣮ߦ؀ڥͷཧղ
19. K2VFSZ
    UP
    #BDLCPOF
    +4
    "SDIJUFDUVSF ೥݄೔ ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ
20. jQuery to
    Backbone
    アーキテクチャを意識したJavaScript入門 http://www.flickr.com/photos/vagawi/2257918524
21. 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
22. ·ͣ༗ݖऀʹ
    ૌ͍͑ͨͷ͸
23. #BDLCPOF
    "OHVMBS
    ͲͪΒ͕ྑ͍͔ʁ
24. *U
    %FQFOET
    ࣌ͱ৔߹ʹΑΔ
25. ࣍ͷτϨϯυ͕
    ͙͢ʹདྷΔ͚ͩ
    ͳͷͰ͋Γ·͢
26. +4Λ८Δ
    ΞʔΩςΫνϟ͸
    طʹڥք͕ᐆດ
27. MEAN Stack http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb- expressjs-angularjs-and
28. Full-Stack JavaScript http://coding.smashingmagazine.com/2013/11/21/introduction-to-full- stack-javascript/
29. Node UI Layer http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web- front-end/
30. Web Components http://www.w3.org/standards/techs/components#w3c_all
31. γεςϜશମʹ
    దԠ͢Δ஍ྗ
32. ৽ŋ̏େʮ'SPOUFOEͷτϨϯυʯ ೥Y݄Z೔ -BOHVBHF
    #BSSJFS
33. ݴޠͷน
    -BOHVBHF
    #BSSJFS
34. Stack Overflow http://stackoverflow.com/
36. Yahoo! ஌ܙା http://chiebukuro.yahoo.co.jp
37. w ӳޠݍϦιʔεͷޡ༁ΩϡϨʔγϣϯʹ࿭Θ͞ΕΔ
    w 4UBDL
    0WFSqPXʹࡌͬͯΔࣄΛ೔ຊޠͰ୳͠ճΔ
    w 044ࢁࢣͷΞδςʔγϣϯʹৼΓճ͞ΕΔ
    w ਺ϲ݄୯Ґͷ͕࣌ࠩ͋Δ৘ใΛ༗ྉηϛφʔͰฉ͘
    w ͭΒ͍ ӳޠݍͱͷ஗ԆϦεΫ
38. ͱʹ͔͘༗ݖऀʹ
    ૌ͍͑ͨͷ͸
39. ΋͠ӳޠΛ
    ආ͚͍ͯΔ
    ͷͰ͋Ε͹
40. ӳޠΛಡΊͳ͍
    ΑΓ΋ਂࠁͳ
    ෆརӹΛඃͬͯ
    ͍ΔͷͰ͋Γ·͢
41. raad.aho.mu http://read.aho.mu/
42. Smashing Magazine http://coding.smashingmagazine.com/
43. A List Apart http://alistapart.com/
44. HTML5 Rocks http://www.html5rocks.com/
45. Daily JS http://dailyjs.com/
46. FT Labs http://labs.ft.com/
47. Bocoup Blog http://weblog.bocoup.com/
48. Google+ Communities https://plus.google.com/communities/
49. ͕Μ͹Ζ͏
50. http://www.flickr.com/photos/ektogamat/2687444500 ૯࿦
51. 4ZTUFN
    "SDIJUFDUVSF ⚙ ( 1SPEVDU
    2VBMJUZ ♥ 'SPOUFOE %FTJHOFS &OHJOFFS
52. wϑϩϯτͷઐ໳ੑͰΠχγΞνϒΛ࣋ͯ
    w஥ཱͪͱόϥϯεײ֮ΛॏΜ͡Α
    wϙʔτϑΥϦΦΛݟ௚͠ଓ͚Α ϑϩϯτੜଘઓུ
53. Thank you
    
    IUUQBIPNV
    
    
    !BIPNV
    
    
    HJUIVCDPNBIPNV
    ! ⌂ http://www.flickr.com/photos/mujitra/4231528810