This is not how I'd write a todo application. It's absolutely overkill. But, this is how I built the critical, complex, global applications for PayPal. So, yes, this is over-engineered for a todo app, but this is exactly what we needed to build super resilient, high availability, Web platforms to handle millions of requests a day.
[NOTE: Each linked commit below is be a working version of the application. Earlier versions, may have some bugs. Listed from latest to oldest.]
- Feature: Improve A11y
- Feature: Add hot module reloading
- Feature: Add better error handling
- Feature: Add bulk action features to server-only w/o JS
- Bug: Rewrite data handling in Redux for better array update performance
- Tech: Code cleanup and add CSS to Webpack bundling (#b1be4df)
- Feature: Use React Hooks to reduce the reliance on Redux (todo editing) (#92c0ee5)
- Feature: Add completion and deletion feature of todos as w/o JS feature (#1101477 has bug though, you need the subsequent commit as well)
- Tech: Add better TypeScript definitions and typings
- Feature: Add hooks (
husky) for Git integration and task running - Feature: Add unit and integration testing (
Jest) - Feature: Add
react-axewith accessibility linting and testing to project - Feature: Implement Prettier into ESLint
- Tech: Add RxJS to add better iterative, functional style to handling async data management(#5c578c8)
- Tech: Add redux-actions to clean up Redux boilerplate (#9d76749)
- Tech: Modernize all libraries, frameworks and tooling
- Tech: Switch React components to the newer, functional style (rather than class based)
npm install
npm run build
npm start
Visit localhost:3000 in your browser.
It's an isomorphic application. Okay, that may need more explanation. Remember that mantra that Java promised of write once, run anywhere? Well, think of that for the web. Code that is environment-agnostic and can run on the server or browser.
To do that, we compose our application of libraries that free us from the shackles of specific environmental APIs. React is one of the most important aspects to this idea, as you can write view-related code without ever referencing any DOM APIs. We then add other libraries for "modeling" that are also universal by nature.
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
- Redux: the M in MVC, though, we are abandoning the old MVC philosophy for a more "Flux'ish" approach
- Rx.js: this is a powerful async library that uses Reactive Functional Programming at its core
- Express: our lightweight, un-opinionated, server framework
- Page.js: our client side routing technology
- PouchDB: for data storage and future "offline" capabilities
- Superagent: universal HTTP library
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.
Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
RxJS (Reactive Extensions Library for JavaScript) is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.
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.
Redux has some great documentation at their main site here: http://redux.js.org/.
Here are some links you may find helpful:
There's a lot of information out there about Reactive Functional Programming (RFP), much of which can get really academic. What I like to do when teaching RFP is start with something almost any JS dev is going to be familiar with using – arrays and array methods.
Here are some links that discuss the foundations:
- 2 minute introduction to Rx
- Asynchronous Programming: The End of The Loop
- RxJS Beyond the Basics: Creating Observables from scratch
- Save time avoiding common mistakes using RxJS
Here is the more academic stuff:
There's even a whole online "manual": Learn RxJS
The large majority of code is universal; the same code that is executed on the server is bundled up and deployed to the browser. The exceptions to this are server.ts versus client.tsx and the few appropriately-named client and server files throughout the project. This helps us avoid having to duplicate code, or pick an environment that most of the application runs within (as is needed with most applications).
One might think, "just build an SPA that runs in the browser!" That can be done, but many times it's not optimal if you care about mobile users (especially in developing nations), SEO, or fast deep-linking. With a truly universal application, you can have the benefits of an SPA without the consequences.