This is my attempt at building an architecture for exactly what a todo application would need: offline-first, light-weight but syncs with remote server (when online) to be able to provide multi-device utilization.
[NOTE: Each commit below is a working version of the application. Listed from latest to oldest.]
- Feature: Add offline caching capability
- Feature: Add server syncing
- Feature: Add routing capability
- Feature: Add edit capability
- Fix: address a11y bugs that are within control (some are design decisions from the original project)
- Fix: bug with clicking just off the label completes wrong todo
- Feature: Add all bulk functionality: complete all, delete completed (included interesting debounce-like solution) (#7dbadb6)
- Feature: Add all basic todo functionality: add, complete, delete (#ddb09fb)
- Get the app to rerender when the PouchDB is updated (#c242fdb)
- Get the TodoMVC app to render todos stored within IndexedDB using PouchDB
- Initialize the application from this previous TodoMVC application
npm install
npm run build
Open public/index.html in your browser.
Coming soon ...
Here's the full tech-stack that we've chosen to execute this idea:
- TypeScript: used for transpiling (JSX and ES6) and module bundling for universal module design
- React: the V in MVC
- Express: our lightweight, un-opinionated, server framework
- Page.js: our client side routing technology
- PouchDB: for data storage and future "offline" capabilities
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.
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.
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.
Express has been around for a very long time, so documentation is ubiquitous. But, if you need a reference, the framework's main site is the place to go: http://expressjs.com/.
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.
Coming soon ...