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 language paradigm

Too many CSS in JS

"# $

– , .

“ .”

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

1999

ES4

2008

ES5 ES6

2015

ES7

2016

ES8

6to5 + esnext

Google Map

2013

Haroopad

2011

node-webkit

2012 2014

• 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,948Downloads · Last Day

608,103,940Downloads · Last Week

3,264,697,852Downloads · Last Month

13,584,318,447 Published Modules · Every Week

4,800

2017.09

2012.03 2013.04

Raspberry Pi

nginScript

IOT.js & JerryScript

VR Generation?

Cross Browser Cross Platform UniversalDOM BOM

Isomorphic

hybrid

💩 💩💩

,

😁😭

– ,

“ ”

What the F*ck Javascript?

Brian Reroux

Transpiler, Babel(6to5), Type Annotation

1999 2009 2015

3.x 5.x 6.x4.xES2015abandoned

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.

🤷 💁

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

& BOM

Knockout.js

Prototype.js Vue.jsAngular 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

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 Stub - Code Coverage - Browser Test

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

Linting & Formatter

Nicholas C. Zakas

2002 2010 2013 2017

James Long

2002 2010 2013 2017

tab spaceboth

Build & Optimizing

shell & ant Require.jsGrunt Gulp NPM

WebpackBrowserify

Rollup

Task runner Task & Module Bundler

Concatenator

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

😭🤕 😩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-the-union-blog-2017-ed86640ec451

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

Zeit

Node.js Foundation Membership Grows Globally Across Multiple Industries

🤝

@AJavascript Massage

HTML5

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

Universal

Universe Javascript

❤

.