Coil - Acelerando o carregamento de imagens no Android com coroutines

Slide 1

Slide 1 text

Coil: Acelerando o carregamento de imagens no Android com coroutines. ✨ Walmyr Carvalho Mobile Technical Leader @ idwall, Founder @ Kusudama Google Developer Expert, Android @walmyrcarvalho

Slide 2

Slide 2 text

Olá, pessoal! Meu nome é Walmyr Carvalho, muito prazer! :)

Slide 3

Slide 3 text

Trabalho com desenvolvimento Android há 10 anos e sou um Google Developer Experts de Android no Brasil há 4 anos. Além disso, estou muito próximo da comunidade nacional de Android, sendo organizador do Kotlin Meetup São Paulo e do Android Dev BR, a maior comunidade lusófona de Android do mundo, com mais de 6700 pessoas! Também apoio o empreendedorismo nacional, sendo mentor de Android e mobile no Google for Startups Accelerator e na ACE Startups.

Slide 4

Slide 4 text

Já ajudei a evoluir produtos mobile para empresas como Loggi, 99, Cielo, CI&T, Hotel Urbano e Globo Esporte, durante mais de 9 anos de carreira como especialista em Android. Fonte: Google Play

Slide 5

Slide 5 text

Nesse ano fundei a Kusudama, um estúdio de desenvolvimento e design de produtos digitais para Android e iOS, que tem como seu objetivo criar experiências que tratem seus usuários com respeito dentro do universo mobile.

Slide 6

Slide 6 text

Recentemente me juntei ao grande time da idwall como Mobile Technical Leader, com o objetivo de criar a próxima plataforma de identidade digital brasileira no mobile, além de soluções para empresas que buscam aumentar a confiança na identificação dos seus usuários.

Slide 7

Slide 7 text

Carregamento de imagens: Como é trabalhar com isso no Android?

Slide 8

Slide 8 text

Pergunta: como a gente faz para carregar uma imagem no Android, sem fazer nenhum uso de bibliotecas?

Slide 9

Slide 9 text

Loading de imagens com AsyncTask private class DownloadImageAsyncTask(imageView: ImageView) : AsyncTask() { var imageView: ImageView? = null init { this.imageView = imageView } override fun doInBackground(vararg urls: String?): Bitmap? { val url = urls[0] var bitmap: Bitmap? = null try { val inputStream: InputStream = URL(url).openStream() bitmap = BitmapFactory.decodeStream(inputStream) } catch (exception: Exception) { Log.e("Error", exception.message) exception.printStackTrace() } return bitmap } override fun onPostExecute(result: Bitmap?) { imageView?.setImageBitmap(result) } }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

É, no começo era meio chato mesmo. Mas, com o tempo, foram surgindo algumas bibliotecas legais para ajudar nessa tarefa tão simples:

Slide 12

Slide 12 text

Glide (Google) - GitHub Biblioteca open source de carregamento de imagens para Android, mantida pelo Google. github.com/bumptech/glide

Slide 13

Slide 13 text

Glide (Google) - GitHub Biblioteca open source de carregamento de imagens para Android, mantida pelo Google. github.com/bumptech/glide Glide.with(this) .load(url) .centerCrop() .placeholder(R.drawable.loading_spinner) .into(imageView)

Slide 14

Slide 14 text

Picasso (Square) - GitHub Biblioteca de carregamento de imagens no Android, mantida pela Square. github.com/square/picasso

Slide 15

Slide 15 text

Picasso (Square) - GitHub Biblioteca de carregamento de imagens no Android, mantida pela Square. github.com/square/picasso Picasso.get() .load(url) .resize(50, 50) .centerCrop() .into(imageView)

Slide 16

Slide 16 text

Fresco (Facebook) - GitHub Biblioteca de carregamento de imagens para Android, mantida pelo Facebook. github.com/facebook/fresco

Slide 17

Slide 17 text

Fresco (Facebook) - GitHub Biblioteca de carregamento de imagens para Android, mantida pelo Facebook. github.com/facebook/fresco // Application Fresco.initialize(this) // Usage val uri = Uri.parse(url) val draweeView: SimpleDraweeView = findViewById(R.id.image_view) draweeView.setImageURI(uri)

Slide 18

Slide 18 text

Em paralelo a isso tudo…

Slide 19

Slide 19 text

Fonte: JetBrains

Slide 20

Slide 20 text

A linguagem Kotlin começou seu desenvolvimento em 2011, tendo a sua versão 1.0 lançada há 3 anos e 4 meses atrás, em Fevereiro de 2016!

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

De acordo com o Google, diversos apps da lista Fortune 500 já estão usando Kotlin em produção, o que é um número bem impressionante e mostra o impacto da linguagem no mercado Android em geral! Fonte: developer.android.com/kotlin

Slide 23

Slide 23 text

Fonte: Android Developers, 2020

Slide 24

Slide 24 text

Além disso, o desenvolvimento Android vem ganhando com a parceria do Google com JetBrains, desde o lançamento do Android Studio até a adoção do Kotlin como linguagem oficial para o desenvolvimento Android em 2019!

Slide 25

Slide 25 text

Kotlin - Android Developers Documentação oficial e mais detalhes sobre o uso do Kotlin em aplicações Android developers.android.com/kotlin Fonte: Android Developers, 2020

Slide 26

Slide 26 text

A linguagem Kotlin também vem evoluindo numa velocidade incrível, graças ao ótimo trabalho da JetBrains e da comunidade! ❤

Slide 27

Slide 27 text

Release Kotlin 1.3 - Blog JetBrains Post oficial sobre o release da versão 1.3 do Kotlin, no blog oficial da JetBrains. tinyurl.com/kotlin-1-3-release Fonte: JetBrains

