Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript: Past, Present, Future

1,189 views

Published on

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

Published in: Software
  • Be the first to comment

JavaScript: Past, Present, Future

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

×