SPA - tips

Few notes on how to make SPA:

1. start with model. Don't care about GUI on the very beginning. Start writing basic classes in pure JavaScript and write unit tests for it. E.g. if you do Todo List, make some classes like Todo, TodoList etc. Think in concepts of domain knowledge rather than GUI.
2. but remember that your models should be reactive(or it should be easy to add reactivity). You can start right away with reactive code using some reactive library like Redux or Mobx, or you can add this reactivity later (simple addon is using some kind of observer pattern - e.g. via EventTarget
3. It's useful to have same models on backend and frontend but it's not always be the case. Anyway, think also how you will connect backend with frontend and how you implement reactivity
4. For GUI you can use library with component paradigm e.g. React, Vue, Angular. Think on how you will connect and integrate your models with visual components. Do models contain everything you will need? Or do they have to? Some of state and logic should be part of component itself rather than underlying model.
5. It's useful to have different kinds of components. There are few approaches for this. You can divide components into presentational and logical, you can divide components into bigger ones and into smaller ones, you can extract common/shared components...
6. Components are one part of things, models are other, but there's also something important - data/update flow between various components and other components or backend/external state store. Rethink your data flow if you seeing some weird things related to updating components.
7. You should be able to run only part of your application (e.g. subtree with some components). If you need run whole app each time, it something wrong with your architecture.
8. Testing GUI can be tricky and it's not always worth it. But hello, you should have your basic models unit tested. And GUI testing can be done in e2e way and also via manual testing