FLUID-5215: Create instructional demos for Infusion framework functionality, rendering, prefs framework and components

Description

We would like to create instructional demos that would serve as working examples of how to accomplish various common tasks in Infusion. The intention would be for each individual instructional demo to teach a single thing, for example, how to customize one feature of a component. The goal would be for the code to be clear, simple, self-contained, well-commented and illustrative of best practices. These demos would be referenced by documentation and tutorials.

Having each demo illustrate a single thing would result in a lot of small demos, which might result in code duplication. We should consider the possibility that any refactoring to reduce this duplication would likely obfuscate the code a bit, going against the goals of clear, simple and self-contained. We should attempt to carry out any such refactoring to minimize complication and obfuscation.

Comments

• Anastasia Cheetham commented 2013-11-20T16:24:25.116-0500

  We discussed this in the Community Meeting on Nov. 20 and came up with the following overall hierarchy:

  src
  framework
  components
  lib
  module
  demos
  showcase
  instructional
  integration <- to be destroyed
  standalone
  tests

  For the demos/instructional folder, the hierarchy should mirror, as much as reasonable, the hierarchy of the source folder. In general:

  demos/instructional
  framework
  core
  prefs
  renderer
  components
  componentX
  shared
  css
  shared.css
  html
  shared.html
  js
  shared.js
  demoX
  css
  file.css
  html
  file.html
  js
  file.js
  demoY
  css
  file.css
  html
  file.html
  js
  file.js
  componentY
  etc

• Justin Obara commented 2021-06-22T15:25:27.969-0400

  Perhaps something like this could be facilitated through codepen or similar system.

• Justin Obara commented 2024-07-31T15:16:23.827-0400

  Migrated to https://github.com/fluid-project/infusion-docs/issues/271