Modern JavaScript

[jonathanbossenger]

Details

• Content type (Online Workshop, Lesson, Course, Tutorial, or Lesson Plan): Lesson
• Content title: Modern JavaScript practices
• Topic description: Introduce more modern JavaScript practices in WordPress like ESNext, JSX, webpack, wp-scripts, let, const, destructuring assignment, and arrow functions.
• Audience (User, Developer, Designer, Contributor, etc.): Developer
• Experience Level (Beginner, Intermediate, Advanced, Any):

Prerequisites

It is assumed that the learner has already completed the following lessons:

• Beginner WordPress developer
• Modules 1 - 4
• Module 5: WordPress Hooks
• Module 6: An introduction to developing WordPress plugins
• Module 7: An introduction to developing WordPress blocks

Learning Objectives

• Identify the difference between JavaScript, ESNext, and JSX
• Explain the use of tools like webpack and Babel
• Explain the use of wp-scripts to implement a build process
• Summarise modern JavaScript practices for defining variables, object and functions

Related Resources and Other Notes

• https://developer.wordpress.org/block-editor/getting-started/fundamentals/javascript-in-the-block-editor/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#standardization_process

Automation Code

//lesson

[github-actions]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• Lesson reviewed
• Lesson video submitted and published to WPTV
• Lesson created on Learn.WordPress.org
• Lesson video published to YouTube
• Lesson on Learn.WordPress.org updated with YouTube video
• Lesson published to Learn.WordPress.org

[jonathanbossenger]

Script: https://github.com/jonathanbossenger/wp-content/blob/main/plugin-developer-learning-pathway/03-Advanced-Blocks/01-Modern-JavaScript.md

[jonathanbossenger]

Video for review: https://drive.google.com/file/d/1srQNFgPckj--Vdz2jzp2o7zQNQq90UBz/view?usp=sharing

Guidelines for Reviewing Content.

[RoelofWobben]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow.
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines](https://make.wordpress.org/training/handbook/guidelines/brand-usage-guidelines/) and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

Nice to see that more modern js is explained and shown in the video and script.

[MichelleBlanchette]

Tutorial/Lessons Review Checklist

Please tick all items you've confirmed:

• Learning outcomes/objectives are clear.
• Technical concepts introduced in the content are accurate.
• The speed of demonstrations are easy to follow. (see feedback)
• The narration audio matches what is shown visually.
• Spelling and grammar are correct.
• Sound quality is consistent throughout the video.
• Brand Usage Guidelines and Promotional Guidelines are being followed.
• Media assets are all in the public domain (CC0).

This is a fantastic synopsis of common terms a developer encounters in modern JS conversations/documentation, followed by concise demonstrations of the most common features of modern JS. I really enjoyed this! It was also really great to see some suggested resources at the end of the video for continued learning. 🙂

Here's a few suggestions I have:

02:15 - There is a thump noise (maybe throat clear or mic was bumped?). Could that be muted in the audio track?
06:32 - Can the difference in the function signature be specifically highlighted or pointed out visually? I found myself having to rewind to see what was being called out since the code snippets are only slightly different, visually.
06:40 - Calling out the parameters and doing some relevant highlighting for the arrow functions' differences would help visually clarify what's being pointed out. It was quite fast-paced for me, visually.

[jonathanbossenger]

Thanks for the review and feedback @MichelleBlanchette I'll work on implementing some tweaks around your suggested changes.