Composition Roots

AtomicJS was built with long held principles in mind. One of these is the idea of separating concerns. As such, the use of Dependency Injection was the first and foremost concept employed while building AtomicJS. It is recommended that DI be leveraged for building any web application using AtomicJS above a certain level of sophistication. When doing so, please consider breaking your application into the following components:

App View (root view adapter)

This view adapter is the outer most user interface component and contains one or more child controls that provide the various interfaces for the user experience. The App View is also where the instance of the observed model lives that the child controls bind to and that the App Controller manages.

Reusable Controls (child view adapters)

The various controls are web components that contain at a minimum a view adapter and optionally CSS and HTML elements for styling and enhanced structural definition. These controls are injected either into other controls or in the root App View. Instances of these controls join the view adapter tree and bind into the observed model hosted by the root App View based on their location in the view adapter tree.

App Controller

Proxy

Observed model

Composition Root

In your composition root, instantiate all of your components and glue them together. Ideally, the root the of the application will be your App Controller and it will accept via constructor parameters an instance of the App View view adapter, an instance of the Proxy service client, and any other dependencies such as path/routing components. The App View will likely require one or more Reusable Controls to be injected. Depending on the number of child controls, it may make sense to inject them organized into a map object. See the Single Page Applications tutorial in the AtomicJS Interactive Tutorials.