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
100
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.5k
Performance in CSS
studiomohawk
5
370
Refactoring: What, Why and When
studiomohawk
5
290
Refactoring CSS
studiomohawk
9
540
A Recipe for Modern Mobile Front-end Development
studiomohawk
16
5.5k
Other Decks in Programming
See All in Programming
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
チームリードになって変わったこと
isaka1022
0
170
Domain-Driven Transformation
hschwentner
2
1.9k
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
330
Immutable ActiveRecord
megane42
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
680
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
390
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
240
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
170
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
280
SpringBoot3.4の構造化ログ #kanjava
irof
2
900
AHC041解説
terryu16
0
570
Featured
See All Featured
Speed Design
sergeychernyshev
25
770
How to train your dragon (web standard)
notwaldorf
90
5.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
300
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A designer walks into a library…
pauljervisheath
205
24k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
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