I am wondering if some of you are aware of the architectural approaches taken by the Wave team to build its GWT web client? Since i am trying to optimize performance of one GWT app designed for mobiles, it is hard not to admire its speedy credentials :)
Is Wave not using GWT-RPC to get regular updates from server? Firefox tracks some JSON communication going over the wire but nothing like RPC stuff.
How do they proceed when, for instance a new wavelet is sent. Is there a view object for every wave DTO, or they use some other pattern?
How is GUI updated after a response with, say, a new Wave arrives. Would the whole area with wavelets being rerendered or the use some smart techniques to ensure that only particular element is touched?
Thanks
This is probably information overload, but since Google Wave is open source you can actually look at how they set things up here.
If you look at WaveView.java, for example, you can see that they are using a client-side event bus like Ray Ryan mentioned in this talk at Google IO 2009. I seem to remember seeing another video where they talked about these aspects of Google Wave:
They use an event system to fire off events when something happens on the client side. The event system manages communication with the server, passing event information up to the server, getting events back from the server, and publishing those events that come back. The event bus uses a kind of buffer so that if a bunch of events are fired off in rapid succession, they can send them all in one batch. For example, when a new Wave arrives, an event with the wave information would get fired, and any portions of the UI that are actively listening for that event would be notified, so that they could determine whether they needed to change themselves accordingly.
They used seam points (or some such; I can't remember the name) to make it so that GWT could break the code up into modules, and only load up the portions that actually need to be used. Since the wave ui javascript file was originally over 1MB (minified and compressed), that was pretty important.
Since only certain waves and wavelets would be visible at a time, they actually used some complex techniques to reuse the same DOM elements. So as you scroll down through your list of waves, it's actually taking the DOM element representing the wave at the top of your inbox, changing the information inside, and moving it to the bottom of your scroll area, leaving a blank space in the part of the scroll area that you're not seeing anymore.
Additionally, I'm pretty sure they use something like Comet with JSONP to maintain continuous communication with the server, so they're not polling the server constantly for new updates, but rather there's a dynamically-generated javascript file that's being loaded in incrementally from the server, which contains instructions to fire whatever events the server has decided need to be fired.
Related
I am developing an aframe project on my MacBook pro, late 2013. When running the project, the fan of my computer always spins fast, regardless which browser I use (firefox, safari, chrome) and the project size (also happens with a project just containing a simple a-box).
aframe-stats show me that my project (1028244 vertices, 342748 faces) still runs with 20 fps.
Is it somehow possible to limit the frame rate to 10fps in order to keep my computer quite? Or any other way to limit the flop-consumption of the aframe project? I already tried a native approach with sudo cputhrottle plugin-container 10 but that did not just throttle the aframe-renderer but the whole firefox browser. Can I pull the break somewhere in the JavaScript or the Browser settings?
It's difficult to say without your project code. Large data sets will simply crank out even a high spec macbook pro. I have found it helpful to pause any rendering whenever possible to quiet the users' machines.
I personally removed automated next animation frame rendering in favor of waiting for controls and objects to change.
For example:
this.controls.addEventListener( 'change', function(e){ addToRenderStack(); });
A simple function addtorenderstack puts in a new value in a list for a render, with the expectation that the render will occur at some point in the future and not right away. the list can also be used to log who requested the render in the call stack, and narrow down performance hogs.
addtorenderstack places a render request in a list. In the requestanimationframe loop, if the list has any length, a render is called on the scene. The stack is immediately cleared rather than processed one by one. If controls or animations continue to make render requests, the list will have a length again and request animationframe will process them in the same way with another render.
In this way, the code only renders when absolutely required. This saved me much grinding on framerate and the fans only come on during intensive operations and then shutdown when its complete, much like a typical 3d game experience.
Your mileage may vary depending on what's happening in your app. I work in engineering so often the view of the 3d world is stopped as an engineer examines or shows a model.
I feel like I have a good handle on functional reactive programming (FRP) "in the small", e.g. composing mouse events together into a "drag" event stream or mapping and filtering WebSocket events into useable objects that the UI can respond to.
But it seems that the FRP resources I've read intend for it to be used as the main data model of an application. That part I don't get.
So first off, can FRP be used as the main data model for an application?
Is there a global event stream whose events are all changes to the model? That model and those events would have to encompass everything that could possibly happen in the application. Or maybe the model could be split into smaller bits (a la Stores in Facebook's Flux architecture)... but isn't that just storing state in a really weird way and pulling a semantic trick?
Here's a concrete example. I'm making a tilemap editor application like Tiled. A tilemap is a list of layers. Each layer has a two-dimensional array of tiles. Each map, layer, and tile can have its own associated properties that the UI has to represent as it changes.
Is each of these things a stream, so that at the top-level I have streams of streams of streams? Or do I have separate streams of things (the layers stream, the tiles stream) that different parts of my application keep a watch on?
And what does a tile stream look like? Is each event a "add tile" or "remove tile" command with an associated tile? Or maybe each event is the entire 2d array which could get big? How can I take advantage of the "time travel" benefits of FRP in this model?
Is there some bigger picture that I'm missing?
okay so i have basic skills in html, css, javascript.
im still in the learning phases but just need a little help on where to go in regards to creating a web app.
i can figure out all the code, so thats fine, i just need some pointers as to what to use where.
So basically ill have a webpage with a few simple buttons, when clicked they'll send a message to the server and the server will hold a count for each button clicked using a php script.
1) - would it be best to hold that information in a JSON file?
then from there, there'll be another webpage which will have div tags stretching 100% across the page, with an element inside it which will move across the page according to the count held on the server.
2) - what should i use to animate it moving?. would i use javascript? or css3 or something?
the front end will need to continuously update on the count held by the server.
3) - would AJAX methods be best using javascript?
any advice would be great thanks.
And one last thing.
With Javascript animating, if i wanted to animate a div moving horizontal, is the best way to do it by animating the margin size? or am i stuck in the dark days..
1: i would store it in a database, if you store it in a file make sure that you are handling writes in a safe way(multiple writes to the same file)
2:you could use javascript to animate the css properties of a html element(preferable the width)
3: Ajax would work but then you need to continuously poll the server for changes alternativly use longpoling http://en.wikipedia.org/wiki/Push_technology#Long_polling
an alternative if you only support modern browsers and your hosting company allows it is to use websockets
If you're trying to save information server side (which you seem to be), I would recommend using a database (such as MySQL).
If your animation is dependent on the value from the server, I would use javascript to animate it. Note that you will have to poll the server in order to actually get this information (lets say, every second). When you get the information, simply update the div you want to animate with the new information. I don't quite understand what you want your display to look like, so I can't really give you anything more specific here.
Yes. I would recommend using jQuery to handle your AJAX calls as it makes it much easier and deals with cross-browser weird-ities.
To your update:
One option could definately be to adjust the (left) margin size, but you could also use the relative position. It will basically push the element however many pixels in whatever position from where it would typically be displayed. So if your box is by default right along the left border, you could relatively position it 100px to the right. You can read more about position here.
if you were watching the State of the Union Address (http://www.whitehouse.gov/state-of-the-union-2013) you would have seen graphic supplements that appeared alongside of the video stream of the President that served to illustrate his key points.
The video on the site is a composite of this, but during the live streaming these were handled separately.
My question is: what is the best approach for doing this? especially if one wanted very tight control of the appearance of the graphics (i.e. right when the point is made, not before and not long after).
I'm wondering if any tools exist to facilitate this? I've been scouring google, but I don't think that I have the correct technical vocabulary for what I'm describing because I'm coming up blank.
I imagine AJAX would be a good starting point, but I'm not sure how to achieve the level of control that they had, or how to handle the back end of things.
For anyone who might encounter this challenge we devised two ways to solve it:
The first is a bit mickey mouse: It requires that you know how many images, etc you want to use beforehand (which in most cases you would). We wrote a script to repeatedly request an image and inserts it into the page, and on finding an image then request the next image in the chain.
Ie. Display default image -> request image 1
then, displaying image 1 -> request image 2
etc
From your end you can simply drop the images into a folder on your server when you are ready for them to go in. An advantage of this is that the images can be interactive, with links to other content, etc.
The big disadvantage, of course, is a lot of unnecessary requests to your page. In our case we anticipated enough traffic that it didn't seem wise. Also, there are plenty of opportunities for mistakes and depending how frequently your timer fires there are likely to be timing discrepancies.
The Second costs money: we found the program Ustream (http://www.ustream.tv/producer) which allows us all the image control we require in terms of timing with the advantage of providing support for media clips etc. And it allows you to record everything streamed.
The disadvantage is that what the user sees is an integrated video on your site, so that you have to handle links to related content and provide images (if you want your users to have access to them) separately.
Hope this comes in handy for someone
I would still welcome any suggestions on how to make the first method more effective
Scenario
A client application that features a map. The map is an interactive control that upon move/zoom will request tiles (as needed) from a tile server -- a GeoServer in this case. The tile server receives requests for tiles as the user moves around the interactive map. Let us imagine that there is no limit on how many requests the client can make.
Problem
When a user is moving fast, requests to the tile server pile up. The tile server gets bogged down and is not able to provide tiles in a timely fashion.
Additionally, the tile request queue is responded to in request order. So, the user could go from Florida to California and have to wait for Florida tiles to load before seeing any tiles in California.
Questions
How can we improve the perceived performance of the client?
What are some strategies to employ on the client-side to prevent a large amount of requests when panning fast? Zooming fast?
What are some strategies to employ on the server-side to determine if a request is no longer needed or should take lower priority?
Possible Solution
Place a custom proxy in front of the Tile Server such that tiles could be requested with a time-stamp -- later tiles always receiving priority. The proxy could also implement a feature allowing the client application to abandon a request.
Thank you in advance.
I looked at various solutions on stopping image loading. But it seems no one has found a way to stop loading an image when browser has already started downloading it.
So, I can recommend alternative. Browser has a limit of 2 parallel downloads per domain. So, that means you need to load images of different locations from different subdomain so that browser can load multiple locations in parallel.
So, say california images are coming from:
california.yourwebsite.com/images
And florida images from:
florida.yourwebsite.com/images
Moreover, you can use different subdomain for different zoom level so that if images for a certain zoom level are still loading and user chages zoom level, browser can download the new zoom level images immediately.
zoom10.florida.yourwebsite.com/images
For this, you need to create a *.yourwebsite.com DNS mapping to your webserver(s) from your domain panel.
Does this answer your question?