Guiding Through The JavaScript Frameworks

Slide 1

Slide 1 text

Guiding Through THE JAVASCRIPT FRAMEWORKS Yuya Saito @ Rich Media JavaScriptϑϨʔϜϫʔΫͷา͖ํ Version 2.0.0 Developers Summit 2015

Slide 2

Slide 2 text

UX Engineer @ Rich Media Yuya Saito

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Frontend Weekly Curated by @cssradar @t32k @hiloki frontendweekly.tokyo

Slide 5

Slide 5 text

JAVASCRIPT FRAMEWORKS The Map of JavaScriptϑϨʔϜϫʔΫͷ஍ਤ

Slide 6

Slide 6 text

Backbone Angular Ember MVC Data Binding Unit Testing Dependency Injection Conventions E2E Testing Structure ES6 Modules Web Components More comprehensive More Flexibility Router

Slide 7

Slide 7 text

Angular.js & Ember.js Data Binding Web Components

Slide 8

Slide 8 text

Angular.js Dependency Injection

Slide 9

Slide 9 text

POPULAR FRAMEWORKS Comparison of ஶ໊ϑϨʔϜϫʔΫͷൺֱ

Slide 10

Slide 10 text

Angular.js

Slide 11

Slide 11 text

Pros

Slide 12

Slide 12 text

Pros 1. ؆୯ʹར༻Ͱ͖Δ 2. खް͍αϙʔτ 3. ଟ͘ͷϢʔβ͕͍Δ

Slide 13

Slide 13 text

Cons

Slide 14

Slide 14 text

Cons 1. Angular.jsͷ࢖͍ํΛ֮͑Δඞཁ͕͋Δ 2. ʰؔ৺ͷ෼཭ʱͷ๏ଇҧ൓ 3. ʰຐ๏ʱͩΒ͚

Slide 15

Slide 15 text

Ember.js

Slide 16

Slide 16 text

Pros

Slide 17

Slide 17 text

Pros 1. “The Ember Way”ͱ͍͏Ұ؏ͨ͠఩ֶ 2. ଟ͘ͷ໰୊͕ղܾࡁΈ 3. ༏ΕͨυΩϡϝϯτ / Ϣʔβϕʔε

Slide 18

Slide 18 text

Cons

Slide 19

Slide 19 text

Cons 1. “The Ember Way”͸ॾਕͷ݋ 2. ॊೈੑʹ͚ܽΔ

Slide 20

Slide 20 text

Backbone.js

Slide 21

Slide 21 text

Pros

Slide 22

Slide 22 text

Pros 1. খ͘͞ɺ ॊೈͰΑ͘ςετ͞ΕͨϞδϡʔϧ܊ 2. ଟ͘ͷجຊతͳ໰୊͕ղܾ͞Ε͍ͯΔ 3. ιʔείʔυ΋୹͘ɺ ཧղ͠΍͍͢

Slide 23

Slide 23 text

Cons

Slide 24

Slide 24 text

Cons 1. ͢΂ͯͷ໰୊ʹର͢ΔղܾΛఏ͍ࣔͯ͠ͳ͍ 2. Backbone.jsϕʔεɾϑϨʔϜϫʔΫͷඞཁੑ

Slide 25

Slide 25 text

React.js

Slide 26

Slide 26 text

Pros

Slide 27

Slide 27 text

Pros 1. ϋΠɾύϑΥʔϚϯεͷϨϯμϦϯά 2. εςʔτ؅ཧͷ؆қԽ 3. ୯ͳΔViewϨΠϠ

Slide 28

Slide 28 text

Cons

Slide 29

Slide 29 text

Cons 1. ςϯϓϨʔτͷγϯλοΫε͕ෆࣗવ 2. ϑΝΠϧαΠζ

Slide 30

Slide 30 text

FLUX

Slide 31

Slide 31 text

Action Dispatcher Store View Unidirectional data ﬂow

Slide 32

Slide 32 text

Action Dispatcher Store View ༣ศड͚ͷ࣋ͪओ ༣ศड͚ ༣ศ԰͞Μ ༣ศ෺

Slide 33

Slide 33 text

Flux by Facebook git.io/MFS1QA

Slide 34

Slide 34 text

Delorean by Delorean.js git.io/z3LsQw

Slide 35

Slide 35 text

Fluxxor by Brandon Tilley git.io/udBcxg

Slide 36

Slide 36 text

Ampersand.js

Slide 37

Slide 37 text

Pros

Slide 38

Slide 38 text

Pros 1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍ 2. ίϚϯυϥΠϯɾπʔϧ͕ศར 3. ଟ͘ͷϓϥάΠϯͷଘࡏ

Slide 39

Slide 39 text

Cons

Slide 40

Slide 40 text

Cons 1. ·ͩʰए͍ʱ 2. IE8ҎԼͷαϙʔτͳ͠

Slide 41

Slide 41 text

Aurelia.js

Slide 42

Slide 42 text

Pros

Slide 43

Slide 43 text

Pros 1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍ 2. ES6/ES7΁ͷϑΥʔΧε 3. Ϟδϡϥʔੑ͕ߴ͍

Slide 44

Slide 44 text

Cons

Slide 45

Slide 45 text

Cons 1. ·ͩʰए͍ʱ 2. IE11ҎԼͷαϙʔτͳ͠

