A Recipe for Modern Mobile Front-end Development

HTML5 Conference 2013 @ 2013.11.30
Follow up: http://d.pr/WvTf

Transcript

1. Development
   A Recipe for
   Modern Mobile
   Frontend
   HTML5 Conference 2013
   2013.11.30
   13:00~ @Room5A 5F
   

   View Slide

2. ?
   

   View Slide

3. < 10%?
   

   View Slide

4. 25%?
   

   View Slide

5. 60%?
   

   View Slide

6. No Hand?
   

   View Slide

7. 25%!
   

   View Slide

8. Yuya Saito
   Frontend Developer
   @ CyberAgent
   

   View Slide

9. View Slide

10. View Slide

11. events.html5j.org/conference/2013/11/sessions
    

    View Slide

12. Agenda
    Code
    Performance
    Automation
    

    View Slide

13. Code
    

    View Slide

14. Scaffolding
    

    View Slide

15. ଍৔ Scaffolding
    

    View Slide

16. Brunch
    brunch.io
    

    View Slide

17. Yeoman
    yeoman.io
    

    View Slide

18. $44ϓϦϓϩηοαͷίϯύΠϧ
    $P⒎FF4DSJQUͳͲͷίϯύΠϧ
    ϑΝΠϧͷ࿈݁ϛχϑΝΠ
    Ϣχοτςετ
    +4)JOU΍$44-JOUͳͲͷ-JOUπʔϧ
    ࣗಈϦϩʔυ
    

    View Slide

19. Too much to set up?
    Just modify it!
    

    View Slide

20. Coding Guideline
    

    View Slide

21. Code is read much more often
    than it is written,
    so plan accordingly.
    - Raymond Chen
    ❞
    

    View Slide

22. ίʔυ͸ॻ͘ػձΑΓಡΉػձͷํ
    ͕ѹ౗తʹଟ͍ɻ
    ͔ͩΒͦ͜ɺ
    ͔ͬ͠Γͱܭը͢Δ΂͖ͩɻ
    - Raymond Chen
    ❞
    

    View Slide

23. JavaScript
    

    View Slide

24. github.com/airbnb/javascript
    

    View Slide

25. github.com/Seravo/js-winning-style
    

    View Slide

26. CSS
    

    View Slide

27. github.com/csswizardry/CSS-Guidelines
    

    View Slide

28. github.com/necolas/idiomatic-css
    

    View Slide

29. HTML / CSS
    

    View Slide

30. by ୩୓थ
    Ϟμϯͳ$44ઃܭύλʔϯΛߟ͑Δ
    16:15~ @ Room1A 1F
    

    View Slide

31. 
    ❌
    

    View Slide

32. Interactions
    Animations
    

    View Slide

33. ίʔυ͸ཧղ͠΍͘͢ͳ͚Ε͹
    ͳΒͳ͍ɻ
    

    View Slide

34. Philip Walton
    Frontend software engineer
    @ Appfolio
    

    View Slide

35. Predictable
    Reusable
    Maintainable
    Scalable
    

    View Slide

36. Methodologies
    

    View Slide

37. by Nicole Sullivan
    OOCSS
    

    View Slide

38. Object in CSS:
    

    View Slide

39. Basically, a CSS “object” is a
    repeating visual pattern, which
    can be abstracted into an
    independent snippet of HTML,
    CSS, and possibly JavaScript. Once
    created, an object can then be
    reused throughout a site.
    - Nicole Sullivan
    ❞
    

    View Slide

40. جຊతʹ$44ʹ͓͍ͯɺ
    ͋Δ
    ʮΦϒδΣΫτʯ
    ͱ͸܁Γฦ͞ΕΔϏ
    δϡΞϧύλʔϯͰ͋Γɺ
    )5.-΍$44ɺ
    ΋͔͢͠Δͱ+BWB4DSJQUͰॻ͔Εͨಠཱ͠
    ͨεχϖοτͱͯ͠ந৅ԽͰ͖Δ΋ͷͰ͋
    Δɻ
    ·ͨҰ౓ੜ੒ͨ͠ΦϒδΣΫτ͸
    αΠτ಺Ͱ࠶ར༻Ͱ͖Δ΋ͷͰ͋Δɻ
    ❞
    - Nicole Sullivan
    

    View Slide

41. github.com/stubbornella/oocss/wiki
    

    View Slide

42. by Jonathan Snook
    SMACSS
    

    View Slide

43. Base
    State
    Layout
    Module
    Theme
    

    View Slide

44. Base is the default
    

    View Slide

45. State is ...uh, state
    

    View Slide

46. smacss.com/ja
    

    View Slide

47. by Yandex
    BEM
    

    View Slide

48. Block
    Element
    Modifier
    

    View Slide

49. We used BEM principles to create
    a set of front-end development
    techniques and tools, that allow
    us to build websites quickly and
    maintain them over a long
    time.
    ❞
    

    View Slide

