Leveling Up Your Front-end skills

Transcript

1. Leveling Up Front-end Skills Yuya Saito @ Frontrend in Fukuoka

   #frontrend_ff
2. None

3. Hands On Multi Tracks &

4. Yuya Saito Frontend Developer @ CyberAgent

5. None
6. None

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! ϨϕϧΞοϓ͠Α͏ ϑϩϯτΤϯυ ɾ εΩϧΛ

25. None

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

62. None

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

89. None

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

127. None
128. None

129. ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕ Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ ඞͣग़͖ͯ·͢ɻ

130. None
131. None

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