Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leveling Up Your Front-end skills
Search
Yuya Saito
January 25, 2014
Programming
6
1.4k
Leveling Up Your Front-end skills
Links:
https://gist.github.com/studiomohawk/8610173
Yuya Saito
January 25, 2014
Tweet
Share
More Decks by Yuya Saito
See All by Yuya Saito
Design System as a Product @ Frontrend Vol.8
studiomohawk
2
4.8k
It’s All About DevTools
studiomohawk
0
110
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1.1k
CSSI: CSS Investigation
studiomohawk
21
9.6k
Performance in CSS
studiomohawk
5
370
Refactoring: What, Why and When
studiomohawk
5
300
Refactoring CSS
studiomohawk
9
550
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.6k
Other Decks in Programming
See All in Programming
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
940
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
110
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
Do Dumb Things
mitsuhiko
0
440
PHP で学ぶ OAuth 入門
azuki
1
200
RubyKaigi Dev Meeting 2025
tenderlove
1
150
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
0
140
On-the-fly Suggestions of Rewriting Method Deprecations
ohbarye
1
2.1k
エンジニアが挑む、限界までの越境
nealle
1
210
Making TCPSocket.new "Happy"!
coe401_
1
1.3k
Being an ethical software engineer
xgouchet
PRO
0
210
Kamal 2 – Get Out of the Cloud
aleksandrov
1
190
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing for Performance
lara
608
69k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Building Applications with DynamoDB
mza
94
6.3k
How GitHub (no longer) Works
holman
314
140k
Facilitating Awesome Meetings
lara
54
6.3k
Site-Speed That Sticks
csswizardry
5
490
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
How STYLIGHT went responsive
nonsquared
99
5.5k
Transcript
Leveling Up Front-end Skills Yuya Saito @ Frontrend in Fukuoka
#frontrend_ff
None
Hands On Multi Tracks &
Yuya Saito Frontend Developer @ CyberAgent
None
None
Agenda Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ؆୯ No, it’s not! ϑϩϯτΤϯυ
ɾ εΩϧΛϨϕϧΞοϓ͠Α͏ There are actually more… ͞ΒͳΔਂʜ How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ؆୯
ͭͷڞ௨͕͋Δ HTML, CSS & JavaScript
ͷߴ͞ Learnability
WWW is Only 20 Years Old
HTML
< > TAG NAME
TAG NAME About 100 of
CSS
selector { property: value; }
selector { color: red; }
JavaScript
JavaScript ؆୯Ͱͳ͍ͷͰ
function if var for {} while [] try {} catch
(e) {}
JavaScript γϯϓϧͰ༰ͳݴޠ
JavaScript ϒϥβ͑͋͞Ε࣮ߦͰ͖Δ
Learnability ͕ٕज़ͷ͕ΓΛੜΈग़ͨ͠ɻ
No, it’s not! ϨϕϧΞοϓ͠Α͏ ϑϩϯτΤϯυ ɾ εΩϧΛ
None
ϒϥβͷ෦ߏΛΔ Browser Learn:
Browser։ൃڥ
BrowserϓϥοτϑΥʔϜ
BrowserιϑτΣΞ
html5rocks.com/en/tutorials/internals/howbrowserswork
Google Chrome Developer Relations Paul Irish
❞ 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
❞ ϒϥβ෦ͷಇ͖ΛֶͿࣄ 8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ ͜ͷهࣄ͍ͷͰ͋Γ·͕͢ɺ গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱอূ͠·͢ɻ - Paul
Irish
chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
ۜͷؙଘࡏ͠ͳ͍ɻ ؙ͔ͦ͠͠ͷͷଘࡏ͍ͯ͠Δɻ ؙͷબͼํΛֶͿ͜ͱ͕େɻ Learn:
ߏઃܭͷํ๏ΛΔ JavaScript Learn:
jQuery͚ͩͰेͰͳ͍ɻ Not Just jQuery
jQueryͲΜͳΛղܾ͠Α͏ͱ What jQuery is? ͍ͯ͠Δͷ͔
JavaScriptʹ͓͚ΔΞϓϦͷઃܭ Architecture
ׂ୲ΛͲ͏ɾ݁߹͢Δͷ͔ MV*
Backbone.js Angular.js Ember.js ͦΕͧΕʹརͱ͕ܽ͋Δɻ
ίϝϯτΛؚΊͯ1,600ߦఔ Read: Backbone.js
TODOΞϓϦҎ֎ͷαϯϓϧΛ ࡞ͬͯΈΔɻ with Backbone.js
Angular.jsͰॻ͖͑ͯΈΔɻ
MV*͕ͲΜͳΛ ղܾ͠Α͏ͱ͍ͯ͠Δͷ͔ Learn:
Fail Fast Fail Often
ߏઃܭͷํ๏ΛΔ CSS Learn:
CSS: Style Layout Animation
CSS needs Architecture, too ͦͷͨΊͷػೳଘࡏ͠ͳ͍ͱ͍͏ໃ६
Learn: CSS Preprocessor
CSS Preprocessor Learn: Doesn’t Solve it! CSSͷઃܭΛ༰қʹͯ͘͠ΕͨΓ͠ͳ͍
OOCSS SMACSS BEM by Nicole Sullivan by Jonathan Snook by
Yandex
They’re just An Example. ͜ΕΒͷํ๏͋͘·Ͱྫɻ
ͳΜͲ܁Γฦ͞ΕΔɺ ͋Δ͍܁Γฦ͢͜ͱ͕Ͱ͖Δɺ ύλʔϯΛͲͷΑ͏ʹ ൃݟ͠ɺ ࣮͠ɺ ໋໊͢Δͷ͔ɻ
by ୩ थ 15:30~ @ ձٞࣨ5 Goal of Better CSS
Architecture
youtu.be/BlSFXdnuq5E
Modularity Learn: ϞδϡϥʔԽΛΔ
More Than A Few Thousand Lines of Codes ઍߦʹٴͿίʔυ͘͠ͳ͍ɻ
ͳΜͷσβΠϯઃܭͳ͘ɺ ୯७ʹϑΝΠϧΛׂͯ͠࡞ۀΛߦ͑ ϖʔδϩʔυͷ࠷దԽͷجຊݪଇͰ͋Δɺ HTTPϦΫΤετΛ ૿͢͜ͱʹͳͬͯ͠·͏ɻ
CSSͳΒ·ͩ͠ɺ JavaScriptʹղফ͠ͳ͚ΕͳΒͳ͍ ґଘ࣮ؔ֬ʹଘࡏ͢ΔͰ͠ΐ͏ɻ
Modular Design
None
Module Design JavaScriptʹCSSʹݱ࣌Ͱ ͜ͷϒϩοΫ๏Λ࣮ݱ͢ΔͨΊͷ ػೳݴޠͱͯ͠༻ҙ͞Ε͍ͯͳ͍ɻ
There are Tools (a lot)
Require.js by James Burke
Learn: Asynchronous Module Definition
Require.js is Good But... Require.jsʹ͋Δ...
Node.js IS JavaScript But... Node.jsͰฉ͔ͳ͍...?
CommonJS
Browserify.js by James Holiday AKA substack
ES6 import / export
CSS?
Testing Learn: ϢχοτςετΛΔ
Linting is First Step to Test ·ͣLint͔Β࢝ΊΔ
ࣗ৴Λ࣋ͬͯؒҧ͍Λਖ਼͢ ϫʔΫϑϩʔΛ࣋ͭɻ
Refactoring
Learn: Jasmine Mocha or
CSS?
CSS needs Testing
Not Yet
speakerdeck.com/studiomohawk/testable-javascript
speakerdeck.com/studiomohawk/unit-testing-with-jasmine
Performance Learn: ύϑΥʔϚϯεΛΔ
ύϑΥʔϚϯεػೳ
Tools, not Rules. - Paul Lewis
ϕετ͕ৗʹϕετͱݶΒͳ͍ɻ
-webkit-transform: translate3d(0,0,0);
What we can measure, we can optimize! - Ilya Grigorik
None
Network Panel
Timeline Panel
Profile Panel
developers.google.com/chrome-developer-tools/
There are actually more… ͞ΒͳΔਂʜ
Quick Peek ͘͝؆୯ʹɻ
Cross Brower Platform Device
Test Early
$49, Mac Only GhostLab
github.com/shakyShane/browser-sync
Progressive Enhancement
ৗʹ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱΛ ظ͞Εͳ͕Βɺ աڈͷϒϥβͷରԠΛഭΒΕΔໃ६ɻ
Progressive Enhancement ϑϩϯτΤϯυ։ൃऀͷಠஃɻ
ϒϥβσόΠεͰ੍ݶΛ ߟ͑ΔͷͰͳ͘ɺ ίϯϙʔωϯτ୯ҐͰઓུΛߟ͑Δɻ
!lamentgroup.com/lab/grade_components/
Template
HTMLΛͦͷ··هड़͢Δ͜ͱ͕ ݮ͖͍ͬͯͯΔɻ
No Choice on Server Side αʔόαΠυͷςϯϓϨʔτʹ͍ͭͯ զʑʹબࢶ͕༩͑ΒΕΔ͜ͱͳ͍ɻ
CMSΛؚΊͯɺ ϝδϟʔͳϑϨʔϜϫʔΫͰ ࠾༻͞Ε͍ͯΔςϯϓϨʔτݴޠʹ͍ͭͯ ͓͖֮͑ͯ͘ɻ
Too Many on Client Side ΫϥΠΞϯταΠυʹ બ͢Δ͜ͱ͕͍͠΄Ͳଘࡏ͢Δɻ
Handlebars.js Underscore.js
Research
Advocate for the Open Web Molly Holzschlag
❞ If you want to be doing the same things
for the next 10 years, you're in the wrong job. - Molly Holzschlag
❞ ࣍ͷؒɺ ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ ࢥ͏ͳΒɺ ͜ͷۀք͍͍ͯͳ͍ɻ - Molly Holzschlag
Web will be always Changing.
Inovation
Self Learning
Πϊϕʔγϣϯʹରͯ͠ ৗʹහײͰ͋Γ͚ͭͮΔ͜ͱ ϑϩϯτΤϯυ։ൃऀͷɻ
ใऩूश׳Խ͕伴ɻ
How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
֫ಘͰ͖Δͷ͔ Ͳ͏ͨ͠Β͜ΕΒͷεΩϧΛ
ਫ਼௨͍ͯ͠Δͷ͔ ࢲࣗͯ͢ͷεΩϧʹ Better Question
No.
͋ΔͣͰ͢ɻ օ͞Μʹಘҙͳδϟϯϧ ूத͢Δ͖ɻ ·ͣͦ͜Λ৳͍ͯ͘͜͠ͱʹ
T ❌
I
None
None
ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕ Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ ඞͣग़͖ͯ·͢ɻ
None
None
Homework Կ͕ಘҙͳͷ͔ Կʹڵຯ͕͋Δͷ͔
What’s your Goal?
Apple CEO Steve Jobs
❞ 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
❞ ઌΛಡΜͰͱΛͭͳ͙͜ͱͰ͖·ͤΜɻ ޙ͔ΒৼΓฦͬͯॳΊͯͰ͖ΔͷͰ͢ɻ ͦΕΒͷඞͣͲ͔͜ͷະདྷͰ ͭͳ͕Δ͜ͱΛ৴͡ͳ͚ΕͳΒͳ͍ͷͰ͢ɻ - Steve Jobs
One More Thing...
Ask Why, Not How.
Thank You! Follow me @ cssradar