50. BEM can pick up
    where SMACSS left off.
    

    View Slide

51. bem.info
    

    View Slide

52. Build Systems,
    Not Pages.
    

    View Slide

53. OOCSS, SMACSS, BEM are
    just ONE of the solutions!
    

    View Slide

54. JavaScript
    

    View Slide

55. MV*
    

    View Slide

56. Backbone.js
    Ember.js
    Angular.js
    

    View Slide

57. SPAs
    Single Page Applications
    

    View Slide

58. 
    
    
    

    View Slide

59. Pros / Cons
    

    View Slide

60. Pros
    

    View Slide

61. Simplify Server Side Tasks
    +40/Λڙڅ͢Δ୯७ͳ"1*αʔϏεͷ
    Α͏ʹͳΔ
    

    View Slide

62. Runs Almost Anywhere
    +4͕࣮ߦͰ͖Δ؀ڥͰ͋Ε͹ɺ
    Ͳ͜Ͱ΋
    ಈ࡞͢Δ
    

    View Slide

63. Many Existing Toolkits
    ͢Ͱʹଟ͘ͷϑϨʔϜϫʔΫ΍πʔϧ͕
    ଘࡏ͢Δ
    

    View Slide

64. Cons
    

    View Slide

65. Bad for Performance
    +BWB4DSJQUϑΝΠϧαΠζͷංେԽ
    

    View Slide

66. No SEO
    Ϋϩʔϥ͸+BWB4DSJQUΛ࣮ߦ͠ͳ͍
    

    View Slide

67. Progressive Enhancement
    ωοτϫʔΫରԠ΍ύϑΥʔϚϯεʹ
    ؔΘΔΤϯϋϯεϝϯτ͕೉͍͠
    

    View Slide

68. by LZP@BHP
    14:00~ @ Room5B 5F
    ΦϑϥΠϯ8FCΞϓϦέʔγϣϯͷ
    ʮબ୒ࢶʯ
    

    View Slide

69. by খݪོ࿠
    16:15~ @ Room5A 5F
    ஍ԼమYαΫαΫY͜Ε͔Βͷ
    8FCήʔϜΞϓϦ͕උ͑Δ΂͖
    ͭͷػೳ
    

    View Slide

70. Performance
    in
    SPAs
    

    View Slide

71. CSS
    JS
    
    

    View Slide

72. 
    ⏳
    
    

    View Slide

73. is on
    Google PageSpeed Insights
    ATF
    

    View Slide

74. A T F
    bove he old
    ϑΝʔετϏϡʔ
    

    View Slide

75. from Server
    HTML
    Just for this area
    ONLY
    

    View Slide

76. Performance
    

    View Slide

77. Jeff Atwood
    AKA Coding Horror
    

    View Slide

78. To me, performance is a feature [...]
    I think there's also a lesson to be
    learned here about the competitive
    landscape of the public internet, where
    there are two kinds of websites: the
    quick and the dead.
    ❞
    - Jeff Atwood
    

    View Slide

79. ࢲ͸ύϑΥʔϚϯεΛػೳͰ͋Δͱ
    ߟ͍͑ͯΔɻ
    <>͜ͷڝ૪ͷଟ͍Πϯλʔωοτͷੈք
    Ͱ஌͓ͬͯ͘΂͖Ϩοεϯ͕͋Δͱ͠Βɺ
    ͜ͷੈʹ͸छྨͷ8FCαΠτ͔͠ͳ͍
    ૣ͍͔ɺࢮΜͰ͍Δ͔ͷͲͪΒ͔ͩɻ
    - Jeff Atwood
    ❞
    

    View Slide

80. Someday...
    Not Now.
    

    View Slide

81. Performance
    ϖʔδ͕ಡΈࠐ·ΕΔ·Ͱͷ଎͞
    Ϣʔβૢ࡞ʹର͢ΔϑΟʔυόοΫͷ଎͞
    

    View Slide

82. ϖʔδ͕ಡΈࠐ·ΕΔ·Ͱͷ଎͞
    Page Load Performance
    

    View Slide

83. View Slide

84. Steve Souders
    Web Performance Engineer
    

    View Slide

85. Performance Budget
    

    View Slide

86. 1 second
    

    View Slide

87. www.nngroup.com/articles/response-times-3-important-limits
    

    View Slide

88. 1 second!?
    "5'಺ͳΒͳΜͱ͔ʜʜ
    

    View Slide

89. www.strangeloopnetworks.com/web-performance-infographics
    

    View Slide

90. (More Realistic)
    Performance Budget:
    3 seconds
    

    View Slide

91. Case Study: Fail
    

    View Slide

92. Case 1: ը૾ͷ࠷దԽॲཧ๨Ε
    

    View Slide

