Leveling Up Your Front-end skills

Leveling Up
Front-end Skills
Yuya Saito @ Frontrend in Fukuoka
#frontrend_ff

View Slide

View Slide

Hands On
Multi Tracks &

View Slide

Yuya Saito
Frontend Developer
@ CyberAgent

View Slide

View Slide

Agenda
Front-end Development is Easy!?
ϑϩϯτΤϯυ։ൃ͸؆୯
No, it’s not!
ϑϩϯτΤϯυ
ɾ
εΩϧΛϨϕϧΞοϓ͠Α͏
There are actually more…
͞ΒͳΔਂ෵΁ʜ
How to learn all this?
ϑϩϯτΤϯυ
ɾ
εΩϧͷֶͼํ

View Slide

Front-end
Development is
Easy!?
ϑϩϯτΤϯυ։ൃ͸؆୯

View Slide

ͭͷڞ௨఺͕͋Δ
HTML, CSS & JavaScript

View Slide

ͷߴ͞
Learnability

View Slide

WWW is Only
20 Years Old

View Slide

HTML

View Slide

< >
TAG NAME

View Slide

TAG NAME
About 100 of

View Slide

CSS

View Slide

selector {
property: value;
}

View Slide

selector {
color: red;
}

View Slide

JavaScript

View Slide

JavaScript
͸؆୯Ͱ͸ͳ͍ͷͰ͸

View Slide

function
if var for {}
while []
try {} catch (e) {}

View Slide

JavaScript
͸γϯϓϧͰ׮༰ͳݴޠ

View Slide

JavaScript
͸ϒϥ΢β͑͋͞Ε͹࣮ߦͰ͖Δ

View Slide

Learnability
͕ٕज़ͷ޿͕ΓΛੜΈग़ͨ͠ɻ

View Slide

No, it’s not!
ϨϕϧΞοϓ͠Α͏
ϑϩϯτΤϯυ
ɾ
εΩϧΛ

View Slide

View Slide

ϒϥ΢βͷ಺෦ߏ଄Λ஌Δ
Browser
Learn:

View Slide

Browser͸։ൃ؀ڥ

View Slide

Browser͸ϓϥοτϑΥʔϜ

View Slide

Browser͸ιϑτ΢ΣΞ

View Slide

html5rocks.com/en/tutorials/internals/howbrowserswork

View Slide

Google Chrome Developer Relations
Paul Irish

View Slide

❞
As a web developer, learning the internals of
browser operations helps you make better
decisions and know the justiﬁcations 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

View Slide

❞
ϒϥ΢β಺෦ͷಇ͖ΛֶͿࣄ͸
8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ
ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ
ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ
͜ͷهࣄ͸௕͍΋ͷͰ͸͋Γ·͕͢ɺ
গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ
ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱ͸อূ͠·͢ɻ
- Paul Irish

View Slide

chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

View Slide

ۜͷ஄ؙ͸ଘࡏ͠ͳ͍ɻ
͔͠͠஄ؙͦͷ΋ͷ͸ଘࡏ͍ͯ͠Δɻ
஄ؙͷબͼํΛֶͿ͜ͱ͕େ੾ɻ
Learn:

View Slide

ߏ଄΍ઃܭͷํ๏Λ஌Δ
JavaScript
Learn:

View Slide

jQuery͚ͩͰ͸΋͸΍े෼Ͱ͸ͳ͍ɻ
Not Just jQuery

View Slide

jQuery͸ͲΜͳ໰୊Λղܾ͠Α͏ͱ
What jQuery is?
͍ͯ͠Δͷ͔

View Slide

JavaScriptʹ͓͚ΔΞϓϦͷઃܭ
Architecture

View Slide

໾ׂ෼୲ΛͲ͏෼཭ɾ݁߹͢Δͷ͔
MV*

View Slide

Backbone.js
Angular.js
Ember.js
ͦΕͧΕʹར఺ͱܽ఺͕͋Δɻ

View Slide

ίϝϯτΛؚΊͯ΋1,600ߦఔ౓
Read: Backbone.js

View Slide

TODOΞϓϦҎ֎ͷαϯϓϧΛ
࡞ͬͯΈΔɻ
with Backbone.js

View Slide

Angular.jsͰॻ͖׵͑ͯΈΔɻ

View Slide

MV*͕ͲΜͳ໰୊Λ
ղܾ͠Α͏ͱ͍ͯ͠Δͷ͔
Learn:

View Slide

Fail Fast
Fail Often

View Slide

ߏ଄΍ઃܭͷํ๏Λ஌Δ
CSS
Learn:

