JAVASCRIPTPast, Present, and Future

JAVASCRIPT IN 2016

Saul: “How’s it going?”

Me: “Fatigued.”

Saul: “Family?”

Me: “No, JavaScript.”

• Front-end dev env is changing quickly (especially 2012-2015)

• So many tools and libraries are announced

WHAT’S GOING ON?

JAVASCRIPT

• Mocha → LiveScript → JavaScript

• Short language design/dev time (Netscape..)

• Wrong designs, bugs, …

• Only client-side language on browsers

ECMASCRIPT• Standardized by ECMA

• Specification

• Current version 2016

• Implementations

• SpiderMonkey, V8, Nitro, Chakra, JScript, ActionScript

• No major player

BROWSERS

and mobile browsers, too

and versions…

• Own JavaScript Engine

• Have various spec coverage

• Legacy browsers...

• Compatibility information

• CanIUse.com

• http://kangax.github.io/compat-table/es6/

FRAGMENTATION! !

JAVASCRIPT APPTO

NATIVE APP

STATIC WORLD

UI

View Logic

Business Logic

Object-relational mapping

AJAX

UI (dynamic)

View Logic

request response(html/css)

Business Logic

Object-relational mapping

REST API

View Logic

REST API

request response(json)

UI (dynamic)

Business Logic

Object-relational mapping

APP GETS COMPLEX• More and more components into one page

• Every component has its own state

• Some components have dependencies on others

APP GETS COMPLEX• More and more components into one page

• Every component has its own state

• Some components have dependencies on others

Model View

View

Model View

STORE

Store

REST API

request response(json)

View Logic

UI (dynamic)

Business Logic

Object-relational mapping

UNIDIRECTIONAL FLOW• NO MORE PING-PONG!

• Store has the whole state of app

• Update store on user action

UserAction

UpdateState DOM

FUNCTIONAL PROGRAMMING

• Immutable data

• Stateless components

• Pure functionsMain

sub2sub1

Store

VIRTUAL DOM• Lightweight copy of DOM in memory

• Generated on every user action

• Diff and update real DOM

• Simpler and more maintainable

• Hot reloading

• Swap logic without touching state

• Time travel debugging

• Swap state without touching logic

• https://youtu.be/oNogm31F2mo

GOOD STUFF

Object-relational mapping

QUERY

Store

View Logic

UI (dynamic)

Business Logic

request response(json)

Single Endpoint API

Object-graph Mapping

REST API

/home/all_info?id=10

/home/basic_info?id=10

Home id: 10address, price, description, images, facts, price history, tax history, neighborhood, schools, similar homes, …

Home id: 10address, price, description,images

REST API

Home id: 10name, price, description,images, facts

/home/basic_info_with_facts?id=10

Home id: 10name, price, description,images, price history

/home/basic_info_with_pricehistory?id=10

/home/basic_info_without_images

/home/basic_info_with_pricehistory_and_taxhistory

/home/basic_info_with_similar_homes_order_by_price

/home/basic_info_with_pricehistory_first_three_years

…

/home/basic_info_without_description

GRAPH QL

{ home (id: 10){ address price description images facts }}

/home/basic_info?id=10

GRAPH QL{ home (id: 10){ address price description images facts pricehistory taxhistory }}

/home/basic_info_with_pricehistory_and_taxhistory?id=10

GRAPH QL{ home (id: 10){ address price description images facts similarhomes(orderby: PRICE) { address price … } }}

/home/basic_info_with_similar_homes_

order_by_price?id=10

NATIVE APP• Electron by GitHub

• Windows, MacOS, Linux

• Apache Cordova

• Windows, MacOS, Linux, Mobile platforms

• React Native

• iOS, Android

• Write once, Run anywhere

Native Wrapper

API

Business Logic

JAVASCRIPTON SERVER

• NodeJS

• JavaScript runs on server!

• Powered by V8/Chakra

• NPM

• Package Repository

• Nuget / Maven repo

credit: modulecounts.com

BUNDLER

• Package / Module / Bundle

• No standard until ES2015

• CommonJS / AMD

• What for?

• Modularization

• Dependency Management

LINTER

• dynamic and loosely typed language

• lots of runtime errors

• code convention

• lint first and run it

TEST

• JS Test Framework

• Test Runner

• Mock, Assertion Library

• Headless Browser

BABEL

• Some people never satisfied with current JavaScript on browsers

• Most browsers do not fully support ES2015 or ES2016

TASK MANAGER

• Automates tasks

• transpile, test, lint, minify, uglify, watch, copy, delete, and more…

• Bundler + Task Runner

• Webpack

NEW LANGUAGE

• Some people want additional syntax on top of JavaScript

• Some want another language

• Transpile into JavaScript

• JavaScript acts like Java Bytecode

THERE ARE MORE STUFFBUT LET’S STOP HERE

IF YOU DON’T NEED IT,DON’T USE IT

WHAT’S NEXT?

WEBASSEMBLY

• REAL assembly code running on browsers

• Influenced by asm.js and PNaCl

• Running on JavaScript Engine

• Shares everything with JavaScript code

• Much smaller file size

• No more runtime optimization

• Supports other languages as well as JavaScript

• Better native apps

• Coming to major browsers by 2017 Q1(experimental)

REFERENCE• JavaScript Fatigue:

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jvk17fm90

• How it feels to learn JavaScript in 2016:https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.o6gqsjk93

• How it actually feels to write JavaScript in 2016:https://medium.com/@kitze/how-it-actually-feels-to-write-javascript-in-2016-46b5dda17bb5#.nmf9myi0r

• JavaScript는 잘못이 없다. 정말로:https://medium.com/@pitzcarraldo/javascript%EB%8A%94-%EC%9E%98%EB%AA%BB%EC%9D%B4-%EC%97%86%EB%8B%A4-%EC%A0%95%EB%A7%90%EB%A1%9C-fb9b8e033b10#.84a24saby

REFERENCE• Full Stack Fest 2016 (https://2016.fullstackfest.com/)

• The Frontend is a Full Stack (Luca Marchesini) https://www.youtube.com/watch?v=wtURpqTgtUs

• From REST to GraphQL (Marc-Andre Giroux) https://www.youtube.com/watch?v=eD7kLFGOgVw

• WebAssembly: birth of a virtual ISA (Ben Smith) https://www.youtube.com/watch?v=vmzz17JGPHI

THANK YOU!ANY QUESTIONS?