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?
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.
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
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
Implementation using angular.
cd angular npm install npm start
Implementation using Vue.
cd vue npm install npm run serve
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
cd vue npm install npm run serve
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.