Large image gallery problems

1

Hi!

I’m currently working on a rather simple Webpage for my father. It is supposed to be like an online photo book, to show our personal photos to friends and family. The (simplified) model looks like this:

App.Image = DS.Model.extend({
    albums: DS.hasMany("album", {async: true}),
    imagePath: DS.attr("string")
});

App.Album = DS.Model.extend({
    images: DS.hasMany("image", {async:true}),
    children: DS.hasMany("album", {inverse: "parentAlbum", async:true}),
    parentAlbum: DS.belongsTo("album", {inverse: "children"})
});

Note that I am also using a REST API (with ActiveModelSerializer) to communicate with my database. Since installing the App on my father’s web server, I have run into a few problems:

  • My father has already uploaded more than 5000 images.
  • There are about 150-350 images per album.
  • If I side load the images with ember’s album call, then the API call takes more than 10 seconds, during which the browser hangs completely.
  • If I load the images as soon as an album is clicked, ember generates an API call like this: api/images?ids[]=1&ids[]=2&ids[]=3..., which is even more inefficient than downloading all of the images at once - the client hangs for more than 30s.
  • Even when the images are already downloaded, the App hangs for a few seconds after clicking on an album that has lots of images in it.

I honestly didn’t think that this would grow as big as it is now, but as it stands, it isn’t going to shrink any time soon. My father wants to upload all of our pictures - several decades worth. So how can I make this more efficient? The simplest and probably best solution would be if I could get ember to generate an api call that looks like api/album/:id/images when an album is clicked - is there a way I could make this work?

1 Like
2

I ran into a similar problem and found a nice solution that might work for you too. Ember Data (kinda sorta?) supports the JSON API Specification which allows you to link one-to-many relationships in the way you’re hoping.

So, in the old way your JSON data might look like:

{
  album : {
    id: 1,
    images: [1,2,3,4,5,6,7,...etc]
  }
}

When retrieving the images asynchronously, Ember Data would create a request for all of the ids in its query…which, if you have many, can create the issues you’re describing (not to mention that there is a limit to the characters a URL can contain).

Instead, you can do exactly what you suggested:

{
  album: {
    id: 1,
    links: {
      images: "album/1/images"
    }
}

And when retrieving the images, Ember Data will simply request the data from URL you specified in the links object. If you read the JSON API spec, there’s a few other ways that this can be handled, but I don’t believe that Ember Data supports them out of the box right now.

3

Hi,

Thanks for your reply, this sounds exactly like what I need! However, I have tried it out and it doesn’t seem to work. I modified my API to produce outputs like you mentioned, as well as with a href attribute like what’s in the JSON API. Is there anything else I need to change?

Edit: Nevermind, I’ve figured it out. I took out the async: true in the relationship between Album and Image. Putting it back again made it work! Thanks again for your help!

4

We have very large lists of things for the app we’re writing (with a max so far of around 5000 items), and I’ve written a bit of client-side code to lazily fetch things from the server as needed using paging and using a sparse array. I think I’ve seen a proposal for a sparse arrays in ED, so that should make this even more speedy in the future.

Sidenote: You can also make the link “images” and ED will figure it out.