View Slide

CSS:
Style
Layout
Animation

View Slide

CSS needs
Architecture, too
ͦͷͨΊͷػೳ͸ଘࡏ͠ͳ͍ͱ͍͏ໃ६

View Slide

Learn:
CSS Preprocessor

View Slide

CSS Preprocessor
Learn:
Doesn’t Solve it!
CSSͷઃܭΛ༰қʹͯ͘͠ΕͨΓ͸͠ͳ͍

View Slide

OOCSS
SMACSS
BEM
by Nicole Sullivan
by Jonathan Snook
by Yandex

View Slide

They’re just
An Example.
͜ΕΒͷํ๏࿦͸͋͘·Ͱ΋ྫɻ

View Slide

ͳΜͲ΋܁Γฦ͞ΕΔɺ
͋Δ͍͸܁Γฦ͢͜ͱ͕Ͱ͖Δɺ
ύλʔϯΛͲͷΑ͏ʹ
ൃݟ͠ɺ
࣮૷͠ɺ
໋໊͢Δͷ͔ɻ

View Slide

by ୩ ୓थ
15:30~ @ ձٞࣨ5
Goal of Better
CSS Architecture

View Slide

youtu.be/BlSFXdnuq5E

View Slide

Modularity
Learn:
ϞδϡϥʔԽΛ஌Δ

View Slide

More Than
A Few Thousand
Lines of Codes
਺ઍߦʹ΋ٴͿίʔυ΋௝͘͠ͳ͍ɻ

View Slide

ͳΜͷσβΠϯઃܭ΋ͳ͘ɺ
୯७ʹϑΝΠϧΛ෼ׂͯ͠࡞ۀΛߦ͑͹
ϖʔδϩʔυͷ࠷దԽͷجຊݪଇͰ͋Δɺ
HTTPϦΫΤετΛ
૿΍͢͜ͱʹͳͬͯ͠·͏ɻ

View Slide

CSSͳΒ·ͩ͠΋ɺ
JavaScriptʹ͸ղফ͠ͳ͚Ε͹ͳΒͳ͍
ґଘؔ܎΋࣮֬ʹଘࡏ͢ΔͰ͠ΐ͏ɻ

View Slide

Modular Design

View Slide

View Slide

Module Design
JavaScriptʹ΋CSSʹ΋ݱ࣌఺Ͱ͸
͜ͷϒϩοΫ޻๏Λ࣮ݱ͢ΔͨΊͷ
ػೳ͸ݴޠͱͯ͠༻ҙ͞Ε͍ͯͳ͍ɻ

View Slide

There are
Tools (a lot)

View Slide

Require.js
by James Burke

View Slide

Learn:
Asynchronous
Module
Definition

View Slide

Require.js
is Good But...
Require.jsʹ΋໰୊͸͋Δ...

View Slide

Node.js
IS JavaScript
But...
Node.jsͰ͸ฉ͔ͳ͍໰୊...?

View Slide

CommonJS

View Slide

Browserify.js
by James Holiday AKA substack

View Slide

ES6
import / export

View Slide

CSS?

View Slide

Testing
Learn:
ϢχοτςετΛ஌Δ

View Slide

Linting is
First Step to Test
·ͣLint͔Β࢝ΊΔ

View Slide

ࣗ৴Λ࣋ͬͯؒҧ͍Λਖ਼͢
ϫʔΫϑϩʔΛ࣋ͭɻ

View Slide

Refactoring

View Slide

Learn:
Jasmine
Mocha
or

View Slide

CSS?

View Slide

CSS needs Testing

View Slide

Not Yet

View Slide

speakerdeck.com/studiomohawk/testable-javascript

View Slide

speakerdeck.com/studiomohawk/unit-testing-with-jasmine

View Slide

Performance
Learn:
ύϑΥʔϚϯεΛ஌Δ

View Slide

ύϑΥʔϚϯε͸ػೳ

View Slide

Tools, not Rules.
- Paul Lewis

View Slide

ϕετ͕ৗʹϕετͱ͸ݶΒͳ͍ɻ

View Slide

-webkit-transform:
translate3d(0,0,0);

View Slide

What we can measure,
we can optimize!
- Ilya Grigorik

View Slide

View Slide

Network Panel

View Slide

Timeline Panel

View Slide

Profile Panel

View Slide

developers.google.com/chrome-developer-tools/

View Slide

There are
actually more…
͞ΒͳΔਂ෵΁ʜ

View Slide

Quick Peek
͘͝؆୯ʹɻ

View Slide

