Talking about: - The brief history of JavaScript - How JavaScript application architecture has changed - What's the next thing in JavaScript development environment

1. JAVASCRIPT
Past, Present, and Future

2. JAVASCRIPT IN 2016

3. Saul: “How’s it going?”
Me: “Fatigued.”
Saul: “Family?”
Me: “No, JavaScript.”

4. • Front-end dev env is
changing quickly (especially
2012-2015)
• So many tools and libraries
are announced

5. WHAT’S GOING ON?

6. JAVASCRIPT
• Mocha → LiveScript → JavaScript
• Short language design/dev time (Netscape..)
• Wrong designs, bugs, …
• Only client-side language on browsers

7. ECMASCRIPT
• Standardized by ECMA
• Specification
• Current version 2016
• Implementations
• SpiderMonkey,V8, Nitro, Chakra, JScript,ActionScript
• No major player

8. BROWSERS
and mobile browsers, too
and versions…

9. • Own JavaScript Engine
• Have various spec coverage
• Legacy browsers...
• Compatibility information
• CanIUse.com
• http://kangax.github.io/compat-table/es6/
FRAGMENTATION! !

10. JAVASCRIPT APP
TO
NATIVE APP

11. STATIC WORLD
UI
View Logic
Business Logic
Object-relational mapping

12. AJAX
UI (dynamic)
View Logic
request
response
(html/css)
Business Logic
Object-relational mapping

13. REST API
View Logic
REST API
request
response
(json)
UI (dynamic)
Business Logic
Object-relational mapping

14. APP GETS COMPLEX
• More and more components into one page
• Every component has its own state
• Some components have dependencies on others

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

17. STORE
Store
REST API
request
response
(json)
View Logic
UI (dynamic)
Business Logic
Object-relational mapping

18. UNIDIRECTIONAL FLOW
• NO MORE PING-PONG!
• Store has the whole state of app
• Update store on user action
User
Action
Update
State
DOM

19. FUNCTIONAL
PROGRAMMING
• Immutable data
• Stateless components
• Pure functions
Main
sub2sub1
Store

20. VIRTUAL DOM
• Lightweight copy of DOM in memory
• Generated on every user action
• Diff and update real DOM

21. • 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

22. Object-relational mapping
QUERY
Store
View Logic
UI (dynamic)
Business Logic
request
response
(json)
Single Endpoint API
Object-graph Mapping

23. REST API
/home/all_info?id=10
/home/basic_info?id=10
Home
id: 10
address, price, description,
images, facts, price history,
tax history, neighborhood,
schools, similar homes, …
Home
id: 10
address, price, description,
images

24. REST API
Home
id: 10
name, price, description,
images, facts
/home/basic_info_with_facts?id=10
Home
id: 10
name, price, description,
images, price history
/home/basic_info_with_pricehistory
?id=10

25. /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

27. GRAPH QL
{
home (id: 10){
address
price
description
images
facts
}
}
/home/basic_info?id=10

28. GRAPH QL
{
home (id: 10){
address
price
description
images
facts
pricehistory
taxhistory
}
}
/home/basic_info_with_pricehistory
_and_taxhistory?id=10

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

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

31. JAVASCRIPT
ON SERVER

32. • NodeJS
• JavaScript runs on server!
• Powered byV8/Chakra
• NPM
• Package Repository
• Nuget / Maven repo

33. credit: modulecounts.com

34. BUNDLER
• Package / Module / Bundle
• No standard until ES2015
• CommonJS / AMD
• What for?
• Modularization
• Dependency Management

35. LINTER
• dynamic and loosely typed
language
• lots of runtime errors
• code convention
• lint first and run it

36. TEST
• JSTest Framework
• Test Runner
• Mock,Assertion Library
• Headless Browser

37. BABEL
• Some people never satisfied
with current JavaScript on
browsers
• Most browsers do not fully
support ES2015 or ES2016

38. TASK MANAGER
• Automates tasks
• transpile, test, lint, minify,
uglify, watch, copy, delete,
and more…
• Bundler +Task Runner
• Webpack

40. NEW LANGUAGE
• Some people want
additional syntax on top of
JavaScript
• Some want another
language
• Transpile into JavaScript
• JavaScript acts like Java
Bytecode

41. THERE ARE MORE STUFF
BUT LET’S STOP HERE

42. IFYOU DON’T NEED IT,
DON’T USE IT

43. WHAT’S NEXT?

44. WEBASSEMBLY
• REAL assembly code running on browsers
• Influenced by asm.js and PNaCl
• Running on JavaScript Engine
• Shares everything with JavaScript code

45. • 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)

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

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

49. THANKYOU!
ANY QUESTIONS?