# Technical Documentation: tastejs/todomvc

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/tastejs/todomvc)

### Overview (`readme.md`)

# 

> Helping you select a JavaScript framework

### [Website](http://todomvc.com)    [Blog](http://blog.tastejs.com)    [TasteJS](http://tastejs.com)

Developers have a number of choices today when it comes to selecting a JavaScript framework or UI library for building scalable web apps.

React, Vue, Svelte, Angular, Solid, Lit... the list of solutions continues to grow, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented in most of the popular JavaScript frameworks of the day. Each example is functionally identical and follows the same [app specification](app-spec.md), so you can compare syntax, structure, and idioms side by side on equal footing.

TodoMVC has been the de-facto teaching example for UI frameworks for over a decade, and forms the core of the cross-browser [Speedometer](https://browserbench.org/Speedometer3.1/) benchmark used by every major browser engine to optimize UI performance.


## Examples

The actively maintained examples in this repo are kept current with their framework's latest stable line. As of TodoMVC 2.0:

- [React 19](examples/react)
- [Vue 3.5](examples/vue)
- [Angular 21](examples/angular)
- [Svelte 5](examples/svelte) (with runes)
- [Preact 10](examples/preact)
- [Lit 3.3](examples/lit)
- [React Redux 9](examples/react-redux) (with Redux Toolkit 2)

Plenty of legacy framework showcases also live in `examples/` for historical reference. See the [website](http://todomvc.com) for the full list.


## Build a TodoMVC App with Your AI Coding Agent

The [app spec](app-spec.md) is plain Markdown and reads cleanly into any modern AI coding agent (Claude Code, Cursor, GitHub Copilot, Codex, Gemini Code Assist, Aider, and so on). To generate a fresh implementation in a framework or language that isn't on the list above, drop this prompt into your agent of choice:

```
Build a TodoMVC app following this spec https://raw.githubusercontent.com/tastejs/todomvc/refs/heads/master/app-spec.md in React
```

Replace `React` with `Vue`, `Svelte`, `Angular`, `Solid`, `Lit`, `Preact`, `Qwik`, or any framework or language you want to evaluate. The result follows the same behavioural surface every example in this repo implements (add, edit, toggle, filter, route, clear completed), so it's directly comparable to the reference apps.


## Running the examples and tests

Each example builds and serves itself. Most modern apps use Vite, webpack, or rollup; cd into an example, install, and run:

```sh
$ cd examples/react
$ npm install
$ npm run build
$ npm run serve
```

To run the Cypress test suite against the maintained examples:

```sh
$ npm install
$ npm run test:all
```

`npm run test:all` defaults to the curated modern set. Pass `--all` to sweep every example in `examples/`, or `--framework=react` to target a single one. See [tests/README.md](tests/README.md) for details.


## Team

TodoMVC would not be possible without a strong team of [contributors](https://github.com/tastejs/todomvc/contributors) helping push the project forward each day. Additionally, we have a core project team composed of:

#### [Addy Osmani](https://github.com/addyosmani) - Founder/Lead

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/110953?v=4&s=40">
  Addy is a Software Engineer at Google who originally created TodoMVC. He oversees the project direction, maintenance and organizes the planning and development efforts of the team.

#### [Sindre Sorhus](https://github.com/sindresorhus) - Lead Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/170270?v=4&s=40">
Sindre is a Web Developer who leads core development, quality control and application design for the project. His engineering contributions have helped us ensure consistency and best practices are enforced wherever possible. Sindre also leads up development of the TodoMVC application spec.

#### [Pascal Hartig](https://github.com/passy) - Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/9906?v=4&s=40">
Pascal is a Software Engineer at Twitter with a deep passion for consistency. He watches pull requests and helps developers getting their contributions integrated with TodoMVC.

#### [Stephen Sawchuk](https://github.com/stephenplusplus) - Developer

<img align="left" width="40" height="40" src="https://avatars3.githubusercontent.com/u/723048?v=2&s=40">
Stephen is a Front-end Engineer at Quicken Loans that cares about improving the maintainability and developer experience of open-source projects. His recent contributions include helping us move all apps over to using Bower and implementing the new information bar.

#### [Colin Eberhardt](https://github.com/colineberhardt) - Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/1098110?v=4&s=40">
Colin is a software consultant at Scott Logic who is passionate about all software - from JavaScript to Java, and C# to Objective-C. His recent contribution to the project has been a fully automated test suite.

#### [Sam Saccone](https://github.com/samccone) - Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/883126?v=4&s=40">
Sam is a Software Engineer at Google who is driven by an endless desire to create, solve problems, and improve developers' lives.

#### [Arthur Verschaeve](https://github.com/arthurvr) - Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/6025224?v=4&s=40">
Arthur is an open-source fanboy from Belgium. He is passionate about developer tooling and all things JavaScript.

#### [Fady Samir Sadek](https://github.com/FadySamirSadek) - Developer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/7483806?v=4&s=40">
Fady is a front-end developer who loves all things JavaScript and enjoys solving real world problems using the web platform and helping other developers do the same. He currently leads maintenance of the project and ensures that the project is friendly for new contributors and upcoming developers.

#### [Gianni Chiappetta](https://github.com/gf3) - Logo designer

<img align="left" width="40" height="40" src="https://avatars.githubusercontent.com/u/18397?v=4&s=40">
Gianni is a programmer and designer currently working as the Chief Rigger at MetaLab.

## Disclaimer

<img align="right" width="230" height="230" src="media/icon-small.png">

TodoMVC has been called many things including the 'Speed-dating' and 'Rosetta Stone' of JavaScript frameworks. Whilst we hope that this project can offer assistance in deciding what frameworks are worth spending more time looking at, remember that the Todo application offers a limited view of a framework's potential capability.

It is meant to be used as a gateway to reviewing how a basic application using a framework may be structured, and we heavily recommend investing time researching a solution in more depth before opting to use it.

Also, please keep in mind that TodoMVC is not the perfect way to compare the size of different frameworks. We intentionally use the unminified versions to make reading the source code easier.


## Getting Involved

Whilst we enjoy implementing and improving existing Todo apps, we're always interested in speaking to framework authors (and users) wishing to share Todo app implementations in their framework/solution of choice.

Check out our [contribution docs](contributing.md) for more info.


## License

Everything in this repo is MIT License unless otherwise specified.

[MIT](license.md) © Addy Osmani, Sindre Sorhus, Pascal Hartig, Stephen Sawchuk.

---

### Overview (`tests/README.md`)

# TodoMVC Browser Tests

A single Cypress spec runs the official TodoMVC behavioural tests
(add / edit / toggle / route / persist) against every example app.
Each example should be functionally identical, so the same spec is
parameterised over the framework name.

## Running

The default `npm run test:all` runs the spec against the curated set
of modern, actively-maintained framework examples:

```sh
$ npm run test:all
```

That set is currently angular, preact, react, react-redux, svelte,
and vue — see `tests/cya.js`'s `mainFrameworks` array. Lit is omitted
from the default set; see "Notes on lit" below.

Run a single framework:

```sh
$ npm run server &
$ npx cypress run --env framework=react
```

Run a specific list:

```sh
$ npm run server &
$ node tests/cya.js -f vue -f svelte -f preact
```

Run **everything** in `examples/` that isn't in `excluded.js`,
including the legacy framework showcases (backbone, knockout, ember,
canjs, angular-dart, etc.):

```sh
$ npm run server &
$ node tests/cya.js --all
```

Many of the legacy apps still pass cleanly; some don't. See "Notes on
the legacy apps" below.

To iterate interactively:

```sh
$ npm run server &
$ npm run cy:open
```

then enter the framework via `CYPRESS_framework=react npm run cy:open`.

## How it works

- `tests/server.js` serves the repo root on `http://localhost:8000`.
- `cypress.config.js` sets `baseUrl` to `http://localhost:8000/examples/`.
- `cypress/e2e/spec.cy.js` is the spec, parameterised by
  `Cypress.env('framework')`.
- The spec's `frameworkFolders` map points apps that build to `dist/`
  (or `dist/browser/` for Angular) at their built output. Build the
  app first (`npm run build` inside the example) before running — the
  static server only serves what's on disk.
- `tests/cya.js` runs cypress sequentially for many frameworks and
  prints a summary table.
- `tests/excluded.js` lists frameworks the multi-app runner always
  skips (e.g. ones that need a hosted backend).
- `tests/knownIssues.js` lists `<framework>, <test name>` patterns
  that are auto-skipped per framework. Useful for "we know this one's
  broken; don't gate CI on it."

## Notes on lit

The lit example uses three nested shadow roots
(`<todo-app>` → `<todo-list>` → `<todo-item>`), which is the right
pattern for web components. Cypress's `includeShadowDom: true`
pierces one or two levels of shadow but doesn't traverse the
descendant combinator across three, so spec selectors like
`.todo-list li` can't find anything once items are added. The lit
app itself is correct; the test runner can't drive it.

To see what does pass:

```sh
$ npm run server &
$ npx cypress run --env framework=lit
```

Roughly 6/29 tests pass. The rest fail at "find todo li" rather than
on actual app behaviour. Properly fixing this needs spec-side helpers
that walk shadow roots explicitly (or a different test framework).

## Notes on the legacy apps

The non-default apps in `examples/` predate the current spec by
years and are largely unmaintained. Running `--all` will show:

- Several with full or near-full passes (knockback, enyo_backbone,
  reagent, exoskeleton, backbone_require, typescript-backbone, …).
  These still work.
- Some with 3–6 failures from minor spec drift (canjs, dojo,
  knockoutjs, mithril, etc.).
- A handful that cascade-fail at the very first test
  (backbone, emberjs, jquery, web-components, javascript-es5/6,
  aurelia). The apps don't bootstrap into the state the spec
  expects — these are pre-existing issues, not regressions from
  recent work.

Don't gate work on the legacy column; treat it as a state-of-the-
world snapshot.

---

### Overview (`bower_components/bootstrap/README.md`)

# [Bootstrap](http://getbootstrap.com)
[](http://badge.fury.io/bo/bootstrap)
[](http://badge.fury.io/js/bootstrap)
[](http://travis-ci.org/twbs/bootstrap)
[](https://david-dm.org/twbs/bootstrap#info=devDependencies)
[](https://saucelabs.com/u/bootstrap)

Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.

To get started, check out <http://getbootstrap.com>!

## Table of contents

 - [Quick start](#quick-start)
 - [Bugs and feature requests](#bugs-and-feature-requests)
 - [Documentation](#documentation)
 - [Contributing](#contributing)
 - [Community](#community)
 - [Versioning](#versioning)
 - [Creators](#creators)
 - [Copyright and license](#copyright-and-license)

## Quick start

Three quick start options are available:

- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.2.0.zip).
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
- Install with [Bower](http://bower.io): `bower install bootstrap`.

Read the [Getting started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more.

### What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

```
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
```

We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). Fonts from Glyphicons are included, as is the optional Bootstrap theme.



## Bugs and feature requests

Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/twbs/bootstrap/issues/new).


## Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.

### Running documentation locally

1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.0.x).
  - **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
3. Open <http://localhost:9001> in your browser, and voilà.

Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).

### Documentation for previous releases

Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.

[Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.



## Contributing

Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).

Editor preferences are available in the [editor config](https://github.com/twbs/bootstrap/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.



## Community

Keep track of development and community news.

- Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
- Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`twitter-bootstrap-3`](http://stackoverflow.com/questions/tagged/twitter-bootstrap-3)).



## Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.



## Creators

**Mark Otto**

- <http://twitter.com/mdo>
- <http://github.com/mdo>

**Jacob Thornton**

- <http://twitter.com/fat>
- <http://github.com/fat>



## Copyright and license

Code and documentation copyright 2011-2014 Twitter, Inc. Code released under [the MIT license](LICENSE). Docs released under [Creative Commons](docs/LICENSE).

---

### Overview (`bower_components/iron-a11y-keys-behavior/README.md`)

iron-a11y-keys-behavior
=======================

`Polymer.IronA11yKeysBehavior` provides a normalized interface for processing
keyboard commands that pertain to [WAI-ARIA best practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding).
The element takes care of browser differences with respect to Keyboard events
and uses an expressive syntax to filter key presses.

Use the `keyBindings` prototype property to express what combination of keys
will trigger the event to fire.

Use the `key-event-target` attribute to set up event handlers on a specific
node.
The `keys-pressed` event will fire when one of the key combinations set with the
`keys` property is pressed.

---

### Overview (`bower_components/iron-behaviors/README.md`)

[](https://travis-ci.org/PolymerElements/iron-behaviors)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-behaviors)_

---

### Overview (`bower_components/iron-checked-element-behavior/README.md`)

# iron-checked-element-behavior
Implements an element that has a checked attribute and can be added to a form

---

### Overview (`bower_components/iron-flex-layout/README.md`)

[](https://travis-ci.org/PolymerElements/iron-flex-layout)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-flex-layout)_


##&lt;iron-flex-layout&gt;


The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as flexbox. This component provides two different ways to use flexbox:

1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes). The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup.

2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.

A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.

---

### Overview (`bower_components/iron-form-element-behavior/README.md`)

# iron-form-element-behavior
Behavior that allows an element to be tracked by an iron-form

---

### Overview (`bower_components/iron-icon/README.md`)

iron-icon
=========

The `iron-icon` element displays an icon. By default an icon renders as a 24px square.

Example using src:

```html
<iron-icon src="star.png"></iron-icon>
```

Example setting size to 32px x 32px:

```html
<iron-icon class="big" src="big_star.png"></iron-icon>

<style>
  .big {
    height: 32px;
    width: 32px;
  }
</style>
```

The iron elements include several sets of icons.
To use the default set of icons, import  `iron-icons.html` and use the `icon` attribute to specify an icon:

```html

<link rel="import" href="/components/iron-icons/iron-icons.html">

<iron-icon icon="menu"></iron-icon>
```

To use a different built-in set of icons, import  `iron-icons/<iconset>-icons.html`, and
specify the icon as `<iconset>:<icon>`. For example:

```html

<link rel="import" href="/components/iron-icons/communication-icons.html">

<iron-icon icon="communication:email"></iron-icon>
```

You can also create custom icon sets of bitmap or SVG icons.

Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:

```html
<iron-icon icon="fruit:cherry"></iron-icon>
```

See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for more information about
how to create a custom iconset.

See [iron-icons](http://www.polymer-project.org/components/iron-icons/demo.html) for the default set of icons.

---

### Overview (`bower_components/iron-icons/README.md`)

iron-icons
=========

## Building
Running `update-icons.sh` will checkout [material-design-icons](https://github.com/google/material-design-icons), reduce
the fileset to 24px svgs, and compile the iconsets.

---

### Overview (`bower_components/iron-iconset-svg/README.md`)

[](https://travis-ci.org/PolymerElements/iron-iconset-svg)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-iconset-svg)_


##&lt;iron-iconset-svg&gt;


The `iron-iconset-svg` element allows users to define their own icon sets
that contain svg icons. The svg icon elements should be children of the
`iron-iconset-svg` element. Multiple icons should be given distinct id's.

Using svg elements to create icons has a few advantages over traditional
bitmap graphics like jpg or png. Icons that use svg are vector based so
they are resolution independent and should look good on any device. They
are stylable via css. Icons can be themed, colorized, and even animated.

Example:

    <iron-iconset-svg name="my-svg-icons" size="24">
      <svg>
        <defs>
          <g id="shape">
            <rect x="50" y="50" width="50" height="50" />
            <circle cx="50" cy="50" r="50" />
          </g>
        </defs>
      </svg>
    </iron-iconset-svg>

This will automatically register the icon set "my-svg-icons" to the iconset
database.  To use these icons from within another element, make a
`iron-iconset` element and call the `byId` method
to retrieve a given iconset. To apply a particular icon inside an
element use the `applyIcon` method. For example:

    iconset.applyIcon(iconNode, 'car');

---

### Overview (`bower_components/iron-menu-behavior/README.md`)

# iron-menu-behavior

`Polymer.IronMenuBehavior` implements accessible menu behavior.

---

### Overview (`bower_components/iron-meta/README.md`)

[](https://travis-ci.org/PolymerElements/iron-meta)

_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-meta)_


##&lt;iron-meta&gt;


`iron-meta` is a generic element you can use for sharing information across the DOM tree.
It uses [monostate pattern](http://c2.com/cgi/wiki?MonostatePattern) such that any
instance of iron-meta has access to the shared
information. You can use `iron-meta` to share whatever you want (or create an extension
[like x-meta] for enhancements).

The `iron-meta` instances containing your actual data can be loaded in an import,
or constructed in any way you see fit. The only requirement is that you create them
before you try to access them.

Examples:

If I create an instance like this:

    <iron-meta key="info" value="foo/bar"></iron-meta>

Note that value="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata.

Now I can access that element (and it's metadata) from any iron-meta instance
via the byKey method, e.g.

    meta.byKey('info').getAttribute('value');

Pure imperative form would be like:

    document.createElement('iron-meta').byKey('info').getAttribute('value');

Or, in a Polymer element, you can include a meta in your template:

    <iron-meta id="meta"></iron-meta>
    ...
    this.$.meta.byKey('info').getAttribute('value');



##&lt;iron-meta-query&gt;


`iron-meta` is a generic element you can use for sharing information across the DOM tree.
It uses [monostate pattern](http://c2.com/cgi/wiki?MonostatePattern) such that any
instance of iron-meta has access to the shared
information. You can use `iron-meta` to share whatever you want (or create an extension
[like x-meta] for enhancements).

The `iron-meta` instances containing your actual data can be loaded in an import,
or constructed in any way you see fit. The only requirement is that you create them
before you try to access them.

Examples:

If I create an instance like this:

    <iron-meta key="info" value="foo/bar"></iron-meta>

Note that value="foo/bar" is the metadata I've defined. I could define more
attributes or use child nodes to define additional metadata.

Now I can access that element (and it's metadata) from any iron-meta instance
via the byKey method, e.g.

    meta.byKey('info').getAttribute('value');

Pure imperative form would be like:

    document.createElement('iron-meta').byKey('info').getAttribute('value');

Or, in a Polymer element, you can include a meta in your template:

    <iron-meta id="meta"></iron-meta>
    ...
    this.$.meta.byKey('info').getAttribute('value');

---

### Overview (`bower_components/iron-pages/README.md`)

iron-pages
==========

`iron-pages` is used to select one of its children to show. One use is to cycle through a list of
children "pages".

Example:

```html
<iron-pages selected="0">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</iron-pages>

<script>
  document.addEventListener('click', function(e) {
    var pages = document.querySelector('iron-pages');
    pages.selectNext();
  });
</script>
```

---

### Overview (`bower_components/iron-resizable-behavior/README.md`)

iron-resizable-behavior
=======================

`IronResizableBehavior` is a behavior that can be used in Polymer elements to
coordinate the flow of resize events between "resizers" (elements that control the
size or hidden state of their children) and "resizables" (elements that need to be
notified when they are resized or un-hidden by their parents in order to take
action on their new measurements). 

Elements that perform measurement should add the `IronResizableBehavior` behavior to
their element definition and listen for the `iron-resize` event on themselves.
This event will be fired when they become showing after having been hidden,
when they are resized explicitly by another resizable, or when the window has been
resized.

Note, the `iron-resize` event is non-bubbling.

---

### Overview (`bower_components/iron-selector/README.md`)

iron-selector
=============

`iron-selector` is an element which can be used to manage a list of elements
that can be selected.  Tapping on the item will make the item selected.  The `selected` indicates
which item is being selected.  The default is to use the index of the item.

Example:

```html
<iron-selector selected="0">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</iron-selector>
```

If you want to use the attribute value of an element for `selected` instead of the index,
set `attrForSelected` to the name of the attribute.  For example, if you want to select item by
`name`, set `attrForSelected` to `name`.

Example:

```html
<iron-selector attr-for-selected="name" selected="foo">
  <div name="foo">Foo</div>
  <div name="bar">Bar</div>
  <div name="zot">Zot</div>
</iron-selector>
```

`iron-selector` is not styled. Use the `iron-selected` CSS class to style the selected element.

Example:

```html
<style>
  .iron-selected {
    background: #eee;
  }
</style>

...

<iron-selector selected="0">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</iron-selector>
```

---

### Overview (`bower_components/iron-validatable-behavior/README.md`)

# iron-validatable-behavior
Implements an element validated with Polymer.IronValidatorBehavior

---

### Overview (`bower_components/paper-behaviors/README.md`)

paper-behaviors
===============

These are common behaviors used across `paper-*` elements.

---

### Overview (`bower_components/paper-icon-button/README.md`)

paper-icon-button
=================

Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>

`paper-icon-button` is a button with an image placed at the center. When the user touches
the button, a ripple effect emanates from the center of the button.

`paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
from the icon set to use.

```html
<paper-icon-button icon="menu"></paper-icon-button>
```

See [`iron-iconset`](#iron-iconset) for more information about
how to use a custom icon set.

Example:

```html
<link href="path/to/iron-icons/iron-icons.html" rel="import">

<paper-icon-button icon="favorite"></paper-icon-button>
<paper-icon-button src="star.png"></paper-icon-button>
```

---

### Overview (`bower_components/paper-ripple/README.md`)

paper-ripple
============

`paper-ripple` provides a visual effect that other paper elements can
use to simulate a rippling effect emanating from the point of contact.  The
effect can be visualized as a concentric circle with motion.

Example:

```html
<paper-ripple></paper-ripple>
```

`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
effect when touches on it.  You can also defeat the default behavior and
manually route the down and up actions to the ripple element.  Note that it is
important if you call downAction() you will have to make sure to call
upAction() so that `paper-ripple` would end the animation loop.

Example:

```html
<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
...
<script>
  downAction: function(e) {
    this.$.ripple.downAction({x: e.x, y: e.y});
  },
  upAction: function(e) {
    this.$.ripple.upAction();
  }
</script>
```

Styling ripple effect:

Use CSS color property to style the ripple:

```css
paper-ripple {
  color: #4285f4;
}
```

Note that CSS color property is inherited so it is not required to set it on
the `paper-ripple` element directly.


By default, the ripple is centered on the point of contact. Apply the ``recenters`` attribute to have the ripple grow toward the center of its container.

```html
<paper-ripple recenters></paper-ripple>
```

Apply `center` to center the ripple inside its container from the start.

```html
<paper-ripple center></paper-ripple>
```

Apply `circle` class to make the rippling effect within a circle.

```html
<paper-ripple class="circle"></paper-ripple>
```

---

### Overview (`bower_components/paper-tabs/README.md`)

[](https://travis-ci.org/PolymerElements/paper-tabs)

_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-tabs)_


##&lt;paper-tabs&gt;


Material design: [Tabs](https://www.google.com/design/spec/components/tabs.html)

`paper-tabs` makes it easy to explore and switch between different views or functional aspects of
an app, or to browse categorized data sets.

Use `selected` property to get or set the selected tab.

Example:

    <paper-tabs selected="0">
      <paper-tab>TAB 1</paper-tab>
      <paper-tab>TAB 2</paper-tab>
      <paper-tab>TAB 3</paper-tab>
    </paper-tabs>

See <a href="#paper-tab">paper-tab</a> for more information about
`paper-tab`.

A common usage for `paper-tabs` is to use it along with `iron-pages` to switch
between different views.

    <paper-tabs selected="{{selected}}">
      <paper-tab>Tab 1</paper-tab>
      <paper-tab>Tab 2</paper-tab>
      <paper-tab>Tab 3</paper-tab>
    </paper-tabs>

    <iron-pages selected="{{selected}}">
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
    </iron-pages>


To use links in tabs, add `link` attribute to `paper-tab` and put an `<a>`
element in `paper-tab`.

Example:

    <paper-tabs selected="0">
      <paper-tab link>
        <a href="#link1" class="horizontal center-center layout">TAB ONE</a>
      </paper-tab>
      <paper-tab link>
        <a href="#link2" class="horizontal center-center layout">TAB TWO</a>
      </paper-tab>
      <paper-tab link>
        <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
      </paper-tab>
    </paper-tabs>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-tabs-selection-bar-color` | Color for the selection bar | `--paper-yellow-a100`
`--paper-tabs` | Mixin applied to the tabs | `{}`



##&lt;paper-tab&gt;


`paper-tab` is styled to look like a tab.  It should be used in conjunction with
`paper-tabs`.

Example:

    <paper-tabs selected="0">
      <paper-tab>TAB 1</paper-tab>
      <paper-tab>TAB 2</paper-tab>
      <paper-tab>TAB 3</paper-tab>
    </paper-tabs>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-tab-ink` | Ink color | `--paper-yellow-a100`
`--paper-tab` | Mixin applied to the tab | `{}`
`--paper-tab-content` | Mixin applied to the tab content | `{}`
`--paper-tab-content-unselected` | Mixin applied to the tab content when the tab is not selected | `{}`

---

### Overview (`bower_components/webcomponentsjs/README.md`)

webcomponents.js
================

[](https://gitter.im/webcomponents/webcomponentsjs?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

A suite of polyfills supporting the [Web Components](http://webcomponents.org) specs:

**Custom Elements**: allows authors to define their own custom tags ([spec](https://w3c.github.io/webcomponents/spec/custom/)).

**HTML Imports**: a way to include and reuse HTML documents via other HTML documents ([spec](https://w3c.github.io/webcomponents/spec/imports/)).

**Shadow DOM**: provides encapsulation by hiding DOM subtrees under shadow roots ([spec](https://w3c.github.io/webcomponents/spec/shadow/)).

This also folds in polyfills for `MutationObserver` and `WeakMap`.


## Releases

Pre-built (concatenated & minified) versions of the polyfills are maintained in the [tagged versions](https://github.com/webcomponents/webcomponentsjs/releases) of this repo. There are two variants:

`webcomponents.js` includes all of the polyfills.

`webcomponents-lite.js` includes all polyfills except for shadow DOM.


## Browser Support

Our polyfills are intended to work in the latest versions of evergreen browsers. See below
for our complete browser support matrix:

| Polyfill   | IE10 | IE11+ | Chrome* | Firefox* | Safari 7+* | Chrome Android* | Mobile Safari* |
| ---------- |:----:|:-----:|:-------:|:--------:|:----------:|:---------------:|:--------------:|
| Custom Elements | ~ | ✓ | ✓ | ✓ | ✓ | ✓| ✓ |
| HTML Imports | ~ | ✓ | ✓ | ✓ | ✓| ✓| ✓ |
| Shadow DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Templates | ✓ | ✓ | ✓ | ✓| ✓ | ✓ | ✓ |


*Indicates the current version of the browser

~Indicates support may be flaky. If using Custom Elements or HTML Imports with Shadow DOM,
you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.

The polyfills may work in older browsers, however require additional polyfills (such as classList)
to be used. We cannot guarantee support for browsers outside of our compatibility matrix.


### Manually Building

If you wish to build the polyfills yourself, you'll need `node` and `gulp` on your system:

 * install [node.js](http://nodejs.org/) using the instructions on their website
 * use `npm` to install [gulp.js](http://gulpjs.com/): `npm install gulp`

Now you are ready to build the polyfills with:

    # install dependencies
    npm install
    # build
    gulp build

The builds will be placed into the `dist/` directory.

## Contribute

See the [contributing guide](CONTRIBUTING.md)

## License

Everything in this repository is BSD style license unless otherwise specified.

Copyright (c) 2015 The Polymer Authors. All rights reserved.

## Helper utilities

### `WebComponentsReady`

Under native HTML Imports, `<script>` tags in the main document block the loading of such imports. This is to ensure the imports have loaded and any registered elements in them have been upgraded. 

The webcomponents.js and webcomponents-lite.js polyfills parse element definitions and handle their upgrade asynchronously. If prematurely fetching the element from the DOM before it has an opportunity to upgrade, you'll be working with an `HTMLUnknownElement`. 

For these situations (or when you need an approximate replacement for the Polymer 0.5 `polymer-ready` behavior), you can use the `WebComponentsReady` event as a signal before interacting with the element. The criteria for this event to fire is all Custom Elements with definitions registered by the time HTML Imports available at load time have loaded have upgraded.

```js
window.addEventListener('WebComponentsReady', function(e) {
  // imports are loaded and elements have been registered
  console.log('Components are ready');
});
```

## Known Issues

  * [Custom element's constructor property is unreliable](#constructor)
  * [Contenteditable elements do not trigger MutationObserver](#contentedit)
  * [ShadowCSS: :host-context(...):host(...) doesn't work](#hostcontext)
  * [execCommand isn't supported under Shadow DOM](#execcommand)

### Custom element's constructor property is unreliable <a id="constructor"></a>
See [#215](https://github.com/webcomponents/webcomponentsjs/issues/215) for background.

In Safari and IE, instances of Custom Elements have a `constructor` property of `HTMLUnknownElementConstructor` and `HTMLUnknownElement`, respectively. It's unsafe to rely on this property for checking element types.

It's worth noting that `customElement.__proto__.__proto__.constructor` is `HTMLElementPrototype` and that the prototype chain isn't modified by the polyfills(onto `ElementPrototype`, etc.)

### Contenteditable elements do not trigger MutationObserver <a id="contentedit"></a>
Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked `contenteditable`.
See [the mailing list](https://groups.google.com/forum/#!msg/polymer-dev/LHdtRVXXVsA/v1sGoiTYWUkJ)

### ShadowCSS: :host-context(...):host(...) doesn't work <a id="hostcontext"></a>
See [#16](https://github.com/webcomponents/webcomponentsjs/issues/16) for background.

Under the shadow DOM polyfill, rules like:
```
:host-context(.foo):host(.bar) {...}
```
don't work, despite working under native Shadow DOM. The solution is to use `polyfill-next-selector` like:

```
polyfill-next-selector { content: '.foo :host.bar, :host.foo.bar'; }
```

### execCommand and contenteditable isn't supported under Shadow DOM <a id="execcommand"></a>
See [#212](https://github.com/webcomponents/webcomponentsjs/issues/212)

`execCommand`, and `contenteditable` aren't supported under the ShadowDOM polyfill, with commands that insert or remove nodes being especially prone to failure.

---

### Overview (`examples/angular-dart/readme.md`)

# AngularDart TodoMVC Example

> AngularDart is heavily inspired by AngularJS and is supercharged for Dart.
> Core Angular features such as directives, data binding, and dependency
> injection, are all there, and they've taken advantage of Dart's features
> like metadata, types, and classes to feel natural for Dart developers.
> AngularDart is also the first version of Angular to be built on emerging
> web standards like Shadow DOM.

_[AngularDart](http://news.dartlang.org/2013/11/angular-announces-angulardart.html)_

## Learning Dart

The [Dart website](http://www.dartlang.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://www.dartlang.org/docs/technical-overview)
* [API Reference](http://api.dartlang.org/docs/releases/latest)
* [A Tour of the Dart Language](http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.html)
* [Articles](http://www.dartlang.org/articles)
* [Tutorials](http://www.dartlang.org/docs/tutorials)
* [FAQ](http://www.dartlang.org/support/faq.html)

Articles and guides from the community:

* [Getting started with Google Dart](http://www.techrepublic.com/blog/webmaster/getting-started-with-google-dart/931)

Get help from other Dart users:

* [Dart on StackOverflow](http://stackoverflow.com/questions/tagged/dart)
* [Dart on Twitter](http://twitter.com/dart_lang)
* [Dart on Google +](https://plus.google.com/+dartlang/posts)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

## Running

Dart compiles to JavaScript and thus runs across modern browsers. Dart also can
run in its own virtual machine.

Both Dart files and JS compilation result are provided in this sample,
therefore it actually works in any browser.

To edit and debug the code, you can use Dart Editor. The editor ships with the
[SDK](http://dartlang.org) and [Dartium](http://www.dartlang.org/dartium/), a
dedicated version of Chromium with an embedded Dart VM.

If you would like to edit the code without an IDE you must install Dart and run `pub get` to install the dependencies from the project root.

## Compiling

```
dart2js web/main.dart -o web/main.js
```

The dart2js compilator can be found in the SDK.

The currently provided JS is minified (dart2js [...] --minify).

---

### Overview (`examples/angular/readme.md`)

# TodoMvc

## Description

This application was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.5.

[Angular](https://angular.dev) is a development platform, built on TypeScript. As a platform, Angular includes:

- A component-based framework for building scalable web applications
- A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
- A suite of developer tools to help you develop, build, test, and update your code

With Angular, you're taking advantage of a platform that can scale from single-developer projects to enterprise-level applications. Angular is designed to make updating as straightforward as possible, so take advantage of the latest developments with minimal effort. Best of all, the Angular ecosystem consists of a diverse group of over 1.7 million developers, library authors, and content creators.

## Implementation details

In Angular, a service can make data and code available to other components, which lends itself to take on the responsiblity of the model. In this case, the todos service handles all CRUD operations of the todos data. 
This application is also organized in components, to allow a modular design of the header, footer and content (todo list + todo items). Each component folder contains a html file for the view and a ts file to act as a controller.

Angular:\
Model: todos.service\
View: Angular component's html\
ViewModel: Angular component's ts

MVC:\
Model: maintains the data and behavior of an application\
View: displays the model in the ui\
Controller: serves as an interface between view & model components

## TodoMVC specific details

- All styles are included from local packages: [todomvc-app.css](https://www.npmjs.com/package/todomvc-app-css) & [todomvc-common](https://www.npmjs.com/package/todomvc-common).
- A hash router was used to ensure the app has consistent behavior with other apps.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

---

### Overview (`examples/angularjs_require/readme.md`)

# AngularJS & RequireJS TodoMVC Example

> HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

> _[AngularJS - angularjs.org](http://angularjs.org)_


## Learning AngularJS
The [AngularJS website](http://angularjs.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Tutorial](http://docs.angularjs.org/tutorial)
* [API Reference](http://docs.angularjs.org/api)
* [Developer Guide](http://docs.angularjs.org/guide)
* [Applications built with AngularJS](https://www.madewithangular.com/)
* [Blog](http://blog.angularjs.org)
* [FAQ](http://docs.angularjs.org/misc/faq)
* [AngularJS Meetups](http://www.youtube.com/angularjs)

Articles and guides from the community:

* [Code School AngularJS course](https://www.codeschool.com/courses/shaping-up-with-angular-js)
* [5 Awesome AngularJS Features](http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features)
* [Using Yeoman with AngularJS](http://briantford.com/blog/angular-yeoman.html)
* [me&ngular - an introduction to MVW](http://stephenplusplus.github.io/meangular)

Get help from other AngularJS users:

* [Walkthroughs and Tutorials on YouTube](http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz)
* [Google Groups mailing list](https://groups.google.com/forum/?fromgroups#!forum/angular)
* [angularjs on Stack Overflow](http://stackoverflow.com/questions/tagged/angularjs)
* [AngularJS on Twitter](https://twitter.com/angularjs)
* [AngularjS on Google +](https://plus.google.com/+AngularJS/posts)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

## Unit Tests

To run the test suite, run these commands:

    npm install
    npm test

---

### Overview (`examples/aurelia/readme.md`)

# Aurelia • [TodoMVC](http://todomvc.com)

> *Aurelia* is a next generation JavaScript client framework that leverages simple conventions to empower your creativity.

## Resources

- [Aurelia TodoMVC source](https://github.com/mhoyer/todomvc-aurelia)
- [TodoMVC](https://github.com/tastejs/todomvc) home of all TodoMVC apps
- [Aurelia Website](http://aurelia.io/)
- [Aurelia Documentation](http://aurelia.io/docs)
- [Aurelia Blog](http://aurelia.io/blog)

### Support

- [Discourse Aurelia](https://discourse.aurelia.io)
- [Gitter Aurelia/Discuss](https://gitter.im/Aurelia/Discuss)
- [Original Author: Twitter @pixelplastic](http://twitter.com/pixelplastic)
- [Enhancement Author: bigopon](https://github.com/bigopon)

*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*

## Implementation

- Following the getting started tutorial: https://aurelia.io/docs/tutorials/creating-a-todo-app/
- Attempt to go TDD where possible

### Changelog

#### 0.2.0

- Fixed [#5 - ```<form>``` wrapping](https://github.com/mhoyer/todomvc-aurelia/issues/5)
- Fixed [#10 - FF backslash bug](https://github.com/mhoyer/todomvc-aurelia/issues/10)
- Fixed [#11 - IE11 support - Object.observe](https://github.com/mhoyer/todomvc-aurelia/issues/11)
- Updated Aurelia dependencies to latest 1.0.0-beta.1
- Updated todomvc assets to latest versions

#### 0.1.1

- Prepared all assets (README, learn.json, index.html, etc) to fulfill the [Contribution Docs](https://github.com/tastejs/todomvc/blob/master/contributing.md)
- Cleaned up obsolete files (```*.src.js```, empty ```css/app.css```)
- Fixed [#6](https://github.com/mhoyer/todomvc-aurelia/issues/6)
- Fixed [#7](https://github.com/mhoyer/todomvc-aurelia/issues/7)
- Fixed [#9](https://github.com/mhoyer/todomvc-aurelia/issues/9)

#### 0.1.0

- Finished functional implementation to fulfill [TodoMVC Application Specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md)
- Includes bundling (jspm) and exporting (for easy sync with [todomvc/examples/aurelia](https://github.com/tastejs/todomvc/tree/master/examples/aurelia))

### Open Questions While Developing

- See [Issues](https://github.com/mhoyer/todomvc-aurelia/issues/)

## Credit

Created by [Marcel Hoyer](http://marcelhoyer.de)
Enhanced by [bigopon](https://github.com/bigopon)

---

### Overview (`examples/backbone/readme.md`)

# TodoMVC: Backbone

## Description

This application uses Backbone to implement a todo application.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

[backbonejs.org](https://backbonejs.org/)

## Implementation Details

Backbone.js uses a MV(\*) pattern, which is loosely based on the MVC or MVP patterns.

Backbone.js:\
Model: model files\
View: html file in conjunction with underscore's templating solution (see 'Notes')\
Controller: view and router files

MVC:\
Model: maintains the data and behavior of an application\
View: displays the model in the ui\
Controller: serves as an interface between view & model components

#### Notes

- The storage solution uses an in-memory data object (contained in the sync file).\
- Underscore's `template` utility function compiles JavaScript templates into functions that can be evaluated for rendering ([source](https://underscorejs.org/#template)).

## Build Steps

A simple build script copies all necessary files to a `dist` folder.
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.

```
npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local Preview

```
terminal:
1. npm install
2. npm run dev
browser:
1. http://localhost:7001/
```

---

### Overview (`examples/backbone_marionette/readme.md`)

# Backbone.Marionette TodoMVC Example

> Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.

> _[Backbone.Marionette - marionettejs.com](http://marionettejs.com)_


## Learning Backbone.Marionette

The [Backbone.Marionette website](http://marionettejs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [API Reference](http://marionettejs.com/docs/current/)
* [Additional Marionette Resources](http://marionettejs.com/additional-resources/)
* [Backbone.Marionette on GitHub](https://github.com/marionettejs/backbone.marionette)

Articles and guides from the community:

* [A Thorough Introduction to Backbone.Marionette](http://coding.smashingmagazine.com/2013/02/11/introduction-backbone-marionette)
* [Backbone Marionette: Better Backbone Apps](http://www.joezimjs.com/javascript/backbone-marionette-better-backbone-apps)
* [Marionette Guides](https://www.gitbook.com/book/marionette/marionette-guides/details)
* [Marionette.js v3. Getting started with new version](http://blog.marionettejs.com/2016/08/23/marionette-v3/index.html)

Get help from other Backbone.Marionette users:

* [Backbone.Marionette on StackOverflow](http://stackoverflow.com/questions/tagged/backbone.marionette)
* [Backbone.Marionette on Twitter](http://twitter.com/marionettejs)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

* [Simple setups with different build tools](https://github.com/marionettejs/marionette-integrations)

---

### Overview (`examples/backbone_require/readme.md`)

# Backbone.js & RequireJS TodoMVC Example

> Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

> _[Backbone.js - backbonejs.org](http://backbonejs.org)_


## Learning Backbone.js

The [Backbone.js website](http://backbonejs.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Annotated source code](http://backbonejs.org/docs/backbone.html)
* [Applications built with Backbone.js](http://backbonejs.org/#examples)
* [FAQ](http://backbonejs.org/#faq)

Articles and guides from the community:

* [Developing Backbone.js Applications](http://addyosmani.github.io/backbone-fundamentals)
* [Collection of tutorials, blog posts, and example sites](https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites)

Get help from other Backbone.js users:

* [Backbone.js on StackOverflow](http://stackoverflow.com/questions/tagged/backbone.js)
* [Google Groups mailing list](https://groups.google.com/forum/#!forum/backbonejs)
* [Backbone.js on Twitter](http://twitter.com/documentcloud)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

---

### Overview (`examples/binding-scala/readme.md`)

# [Binding.scala • TodoMVC](https://github.com/ThoughtWorksInc/todo)

[Binding.scala](https://github.com/ThoughtWorksInc/Binding.scala) is a data-binding framework for [Scala](http://www.scala-lang.org/), running on both JVM and [Scala.js](http://www.scala-js.org/).

Binding.scala can be used as a **[reactive](https://en.wikipedia.org/wiki/Reactive_programming) web framework**.
It enables you use native XML literal syntax to create reactive DOM nodes,
which are able to automatically change whenever the data source changes.

Binding.scala's TodoMVC application has the tiniest code size among all the TodoMVC implementations,
only one source file, 154 lines of code!

## Getting Started

``` scala
/**
 * Returns a bindable HTML DOM tree.
 *
 * The `@dom` annotations enable two magics:
 *  1. XHTML literals to create DOM nodes
 *  2. `xxx.bind` syntax, which make this DOM tree keep updated whenever `xxx` changes.
 */
@dom def render = {
  val value = Var("")
  <div>
    <input onchange={ event: Event => dom.currentTarget.asInstanceOf[HTMLInputElement].value }/>
    Your input value is { value.bind }
  </div>
}

/**
 * Renders a bindable HTML DOM node into the body of current web page.
 */
@JSExport def main(): Unit = {
  dom.render(document.body, render)
}
```

## Instructions to build this application

1. Download and install [sbt](http://www.scala-sbt.org/)
2. Clone this repository `git clone https://github.com/ThoughtWorksInc/todo.git`
3. Execute the shell command `sbt indexHtml` at the base directory of this code base.
4. Open the generated `index.html` in your browser. Enjoy it! 😋

## Links

* [The Binding.scala Project Page](https://github.com/ThoughtWorksInc/Binding.scala)
* [This “Binding.scala • TodoMVC” Project Page](https://github.com/ThoughtWorksInc/todo)
* [This “Binding.scala • TodoMVC” DEMO](https://thoughtworksinc.github.io/todo)
* [API documentation](https://oss.sonatype.org/service/local/repositories/releases/archive/com/thoughtworks/binding/unidoc_2.11/8.0.0/unidoc_2.11-8.0.0-javadoc.jar/!/com/thoughtworks/binding/package.html)
* [Other live DEMOs](https://thoughtworksinc.github.io/Binding.scala/)
* [Chat on Gitter](https://gitter.im/ThoughtWorksInc/Binding.scala)

---

### Overview (`examples/canjs/readme.md`)

# CanJS TodoMVC Example

> CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

> _[CanJS - canjs.com](http://canjs.com)_

## Learning CanJS

The [CanJS website](http://canjs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [CanJS guides documentation](http://canjs.com/guides/index.html)
* [API documentation](http://canjs.com/docs/index.html)
* [Blog](http://bitovi.com/blog/tag/canjs)
* [Getting started video](http://www.youtube.com/watch?v=GdT4Oq6ZQ68)

Get help from other CanJS users:

* [CanJS on StackOverflow](http://stackoverflow.com/questions/tagged/canjs)
* [CanJS Forums](http://forum.javascriptmvc.com/#Forum/canjs)
* [CanJS on Twitter](http://twitter.com/canjs)
* [#canjs](http://webchat.freenode.net/?channels=canjs) IRC channel on Freenode

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

The CanJS TodoMVC example uses [can.Component](http://canjs.com/guides/Components.html) introduced in CanJS 2.0.
can.Component supports declarative view bindings using Mustache/Handlebars as the template syntax.

Version 2 is mostly backwards compatible with previous 1.1.x version. For alternative architecture examples have a look at
the [TodoMVC 1.2.0 CanJS example](https://github.com/tastejs/todomvc/tree/1.2.0/architecture-examples/canjs).

### CanJS and JavaScriptMVC

CanJS is the extracted, more modern and more library-like MVC parts of [JavaScriptMVC](http://javascriptmvc.com), formerly known as jQueryMX.

JavaScriptMVC 3.3 uses CanJS for the MVC structure so this TodoMVC example applies to JavaScriptMVC as well.

Additionally, JavaScriptMVC contains:

- [CanJS](http://canjs.com) - For the MVC parts
- [jQuery++](http://jquerypp.com) - jQuery's missing utils and special events
- [StealJS](http://javascriptmvc.com/docs.html#!stealjs) - A JavaScript package manager
- [DocumentJS](http://javascriptmvc.com/docs.html#!DocumentJS) - A documentation engine
- [FuncUnit](http://funcunit.com) - jQuery style functional unit testing

---

### Overview (`examples/canjs_require/readme.md`)

# CanJS & RequireJS TodoMVC Example

> CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

> _[CanJS - canjs.com](http://canjs.com)_


## Learning CanJS

The [CanJS website](http://canjs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://donejs.com/docs.html#!canjs)
* [Why CanJS](http://canjs.com/#why_canjs)
* [Applications built with CanJS](http://canjs.com/#examples)
* [Blog](http://bitovi.com/blog/tag/canjs)
* [Getting started video](http://www.youtube.com/watch?v=GdT4Oq6ZQ68)

Articles and guides from the community:

* [Diving into CanJS](http://net.tutsplus.com/tutorials/javascript-ajax/diving-into-canjs)

Get help from other CanJS users:

* [CanJS on StackOverflow](http://stackoverflow.com/questions/tagged/canjs)
* [CanJS Forums](http://forum.javascriptmvc.com/#Forum/canjs)
* [CanJS on Twitter](http://twitter.com/canjs)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

CanJS is currently one of the few MVC libraries that fully supports the AMD module concept. Any part of CanJS may be loaded as its own module, which in turn only loads the dependencies actually required.

You can obtain the `can` object by requiring `can/util/library`. This will provide all utility functions and any loaded module. This makes it easier to move existing CanJS applications to RequireJS and use the utility functions.

```javascript
define([
	'can/util/library',
	'can/control',
	'can/view/ejs
'], function (can) {
	can.Control // -> Construct
	can.view    // -> now able to render EJS views
});
```

For more information, read up in the [Using CanJS - AMD](http://canjs.us/#using_canjs-amd) section of the
documentation.

The available modules are

- `can/construct` - Inheritable constructor functions
  - `can/construct/super` - Call super methods
  - `can/construct/proxy` - Proxy construct methods
- `can/observe` - Observable key-value bindings
  - `can/observe/attributes` - Attribute conversion and model associations
  - `can/observe/backup` - Backup and restore Observe states
  - `can/observe/validations` - Validate observes
- `can/control` - Declarative event bindings
  - `can/control/plugin` - Turns Controls into jQuery plugins
  - `can/control/route` - Declarative route bindings
- `can/view` - Template loading, caching, rendering
  - `can/view/ejs` - Live binding embedded JavaScript
  - `can/view/mustache` - Live binding Mustache / Handlebars templates
  - `can/view/modifiers` - Adds view rendering abilities to jQuery modifiers (like `.html`, `.append` etc.)
- `can/route` - Back button and bookmarking support


### CanJS and JavaScriptMVC

CanJS is the extracted, more modern and more library-like MVC parts of [JavaScriptMVC](http://javascriptmvc.com), formerly known as jQueryMX.

JavaScriptMVC 3.3 uses CanJS for the MVC structure so this TodoMVC example applies to JavaScriptMVC as well.

Additionally, JavaScriptMVC contains:

- [CanJS](http://canjs.com) - For the MVC parts
- [jQuery++](http://jquerypp.com) - jQuery's missing utils and special events
- [StealJS](http://javascriptmvc.com/docs.html#!stealjs) - A JavaScript package manager
- [DocumentJS](http://javascriptmvc.com/docs.html#!DocumentJS) - A documentation engine
- [FuncUnit](http://funcunit.com) - jQuery style functional unit testing


### View engines

CanJS supports both live binding [EJS](http://canjs.us/#can_ejs) and [Mustache/Handlebars](http://canjs.us/#can_mustache)
templates. By default the Mustache view will be used but an EJS example is available as well.
You can easily change it by modifying the `view` option in the `js/app.js` file:

```js
Models.Todo.findAll({}, function (todos) {
	new Todos('#todoapp', {
		todos: todos,
		state: can.route,
		view: 'views/todos.ejs'
	});
});
```

---

### Overview (`examples/closure/readme.md`)

# Closure Tools TodoMVC Example

> The Closure Tools project is an effort by Google engineers to open source the tools used in many of Google's sites and web applications for use by the wider Web development community.

> _[Closure Tools - developers.google.com/closure](https://developers.google.com/closure)_


## Learning Closure Tools

The [Closure Tools website](https://developers.google.com/closure) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](https://developers.google.com/closure/library/docs/overview)
* [API Reference](http://docs.closure-library.googlecode.com/git/index.html)
* [Blog](http://closuretools.blogspot.com)
* [FAQ](https://developers.google.com/closure/faq)

Articles and guides from the community:

* [Examples, walkthroughs, and articles](http://www.googleclosure.com)
* [First Adventure in Google Closure](http://www.codeproject.com/Articles/265364/First-Adventures-in-Google-Closure)

Get help from other Closure Tools users:

* [Google Groups mailing list](https://groups.google.com/group/closure-library-discuss)
* [Closure Tools on Twitter](http://twitter.com/closuretools)
* [Closure Tools on Google +](https://plus.google.com/communities/113969319608324762672)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

Note this project breaks with the convention of the others and uses spaces in place of tabs within JavaScript files. This is to comply with the Google style guidelines which the Closure Linter enforces (see [Linting](#linting) below).


## Running

A third party build tool called [Plovr](http://plovr.com/) is used to make running and compiling the code easier. To serve the code for development purposes (the example should run in compiled mode without using Plovr), run the following command from this folder -

`npm install`
`npm run serve`

You'll also need to change the HTML file so that it references the served files instead of the compiled version (**make sure you comment out the compiled version otherwise it will not work**), to do this remove the compiled script reference and add the following -

`<script src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script>`

This will serve up the javascript files in RAW mode which is ideal for rapid development and debugging. To run the compiler, and therefore all the associated type checks etc., change RAW for ADVANCED -

`<script src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script>`


## Linting

Whilst Plovr features many of the tools from the Closure toolkit, one very useful one that's missing is the linter. The linter checks for common mistakes in your code, e.g. unused dependencies, whitespace errors. One restriction with the linter is that it will only permit code that adheres to the [Google JavaScript style guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml). In this case that means that we break with the project conventions and use space indentation instead of tabs.

The linter must be installed before use, the installation package is included in the build folder and the instructions are available on the [linter homepage](https://developers.google.com/closure/utilities/). Once installed run the following to check for errors -

`find . -path ./node_modules -prune -o -name *.js | xargs gjslint`

(or whatever floats your OSs boat)


## Compiling

To compile the code from the command line run -

`npm install`
`npm run build`

This will overwrite the js/compiled.js file with the new version, be sure to change the script tag reference in the HTML page.


## Credits

This TodoMVC application was created by [Chris Price](http://www.scottlogic.co.uk/blog/chris/).

---

### Overview (`examples/cujo/readme.md`)

# cujoJS TodoMVC Example

> cujo is an architectural toolkit for next generation JavaScript applications. It encourages highly modular development, declarative application assembly, and embraces the asynchronous nature of JavaScript and its fusion of object-oriented and functional programming styles.

> _[cujoJS - cujojs.com](http://cujojs.com)_


## Learning cujoJS

The [cujoJS website](http://cujojs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [know cujoJS](http://know.cujojs.com/)
* [cujoJS on GitHub](https://github.com/cujojs)

Articles and guides from the community:

* [An introductory presentation](http://www.youtube.com/watch?v=TqX-CqYYwEc)

Get help from other cujoJS users:

* [Google Groups mailing list](https://groups.google.com/forum/#!forum/cujojs)
* [cujoJS on Twitter](http://twitter.com/cujojs)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

Some things we feel are interesting about cujoJS's TodoMVC as compared to other implementations:

* Application composition is separate from application logic
* Code is *highly* modular and organized into components, each consisting of
  one or more of the following:
	* Composition specification (a.k.a. "wire spec")
	* JavaScript controller module
	* helper modules
	* localization bundle (strings.js)
	* HTML template (template.html)
	* CSS file, typically unthemed (structure.css)
* HTML templates are clean and simple, editable by mere mortals.
* OOCSS principles
	* Separates structural CSS from theme (skin)
	* visual state changes done via CSS
		* zero direct style manipulation
		* drastically simplifies HTML templates
* JavaScript environment is shimmed, rather than abstracted
	* code to modern standards, not to abstraction layers
* All strings are easily internationalized
* Application code has no explicit dependencies on:
	* DOMReady - the application lifecycle, even DOMReady, is managed
	  transparently.  Things that can happen before DOMReady, do.
	  Things that can't, don't.
	* DOM Query engine
	* DOM Event library

---

### Overview (`examples/dijon/readme.md`)

# Dijon TodoMVC Example

> An IOC/DI framework in Javascript, inspired by Robotlegs and Swiftsuspenders.

> _[Dijon - github.com/creynders/dijon-framework](https://github.com/creynders/dijon-framework)_


## Learning Dijon

The [Dijon website](https://github.com/creynders/dijon-framework) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://creynders.github.com/dijon-framework/docs)
* [Dijon on GitHub](https://github.com/creynders/dijon-framework)

Get help from other Dijon users:

* [Dijon on Twitter](http://twitter.com/camillereynders)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Credit

This TodoMVC application was created by [Camille Reynders](http://www.creynders.be).

---

### Overview (`examples/dojo/readme.md`)

# Dojo TodoMVC Example

> Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.

> _[Dojo - dojotoolkit.org](http://dojotoolkit.org)_


## Learning Dojo

The [Dojo website](http://dojotoolkit.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://dojotoolkit.org/documentation)
* [Getting started guide](https://dojotoolkit.org/reference-guide/quickstart)
* [API Reference](http://dojotoolkit.org/api)
* [Blog](http://dojotoolkit.org/blog)

Get help from other Dojo users:

* [Dojo/MVC on StackOverflow](http://stackoverflow.com/questions/tagged/dojo+model-view-controller)
* [Mailing list](http://dojotoolkit.org/community)
* [Dojo on Twitter](http://twitter.com/dojo)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Running

To run the Dojo example, you need to build Dojo with TodoMVC profile.
To do so, do the following. You need either java or node on your system to run these:

```
cd /path/to/todomvc/examples/dojo
npm install
mv ./node_modules/dojo-util ./node_modules/util
./node_modules/util/buildscripts/build.sh --profile ./profiles/todomvc.profile.js --release
```


## AMD Notes

Developers often ask what the difference is between Dojo 1.7+ and Require.js, which also supports the use of [AMD](https://github.com/amdjs/amdjs-api/wiki/AMD) modules.

Require.js is a loader which implements AMD and may be used with various toolkits. There are some other AMD implementations like curl.js.

Dojo is a toolkit which has been converted to use AMD and ships with an implementation of an AMD loader and optimization tools. As such, you do not need to use Require.js in order to write AMD modules using Dojo.

---

### Overview (`examples/duel/readme.md`)

# DUEL • [TodoMVC](http://todomvc.com)

> DUEL is a dual-side templating engine using HTML for layout and 100% pure JavaScript as the binding language. The same views may be executed both directly in the browser (client-side template) and on the server (server-side template).


## Resources

- [Website](http://duelengine.org)
- [Documentation](http://bitbucket.org/mckamey/duel/wiki/Home)
- [Syntax](https://bitbucket.org/mckamey/duel/wiki/Syntax)
- [Examples](https://bitbucket.org/mckamey/duel/wiki/Examples)
- [Source](https://bitbucket.org/mckamey/duel/src)

*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*


## Implementation

[DUEL](http://duelengine.org) is a duel-sided template engine. Views written as markup get precompiled into both JavaScript (client-side templates) and Java (server-side templates).

The client-side templates are executed as functions directly from JavaScript. The result can be rendered as either text markup or as DOM objects. This example generates DOM objects for views.

This particular example only uses the server-side templates for debugging. They have been generated into the `target/generated-sources/duel/` directory.


## Building

This example requires [Apache Maven 3](http://maven.apache.org/download.html) to build.

To run a standard Maven build command in the directory that contains the `pom.xml`:

	mvn clean package

Maven will download any dependencies, clean out any previously built files, and generate a new static app in the `www/` directory.


## Running

To run a debug-able version using Tomcat 7 as the web server, use this Maven command:

	mvn tomcat7:run

Then navigate your browser to <http://localhost:8080/>

## Credit

Created by [Stephen McKamey](http://mck.me)

---

### Overview (`examples/elm/readme.md`)

# Elm TodoMVC Example

> A functional language for interactive applications

> _[Elm](http://elm-lang.org/)_


## Learning Elm

The [Elm website](http://elm-lang.org/) is a great resource for getting
started.

Here are some links you may find helpful:

* [Try Elm](http://elm-lang.org/try)
* [Learn Elm](http://elm-lang.org/Learn.elm)
* [An Introduction to Elm](http://guide.elm-lang.org/)

Get help from other Elm users:

* [elm-discuss mailing list](https://groups.google.com/forum/?fromgroups#!forum/elm-discuss)
* [@elmlang on Twitter](https://twitter.com/elmlang)
* [@czaplic on Twitter](https://twitter.com/czaplic)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._



## Project Structure

All of the Elm code lives in `Main.elm` and relies
on the [elm-html][] package.

[elm-html]: http://package.elm-lang.org/packages/elm-lang/html/latest/

There also is a port handler set up in `index.html` to set the focus on
particular text fields when necessary.

## Build Instructions

You need to install [elm](http://elm-lang.org/install)
on your machine first.

Run the following commands from the root of this project:

```bash
elm make src/Main.elm --output build/elm.js
```

Then open `index.html` in your browser!

## Credit

This TodoMVC application was created by [@evancz](https://github.com/evancz), and imported into TasteJS by [@passy](https://twitter.com/passy).

---

### Overview (`examples/emberjs/README.md`)

# Ember.js TodoMVC Example using Ember 5.3

> A framework for creating ambitious web applications.

> _[Ember.js - emberjs.com](http://emberjs.com)_

\*Ember is not an MVC framework.

## Note for people updating this app.

The `index.html` and the `assets` folder in the parent folder as simlinks into the items with the same names inside `dist`. The `dist` folder has to be checked in git and built for production.

You can develop this project as a standard Ember application:

```bash
$ cd todomvc
$ pnpm install
$ pnpm start
```
Build Ember TodoMVC for production:

```bash
$ pnpm build 
```

Run Cypress Test:

```bash
# Run this command from the root folder of this repository
$ npm install
$ npm run server

# Run in a separated terminal
$ CYPRESS_framework=emberjs npm run cy:open
```

### Ember Notes

* The `rootURL` param in `config/environment.js` should keep as empty string.

---

### Overview (`examples/emberjs_require/readme.md`)

# Ember.js & RequireJS TodoMVC Example

This example was removed, because the Ember.js dependency injection architecture
does not provide appropriate hooks for asynchronous module loading yet and thus
the use of RequireJS with Ember.js is not advised.

To see what a TodoMVC application using Ember.js and RequireJS would look like
in its current state, visit:

[Ember.js + RequireJS Source](https://github.com/stephenplusplus/todomvc/tree/emberjs_require/dependency-examples/emberjs_require)
[Ember.js + RequireJS Demo](http://stephenplusplus.github.io/todomvc-emberjs-requirejs/dependency-examples/emberjs_require)

For more information, [read the discussion](https://github.com/tastejs/todomvc/pull/528).

---

### Overview (`examples/enyo_backbone/readme.md`)

# Enyo TodoMVC Example

> Use the same framework to develop apps for the web and for all major platforms, desktop and mobile.

> _[Enyo - enyojs.com](http://enyojs.com)_


## Learning Enyo

The [Enyo website](http://enyojs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://enyojs.com/docs)
* [About](http://enyojs.com/about)
* [Applications built with Enyo](http://enyojs.com/showcase)
* [Blog](http://blog.enyojs.com)
* [FAQ](http://enyojs.com/about/faq)
* [Enyo on GitHub](https://github.com/enyojs)

Get help from other Enyo users:

* [Enyo on StackOverflow](http://stackoverflow.com/questions/tagged/enyo)
* [Forums](http://forums.enyojs.com)
* [Mailing list on Google Groups](https://groups.google.com/forum/#!forum/enyo-development)
* [Enyo on Twitter](http://twitter.com/enyojs)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

---

### Overview (`examples/exoskeleton/readme.md`)

# Exoskeleton TodoMVC Example

> Exoskeleton is a faster and leaner Backbone for your HTML5 apps.
> It is a [Backbone](http://backbonejs.org) drop-in replacement
> with 100% optional dependencies, is faster, more developer-friendly with
> AMD / Bower / Component support and oriented towards modern browsers.

> _[Exoskeleton - exosjs.com](http://exosjs.com)_

## Learning Exoskeleton

Learning resources are work in progress. Since it is a drop-in replacement,
you can use Backbone docs and links:

The [Backbone.js website](http://backbonejs.org) is a great resource for getting started.

Articles and guides from the community:

* [Developing Backbone.js Applications](http://addyosmani.github.io/backbone-fundamentals)
* [Collection of tutorials, blog posts, and example sites](https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites)

Get help from other Backbone.js users:

* [Backbone.js on StackOverflow](http://stackoverflow.com/questions/tagged/backbone.js)
* [Exoskeleton on Twitter](http://twitter.com/paulmillr)

## Running

Simply open `public/index.html` in your browser to see it in action!

## Credit

This TodoMVC application was created by [@paulmillr](http://paulmillr.com).

---

### Overview (`examples/gwt/readme.md`)

# Google Web Toolkit TodoMVC Example

> Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords and Orkut. It's open source, completely free, and used by thousands of developers around the world.

> _[Google Web Toolkit - developers.google.com/web-toolkit](https://developers.google.com/web-toolkit)_


## Learning Google Web Toolkit

The [Google Web Toolkit website](https://developers.google.com/web-toolkit/) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](https://developers.google.com/web-toolkit/doc/latest/DevGuide)
* [Getting Started with the GWT SDK](https://developers.google.com/web-toolkit/gettingstarted)
* [Articles](https://developers.google.com/web-toolkit/articles)
* [Case Studies](https://developers.google.com/web-toolkit/casestudies)
* [Blog](http://googlewebtoolkit.blogspot.com)
* [FAQ](https://developers.google.com/web-toolkit/doc/latest/FAQ)

Get help from other Google Web Toolkit users:

* [Google Web Toolkit on StackOverflow](http://stackoverflow.com/questions/tagged/gwt)
* [Mailing list on Google Groups](http://groups.google.com/group/Google-Web-Toolkit)
* [Google Web Toolkit on Twitter](http://twitter.com/googledevtools)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

This application is rather different than most of the other TodoMVC versions in that it is written in Java which is compiled to JavaScript. The files within the `gwttodo` folder are the result of running the GWT compilation process on the Java files found within the src folder. The UI pattern used by this application is Model-View-Presenter.

Whilst this application is very different to the other implementations, it still makes for an interesting comparison. Large-scale JavaScript applications are often written with GWT or Closure, with the resulting JavaScript code delivered to the client being compiled.

You can read more about the implementation on [my blog](http://www.scottlogic.co.uk/blog/colin/2012/03/developing-a-gwt-todomvc-application).


## Folder Structure

- `css` - includes GWT specific `app.css`, most styling is taken from the base CSS file
- `gwttodo` - the GWT compiled output, this includes various HTML files, which contain the JavaScript
code for each <a href "http://code.google.com/webtoolkit/doc/latest/tutorial/compile.html">GWT permutation</a>. This
folder also includes some redundant files, see the issue <a href="https://github.com/ColinEberhardt/todomvc/issues/9">
Remove redundant compiler output</a>.
- `src` - the Java source for this application


## Building this application

The GWT TodoMVC application was built with Java 1.6 and GWT 2.4.0. The easiest way to build this application
is to [download the GWT SDK](http://code.google.com/webtoolkit/gettingstarted.html), or together with the [Eclipse plugin](http://code.google.com/webtoolkit/usingeclipse.html).

---

### Overview (`examples/javascript-es5/README.md`)

# TodoMVC: JavaScript Es5

## Description

This application uses JavaScript with ES5 language features to implement a todo application.

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it..

[JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)

## Implementation Details

This implementation uses an explicit MVC pattern, with a clear file structure to reflect the architecture. The storage solution uses an in-memory data object that implements a simple array to hold the todos.

## Build Steps

A simple build script copies all necessary files to a `dist` folder.
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.

```
npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local Preview

```
terminal:
1. npm install
2. npm run dev

browser:
1. http://localhost:7001/
```

---

### Overview (`examples/javascript-es6/README.md`)

TodoMVC: JavaScript Es6 with Webpack

## Description

This application uses JavaScript with ES6 language features to implement a todo application.

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it..

[JavaScript - developer.mozilla.org](http://developer.mozilla.org/en-US/docs/JavaScript)

In addition, this application also relies on [Webpack](https://webpack.js.org/) to generate a build. At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

## Implementation Details

This implementation uses an explicit MVC pattern, with a clear file structure to reflect the architecture. The storage solution uses an in-memory data object that implements a simple array to hold the todos.

## Build Steps

To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a `dist` folder.

```
npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run dev

browser:
1. http://localhost:7001/
```

---

### Overview (`examples/jquery/readme.md`)

# TodoMVC: jQuery
## Description

This application uses jQuery (3.6.3) to implement a todo application.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

[jQuery.com](https://jquery.com/)

## Implementation details

In contrast to mv(*) patterns, this implementation keeps display, state and app logic all within one file.
Many apps that utilize jQuery tend to keep most or all aspects within a single file for simplicity. 

## Build Steps

A simple build script copies all necessary files to a `dist` folder.
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.

```
npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run dev
browser:
1. http://localhost:7001/
```

---

### Overview (`examples/js_of_ocaml/readme.md`)

# Js_of_ocaml TodoMVC Example

> Js_of_ocaml is a compiler of OCaml bytecode to Javascript.

## Resources

- [Website](http://ocsigen.org/js_of_ocaml/)
- [GitHub](https://github.com/ocsigen/js_of_ocaml)
- [Try Js_of_ocaml](http://try.ocamlpro.com/js_of_ocaml/)

## Support

Js_of_ocaml is part of [Ocsigen project](http://ocsigen.org/).

- [Mailing list](https://sympa.inria.fr/sympa/subscribe/ocsigen)
- IRC : #ocsigen on irc.freenode.net


## Implementation

Open `index.html` in your browser to try the application.

If you want to build the application on your own:

1. Install Js_of_ocaml and the required dependencies. An easy way is to use [opam](https://opam.ocaml.org/). After having installed `opam`, follow these steps:

  - If you use `opam` for the first time, you have to initialize it:

    ```sh
    > opam init
    > eval `opam config env`
    ```

    This will create a `.opam` directory in your home.

  - You need a very recent version of OCaml compiler. First check the current version used by `opam`:

    ```sh
    > opam switch
    --     -- 3.11.2  Official 3.11.2 release
    --     -- 3.12.1  Official 3.12.1 release
    --     -- 4.00.0  Official 4.00.0 release
    --     -- 4.00.1  Official 4.00.1 release
    --     -- 4.01.0  Official 4.01.0 release
    --     -- 4.02.0  Official 4.02.0 release
    --     -- 4.02.1  Official 4.02.1 release
    --     -- 4.02.2  Official 4.02.2 release
    system  C system  System compiler (4.02.1)
    ```

    The `C` letter shows the current compiler. Here it's a 4.02.1 version installed at a system level (ie in `/usr/local/bin/` for instance). We can see that a more recent version is available (4.02.2). So we will install it with `opam switch 4.02.2`. This won't remove the system compiler as `opam` will install the files in your `.opam` directory.

    ```sh
    > opam switch 4.02.2
    > eval `opam config env`
    ```

    You can use again `opam switch` to check that the current compiler is now OCaml 4.02.2:

    ```sh
    > opam switch
    --     -- 3.11.2  Official 3.11.2 release
    --     -- 3.12.1  Official 3.12.1 release
    --     -- 4.00.0  Official 4.00.0 release
    --     -- 4.00.1  Official 4.00.1 release
    --     -- 4.01.0  Official 4.01.0 release
    --     -- 4.02.0  Official 4.02.0 release
    --     -- 4.02.1  Official 4.02.1 release
    4.02.2  C 4.02.2  Official 4.02.2 release
    system  I system  System compiler (4.02.1)
    ```

  - Let's now install Js_of_ocaml and all the required dependencies. As Js_of_ocaml is a part of a larger project named Eliom, we will simply install this package:

    ```sh
    > opam install eliom
    ```

  - The final and important step is to be sure to have the latest version of Eliom and its dependencies. So ask to `opam` to upgrade the packages if needed:

    ```sh
    > opam update
    > opam upgrade
    ````

  Congratulations, you now have all the required packages! We can now build the application.

2. Compile the `todomvc.ml` file to OCaml bytecode with the `ocamlbuild` command:

  ```sh
  > ocamlbuild -use-ocamlfind \
	-tags "warn(-40)" \
	-pkgs lwt.syntax,js_of_ocaml,js_of_ocaml.syntax,js_of_ocaml.tyxml,tyxml,js_of_ocaml.deriving,js_of_ocaml.deriving.syntax,deriving \
	-syntax camlp4o \
	todomvc.byte ;
  ```

  The command options are:
  - `-use-ocamlfind` and `-pkgs ...` to use the necessary `ocamlfind` packages.
  - `-tags "warn(-40)"` to avoid harmless warnings about constructor or label name used out of scope.
  - `-syntax camlp4o` for the syntax extension support.
3. Build the Javascript file from the `todomvc.byte` file with the `js_of_ocaml` command:

  ```sh
  > js_of_ocaml +weak.js --opt 3 -o js/todomvc.js todomvc.byte
  ```

  The command options are:
  - `+weak.js` to include the necessary `weak` package.
  - `--opt 3` to set optimization profile.
  - `-o js/todomvc.js` to set output file name.

Please note that for the second and third step, you can also use the `build.sh` script:

```sh
> /bin/sh build.sh
```

## Credit

Created by [Stéphane Legrand](https://github.com/slegrand45).

Various code improvements from [Gabriel Radanne](https://github.com/Drup).

Based on Elm implementation by [Evan Czaplicki](https://github.com/evancz).

---

### Overview (`examples/jsblocks/readme.md`)

# jsblocks TodoMVC Example

 > From simple user interfaces to complex single-page applications using faster, server-side rendered and easy to learn framework
 >
 > [jsblocks - jsblocks.com](http://jsblocks.com)


## Resources

- [Website](http://jsblocks.com)
- [Documentation](http://jsblocks.com/learn)
- [Download](http://jsblocks.com/download)
- [GitHub Page](https://github.com/astoilkov/jsblocks)

- [The jsblocks Framework via DailyJS](http://dailyjs.com/2015/05/29/the-jsblocks-framework/)

### Support

- [Gitter](https://gitter.im/astoilkov/jsblocks?utm_source=github_link)
- [Twitter](http://twitter.com/jsblocks)
- [StackOverflow](http://stackoverflow.com/questions/tagged/jsblocks)
- [Google Groups](https://groups.google.com/forum/#!forum/jsblocks)
- [Google+](https://plus.google.com/communities/100030562502977783693)

*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*

## Credit

Created by [Antonio Stoilkov](http://astoilkov.com)

---

### Overview (`examples/knockback/readme.md`)

# Knockback.js TodoMVC Example

> Both Knockout.js and Backbone.js have their strengths and weaknesses, but together they are amazing! With Knockback.js, you can use the strong ORM provided by Backbone and create dynamic views using Knockout bindings.

> _[Knockback.js - kmalakoff.github.io/knockback](http://kmalakoff.github.io/knockback)_


## Learning Knockback.js

The [Knockback.js website](http://kmalakoff.github.io/knockback) is a great resource for getting started.

Here are some links you may find helpful:

* [Getting Started with Knockback.js](http://kmalakoff.github.io/knockback/getting_started_introduction.html)
* [Tutorials](http://kmalakoff.github.io/knockback/tutorials_introduction.html)
* [API Reference](http://kmalakoff.github.io/knockback/doc/index.html)
* [Knockback.js Reference App](http://kmalakoff.github.io/knockback/app_knockback_reference.html)
* [Knockback.js on Twitter](http://twitter.com/knockbackjs)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

---

### Overview (`examples/knockoutjs/readme.md`)

# Knockout.js TodoMVC Example

> Knockout.js helps you simplify dynamic JavaScript UIs using the Model-View-ViewModel (MVVM) pattern.

> _[Knockout.js - knockoutjs.com](http://knockoutjs.com)_


## Learning Knockout.js

The [Knockout.js website](http://knockoutjs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://knockoutjs.com/documentation/introduction.html)
* [Tutorials](http://learn.knockoutjs.com)
* [Live examples](http://knockoutjs.com/examples)

Articles and guides from the community:

* [Getting Started with Knockout.js](http://www.adobe.com/devnet/html5/articles/getting-started-with-knockoutjs.html)
* [Into the Ring with Knockout.js](http://net.tutsplus.com/tutorials/javascript-ajax/into-the-ring-with-knockout-js)
* [Beginners Guide to Knockout.js](http://www.sitepoint.com/beginners-guide-to-knockoutjs-part-1)

Get help from other Knockout.js users:

* [Knockout.js on StackOverflow](http://stackoverflow.com/questions/tagged/knockout)
* [Mailing list on Google Groups](http://groups.google.com/group/knockoutjs)
* [Knockout.js on Twitter](http://twitter.com/knockoutjs)
* [Knockout.js on Google +](https://plus.google.com/communities/106789046312204355684/stream/c5bfcfdf-3690-44a6-b015-35aad4f4e42e)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Credit

This TodoMVC application was originally created by [ashish101](https://github.com/ashish01/knockoutjs-todos), then refactored by Addy Osmani and later rewritten by TodoMVC contributors.

---

### Overview (`examples/knockoutjs_require/readme.md`)

# Knockout.js & RequireJS TodoMVC Example

> Knockout.js helps you simplify dynamic JavaScript UIs using the Model-View-ViewModel (MVVM) pattern.

> _[Knockout.js - knockoutjs.com](http://knockoutjs.com)_


## Learning Knockout.js

The [Knockout.js website](http://knockoutjs.com) is a great resource for getting started.

Here are some links you may find helpful:

* [Documentation](http://knockoutjs.com/documentation/introduction.html)
* [Tutorials](http://learn.knockoutjs.com)
* [Live examples](http://knockoutjs.com/examples)

Articles and guides from the community:

* [Getting Started with Knockout.js](http://www.adobe.com/devnet/html5/articles/getting-started-with-knockoutjs.html)
* [Into the Ring with Knockout.js](http://net.tutsplus.com/tutorials/javascript-ajax/into-the-ring-with-knockout-js)
* [Beginners Guide to Knockout.js](http://www.sitepoint.com/beginners-guide-to-knockoutjs-part-1)

Get help from other Knockout.js users:

* [Knockout.js on StackOverflow](http://stackoverflow.com/questions/tagged/knockout)
* [Mailing list on Google Groups](http://groups.google.com/group/knockoutjs)
* [Knockout.js on Twitter](http://twitter.com/knockoutjs)
* [Knockout.js on Google +](https://plus.google.com/communities/106789046312204355684/stream/c5bfcfdf-3690-44a6-b015-35aad4f4e42e)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Credit

This TodoMVC application was created by [@loicknuchel](https://twitter.com/loicknuchel).

---

### Overview (`examples/lit/readme.md`)

# Lit TodoMVC Example

> Lit is a simple library for building fast, lightweight web components.

See [lit.dev](https://lit.dev) for more information

## Implementation

The Lit example uses [web components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) to create new HTML elements that are interoperable and encapsulated. This means that the DOM is slightly different from other implementations as it contains custom elements like `<todo-list>`, and component DOM is isolated inside shadow roots. The Lit implementation also uses shadow DOM's style scoping, so it has divided us the CSS into separate modules containing only whats needed for each component (TODO).

### State management

This implementation doesn't use a state management library. It models the Todo data as a class that extends EventTarget. As that class is passed to components, they listen for changes via the `'change'` event.

Many other state management solutions are possible with Lit, including Redux, MobX, various signals libraries, etc. Using a plain class is just one of the simplest options, that's as vanilla as possible.

Mutations are made centrally by the app component. Other components fire events to notify the app of change requests.

## Building and running this example

1. `npm ci`
2. `npm run serve --watch`
3. Navigate your browser to http://localhost:8000/ for the debug build or http://localhost:8000/dist/ for the optimized build.

If you just want to rebuild the code, simply run `npm run build`. This is automatically run as needed when running `npm run serve --watch`.

---

### Overview (`examples/mithril/readme.md`)

# Mithril TodoMVC Example

> [Mithril](https://mithril.js.org/) is a modern client-side Javascript framework for building Single Page Applications. It's small (< 8kb gzip), fast and provides routing and XHR utilities out of the box.

> _[Mithril - mithril.js.org](https://mithril.js.org/)_

## Learning Mithril

The [Mithril website](https://mithril.js.org/#introduction) is a great resource for getting started.

Here are some links you may find helpful:

* [Official Documentation](https://mithril.js.org/api.html)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

## Credit
This TodoMVC application was created by [taylorhakes](https://github.com/taylorhakes).

---

### Overview (`examples/polymer/README.md`)

# Polymer TodoMVC Example

> Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

> _[Polymer - www.polymer-project.org](https://www.polymer-project.org/)_

## Learning Polymer

The [Polymer website](https://www.polymer-project.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Getting Started](https://www.polymer-project.org/1.0/docs/start/getting-the-code.html)
* [FAQ](https://www.polymer-project.org/0.5/resources/faq.html) (old)
* [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html)

Get help from Polymer devs and users:

* Find us Slack - polymer.slack.com
* Join the high-traffic [polymer-dev](https://groups.google.com/forum/?fromgroups=#!forum/polymer-dev) Google group or the announcement-only [polymer-announce](https://groups.google.com/forum/?fromgroups=#!forum/polymer-announce) Google group.

## Implementation

The Polymer implementation of TodoMVC has a few key differences with other implementations:

* [Web Components](http://w3c.github.io/webcomponents/explainer/) allow you to create new HTML elements that are reusable, composable, and encapsulated.
* Non-visual elements such as the router and the model are also implemented as custom elements and appear in the DOM. Implementing them as custom elements instead of plain objects allows you to take advantage of Polymer's data binding and event handling throughout the app.

## Compatibility

Polymer and the web component polyfills are intended to work in the latest version of [evergreen browsers](http://tomdale.net/2013/05/evergreen-browsers/). IE9 is not supported. Please refer to [Browser Compatibility](https://www.polymer-project.org/1.0/resources/compatibility.html) for more details.

## Running this sample

1. Install [node.js](nodejs.org) (required for `bower` client-side package management)
1. Install bower: `npm install bower`

1. From the `todomvc\` folder, run `bower update`
1. Start a web server in the `todomvc\` folder.  Hint: if you have python installed, you can just run:

     `python -m SimpleHTTPServer`

1. Browse to the server root

## Making updates

If you want to make a change to any of the elements in elements/elements.html, you'll need to install `polybuild` (Polymer's build tool) and re-vulcanize elements.build.html.

1. Run `npm install` (first time only)
1. Make a change
1. Run `npm run build`

---

### Overview (`examples/preact/readme.md`)

TodoMVC: Preact

## Description

This application uses Preact 10.11.3 to implement the TodoMVC application.

-   [Preact](https://preactjs.com/) Fast 3kB alternative to React with the same modern API.

## Implementation details

Preact:\
Model: TodoModel (model.js}\
View: Preact ui components\
controller: App (app.js)

MVC:\
Model: maintains the data and behavior of an application\
View: displays the model in the ui\
Controller: serves as an interface between view & model components

## Build steps

```
terminal:
1. npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run start
```

---

### Overview (`examples/ractive/readme.md`)

# Ractive.js TodoMVC app

> Ractive.js solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.

> _[Ractive.js - ractivejs.org](http://ractivejs.org)_


## Learning Ractive.js

[Try the 60 second setup](http://www.ractivejs.org/60-second-setup), or [follow the interactive tutorials](http://learn.ractivejs.org).

You can find the [API documentation on docs.ractivejs.org](http://docs.ractivejs.org/latest/get-started).

If you have questions, try [Stack Overflow](http://stackoverflow.com/questions/tagged/ractivejs) or [@RactiveJS on Twitter](http://twitter.com/RactiveJS).

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

Ractive.js isn't an MVC framework in the traditional sense. There are no Model classes, just a plain old array of task objects, and there is only one view object. The app lives in a single file, with two tiny extra files to handle persistence and routing.

This is because Ractive is optimised for developer sanity (as well as performance!). It was initially developed to create interactive news apps at [theguardian.com](http://theguardian.com), which have to be built against punishing deadlines and moving goalposts. Because it embraces reactive programming principles, the developer has less to worry about. Ractive's API is totally straightforward - you can learn it in 5 minutes and master it in a few hours.

It has a number of innovative features: animations, easier event handling, declarative transitions, first-class SVG support, logical expressions in templates with sophisticated dependency tracking. For many developers, it hits the sweet spot between the flexibility of a library like Backbone and the power of a framework like Angular.


## Credit

This TodoMVC application was created by [Rich Harris](http://rich-harris.co.uk).

---

### Overview (`examples/react-redux/README.md`)

# TodoMVC: React-Redux

## Description

This application uses React in combination with Redux to implement the TodoMVC application.

-   [React](https://reactjs.org/) is a JavaScript library for creating user interfaces.
-   [Redux](https://redux.js.org/) centralizes your application's state.
-   [React-Redux](https://react-redux.js.org/) is designed to work with React's component model.

## Implementation details

This implementation uses Redux to manage state and data flow of the application.
The Redux pattern is similar to a mvc pattern, with the main difference that Redux is unidirectional.
Redux uses actions to dispatch a change, which is captured by reducers that update a central store.
Once the state in the store updates, the view receives the new state and can reflect those changes to the user.

Redux:\
Model: Redux store\
View: React ui components\
Controller: React connected components + Redux reducers

MVC:\
Model: maintains the data and behavior of an application\
View: displays the model in the ui\
Controller: serves as an interface between view & model components

The storage solution uses an in-memory data object that implements a simple array to hold the todos.

## Build steps

To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a `dist` folder.

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run dev
browser:
1. http://localhost:7001/
```

---

### Overview (`examples/react/readme.md`)

# TodoMVC: React

## Description

This application uses React 17.0.2 to implement a todo application.

-   [React](https://reactjs.org/) is a JavaScript library for creating user interfaces.

## Implementation details

React focuses mainly on providing composable user interfaces to enable developers to build an appealing website or web app. React does not force the user to utilize a particular design pattern, but it does provide useful hooks to implement an MVC pattern, if desired. 

React:\
Model: Todo reducer (reducer.js)\
View: React ui components\
Controller: App component + useReducer hook

MVC:\
Model: Maintains the data and behavior of an application\
View: Displays the model in the ui\
Controller: Serves as an interface between view & model components

## Build steps

To build the static files, this application utilizes webpack. It minifies and optimizes output files and copies all necessary files to a `dist` folder.

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run serve
```

---

### Overview (`examples/reagent/readme.md`)

# Reagent TodoMVC Example

> Reagent provides a minimalistic interface between ClojureScript and React. It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.

> _[Reagent - https://github.com/reagent-project/reagent](https://github.com/reagent-project/reagent)_

## Learning Reagent

The [Reagent website](http://reagent-project.github.io/) is a great resource for getting started.

Here are some links you may find helpful:

* [reagent-template](https://github.com/reagent-project/reagent-template)
* [reagent-cookbook](https://github.com/reagent-project/reagent-cookbook)
* [reagent-forms](https://github.com/reagent-project/reagent-forms)
* [yogthos blog](http://yogthos.net/)
* Twitter: [@ReagentProject](https://twitter.com/reagentproject)
* YouTube: [Reagent Project](https://www.youtube.com/channel/UC1UP5LiNNNf0a45dA9eDA0Q)

Get help from other reagent users:

* [Google Groups mailing list](https://groups.google.com/forum/#!forum/reagent-project)
* [SF Reagent Meetup](http://www.meetup.com/Reagent-Minimalistic-React-for-ClojureScript/)

## Components Summary

The following is a summary of the components directory.



## Running

Compile the clojurescript files.

```
$ lein cljsbuild once
```

*Note: to compile an optimized version, run `lein clean` followed by `lein with-profile prod cljsbuild once`*

Open `index.html` to view the example application.

## Credit

[Matthew Jaoudi](https://twitter.com/gadfly361), [Dmitri Sotnikov](https://twitter.com/yogthos), and [Dan Holmsand](https://twitter.com/holmsand)

---

### Overview (`examples/riotjs/readme.md`)

# Riot.js TodoMVC Example

> Riot.js is a React-like user interface micro-library.

> Riot is against the current trend of boilerplate and unneeded complexity. The team think that a small, powerful API and concise syntax are extremely important things on a client-side library.

> _[Riot.js - riotjs.com](http://riotjs.com/)_


## Resources

- [Website](http://riotjs.com/)
- [Documentation](http://riotjs.com/guide/)
- [FAQ](http://riotjs.com/faq/)

### Articles

- [Compare Riot with React and Polymer](http://riotjs.com/compare/)
- [The react tutorial for riot](https://juriansluiman.nl/article/154/the-react-tutorial-for-riot)

### Support

- [Gitter chat room](https://gitter.im/riot/riot)

*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*


## Implementation

Riot is tiny and super flexible, there are many different ways to use riot. For example, you can use compiler to compile the tags files, you can also use browserify to build bundled javascript, you can even use the tiny Riot compiler on your page and compile tags on the fly.

This example is using compiler on the page to compile the tag file (`js/todo.html`).

This example is following TodoMVC's [coding style](https://github.com/tastejs/todomvc/blob/master/codestyle.md), however officially Riot recommends a [different coding style](https://github.com/riot/riot/blob/master/CONTRIBUTING.md), FYI.


## Credit

Created by [Tianxiang Chen](https://github.com/txchen)

---

### Overview (`examples/svelte/readme.md`)

# TodoMVC: Svelte

## Description

This application uses Svelte 3.58.0 to implement a todoMVC application.

-   [Svelte](https://svelte.dev/) is a tool for building fast web applications. It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.
    But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

## Implementation details

This app has been inspired by the [official Svelte Todomvc app](https://github.com/sveltejs/svelte-todomvc).

To showcase how a larger application could be architected, we opted to build the todoMVC app with multiple components. 
Components can communicate through events to trigger changes in other components. For example, the Item component dispatchtes the `removeItem` event, which the App component listens for and updates the todo array. 
Additionally, component bindings are used to update automatically any item that changed from within the Item component (`item.description` and `item.completed`). 

Svelte doesn't try to force a specific architectural pattern and instead is a component framework. 
A loose mapping of an MVC pattern:

Svelte:
Model: App component
View: UI components
Controller: App component + component bindings

MVC:
Model: Maintains the data and behavior of an application
View: Displays the model in the ui
Controller: Serves as an interface between view & model components

## Build steps

```
terminal:
1. npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local preview

```
terminal:
1. npm install
2. npm run dev
```

---

### Overview (`examples/typescript-angular/readme.md`)

# TypeScript & AngularJS TodoMVC Example

> TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

> _[TypeScript - typescriptlang.org](http://typescriptlang.org)_


## Learning TypeScript

The [TypeScript website](http://typescriptlang.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Tutorial](http://www.typescriptlang.org/Tutorial)
* [Code Playground](http://www.typescriptlang.org/Playground)
* [Documentation](https://github.com/Microsoft/TypeScript/wiki)
* [Applications built with TypeScript](http://www.typescriptlang.org/Samples)
* [Blog](http://blogs.msdn.com/b/typescript)
* [Source Code](https://github.com/Microsoft/TypeScript)

Articles and guides from the community:

* [Thoughts on TypeScript](http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript)
* [ScreenCast - Why I Like TypeScript](https://www.youtube.com/watch?v=Mh5VQVfWTbs)

Get help from other TypeScript users:

* [TypeScript on StackOverflow](http://stackoverflow.com/questions/tagged/typescript)
* [Forums](https://github.com/Microsoft/TypeScript/issues)
* [TypeScript on Twitter](http://twitter.com/typescriptlang)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

[TypeScript](http://typescriptlang.org) is a superset of JavaScript, with optional type annotations. As any JS is valid TS, there is no interoperability issue. You could slowly convert an existing JS code-base and use JS libraries natively. You already know most of the language. It compiles back to JS.

It's attractive to people with a background in strongly typed languages, who are willing to type in more code-- classes and type annotations-- receiving the benefit of type checking on compile time. IntelliSense works better, as well.


### Editors
Several free and commercial editors work very well with TypeScript.

* [Visual Studio Code](https://code.visualstudio.com/download) is a free, [open source](https://github.com/microsoft/vscode) editor from Microsoft that runs on Windows, Mac, and several Linux distros. It has native support for TypeScript.
* [Visual Studio 2017](https://www.visualstudio.com/downloads/) is available in several editions, including the [Community Edition](https://www.visualstudio.com/vs/community/) that is free for students, open-source, and individual developers, as well as commercial editions for professional developers. All editions except Visual Studio for Mac have native support for TypeScript.
* [WebStorm](https://www.jetbrains.com/webstorm/) from JetBrains s.r.o. is a commercial editor for JavaScript projects, with native support for TypeScript.
* The [Sublime text editor](http://www.sublimetext.com/) can support TypeScript with an [open source plug-in](https://github.com/Microsoft/TypeScript-Sublime-Plugin) created by Microsoft.
* Several other editors are supported, as found [on the GitHub wiki for the TypeScript project](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support).

Many extensions for Visual Studio and Visual Studio Code are available to enhance your productivity with TypeScript.

### Ambient declarations

It is useful to have type information for the libraries you use. [DefinitelyTyped](https://github.com/borisyankov/DefinitelyTyped) is a nice collection of annotations by Boris Yankov.


### Files

* `*.ts` are source code files.
* `*.d.ts` are ambient declarations for libraries.
* `*.js` are generated by the compiler, except in the `js/libs` folder.
* `*.js.map` are [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) generated by the compiler, for better debugging experience.
* `_all.ts` is a convention used to enumerate file references in the project for the benefit of the TypeScript compiler.

If the number of files grows, you could put an `_all.ts` file into each folder, move all nested references to it and reference the nested `_all.ts` from the parent `_all.ts`.

Start reading `TodoCtrl.ts` first, continue with `Application.ts` and `index.html`, then the rest of it is easy.


### AngularJS

There is very little difference between this app and the vanilla AngularJS todo app in how AngularJS is used.
The only significant difference is that dependency injection is done via annotated constructors, which allows minification of JavaScript.

It's definitely possible to convert the vanillajs todo app into TypeScript, but TypeScript's benefits are more obvious with a full blown framework and project structure.


## Running

A standalone TypeScript compiler is available on NPM.

	npm install

To compile the TypeScript in this project:

	# from examples/typescript-angular
	$ npm run compile

Or use Visual Studio with the TypeScript plugin.

---

### Overview (`examples/typescript-backbone/readme.md`)

# TypeScript & Backbone.js TodoMVC Example

> TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

> _[TypeScript - typescriptlang.org](http://typescriptlang.org)_


## Learning TypeScript

The [TypeScript website](http://typescriptlang.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Tutorial](http://www.typescriptlang.org/Tutorial)
* [Code Playground](http://www.typescriptlang.org/Playground)
* [Documentation](https://github.com/Microsoft/TypeScript/wiki)
* [Applications built with TypeScript](http://www.typescriptlang.org/Samples)
* [Blog](http://blogs.msdn.com/b/typescript)
* [Source Code](https://github.com/Microsoft/TypeScript)

Articles and guides from the community:

* [Thoughts on TypeScript](http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript)
* [ScreenCast - Why I Like TypeScript](http://www.leebrimelow.com/why-i-like-typescripts)

Get help from other TypeScript users:

* [TypeScript on StackOverflow](http://stackoverflow.com/questions/tagged/typescript)
* [Forums](https://github.com/Microsoft/TypeScript/issues)
* [TypeScript on Twitter](http://twitter.com/typescriptlang)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._


## Implementation

This application uses TypeScript classes to create Backbone.js models and views, and jQuery for all DOM manipulation.


## Running

To compile the TypeScript in this project, install the dependencies and run the `compile` script.

```
# from examples/typescript-backbone
$ npm run compile
$ open index.html
```

---

### Overview (`examples/typescript-react/readme.md`)

# TypeScript & React TodoMVC Example

> TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.

> _[TypeScript - typescriptlang.org](http://typescriptlang.org)_

> React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.

> _[React - facebook.github.io/react](http://facebook.github.io/react)_

## Learning TypeScript

The [TypeScript website](http://typescriptlang.org) is a great resource for getting started.

Here are some links you may find helpful:

* [Tutorial](http://www.typescriptlang.org/Tutorial)
* [Code Playground](http://www.typescriptlang.org/Playground)
* [Documentation](https://github.com/Microsoft/TypeScript/wiki)
* [Applications built with TypeScript](http://www.typescriptlang.org/Samples)
* [Blog](http://blogs.msdn.com/b/typescript)
* [Source Code](https://github.com/Microsoft/TypeScript)

Articles and guides from the community:

* [Thoughts on TypeScript](http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript)
* [ScreenCast - Why I Like TypeScript](https://www.youtube.com/watch?v=Mh5VQVfWTbs)

Get help from other TypeScript users:

* [TypeScript on StackOverflow](http://stackoverflow.com/questions/tagged/typescript)
* [Forums](https://github.com/Microsoft/TypeScript/issues)
* [TypeScript on Twitter](http://twitter.com/typescriptlang)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._

## Learning React

The [React getting started documentation](http://facebook.github.io/react/docs/getting-started.html) is a great way to get started.

Here are some links you may find helpful:

* [Documentation](http://facebook.github.io/react/docs/getting-started.html)
* [API Reference](http://facebook.github.io/react/docs/reference.html)
* [Blog](http://facebook.github.io/react/blog/)
* [React on GitHub](https://github.com/facebook/react)
* [Support](http://facebook.github.io/react/support.html)

Articles and guides from the community:

* [How is Facebook's React JavaScript library](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library)
* [React: Under the hood](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood)

Get help from other React users:

* [React on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs)
* [Discussion Forum](https://discuss.reactjs.org/)

_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._



## Running

A standalone TypeScript compiler is available on NPM.

	npm install typescript

To compile the TypeScript in this project:

	# from examples/typescript-react
	$ ./node_modules/typescript/bin/tsc -p ./js/

To be able to run the output JS files in the browser:

	# from examples/typescript-react
	$ ./node_modules/browserify/bin/cmd ./js/app.js -o ./js/bundle.js"

To run the app, spin up an HTTP server (e.g. `python -m SimpleHTTPServer`) and visit http://localhost/.../myexample/.
Alternatively you can run:

	# from examples/typescript-react
	$ npm run start

---

### Overview (`examples/vue/readme.md`)

# TodoMVC: Vue

## Description

This application uses Vue.js 3.3.10 to implement the TodoMVC application.

-   [Vue.js](https://vuejs.org/) provides efficient MVVM data bindings with a simple and flexible API. It uses plain JavaScript object models, DOM-based templating and extendable directives and filters..

## Implementation details

Vue.js is focused on the ViewModel layer of the MVVM pattern. It connects the View and the Model via two way data bindings. Actual DOM manipulations and output formatting are abstracted away into Directives and Filters.

MVC:\
Model: maintains the data and behavior of an application\
View: displays the model in the ui\
Controller: serves as an interface between view & model components

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

---

### Overview (`examples/web-components/readme.md`)

# TodoMVC: Web Components

## Description

A todoMVC application implemented with native web components.
It utilizes custom elements and html templates to build reusable components.

In contrast to other workloads, this application uses an updated set of css rules and an optimized dom structure to ensure the application follows best practices in regards to accessibility.

## Implementation Details

This example uses custom events, originating from user interactions, that the app is listening for. 
The app in this case has two roles: it is the model as well as the controller.

Web Components Example:
Model: App (todo-app)
View: Components (todo-bottombar, todo-item, todo-list, todo-topbar)
Controller: App (todo-app)

MVC:
Model: Maintains the data and behavior of an application
View: Displays the model in the ui
Controller: Serves as an interface between view & model components

## Build Steps

A simple build script copies all necessary files to a `dist` folder.
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.

```
npm run build
```

## Requirements

The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.

```
* Node (min version: 18.13.0)
* NPM (min version: 8.19.3)
```

## Local Preview

```
terminal:
1. npm install
2. npm run dev

browser:
1. http://localhost:7005/
```

---

### Overview (`examples/emberjs/todomvc/README.md`)

# todomvc

## Prerequisites

You will need the following things properly installed on your computer.

- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/) (with npm)
- [Ember CLI](https://cli.emberjs.com/release/)
- [Google Chrome](https://google.com/chrome/)

## Installation

- `git clone <repository-url>` this repository
- `cd todomvc`
- `pnpm install`

## Running / Development

- `ember serve`
- Visit your app at [http://localhost:4200](http://localhost:4200).
- Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).

### Code Generators

Make use of the many generators for code, try `ember help generate` for more details

### Running Tests

- `ember test`
- `ember test --server`

### Linting

- `pnpm run lint`
- `pnpm lint:fix`

### Building

- `ember build` (development)
- `ember build --environment production` (production)

### Deploying

Specify what it takes to deploy your app.

## Further Reading / Useful Links

- [ember.js](https://emberjs.com/)
- [ember-cli](https://cli.emberjs.com/release/)
- Development Browser Extensions
  - [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
  - [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)

---

--- METRICS ---
- Files Extracted: 67
- Estimated Token Budget: ~31720 tokens
- Canonical Reference: https://codewiki.google/github.com/tastejs/todomvc