Cross Brower
Platform
Device

View Slide

Test Early

View Slide

$49, Mac Only
GhostLab

View Slide

github.com/shakyShane/browser-sync

View Slide

Progressive
Enhancement

View Slide

ৗʹ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱΛ
ظ଴͞Εͳ͕Βɺ
աڈͷϒϥ΢β΁ͷରԠΛഭΒΕΔໃ६ɻ

View Slide

Progressive Enhancement͸
ϑϩϯτΤϯυ։ൃऀͷಠஃ৔ɻ

View Slide

ϒϥ΢β΍σόΠεͰ੍ݶΛ
ߟ͑ΔͷͰ͸ͳ͘ɺ
ίϯϙʔωϯτ୯ҐͰઓུΛߟ͑Δɻ

View Slide

!lamentgroup.com/lab/grade_components/

View Slide

Template

View Slide

HTMLΛͦͷ··هड़͢Δ͜ͱ͕
ݮ͖͍ͬͯͯΔɻ

View Slide

No Choice on
Server Side
αʔόαΠυͷςϯϓϨʔτʹ͍ͭͯ͸
զʑʹબ୒ࢶ͕༩͑ΒΕΔ͜ͱ͸ͳ͍ɻ

View Slide

CMSΛؚΊͯɺ
ϝδϟʔͳϑϨʔϜϫʔΫͰ
࠾༻͞Ε͍ͯΔςϯϓϨʔτݴޠʹ͍ͭͯ͸
͓֮͑ͯ͘΂͖ɻ

View Slide

Too Many on
Client Side
ΫϥΠΞϯταΠυʹ͸΋͸΍
બ୒͢Δ͜ͱ͕೉͍͠΄Ͳଘࡏ͢Δɻ

View Slide

Handlebars.js
Underscore.js

View Slide

Research

View Slide

Advocate for the Open Web
Molly Holzschlag

View Slide

❞
If you want to be doing the same things for
the next 10 years, you're in the wrong job.
- Molly Holzschlag

View Slide

❞
࣍ͷ೥ؒɺ
ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ
ࢥ͏ͳΒɺ
͜ͷۀք͸޲͍͍ͯͳ͍ɻ
- Molly Holzschlag

View Slide

Web will be
always
Changing.

View Slide

Inovation

View Slide

Self Learning

View Slide

Πϊϕʔγϣϯʹରͯ͠
ৗʹහײͰ͋Γ͚ͭͮΔ͜ͱ͸
ϑϩϯτΤϯυ։ൃऀͷ੹຿ɻ

View Slide

৘ใऩू͸श׳Խ͕伴ɻ

View Slide

How to learn all
this?
ϑϩϯτΤϯυ
ɾ
εΩϧͷֶͼํ

View Slide

֫ಘͰ͖Δͷ͔
Ͳ͏ͨ͠Β͜ΕΒͷεΩϧΛ

View Slide

ਫ਼௨͍ͯ͠Δͷ͔
ࢲࣗ਎͢΂ͯͷεΩϧʹ
Better Question

View Slide

No.

View Slide

͋Δ͸ͣͰ͢ɻ
օ͞Μʹ΋ಘҙͳδϟϯϧ͸
ूத͢Δ΂͖ɻ
·ͣ͸ͦ͜Λ৳͹͍ͯ͘͜͠ͱʹ

View Slide

T
❌

View Slide

I

View Slide

View Slide

ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕
Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ
ඞͣग़͖ͯ·͢ɻ

View Slide

View Slide

Homework
Կ͕ಘҙͳͷ͔
Կʹڵຯ͕͋Δͷ͔

View Slide

What’s your Goal?

View Slide

Apple CEO
Steve Jobs

View Slide

❞
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

View Slide

❞
ઌΛಡΜͰ఺ͱ఺Λͭͳ͙͜ͱ͸Ͱ͖·ͤΜɻ
ޙ͔ΒৼΓฦͬͯॳΊͯͰ͖ΔͷͰ͢ɻ
ͦΕΒͷ఺͸ඞͣͲ͔͜ͷະདྷͰ
ͭͳ͕Δ͜ͱΛ৴͡ͳ͚Ε͹ͳΒͳ͍ͷͰ͢ɻ
- Steve Jobs

View Slide

One More Thing...

View Slide

Ask Why,
Not How.

View Slide

Thank You!
Follow me @ cssradar

View Slide

Leveling Up Your Front-end skills

Leveling Up Your Front-end skills

Yuya Saito

More Decks by Yuya Saito

Other Decks in Programming

Featured

Transcript