Asimo
Bertrand Laporte
June 2023
asynchronous module loader
Asimo purpose
optimize SPA startup
easily build mock environments
group application files into bundles that can be redefined without impacting the application code
dynamically load a mock service that will override the browser native APIs (e.g. fetch, localStorage, etc.) in order to provide consistent mocks
only required bundles are loaded at startup, (dragged as startup view dependencies)
for dev, tests and demos
Asimo principle
asynchronous dependency retrieval
implementation: /utils/fetch.ts
interface definition: /utils/types.ts
service provider
service consumer
dependency retrieval: /services/fetchservice.ts
Asimo principle
asynchronous loading
bundle registration: /bundles/teamRegistration.ts
bundle content: /bundles/teamBundle.ts
bundles
files load: /bundles.ts
application main: /app.tsx
Asimo demo
startup: 3 main views / 3 entry points
Home page (root bundle only)
Navigation to the teams page
Navigation to the tasks page
https://asimojs.github.io/asidemo
https://asimojs.github.io/asidemo/team
https://asimojs.github.io/asidemo/tasks
https://github.com/asimojs/asidemo
Asimo demo
mock environment: me parameter / 2 profiles
https://github.com/asimojs/asidemo
https://asimojs.github.io/asidemo/team?me=1
trigger (app bootstrap): /app.tsx
mock service: /mockenv/index.ts
Asimo demo
mock service
https://github.com/asimojs/asidemo
fetch mock: /mockenv/fetch.tsx
mock service: /mockenv/index.ts
the mock service can keep state: handy to simulate CRUD operations that need to be consistent over several APIs �(REST / SSE / localStorage…)
Asimo demo
mock service in client tests
https://github.com/asimojs/asidemo
client integration tests (vitest): �/services/__tests__/teamstore.spec.ts
the test loads the same files as the application: no need to individually mock each intermediary layers.�the same datasets can be used to develop and test the front-end features
thanks