Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript Fatigue
@ R H I O K I M
P R E S E N T A T I O N
Brendan Eich
Dennis Ritchie
James Arthur Gosling
Bjarne Stroustrup
Larry Wall
John McCarthy
Matz
Rasmus Lerdorf
Guido van Rossum
Secret of Javascript
😜
Too many JS framework
Too many Boilerplates
Too many bundler/task runner
Too many APIs.
Too much configuration
Too many la...
– ,
.
“ .”
Douglas Crockford
Dion Almaer Co-Founder of Ajaxian
Sam Stephenson
John Resig
Steve Souders
Firejune
– ,
“ ”
Tim Berners-Lee
W3C HTML …
Copy & Paste Rich Documentation Web Application Platform
Micromedia Flash
Node.js
20091996 2005 2006 2010 2017
Backbone.js...
• Adobe Flash

Flash HTML5
.
• Google
.
Google .
Steve Jobs said Adobe is Lazy
😨
2004 HTML W3C
WHATWG
🙅' ( )* +,
2005 IT .
HTML5
– ?
“ ”
Ryan Dahl
2009
😍
Isaac Z. Schlueter 
2010
Packages

575,948

Downloads · Last Day

608,103,940

Downloads · Last Week

3,264,697,852

Downloads · Last Month

1...
2012.03 2013.04
Raspberry Pi
nginScript
IOT.js & JerryScript
VR Generation?
Cross Browser Cross Platform Universal
DOM
BOM
Isomorphic
hybrid
💩 💩💩
,
😁😭
– ,
“ ”
What the F*ck Javascript?
Brian Reroux
Transpiler, Babel(6to5), Type Annotation
1999 2009 2015
3.x 5.x 6.x4.x
ES2015abandoned
harmony
- classes,
- a module system,
- optional type annotations and static...
Source to Source Compile
ES4~ES4 harmony~ES5
Brendan Eich Transpiler JSConf.US 2011
Jeremy Ashkenas
2012.10
Two years of 

