Head topics in Javascript, 2020

Transcript

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

   View Slide

2. View Slide

3. ੗߄झ௼݀౟
   Javascript
   

   View Slide

4. One of Most Popular Programming
   Languages
   

   View Slide

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

   View Slide

6. View Slide

7. TIOBE programming community index is a measure of popularity of programming languages
   

   View Slide

8. Javascript is running on
   many where
   

   View Slide

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.
   

   View Slide

10. View Slide

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.
    

    View Slide

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.
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Community Driven Language
    

    View Slide

19. ECMAScript/ES 20XX
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

23. View Slide

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
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. Compiling, to Javascript
    

    View Slide

31. View Slide

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
    

    View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. ࠳ۄ਋੷
    Browsers
    

    View Slide

40. Browser, the platform for Web
    Applications
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. Blink
    V8
    Webkit
    Nitro
    Gecko(Quantum)
    Spidermonkey
    Blink
    V8
    Blink
    V8
    Blink
    V8
    

    View Slide

46. View Slide

47. Web Assembly (aka, WASM)
    

    View Slide

48. WebAssembly
    

    View Slide

49. Javascript
    Source Code Ignition
    (JS Interpreter)
    TurboFan
    (Optimization Compiler)
    Deoptimize
    Optimize
    (Profile Data)
    Bytecode
    Optimized
    Code
    Collecting
    Information
    Profiling
    Data
    

    View Slide

50. Liftoff
    (WebAssembly baseline compiler)
    Hot Swap
    Execution
    Immediately
    WASM
    TurboFan
    (Optimization Compiler)
    Off-thread
    Optimization
    

    View Slide

51. View Slide

52. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
    

    View Slide

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
    

    View Slide

54. Threads in C
    https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread
    

    View Slide

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

    View Slide

56. SIMD
    Single Instruction, Multiple Data
    

    View Slide

57. View Slide

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

    View Slide

59. View Slide

60. View Slide

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

    View Slide

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

    View Slide

63. Web Capabilities (aka, Fugu)
    

    View Slide

64. View Slide

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

    View Slide

66. য೒ܻா੉࣌
    Applications
    

    View Slide

67. https://roadmap.sh/frontend
    

    View Slide

68. Workflow, whole development
    process of Javascript Application
    

    View Slide

69. View Slide

70. Init Dev Build Deploy
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. Framework, is a starting point, not a
    goal
    

    View Slide

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

    View Slide

76. View Slide

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

    View Slide

78. View Slide

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
    

    View Slide

80. View Slide

81. Data Management, manage multiple
    pieces of state scattered across
    many components
    

    View Slide

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

    View Slide

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

    View Slide

84. View Slide

85. View Slide

86. Packages Manager
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. Bundling, tighten up your application
    for serving in production-ready
    version
    

    View Slide

95. View Slide

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

    View Slide

97. View Slide

98. Tools, Editing, Debugging, Auditing
    and Testing
    

    View Slide

99. View Slide

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

     View Slide

101. LIGHTHOUSE SCORE
     

     View Slide

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

     View Slide

103. View Slide

104. View Slide

105. https://twitter.com/malweene/status/1177271711806427136/photo/1
     

     View Slide

106. ࢲߡ-ࢎ੉٘
     Server-Side
     

     View Slide

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
     

     View Slide

108. View Slide

109. View Slide

110. View Slide

111. View Slide

112. View Slide

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
     

     View Slide

114. View Slide

115. View Slide

116. JAMStack, serving pre-rendering
     files directly from a CDN, removing
     the requirement to run web servers
     

     View Slide

117. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

124. - App like
     - Secure
     - Installable
     - Offline working
     - Notification
     - Discoverable
     - Device features
     Progressive
     Web Apps
     

     View Slide

125. View Slide

126. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

135. - Accelerated Mobile Pages
     - Cached by a CDN
     - Optimised for fast loading
     - Opinionated Components
     and HTML
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

139. Native Mobile App, w/ Javascript
     

     View Slide

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

     View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. ؘझ௼఑
     Desktop
     

     View Slide

146. Electron
     Progressive
     Webapp
     

     View Slide

147. Electron, the best way to make a
     desktop app in web technologies on
     multi-platform
     

     View Slide

148. View Slide

149. View Slide

150. View Slide

151. Practice on embedding Node.js into Atom Editor // Speaker Deck - https://goo.gl/ENyzp9
     

     View Slide

152. View Slide

153. PWA for Desktop
     

     View Slide

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

     View Slide

155. View Slide

156. View Slide

157. View Slide

158. View Slide

159. View Slide

160. ੗߄झ௼݀౟ ೠߣ ೧
     ࠁࣁਃ
     Try it! Now!
     

     View Slide