93. Case 2: $44ϑΝΠϧαΠζ͕ڊେ
    

    View Slide

94. Case 2: $44ϑΝΠϧαΠζ͕ڊେ
    DataURI? CSS Sprite!
    

    View Slide

95. Case 2: $44ϑΝΠϧαΠζ͕ڊେ
    Preprocessor? Check CSS!
    

    View Slide

96. "Tools, not rules!"
    - Paul Lewis
    

    View Slide

97. Google PageSpeed Insights
    

    View Slide

98. Google PageSpeed Insights
    developers.google.com/speed/pagespeed/insights
    

    View Slide

99. Google Chrome DevTools
    

    View Slide

100. Google Chrome DevTools
     developers.google.com/chrome-developer-tools
     

     View Slide

101. WebPageTest.org
     

     View Slide

102. WebPageTest.org
     www.webpagetest.org
     

     View Slide

103. Ϣʔβૢ࡞ʹର͢ΔϑΟʔυόοΫͷ଎͞
     Rendering Performance
     

     View Slide

104. by ࠤ౻า
     17:15~ @ Room5B 5F
     8FCϑϩϯτΤϯυͷ
     ϨϯμϦϯάύϑΥʔϚϯεͱ
     ࠷దԽ5JQT
     

     View Slide

105. 16.66ms
     

     View Slide

106. 24FPS
     

     View Slide

107. Frame Per Second
     ඵʹίϚ
     

     View Slide

108. Jank Busters
     Chrome Rendering Performance
     via
     jankfree.org/jank-busters-io-2013/template.html#6
     

     View Slide

109. Paint / Layout
     

     View Slide

110. Paint
     Scroll, Animation and etc...
     

     View Slide

111. DOM Node
     DOM Node
     DOM Node
     DOM Node DOM Node
     Node
     

     View Slide

112. Layout
     

     View Slide

113. View Slide

114. gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
     

     View Slide

115. Analyze in DevTools
     Again, "Tools, not rules!"
     

     View Slide

116. Timeline Panel
     

     View Slide

117. Timeline Panel
     developers.google.com/chrome-developer-tools/docs/timeline
     

     View Slide

118. Show Paint Rectangles
     

     View Slide

119. Show Paint Rectangles
     

     View Slide

120. Continuous Page Repainting
     

     View Slide

121. Continuous Page Repainting
     

     View Slide

122. Automation
     

     View Slide

123. gruntjs.com
     

     View Slide

124. by ੴຊޫ࢘
     17:15~ @ Room1A 1F
     ࠓͲ͖ͷ(SVOUΛ࢖ͬͨ
     ϑϩϯτΤϯυ։ൃ
     ʢ)5.-$44ฤʣ
     

     View Slide

125. What should we Automate?
     ͳʹΛࣗಈԽͰ͖Δͷ͔ʁ
     

     View Slide

126. ը૾ϑΝΠϧͷ࠷దԽ
     +BWB4DSJQU΍$44ͷϑΝΠϧͷ݁߹
     ΞΠίϯϑΥϯτͷੜ੒
     ߴղ૾౓σΟεϓϨΠ΁ͷରԠ
     εϓϥΠτγʔτͷੜ੒
     ...
     

     View Slide

127. View Slide

128. Automate anything
     you’ll likely do
     more than ONCE!
     ೋ౓͋Δ͜ͱ͸ɺ
     ࡾ౓͋Δ
     

     View Slide

129. ෼͔͔ΔλεΫ͕͋Δͱͨ͠Β
     ෼͔͚ͯͦͷλεΫΛߦ͏ͨΊͷ
     ϓϩάϥϜΛॻ͍ͯ෼Ͱ࣮ߦ͢Δɻ
     ❞
     

     View Slide

130. Finally...
     

     View Slide

131. No ONE best practice!
     

     View Slide

132. ຊ೔఻͍͑ͨࣄ
     ηογϣϯͰ͓࿩ͨ͜͠ͱ͸ɺ
     ͢΂ͯͷ໰୊ʹର͢ΔղͰ͸ͳ͍ɻ
     

     View Slide

133. It depends!
     

     View Slide

134. John. F Kennedy
     35th President of USA
     

     View Slide

135. There are risks and costs to a
     program of action, but they are
     far less than the long-range risks
     and costs of comfortable inaction.
     ❞
     - John. F Kennedy
     

     View Slide

136. ߦಈʹ͸ͭͶʹةݥ΍୅ঈ͕൐͏ɻ
     ͔ͦ͠͠Ε͸ɺ
     ߦಈͤͣʹָΛܾΊ͜
     Μͩ࣌ͷ௕ظతͳةݥ΍ίετͱֱ΂
     Ε͹ɺ
     औΔʹ଍Βͳ͍ɻ
     - John. F Kennedy
     ❞
     

     View Slide

137. Thank you!
     Follow me @ cssradar
     

     View Slide