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.
Related
Picture of WebView
Hello, I am working on a login page for my app. Right now the webView login page works! However, there is one big issue with the current implementation.
Basically for my login I call a series of functions:
Opens hidden website with a webView,
Injects javaScript to login to website,
Changes to page of website containing data,
Extracts data,
Pushes to new view as login was successful
Now this is all working, except I had to hardcode times for each function to take place using DispatchQueue.main.async. This is of course problematic because some of the functions vary in time, for example the time it takes to load the webpage. This means my login is successful 75% of the time. I need a way to track if the webView is finished loading so I can call the next function only when it is done loading. However, every webView I have seen that has something like this, uses a completely different structure. When I have tried these other structures, I could not make certain things work like my login function that uses evaluateJavascript.
Is there anyway to have this feature by adding something to my current implementation? Thanks!
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?
I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
I have a question to creator of WinRT XAML Toolkit that had helped me a lot.
What is the best mechanism for working with rich pages in WinRT?
These are the conditions:
There are about 2 pages that have a lot of elements and some high resolution images in the background. Obviously they consume time to load their content. That's why I use AlternativeFrame.Preload() method from the Toolkit.
Also these pages are the most frequently used.
That's why I stand before choosing to either constantly preload these pages (create, draw, fill) but when it is needed or creating my own page cache that would store them (maybe I am blind and the Toolkit already has this functionality?).
Can you advise what's the best practice in this problem and whether maybe there's a third way?
To add some more background - the WinRT XAML Toolkit library has two controls: AlternativeFrame and AlternativePage that are alternate implementations of the base Frame and Page classes that come out of the box in Windows 8 SDK for dealing with UI navigation - similar to how you navigate pages in a web browser. The API of these alternative controls is almost the same as in the base ones, but it adds some more support for asynchronous development model, page transition animations and preloading pages before they are requested.
Currently the Preload() method preloads a page of a given type in the background and puts it in a cache and when a Navigate() method is invoked to navigate to the page of that type - instead of instantiating a new page - the one in the cache is used, so it can immediately be shown, but also - the cache gets emptied and the next time you want to navigate to that same page - you need to preload it again. This works well if you don't return to the preloaded page often and the page uses a lot of memory, but if you want to keep that page in cache - there is not built-in support for that. The original Page class has a NavigationCacheMode property that allows to configure a page to be kept in cache once it is loaded the first time and it would be a good option for you, but AlternativePage doesn't have that support yet. I am thinking about adding it there today since I have some free time, so you might decide to wait for me to do it. Other options include
displaying your page on top of the navigation frame instead of navigating to it in the frame - then you could simply show/hide it when needed
or you can switch back to the standard Frame/Page controls and set NavigationCacheMode="Required" on your Page so it stays in memory forever, though you do lose the Preload() feature then.
or you can modify the Toolkit yourself
or you can cache the content of your page yourself - simply save the Content of your page in some sort of cache (e.g. a Dictionary<Type,UIElement> that maps page type to content) and remove it from the page (set Content to null) when you navigate away from the page and then add it back to the page when you navigate to it and the content is found in the cache. In that case you would probably want to make the Content be a separate UserControl and skip calling InitializeComponent() in the constructor if you retrieve the content from the cache since you can only have one Content and having it defined in a separate UserControl will allow you to get auto-generated code that gets executed in InitializeComponent() that grants you easy access to named elements, registers event handlers etc.
I want to enable caching for a page that loads when an ListView item is clicked. So when the user clicks a second time on the same item, the app will navigate to the previous cached page.
(I'm using LayoutAwarePages and I suspect that this should be possible if in the OnNavigatedTo method the NavigationMode parameter is different from NavigationMode.New)
Any ideas?
You affect the page caching by setting the NavigationCacheMode property of the page in its constructor. By default it is disabled, but if you enable it, you'll get the existing page instance every time you navigate to it. This means that even if the user navigates to a different item in your ListView, the same instance of the page will be reused.
I've found a library reimplementing the navigation framework to make it more like the one in Windows Phone, i.e.:
When navigating back the cached page is used.
When navigating forward a new instance of the page is created.
If I understand your question correctly, you require a different caching behavior from both of the above. To achieve that you could either base your alternative navigation framework on the one in the library I linked to or simulate the behavior by persisting just the page state for each item instead of actually caching the pages.