The site I’m building has been in prod for 2 years and has a requirement to display a top level URL that gives access to a starting point of a UX flow (eg. localhost:4200/start). But each of the routes underneath it should not be accessible directly from a URL. So if the flow was:
then the URL should display localhost:4200/form throughout the entire process.
The way the app currently solves this, is by using dynamic components (don’t ask) and a custom state management system that stores an array of ‘steps’ so the user can navigate forward and back through the form. But the architecture is so tightly coupled and ‘non-emberish’, that most of the components act more like templates and can’t be re-used. I’m wanting to get back to using the routes/templates and the state service so the entire app is pulled back towards Ember conventions (also for the purposes of ease of use and relevance of Ember docs for junior or new devs).
Bear in mind the app is an extremely large govt site, and in a 9 step form, there could be 90 possible templates/components. With the current architecture, and the amount of functionality planned for the next 12 months, the size of the app is likely to balloon.
Where I’m at currently, is looking at is the private functions in
Ember.HistoryLocation, and if possible I’d like to come up with a solution that can be put into a service or mixin rather than having to create a plugin with custom functionality that hijacks ember.js/packages/ember-routing.
The overall plan is to try and remove all non-ember like functionality away from the core code into plugins, and make the app itself more tightly aligned with Ember conventions.