Per T248405 we are close to releasing our first feature written using Vue.js, a port of the MachineVision extension.
@AnneT and I both feel that there are a lot of advantages to working this way, including:
- Faster development
- Easier to write tests for UI components
- Cleaner and more readable code (esp. when using Vuex, which allows you to separate UI state and business logic from presentational components); this should make it easier to re-design interface elements where necessary, something that seems relevant as we prototype new features without being 100% sure of where we'll end up
Now that the MachineVision port has been launched, it seems like a good time to return to this project.
In order to replicate the capabilities that currently exist on Special:MediaSearch, it seems like we would need the following set of components:
- [ ] Search Input with Autocomplete (probably the most complex out of this set)
- [x] Basic "search" Button
- [ ] "X" button to clear
- [x] Loading Indicator
- [x] Tabs/IndexLayout
- [ ] Media size dropdown selector
- [ ] A "Results Grid" that could accommodate different styles (image grid, list for audio/video/categories); each tab would have a different instance of this component
- [ ] One or more "Results Item" components (image, video, audio, category, etc)
In addition to the components, we'd need to implement the following features:
- [ ] Parse URL params on page load and watch them for changes
- [ ] Replace server-generated search UI with client-rendered one (server-side stuff will probably stay in OOUI PHP for now)
- [ ] Each tab needs to be able to hang on to its own results as the user moves between. This probably means each ResultsGrid can make its own API requests
- [ ] Clear all results in all tabs when the user clicks the "X" button
- [ ] Load more results on scroll and when the user returns to a tab that has more results to display. Eventually we probably want to paginate some how like how Google does
- [ ] Ensure things continue to work at a basic level with JS disabled (we have this now, so just ensure we don't break it)
We may or may not need Vuex here. Results are currently broken down by media type and can probably be handled as local state in a grid component; search query (and params like media size) could be passed down as props. But maybe it will turn out that we need a shared store for some other reason.
Right now the plan will be to develop this code inside of the WBMI extension as its own resource module. Rather than doing things in a single huge Gerrit patch, it will probably be best to develop a "MediaSearch-Vue" branch of WBMI as a separate fork on GitHub, and we can pull back in when we're ready. This will be a good chance to see how well the old and new approaches to front-end development can co-exist (can we have a separate test suite for Vue files that uses Jest, etc. without interfering with the rest of the extension?).