A Recipe for Modern Mobile Front-end Development

32f242f75b63e7174b493446de54a6b8?s=47 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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

November 30, 2013
Tweet

Transcript

  1. Development A Recipe for Modern Mobile Frontend HTML5 Conference 2013

    2013.11.30 13:00~ @Room5A 5F
  2. ?

  3. < 10%?

  4. 25%?

  5. 60%?

  6. No Hand?

  7. 25%!

  8. Yuya Saito Frontend Developer @ CyberAgent

  9. None
  10. None
  11. events.html5j.org/conference/2013/11/sessions

  12. Agenda Code Performance Automation

  13. Code

  14. Scaffolding

  15. ଍৔ Scaffolding

  16. Brunch brunch.io

  17. Yeoman yeoman.io

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

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

  20. Coding Guideline

  21. Code is read much more often than it is written,

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

  23. JavaScript

  24. github.com/airbnb/javascript

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

  26. CSS

  27. github.com/csswizardry/CSS-Guidelines

  28. github.com/necolas/idiomatic-css

  29. HTML / CSS

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

  31. Interactions Animations

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

  33. Philip Walton Frontend software engineer @ Appfolio

  34. Predictable Reusable Maintainable Scalable

  35. Methodologies

  36. by Nicole Sullivan OOCSS

  37. Object in CSS:

  38. 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 ❞
  39. جຊతʹ$44ʹ͓͍ͯɺ ͋Δ ʮΦϒδΣΫτʯ ͱ͸܁Γฦ͞ΕΔϏ δϡΞϧύλʔϯͰ͋Γɺ )5.-΍$44ɺ ΋͔͢͠Δͱ+BWB4DSJQUͰॻ͔Εͨಠཱ͠ ͨεχϖοτͱͯ͠ந৅ԽͰ͖Δ΋ͷͰ͋ Δɻ ·ͨҰ౓ੜ੒ͨ͠ΦϒδΣΫτ͸

    αΠτ಺Ͱ࠶ར༻Ͱ͖Δ΋ͷͰ͋Δɻ ❞ - Nicole Sullivan
  40. github.com/stubbornella/oocss/wiki

  41. by Jonathan Snook SMACSS

  42. Base State Layout Module Theme

  43. Base is the default

  44. State is ...uh, state

  45. smacss.com/ja

  46. by Yandex BEM

  47. Block Element Modifier

  48. 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. ❞
  49. BEM can pick up where SMACSS left off.

  50. bem.info

  51. Build Systems, Not Pages.

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

  53. JavaScript

  54. MV*

  55. Backbone.js Ember.js Angular.js

  56. SPAs Single Page Applications

  57. <!DOCTYPE html> <link href="style.css" rel="stylesheet"> <script src="script.js"></script>

  58. Pros / Cons

  59. Pros

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

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

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

  63. Cons

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

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

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

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

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

  69. Performance in SPAs

  70. CSS JS

  71. is on Google PageSpeed Insights ATF

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

  73. from Server HTML Just for this area ONLY

  74. Performance

  75. Jeff Atwood AKA Coding Horror

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

  78. Someday... Not Now.

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

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

  81. None
  82. Steve Souders Web Performance Engineer

  83. Performance Budget

  84. 1 second

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

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

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

  88. (More Realistic) Performance Budget: 3 seconds

  89. Case Study: Fail

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

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

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

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

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

  95. Google PageSpeed Insights

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

  97. Google Chrome DevTools

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

  99. WebPageTest.org

  100. WebPageTest.org www.webpagetest.org

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

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

  103. 16.66ms

  104. 24FPS

  105. Frame Per Second ඵʹίϚ

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

  107. Paint / Layout

  108. Paint Scroll, Animation and etc...

  109. DOM Node DOM Node DOM Node DOM Node DOM Node

    Node
  110. Layout

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

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

  114. Timeline Panel

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

  116. Show Paint Rectangles

  117. Show Paint Rectangles

  118. Continuous Page Repainting

  119. Continuous Page Repainting

  120. Automation

  121. gruntjs.com

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

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

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

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

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

  128. Finally...

  129. No ONE best practice!

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

  131. It depends!

  132. John. F Kennedy 35th President of USA

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

  135. Thank you! Follow me @ cssradar