Today, The Actions in Javascript

지금! 자바스크립트로 할수 있는 것 들.

Transcript

1. ૑Ә! ੗߄झ௼݀౟۽
   ೡ ࣻ ੓ח Ѫٜ
   Today, The Actions in Javascript
   

   View Slide

2. ੗߄झ௼݀౟
   Javascript
   

   View Slide

3. One of Most Popular Programming
   Languages
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. Running Javascript Application
   Manywhere
   

   View Slide

9. View Slide

10. View Slide

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

14. Browsers Server Desktop IoT
    Mobile
    

    View Slide

15. Community Driven Language
    

    View Slide

16. ECMAScript/ES 20XX
    

    View Slide

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

    View Slide

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

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

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

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

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

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

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

27. View Slide

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

29. View Slide

30. View Slide

31. View Slide

32. Compiling, to Javascript
    

    View Slide

33. - TypeScript: TypeScript is a superset of
    JavaScript that compiles to clean JavaScript
    output
    - Flow: Flow is a static typechecker for JavaScript
    - 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
    https://hackernoon.com/the-status-of-javascript-libraries-frameworks-2018-beyond-3a5a7cae7513
    

    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. https://hyunseob.github.io/2018/08/12/do-you-need-to-use-ts/
    

    View Slide

39. ࠳ۄ਋੷
    Browsers
    

    View Slide

40. Browser, platform for Web
    Applications
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. Engine, composing layout and
    running Javascript
    

    View Slide

46. Blink
    V8
    Webkit
    Nitro
    Gecko(Quantum)
    Spidermonkey
    EdgeHTML
    Chakra
    Blink
    V8
    Blink
    V8
    

    View Slide

47. - Chrome, Chromium, Opera and Samsung
    Mobile Browser
    - Developed for The Chromium Project for
    Google Chrome and Chromium web browsers
    - Used Node.js that are used server-side and
    CLI (terminal)
    - Enabling Ignition and TurboFan pipeline
    

    View Slide

48. Quantum
    - Firefox Browser
    - Builded for the next-generation web engine
    for Firefox users
    - Written in Rust Programming Language for
    better memory safety, concurrency, and
    parallelism on multiple CPU core than
    compiled C++ code
    

    View Slide

49. Chakra
    Core
    - Edge Browser
    - High-performance JavaScript engine that
    powers Microsoft Edge
    - Open-sourced
    - Microsoft created a PR in the Node.js GitHub
    repo to use ChakraCore instead of V8
    

    View Slide

50. - Web Components
    - Web Assembly
    - Web Worker, Worklet
    - Web Payment
    - WebVR / AR
    

    View Slide

51. View Slide

52. View Slide

53. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
    

    View Slide

54. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
    

    View Slide

55. View Slide

56. য೒ܻா੉࣌
    Applications
    

    View Slide

57. Workflow, whole development
    process of Javascript Application
    

    View Slide

58. https://github.com/kamranahmedse/developer-roadmap
    

    View Slide

59. TOOLING ERA
    

    View Slide

60. View Slide

61. Init Dev Build Deploy
    

    View Slide

62. Init
    Scaffolding application
    that already work with
    solutions
    

    View Slide

63. Dev
    Iterated development
    with compile, linting,
    and reloading on dev
    server
    

    View Slide

64. Build
    Build production ready
    application
    

    View Slide

65. Deploy
    One command deploy to
    your server
    

    View Slide

66. View Slide

67. View Slide

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

    View Slide

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

    View Slide

70. https://2017.stateofjs.com/
    

    View Slide

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

    View Slide

72. - Best practices built with framework
    - Zero configuration tooling
    - Customizable configs
    - Exporting static files
    - PWA supports
    - Build with optimized performance like code-
    splitting
    - Good tutorials, books and videos for learning
    - Developer Ergonomics
    

    View Slide

73. Packages, reliability pattern is a
    design that result in reliable for
    production-ready application
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. CSS in JS, JavaScript as a language
    to describe and update styles
    

    View Slide

80. View Slide

81. View Slide

82. State Management, manage multiple
    pieces of state scattered across
    many components
    

    View Slide

83. https://facebook.github.io/flux/docs/in-depth-overview.html
    

    View Slide

84. View Slide

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

    View Slide

86. View Slide

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

    View Slide

88. View Slide

89. Tools, Editing, Debugging, Auditing
    and Testing
    

    View Slide

90. View Slide

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

    View Slide

92. LIGHTHOUSE SCORE
    

    View Slide

93. SOURCE EDITING
    

    View Slide

94. EAGER EVALUATION
    

    View Slide

95. OVERRIDES
    

    View Slide

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

    View Slide

97. View Slide

98. ࢲߡ-ࢎ੉٘
    Server-Side
    

    View Slide

99. Node, one of popular solutions in
    front-end server
    

    View Slide

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

101. https://www.youtube.com/watch?v=PNa9OMajw9w
     

     View Slide

102. https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
     

     View Slide

103. https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced-
     b5ad7cf7a447
     

     View Slide

104. 2018 Node.js User Survey Report - https://nodejs.org/en/user-survey-report/#profile2
     

     View Slide

105. View Slide

106. View Slide

107. View Slide

108. Deno, secure TypeScript run-time on
     V8
     

     View Slide

109. https://www.youtube.com/watch?v=M3BM9TB-8yA
     10 Things I Regret About Node.js
     - Ryan Dahl - JSConf EU 2018
     

     View Slide

110. - Bitcoin
     - Messaging server, MQTT
     - Bot Server
     - Game Server
     - Front-end app, auth server

     

     - AWS Lambda
     

     View Slide

111. ݽ߄ੌ
     Mobile
     

     View Slide

112. Native app
     w/
     Javascript
     Mobile
     Web App
     vs
     

     View Slide

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

     View Slide

114. - App like

     - Secure
     - Installable
     - Offline working

     - Notification
     - Discoverable
     - Device features
     Progressive
     Web Apps
     

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

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

     View Slide

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

     View Slide

122. Usecase, @Pinterest
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     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. Native Mobile App, w/ Javascript
     

     View Slide

132. React
     Native
     Native
     Script
     Vue
     Native
     Ionic
     (Angular)
     

     View Slide

133. https://2017.stateofjs.com/2017/mobile/results
     

     View Slide

134. View Slide

135. View Slide

136. View Slide

137. ؘझ௼఑
     Desktop
     

     View Slide

138. Electron Nw.Js
     Progressive
     Webapp
     

     View Slide

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

     View Slide

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

     View Slide

141. View Slide

142. View Slide

143. PWA for Desktop
     

     View Slide

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

     View Slide

145. View Slide

146. View Slide

147. ই੉য়౭
     IoT
     

     View Slide

148. - Not OS, runtime based
     - Using rich Javascript ecosystem, messaging
     protocols is already ready-for-production
     - Many of SDKs already support Javascript
     - Universal service for IoT, node based Server
     , and webapp, and device client
     - Support Native Interface
     JavaScript: The Perfect
     Language for the Internet
     of Things (IoT)
     

     View Slide

149. View Slide

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

     View Slide