Opinionated example of how you can apply SOLID principles and CA to UI Web development. Based on Uncle Bob Martin Clean Architecture and Functional Design books.
You will see UseCases, Entities, Presenters, Controllers, inverted dependencies etc.
And TESTS of course - simple, fast Developer tests (as Kent Beck commanded).
Used mocha/chai for testing (you prefer jest - you are my enemy).
The examples are not intended to be "true" FP, since true FP is readable only to chosen ones.
The examples are not intended to be "true" OOP. Because... because!
The intent is make it conceivable to everyone.
Caution
VERY DRAMATICALLY SUPER IMPORTANT NOTE:
If you don't like something - I don't care...
If you have better ideas (unlikely) - create a PR and prepare to fight.
The project contains core module and it's integration to the different ui frameworks, like react, angular, vue etc. There is also pure native example.
It showcases how you can split business logic not only from view, but also from framework(!) and even platform (yes there is react-native integration).
Caution
Not all examples are already integrated. Why? Because you didn't pay me for that.
To run example locally, clone repo, then navigate to example you are interested in (i.e. packages/react-example). Then:
npm i
npm start
UI example (no, I'm not going to waste time on styles; only structure and use cases matter. but your are welcome to PR better styles)
In this example I implement part of backoffice for the online store. I do not intend to cover all edge cases and implement fully functional online store admin app. I intend to implement practical example of several parts just as a showcase. The following user stories will give you an idea of what is covered.
User should see list of the orders (first page) and total order count.
Each order should contain id, created date, customer name, sum, payment status, fulfillment status.
While loading the orders, user should see some indication of that.
User should be able to open the order to see its details.
User should be able to remove order from the list.
Removal should be confirmed by user.
While removing, user should not be able to interact with the order.
User should be able to load next batch of the orders
(It might be infinite scroll or pagination, doesn't really matter)
User should be able to refresh order list in order to see current order data
User see all order details.
User should be able to change allowed fields.
For now those are: payment status, fulfillments status, shipping address.
User should be able to save changed order.
User should be able to close order.
Closing should be confirmed by user.