todomvc
Helping you select an MV* framework - Todo apps for React.js, Ember.js, Angular, and many more
Top Related Projects
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Quick Overview
TodoMVC is a project that helps developers compare and evaluate different JavaScript frameworks and libraries by implementing a simple todo application. It provides a consistent specification and design for a todo app, implemented across various popular front-end technologies, allowing developers to see how different frameworks approach the same problem.
Pros
- Offers a standardized way to compare different JavaScript frameworks
- Provides real-world examples of how to implement common features across various technologies
- Serves as a learning resource for developers new to specific frameworks
- Regularly updated to include new and popular frameworks
Cons
- Some implementations may become outdated as frameworks evolve
- The todo app example might be too simple for evaluating more complex application needs
- Doesn't cover backend integration or more advanced front-end features
- May lead to oversimplification when choosing a framework based solely on this example
Code Examples
As TodoMVC is not a code library but a collection of example implementations, there are no specific code examples to provide. Instead, developers can browse the repository to find implementations in their preferred framework or library.
Getting Started
To get started with TodoMVC:
- Visit the TodoMVC website or the GitHub repository.
- Choose a framework or library you're interested in exploring.
- Clone the repository or download the specific implementation.
- Follow the README instructions for the chosen implementation to set up and run the todo app locally.
- Explore the code to understand how the todo app is implemented in that particular framework or library.
Competitor Comparisons
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Pros of RealWorld
- More complex and realistic example, showcasing full-stack applications
- Demonstrates real-world features like authentication, CRUD operations, and API integrations
- Provides implementations in multiple frontend and backend technologies
Cons of RealWorld
- Higher learning curve due to increased complexity
- May be overwhelming for beginners or those looking for simple examples
- Requires more setup and configuration to run examples
Code Comparison
RealWorld (Angular example):
export class ArticleListComponent implements OnInit {
constructor(
private articlesService: ArticlesService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.route.data.subscribe(
(data: { articles: Article[] }) => {
this.articles = data.articles;
}
);
}
}
TodoMVC (Angular example):
@Component({
selector: 'app-todo-list',
template: `
<ul>
<li *ngFor="let todo of todos">{{ todo.title }}</li>
</ul>
`
})
export class TodoListComponent {
todos: Todo[] = [];
}
The RealWorld example demonstrates more complex routing and data fetching, while TodoMVC focuses on a simpler component structure. RealWorld provides a more comprehensive learning experience, but TodoMVC offers a cleaner starting point for understanding basic concepts.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Helping you select an MV* framework
Website Blog TasteJS
Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps.
Backbone, Ember, AngularJS... the list of new and stable solutions goes on and on, 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 using MV* concepts in most of the popular JavaScript MV* frameworks of today.
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 - 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 - 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 - 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 - 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 - 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 - 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 - Developer
Arthur is an open-source fanboy from Belgium. He is passionate about developer tooling and all things JavaScript.
Fady Samir Sadek - 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 - 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 MV* 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.
Top Related Projects
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot