Combine Flux (vuex) store with global event bus? - vue.js

I'm using Vuex & Vuejs (flux architect) for a CRM single page application.
In contact page i'm showing a list of tasks related to current contact and at sidebar i have a list of task for current logged in user.
These collection of tasks are kept in separate stores. I don't know which is best solution:
After update post request search in both list and update task object if it's present and mutate state.
After update post request use an global event bus and each store should listen and update task object if needed.

It really depends of your requirements, but one thing I can tell is that using two separated stores + bus is defeating the whole purpose of Redux.
If the tasks in your application share the same scope and can be assigned to you or other users that you may be visiting/managing, you can have all the tasks from your scope (your team, for example) and display it on different places using different getters with Array.filter functions.
If the number of tasks is too big to have it all loaded, I'd approach it doing one single tasks list in the store, being populated from a single url.
ie:
- Give me all the tasks I have + the tasks of current user I'm managing
- Give me all the tasks I have + the tasks that matches this search
Although this can get messy if the requirements are more complicated and can get confusing. But try to structure your application with one single store if possible and avoid bus, as it is only recommended for small size applications.

Related

Where to persistently store basic component-specific state

I'm very new to React + Electron. I'm wondering where most people store basic, component-specific state.
Scenario: I have created a custom component. Basically a type of table. The relevant bit of this table to the question is that I allow users to show/hide columns, or even modify the column order.
I'd like these 'column settings' to persist even if the user closes and reopens the application.
No other part of the application is interested in the column settings. They simply affect what is shown in the custom table component.
The underlying data model is not affected by these settings.
I've looked around at a bunch of solutions. Most will probably work, but not sure which is appropriate.
Redux: I could store these bits of component state there. However, the Redux docs give the impression that it is more targeted towards storing global app state. No other component in my application cares which columns the user chose to hide in this table. Thus, it would seem like a gratuitous use of Redux, when this probably should be something handled locally in the component irrespective of whether Redux is present or not.
Localstorage: This would probably work. Main concern is if the user decides to run multiple instances of the app. There could be a vanishingly rare race condition if both instances decide to save the column state at the same time. I don't consider restricting app instancing a proportionate solution just for something as trivial as these columns settings.
electron-store: Says it does atomic writes. But what if I want to use this component one day outside of electron (say in a web app nb: this is very low priority consideration - i'm very unlikely to use it outside of electron)? Should I tie the component to electron just for this? Also, is using ipc (since e-s lives in the main proc) to save trivial settings like this overkill?
What do people do for this?

DDD Request & Activity Tracking

I have a question about tracking activity and where it belongs.
With a lot of my domain commands, you also might want to track the activity and modifications made by users to a particular context or object.
For example:
lets say we have a items domain/context where we can create and edit items. Users are going to make requests to the api to do this. We might want to track who created an item and an modifications made to it.
In a typical CRUD model, you'd probably find the created by field in the domain object/table
Something doesn't feel right when using DDD to have the activity in the domain object. The activity log feels like a general service that would cross many boundaries? Is it right to have the activity log of who changed what in the domain object. It would feel quite clean and focused without it. The activity logging seems specific to the applications case, not the domain?
So:
Should the activity tracking be in the domain object?
If it shouldn't how do you go about handling this in one command/request. I keep hearing people saying about you should only touch 1 boundary in a command/request.
I would think of this activity log as any other piece of data. You would put it together with the business logic around it. Why do you need this information in the first place? Is your items context going to implement business logic that needs the activity log? If not, then I'd say it doesn't belong in that context.
If what you are trying to achieve with this log is some data analysis that needs the activity from several contexts, then I would say publish events from your business operations (every time a user does something with one of the contexts) and have your activity tracking context listen to them and store the activity in a way that serves this purpose.
If, instead, your items context needs to apply some sort of logic, based on the past activity, then keep it in that context in a format that allows you to implement this business logic.
It's also possible that you actually need both. Some context might just publish the events and not store the activity, while others will publish the events and also track the activity for their own internal needs.

WorkFront / AtTask API querying secondary objects

I'm using the WorkFront / AtTask API and when looking up Tasks, I'd like to filter them down to the Projects that contain specific Roles.
using /TASK/search/?fields=project:roles it will show me the Roles, but then I'm not sure how to filter on those.
Accessing a tertiary object directly (fails)
I tried /TASK/search/?project:roles:ID=aaaaaaa but the API returns (422) Unprocessable Entity.
Access from the parent object (works)
task -> project -> /PROJ/search/?roles:ID=aaaaaaa works, but involves sub-queries to the API that are costly and slow.
Access from secondary object's ID fields (works)
/TASK/search/?project:ownerID=bbbbbbb since it references a field of a secondary object and not yet another object. But I've only been able to make this work with single-instance references and don't know how to access the ID fields of collections without referencing them as objects.
So how could I filter or access down to a secondary object's collection? I can view them in a single API query, but can't seem to filter.
Task > It's Project > filter by Role
This functionality is not available in Workfront, neither through the API nor through built-in tools like Reports. This is due to a constraint on the database side of things. After seeing this question I spoke with my enterprise support team at Workfront and received confirmation of this from the DBAs.
The solution that you provided is the best you can do - split this query into the front and back half of your parameters and filter results within your code.
The best solution I can think of thus far is:
Pull the list of acceptable projects based on role.
/PROJ/search/?roles:ID=aaaaaa&...
Save the list of projects in memory
Pull the list of Tasks in question
/TASK/search/?...
Remove the tasks that don't have a project ID from step 2
This way it's only 2 queries and the project query should have a minimal impact in terms of size and number of entries.

react+flux - one API call vs call for every component strategy

Let's say I have this blog app. There are posts, pages, menu, and user login.
One way to load the entire application state is to have one api call which will include posts, total number of pages for pagination, menu items and current user state.
The second way would be to have multiple API called, one for each component. So one call for posts and pages, one for menu and one for current user.
Which would be best strategy given the fact react is built around components?
I'll add my 2 cents as answer but still wanting to close as primarily opinion based.
The way I structure my React apps is to have a top level components called Screens or URLs, ie., /list-users should map against the ListUsersScreen component.
In said screen I declare a static method called fetchData, this method returns an object which values are Promises.
{
users: fetchUsersAction(),
someOtherApiData: fetchSomeOtherAPIData()
}
This lends well to both pure client apps and universal apps, as well.
On your server side you'd have to wait until all Promises resolves until you can render something.
Furthermore you can easily cache the values in your application state object and decide if you want to fetch new data or render stale data, also it saves on bandwidth for your user since the user might or might not decide to continue browsing your site.

using knockout with multiple views - how best to structure API

I have a knockout application I am building that has multiple viewModels in one page.
I have been mocking data so far but I am now building the API that will run it.
My question is what do I do with complex viewModels with regards to the API.
For example I have a 'add company' page that has the following tabs:-
Company info (name, address, etc.)
People at company (multiple people)
Insurance Documentation (3 different types)
I currently have each of these as separate viewModels.
When I press save I am now confused what is the best way to do things.
If I send all 3 viewModels bundled together (add them to one master viewModel) then it becomes easy to ensure that IDs all line up but that doesn't seem very modular or a good idea and breaks the idea of being 'API Centric'.
However if I send each viewModel to a different API end-point how do I ensure that the ID's match-up correctly (people -> company) etc.
At the moment I am looking at two options:-
When press 'add new' create a blank company on the database and grab its ID -> use this to match everything up.
OR -
When I press save send the new company up first, then when response comes back as (hopefully) ok then upload the rest of the information to their respective end-points using the now correct ID.
Both seem messy so I am wondering what is the 'accepted' best way to do this??
Your second approach is how I would do it, pressing Save would send the Company model first. Then once you receive the 'OK' response with the Company id, in the callback you can add it to the other models and send them up.
Nothing messy about that, just standard asynchronous behaviour.