JavaScript: Past, Present, Future
-
Upload
jungryul-choi -
Category
Software
-
view
543 -
download
1
Transcript of JavaScript: Past, Present, Future
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?