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.6k
It’s All About DevTools
studiomohawk
0
99
Pragmatic Front-end Developer: From Artisan to Expert
studiomohawk
10
2k
Guiding Through The JavaScript Frameworks
studiomohawk
8
1k
CSSI: CSS Investigation
studiomohawk
21
9.5k
Performance in CSS
studiomohawk
5
360
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
530
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.5k
Other Decks in Programming
See All in Programming
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
200
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
630
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
null or undefined
susisu
22
6.2k
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
790
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
1.9k
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Scaling GitHub
holman
458
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
How to Think Like a Performance Engineer
csswizardry
16
950
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
600
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Designing Experiences People Love
moore
138
23k
Navigating Team Friction
lara
183
13k
A designer walks into a library…
pauljervisheath
201
24k
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