<commit_before>@page Apis
@parent DoneJS
@hide sidebar
@outline 2 ol

@description DoneJS is comprised of many projects that are documented seperately. This page contains overviews of each project and links to their official APIs.

### Application Infrastructure

The blue boxes in the following architecture diagram represent modules provided by DoneJS.

<object type="image/svg+xml" data="static/img/donejs-stack-app.svg"></object>

- [StealJS](#stealjs) - Module loader and build system. [api](http://stealjs.com/docs/index.html).
- [CanJS](#canjs) - Views, ViewModels, modeling part of Models, custom elements, routing. [api](http://canjs.com/docs/index.html)
- [can-connect](#can-connect) - Data connection part of Models, real-time, fall-through cache. [api](https://connect.canjs.com)
- [can-set](#can-set) - Create set algebras used to compare AJAX parameters. [api](https://github.com/canjs/can-set#can-set)
- [jQuery](#jquery) - DOM utilities. [api](http://jquery.com/)
- [jQuery++](#jquery-1) - Even more DOM utilities. [api](http://jquerypp.com/)
- [done-ssr](#done-ssr) - Server-side rendering for NodeJS. [api](https://github.com/donejs/done-ssr)
- [done-autorender](#done-autorender) - Processes templates so they can be server-side rendered. [api](https://github.com/donejs/autorender#use)
- [can-simple-dom](#can-simple-dom) - A lightweight virtual DOM. [api](https://github.com/canjs/can-simple-dom)

### Tooling

DoneJS provides many aspects of JavaScript application tooling, shown in the diagram below.

<object type="image/svg+xml" data="static/img/donejs-stack-tooling.svg"></object>

- [donejs-cli](#cli-and-generators) - The commands available to the donejs command line interface. [api](https://github.com/donejs/cli)
- [generator-donejs](#cli-and-generators) - Default generators are bundled with DoneJS. [api](https://github.com/donejs/generator-donejs/)
- [QUnit](#qunit) - Default test assertion library. [api](http://qunitjs.com/)
- [FuncUnit](#funcunit) - Functional test utilities. [api](http://funcunit.com/)
- [Testee](#testee) - Browser launcher and test reporter. [api](https://github.com/bitovi/testee)
- [DocumentJS](#documentjs) - Documentation engine. [api](http://documentjs.com/)

@body

## Application flow overview

Lets talk about how the typical behavior of a DoneJS application works.  We'll use
the chat application as an example in development.  We'll cover what happens when:

 - A user navigates their browser from a different domain to `http://donejs-chat.com/`
 - A user navigates from `http://donejs-chat.com/` to another `http://donejs-chat.com/chat`.


### First page load

1. An http request for `http://donejs-chat.com/` is sent to a node server. The node server is configured,
   in this case with express, to use [done-ssr-middleware](#done-ssr) to render a DoneJS application:

   ```
   var ssr = require('done-ssr-middleware');

   app.use('/', ssr({
     config: __dirname + '/public/package.json!npm'
   }));
   ```

2. [done-ssr](#done-ssr) uses [steal](#stealjs) to load the application's main module which results in loading the
   entire application. Loading the application only happens once for all page requests.

   A DoneJS's main module is specified where all configuration of a DoneJS application happens, its `package.json`.
   The main module is usually a [can.stache](#canstache) template processed with the [done-autorender](#done-autorender)
   plugin. The module name is specified like: `index.stache!done-autorender`. `index.stache` might look like:

   ```
   <html>
   <head>
     <title>My Site</title>
   </head>
   <body>
     <can-import from="styles.less!"/>
     <can-import from="donejs-chat/app" export-as="viewModel" />
     {{#eq page "home"}}

       <can-import from="home/">
         {{#if isResolved}}
           <home-page></home-page>
         {{/if}}
       </can-import>

     {{/eq}}
     <script src="node_modules/steal/steal.js" main="index.stache!done-autorender"></script>
   </body>
   </html>
   ```

   The [done-autorender](#done-autorender) plugin, in NodeJS, exports this template so it can be rendered. It also exports
   any modules it imports with `<can-import>` that are labeled with `export-as="EXPORT_NAME"`. Exporting
   the viewModel is important for [done-ssr](#done-ssr)

3. Once [done-ssr](#done-ssr) has the [done-autorender](#done-autorender)'s `template` and `viewModel` export it:

   1. Creates a new instance of the viewModel, setting properties on it
   using [can.route](#canroute)'s routing rules.  
   2. Creates a new [virtual dom](#can-simple-dom) instance.
   3. Renders the [template](#canstache) with the `viewModel` into the `virtual dom` instance.

4. [done-autorender](#done-autorender) templates waits for all promises to complete
   before providing a final result.  Once the template is finished rendering, [done-ssr](#done-ssr) converts it to a
   string and sends it back to the browser.

5. The browser downloads the page's HTML, which includes a `<script>` tag that points to [steal](#stealjs).  

   <script src="node_modules/steal/steal.js" main="index.stache!done-autorender"></script>

   In development, this loads `steal.js` which then loads `index.stache` and processes it with
   the `done-autorender`.  

6. In the browser, `done-autorender`:

   1. Creates a new instance of the [viewModel](#canmap), setting properties on it
   using [can.route](#canroute)'s routing rules.  
   2. Renders the [template](#canstache) with the `viewModel` into a document fragment.
   3. Once all asynchronous activity has completed, it replaces the document with the rendered result.



### Pushstate change

1. A pushstate is triggered by user action, usually by clicking a link. [can.route](#canroute)'s routing rules determines the properties set on the application [viewModel](#canmap).

   ```
   can.route(':page', { page: 'home' });<commit_msg>Missing backticks around script tag<commit_after>@page Apis
@parent DoneJS
@hide sidebar
@outline 2 ol

@description DoneJS is comprised of many projects that are documented seperately. This page contains overviews of each project and links to their official APIs.

### Application Infrastructure

The blue boxes in the following architecture diagram represent modules provided by DoneJS.

<object type="image/svg+xml" data="static/img/donejs-stack-app.svg"></object>

- [StealJS](#stealjs) - Module loader and build system. [api](http://stealjs.com/docs/index.html).
- [CanJS](#canjs) - Views, ViewModels, modeling part of Models, custom elements, routing. [api](http://canjs.com/docs/index.html)
- [can-connect](#can-connect) - Data connection part of Models, real-time, fall-through cache. [api](https://connect.canjs.com)
- [can-set](#can-set) - Create set algebras used to compare AJAX parameters. [api](https://github.com/canjs/can-set#can-set)
- [jQuery](#jquery) - DOM utilities. [api](http://jquery.com/)
- [jQuery++](#jquery-1) - Even more DOM utilities. [api](http://jquerypp.com/)
- [done-ssr](#done-ssr) - Server-side rendering for NodeJS. [api](https://github.com/donejs/done-ssr)
- [done-autorender](#done-autorender) - Processes templates so they can be server-side rendered. [api](https://github.com/donejs/autorender#use)
- [can-simple-dom](#can-simple-dom) - A lightweight virtual DOM. [api](https://github.com/canjs/can-simple-dom)

### Tooling

DoneJS provides many aspects of JavaScript application tooling, shown in the diagram below.

<object type="image/svg+xml" data="static/img/donejs-stack-tooling.svg"></object>

- [donejs-cli](#cli-and-generators) - The commands available to the donejs command line interface. [api](https://github.com/donejs/cli)
- [generator-donejs](#cli-and-generators) - Default generators are bundled with DoneJS. [api](https://github.com/donejs/generator-donejs/)
- [QUnit](#qunit) - Default test assertion library. [api](http://qunitjs.com/)
- [FuncUnit](#funcunit) - Functional test utilities. [api](http://funcunit.com/)
- [Testee](#testee) - Browser launcher and test reporter. [api](https://github.com/bitovi/testee)
- [DocumentJS](#documentjs) - Documentation engine. [api](http://documentjs.com/)

@body

## Application flow overview

Lets talk about how the typical behavior of a DoneJS application works.  We'll use
the chat application as an example in development.  We'll cover what happens when:

 - A user navigates their browser from a different domain to `http://donejs-chat.com/`
 - A user navigates from `http://donejs-chat.com/` to another `http://donejs-chat.com/chat`.


### First page load

1. An http request for `http://donejs-chat.com/` is sent to a node server. The node server is configured,
   in this case with express, to use [done-ssr-middleware](#done-ssr) to render a DoneJS application:

   ```
   var ssr = require('done-ssr-middleware');

   app.use('/', ssr({
     config: __dirname + '/public/package.json!npm'
   }));
   ```

2. [done-ssr](#done-ssr) uses [steal](#stealjs) to load the application's main module which results in loading the
   entire application. Loading the application only happens once for all page requests.

   A DoneJS's main module is specified where all configuration of a DoneJS application happens, its `package.json`.
   The main module is usually a [can.stache](#canstache) template processed with the [done-autorender](#done-autorender)
   plugin. The module name is specified like: `index.stache!done-autorender`. `index.stache` might look like:

   ```
   <html>
   <head>
     <title>My Site</title>
   </head>
   <body>
     <can-import from="styles.less!"/>
     <can-import from="donejs-chat/app" export-as="viewModel" />
     {{#eq page "home"}}

       <can-import from="home/">
         {{#if isResolved}}
           <home-page></home-page>
         {{/if}}
       </can-import>

     {{/eq}}
     <script src="node_modules/steal/steal.js" main="index.stache!done-autorender"></script>
   </body>
   </html>
   ```

   The [done-autorender](#done-autorender) plugin, in NodeJS, exports this template so it can be rendered. It also exports
   any modules it imports with `<can-import>` that are labeled with `export-as="EXPORT_NAME"`. Exporting
   the viewModel is important for [done-ssr](#done-ssr)

3. Once [done-ssr](#done-ssr) has the [done-autorender](#done-autorender)'s `template` and `viewModel` export it:

   1. Creates a new instance of the viewModel, setting properties on it
   using [can.route](#canroute)'s routing rules.  
   2. Creates a new [virtual dom](#can-simple-dom) instance.
   3. Renders the [template](#canstache) with the `viewModel` into the `virtual dom` instance.

4. [done-autorender](#done-autorender) templates waits for all promises to complete
   before providing a final result.  Once the template is finished rendering, [done-ssr](#done-ssr) converts it to a
   string and sends it back to the browser.

5. The browser downloads the page's HTML, which includes a `<script>` tag that points to [steal](#stealjs).  

   ```
   <script src="node_modules/steal/steal.js" main="index.stache!done-autorender"></script>
   ```

   In development, this loads `steal.js` which then loads `index.stache` and processes it with
   the `done-autorender`.  

6. In the browser, `done-autorender`:

   1. Creates a new instance of the [viewModel](#canmap), setting properties on it
   using [can.route](#canroute)'s routing rules.  
   2. Renders the [template](#canstache) with the `viewModel` into a document fragment.
   3. Once all asynchronous activity has completed, it replaces the document with the rendered result.



### Pushstate change

1. A pushstate is triggered by user action, usually by clicking a link. [can.route](#canroute)'s routing rules determines the properties set on the application [viewModel](#canmap).

   ```
   can.route(':page', { page: 'home' });
{'fraction_non_alphanumeric': 0.13814677037538045, 'fraction_numerical': 0.002536354413256679, 'mean_word_length': 4.03147596767333, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 16, 'lorem ipsum': 0, 'www.': 0, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4348368', 'n_tokens_mistral': 3749, 'n_tokens_neox': 3548, 'n_words': 1178}