I'm building an app that have comments module on it. This comments module will have "unread comments" if user are not seeing on mobile/web app.
My implementation for now (for mobile) is I track every items that visible on the mobile devices through onViewableItemsChanged . So, when the items is visible to user for amount of time, i will emit a socket that "this commentId are read by userId X", something like that.
Emitting socket to mark as read to individual items makes the web sevices also doing an update query every time. Is it okay? Or is there any improvement that I can do? It's ok to change the ui interface or might be there is improvement inside the code.
Related
. Requesting the page(on HTTP or WebPage), it is very slow or even crash unless i load my JSON with fewer data. I really need to solve this since sooner or later i will be using large amount of data frequently. Here are my JSON data. --->>>
Notes:
1. The JSON loads only String and Integer.
2. I used to view my JSON in JSONView more like treeview using plugin
from GoogleChrome.
I am using angular and nodejs. tq
A quick resume of all the things that comes to my mind :
I had a similar issue once. My solutions may make the UI change.
Pagination
I doubt you can display that much data at one time, so the strategy should be divising your data in small amounts and then only load more when the client ask for it.
This way, the whole data is no longer stored in RAM as it is currently. This is how forums works (only 20 topics at a time).
Just imagine if StackOverflow make you load the whole historic of questions in the main page, how much GB would your navigator need just for that ?
You can use pagination in a classic way (button with page number, like google), or in an infinite scroll way, as you want.
For that you need to adapt your api and keep track of the index of the pages you already loaded at every moment in your Front. There are plenty of examples in AngularJS.
Only show the beginning of the data
When you look at Facebook comments, you may have a "show more" button. In their case, maybe it's to not break the UI, but it can also be used to not overload data.
You can display only the main lines of your datae (titles or somewhat) and add a button so the user can load more details if they want.
In your data model, the cost seems to be on the second level of "C". Just load data untill this second level, and download the remaining part (for this object) only if the user asks for.
Once again, no need to overload, your client's RAM will be thankfull, and your client's mobile 3G too.
Optimize your data stucture
If this is still not enough :
As StefanArya said in comment, indeed remove the "I" attribute, which is redundant with the JSON key.
Remove the "I" as you can use Object.keys() to get key name.
You also may don't need that much precision on your floats.
If I see any other ideas, I'll edit this post later.
We need to run some operation on our Firebase DB and manipulate data after certain input is given by user from the Mobile Device modifying a flag.
Currently we are using on() to listen to particular flag in each users node. We are running this listener from a Nodejs server hosted on Heruku.
If we plan to have 100 thousand users we will have 100 thousand listener. One listener for each users flag which is waiting to be manipulated by user on the Mobile device.
Is this a good design in terms of Firebase?
Ideally we can create a REST API which is called by users and then on the Node JS server we can manipulate the data.
What is the best way to run background operation on Data on Firebase based on user input?
We were using Parse earlier and it was easy to achieve this using Parse Cloud code. With Firebase we are having issues because of this.
If we plan to have 100 thousand users we will have 100 thousand listener. One listener for each users flag which is waiting to be manipulated by user on the Mobile device.
This sounds like a bad data design. While it is definitely possible to listen for changes to hundreds of thousands of items, it shouldn't require hundreds of thousands listeners.
My guess (because you didn't include a snippet of your JSON) is that you have a structure similar to this:
users
$uid
name: "user6155746"
flag: "no"
And you're attaching a listener in just the flag of each user with something like:
ref.child('users').on('child_added', function(userSnapshot) {
userSnapshot.ref().child('flag').on('value', function(flagSnapshot) {
console.log('the flag changed to '+flagSnapshot.val());
});
})
In code this is simple, in practice you'll have a hard time managing the "flag listeners". When will you remove them? Do you keep a list of them?
All of these things become a list simpler if you isolate the information that you're interested in in the JSON tree:
users
$uid
name: "user6155746"
userFlags
$uid: "no"
Now you can just listen on userFlags to see if the flag of any user has changed:
ref.child('userFlags').on('child_changed', function(userSnapshot) {
console.log('Flag of user '+userSnapshot.key()+' changed to '+userSnapshot.val());
});
With this you have a single listener, monitoring the flag of potentially hundreds of thousands of users.
We have multiple projects with multiple portlets and need to send an array of objects between them.
Our situation:
One of the porlets is like a "Master-portlet", it will be responsible for all the REST-calls and consume json-data and parse it to Java-Objects.
All the other portlets will receive an array of objects and show them to the user.
Our thoughts and solution:
We wanted to implement this by sending arrays of objects trough events. One of the "smaller" portlets will send an event to the "Master-portlet" and the "Master-portlet" will then answer with a new event and send the right array of objects back.
Our problem:
We dont know how to send arrays of objects trough events. Is this even possible?
Also we are not sure if this is the right way to solve this. Are events ment to send a bigger amount of data?
Is there a better solution for our case? Maybe it would be better to implement a database and all the portlets get the information from there?
Consider portlet events (and portlets) the UI layer of your application. Based on this, judge if the amount of data that you send back and forth makes sense or not. Also, if you closely couple the portlets, you're just hiding the fact that they can only function together - at least a questionable idea. You rather want them to react to common circumstances (events), but not rely on a specific source of events (master portlet) being available.
That being said: The more complex the data is that you send as payload of a JSR-286 event, the easier you run into classloading problems in cases where your portlets are in different webapplications. If you restrict yourself to Java native types (e.g. String, Map, etc) you will omit problems with the classloader.
Typically you want to communicate changes to the current context (e.g. new "current customer" selected - and an identifier) but not all of the particular data (e.g. the new customer's name and order history). The rest of the data typically comes through the business layer anyway.
That's not to say that you absolutely must not couple your portlets - just that my preference is to rather have them very loosely coupled, so that I can add individual small portlets that replace those that I thought of yesterday.
If you have some time, I've covered a bit of this in a webinar last year, I hope that this adds some clarification where I was too vague in this quick answer.
Many examples on the net show you how to use ng-repeat with in-memory data, but in my case I have long table with infinite scroll that gets data by sending requests to a REST API (scroll down - fetch some data, scroll down again - fetch some more data, etc.). It does work, but I'm wondering how can I integrate that with filters?
Right now I have to call a specific method of API service that makes a request based on text in "search" input box and then controller updates $scope.data.
Is it possible to build a custom filter that would do that? And then my view would be utterly decoupled from the service and I could declaratively tell it how to group and order and filter data, regardless if it's in-memory or comes from a remote server, server that can serve only limited records at a time.
Also later I'm gonna need grouping and ordering as well, I'm so tempted to download the entire dataset and lock parts of the app responsible for grouping, searching and ordering (until all data is on the client), but:
a) that dataset is huge (hundred thousands of records)
b) nobody wants to deal with cache invalidation headaches
c) doing so feels so damn wrong, you don't really expect me to 'keep' all that data in-memory, right?
Can you guys point me to maybe some open-source examples where I can steal some ideas from?
Basically I need to build a service and filters that let me to work with my "pageable" data that comes from api, like it's in memory-data.
Regardless of how you choose to solve it (there are many ways to infinite-scroll with angular, here is one: http://binarymuse.github.io/ngInfiniteScroll/), at its latest current beta version, ng-repeat works really bad with large amount of data - so do filters. The reason is obvious - pulling so much information for changes is a tuff job. Moreover, ng-repeat by default will re-draw your complete list every time something changes.
There are many solutions you can explore in this area, here are the ones I found productive:
http://kamilkp.github.io/angular-vs-repeat/#?tab=8
http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/
https://github.com/allaud/quick-ng-repeat
You should also consider the following, which really helps with large amounts of data.
https://github.com/Pasvaz/bindonce
Updated
I guess you can't really control your server output, because filtering and ordering large amount of data are better off done on the server side.
I was pointing out the links above since even if you write your own filters (and order-bys), which is quite simple to do - http://jsfiddle.net/gdefpfqL/ - (filter by some company name and then click the "Add More" button - to add more items). ordering by is virtually impossible if you can't control the data coming for the server - the only option is getting it all, ordering and then lazy load from the client's memory. So if each of your list items doesn't have many binding by it self (as in the example I've added) - the list item is a fairly simple one (for instance: you simply present the results as a plain text in a <li>{{item.name}}</li> then angular ng-repeat might work for you. In this case, filters will work as expected - say you filter by searched text:
<li ng-repeat="item in items | filter:searchedText"></li>
even for new items added after the user has searched a text, it will still works because the magic of binding.
Bear with me as I am coming from a traditional web development background, using ASP.Net, and even server side MVC. I am attempting to build a highly interactive single-page application using Backbone.js to help organize my javascript code and build the UI.
I am having trouble with some concepts, or approaches to building the components of my UI, and deciding how to handle certain aspects. I am going to use this oversimplified screen shot as a basis for my questions and discussion.
Let's use a "TO-DO" application as an example (of course.) The UI is pretty simple. I have the following "components"...
A results list which shows the current set of to-dos that match the currently selected criteria
A list of my to-do lists (Personal, Work, Blog Project)
A list of due date filters (Today, Tomorrow, This Week, Next Week)
A list of tags (Bug, Feature, Idea, Follow Up)
A search box
Desired Functionality
Update the results whenever any of the search criteria changes (choose a list, choose a due data, choose one or more tags, enter search text, etc.)
The user can edit, add, and delete lists. (not really shown in this mock up)
The user can edit, add, and delete tags. (not really shown in this mock up)
The user can edit, add, and delete to-do items. (not really shown in this mock up)
Data Models
There are several models that I identified that are "data" related. These were easy to identify.
ToDo (represents a single to-do item)
ToDoCollection (represents a collection of to-do items)
ToDoList (represents a single to-do list)
ToDoListCollection (represents a collection of to-do lists)
Tag (represents a single tag)
TagCollection (represents a collection of tags)
How to Store UI State?
This is where I am having trouble. I want to show which items in my menus (on the left side) are currently selected. I can certainly listen for events and add a "selected" class to items as they are selected, but I also have rules, like "only one list can be selected at a time", but "any number of tags" can be selected at a time. Also, because the To-Do List menu and the tags menu are dynamic, they already are associated with a ToDoListCollection and TagCollection models already. They are rendered according to the state of these "data models".
So, how do I handle the management of this UI state for all these different views using Backbone? I appreciate any ideas or suggestions.
Thanks!
I had exactly the question you did, and I'll let you know the secret: cheat.
What you have here is two different application layers, and some confusion about them. The first layer is the relationship between to-do objects in your system. These, you store in a traditional object relational model, and you create/retrieve/update/delete them as you would any other RESTful application.
The second layer is the relationship between your display of these objects, and the objects themselves. There's some state there you want to preserve. Here's the important insight: as long as every object GET, PUT, or POSTED to the system has a unique ID, the second layer can be completely independent of the first.
The first layer is a RESTful API to "a to-do manager." The second is something unique to this presentation. It's relationship to data in the first is tenuous. So here's what I did: I encoded that presentation layer state into a JSON object and wrote it to an 8-bit clean text field in the user's profile. Every time the user changes state, I do that.
When the app loads, it loads the bulk of the data from the REST API and the presentation layer information, discards any in the presentation layer that doesn't make sense, and then starts Backbone.History and initializes the presentation. And the server doesn't need to know any details at all about how the client works. As long as the client speaks your RESTful lingo, it can save "miscellaneous things this particular client cares about" to that text field without affecting your objects or their relationship.