A Recipe for Modern Mobile Front-end Development

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

< 10%?

No Hand?

Yuya Saito Frontend Developer @ CyberAgent

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

Agenda Code Performance Automation

Scaffolding

଍৔ Scaffolding

Brunch brunch.io

Yeoman yeoman.io

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

Too much to set up? Just modify it!

Coding Guideline

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

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

JavaScript

github.com/airbnb/javascript

github.com/Seravo/js-winning-style

github.com/csswizardry/CSS-Guidelines

github.com/necolas/idiomatic-css

HTML / CSS

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

Interactions Animations

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

Philip Walton Frontend software engineer @ Appfolio

Predictable Reusable Maintainable Scalable

Methodologies

by Nicole Sullivan OOCSS

Object in CSS:

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 ❞

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

github.com/stubbornella/oocss/wiki

by Jonathan Snook SMACSS

Base State Layout Module Theme

Base is the default

State is ...uh, state

smacss.com/ja

by Yandex BEM

Block Element Modifier

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. ❞

BEM can pick up where SMACSS left off.

bem.info

Build Systems, Not Pages.

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

JavaScript

Backbone.js Ember.js Angular.js

SPAs Single Page Applications

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

Pros / Cons

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

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

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

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

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

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

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

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

Performance in SPAs

CSS JS

is on Google PageSpeed Insights ATF

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

from Server HTML Just for this area ONLY

Performance

Jeff Atwood AKA Coding Horror

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. ❞ - Jeﬀ Atwood

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

Someday... Not Now.

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

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

Steve Souders Web Performance Engineer

Performance Budget

1 second

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

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

www.strangeloopnetworks.com/web-performance-infographics

(More Realistic) Performance Budget: 3 seconds

Case Study: Fail

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

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

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

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

"Tools, not rules!" - Paul Lewis

Google PageSpeed Insights

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

Google Chrome DevTools

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

WebPageTest.org

WebPageTest.org www.webpagetest.org

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

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

16.66ms

Frame Per Second ඵʹίϚ

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

Paint / Layout

Paint Scroll, Animation and etc...

DOM Node DOM Node DOM Node DOM Node DOM Node
Node

Layout

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

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

Timeline Panel

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

Show Paint Rectangles

Continuous Page Repainting

Automation

gruntjs.com

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

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

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

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

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

Finally...

No ONE best practice!

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

It depends!

John. F Kennedy 35th President of USA

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

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

Thank you! Follow me @ cssradar

A Recipe for Modern Mobile Front-end Development

A Recipe for Modern Mobile Front-end Development

More Decks by Yuya Saito

Other Decks in Programming

Featured

Transcript