This app is about displaying food/ingredients in a table format and providing a menu where you can filter it by their name as well as their property (for example category – if they are vegetables, fruits, beverages, …). I came with idea while educating myself about SCD diet and noticed existing sites make it hard to see all food with a certain common property. For example, if I wanted to see all fruits I needed to scan all lists from A to Z and for all food see if it’s fruit or not ((I found one at later time that’s little interactive: it’s here.)). The app is definitely not a finished project, it will grow as a needs arise (I will not build it primarily for the sake of learning Angular). You can find it on GitHub.
I scaffolded an Angular2 app with
angular-cli and decided to use SemanticUI toolkit for appearance.
- The first step was to make it functional as soon as possible (meaning developing in a unmaintainable way).
- The second step was making it more in FP style.
- The third step was a refactoring where I used RxJS which Angular features by default and which I greatly admire (more complex than classic autocomplete example, it was the most enjoyable part while developing the app so far).
- Lastly, I refactored one big component into smaller components that communicate with each other via RxJS Observables. You can see this in project’s commit history.
I was only little annoyed while using TypeScript. Because I wrote a lot of functions I needed to annotate them with types otherwise TypeScript complained (that was not the problem if I didn’t use functions). Very big concern was when I discovered that Ramda, my go-to FP library, in TypeScript doesn’t support special placeholder which I was so used to – I solved this issue with a different design but nonetheless.