Skip to content
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

Webpack: Rewrite and split to flank Restaurant Page project #27958

Conversation

MaoShizhong
Copy link
Contributor

@MaoShizhong MaoShizhong commented May 10, 2024

Because

The current Webpack lesson is a known pain point in the curriculum journey, primarily due to the sudden increase in complexity and steps of tooling, coupled with how much of the learning is left to external resources. These external resources limit the cohesiveness of teaching material, and can prove troublesome in the learning process when each resource includes a few unnecessary tidbits that can easily throw learners off (such as multiple entry points in the webpack official guides when learning about html-webpack-plugin). They also are frequently aimed at people who may know a little more about bundlers already, or are following a different course/tutorial. Thus, things often feel disjointed with the TOP curriculum.

While improving the Webpack lesson itself is the primary focus, it was also identified that the preceding ES6 modules lesson is fairly coupled with it, as Webpack and bundlers are introduced there instead of the Webpack lesson.

The order of the ES6 modules lesson was also identified as a little odd, and the order and flow could be improved by focusing on ES6 modules as a primary topic straight away, then introducing bundlers and Webpack in their own separate lesson.

General plan:

  • Rewrite ES6 modules lesson
  • Rewrite Webpack lesson
  • Write new "Webpack revisited" lesson to go immediately after "Project: Restaurant Page".
    • Move more advanced but "convenience" topics there, like webpack-merge
    • Extract template repos section from "Linting" and place it here instead
  • Tweak Project: Restaurant Page to reference any new material from preceding lesson changes if necessary

This PR

  • Rewrites the Webpack lesson (latest live preview)
  • Adds a new Webpack lesson after Restaurant Page (latest live preview)
  • Removes the Template Repo section (and all other mentions of them) from the Linting lesson, as the contents have been moved to the new second Webpack lesson. This will ironically trigger the Linter because the Linting lesson is missing an Assignment section, which I feel should be addressed separately.

Issue

Related to #26976
Related to #26977

Additional Information

Only to be merged alongside #27953 (which will close the two related issues), and when a PR has been completed for the Web app to link the new post-Restaurant Page lesson.

The lin

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project curriculum contributing guide
  • The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
  • The Because section summarizes the reason for this PR
  • The This PR section has a bullet point list describing the changes in this PR
  • If this PR addresses an open issue, it is linked in the Issue section
  • If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
  • If any lesson files are included in this PR, they follow the Layout Style Guide

@MaoShizhong MaoShizhong added Type: New Lesson Involves a new lesson or lessons Type: Existing Lesson Involves an existing lesson or lessons Content: JavaScript Involves the JavaScript course labels May 10, 2024
@MaoShizhong
Copy link
Contributor Author

Things I would like thoughts on in particular:

  • Topics covered in each Webpack lesson
  • Order covered both as a whole but also in each lesson individually
    • I've been debating exactly how to cover npm scripts, whether they'd be better at the end of the first lesson or at the start of the second, because the Webpack guides use them throughout. My justification so far is that the first lesson is mainly a custom in-house rewriting of the Webpack tutorial anyway, so the current note about npm run build in the first lesson is sufficient, and npm scripts seem to be something we can leave for later to reduce overload.
  • Quality and relevance of all aspects of the custom Webpack tutorial
    • The goal was to provide a similar tutorial that only includes the things that would be most relevant in our curriculum, as the Webpack one includes little bits like multiple entry points, runtime optimisations, devServer.static etc. that make sense for a general "here's how different parts of Webpack work", but less in the context of our curriculum.
    • An in-house tutorial would also allow us to explain the why behind certain configurations, as they'll often not explained well (if at all) in the Webpack guides. Such explanations often require some preexisting knowledge of bundlers and build tools.
    • Both of the above would allow us to steer learners more towards the happy path of setting up and using Webpack (and at least kinda getting it), while avoiding some of the main (and very very common) pitfalls we've noticed in the community. Oftentimes arising due to using things they don't need but don't realise, because they just copied the Webpack guide without reading side notes etc.

Any other aspects as well. The above is just what stuck around my mind most during writing.
@advait0603 tagging you here as well for whenever you get any time to review. Again, much of this was going off things you raised in the past and planned out.

@MaoShizhong MaoShizhong marked this pull request as ready for review May 11, 2024 03:19
@MaoShizhong
Copy link
Contributor Author

Closing to restructure branch

@MaoShizhong MaoShizhong deleted the feature/weback-lesson-restructure branch May 11, 2024 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content: JavaScript Involves the JavaScript course Type: Existing Lesson Involves an existing lesson or lessons Type: New Lesson Involves a new lesson or lessons
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant