todomvc Documentation

Helping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more

28,959 stars JavaScript JavaScript 67 files · ~31,798 tokens
RAW Doc

Technical Documentation: tastejs/todomvc

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

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, 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 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:

Plenty of legacy framework showcases also live in examples/ for historical reference. See the website for the full list.

Build a TodoMVC App with Your AI Coding Agent

The app spec 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:

text
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 for details.

Team

TodoMVC would not be possible without a strong team of 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

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

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

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

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

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

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

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

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

Gianni is a programmer and designer currently working as the Chief Rigger at MetaLab.

Disclaimer

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 for more info.

License

Everything in this repo is MIT License unless otherwise specified.

MIT © 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)





Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by Mark Otto and Jacob Thornton, and maintained by the core team with the massive support and involvement of the community.

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

Table of contents

Quick start

Three quick start options are available:

Read the Getting started page 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:

text
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 and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with Jekyll 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 (requires v2.0.x).
  • Windows users: Read this unofficial guide 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.
  1. From the root /bootstrap directory, run jekyll serve in the command line.
  2. Open http://localhost:9001 in your browser, and voilà.

Learn more about using Jekyll by reading its documentation.

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 and their documentation are also available for download.

Contributing

Please read through our contributing guidelines. 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, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.

Community

Keep track of development and community news.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

Creators

Mark Otto

Jacob Thornton

Code and documentation copyright 2011-2014 Twitter, Inc. Code released under the MIT license. Docs released under Creative Commons.

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.
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`)

Demo and API Docs

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`)

Demo and API Docs

##<iron-flex-layout>

The `` component provides simple ways to use CSS flexible box layout, also known as flexbox. This component provides two different ways to use flexbox:

  1. Layout 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. The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the @apply function.

A complete guide to `` 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/-icons.html, and
specify the icon as :. 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 and iron-iconset-svg for more information about
how to create a custom iconset.

See iron-icons 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, reduce
the fileset to 24px svgs, and compile the iconsets.

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

Demo and API Docs

##<iron-iconset-svg>

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:

text
<svg>
    <defs>
      <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
      </g>
    </defs>
  </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:

text
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`)

Demo and API Docs

##<iron-meta>

iron-meta is a generic element you can use for sharing information across the DOM tree.
It uses monostate pattern 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:

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.

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

Pure imperative form would be like:

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

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

text
...
this.$.meta.byKey('info').getAttribute('value');

##<iron-meta-query>

iron-meta is a generic element you can use for sharing information across the DOM tree.
It uses monostate pattern 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:

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.

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

Pure imperative form would be like:

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

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

text
...
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: Buttons

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 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`)

Demo and API Docs

##<paper-tabs>

Material design: Tabs

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:

text
TAB 1
  TAB 2
  TAB 3

See paper-tab 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.

text
Tab 1
  Tab 2
  Tab 3



  Page 1
  Page 2
  Page 3

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

Example:

text
[TAB ONE](#link1)
  
  
    [TAB TWO](#link2)
  
  
    [TAB THREE](#link3)

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 {}

##<paper-tab>

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

Example:

text
TAB 1
  TAB 2
  TAB 3

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

A suite of polyfills supporting the Web Components specs:

Custom Elements: allows authors to define their own custom tags (spec).

HTML Imports: a way to include and reuse HTML documents via other HTML documents (spec).

Shadow DOM: provides encapsulation by hiding DOM subtrees under shadow roots (spec).

This also folds in polyfills for MutationObserver and WeakMap.

Releases

Pre-built (concatenated & minified) versions of the polyfills are maintained in the tagged versions 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 using the instructions on their website
  • use npm to install gulp.js: npm install gulp

Now you are ready to build the polyfills with:

text
# install dependencies
npm install
# build
gulp build

The builds will be placed into the dist/ directory.

Contribute

See the contributing guide

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

See #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

Using the MutationObserver polyfill, it isn't possible to monitor mutations of an element marked contenteditable.
See the mailing list

ShadowCSS: :host-context(...):host(...) doesn't work

See #16 for background.

Under the shadow DOM polyfill, rules like:

text
:host-context(.foo):host(.bar) {...}

don't work, despite working under native Shadow DOM. The solution is to use polyfill-next-selector like:

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

execCommand and contenteditable isn't supported under Shadow DOM

See #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

Learning Dart

The Dart website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Dart users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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 and 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

text
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 version 17.0.5.

Angular 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 & 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.

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 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

Learning AngularJS

The AngularJS website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other AngularJS users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Unit Tests

To run the test suite, run these commands:

text
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

Support

Let us know if you discover anything worth sharing.

Implementation

Changelog

0.2.0

0.1.1

  • Prepared all assets (README, learn.json, index.html, etc) to fulfill the Contribution Docs
  • Cleaned up obsolete files (*.src.js, empty css/app.css)
  • Fixed #6
  • Fixed #7
  • Fixed #9

0.1.0

Open Questions While Developing

Credit

Created by Marcel Hoyer
Enhanced by 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

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).

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.

text
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.

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

Local Preview

text
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

Learning Backbone.Marionette

The Backbone.Marionette website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Backbone.Marionette users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Implementation

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

Learning Backbone.js

The Backbone.js website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Backbone.js users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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

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

Binding.scala is a data-binding framework for Scala, running on both JVM and Scala.js.

Binding.scala can be used as a reactive 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
  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! 😋

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

Learning CanJS

The CanJS website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other CanJS users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Implementation

The CanJS TodoMVC example uses can.Component 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.

CanJS and JavaScriptMVC

CanJS is the extracted, more modern and more library-like MVC parts of JavaScriptMVC, 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 - For the MVC parts
  • jQuery++ - jQuery's missing utils and special events
  • StealJS - A JavaScript package manager
  • DocumentJS - A documentation engine
  • FuncUnit - 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

Learning CanJS

The CanJS website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other CanJS users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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 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, 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 - For the MVC parts
  • jQuery++ - jQuery's missing utils and special events
  • StealJS - A JavaScript package manager
  • DocumentJS - A documentation engine
  • FuncUnit - jQuery style functional unit testing

View engines

CanJS supports both live binding EJS and Mustache/Handlebars
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

Learning Closure Tools

The Closure Tools website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Closure Tools users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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 below).

Running

A third party build tool called Plovr 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. 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. 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.

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

Learning cujoJS

The cujoJS website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other cujoJS users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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

Learning Dijon

The Dijon website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other Dijon users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Credit

This TodoMVC application was created by Camille Reynders.

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

Learning Dojo

The Dojo website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other Dojo users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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:

text
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 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

Let us know if you discover anything worth sharing.

Implementation

DUEL 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 to build.

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

text
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:

text
mvn tomcat7:run

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

Credit

Created by Stephen McKamey

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

Elm TodoMVC Example

A functional language for interactive applications

Elm

Learning Elm

The Elm website is a great resource for getting
started.

Here are some links you may find helpful:

Get help from other Elm users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Project Structure

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

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
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, and imported into TasteJS by @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

*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
Ember.js + RequireJS Demo

For more information, read the discussion.

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

Learning Enyo

The Enyo website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other Enyo users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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

Exoskeleton TodoMVC Example

Exoskeleton is a faster and leaner Backbone for your HTML5 apps.
It is a Backbone 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

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 is a great resource for getting started.

Articles and guides from the community:

Get help from other Backbone.js users:

Running

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

Credit

This TodoMVC application was created by @paulmillr.

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

Learning Google Web Toolkit

The Google Web Toolkit website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other Google Web Toolkit users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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.

Folder Structure

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, or together with the Eclipse plugin.

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

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.

text
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.

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

Local Preview

text
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

In addition, this application also relies on Webpack 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.

text
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.

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

Local preview

text
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

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.

text
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.

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

Local preview

text
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

Support

Js_of_ocaml is part of Ocsigen project.

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. 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.

  1. 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.
  1. 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.

Various code improvements from Gabriel Radanne.

Based on Elm implementation by Evan Czaplicki.

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

Resources

Support

Let us know if you discover anything worth sharing.

Credit

Created by Antonio Stoilkov

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

Learning Knockback.js

The Knockback.js website is a great resource for getting started.

Here are some links you may find helpful:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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

Learning Knockout.js

The Knockout.js website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Knockout.js users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Credit

This TodoMVC application was originally created by ashish101, 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

Learning Knockout.js

The Knockout.js website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other Knockout.js users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Credit

This TodoMVC application was created by @loicknuchel.

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

Lit TodoMVC Example

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

See lit.dev for more information

Implementation

The Lit example uses 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 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

Learning Mithril

The Mithril website is a great resource for getting started.

Here are some links you may find helpful:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Credit

This TodoMVC application was created by 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

Learning Polymer

The Polymer website is a great resource for getting started.

Here are some links you may find helpful:

Get help from Polymer devs and users:

  • Find us Slack - polymer.slack.com
  • Join the high-traffic polymer-dev Google group or the announcement-only polymer-announce Google group.

Implementation

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

  • Web Components 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. IE9 is not supported. Please refer to Browser Compatibility for more details.

Running this sample

  1. Install node.js (required for bower client-side package management)

  2. Install bower: npm install bower

  3. From the todomvc\ folder, run bower update

  4. Start a web server in the todomvc\ folder. Hint: if you have python installed, you can just run:

    python -m SimpleHTTPServer

  5. 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)
  2. Make a change
  3. 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 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

text
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.

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

Local preview

text
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

Learning Ractive.js

Try the 60 second setup, or follow the interactive tutorials.

You can find the API documentation on docs.ractivejs.org.

If you have questions, try Stack Overflow or @RactiveJS on Twitter.

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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, 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.

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

TodoMVC: React-Redux

Description

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

  • React is a JavaScript library for creating user interfaces.
  • Redux centralizes your application's state.
  • React-Redux 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.

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

Local preview

text
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 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.

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

Local preview

text
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

Learning Reagent

The Reagent website is a great resource for getting started.

Here are some links you may find helpful:

Get help from other reagent users:

Components Summary

The following is a summary of the components directory.

Running

Compile the clojurescript files.

text
$ 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, Dmitri Sotnikov, and Dan 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

Resources

Articles

Support

Let us know 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, however officially Riot recommends a different coding style, FYI.

Credit

Created by Tianxiang Chen

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

TodoMVC: Svelte

Description

This application uses Svelte 3.58.0 to implement a todoMVC application.

  • Svelte 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.

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

text
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.

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

Local preview

text
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

Learning TypeScript

The TypeScript website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other TypeScript users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Implementation

TypeScript 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.

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 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 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.

text
npm install

To compile the TypeScript in this project:

text
# 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

Learning TypeScript

The TypeScript website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other TypeScript users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

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.

text
# 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

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

Learning TypeScript

The TypeScript website is a great resource for getting started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other TypeScript users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Learning React

The React getting started documentation is a great way to get started.

Here are some links you may find helpful:

Articles and guides from the community:

Get help from other React users:

If you have other helpful links to share, or find any of the links above no longer work, please let us know.

Running

A standalone TypeScript compiler is available on NPM.

text
npm install typescript

To compile the TypeScript in this project:

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

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

text
# 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:

text
# 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 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

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

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.

text
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.

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

Local Preview

text
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.

Installation

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

Running / Development

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.

--- METRICS ---

Explore Related Technologies & Topics

View All 9,111+ Repositories →

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

⚡ MCP Servers Model Context Protocol → 🧠 Agent Skills Prompt & rule files → 🔌 OpenAPI Specs REST & Swagger schemas →