I am new to Vue and I am trying to understand some concepts. So I have a website that is a mix of server-side and front-end rendering. When the index is first loaded it will return the first 10 products which are rendered by the server-side. Then the user will use a search filter to search for specific products or just scroll down so more products are loaded. This searching and loading will be done by Vue. Now the question is how to bind the data that is rendered initially by the server with the current data object of Vue?
The documentation says
v-model will ignore the initial value, checked or selected attributes
found on any form elements. It will always treat the current active
instance data as the source of truth. You should declare the initial
value on the JavaScript side, inside the data option of your
component.
So one can load the index without any data, then fire a second request to load the initial data but why waste one HTTP request on that?
Related
As I believe is common in many APIs, ours returns a subset of fields for a record when it is part of a List request, and more details when it is a single-record request to its Show endpoint.
It seems that react-admin attempts to avoid doing a second request when loading a Show page (possibly re-using the record data from List?), which results in missing data. Refreshing the page fixes this, but I'm wondering if there is a setting that will force a GET_ONE request on every Show page load.
There are no setting for that. However, this should be achievable with a custom saga which would listen to LOCATION_CHANGE action (from react-redux-router) and dispatch a refreshView action (from react-admin) when the new location pathname ends with /show.
Edit: however this is very strange. We only use the data we already got from the list for optimistic display but we still request with a GET_ONE when navigating to a show page from the list. Do you have a codesandbox showing your issue?
We are developing an app which will display a button on product details page to perform some actions. We are using product.metaifields for displaying the same based on a condition. So basically the button display toggles depending upon the metafield value.
The issue we are facing is, activate the feature from admin section and then the button will not show up on the user side unless we do a hard refresh on the browser. What happens here is Shopify caches the metafield value so the condition checking will not work.
Is there any way to remove the page caching while we perform some action on the app?
When you render a page in Shopify, it renders everything including the metafield resource values you may access while rendering. There is no special caching of a metafield value. If you render a metafield "AAA" on a client-facing page, change the metafield using an App or the Admin to be "BBB" there is no signal to the already rendered page to redraw anything.
If you want dynamic behaviour, like rendering a button with a value based on a metafield resource, you will have to either do a callback to an App, get the new contents, and update the DOM, or use a push strategy like WSS:// to keep a channel open to a backend that monitors these things.
So to sum up, your problem is not one of cached data, but instead the fact that you're rendering a non-dynamic value, and expecting your UX to be dynamic.
How to init data fast in react??
In my project, we make client react app.
I'm using alt(flux), normalizr, immutable. And to optimize performance, I'm using PureRendermixin with immutalbejs.
When user navigates page, each store listens to the browser location and gets ALL data through ajax, initializes itself with the data it needs.
After that, each store fires emitChange, react re-renders component tree.
But, the problem is firing emitChange in all essential bootstrapped stores re-renders component tree.
This makes it so slow even browser gets frozen.
i.e. user clicks a link and bootstraps page data to stores (bootstrapping). In
this case updated DOMAIN store data (Posts, Comments, Lists, Paginates, Users, Categories... more than 10 stores for dependency in view component. Look at the picture so many lifecycle, emitchanges, rerendering updates ) is requested and merge updated.
NODE_ENV=dev
This takes more than 1 sec, and browser stops
NODE_ENV=prod
This takes more than 200ms, even better but not enough to use.
How to optimize architecture?
You can use server-rendering technique (universal / isomorphic), and pass data from server directly to clientside without Ajax.
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
I have a visualforce page that uses a dynamic component to render some input fields. when a user hits the submit form button, I consistently receive a 'Not serializable: Component.apex.outputPanel' error.
Question is how best to use a dynamic component to render and bind some input fields so the record can then be submitted ? The variable I want to process on submit is declared in the page controller, but I cant get around the serialization error. Any suggestions most appreciated.
Cheers,
CH
Update:
this 'unable to submit a form while dynamic component rendered' remained a problem, so in the end I chose a different approach and whilst still used dynamic component, I avoided submitting the view state per standard salesforce approach, and instead submitted via a javascript remoting function that stringified all dynamic input fields client side, submitted to function which then parsed these out into a new sObject and performed DML. Done.