I have just started using React JS and I am currently working on getting the google maps "google-maps-react" package up and running.
From my basic understanding of React JS, any change causes a whole component hierarchy to re-render.
From my understanding of the Google usage information via this link; any re-render constitutes as a usage.
Question
So with that, how do React JS developers handle\deal with this problem? 25,000 free map renders pre-React is fairly substantial but it seems like a fairly simple cap to burst with frameworks like React that cause a re-render for any change in your hierarchy.
Option 1
Is the best way to ensure the map component is not nested in a hierarchy that is updatable by other components? I wrote a sample application and confirmed that only the components in the hierarchy that invoked the change are re-rendered.
If this is the best way, that is fine but I am hoping to hear from more experienced React developers.
Thanks,
I think the 25k limit refers to you requesting the google maps js sdk, not how often you instantiate a google.maps.Map object.
And yes, it would be good practice to not re-render the component encapsulating the map all the time.
Check this simple map component:
https://github.com/Scarysize/react-maps-popup/blob/master/src/map.js
It initializes the map once and propagates the map instance up using a function as a child approach (ofc you could simply pass a callback as a prop).
After some digging I found that the "google-map-react" NPM package is doing something interesting behind the scenes. It is actually sending an update to your markers with the latest map state.
Once I found this, I tied into that behaviour and now my map only renders once and I dynamically handle marker changes based on this behaviour.
I was not able to find this behaviour documented anywhere but happened to stumble upon it via a console.log(JSON.stringify(this.props)) within my marker.
Related
I am currently doing my first project, which is a single page with a big backend background.
There are 5 full scrolls of 1920x1080 monitor of HTML (a.k.a 1 scroll = 1 page block). I have it as a project with no backend, no templates, nothing.
There is a second, back-end based project, which is supposed to go in the first one as just another block.
Now is the time to merge them into one.
But it is just an enormous amount of html, which I fear to lose myself in. Even for the backend-based project, which brings me to the question:
How are these heavy-html projects made? Only with template engines like handlebars, or are there other methods? What is the most efficient way? If it only uses a template engine, does it just generate a biiiig html from different parts and serve it to the user?
First, you need to choose a way of communication between the both. Usually JSON is the preferred way (search google about it). You send the data from back-end to front-end in this format so they "speak" the same "language" so to speak.
Second, if it is a big project as you say (1000 lines of code is not that big) I suggest organizing you back-end into smaller parts. How? It depends. For example, if you have a blog application you can organize the back-end into 1 small file that gives the list of blog post, another file that gives the list of blog categories etc. This way you organize your files to serve a resource at a time.
Usually big projects are organizes using patterns, like MVC(Model-View-Controller)
- Model -> makes a connection with your databae
- View -> here is where the html comes. This is the visual part
- Controller -> links the 2 above
Take a look at express.js on how it organizes the project. Make a small app using it. Take a look at sails.js and try to make a small project with it too. Also, take a look at meteor.js and make a project too. This way you will learn how they organize projects:
folder structure
task runners
database structure
code style
package management
workflow
etc.
I suggest sth. like Vue.js for organizing your HTML. As it uses plain HTML for its templates, its probably a good choice for what you're aiming.
Start with some broader Components and as soon as you realize, that you have duplicate code parts, refactor them to smaller components.
UI Control such as LISTVIEW or Tree or ... comes with model that is observable.
When one make a change to that model, I suppose JavaFX knows how to refresh it automatically in the display.
However my question here is as follows:
Is it the intent way, that someone who wants to update and not replace this model, do so in a background thread with a platform.runlater.
In other words, one has some serious computation to do, and needs to to update an ObservableList as a result. Is it the intended way, to do the heavy work in a background thread and at the end of it, run the update in a platform run later?
I'm asking this because this is what I have been doing so far without problem. But from my reading here and there, in particular in
http://docs.oracle.com/javase/8/javafx/api/javafx/concurrent/Task.html
It seems that some other mechanism shall be used. One should rather return a full list instead of updating the observable list.
But this works only if things comes from the GUI. In case the update is triggered from the back end, there is no way to do so.
The solution that I have used so far, was always to hold a reference to the observable list and updating it by means of platform.Runlater.
Is there any other way ?
The link you give has an example (the PartialResultsTask) that does as you describe: it updates an existing ObservableList as it progresses via a call to Platform.runLater(). So this is clearly a supported way of doing things.
For updating from the back end (i.e. from a class unaware that the data are being used in a UI), you'd really have to post some code for anyone to be able to help. But you might have a look at the techniques used in this article. While he doesn't actually update lists from the backend in the examples there, the same strategy could be used to do so.
We are using cytoscape.js to render graphs in an Angular JS app and it seems to be leaking DOM nodes. A snapshot comparison in Chrome Dev Tools shows Detached DOM Trees being retained by the "instances" array in the global cytoscape object.
The cytoscape instance is created in the link function of the directive and I would like to clear these objects on the scope $destroy event. Even if I manually nullify the references to these instances, there are other global objects like the CanvasRenderer.data.container or CanvasRenderer.bindings[].target which still hold on to these elements which prevents them from being garbage collected.
My questions is: does cytoscape have a destroy() method that would free up references to these DOM elements that I could call on the angular $destroy event? OR what is the right way to get rid of these global references?
Screenshots from the Chrome Dev Tools profiler are here: https://drive.google.com/folderview?id=0B6OGkJMuELQHeC01U1FBYkd4NVU&usp=drive_web
(Lack sufficient reputation for attaching images here)
Options:
(1) You can reuse your Cytoscape.js instances and associated DOM elements instead of destroying them. You'll have better performance that way (esp. w.r.t. the DOM), and this is probably the approach you should be using anyway. Though perhaps your choice of frameworks has limited your options in this regard.
(2) You can call the private cytoscape.removeRegistrationForInstance(cy).
This issue stems from some old code that uses registrations for some compatibility as a jQuery plugin. I'll remove it, but you can work around this for now.
Finally, please create issues on Github for feature requests or bug reports. Stackoverflow should only be used for help questions (e.g. "I don't understand this function in the API" etc.).
I recently walked through the Advanced Orchard tutorial on Pluralsight and it really showed me a lot of things I can do to extend Orchard. That said, I was wondering if there is a way for one module to return a view from another module?
The scenario for this is I'm building custom modules for my clients that have features that would be proprietary so I'd want to protect them with an API key, similar to how oForms works. The only difference from mine to theirs is they allow functionality regardless of activation whereas mine wouldn't work at all so I'd like to have a base module that all of my custom modules derive from and each one could do something like:
if (this.IsActivated())
return View("ViewFromThisModule")
else
return View("NotActivatedViewFromBaseModule")
The real purpose behind this would be so I don't have to copy the view(s) utilized in the base module to each custom one for things such as whether the module is activated or not.
Per Betrand's suggestion, instead of going the multiple module route I'll instead do a single module that breaks out features instead. Then I don't need to share anything because the whole thing is self-contained.
I'd like to use MvcSiteMapProvider for building breadcrumbs for an MVC3 project.
My problem is that certain dynamic nodes could have hundreds of dynamic child nodes, each of which could have hundreds of subnodes itself - so reading the whole sitemap is not an option. Instead, I'd like to lazy-load subnodes for a given node when a user lands on the page.
As far as I can see, this is not possible with MvcSiteMapProvider, but maybe I'm missing something? Is there a recommended way to address that?
Ok - I haven't got any answers and, unfortunately, it seems the correct answer is that lazy loading is not supported by MVCSiteMapProvider.
So I created a quick prototype of a very leightweight MVC breadcrumbs generator, which would request nodes only when you actually visit the corresponding page.