javascript: past, present, future
TRANSCRIPT
![Page 1: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/1.jpg)
JAVASCRIPTPast, Present, and Future
![Page 2: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/2.jpg)
JAVASCRIPT IN 2016
![Page 3: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/3.jpg)
Saul: “How’s it going?”
Me: “Fatigued.”
Saul: “Family?”
Me: “No, JavaScript.”
![Page 4: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/4.jpg)
• Front-end dev env is changing quickly (especially 2012-2015)
• So many tools and libraries are announced
![Page 5: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/5.jpg)
WHAT’S GOING ON?
![Page 6: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/6.jpg)
JAVASCRIPT
• Mocha → LiveScript → JavaScript
• Short language design/dev time (Netscape..)
• Wrong designs, bugs, …
• Only client-side language on browsers
![Page 7: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/7.jpg)
ECMASCRIPT• Standardized by ECMA
• Specification
• Current version 2016
• Implementations
• SpiderMonkey, V8, Nitro, Chakra, JScript, ActionScript
• No major player
![Page 8: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/8.jpg)
BROWSERS
and mobile browsers, too
and versions…
![Page 9: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/9.jpg)
• Own JavaScript Engine
• Have various spec coverage
• Legacy browsers...
• Compatibility information
• CanIUse.com
• http://kangax.github.io/compat-table/es6/
FRAGMENTATION! !
![Page 10: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/10.jpg)
JAVASCRIPT APPTO
NATIVE APP
![Page 11: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/11.jpg)
STATIC WORLD
UI
View Logic
Business Logic
Object-relational mapping
![Page 12: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/12.jpg)
AJAX
UI (dynamic)
View Logic
request response(html/css)
Business Logic
Object-relational mapping
![Page 13: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/13.jpg)
REST API
View Logic
REST API
request response(json)
UI (dynamic)
Business Logic
Object-relational mapping
![Page 14: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/14.jpg)
APP GETS COMPLEX• More and more components into one page
• Every component has its own state
• Some components have dependencies on others
![Page 15: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/16.jpg)
![Page 17: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/17.jpg)
STORE
Store
REST API
request response(json)
View Logic
UI (dynamic)
Business Logic
Object-relational mapping
![Page 18: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/18.jpg)
UNIDIRECTIONAL FLOW• NO MORE PING-PONG!
• Store has the whole state of app
• Update store on user action
UserAction
UpdateState DOM
![Page 19: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/19.jpg)
FUNCTIONAL PROGRAMMING
• Immutable data
• Stateless components
• Pure functionsMain
sub2sub1
Store
![Page 20: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/20.jpg)
VIRTUAL DOM• Lightweight copy of DOM in memory
• Generated on every user action
• Diff and update real DOM
![Page 21: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/21.jpg)
• 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
![Page 22: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/22.jpg)
Object-relational mapping
QUERY
Store
View Logic
UI (dynamic)
Business Logic
request response(json)
Single Endpoint API
Object-graph Mapping
![Page 23: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/23.jpg)
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
![Page 24: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/24.jpg)
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
![Page 25: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/25.jpg)
/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
![Page 26: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/26.jpg)
![Page 27: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/27.jpg)
GRAPH QL
{ home (id: 10){ address price description images facts }}
/home/basic_info?id=10
![Page 28: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/28.jpg)
GRAPH QL{ home (id: 10){ address price description images facts pricehistory taxhistory }}
/home/basic_info_with_pricehistory_and_taxhistory?id=10
![Page 29: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/31.jpg)
JAVASCRIPTON SERVER
![Page 32: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/32.jpg)
• NodeJS
• JavaScript runs on server!
• Powered by V8/Chakra
• NPM
• Package Repository
• Nuget / Maven repo
![Page 33: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/33.jpg)
credit: modulecounts.com
![Page 34: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/34.jpg)
BUNDLER
• Package / Module / Bundle
• No standard until ES2015
• CommonJS / AMD
• What for?
• Modularization
• Dependency Management
![Page 35: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/35.jpg)
LINTER
• dynamic and loosely typed language
• lots of runtime errors
• code convention
• lint first and run it
![Page 36: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/36.jpg)
TEST
• JS Test Framework
• Test Runner
• Mock, Assertion Library
• Headless Browser
![Page 37: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/37.jpg)
BABEL
• Some people never satisfied with current JavaScript on browsers
• Most browsers do not fully support ES2015 or ES2016
![Page 38: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/38.jpg)
TASK MANAGER
• Automates tasks
• transpile, test, lint, minify, uglify, watch, copy, delete, and more…
• Bundler + Task Runner
• Webpack
![Page 39: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/39.jpg)
![Page 40: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/40.jpg)
NEW LANGUAGE
• Some people want additional syntax on top of JavaScript
• Some want another language
• Transpile into JavaScript
• JavaScript acts like Java Bytecode
![Page 41: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/41.jpg)
THERE ARE MORE STUFFBUT LET’S STOP HERE
![Page 42: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/42.jpg)
IF YOU DON’T NEED IT,DON’T USE IT
![Page 43: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/43.jpg)
WHAT’S NEXT?
![Page 44: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/44.jpg)
WEBASSEMBLY
• REAL assembly code running on browsers
• Influenced by asm.js and PNaCl
• Running on JavaScript Engine
• Shares everything with JavaScript code
![Page 45: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/45.jpg)
• 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)
![Page 46: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/46.jpg)
![Page 47: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/47.jpg)
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
![Page 48: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/48.jpg)
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
![Page 49: JavaScript: Past, Present, Future](https://reader030.vdocuments.site/reader030/viewer/2022021506/58873ad01a28abc0748b688d/html5/thumbnails/49.jpg)
THANK YOU!ANY QUESTIONS?