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