Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A client-side image uploader in Ember.js


Published on

Slides for the presentation "A client-side image uploader in Ember.js" given at the Belgium Ember.js Meetup on the 21st of January 2015.

Published in: Software
  • Login to see the comments

A client-side image uploader in Ember.js

  1. 1. A client-side image uploader in Ember.js January 21st 2015
  2. 2. Demo
  3. 3. Traditional method: server-side Client sends image to server as form payload Server processes image, create multiple sizes Server uploads all sizes to storage (S3 in our case)
  4. 4. High load on server
  5. 5. We found our servers are not great at resizing images Latency to upload an image was long
  6. 6. We used carrierwavegem, we were stuck with its imposed way of working
  7. 7. Hard to provide responsive images
  8. 8. Decided we needed to optimize this
  9. 9. Switched to a client-side uploader: Client does the processing and resizing Client uploads directly to S3 Server is hardly involved
  10. 10. Fear that resizing would take too long on clients. Not the case ( )Demo
  11. 11. What does client need? File API: Firefox, Chrome, Safari, IE10+ ( ) Web Workers (optional): Firefox, Chrome, Safari, IE10+ ( )
  12. 12. Models App.ImageFile = DS.Model.extend({ /* Associations */ imageVersions: DS.hasMany('imageVersion'), /* Attributes */ caption: DS.attr('string') }); App.ImageVersion = DS.Model.extend({ /* Associations */ imageFile: DS.belongsTo('imageFile'), /* Attributes */ width: DS.attr('number'), height: DS.attr('number'), url: DS.attr('string') });
  13. 13. Component {{image-uploader sizes=imageSizes imageUpdated="someActionOnController"}} Input: sizes(array of { width: ..., height: ... } objects) Event: imageUpdated
  14. 14. Serving responsive images
  15. 15. Idea: serve images adapted to the screen size. No point showing a 1920px image on smartphone
  16. 16. Look at your analytics for deciding which sizes to serve
  17. 17. How does it work? Each ImageFilehas multiple ImageVersions of different sizes After rendering, measure width and height of image container Pick best ImageVersionaccording to this (first biggest dimension) Set imageFile.get('url')as srcattribute of the <img>
  18. 18. Advantages
  19. 19. Lower latency for the client
  20. 20. No heavy processing anymore for server
  21. 21. Much for flexible than a library like carrierwave
  22. 22. Possibility to adapt resizing algorithm according to client 2500€ PC vs smartphone
  23. 23. Questions?