Skip to main content

Overlaps & Challenges

Overlaps​

There are some overlaps of the different JavaScript appraoches that we've outlined below:

Webpacker code in initializers​

app/javascript/packs/base.jsx

e.g. Preact Modal, MentionAutocompleteTextArea

  • Added to the Forem namespace on the window object in base.jsx
  • Typically in an ESM world, we shouldn't require code to live on the window object, but due to the nature of the application, it's required so that non-ESM code can consume it
  • Can then be accessed via e.g. window.Forem.showModal(), e.g. see app/assets/javascripts/initializers/initializeCommentsPage.js.erb where we replace the vanilla textarea with the mention autocomplete one

Stimulus JS code​

The following Stimulus related code will be removed once we completely remove Stimulus from our application.

Preact in Stimulus JS​

e.g. app/javascript/admin/controllers/modal_controller.js

  • In some cases we want our reusable Preact components in the admin area, e.g. Modals.
  • We can dynamically import and render in the Stimulus controller
  • Currently only used for Modal and Snackbar & is a relatively new pattern for us

Stimulus JS in packs (creator onboarding)​

e.g. loadCreatorSettings in base.jsx

  • Allows us to use admin controllers in the main user-facing views
  • Specifically added for the new creator onboarding flow

Challenges​

Below are some of the challenges that we experience when working within this structure. We're currently working on improving the state of JavaScript and removing some of the challenges.

  • Non-initializer code needed by initializers, needing to add functions to the window.Forem namespace
  • Some initializer code re-runs on every page with unintended consequences
  • Async loading vs progressive enhancement (including testing challenges like Cypress attempting to click a button that doesn't have a handler attached yet)
  • Optimistic UI updates and silent failures (e.g. failed follow button click)
  • Duplication - e.g. the feed is loaded in multiple ways (server-side and Preact client-side), comment HTML exists in initializer JS code and html.erb code.
  • Multiple ways of implementing and layering interactivity on the same design system component (html.erb, Preact)