Slide 46

Slide 46 text

IDENTIFYING PROBLEMS Lost in ໰୊͸໰୊ͦͷ΋ͷͷൃݟʹ͋Δ

Slide 47

Slide 47 text

“ Choose tools you'll use. New to front-end dev? Just use HTML/CSS/JS. Add tools & abstractions when they improve your productivity. — Addy Osmani

Slide 48

Slide 48 text

πʔϧΛ୳͠ग़͢͜ͱ͸ΰʔϧͰ͸ͳ͍

Slide 49

Slide 49 text

ͲΜͳ໰୊Λղܾ͠Α͏ͱ͍ͯ͠Δͷ͔

Slide 50

Slide 50 text

How to Solve it by George Pólya amzn.to/1pnZ3L9

Slide 51

Slide 51 text

4 ໰୊Λཧղ͢Δ Ͳ͏ղܾ͢Δ͔ઓུΛߟ͑Δ ઓུΛ࣮ߦ͢Δ Ͳ͏໰୊Λղܾ͔ͨ͠ΛৼΓฦΔ

Slide 52

Slide 52 text

໰୊Λཧղ͢Δ

Slide 53

Slide 53 text

໰୊Λཧղ͢Δ

Slide 54

Slide 54 text

ϓϩμΫτͷεςʔδ͸Ͳ͜ͳͷ͔

Slide 55

Slide 55 text

eg ৽نϓϩδΣΫτͷ։ൃεςʔδ طଘϓϩδΣΫτͷϦχϡʔΞϧεςʔδ

Slide 56

Slide 56 text

Angular.js & Ember.js

Slide 57

Slide 57 text

ΞʔΩςΫτͷ૑ੈస׵ظ

Slide 58

Slide 58 text

Angular.jsͷεϐʔυ

Slide 59

Slide 59 text

Ember.jsͷݎ͞

Slide 60

Slide 60 text

Backbone.js & Ampersand.js

Slide 61

Slide 61 text

ঃʑʹMV*ͳઃܭʹ଩Λ੾Δ

Slide 62

Slide 62 text

ϑΝΠϧαΠζ͸େ͖͘มΘΒͳ͍

Slide 63

Slide 63 text

มߋʹڧ͍ઃܭͱ͸

Slide 64

Slide 64 text

25 Years Old

Slide 65

Slide 65 text

มΘΓଓ͚Δ͜ͱ

Slide 66

Slide 66 text

Web Components

Slide 67

Slide 67 text

ECMA Script 6 & 7

Slide 68

Slide 68 text

มΘΔ͜ͱΛલఏͱ͢Δ

Slide 69

Slide 69 text

“ — Me ׬ᘳͳߏ଄Λ࡞Ζ͏͢ΔͷͰ͸ͳ͘ɺ յΕͨͱ͖༐ؾΛ࣋ͬͯมߋͰ͖ΔΑ͏ͳ ઃܭΛɻ

Slide 70

Slide 70 text

Remember the Foundation

Slide 71

Slide 71 text

“ 1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible. 4. Choose portability over efficiency. 5. Store data in flat text files. 6. Use software leverage to your advantage. 7. Use shell scripts to increase leverage and portability. 8. Avoid captive user interfaces. 9. Make every program a filter. — Mike Gancarz

Slide 72

Slide 72 text

1. Small is beautiful. 2. Make each program do one thing well. 3. Build a prototype as soon as possible.

Slide 73

Slide 73 text

มΘΓଓ͚Δ͜ͱ

Slide 74

Slide 74 text

Node.js & Ecosystem

Slide 75

Slide 75 text

Learn JavaScript

Slide 76

Slide 76 text

“ The most important thing is that your team becomes familiar with building well-structured apps in JavaScript. — Henrik Joreteg

Slide 77

Slide 77 text

Read Backbone.js Source

Slide 78

Slide 78 text

And Underscore.js

Slide 79

Slide 79 text

Books to Read

Slide 80

Slide 80 text

Speaking JavaScript by Axel Rauschmayer speakingjs.com

Slide 81

Slide 81 text

Eloquent JavaScript by Marijn Haverbeke eloquentjavascript.net

Slide 82

Slide 82 text

Eﬀective JavaScript by David Herman eﬀectivejs.com

Slide 83

Slide 83 text

Learn CSS and HTML, too

Slide 84

Slide 84 text

“ — My Friend )5.-͕Ԛ͍ͱ$44΋Ԛ͍ɻ ͦͷ྆ऀͷଘࡏ͕ͦ͜+BWB4DSJQUͷϩδοΫ Λࢧ͑Δج൫͔ͩΒɺ͔ͬ͠Γॻ͍ͯཉ͍͠ɻ

Slide 85

Slide 85 text

A FRAMEWORK? How Do I Review ϑϨʔϜϫʔΫͷબ୒๏

Slide 86

Slide 86 text

Lock-In ғ͍ࠐΈ

Slide 87

Slide 87 text

Opinionated Architecture ʰؤݻʱͳઃܭ

Slide 88

Slide 88 text

Accidental Complexity ෆཁͳෳࡶੑ

Slide 89

Slide 89 text

Testability ςετͷ͠΍͢͞

Slide 90

Slide 90 text

“ Replace "can you build this?" with "can you maintain this without losing your minds?" — Nicolas Gallagher