Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Droidcon Montreal 2015: Optimizing Your Apps For Emerging Markets

Droidcon Montreal 2015: Optimizing Your Apps For Emerging Markets

Talk that I gave at Droidcon Montreal 2015 about ways in which you can optimize your apps for markets which are driving the growth of smartphones.

vinaygaba

May 15, 2015
Tweet

More Decks by vinaygaba

Other Decks in Technology

Transcript

  1. Optimizing Your Apps
    For Emerging Markets
    #DroidconMtl

    View full-size slide

  2. Emerging Markets
    Drive Growth

    View full-size slide

  3. Source: Mediacells via The Guardian

    View full-size slide

  4. Source: Mediacells via The Guardian

    View full-size slide

  5. 44
    36
    21
    51
    37
    11
    80
    10
    9
    25
    66
    9
    Smartphone Feature phone Multimedia phone
    Brazil Russia
    India China

    View full-size slide

  6. 1. Optimizing App Size

    View full-size slide

  7. The smaller, the better

    View full-size slide

  8. Color Filters

    View full-size slide

  9. Use Color Filter
    • Faster way to experiment with color schemes.
    • Reduce the number of assets, which in turn reduc
    the apk size.
    • Less memory used as the number of assets are
    reduced.

    View full-size slide

  10. Code
    ImageView redCircle = (ImageView) findV
    iewById(R.id.circle_red_imageview);
    ImageView greenCircle = (ImageView) findV
    iewById(R.id.circle_green_imageview);
    ImageView blueCircle = (ImageView) findV
    iewById(R.id.circle_blue_imageview);
    // we can create the color values in different ways:
    redCircle.getDrawable().setColorFilter(C
    olor.RED, PorterDuff.M
    ode.M
    U
    LTIPLY );
    greenCircle.getDrawable().setColorFilter(0xff00ff00, PorterDuff.M
    ode.M
    U
    LTIPLY );
    blueCircle.getDrawable().setColorFilter(getResources().getColor(R.color.blue),PorterDuff.M
    ode.
    M
    U
    LTIPLY );

    View full-size slide

  11. Image
    Optimizations
    Color Filters

    View full-size slide

  12. JPEG WEBP PNG GIF
    Lossy
    Lossless
    Transparenc
    y
    Animation
    WebP

    View full-size slide

  13. No Noticeable Change
    PNG
    24 kb
    WebP
    10 kb

    View full-size slide

  14. Compatibility
    • You can use the native WebP decoder on 4.2 and
    later.
    • For lower versions, use libpng to convert to PNG
    format and then use it in the app.

    View full-size slide

  15. Other Libraries
    • Use programs like OptiPNG, TruePNG and PNGC
    to significantly reduce the size of PNG images.
    • Use mozjpeg for jpeg images.
    • 5-10% size reduction
    • Won’t cause any visible changes to the images.

    View full-size slide

  16. Remove
    Unused
    Content
    Image
    Optimizations
    Color Filters

    View full-size slide

  17. Remove Unused Content
    • Use Resource Shrinking.

    View full-size slide

  18. Code
    android {
    ...
    buildTypes {
    release {
    minifyEnabled true
    shrinkResources true
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
    }
    }

    View full-size slide

  19. Remove Unused Content
    • Use Resource Shrinking.
    • Use tools like Lint and ProGuard.
    • Use Android-Unused-Resources jar file if you are
    still using Eclipse.
    https://code.google.com/p/android-unused-resources/

    View full-size slide

  20. 2. Optimizing Network
    Calls

    View full-size slide

  21. Expensive
    Data
    Flaky
    Networks
    Challenges

    View full-size slide

  22. Build for Failure

    View full-size slide

  23. Most efficient way to
    transfer is to not transfer

    View full-size slide

  24. Image Scaling

    View full-size slide

  25. Appropriate Image Size
    • Store multiple image sizes on the server
    • Low-res devices might never need a full resolutio
    image
    • Most times the smallest image size is sufficient.

    View full-size slide

  26. Checksum
    Image Scaling

    View full-size slide

  27. Client A Client B
    Server
    Checksum
    ID
    Send File ID
    Transfer File
    CS ID

    View full-size slide

  28. Code
    public static String getM
    D5EncryptedString(String encTarget){
    M
    essageDigest mdEnc = null;
    mdEnc = M
    essageDigest.getInstance("M
    D5");
    // Encryption algorithm
    mdEnc.update(encTarget.getBytes(), 0, encTarget.length());
    String md5 = new BigInteger(1, mdEnc.digest()).toString(16);
    while ( md5.length() < 32 ) {
    md5 = "0"+md5;
    }
    return md5;
    }

    View full-size slide

  29. Checksum
    • Avoid transfers as much as possible.
    • For file transfers, first compute the md5 checksum
    and send it to the server to check if it already exis
    on the server.
    • The cost to upload the entire file again can be
    avoided.

    View full-size slide

  30. Image Scaling Checksum
    Transfer in
    Blocks

    View full-size slide

  31. Transfer in blocks
    • Do data transfers in blocks.
    • Keep track of the blocks that have been transferre
    and yet to be transferred.
    • The block size can vary based on the type of
    connection.

    View full-size slide

  32. Testing for different
    networks is a pain

    View full-size slide

  33. Testing for different networks
    • Facebook recently open-sourced Augmented Traf
    Control (ATC).
    • It is a tool to simulate network conditions.
    • It can simulate 2G, Edge, 3G, and LTE networks.
    • Has multiple profiles for a lot of different countri
    http://facebook.github.io/augmented-traffic-control/

    View full-size slide

  34. 3. Optimizing for Differen
    Phones

    View full-size slide

  35. Small Screens
    Slow
    Processing
    Challenges

    View full-size slide

  36. Developing for flagship
    devices is easy

    View full-size slide

  37. Code
    int year = Y
    earC
    lass.get(getA
    pplicationContext());
    if (year >= 2013) {
    // Do advanced animation
    } else if (year > 2010) {
    // Do simple animation
    } else {
    // Phone too slow, don't do any animations
    }
    https://github.com/facebook/device-year-class

    View full-size slide

  38. Redesign
    Year Class

    View full-size slide

  39. Redesign
    • Remove features from low-end devices if they wo
    have the best user experience.
    • This could be animations, videos or even
    functionalities.
    • No feature >>> Bad feature

    View full-size slide

  40. @vinaygaba
    Questions?

    View full-size slide