Leveling Up Your Front-end skills

Links: https://gist.github.com/studiomohawk/8610173

Transcript

1. Leveling Up Front-end Skills Yuya Saito @ Frontrend in Fukuoka #frontrend_ff
3. Hands On Multi Tracks &
4. Yuya Saito Frontend Developer @ CyberAgent
7. Agenda Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ͸؆୯ No, it’s not! ϑϩϯτΤϯυ ɾ εΩϧΛϨϕϧΞοϓ͠Α͏ There are actually more… ͞ΒͳΔਂ෵΁ʜ How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
8. Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ͸؆୯
9. ͭͷڞ௨఺͕͋Δ HTML, CSS & JavaScript
10. ͷߴ͞ Learnability
11. WWW is Only 20 Years Old
12. HTML
13. < > TAG NAME
14. TAG NAME About 100 of
15. CSS
16. selector { property: value; }
17. selector { color: red; }
18. JavaScript
19. JavaScript ͸؆୯Ͱ͸ͳ͍ͷͰ͸
20. function if var for {} while [] try {} catch (e) {}
21. JavaScript ͸γϯϓϧͰ׮༰ͳݴޠ
22. JavaScript ͸ϒϥ΢β͑͋͞Ε͹࣮ߦͰ͖Δ
23. Learnability ͕ٕज़ͷ޿͕ΓΛੜΈग़ͨ͠ɻ
24. No, it’s not! ϨϕϧΞοϓ͠Α͏ ϑϩϯτΤϯυ ɾ εΩϧΛ
26. ϒϥ΢βͷ಺෦ߏ଄Λ஌Δ Browser Learn:
27. Browser͸։ൃ؀ڥ
28. Browser͸ϓϥοτϑΥʔϜ
29. Browser͸ιϑτ΢ΣΞ
30. html5rocks.com/en/tutorials/internals/howbrowserswork
31. Google Chrome Developer Relations Paul Irish
32. ❞ As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you'll be glad you did. - Paul Irish
33. ❞ ϒϥ΢β಺෦ͷಇ͖ΛֶͿࣄ͸ 8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ ͜ͷهࣄ͸௕͍΋ͷͰ͸͋Γ·͕͢ɺ গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱ͸อূ͠·͢ɻ - Paul Irish
34. chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
35. ۜͷ஄ؙ͸ଘࡏ͠ͳ͍ɻ ͔͠͠஄ؙͦͷ΋ͷ͸ଘࡏ͍ͯ͠Δɻ ஄ؙͷબͼํΛֶͿ͜ͱ͕େ੾ɻ Learn:
36. ߏ଄΍ઃܭͷํ๏Λ஌Δ JavaScript Learn:
37. jQuery͚ͩͰ͸΋͸΍े෼Ͱ͸ͳ͍ɻ Not Just jQuery
38. jQuery͸ͲΜͳ໰୊Λղܾ͠Α͏ͱ What jQuery is? ͍ͯ͠Δͷ͔
39. JavaScriptʹ͓͚ΔΞϓϦͷઃܭ Architecture
40. ໾ׂ෼୲ΛͲ͏෼཭ɾ݁߹͢Δͷ͔ MV*
41. Backbone.js Angular.js Ember.js ͦΕͧΕʹར఺ͱܽ఺͕͋Δɻ
42. ίϝϯτΛؚΊͯ΋1,600ߦఔ౓ Read: Backbone.js
43. TODOΞϓϦҎ֎ͷαϯϓϧΛ ࡞ͬͯΈΔɻ with Backbone.js
44. Angular.jsͰॻ͖׵͑ͯΈΔɻ
45. MV*͕ͲΜͳ໰୊Λ ղܾ͠Α͏ͱ͍ͯ͠Δͷ͔ Learn:
46. Fail Fast Fail Often
47. ߏ଄΍ઃܭͷํ๏Λ஌Δ CSS Learn:
48. CSS: Style Layout Animation
49. CSS needs Architecture, too ͦͷͨΊͷػೳ͸ଘࡏ͠ͳ͍ͱ͍͏ໃ६
50. Learn: CSS Preprocessor
51. CSS Preprocessor Learn: Doesn’t Solve it! CSSͷઃܭΛ༰қʹͯ͘͠ΕͨΓ͸͠ͳ͍
52. OOCSS SMACSS BEM by Nicole Sullivan by Jonathan Snook by Yandex
53. They’re just An Example. ͜ΕΒͷํ๏࿦͸͋͘·Ͱ΋ྫɻ
54. ͳΜͲ΋܁Γฦ͞ΕΔɺ ͋Δ͍͸܁Γฦ͢͜ͱ͕Ͱ͖Δɺ ύλʔϯΛͲͷΑ͏ʹ ൃݟ͠ɺ ࣮૷͠ɺ ໋໊͢Δͷ͔ɻ
55. by ୩ ୓थ 15:30~ @ ձٞࣨ5 Goal of Better CSS Architecture
56. youtu.be/BlSFXdnuq5E
57. Modularity Learn: ϞδϡϥʔԽΛ஌Δ
58. More Than A Few Thousand Lines of Codes ਺ઍߦʹ΋ٴͿίʔυ΋௝͘͠ͳ͍ɻ
59. ͳΜͷσβΠϯઃܭ΋ͳ͘ɺ ୯७ʹϑΝΠϧΛ෼ׂͯ͠࡞ۀΛߦ͑͹ ϖʔδϩʔυͷ࠷దԽͷجຊݪଇͰ͋Δɺ HTTPϦΫΤετΛ ૿΍͢͜ͱʹͳͬͯ͠·͏ɻ
60. CSSͳΒ·ͩ͠΋ɺ JavaScriptʹ͸ղফ͠ͳ͚Ε͹ͳΒͳ͍ ґଘؔ܎΋࣮֬ʹଘࡏ͢ΔͰ͠ΐ͏ɻ
61. Modular Design
63. Module Design JavaScriptʹ΋CSSʹ΋ݱ࣌఺Ͱ͸ ͜ͷϒϩοΫ޻๏Λ࣮ݱ͢ΔͨΊͷ ػೳ͸ݴޠͱͯ͠༻ҙ͞Ε͍ͯͳ͍ɻ
64. There are Tools (a lot)
65. Require.js by James Burke
66. Learn: Asynchronous Module Definition
67. Require.js is Good But... Require.jsʹ΋໰୊͸͋Δ...
68. Node.js IS JavaScript But... Node.jsͰ͸ฉ͔ͳ͍໰୊...?
69. CommonJS
70. Browserify.js by James Holiday AKA substack
71. ES6 import / export
72. CSS?
73. Testing Learn: ϢχοτςετΛ஌Δ
74. Linting is First Step to Test ·ͣLint͔Β࢝ΊΔ
75. ࣗ৴Λ࣋ͬͯؒҧ͍Λਖ਼͢ ϫʔΫϑϩʔΛ࣋ͭɻ
76. Refactoring
77. Learn: Jasmine Mocha or
78. CSS?
79. CSS needs Testing
80. Not Yet
81. speakerdeck.com/studiomohawk/testable-javascript
82. speakerdeck.com/studiomohawk/unit-testing-with-jasmine
83. Performance Learn: ύϑΥʔϚϯεΛ஌Δ
84. ύϑΥʔϚϯε͸ػೳ
85. Tools, not Rules. - Paul Lewis
86. ϕετ͕ৗʹϕετͱ͸ݶΒͳ͍ɻ
87. -webkit-transform: translate3d(0,0,0);
88. What we can measure, we can optimize! - Ilya Grigorik
90. Network Panel
91. Timeline Panel
92. Profile Panel
93. developers.google.com/chrome-developer-tools/
94. There are actually more… ͞ΒͳΔਂ෵΁ʜ
95. Quick Peek ͘͝؆୯ʹɻ
96. Cross Brower Platform Device
97. Test Early
98. $49, Mac Only GhostLab
99. github.com/shakyShane/browser-sync
100. Progressive Enhancement
101. ৗʹ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱΛ ظ଴͞Εͳ͕Βɺ աڈͷϒϥ΢β΁ͷରԠΛഭΒΕΔໃ६ɻ
102. Progressive Enhancement͸ ϑϩϯτΤϯυ։ൃऀͷಠஃ৔ɻ
103. ϒϥ΢β΍σόΠεͰ੍ݶΛ ߟ͑ΔͷͰ͸ͳ͘ɺ ίϯϙʔωϯτ୯ҐͰઓུΛߟ͑Δɻ
104. !lamentgroup.com/lab/grade_components/
105. Template
106. HTMLΛͦͷ··هड़͢Δ͜ͱ͕ ݮ͖͍ͬͯͯΔɻ
107. No Choice on Server Side αʔόαΠυͷςϯϓϨʔτʹ͍ͭͯ͸ զʑʹબ୒ࢶ͕༩͑ΒΕΔ͜ͱ͸ͳ͍ɻ
108. CMSΛؚΊͯɺ ϝδϟʔͳϑϨʔϜϫʔΫͰ ࠾༻͞Ε͍ͯΔςϯϓϨʔτݴޠʹ͍ͭͯ͸ ͓֮͑ͯ͘΂͖ɻ
109. Too Many on Client Side ΫϥΠΞϯταΠυʹ͸΋͸΍ બ୒͢Δ͜ͱ͕೉͍͠΄Ͳଘࡏ͢Δɻ
110. Handlebars.js Underscore.js
111. Research
112. Advocate for the Open Web Molly Holzschlag
113. ❞ If you want to be doing the same things for the next 10 years, you're in the wrong job. - Molly Holzschlag
114. ❞ ࣍ͷ೥ؒɺ ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ ࢥ͏ͳΒɺ ͜ͷۀք͸޲͍͍ͯͳ͍ɻ - Molly Holzschlag
115. Web will be always Changing.
116. Inovation
117. Self Learning
118. Πϊϕʔγϣϯʹରͯ͠ ৗʹහײͰ͋Γ͚ͭͮΔ͜ͱ͸ ϑϩϯτΤϯυ։ൃऀͷ੹຿ɻ
119. ৘ใऩू͸श׳Խ͕伴ɻ
120. How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
121. ֫ಘͰ͖Δͷ͔ Ͳ͏ͨ͠Β͜ΕΒͷεΩϧΛ
122. ਫ਼௨͍ͯ͠Δͷ͔ ࢲࣗ਎͢΂ͯͷεΩϧʹ Better Question
123. No.
124. ͋Δ͸ͣͰ͢ɻ օ͞Μʹ΋ಘҙͳδϟϯϧ͸ ूத͢Δ΂͖ɻ ·ͣ͸ͦ͜Λ৳͹͍ͯ͘͜͠ͱʹ
125. T ❌
126. I
129. ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕ Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ ඞͣग़͖ͯ·͢ɻ
132. Homework Կ͕ಘҙͳͷ͔ Կʹڵຯ͕͋Δͷ͔
133. What’s your Goal?
134. Apple CEO Steve Jobs
135. ❞ You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. - Steve Jobs
136. ❞ ઌΛಡΜͰ఺ͱ఺Λͭͳ͙͜ͱ͸Ͱ͖·ͤΜɻ ޙ͔ΒৼΓฦͬͯॳΊͯͰ͖ΔͷͰ͢ɻ ͦΕΒͷ఺͸ඞͣͲ͔͜ͷະདྷͰ ͭͳ͕Δ͜ͱΛ৴͡ͳ͚Ε͹ͳΒͳ͍ͷͰ͢ɻ - Steve Jobs
137. One More Thing...
138. Ask Why, Not How.
139. Thank You! Follow me @ cssradar