Internal development by MS
ECMAScript 6 to ECMAScript 5 Transpiler
Future-Proofing
Slow Adoption Problem
Sebastian McKenzie
2014.09
James Kyle
Henry Zhu
Babel
React.js FB
Typescript ?
Types and Type Annotations
2014` A Stage 0 Proposal
Jonathan Turner & Brian Terlson
🙄
Functional, Reactive, Immutable, Saga
–
“ ”
jQuery Backbone.js React.js
DOM

&
BOM
Knockout.js
Prototype.js Vue.js
Angular 2+
?
Polymer 2+
MVC
MVVM

Modulizing
Two wa...
WebComponent
2011
Alex Russell
Polymer
2013.11 2015
1.0
2017
2.0
Jordan Walke
2013.03
First Release
First Deploy
2011
Evan You
2014.02
First Release
Misko Hevery
2014.09
First Release
.
, ,
☺
…
React Component Vue.js .
Angular Component …?
Reusable WebComponent , , , …?
….
…?
😫
I’ve seen the future, it’s full of HTML
WebComponent are more than standards
Future
WebComponent
CSS ?
JS CSS …
50
🤣
–
Scaffolding
Testing
Linting & Formatting
Build
Optimizing
Scaffolding
$ mkdir project
$ make vendors
$ make src
$ make test
2012
1,000 Boilerplates
😤
Testing Framework
- Test Environment
- Testing Structure
- Assertion Functions
- Report Test Result
- Snapshot Comparing
- Mocks, Spies and ...
Mocha, Ava, Jest, Jasmin, enzyme
Krama, Istanbul, Cucumber, Chai, Sinon, Testdouble
Protractor, Nightwatch, Phantom, Caspe...
Linting & Formatter
Nicholas C. Zakas
2002 2010 2013 2017
James Long
2002 2010 2013 2017
tab space
both
Build & Optimizing
shell & ant Require.js
Grunt
Gulp
NPM
Webpack
Browserify
Rollup
Task runner
Task &
Module Bundler
Concatenator
2012.03 2017.03~
- Scope Hoisting
- WebAssembly
- Persistenter Cache
- CSS as first-class citizen
- ES2015+, CommonJS, AMD...
😭🤕 😩
Actually, This is Javascript Fatigue
You don’t need to install or configure any more
creat-react-app
angular-cli
vue-cli
😘
?
“ ”
Battery Ventures Open-Source Software Index
According to the Battery Open-Source Software (BOSS) Index, Node.js is
a leader in enterprise-grade open source.
Node.js Will Overtake Java Within a Year
8.8 Million
# of Node Instances
800,000
New node instances YTD
https://medium.com/the-node-js-collection/node-js-state-of-...
Node.js
Nodesource, RasingStack, Strongloop(acquired by IBM)
Zeit
Node.js Foundation Membership
Grows Globally Across Multiple Industries
🤝
@A
Javascript Massage
HTML5
Copy & Paste Rich Documentation Web Application
Platform
Google Map
20091996 2005 2006 2010 20171999
ES4
2008
ES5 ES6
2015...
Universe Javascript
❤
.
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
Upcoming SlideShare
Loading in …5
×

Javascript fatigue, 자바스크립트 피로

2,564 views

Published on

현시대의 자바스크립트가 개발자들에게 주는 피로함은 과연 어디서부터 출발했을까?

2015년 부터 자바스크립트의 피로감은 너무 극에 달했다고 생각했고 그 시작은 과연 어디서부터 왔는지 이 피로감의 끝은 어딜지 지난 과거의 역사와 현시대가 그 욕구를 반영하는 과정에서 자바스크립트 개발자가 알아야 할 이야기들을 자세히 정리해 봤습니다.

발표시간: 40m (80m 이 적당)

#feconf 2017

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Javascript fatigue, 자바스크립트 피로

  1. 1. Javascript Fatigue
  2. 2. @ R H I O K I M
  3. 3. P R E S E N T A T I O N
  4. 4. Brendan Eich
  5. 5. Dennis Ritchie
  6. 6. James Arthur Gosling
  7. 7. Bjarne Stroustrup
  8. 8. Larry Wall
  9. 9. John McCarthy
  10. 10. Matz
  11. 11. Rasmus Lerdorf
  12. 12. Guido van Rossum
  13. 13. Secret of Javascript
  14. 14. 😜
  15. 15. Too many JS framework Too many Boilerplates Too many bundler/task runner Too many APIs. Too much configuration Too many language paradigm Too many CSS in JS "# $
  16. 16. – , . “ .”
  17. 17. Douglas Crockford
  18. 18. Dion Almaer Co-Founder of Ajaxian
  19. 19. Sam Stephenson
  20. 20. John Resig
  21. 21. Steve Souders
  22. 22. Firejune
  23. 23. – , “ ”
  24. 24. Tim Berners-Lee
  25. 25. W3C HTML …
  26. 26. Copy & Paste Rich Documentation Web Application Platform Micromedia Flash Node.js 20091996 2005 2006 2010 2017 Backbone.js 1999 ES4 2008 ES5 ES6 2015 ES7 2016 ES8 6to5 + esnext Google Map 2013 Haroopad 2011 node-webkit 2012 2014
  27. 27. • Adobe Flash
 Flash HTML5 . • Google . Google .
  28. 28. Steve Jobs said Adobe is Lazy 😨
  29. 29. 2004 HTML W3C WHATWG 🙅' ( )* +,
  30. 30. 2005 IT .
  31. 31. HTML5
  32. 32. – ? “ ”
  33. 33. Ryan Dahl
  34. 34. 2009
  35. 35. 😍
  36. 36. Isaac Z. Schlueter 
  37. 37. 2010 Packages
 575,948
 Downloads · Last Day
 608,103,940
 Downloads · Last Week
 3,264,697,852
 Downloads · Last Month
 13,584,318,447 Published Modules · Every Week
 4,800 2017.09
  38. 38. 2012.03 2013.04
  39. 39. Raspberry Pi
  40. 40. nginScript
  41. 41. IOT.js & JerryScript
  42. 42. VR Generation?
  43. 43. Cross Browser Cross Platform Universal DOM BOM Isomorphic hybrid
  44. 44. 💩 💩💩
  45. 45. , 😁😭
  46. 46. – , “ ”
  47. 47. What the F*ck Javascript? Brian Reroux
  48. 48. Transpiler, Babel(6to5), Type Annotation
  49. 49. 1999 2009 2015 3.x 5.x 6.x4.x ES2015abandoned harmony - classes, - a module system, - optional type annotations and static typing, 
 probably using a structural type system, - generators and iterators, - destructuring assignment, and - algebraic data types. 🤷 💁
  50. 50. Source to Source Compile ES4~ES4 harmony~ES5 Brendan Eich Transpiler JSConf.US 2011
  51. 51. Jeremy Ashkenas
  52. 52. 2012.10 Two years of 
 Internal development by MS
  53. 53. ECMAScript 6 to ECMAScript 5 Transpiler Future-Proofing Slow Adoption Problem
  54. 54. Sebastian McKenzie
  55. 55. 2014.09
  56. 56. James Kyle
  57. 57. Henry Zhu
  58. 58. Babel React.js FB Typescript ?
  59. 59. Types and Type Annotations 2014` A Stage 0 Proposal Jonathan Turner & Brian Terlson 🙄
  60. 60. Functional, Reactive, Immutable, Saga
  61. 61. – “ ”
  62. 62. jQuery Backbone.js React.js DOM
 & BOM Knockout.js Prototype.js Vue.js Angular 2+ ? Polymer 2+ MVC MVVM
 Modulizing Two way binding Dependency Injection VDOM WebComponent Universal Uni-Direction data flow Mobile support State managing More Functional CSS in JS DOM manipulation Event Handling Scope UnobtrusiveMix with HTML/CSS Well separation Mixin all together 😯 🤔😀 😊 Angular 1.x
  63. 63. WebComponent 2011
  64. 64. Alex Russell
  65. 65. Polymer 2013.11 2015 1.0 2017 2.0
  66. 66. Jordan Walke
  67. 67. 2013.03 First Release First Deploy 2011
  68. 68. Evan You
  69. 69. 2014.02 First Release
  70. 70. Misko Hevery
  71. 71. 2014.09 First Release
  72. 72. . , , ☺
  73. 73. … React Component Vue.js . Angular Component …? Reusable WebComponent , , , …? …. …? 😫
  74. 74. I’ve seen the future, it’s full of HTML WebComponent are more than standards
  75. 75. Future WebComponent
  76. 76. CSS ? JS CSS … 50 🤣
  77. 77.
  78. 78. Scaffolding Testing Linting & Formatting Build Optimizing
  79. 79. Scaffolding
  80. 80. $ mkdir project $ make vendors $ make src $ make test
  81. 81. 2012
  82. 82. 1,000 Boilerplates 😤
  83. 83. Testing Framework
  84. 84. - Test Environment - Testing Structure - Assertion Functions - Report Test Result - Snapshot Comparing - Mocks, Spies and Stub - Code Coverage - Browser Test
  85. 85. Mocha, Ava, Jest, Jasmin, enzyme Krama, Istanbul, Cucumber, Chai, Sinon, Testdouble Protractor, Nightwatch, Phantom, Casper, Selenium
  86. 86. Linting & Formatter
  87. 87. Nicholas C. Zakas
  88. 88. 2002 2010 2013 2017
  89. 89. James Long
  90. 90. 2002 2010 2013 2017
  91. 91. tab space both
  92. 92. Build & Optimizing
  93. 93. shell & ant Require.js Grunt Gulp NPM Webpack Browserify Rollup Task runner Task & Module Bundler Concatenator
  94. 94. 2012.03 2017.03~ - Scope Hoisting - WebAssembly - Persistenter Cache - CSS as first-class citizen - ES2015+, CommonJS, AMD - Code Splitting - HMR - Dynamic Import - Tree Shaking - Minification - Source mapping - Incredibly fast compilation
  95. 95. 😭🤕 😩 Actually, This is Javascript Fatigue
  96. 96. You don’t need to install or configure any more creat-react-app angular-cli vue-cli 😘
  97. 97. ? “ ”
  98. 98. Battery Ventures Open-Source Software Index
  99. 99. According to the Battery Open-Source Software (BOSS) Index, Node.js is a leader in enterprise-grade open source.
  100. 100. Node.js Will Overtake Java Within a Year
  101. 101. 8.8 Million # of Node Instances 800,000 New node instances YTD https://medium.com/the-node-js-collection/node-js-state-of-the-union-blog-2017-ed86640ec451
  102. 102. Node.js Nodesource, RasingStack, Strongloop(acquired by IBM) Zeit
  103. 103. Node.js Foundation Membership Grows Globally Across Multiple Industries 🤝
  104. 104. @A Javascript Massage
  105. 105. HTML5
  106. 106. Copy & Paste Rich Documentation Web Application Platform Google Map 20091996 2005 2006 2010 20171999 ES4 2008 ES5 ES6 2015 ES7 2016 ES8 2013 Haroopad 2011 node-webkit Atom Shell 2012 2014 Universa
  107. 107. Universe Javascript
  108. 108.
  109. 109. .

×