Slide 28

Slide 28 text

Tá, mas o que isso tudo tem a ver com carregamento de imagens no Android?

Slide 29

Slide 29 text

Coil: O que temos de legal?

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

O Coil (Coroutines Image Loader) é uma biblioteca de carregamento de imagens para Android que utiliza as coroutines do Kotlin por baixo dos panos! ✨

Slide 32

Slide 32 text

Coil - Documentação Documentação oficial e mais detalhes sobre o Coil. coil-kt.github.io/coil

Slide 33

Slide 33 text

A biblioteca tem como objetivo quatro pontos principais: ser rápida, leve, fácil de usar e moderna. ❤

Slide 34

Slide 34 text

Características da biblioteca • Otimizações de memória e caching, suporte a downsampling, reuso de bitmap, etc; • Suporte a Transformations e Transitions; • API simples e moderna, com suporte à coroutines, OkHttp, Okio e AndroidX (Lifecycles); • Suporte ao Proguard e R8; • Footprint baixo de method count (+/- 1500); • Requerimentos: Android X, Min. SDK 14+, Compile SDK 29+, Java 8+.

Slide 35

Slide 35 text

build.gradle android { compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all { kotlinOptions { jvmTarget = "1.8" } }

Slide 36

Slide 36 text

build.gradle.kts android { compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } } tasks.withType { kotlinOptions { jvmTarget = "1.8" } }

Slide 37

Slide 37 text

build.gradle.kts // Default implementation("io.coil-kt:coil:0.9.5") // Doesn't include Coil singleton, better for DI implementation("io.coil-kt:coil-base:0.9.5")

Slide 38

Slide 38 text

// URL imageView.load("https://www.example.com/image.jpg") // Resource imageView.load(R.drawable.image) // File imageView.load(File("/path/to/image.jpg")) Usage.kt

Slide 39

Slide 39 text

Data types suportados: • String • HttpUrl • Uri (android.resource, content, file, http e https) • File • Drawable • @Drawable res • Bitmap

Slide 40

Slide 40 text

// Async image loading imageView.load("https://www.example.com/image.jpg") { crossfade(true) placeholder(R.drawable.image) transformations(CircleCropTransformation()) } Usage.kt

Slide 41

Slide 41 text

// Under the hood, a load returns a RequestDisposable fun load(request: LoadRequest): RequestDisposable Usage.kt

Slide 42

Slide 42 text

val disposable = imageView.load("https://www.example.com/image.jpg") // Cancel the request disposable.dispose() Usage.kt

Slide 43

Slide 43 text

// Returns a Drawable val drawable = Coil.get("https://www.example.com/image.jpg") Usage.kt

Slide 44

Slide 44 text

// Under the hood, get is a suspend function suspend fun get(request: GetRequest): Drawable Usage.kt

Slide 45

Slide 45 text

Hmm… e o que são esses ImageLoaders?

Slide 46

Slide 46 text

// ImageLoaders are objects that deal with load and get // to load your images val imageLoader = ImageLoader(context) // or... val imageLoader = ImageLoader(context) { availableMemoryPercentage(0.5) bitmapPoolPercentage(0.5) crossfade(true) } ImageLoaders.kt

Slide 47

Slide 47 text

// Requests are the info needed to ImageLoaders val request = LoadRequest(context, imageLoader.defaults) { data("https://www.example.com/image.jpg") crossfade(true) } // Option: builder pattern (hi, Java) val request = imageLoader.newLoadBuilder(context) .data("https://www.example.com/image.jpg") .crossfade(true) .build() // Then, you load your image like this: imageLoader.load(request) Requests.kt

Slide 48

Slide 48 text

Daora! O que mais dá pra fazer com o Coil?

Slide 49

Slide 49 text

implementation("io.coil-kt:coil-gif:0.9.5") GifSupport.kt

Slide 50

Slide 50 text

val imageLoader = ImageLoader(context) { componentRegistry { if (SDK_INT >= P) { add(ImageDecoderDecoder()) } else { add(GifDecoder()) } } } GifSupport.kt

Slide 51

Slide 51 text

implementation("io.coil-kt:coil-svg:0.9.5") SvgSupport.kt

Slide 52

Slide 52 text

val imageLoader = ImageLoader(context) { componentRegistry { add(SvgDecoder()) } } SvgSupport.kt

Slide 53

Slide 53 text

Demonstração! Vamos ver o que como fica isso na prática?

Slide 54

Slide 54 text

Se eu quiser aprender mais sobre, onde eu posso encontrar material?

Slide 55

Slide 55 text

Coil - Documentação Documentação oficial e mais detalhes sobre o Coil. coil-kt.github.io/coil

Slide 56

Slide 56 text

Kotlin Coroutines - Documentação Documentação oficial e mais detalhes sobre Kotlin Coroutines. tinyurl.com/kotlin-coroutines-docs

Slide 57

Slide 57 text

Benchmark - Coil vs Picasso vs Glide Artigo comparando a performance do Coil, Picasso e Glide em diversos aspectos. tinyurl.com/coil-picasso-glide- benchmark

Slide 58

Slide 58 text

Android Dev BR - Comunidade Maior comunidade lusófona de Android no Slack, com mais de 6.700 pessoas! ❤✨ slack.androiddevbr.org

Slide 59

Slide 59 text

Perguntas? Ficou alguma dúvida?

Slide 60

Slide 60 text

Muito obrigado! Se tiver qualquer dúvida ou sugestão, pode falar comigo. ❤ @walmyrcarvalho /walmyrcarvalho walmyr@kusudama.com.br