Skip to content

Updated ToDo List exercise to promote modularization using ES Modules #745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

cjyuan
Copy link
Contributor

@cjyuan cjyuan commented Aug 4, 2025

  • I have tested my changes
  • My changes follow the style guide

Changelist

Updated the todo-list exercise to demonstrate how we can modularize a web app using ES Modules.

@cjyuan cjyuan requested a review from illicitonion August 4, 2025 21:20
Copy link
Member

@illicitonion illicitonion left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks great! My big question is: Should the "What is ESM" and "How to use ESM" live in the curriculum proper (in the prep for the sprint) rather than in the exercise repo?

- Separation of Concerns – Each part of the code handles a specific task, keeping things clear and organized.
- Team Collaboration – Multiple people can work on different modules at the same time without conflict.
- Scalability – You can add new features more easily as the project grows.
- Testing – Smaller modules are easier to test individually.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It feels maybe worth giving an "all together" vs "split out" example alongside this content? I think "separation of concerns" and "testability" are quite hard things to visualise without an example if you haven't experienced them before.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think some examples to illustrate those ideas could be useful. I can prepare them.

- Scalability – You can add new features more easily as the project grows.
- Testing – Smaller modules are easier to test individually.
- Readability – Modular code is easier to read, understand, and navigate.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's probably worth mentioning explicitly that when you import something it causes all of the top-level statements in that file to get run? Which is why defining functions is fine, but e.g. adding an event listener isn't?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My intention is to introduce the bare minimum of ESM through an example to get them started, and expect them to find out more about ESM from external resources:

Too much info initially could overwhelm many of them.

cjyuan and others added 2 commits August 5, 2025 13:40
Co-authored-by: Daniel Wagner-Hall <[email protected]>
Co-authored-by: Daniel Wagner-Hall <[email protected]>
@cjyuan
Copy link
Contributor Author

cjyuan commented Aug 5, 2025

I think this looks great! My big question is: Should the "What is ESM" and "How to use ESM" live in the curriculum proper (in the prep for the sprint) rather than in the exercise repo?

I was aiming to only introduce ESM through an example, and not requiring the trainees to use ESM in all their DOM-related exercises. (Do we want to?)

  • I think in Sprint 3 of Module Data-Groups the trainees already have their hands full with DOM. Adding ESM to Sprint-3 might overwhelm them. We could introduce this example in Module Data-Flow and encourage them to use ESM in their TV-Show project.

@illicitonion
Copy link
Member

I think this looks great! My big question is: Should the "What is ESM" and "How to use ESM" live in the curriculum proper (in the prep for the sprint) rather than in the exercise repo?

I was aiming to only introduce ESM through an example, and not requiring the trainees to use ESM in all their DOM-related exercises. (Do we want to?)

  • I think in Sprint 3 of Module Data-Groups the trainees already have their hands full with DOM. Adding ESM to Sprint-3 might overwhelm them. We could introduce this example in Module Data-Flow and encourage them to use ESM in their TV-Show project.

Yeah, I think this makes sense - thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants