현시대의 자바스크립트가 개발자들에게 주는 피로함은 과연 어디서부터 출발했을까? 2015년 부터 자바스크립트의 피로감은 너무 극에 달했다고 생각했고 그 시작은 과연 어디서부터 왔는지 이 피로감의 끝은 어딜지 지난 과거의 역사와 현시대가 그 욕구를 반영하는 과정에서 자바스크립트 개발자가 알아야 할 이야기들을 자세히 정리해 봤습니다. 발표시간: 40m (80m 이 적당) #feconf 2017

1. Javascript Fatigue

2. @ R H I O K I M

3. P R E S E N T A T I O N

4. Brendan Eich

5. Dennis Ritchie

6. James Arthur Gosling

7. Bjarne Stroustrup

8. Larry Wall

9. John McCarthy

10. Matz

11. Rasmus Lerdorf

12. Guido van Rossum

14. Secret of Javascript

16. 😜

17. 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
"# $

18. – ,
.
“ .”

19. Douglas Crockford

20. Dion Almaer Co-Founder of Ajaxian

21. Sam Stephenson

22. John Resig

23. Steve Souders

24. Firejune

25. – ,
“ ”

26. Tim Berners-Lee

27. W3C HTML …

28. 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

29. • Adobe Flash
Flash HTML5
.
• Google
.
Google .

30. Steve Jobs said Adobe is Lazy
😨

31. 2004 HTML W3C
WHATWG
🙅' ( )* +,

32. 2005 IT .

34. HTML5

35. – ?
“ ”

36. Ryan Dahl

37. 2009

38. 😍

39. Isaac Z. Schlueter

41. 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

43. 2012.03 2013.04

44. Raspberry Pi

45. nginScript

46. IOT.js & JerryScript

48. VR Generation?

49. Cross Browser Cross Platform Universal
DOM
BOM
Isomorphic
hybrid

50. 💩 💩💩

51. ,
😁😭

52. – ,
“ ”

53. What the F*ck Javascript?
Brian Reroux

54. Transpiler, Babel(6to5), Type Annotation

55. 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.
🤷 💁

56. Source to Source Compile
ES4~ES4 harmony~ES5
Brendan Eich Transpiler JSConf.US 2011

57. Jeremy Ashkenas

59. 2012.10
Two years of
Internal development by MS

61. ECMAScript 6 to ECMAScript 5 Transpiler
Future-Proofing
Slow Adoption Problem

62. Sebastian McKenzie

63. 2014.09

64. James Kyle

65. Henry Zhu

66. Babel
React.js FB
Typescript ?

67. Types and Type Annotations
2014` A Stage 0 Proposal
Jonathan Turner & Brian Terlson
🙄

69. Functional, Reactive, Immutable, Saga

70. –
“ ”

71. 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

72. WebComponent
2011

73. Alex Russell

74. Polymer
2013.11 2015
1.0
2017
2.0

75. Jordan Walke

76. 2013.03
First Release
First Deploy
2011

77. Evan You

78. 2014.02
First Release

79. Misko Hevery

80. 2014.09
First Release

81. .
, ,
☺

82. …
React Component Vue.js .
Angular Component …?
Reusable WebComponent , , , …?
….
…?
😫

83. I’ve seen the future, it’s full of HTML
WebComponent are more than standards

84. Future
WebComponent

85. CSS ?
JS CSS …
50
🤣

86. –

87. Scaffolding
Testing
Linting & Formatting
Build
Optimizing

88. Scaffolding

89. $ mkdir project
$ make vendors
$ make src
$ make test

90. 2012

92. 1,000 Boilerplates
😤

93. Testing Framework

94. - Test Environment
- Testing Structure
- Assertion Functions
- Report Test Result
- Snapshot Comparing
- Mocks, Spies and Stub
- Code Coverage
- Browser Test

95. Mocha, Ava, Jest, Jasmin, enzyme
Krama, Istanbul, Cucumber, Chai, Sinon, Testdouble
Protractor, Nightwatch, Phantom, Casper, Selenium

96. Linting & Formatter

97. Nicholas C. Zakas

98. 2002 2010 2013 2017

99. James Long

100. 2002 2010 2013 2017

101. tab space
both

102. Build & Optimizing

103. shell & ant Require.js
Grunt
Gulp
NPM
Webpack
Browserify
Rollup
Task runner
Task &
Module Bundler
Concatenator

104. 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

105. 😭🤕 😩
Actually, This is Javascript Fatigue

106. You don’t need to install or configure any more
creat-react-app
angular-cli
vue-cli
😘

107. ?
“ ”

108. Battery Ventures Open-Source Software Index

109. According to the Battery Open-Source Software (BOSS) Index, Node.js is
a leader in enterprise-grade open source.

110. Node.js Will Overtake Java Within a Year

111. 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

114. Node.js
Nodesource, RasingStack, Strongloop(acquired by IBM)
Zeit

115. Node.js Foundation Membership
Grows Globally Across Multiple Industries
🤝

118. @A
Javascript Massage

119. HTML5

120. 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

121. Universe Javascript

122. ❤

123. .