Head topics in Javascript, 2020

Head topics in Javascript, 2020

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

April 03, 2020
Tweet

Transcript

  1. ૑Ә! ੗߄झ௼݀౟ ೞ ۰ݶ ঌইঠ ೡ Ѫٜ Head topics in

    Javascript, 2020
  2. None
  3. ੗߄झ௼݀౟ Javascript

  4. One of Most Popular Programming Languages

  5. https://octoverse.github.com/

  6. None
  7. TIOBE programming community index is a measure of popularity of

    programming languages
  8. Javascript is running on many where

  9. https://en.wikipedia.org/wiki/JavaScript Initially only implemented client-side in web browsers, JavaScript engines

    are now embedded in many other types of host software, including server-side, databases, and in non-web programs, mobile and desktop applications.
  10. None
  11. https://en.wikipedia.org/wiki/JavaScript Initially only implemented client-side in web browsers, JavaScript engines

    are now embedded in many other types of host software, including server-side, databases, and in non-web programs, mobile and desktop applications.
  12. https://en.wikipedia.org/wiki/JavaScript Initially only implemented client-side in web browsers, JavaScript engines

    are now embedded in many other types of host software, including server-side, databases, and in non-web programs, mobile and desktop applications.
  13. None
  14. None
  15. None
  16. None
  17. None
  18. Community Driven Language

  19. ECMAScript/ES 20XX

  20. ECMAScript/ES 20XX == Javascript/JS

  21. https://en.wikipedia.org/wiki/JavaScript In November 1996, Netscape submitted JavaScript to ECMA International

    to carve out a standard specification, ... ECMAScript published in the first edition of the ECMA-262 standard in June 1997, ECMAScript 2 in June 1998, The release of ECMAScript 3 followed in December 1999, by 2003, the original ECMAScript 4 work was mothballed. The development of ECMAScript 4 was never completed. ... Alas, there was still turmoil between the various players ... While all of this was happening, the open source and developer communities set to work to revolutionize what could be done with JavaScript, in early 2009 to rename ECMAScript 3.1 to ECMAScript 5 and drive the language forward using an agenda that is known as Harmony. ECMAScript 5 was finally released in December 2009. In June 2011, ECMAScript 5.1 was released to fully align with the third edition of the ISO/IEC 16262 international standard. ECMAScript 2015 was released in June 2015. ECMAScript 2016 was released in June 2016. The current version is ECMAScript 2017, released in June 2017
  22. https://en.wikipedia.org/wiki/JavaScript In November 1996, Netscape submitted JavaScript to ECMA International

    to carve out a standard specification, ... ECMAScript published in the first edition of the ECMA-262 standard in June 1997, ECMAScript 2 in June 1998, The release of ECMAScript 3 followed in December 1999, by 2003, the original ECMAScript 4 work was mothballed. The development of ECMAScript 4 was never completed. ... Alas, there was still turmoil between the various players ... While all of this was happening, the open source and developer communities set to work to revolutionize what could be done with JavaScript, in early 2009 to rename ECMAScript 3.1 to ECMAScript 5 and drive the language forward using an agenda that is known as Harmony. ECMAScript 5 was finally released in December 2009. In June 2011, ECMAScript 5.1 was released to fully align with the third edition of the ISO/IEC 16262 international standard. ECMAScript 2015 was released in June 2015. ECMAScript 2016 was released in June 2016. The current version is ECMAScript 2017, released in June 2017
  23. None
  24. Stage 0: Strawman, submitting ideas and review Stage 1: Proposal,

    formal proposal for the feature Stage 2: Draft, first version of what will be in the specification Stage 3: Candidate, the proposal is mostly finished Stage 4: Finished, the proposal is ready to be included in the standard ECMAScript/ES 20XX
  25. None
  26. None
  27. None
  28. None
  29. None
  30. Compiling, to Javascript

  31. None
  32. - TypeScript: TypeScript is a superset of JavaScript that compiles

    to clean JavaScript output - ReasonML: Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems - PureScript: A strongly-typed language that compiles to Javascript, written in and inspired by Haskell - ClosureScript, Elm ClojureScript
  33. None
  34. - Superset of JavaScript that brings users optional static types

    and solid tooling - Designed for development of large applications and transcompiles to JavaScript - Maintained by Microsoft, Backed by Google (Angular and other project) - Support in many mature IDEs - Annotations and Compile-time type checking, Interfaces, Enumerated, Generics, Namespaces, Tuples, Async/await, Classes Modules ...
  35. None
  36. None
  37. None
  38. None
  39. ࠳ۄ਋੷ Browsers

  40. Browser, the platform for Web Applications

  41. None
  42. None
  43. None
  44. None
  45. Blink V8 Webkit Nitro Gecko(Quantum) Spidermonkey Blink V8 Blink V8

    Blink V8
  46. None
  47. Web Assembly (aka, WASM)

  48. WebAssembly

  49. Javascript Source Code Ignition (JS Interpreter) TurboFan (Optimization Compiler) Deoptimize

    Optimize (Profile Data) Bytecode Optimized Code Collecting Information Profiling Data
  50. Liftoff (WebAssembly baseline compiler) Hot Swap Execution Immediately WASM TurboFan

    (Optimization Compiler) Off-thread Optimization
  51. None
  52. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

  53. SharedArrayBuffer Threads Worker CPU Core WASM Instance Worker CPU Core

    WASM Instance Worker CPU Core WASM Instance https://www.youtube.com/watch?v=kZrl91SPSpc atomic.wait atomic.notify
  54. Threads in C https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread

  55. https://medium.com/google-earth/performance-of-web-assembly-a-thread-on-threading-54f62fd50cf7 Threads

  56. SIMD Single Instruction, Multiple Data

  57. None
  58. https://hacks.mozilla.org/2019/08/webassembly-interface-types/

  59. None
  60. None
  61. Web Audio / Midi https://ryoyakawai.com/blog/2015/07/27/webmusic-hackathon-kyoto-en.html

  62. https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

  63. Web Capabilities (aka, Fugu)

  64. None
  65. https://goo.gle/fugu-api-tracker

  66. য೒ܻா੉࣌ Applications

  67. https://roadmap.sh/frontend

  68. Workflow, whole development process of Javascript Application

  69. None
  70. Init Dev Build Deploy

  71. None
  72. None
  73. None
  74. Framework, is a starting point, not a goal

  75. REACT NEXT.JS VUE.JS NUXT.JS PREACT ANGULAR EMBER (GLIMMER) GOOD OPTIONS

    WITH WORKFLOW SVELTE
  76. None
  77. https://npmcharts.com/compare/react,angular,@angular/core,ember-cli,vue,@polymer/polymer,next,nuxt,preact

  78. None
  79. - Best practices built with the framework - Zero configuration

    tooling - Customizable configs - Exporting static files - PWA supports - Optimized performance - Tutorials, books and videos for learning - Developer Experience
  80. None
  81. Data Management, manage multiple pieces of state scattered across many

    components
  82. https://facebook.github.io/flux/docs/in-depth-overview.html State Management, Flux

  83. https://www.jahia.com/about-us/news-events/blog/introduction-to-graphql GraphQL

  84. None
  85. None
  86. Packages Manager

  87. 2018

  88. 2019

  89. 2020

  90. None
  91. None
  92. None
  93. None
  94. Bundling, tighten up your application for serving in production-ready version

  95. None
  96. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  97. None
  98. Tools, Editing, Debugging, Auditing and Testing

  99. None
  100. https://next-hnpwa.now.sh/ LIGHTHOUSE

  101. LIGHTHOUSE SCORE

  102. - Unit testing - E2E testing - UI Testing (Component)

    - Browser-side testing
  103. None
  104. None
  105. https://twitter.com/malweene/status/1177271711806427136/photo/1

  106. ࢲߡ-ࢎ੉٘ Server-Side

  107. - Node(node, Node.js) - V8 Engine for running Javascript out

    of browser - Light, fast, running on cross-platforms - Asynchronous I/O via libuv - Event-driven and Non-blocking I/O - Strong community, Node foundation and npm - Isomorphic (Universal) JavaScript Application
  108. None
  109. None
  110. None
  111. None
  112. None
  113. - Deno - Ryan Dahl, Same creator of Node -

    V8 Engine for running Javascript out of browser - Security, Security - Typescript - Simple Module System - Efficient Performance powered by Rust
  114. None
  115. None
  116. JAMStack, serving pre-rendering files directly from a CDN, removing the

    requirement to run web servers
  117. None
  118. Building and deploying modern websites and apps - GitHub Universe

    2019 - YouTube
  119. Building and deploying modern websites and apps - GitHub Universe

    2019 - YouTube
  120. 1 2 3 4 5 6 https://github.com/sw-yx/smashingconf-ny-2019/blob/master/readme.md

  121. https://github.com/ragingwind/next-templates

  122. ݽ߄ੌҗ ؘझ௼఑ Mobile and Desktop

  123. Mobile Web Application, web application with a first-class mobile experience

  124. - App like - Secure - Installable - Offline working

    - Notification - Discoverable - Device features Progressive Web Apps
  125. None
  126. None
  127. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  128. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  129. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  130. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  131. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  132. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  133. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  134. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices

  135. - Accelerated Mobile Pages - Cached by a CDN -

    Optimised for fast loading - Opinionated Components and HTML
  136. None
  137. None
  138. None
  139. Native Mobile App, w/ Javascript

  140. React Native Native Script Vue Native Ionic (Angular) Flutter (Dart)

  141. None
  142. None
  143. None
  144. None
  145. ؘझ௼఑ Desktop

  146. Electron Progressive Webapp

  147. Electron, the best way to make a desktop app in

    web technologies on multi-platform
  148. None
  149. None
  150. None
  151. Practice on embedding Node.js into Atom Editor // Speaker Deck

    - https://goo.gl/ENyzp9
  152. None
  153. PWA for Desktop

  154. https://developers.google.com/web/updates/2018/05/dpwa

  155. None
  156. None
  157. None
  158. None
  159. None
  160. ੗߄झ௼݀౟ ೠߣ ೧ ࠁࣁਃ Try it! Now!