Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez

1. Modern JavaScript Explain it like I'm an Apex developer by Edith Valencia-Martinez

2. #CD22 So what is modern JavaScript? 5 modern JavaScript features Show me a Lightning Web Component ! Conclusions Agenda

3. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995

4. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995 1997 ECMAScript 1 published ES2 published 1998 1999 ES3 published

5. #CD22 So what is modern JavaScript? 2009 1999 2003

6. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995 1997 ECMAScript 1 published ES2 published 1998 1999 ES3 published ES5 published 2009

7. #CD22 So what is modern JavaScript? 2009 1999 Ajax, JQuery JSON, strict, NodeJS 2015 AngularJS, ReactJS

8. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995 1997 ECMAScript 1 published ES2 published 1998 1999 ES3 published ES5 published 2009 ES6 published 2015

9. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995 1997 ECMAScript 1 published ES2 published 1998 1999 ES3 published ES5 published 2009 ES6 published 2015

10. #CD22 So what is modern JavaScript? Brendan Eich invented JavaScript for Netscape 1995 1997 ECMAScript 1 published ES2 published 1998 1999 ES3 published ES5 published 2009 ES6 published 2015 ES2022 published … 2022 …

11. #CD22 Block-level declarations Classes Modules Arrow functions Promises 5 modern JavaScript (ES6) features

12. #CD22 Declare variables/constants that are inaccessible outside a given block scope ( indicated by curly brackets { and } ) let: declare a variable and limit its scope to only the current code block. const: declare constants, their value cannot be changed once set. Block-level declarations

13. #CD22 Apex: variable scope

18. #CD22 Apex: constants

21. #CD22 ES6: let and const

22. #CD22 ES6: let and const Scope 1 Scope 1

26. #CD22 ES6: let and const Scope 2 Scope 2

29. #CD22 Similarities: ES6 classes support: static functions, instance methods, getters and setters, inheritance. Differences: No access modifiers in ES6’s classes. Private field declarations available in ECMAScript 2022 Constructors in ES6 use the keyword ‘constructor’. ES6 classes vs Apex classes

30. #CD22

31. #CD22

32. #CD22

33. #CD22

34. #CD22

35. #CD22

36. #CD22

37. #CD22

38. #CD22

39. #CD22

40. #CD22

41. #CD22 Related set of Javascript code. By default, variables and functions of a module are not available for use. ES6: modules

42. #CD22 ES6: modules formatAmount()

43. #CD22 ES6: modules export formatAmount()

44. #CD22 ES6: modules export formatAmount() import

45. #CD22 Apex does not have a module concept per se. As long as you declare your class 'public' or 'global', you can reuse it in another class. ES6: modules

46. #CD22 ES6: exporting

50. #CD22 ES6: single default export

51. #CD22 ES6: importing

54. #CD22 Simple syntax for creating functions Uses an arrow => In a way arrow functions behave similar to Apex as opposed to traditional JavaScript functions. ES6: arrow functions

55. #CD22 ES6: arrow functions

59. #CD22 They operate in the context of their enclosing scope. As opposed to: The value of this is usually determined by a function’s execution context. this might be referring to something different each time the function is called (runtime binding). ES6: arrow functions

60. #CD22 ES6: arrow functions and this

65. #CD22 ES6: arrow functions and this NaN !

66. #CD22 ES6: arrow functions and this Window !

68. #CD22 ES6: promises Asynchronous programming. “A promise is an object that is used as a placeholder for the eventual results of a deferred computation.” Specifies some code to be executed later, and also explicitly indicates if the code succeeded or failed. Apex: @future, Queueables

69. #CD22 ES6: promises

74. #CD22 Show me a LWC!

75. #CD22

76. #CD22 modules

77. #CD22 modules, classes, inheritance

78. #CD22 promises, arrow functions

79. #CD22 The road from Apex to JavaScript is smoother now thanks to ES6. Conclusions

80. #CD22 The road from Apex to JavaScript is smoother now thanks to ES6. Similar syntax to Apex is an advantage. Conclusions

81. #CD22 The road from Apex to JavaScript is smoother now thanks to ES6. Similar syntax to Apex is an advantage. There is more demand to code in JavaScript. Conclusions

82. #CD22 The road from Apex to JavaScript is smoother now thanks to ES6. Similar syntax to Apex is an advantage. There is more demand to code in JavaScript. There are many resources around to learn JavaScript! Conclusions

83. #CD22 The road from Apex to JavaScript is smoother now thanks to ES6. Similar syntax to Apex is an advantage. There is more demand to code in JavaScript. There are many resources around to learn JavaScript! Conclusions

84. #CD22 JavaScript skills for Salesforce developers https://trailhead.salesforce.com/en/content/learn/modules/javascript-essentials- salesforce-developers Trailhead: Learn to work with JavaScript (https://trailhead.salesforce.com/en/content/learn/trails/learn-to-work-with-javascript) Trailhead: Build a Bear-Tracking App with Lightning Web Components https://trailhead.salesforce.com/en/content/learn/projects/lwc-build-flexible- apps?trail_id=build-lightning-web-components Understanding ECMAScript 6: The definite guide for JavaScript developers 1st Edition Nicholas C. Zakas Resources

85. Thank you! #CD22

Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez

Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez

Recommended

More Related Content

Similar to Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez

Similar to Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez(20)

More from CzechDreamin

More from CzechDreamin(20)

Recently uploaded

Recently uploaded(20)

Modern JavaScript: Explain it like I’m an Apex developer, Edith Valencia-Martinez