artberri / todomvp

Frameworkless MVP implementation of the TodoMVC app using Typescript with views implemented in Vue, React and Angular

TodoMVP

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.

Vue, React, Angular… the list of new and stable 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, TasteJS created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks.

This project, TodoMVP, tries to solve this problem with another approach. It is just another implementation of the same Todo application that uses the MVP design pattern to isolate the application and the presentation logic from any used framework.

The aim of this approach is to be able to test the application without depending on the chosen framework and to be able to switch or update the chosen framework with the least effort possible.

This is just an example created by Alberto Varela in Typescript without any other dependency library. To demonstrate how it can helps switching between frameworks it includes three implementations: Vue, Angular and React.

If you want to dig deeper in the MVP pattern, better than looking into this repository is to read about its evolution and its multiple variants, including the relationship of MVP to other design patterns such as MVC, in this article by Martin Fowler and this one by Derek Greer.

Contents

todomvc
│
└───app       -> MVP Application
│   │
│   └───src   ----> Code
│   │   │
│   │   └───framework   --------> Infrastructure
│   │   │
│   │   └───model       --------> Model
│   │   │
│   │   └───presenters  --------> Presenters
│   │   │
│   │   └───views       --------> View contracts
│   │
│   └───test  ----> Tests
│
│
└───angular   -> Angular view implementation
│
└───react     -> React view implementation
│
└───vue       -> Vue view implementation

Running the project

MVP Application

The application can not run by itself. It's intended to be wrapped by a frmamework of your choice (Vue, Angular, React,...), but you can test the app behaviour.

cd app
npm install
npm run test

Angular

Implementation using angular.

cd angular
npm install
npm start

Vue

Implementation using Vue.

cd vue
npm install
npm run serve

React

Implementation using React.

React does not allow to include files outside the src folder, this is why you need to build the app project first for React implementation. In this repo the 'core' files are outside the react project folder, what is not the normal way to create an app.

cd app
npm install
npm run build
cd ..

Once the app files are compiled they will be included from the symlink react/src/core/. Finally:

cd vue
npm install
npm run serve

License

The html files in this repo are based in a work by TasteJS which is licensed under a Creative Commons Attribution 4.0 International License.

Everything else in this repo is MIT License unless otherwise specified.

Copyright 2019 Alberto Varela

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.