Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Recipe for Modern Mobile Front-end Development

Yuya Saito
November 30, 2013

A Recipe for Modern Mobile Front-end Development

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

Yuya Saito

November 30, 2013
Tweet

More Decks by Yuya Saito

Other Decks in Programming

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 [email protected]
    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