A component grade extends the notion of component defaults (fluid.defaults). In fact, every fluid.defaults directive introduces a grade into the system of Fluid Infusion components, which can be built on to derive further grades/components. This derivation occurs by mentioning the name of the original grade within the gradeNames section of the derived component.

Developers can create their own fluid.defaults / grades as well as use them to build upon each other, and compose them as needed.

The Infusion Framework already contains several predefined component grades that normally form the initial building blocks for external components and grades. The following table describes these grades and how they relate to each other.

Grade NameDescription
A special directive grade that instructs the framework to automatically construct a globally named creator function (with the same name as the grade) responsible for the construction of the component. NOTE: for the Infusion 2.0 release this grade will become redundant as it will be the default for every grade
A "little" component is the most basic component: it supports options merging with defaults (Little Components). All Fluid components are derived from this grade, and in general all things not derived from this grade are non-components (e.g. plain functions, or model transformation transforms, etc.)
A "model" component is already a little component that additionally provides supports for a component's model, defined in the components options, and operations on it (Model Components).
An "evented" component is already a little component that additionally instantiates event firers based on default framework events (onCreate, onDestroy, onDetach) and events declared in the options (Evented Components).
A "view" component is already an evented and a model component that is DOM aware and supports a view (View Components).
A "renderer" component is already a vew component that bears a renderer. There are additional features provided by this component grade specified on the Useful functions and events section of the Renderer Components page

Specifying A Grade

A component's grade should be specified using the gradeNames option in the components defaults block, as shown in the examples below. The gradeNames option is an array of strings.

NOTE: In the examples below, the autoInit flag is not actually a grade, but is added to the gradeNames array to control how the component is created. See #Initializing Graded Components below for more information about the autoInit flag. The autoInit flag will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

fluid.defaults("fluid.uploader.demoRemote", {
    gradeNames: ["fluid.eventedComponent", "autoInit"],
fluid.defaults("cspace.messageBarImpl", {
    gradeNames: ["fluid.rendererComponent", "autoInit"],
fluid.defaults("cspace.util.relationResolver", {
    gradeNames: ["fluid.modelComponent", "autoInit"],

Initializing Graded Components

The Framework offers support for automatic initialization of graded component through autoInit. When the autoInit flag is added to the gradeNames array, the Framework will create the creator function automatically – the developer does not need to write a creator function.

To use the autoInit flag, add it to the array of gradeNames, as shown below:

fluid.defaults("fluid.uploader.fileQueueView", {
    gradeNames: ["fluid.viewComponent", "autoInit"],

NOTE: Always use the "autoInit" flag, unless you have a very good reason not to.