Head topics in Javascript, 2020

Transcript

1. ૑Ә! ੗߄झ௼݀౟ ೞ ۰ݶ ঌইঠ ೡ Ѫٜ Head topics in Javascript, 2020
3. ੗߄झ௼݀౟ Javascript
4. One of Most Popular Programming Languages
5. https://octoverse.github.com/
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.
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.
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
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
30. Compiling, to Javascript
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
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 ...
39. ࠳ۄ਋੷ Browsers
40. Browser, the platform for Web Applications
45. Blink V8 Webkit Nitro Gecko(Quantum) Spidermonkey Blink V8 Blink V8 Blink V8
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
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
58. https://hacks.mozilla.org/2019/08/webassembly-interface-types/
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)
65. https://goo.gle/fugu-api-tracker
66. য೒ܻா੉࣌ Applications
67. https://roadmap.sh/frontend
68. Workflow, whole development process of Javascript Application
70. Init Dev Build Deploy
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
77. https://npmcharts.com/compare/react,angular,@angular/core,ember-cli,vue,@polymer/polymer,next,nuxt,preact
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
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
86. Packages Manager
94. Bundling, tighten up your application for serving in production-ready version
96. https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices
98. Tools, Editing, Debugging, Auditing and Testing
100. https://next-hnpwa.now.sh/ LIGHTHOUSE
101. LIGHTHOUSE SCORE
102. - Unit testing - E2E testing - UI Testing (Component) - Browser-side testing
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
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
116. JAMStack, serving pre-rendering files directly from a CDN, removing the requirement to run web servers
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
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
139. Native Mobile App, w/ Javascript
140. React Native Native Script Vue Native Ionic (Angular) Flutter (Dart)
145. ؘझ௼఑ Desktop
146. Electron Progressive Webapp
147. Electron, the best way to make a desktop app in web technologies on multi-platform
151. Practice on embedding Node.js into Atom Editor // Speaker Deck - https://goo.gl/ENyzp9
153. PWA for Desktop
154. https://developers.google.com/web/updates/2018/05/dpwa
160. ੗߄झ௼݀౟ ೠߣ ೧ ࠁࣁਃ Try it! Now!