Understanding Compose (Android Dev Summit '19) Android Developers English Indonesian

Understanding Compose (Android Dev Summit '19)YouTube↗ IA↗(long shot)
Science & Technology 34K views 622 likes 12 dislikes 24 Oct 2019

Android Developers 1.4M subscribers N/A YouTube↗

Click to Play Video

[MUSIC PLAYING]

LELAND RICHARDSON: Hello, my name is Leland Richardson.

LELAND RICHARDSON: Halo, saya Leland Richardson.

I'm a software engineer on the Android UI Tool Kit team.

Saya software engineer di tim Android UI Tool Kit.

More specifically, I work on the Compose Runtime and the Compose

Secara khusus, saya mengerjakan Compose Runtime dan

Compose Compiler.

So earlier this year, we open-sourced Compose

Di awal tahun ini, kami membuat open source Compose

at Google I/O. And since then, we've

di Google I/O. Sejak itu, kami telah

been developing it out in the open,

mengembangkannya secara terbuka,

as part of the Android Open Source Project.

sebagai bagian Android Open Source Project.

As app developers, the expectations

Sebagai developer aplikasi, harapan

around UI development have really grown.

seputar pengembangan UI telah berkembang.

Today, we can't really build an app

Kini kita tidak bisa membuat aplikasi

and meet the user's expectations without having a polished user

dan memenuhi harapan pengguna tanpa membuat antarmuka,

interface, animation, motion.

animasi, dan gerakan yang bagus.

All of these things are things that didn't exist 10 years ago as an expectation from the user.

10 tahun lalu semua ini belum menjadi harapan pengguna.

So Compose, we believe, is a modern UI toolkit

Compose adalah toolkit UI modern

that really sets app developers up

yang membantu developer aplikasi

for success in this new landscape.

untuk mencapai kesuksesan dalam lanskap yang baru ini.

So today, what I want to talk about

Hari ini, saya ingin bicara tentang

is, what problems specifically does Compose solve?

masalah apa yang bisa dipecahkan Compose?

What were the reasons behind some of our design decisions?

Apa alasan di balik keputusan desain kami?

And how can that help you as an app developer?

Bagaimana ini membantu Anda sebagai developer aplikasi?

Additionally, I want to talk about the mental model

Saya juga mau membahas model mental dari Compose.

of Compose. I want to talk about how you should think

Saya mau membahas cara berpikir tentang

about code that you write in Compose-- how

tentang kode yang Anda tulis di Compose --

you should shape your APIs.

cara Anda merancang API.

And then finally, I want to talk about some

Terakhir, saya mau membahas beberapa

of the implementation details and how Compose actually

detail implementasi dan cara kerja Compose

works under the hood and explain what's actually happening here.

di balik layar dan menjelaskan prosesnya.

So let's get started.

Mari kita mulai.

What problems does Compose solve?

Apa masalah yang bisa dipecahkan Compose?

And really, to frame this, what I want to talk about today

Untuk memfokuskannya, saya ingin membahas

is separation of concerns.

pemisahan masalah.

Separation of concerns is a well-known software design

Pemisahan masalah adalah prinsip desain software

yang sudah terkenal.

It's one of the fundamental things

Ini salah satu hal fundamental

that we learn as app developers.

yang dipelajari developer aplikasi.

And really, it's an age-old kind of thing.

Ini sudah ada sejak lama.

More than 40 years ago, when separation of concerns

Lebih 40 tahun lalu, saat pemisahan masalah

was originally postulated, it was actually

pertama dikemukakan, ini sebenarnya

framed in terms of two other words--

dilihat menggunakan dua kata lainnya --

coupling and cohesion.

coupling dan kohesi.

And so what I want to do today is

Hari ini saya ingin

I want to talk about separation of concerns in terms of this,

membahas pemisahan masalah dengan dua konsep ini

because I think it's a little bit more concrete

karena lebih konkret

and can help us understand exactly what we're

dan bisa membantu kita memahami topik

yang dibicarakan.

So abstractly, when we write code,

Secara abstrak, saat menulis kode,

we think of our application in terms of modules.

kita membayangkan aplikasi sebagai modul.

And we might think of our module in terms of multiple units.

Dan modul dibayangkan sebagai sejumlah unit.

So our application has several of these modules.

Jadi, aplikasi punya beberapa modul seperti ini.

And between them, we can think of these dependencies

Di antara modul, kita membayangkan dependensi

sebagai coupling.

Basically, there's ways in which parts of one module

Pada dasarnya, bagian dari sebuah modul

influence the other.

memengaruhi bagian lainnya.

And one way to think of this is--

Satu cara memahaminya adalah --

if I make a change to some code somewhere,

jika saya mengubah kode di suatu bagian,

how many other changes to other files

berapa banyak perubahan yang harus dibuat pada file lain?

am I going to have to make?

And that's coupling. And in general, what we want to do

Secara umum, kita ingin

is we want to reduce coupling as much as possible.

mengurangi coupling sebanyak mungkin.

And sometimes, coupling is actually implicit.

Terkadang, coupling tidak tampak jelas.

There's a dependency that we're relying on

Ada dependensi atau sesuatu yang kita andalkan

or something that we're relying on that's not actually very

tapi tidak begitu jelas,

clear, but something breaks because of a change

tapi saat kita mengubahnya

that happens somewhere else.

ada bagian lain yang terganggu.

On the other hand, we have cohesion.

Di sisi lain, ada kohesi.

And cohesion is really about how the units inside of a given

Kohesi adalah bagaimana unit-unit dalam modul tertentu

module belong to one another.

saling terkait.

They're related to one another.

Unit-unit tersebut saling terhubung.

And cohesion is generally seen as a good thing.

Kohesi biasanya dianggap hal yang baik.

And so one way to think of this is that separation and concerns

Jadi, kita bisa memahami pemisahan masalah

is really all about grouping as much related

sebagai cara untuk menggabungkan kode terkait

code together as possible so that our code can

sebanyak-banyaknya agar kode bisa

be maintainable over time and really scale

dipelihara seiring waktu dan diskalakan

as our application grows.

seiring dengan perkembangan aplikasi.

So framing this in terms of something more familiar to you,

Agar Anda lebih mudah dalam memahami hal ini,

let's talk about a kind of common situation.

mari membahas situasi umum.

We have a view model.

Ada model tampilan

Here on the left.

di sebelah kiri.

And then we also have an XML layout.

Juga ada XML tata letak.

And the view model is really providing data to this layout.

Model tampilan memasok data ke tata letak ini.

We have a view that we need to populate with something.

Ada tampilan yang perlu diisi informasi.

And it turns out, there's actually a lot

Dan ternyata, ada banyak

of dependencies hidden here.

dependensi yang tersembunyi di sini.

There's a lot of coupling between the view

Ada banyak coupling antara

model and the layout.

model tampilan dan tata letak.

And one of the more familiar ways that you can see this

Salah satu cara yang lebih mudah untuk menemukannya adalah

is through findViewByID.

melalui findViewByID.

What we're doing is we're trying to understand what the XML

Kita mencoba memahami apa yang ditentukan

layout is actually defining, finding

oleh XML tata letak, menemukan elemen spesifik untuk itu,

specific elements into it, and piping data through it.

dan menyalurkan data.

We might even, more subtly, depend on things

Kita mungkin sedikit lebih mengandalkan

that happen in layout XML.

proses yang terjadi di XML tata letak.

We actually might rely on a certain structure that was defined there.

Kita mungkin mengandalkan struktur tertentu di sana.

And so we have to keep these things in sync

Kita harus menyinkronkan semua

as our application grows.

seiring perkembangan aplikasi.

And really, our application can grow a lot.

Aplikasi bisa berkembang pesat.

These layout XMLs get very, very large.

XML tata letak ini menjadi sangat besar.

We have very large complicated UIs.

UI-nya jadi sangat besar dan rumit.

And they're dynamic too.

Dan juga dinamis.

So sometimes, one element might leave the view hierarchy

Sebuah elemen mungkin keluar dari

at runtime but not statically, and this

hierarki tampilan saat proses berjalan, tapi tidak statis.

leads to null reference exceptions and things

Ini menimbulkan pengecualian referensi nihil,

atau semacamnya.

So one of the fundamental things here

Salah satu hal mendasar di sini adalah

is that we have a view model defined in Kotlin.

ada model tampilan yang dibentuk dalam Kotlin,

And then our layout XML is defined in XML.

sementara XML tata letak dibentuk dalam XML.

And so because of this difference in language,

Karena perbedaan bahasa ini,

there's actually a forced line of separation

ada garis pemisah yang dipaksakan di sini

here, even though the view model and the layout XML

meski model tampilan dan XML tata letak

can sometimes be very, very intimately related.

kadang bisa terkait sangat erat.

In other words, they're very tightly coupled.

Dengan kata lain, coupling di antara keduanya sangat erat.

So what if we started to define the layout, the structure

Bagaimana kalau kita membentuk tata letak,

of our UI, in the same language?

struktur UI, dalam bahasa yang sama?

What if we chose Kotlin?

Bagaimana jika kita memilih Kotlin?

Now because we're in the same language,

Karena menggunakan bahasa yang sama,

some of these dependencies might start to become more explicit.

beberapa dependensi mungkin terlihat lebih jelas.

And even more, we can start to refactor some code and move

Kita bisa melakukan refactoring kode

things over to where they belong and actually reduce

dan memindahkan berbagai hal ke tempat seharusnya dan

some of that coupling and increase some of the cohesion.

mengurangi coupling, meningkatkan kohesi.

Now, some of you might be thinking

Anda mungkin memikirkan perkataan saya

about what I'm saying here and be a little bit skeptical.

dan merasa agak skeptis.

Am I saying that we should mix Logic with our UI?

Apa kita harus mencampur Logika dengan UI?

Well, here's the thing.

Masalahnya begini.

As framework authors, we actually can't perfectly

Sebagai pembuat framework, kami tidak bisa

separate your concerns for you.

memisahkan masalah untuk Anda.

This is something that only, really, you can do.

Hanya Anda yang bisa melakukannya.

You have parts of your logic that will not escape the UI.

Ada bagian logika yang tidak bisa keluar dari UI.

They are part of your UI.

Ia juga bagian dari UI.

And we actually can't prevent that.

Kami tidak bisa mencegahnya.

But what we can do is provide you with tools

Namun, kami bisa menyediakan alat

to make that separation easier.

untuk memudahkan pemisahan itu.

And so I'm here today to try and convince you

Di sini saya mencoba meyakinkan Anda

that that tools is a Composable function.

bahwa alat itu adalah fungsi Composable.

And actually, this might sound a little bit

Ini mungkin terdengar

less controversial than it is.

lebih tidak kontroversial dari sebenarnya.

If you take away the Composable part, it's just a function.

Jika Composable dihapus, ini hanya berupa fungsi.

And a function is something that you've been using, probably

Anda telah lama menggunakan fungsi

for a long time, to separate concerns elsewhere

untuk memisahkan masalah di mana pun

And the skills that you have acquired to

Kemampuan yang telah Anda peroleh

do that type of refactoring and writing

untuk melakukan refactoring dan menulis

reliable, maintainable, clean code--

kode bersih yang andal dan mudah dipelihara --

those same skills apply to Composable functions.

juga berlaku untuk fungsi Composable.

So today, I want to talk about the anatomy

Hari ini saya mau membahas anatomi

of a Composable function a little bit

fungsi Composable

and try to help you understand how

dan membantu Anda memahami cara

to think about these things.

So here's an example of a Composable function.

Berikut contoh fungsi Composable.

And it receives data as parameters.

Fungsi ini menerima data sebagai parameter.

We have this app data class that comes in.

Ada class data aplikasi yang masuk.

And we want to think of the parameters that

Mari kita anggap parameter yang masuk ke

come into a Composable function, really, as a mutable data.

fungsi Composable sebagai data yang bisa berubah.

It's data that-- the Composable function really

Ini data yang -- tidak boleh diubah oleh fungsi Composable.

shouldn't be changing. We should just be treating it as a transform function

Perlakukan fungsi ini sebagai fungsi transformasi

untuk data tersebut.

Now because of that, we can use any code

Karena itu, kita bisa menggunakan kode apa pun

that we want to, in Kotlin, to take that data, create,

yang kita mau di Kotlin, untuk mengambil,

drive data from it and then use that and describe our hierarchy

membuat, dan menyalurkan data dari sana, lalu menggunakannya untuk mendeskripsikan

here in this function.

hierarki di fungsi ini.

And this means that we call other Composable functions.

Artinya, kita memanggil fungsi Composable lain.

And those invocations represent the UI in our hierarchy.

Pemanggilan itu mewakili UI dalam hierarki kita.

Also, we're able to use all of the language level primitives

Kita bisa menggunakan semua primitive pada tingkat bahasa

that Kotlin already has in order to do things dynamically.

dalam Kotlin untuk bekerja secara dinamis.

So we can if statements and for loops for control flow

Gunakan pernyataan if dan for loop untuk alur kontrol

and dealing with the more complicated logic

dan menangani logika yang lebih rumit

that our UI might have.

yang mungkin ada di UI.

And then finally, I want to point out here

Terakhir, saya mau menunjukkan

that we're leveraging Kotlin's trailing lambda syntax.

pemanfaatan sintaks trailing lambda di Kotlin.

So Body here is a composable function

Body ini adalah fungsi Composable

that has a composable lambda as a parameter.

dengan lambda composable sebagai parameter.

And that ends up implying some sort of hierarchy or structure.

Ini menyiratkan sebuah hierarki atau struktur.

And so Body is something that wraps these set of items here.

Body adalah pembungkus semua set item yang ada di sini

So you've probably heard us say the word "declarative."

Mungkin Anda pernah mendengar "deklaratif".

"Declarative" is a buzzword.

"Deklaratif" adalah jargon.

But it's an important one.

Tapi kata ini penting

And I want to describe what we mean by that.

dan saya ingin menjelaskan maksudnya.

And usually, when we talk about declarative,

Saat membahas deklaratif,

we're talking about it in contrast

kita membandingkannya

to imperative programming.

dengan pemrograman imperatif.

So let's look at an example to understand this more.

Mari lihat contoh untuh memahaminya.

What if we had a UI, like a mail or a chat application, where we

Jika ada UI, seperti aplikasi email atau chat,

have an Unread Messages icon.

dengan ikon Pesan Belum Dibaca.

And so if there are no messages, we render a blank envelope.

Jika tidak ada pesan, ditampilkan amplop kosong.

If there are some messages, we put some paper in it.

Jika ada sejumlah pesan, ada kertas di dalam.

And maybe we're a little bit cutesy.

Mungkin kita mau tampil keren.

And if there are over 100 or something,

Jika ada lebih dari 100 pesan,

we show some fire and stuff like that.

muncul api dan aksesori semacamnya.

So with an imperative interface, we

Dengan antarmuka imperatif,

might write an update count function something

kita dapat menulis fungsi update hitungan

like this, where what we do is we get in the new count.

seperti ini, untuk mendapat hitungan baru.

And we go through and we figure out

Kita memeriksa dan mencari tahu

how we're supposed to poke at this UI

cara merancang UI ini

in order to make it reflect the proper state.

untuk mencerminkan state yang tepat.

And actually, there's a lot of corner cases here.

Sebenarnya ada banyak kasus luar biasa.

And this logic isn't easy, even though it's

Logika ini tidak mudah, meski ini

a relatively simple example.

contoh yang relatif mudah.

And so if you take this logic and, instead, write it

Jika mengambil logika ini dan menulisnya

in a declarative interface, you might end up

pada antarmuka deklaratif,

with something like this.

Anda mungkin mendapati ini.

And so here what we're doing is we're saying, OK,

Jadi, di sini maksudnya adalah

if the count's over 99, show fire.

jika jumlah di atas 100, tampilkan api.

If the count's over 0, show paper.

Jika jumlah di atas 0, tampilkan kertas.

If the count's over 0, render a badge with this count.

Jika jumlah di atas 0, tampilkan badge berisi hitungan.

And that is what I mean when we talk about a declarative API.

Ini maksud saya dengan API deklaratif.

And if you want to think about it-- so as a UI developer,

Jika mau memikirkannya -- sebagai developer UI

the things you need to think about--

yang perlu Anda pikirkan --

one-- given this data, what UI do I want to show?

-- dengan data ini, UI mana yang harus muncul?

How do I respond to events and make my UI interactive?

Bagaimana cara merespons peristiwa dan membuat UI interaktif?

And then here's the critical thing.

Ini hal pentingnya.

We no longer need to think about how our UI changes over time.

Kita tidak perlu lagi memikirkan perubahan UI seiring waktu.

What happens is, when we get in the data,

Yang terjadi, saat memasukkan data,

we show what it should look like.

kita memberikan tampilan yang seharusnya,

We show what the next state is.

atau state berikutnya.

And then the framework controls how to get from one state

Framework mengontrol cara beralih dari

into the other.

satu state ke state lainnya.

And so now we no longer need to think about it.

Tidak perlu lagi memikirkannya.

And that's the critical piece.

Itulah bagian pentingnya.

So describe the UI based on the provided parameters.

Jadi, deskripsikan UI berdasarkan parameter yang diberikan.

And understand that the Composable function,

Pahami bahwa fungsi Composable

it's one function definition.

adalah satu definisi fungsi,

But it describes all possible states of your UI in one place.

tetapi menjelaskan semua kemungkinan state UI di satu tempat.

It's locally defined.

Ini didefinisikan secara lokal.

And that leads into what we mean by composition.

Ini mengarahkan kita ke komposisi.

So with a name like Compose and an annotation called

Dengan nama Compose dan anotasi bernama

Composable, it seems like composition

Composable, sepertinya komposisi adalah

is an important concept here.

konsep penting di sini.

So I want to talk more about that.

Ini perlu dibahas lebih lanjut.

And really, one of the things that we're talking about here

Yang kita bahas di sini adalah

is that our model of composition differs

model komposisi kita berbeda dari

from the model of composition that Inheritance follows.

model komposisi yang diikuti Inheritance.

And they're both types of compositions.

Keduanya adalah jenis komposisi.

So what we're talking about here is a different type.

Yang kita bahas di sini jenis berbeda.

So let's go through an example for this as well.

Mari periksa contohnya juga.

Let's say we have a view.

Anggap ada tampilan (view).

And we want to create an input.

Kita mau membuat input.

And so we use View as our base class.

Kita menggunakan View sebagai class dasar.

And then we want a ValidatedInput,

Kita mau ValidatedInput,

and so we create a subclass of input to do that.

kita membuat subclass input untuk itu.

And we want a DateInput.

Kita mau DateInput.

And we want to use the validation of a date,

Kita mau menggunakan validasi tanggal,

and so we subclass ValidatedInput here as well.

kita membuat subclass ValidatedInput juga.

But then we run into a problem.

Lalu, terjadi masalah.

When we want to create a date range input, we have two dates.

Saat membuat input rentang tanggal, ada 2 tanggal.

So we want to validate two dates separately.

Kita mau memvalidasi 2 tanggal secara terpisah.

So maybe we want to subclass DateInput,

Kita mau membuat subclass DateInput,

but there are two of them.

tapi ada 2 DateInput

So we can't really do that.

jadi itu mungkin.

And so we run into this limitation around inheritance

Terdapat pembatasan inheritance sehingga

that we have to have one parent that we inherit from.

harus ada induk yang turunannya kita gunakan.

In Compose, the problem is simpler.

Di Compose, masalahnya lebih sederhana.

So when we create our ValidatedInput,

Saat membuat ValidatedInput,

we just call Input in the body of our function.

cukup panggil Input di body fungsi.

And we can decorate it with something for validation.

Kita bisa mendekorasinya dengan sesuatu untuk validasi.

Then when we create a data input,

Lalu, kita membuat input tanggal,

we end up calling ValidatedInput as well.

serta memanggil ValidatedInput.

And now, when we run into the date range input,

Saat menemukan input rentang tanggal,

we no longer have a problem.

tidak ada masalah lagi.

It's just two calls.

Ini hanya dua panggilan.

And so there is no single parent that we

Tidak ada induk yang kita gunakan untuk mengomposisi

compose onto in Compose's composition model.

dalam model komposisi di Compose.

And that solves this problem.

Masalah terpecahkan.

Another type of composition problem

Jenis masalah komposisi lain

is what I would call containment.

disebut containment.

So we want to have this fancy box, which is a view that

Kita ingin memiliki fancy box, berupa tampilan

decorates other views.

yang mendekorasi tampilan lain.

And we might have some other views here,

Mungkin ada tampilan lain di sini,

like Story and EditForm.

seperti Story dan EditForm.

And then we want to make a fancy story and a fancy edit form.

Kita ingin membuat fancy story dan fancy edit form.

But what do we do?

Kita harus bagaimana?

Do we inherit from FancyBox?

Kita turunkan dari FancyBox?

Or do we inherit from Story?

Atau turunkan dari Story?

It's unclear because, again, we need one parent

Ini tidak jelas karena kita perlu satu induk

for that inheritance chain.

untuk rantai inheritance itu.

And so Compose handles this really well.

Compose menanganinya dengan baik.

We have a Composable lambda as children.

Ada lambda Composable sebagai turunan.

And that allows us to define something

Ini memungkinkan kita menentukan sesuatu

that wraps another thing.

yang membungkus hal lain.

So now when we want to create FancyStory,

Kini kalau mau membuat FancyStory,

we just call Story inside of the children of FancyBox--

kita cukup memanggil Story di dalam turunan FancyBox --

same with FancyEditForm.

sama juga untuk FancyEditForm.

And this is Compose's composition model.

Ini model komposisi di Compose.

Another thing that Compose accomplishes really

Masalah lain yang diselesaikan Compose

well is encapsulation.

dengan baik adalah encapsulation.

This is what you should be thinking

Ini perlu dipikirkan saat

about when you make public APIs of composable functions.

membuat API publik dari fungsi composable.

And the public API of a composable

API publik dari sebuah composable

is really the set of parameters that it receives.

adalah serangkaian parameter yang diterimanya.

And those are given to it, so it doesn't have control over them.

Parameter tersebut diberikan, jadi API itu tidak punya kontrol.

They're just provided as data.

Parameter hanya disediakan sebagai data.

On the other hand, a composable can manage and create state.

Di sisi lain, composable bisa membuat dan mengelola state,

And then it passes that state along with, potentially,

lalu memasukkan state beserta beberapa data

some data that it received down to other composable

yang diterimanya ke composable lain

sebagai parameter.

Now, because it's managing that state--

Karena composable mengelola state itu --

Adam talked about this yesterday--

Adam membahasnya kemarin --

if you want to make a change to that state,

jika mau membuat perubahan pada state itu,

you can allow your children composables

Anda dapat memungkinkan composable turunan untuk memberikan

to signal that change up towards you via callbacks.

sinyal perubahan kepada Anda melalui callback.

And finally, I want to talk about something

Terakhir, saya mau berbicara tentang

called Recomposition.

And this is basically our way of saying that any Composable

Pada dasarnya, ini menjelaskan bahwa

function has this special ability

fungsi Composable punya kemampuan khusus

to get re-invoked at any time.

untuk dipanggil ulang kapan saja.

And so what this means is that, if you have this very large

Artinya, jika Anda punya hierarki Composable

Composable hierarchy--

yang sangat besar --

what happens is, when parts of your hierarchy change,

saat ada bagian hierarki yang berubah,

you don't want to have to reinvent the entire hierarchy.

Anda tidak perlu mengubah seluruh hierarki.

And so Composable functions are sort of

Jadi artinya, fungsi Composable

restartable in this way.

bisa dimulai ulang.

And you can actually leverage this to do

Anda bisa memanfaatkannya untuk

some pretty powerful things.

melakukan berbagai hal yang luar biasa.

So here's a Bind function that is maybe

Berikut ini fungsi Bind yang mungkin

something you would see today in Android development.

bisa Anda lihat dalam pengembangan Android saat ini.

So we have a live data that we want to subscribe our view to.

Ada data live yang ingin kita subscribe untuk tampilan.

And so to do that, we end up calling the Observe method

Untuk itu, panggil metode Observe

with a lifecycle owner.

dengan pemilik siklus hidup.

And then we pass in this lambda.

Lalu, masukkan lambda ini.

And that lambda is going to get called every single time

Lambda itu akan dipanggil setiap kali

the live data updates.

data live diperbarui.

And when that happens, we might want

Saat itu terjadi, kita mungkin perlu

to go and update our views.

memperbarui tampilan.

With Compose, we can actually kind of invert this relationship.

Dengan Compose, kita bisa membalik hubungan ini.

So in Compose, we would have a similar Messages Composable.

Di Compose ada Composable Message yang serupa,

And it would receive a live data.

yang dapat menerima data live.

And here, we call Compose's Observe method.

Di sini kita memanggil metode Observe pada Compose.

And Observe does two things here.

Observe melakukan dua hal di sini.

First, what it does is it unwraps that live data

Pertama, membuka data live tersebut

and returns the current value as its return value.

dan menampilkan nilai saat ini sebagai nilai yang dihasilkannya.

And that means you can use it in the surrounding

Artinya, ini bisa digunakan di body di sekitar fungsi itu.

body of the function.

Observe juga melakukan hal lain.

But it also does something else. It implicitly-- well, it subscribes

Secara implisit -- ia men-subscribe

that live data to the Composable that it's being unwrapped in.

data live ke Composable yang sedang dibuka.

And so that means that, instead of providing a lambda,

Artinya, bukannya memberikan lambda,

you just now know that this Composable function will

fungsi Composable akan

recompose every time live data changes.

dikomposisi ulang setiap data live berubah.

Looking at a simpler example of this,

Untuk melihat contoh yang lebih sederhana,

let's imagine that we have a simple counter composable.

bayangkan ada composable penghitung yang sederhana.

And so here we introduce a piece of state, which is our count.

Kita memperkenalkan sebuah state, yaitu hitungan.

And State is as a function in Compose

State adalah fungsi di Compose

that returns an instance of this state class.

yang menghasilkan instance dari class state ini.

And the state class is annotated with @Model.

Class state beranotasi @Model.

And what @Model does is it means that

every property of that class--

tiap properti dari class tersebut --

now the reads and writes to that property are observable.

yaitu operasi membaca dan menulis ke properti itu, bisa diamati.

And so what Compose does is, when you're executing

Yang dilakukan Compose adalah saat Anda mengeksekusi

your Composable function, if you read one of these model

fungsi Composable, jika Anda membaca salah satu instance model,

instances, Compose will automatically

Compose akan otomatis membuat

subscribe the surrounding scope to writes to that model.

cakupan di sekitarnya men-subscribe operasi menulis ke model itu.

So that means that this example is self-contained.

Artinya, contoh ini bisa bekerja mandiri.

We have a counter that will get re-composed every time

Ada penghitung yang dikomposisi ulang

the value of that model is changed.

setiap nilai model itu berubah.

OK, so we just talked about a lot of capabilities

Kita baru membahas banyak kemampuan

that Composable functions have.

fungsi Composable.

Let's start talking about how it's actually implemented.

Mari membahas cara implementasinya.

Before we do that, I'm going to get some water.

Sebelumnya, saya minum air dulu.

OK-- small disclaimer--

Oke -- ini penafian --

everything I'm about to say is an implementation detail.

yang akan saya katakan adalah tentang detail implementasi.

And it's subject to change.

Dan bisa berubah.

In fact, it's very likely to change.

Bahkan, sangat mungkin berubah.

But it's fun to talk about.

Tapi, ini menarik untuk dibahas.

But the important thing that I want to say

Hal penting yang ingin saya katakan adalah bahwa

is that understanding this is not required to use Compose.

memahami hal ini tidaklah wajib untuk dapat menggunakan Compose.

What I'm trying to do is to satisfy

Saya hanya mencoba memuaskan

your intellectual curiosity here.

keingintahuan intelektual Anda.

And also, if you really want to dive into this

Jika kita mau belajar lebih lanjut dan

and understand what's happening, this is a good primer.

memahami prosesnya, ini bisa menjadi awal yang baik.

So we see this @Composable annotation in a lot of slides.

Anotasi @Composable ada di banyak slide.

What is it actually doing?

Apa sebenarnya fungsinya?

I want to make an important point here,

Poin penting perlu disampaikan di sini,

which is that Compose is not an annotation processor.

Compose bukan pemroses anotasi.

How Compose works is through a Kotlin compiler plugin.

Compose bekerja melalui plugin compiler Kotlin

And we work in the tight checking phase

Kita bekerja di fase pemeriksaan ketat

and in the code generation phase of Kotlin.

dan fase pembuatan kode Kotlin.

So there's no annotation processing happening.

Jadi tidak terjadi pemrosesan anotasi.

The annotation here is actually more closely related

Anotasi di sini lebih terkait dengan

to a language keyword.

kata kunci bahasa.

So I'm going to describe it in terms of an analogy, which

Saya akan menjelaskannya melalui analogi, yaitu

is the "suspend" keyword.

kata kunci "suspend".

Kotlin's suspend keyword operates on function types.

Kata kunci suspend Kotlin bekerja pada jenis fungsi.

This means that you can have a function declaration that's

Artinya, Anda dapat memiliki deklarasi fungsi yang adalah suspend.

a suspend. We can have a lambda.

Kita bisa punya lambda.

We can have a type.

Kita bisa punya jenis.

Compose works in the same way.

Cara kerja Compose sama.

We can alter function types.

Kita bisa mengubah jenis fungsi.

And the important point here is that, when

Poin pentingnya adalah

you annotate a function type with that composable,

saat menganotasi jenis fungsi dengan composable itu,

you're changing that type.

Anda mengubah jenis tersebut.

So the same function type without the annotation

Jenis fungsi yang sama tanpa anotasi

is not compatible with the type with the annotation.

tidak kompatibel dengan jenis yang beranotasi.

It's a different type.

Jenisnya berbeda.

Additionally, suspend requires a calling context.

Suspend juga perlu konteks pemanggilan.

This means that you can only call Suspend functions inside

Anda hanya bisa memanggil fungsi Suspend

of another Suspend function.

dalam fungsi Suspend lain.

Composable works the exact same way.

Cara kerja Composable persis sama.

And this is because there's a calling

Ini karena ada objek

context object that we need to thread through all

konteks panggilan yang perlu diteruskan

of the invocations.

ke semua pemanggilan.

And so I'm going to talk about what that object is.

Saya akan membahas apa objek itu.

What is this calling context thing

Apa itu konteks panggilan

that we're passing around?

yang sering kita masukkan?

And why do we need to do it?

Kenapa itu perlu dilakukan?

Well, the implementation of this object

Implementasi objek ini

actually has some data structures in it

punya beberapa struktur data di dalamnya

that are very closely related to an existing data structure

yang terkait erat dengan struktur data yang ada

called the "gap buffer."

yang disebut "gap buffer".

Most of you probably aren't familiar with gap buffers.

Mungkin Anda tidak tahu gap buffer.

But if you work with text editors, you might know them.

Mungkin Anda tahu jika bekerja dengan editor teks

They're commonly used there.

bahwa ini umum digunakan.

So to describe what a gap buffer is--

Untuk menjelaskan gap buffer --

a gap buffer really implements a list.

gap buffer menggunakan daftar.

It's a collection interface.

Ini antarmuka koleksi.

And it has a current index or cursor.

Dan punya indeks atau kursor saat ini.

And the way we implement this is with a flat array in memory.

Cara implementasinya dengan array datar di memori.

And so that flat array is necessarily larger

Array datar lebih besar

than the collection of data that it represents.

dari koleksi data yang diwakilinya.

And so the space in that array that's unused we

Ruang di array yang tidak digunakan

refer to as the gap.

Now, as we execute our Composable hierarchy,

Saat eksekusi hierarki Composable,

we can appeal to this data structure.

kita bisa menggunakan struktur data ini.

And we can insert things into it.

Kita bisa menyisipkan berbagai hal ke dalamnya.

And so you can think of the cursor as your current point

Bayangkan kursor sebagai titik eksekusi saat ini

of execution in your hierarchy.

di dalam hierarki.

And so as we go through execution,

Saat eksekusi dilakukan,

we can insert items, insert another one, insert items.

item bisa disisipkan beberapa kali.

So now, let's imagine that we're done executing the hierarchy.

Bayangkan kita sudah mengeksekusi hierarki.

At some point, we're going to go and we're

Di titik tertentu, kita akan

going to re-compose something.

mengomposisi ulang sesuatu.

And so we're going to reset the cursor to the top.

Kita akan menyetel ulang kursor ke bagian atas.

And then we're going to go through execution again.

Lalu, kita melakukan eksekusi lagi.

And at this point, we're able to do a few things.

Di sini, kita bisa melakukan beberapa hal.

We can look at the data that's there.

Bisa melihat data yang ada di sana.

And we can do nothing, if we decide.

Tidak melakukan apa pun, jika mau.

We can update the value.

Bisa memperbarui nilai.

Or we can decide that the structure of the UI is changed.

Atau bisa memutuskan untuk mengubah struktur UI.

And then we want to make an insert.

Lalu, kita melakukan penyisipan.

So this is the important thing.

Jadi ini penting.

At this point, what we do is we move the gap

Di titik ini, kita memindahkan gap

to the current position.

ke posisi saat ini.

And now, we're able to make inserts at that point.

Kini kita bisa melakukan penyisipan pada titik ini.

So we keep going, keep making inserts.

Kemudian, kita terus melakukan penyisipan.

Now, the important thing to understand about this data

Sekarang, yang perlu dipahami tentang struktur data ini,

structure is that all of the operations that we just talked

adalah semua operasi tadi,

about-- get, move, insert, delete--

yaitu mengambil, memindah, menyisipkan, dan menghapus

all of those are constant time operations,

adalah operasi waktu konstan,

except for moving the gap.

kecuali memindahkan gap.

Moving the gap is the expensive thing.

Memindahkan gap adalah operasi yang mahal.

So the reason we chose this data structure

Alasan kami memilih struktur data ini adalah

is because we're making a bet.

karena kami bertaruh.

The bet is that UIs, on average, don't actually

Kami bertaruh bahwa UI rata-rata tidak banyak

change structure very much.

mengubah struktur.

When we have dynamic UIs, they change in terms

Ada UI dinamis, yang mengubah nilai

of the values that are there.

yang ada di sana,

But they don't actually change in structure.

tapi tidak mengubah struktur.

And when they do, they typically change in big chunks.

Jika struktur diubah, biasanya dalam potongan besar.

And so doing this gap move at that time is a good trade-off.

Memindahkan gap saat itu adalah suatu kompromi.

OK-- so let's look at this example.

Oke -- lihat contoh ini.

We have the counter here.

Ada penghitung di sini.

And this is the code that we would write.

Ini kode yang akan ditulis.

This is the example from earlier.

Ini contoh dari sebelumnya.

Well, let's see what the compiler does.

Mari lihat fungsi compiler.

So when we see this Composable annotation, what we do

Saat melihat anotasi Composable ini,

is we actually insert additional parameters into this function.

kita menyisipkan parameter tambahan.

And so we pass in this Composer object through.

Kita memasukkan objek Composer ini.

And that Composer object is what kind of contains

Objek Composer berisi

this gap buffer thing.

buffer gap ini.

You also might hear me refer to it as a slot table.

Saya juga menyebutnya dengan istilah slot table.

Just think of it as the same thing.

Bayangkan ini sebagai hal yang sama.

And so we also insert some calls in the body of this Composable.

Kita menyisipkan panggilan ke body Composable ini.

So we're going to call this composer.start method.

Kita menyebutnya metode composer.start.

And we're going to pass it in this key.

Kita memasukkannya ke dalam kunci ini.

And I'm going to talk about that in a second.

Nanti kita bahas.

Another thing that we're doing is

we're passing that Composer object

memasukkan objek Composer itu

into all of the composable invocations that are

ke semua pemanggilan composable yang ada

in the body of this function.

di body fungsi ini.

So we're threading it through.

Jadi, kita seperti menyisipkannya.

And we have these keys here.

Ada kunci ini di sini.

So these are these arbitrary looking integers.

Ini bilangan bulat yang tampak acak.

But the way to think about this correctly

is that this represents, like, a hash of the source position

ini mewakili hash dari posisi sumber

that this call site represents.

yang diwakili situs panggilan ini.

So this is sort of unique to each call site.

Ini unik untuk tiap situs panggilan.

So when we go through the execution of this composable,

Saat mengeksekusi composable ini,

we go through and we call Start.

kita memanggil Start.

And Start inserts a group object into the slot table.

Start menyisipkan objek grup ke slot table.

Selanjutnya, kita memanggil State.

We call State. State inserts its own group object.

State menyisipkan objek grup sendiri.

And then the value that state returns is a state instance.

Lalu nilai yang dihasilkan state itu adalah instance state,

That also stores that into the slot table.

yang juga menyimpannya ke slot table.

Then we move onto Button.

Kita melanjutkan ke Button.

Button is going to store a group as well.

Button juga menyimpan grup.

And then it's going to store each of its parameters.

Lalu, menyimpan tiap parameternya.

And Button might have this arbitrary implementation.

Button mungkin punya implementasi arbitrer.

We don't really know.

Kita kurang tahu.

And it's going to also use the slot table during that time.

Ini juga menggunakan slot table saat itu.

And when it's done, we're going to then call composer.end.

Jika selesai, kita memanggil composer.end.

And so you can see here that this data structure

Lihat bahwa struktur data ini

is holding all of these objects from this whole composition.

menyimpan semua objek dari seluruh komposisi.

And it's sort of the entire tree in execution order.

Ini semacam struktur pohon urutan eksekusi,

It's like a depth first traversal of the tree.

seperti algoritme depth first traversal dari pohon ini.

Now, all of those group objects that we just saw--

Semua objek grup yang baru kita lihat --

what are they there for?

apa gunanya di sana?

They're taking up a lot of space, right?

Semua objek itu menghabiskan ruang.

So actually, those group objects are really

Sebenarnya, objek grup itu sangat penting

important to manage the moves and the inserts that might

untuk mengelola pemindahan & penyisipan

happen with the dynamic UI.

yang mungkin terjadi dengan UI dinamis.

But we're a compiler.

Tapi kita adalah compiler.

So we actually know what code looks like that changes

Kita tahu seperti apa kode yang akan mengubah

the structure of your UI.

struktur UI Anda.

So we can conditionally insert those groups.

Kita bisa menyisipkan grup itu secara bersyarat.

And most of the time, we find that we don't actually

Biasanya, kita tidak memerlukannya.

need them. So we don't actually have to insert that many groups

Kita tidak harus menyisipkan grup sebanyak itu

into the slot table.

To show an example of a case where we do,

Sebagai contoh kasus,

let's look at some conditional logic here.

mari lihat logika kondisional di sini.

So here's a Composable.

Ini Composable.

It has this getData function that returns some result

Ada fungsi getData yang menampilkan hasil

and renders a loading composable in one case and a header

dan merender composable pemuatan di satu kasus,

and a body in another case.

serta header dan body di kasus lain.

So here, we see that we're inserting separate keys

Di sini, kita menyisipkan kunci terpisah

for the first branch of the if statement

untuk cabang pertama pernyataan if

and the second branch.

dan cabang kedua.

And when we go through and execute

Selanjutnya, kita mengeksekusinya

it-- let's say, the first time this runs, the result is null.

-- saat pertama berjalan, hasilnya nihil.

And so then we go and we run the loading screen.

Lalu, kita menjalankan layar pemuatan.

Now the second time we run it, let's

Saat kedua kali dijalankan,

pretend that feed item is the result here.

anggap item feed adalah hasilnya.

So it's not a null.

Jadi, tidak nihil.

And at this point, we're going to go into the second branch

Di titik ini, kita masuk cabang kedua

of the if statement.

And so this is where the interesting thing happens.

Di sini terjadi hal menarik.

At this point, we call composer.start.

Di titik ini, panggil composer.start.

And it has a group with key 456.

Dan objek ini punya grup dengan kunci 456.

And it sees that the group in the slot table of 123

Objek ini juga melihat bahwa grup 123 di slot table tidak cocok.

doesn't match. So now it knows that the UI has changed in structure.

Jadi ia sekarang tahu bahwa UI telah berubah struktur.

So what we do is we move the gap to the current cursor position.

Kita memindahkan gap ke posisi kursor saat ini.

And then we extend the gap across the UI

Kita meluaskan gap di UI

that was there before.

yang ada di sana sebelumnya.

So we kind of get rid of it.

Kita menyingkirkannya.

And now we insert the new UI, the header and the body.

Lalu kita menyisipkan UI, header, dan body baru.

And so one way to look at this is the overhead of the if

Kita bisa melihat bahwa overhead pernyataan if,

statement, in this case, was a single slot entry

dalam hal ini, adalah satu entri slot

in the slot table.

And it was this group.

Itulah grup ini.

And by just inserting this single group, what this does

Dengan menyisipkan satu grup ini,

is this allows us to have arbitrary control

kita punya alur kontrol arbitrer

flow in our UI and allows us to manage it and appeal

di UI dan bisa mengelolanya dan menggunakan

to this cache-like data structure,

struktur data yang seperti cache ini,

while we move through the execution of the UI.

saat melanjutkan eksekusi UI.

And so this concept is something that we

call Positional Memoization.

disebut Positional Memoization.

And Positional Memoization is a new thing.

Positional Memoization adalah hal baru.

But this is the concept that Compose is built from,

Namun inilah konsep yang mendasari pembangunan Compose,

from the ground up.

dari bawah ke atas.

And I want to talk about what this means.

Saya mau membahas artinya.

So memoization is kind of a fancy sounding word.

Memoization terdengar agak keren.

Normally, we have global memoization.

Biasanya, ada global memoization.

And what memoization means is that we

Memoization artinya

are caching the result of a function

menyimpan cache hasil fungsi

based on the inputs of that function.

berdasarkan input fungsi tersebut.

So an example of positional memoization

Contoh positional memoization

here might be-- we have this computation

adalah -- ada komputasi

that we're doing instead of a Composable function.

yang kita kerjakan, bukan fungsi Composable.

We're taking in some string items and a query.

Kita mengambil beberapa item string dan kueri.

And we're performing some sort of a filter operation on it.

Kita melakukan operasi filter di situ.

We can wrap this calculation in a call to memo.

Kita bisa menggabungkan kalkulasi ini dalam panggilan ke memo.

And we can pass in items and query to that call.

Kita bisa memasukkan item dan kueri ke panggilan itu.

And so memo is something that knows how

to appeal to the slot table.

menggunakan slot table.

And what it does is it looks at items.

Memo melihat item.

And there's nothing there.

Dan tidak ada apa-apa di sana.

This is the first time we're running it.

Ini pertama kali kita menjalankannya.

So all it does is just store it.

Jadi ia hanya menyimpannya.

And we look at query.

Kita melihat kueri.

Kita menyimpannya.

And then we run the calculation.

Lalu, kita menjalankan kalkulasi.

And we store the result. And then we pass it back.

Kita menyimpan hasil. Lalu kita memasukkannya kembali.

So that was fine.

Proses ini tidak masalah.

But the second time we execute it,

Tapi saat kedua kita mengeksekusinya,

that's when the interesting thing happens.

terjadi hal menarik.

So when we execute it again, memo

Saat kita mengeksekusinya lagi,

goes and looks at the new values that are being passed in

memo melihat nilai baru yang dimasukkan

and compares them with the old values.

dan membandingkannya dengan nilai lama.

And if neither of them have changed, then

Jika tidak ada yang berubah,

we can skip the calculation and just return

kita bisa melewati kalkulasi dan hanya

the previous result. And so that's positional memoization.

menampilkan hasil sebelumnya. Inilah positional memoization.

But the interesting thing here is that it was really cheap.

Yang menarik, ini sangat murah.

We only had to store one previous invocation.

Kita hanya menyimpan satu panggilan sebelumnya.

And this calculation could happen all over your UI.

Kalkulasi ini bisa terjadi di seluruh UI.

And you're storing it positionally.

Anda menyimpannya sesuai posisi.

So it only stores it for that location.

Penyimpanan dilakukan hanya untuk lokasi itu.

And this is the signature of the Memo function.

Inilah ciri khas fungsi Memo.

Memo here can take any number of inputs

Memo bisa mengambil berapa pun jumlah input

and then some sort of calculation function.

dan suatu fungsi kalkulasi.

But there is an interesting degenerate case here,

Tapi ada kasus degenerasi yang menarik,

which is when there are zero inputs.

yaitu saat tidak ada input.

One of the things we can do is we can deliberately

Kita bisa dengan sengaja

misuse this API.

menyalahgunakan API ini.

We can memoize an intentionally impure calculation,

Kita bisa mememoisasi kalkulasi yang sengaja tidak murni,

like, say, math.random.

seperti math.random.

And if you were doing this with global memoization,

Jika Anda melakukannya dengan global memoization,

this would make no sense.

ini tidak masuk akal.

But with positional memoization, it

Dengan positional memoization,

ends up taking a new semantic.

ini seperti mengambil semantik baru.

So here we have math.random, which is memoized.

Di sini ada math.random, yang dimemoisasi.

And we store in this value x.

Kita menyimpan nilai x.

And for every time we use App in our composable hierarchy,

Tiap kali menggunakan App di hierarki composable,

there will be a new math.random value that's returned there.

akan ada nilai math.random baru yang ditampilkan di sini.

But every single time that composable re-composes,

Tiap kali composable itu mengomposisi ulang,

it will be the same math.random return value.

nilai math.random yang ditampilkan sama.

So what this gives rise to is a persistence.

Yang dimunculkannya adalah persistensi.

And that persistence ends up giving rise to state.

Persistensi akhirnya memunculkan state.

And this is what the State function actually is.

Inilah sebenarnya fungsi State.

State is just a call to memo around the State constructor.

State hanya panggilan ke memo di seputar konstruktor State.

And so what that means is that you'll

Artinya, Anda akan

get the same instance the state across every invocation of it.

mendapat instance state yang sama tiap kali dipanggil.

And that's what we want.

Itulah yang kita inginkan.

So let's move into talking about the way

Berikutnya, kita membahas cara

that we store the parameters to Composable functions.

menyimpan parameter ke fungsi Composable.

So here, we have a Google Composable,

Di sini ada Google Composable,

which takes in a number.

yang memasukkan nomor.

This is kind of a silly example.

Contoh ini agak konyol.

But we're calling an address composable.

Namun, kita memanggil composable alamat.

And we're just rendering an address here.

Kita hanya merender alamat di sini.

So we're calling a few text nodes underneath it.

Kita memanggil beberapa node teks di bawahnya.

When we look at how this data ends up

Jika melihat data ini akhirnya disimpan

getting stored in the slot table,

we end up seeing some redundancies.

kita melihat beberapa redundansi.

So the Mountain View in California

Mountain View di California

that we added in the address invocation

yang ditambahkan di pemanggilan alamat

ends up getting stored again in the underlying text

disimpan lagi dalam pemanggilan teks

yang mendasarinya.

So it turns out that we can actually

Ternyata kita bisa

get rid of this redundancy by adding another parameter

menghilangkan redundansi dengan menambahkan paramater lain

to Composable functions at the compiler level.

ke fungsi Composable di tingkat compiler.

So here we have the static parameter.

Di sini ada parameter statis.

And this is a bit field that indicates whether or not

Ini kolom bit yang menandakan apakah

a given parameter is known by the runtime to not change.

parameter tertentu diketahui tidak berubah oleh runtime.

And if it's known to not change, then there's

Jika diketahui tidak berubah, kita tidak

no need for us to store it.

perlu menyimpannya.

So we can see here in this Google example,

Di contoh Google ini,

we can pass a bit field that says, none of these parameters

kita bisa memasukkan kolom bit yang menunjukkan,

are ever changing.

tidak ada parameter yang berubah.

And then in Address, we can do the same thing

Di Address, kita bisa melakukan hal yang sama

and pass it into text.

dan memasukkannya ke teks.

Now all of this bit wise logic is hard to read.

Semua logika bit ini sulit dibaca.

It's confusing.

Ini membingungkan.

And there's no intention of you understanding this.

Ini tidak dimaksudkan untuk Anda pahami.

Compilers are good at this.

Compiler ampuh dalam hal ini.

And this is exactly the kind of thing you want a compiler doing.

Inilah tugas yang perlu dilakukan compiler.

So let's go back to our top level example here.

Mari kembali ke contoh utama kita.

And we can see this redundant information

Kita bisa melihat info redundan ini

that we no longer need to store.

yang tidak perlu lagi disimpan.

But additionally, there are all these values

Selain itu, ada nilai-nilai yang konstan di sini.

that are constant here. These are static values.

Ada nilai statis.

It turns out, we don't need to store them either.

Ternyata kita juga tidak perlu menyimpannya.

And so this entire hierarchy is actually purely determined

Seluruh hierarki ini sepenuhnya ditentukan

by this one number parameter.

oleh parameter satu nomor ini.

And that ends up being the only value that we need to store.

Nilai ini satu-satunya yang perlu disimpan.

But we can actually go further.

Tapi kita bisa bertindak lebih lanjut.

So we can generate code that understands

Kita bisa membuat kode yang memahami

that number is the only thing that's going to change.

bahwa hanya nomor yang akan berubah.

And so what we can say is, well, if number hasn't changed,

Artinya, jika nomor tidak berubah,

don't bother doing anything else.

tidak perlu melakukan hal lain.

Just skip this invocation.

Lewati saja pemanggilan ini.

And the composer knows exactly how far

Composer tahu persis cara mempercepat eksekusi

to fast forward the execution to resume

untuk kemudian mulai menjalankan

exactly where it needs to.

operasi yang perlu.

So the final concept I want to talk about

Konsep terakhir yang ingin saya bahas adalah

is explaining how this recomposition happens

menjelaskan bagaimana komposisi ulang yang

that we talked about earlier.

yang kita bahas sebelumnya terjadi.

So going back to this counter, the generated code

Kembali ke penghitung ini, kode yang dihasilkan

that we would create for this counter

yang perlu kita buat untuk penghitung ini

has a composer start and end, like we've seen.

punya awal dan akhir composer, seperti yang kita lihat.

And what I mentioned earlier is that, whenever we execute

Saya tadi mengatakan bahwa setiap kali mengeksekusi

Counter, the runtime understands that when

Counter, runtime memahami bahwa saat

I call count that value, I'm reading the property of an app

memanggil count.value, saya membaca

model instance.

properti instance model aplikasi.

And so at runtime, what happens is whenever we call end,

Pada runtime, tiap kali kita memanggil end,

we optionally return a value.

kita secara opsional menampilkan nilai.

And then we can call an update scope method on that value,

Kita bisa memanggil metode update scope di nilai itu,

basically, with a lambda that tells the runtime,

dengan lambda yang memberi tahu runtime

here's how to restart this Composable if you need to.

cara memulai ulang Composable ini jika perlu.

And so this is sort of equivalent to that lambda that that live data would be receiving otherwise.

Ini seperti lambda yang diterima oleh data live.

And the reason that this question mark is here--

Alasan adanya tanda tanya ini --

the reason that this is nullable--

penyebab nilai ini bisa dinihilkan --

is because, if we don't actually read any model

adalah jika kita tidak membaca objek model

objects during the execution of Counter, then

selama eksekusi Counter,

there's absolutely no reason to teach the runtime how

sama sekali tidak ada alasan untuk mengajari runtime

to update this, because we know it never will update.

cara mengupdate, karena kita tahu ini tidak akan diupdate.

So some closing thoughts--

Sebagai penutup --

I want to emphasize again that this is still really,

saya mau menekankan lagi bahwa ini masih sangat awal

really early and, more importantly, that this

dan, yang lebih penting lagi,

isn't production ready.

ini belum siap untuk produksi.

And we really mean that.

This is a really big undertaking.

Ini pekerjaan besar.

And we're really still exploring a lot of these options.

Kami masih mempelajari banyak opsi ini.

And a lot of the things I just talked about

Banyak hal yang baru saya bicarakan

are pretty new explorations on our side.

adalah eksplorasi baru di pihak kami.

And so I think it's pretty interesting.

Menurut saya ini menarik.

But just know that a lot of these things

Perlu diketahui, masih banyak

are still happening.

yang perlu dilakukan.

And we think there are some really, really powerful ways

Menurut kami ada beberapa cara efektif

that we can really gain some performance in a world

untuk mencapai performa yang bagus

where we have Composable functions.

dengan fungsi Composable.

But we're still exploring that.

Tapi kami masih mempelajarinya.

The other thing I want to point out

Hal lain perlu disampaikan,

is that everything we just talked

semua yang baru dibahas

about that's being done by the compiler

yang sedang dilakukan oleh compiler,

is required for correctness.

diperlukan untuk ketepatan.

And there's an interesting oversight

Ada kekeliruan yang menarik

where code that uses @Composable and things like that

di mana kode yang menggunakan @Composable dan semacamnya

compiles just fine with the old Kotlin compiler.

dapat melakukan kompilasi tanpa masalah dengan compiler Kotlin lama.

There are some blogs out on the internet

Ada beberapa blog di internet

that say, hey, you don't need Android Studio for--

yang bilang, Anda tidak perlu Android Studio --

karena berbagai hal.

So what I ask is that you all be careful.

Saya meminta Anda berhati-hati.

This was an oversight on our part,

Ini kekeliruan di pihak kami,

and we're exploring how to make this less of a foot gun.

kami sedang mempelajari cara menguranginya.

But really, your code is not correct

Kode Anda tidak tepat

unless you're using this compiler,

kecuali Anda menggunakan compiler ini,

basically, a new version of Android Studio 4 or higher.

versi baru Android Studio 4 atau yang lebih tinggi.

So just be very careful with that.

Jadi, berhati-hatilah.

And then finally, I want to give a shout out to the Kotlin Lang

Terakhir, saya mau menyebut slack channel

There's a Compose channel in that community.

Ada channel Compose di komunitas itu.

It's very active.

Mereka sangat aktif.

A lot of folks from the Compose team

Banyak orang dari tim Compose

are on there, including myself.

ada di sana, termasuk saya.

And if you do want to get involved

Jika Anda mau terlibat

and learn more about these things or even help out,

dan mempelajari lebih lanjut atau bahkan membantu,

that's a great place to start.

channel itu tempat yang tepat.

Also, another shout out-- we do a lot

Selain itu -- kami melakukan banyak

of UX studies around Compose and APIs we're choosing.

studi UX tentang Compose dan API yang kami pilih.

And we're really looking for more volunteers to help us out.

Kami sedang mencari sukarelawan untuk membantu.

So upstairs at the Compose sandbox,

Di lantai atas, di sandbox Compose,

there's a way to sign up if you're interested.

ada cara untuk mendaftar jika Anda tertarik.

[SUARA TEPUK TANGAN]

[MUSIC PLAYING]

Similar videos:

Keynote (Android Dev Summit '19)
Android Developers
188.6K views 2K likes 140 dislikes 23 Oct 201957% match

Android Dev Summit 2019 - Watch all of the talks now!
Android Developers
3.6M views 103 likes -1 dislikes 26 Nov 201934% match

Thinking in Compose
Android Developers
42.2K views 1.2K likes 29 dislikes 26 Aug 202033% match

Learning Functional Programming with JavaScript - Anjana Vakil - JSUnconf
JSConf
2.2M views 47.5K likes 1.5K dislikes 14 Jun 201631% match

Monitoring and Improving Real-World Stability and Performance (Android Dev Summit '19)
Android Developers
1.8K views 21 likes 2 dislikes 24 Oct 201929% match

Singly-Linked Lists
CS50
35.5K views 176 likes 8 dislikes 14 Oct 201529% match

What the heck is the event loop anyway? | Philip Roberts | JSConf EU
JSConf
1.8M views 49.4K likes 323 dislikes 09 Oct 201428% match

Data Types
CS50
61.8K views 185 likes 7 dislikes 07 Oct 201528% match

PHP Syntax
CS50
15.3K views 82 likes 6 dislikes 03 Nov 201527% match

But how does bitcoin actually work?
3Blue1Brown
16.5M views 376K likes -1 dislikes 07 Jul 201727% match

🔥 Aprende fácil a identificar la fuente Stand By en los TV LCD.

586.3K views 5.8K likes 338 dislikes 03 Feb 201627% match

Clash of Clans - Clash Talk Q&A - Episode 2
Clash of Clans
401.8K views 9.2K likes 732 dislikes 20 Nov 201726% match

Design at scale with Web Components (and ducks)
Chrome for Developers
14.9K views 389 likes 49 dislikes 22 Dec 202026% match

JetBrains Connect, Ep. 1 – "Moving Java Forward" with Brian Goetz and Trisha Gee
JetBrains
22.9K views 288 likes 31 dislikes 07 Dec 202026% match

Gradient descent, how neural networks learn | Chapter 2, Deep learning
3Blue1Brown
3.9M views 87K likes 639 dislikes 16 Oct 201726% match

Innovating to zero! | Bill Gates
TED
3.9M views 31.4K likes 12K dislikes 20 Feb 201026% match

Rajesh Rao: Computing a Rosetta Stone for the Indus script
TED
1M views 21.3K likes 906 dislikes 28 Jun 201126% match

Artificial intelligence and algorithms: pros and cons | DW Documentary (AI documentary)
DW Documentary
10.3M views 79.4K likes -1 dislikes 26 Sep 201926% match

Visualizing the Riemann zeta function and analytic continuation
3Blue1Brown
3M views 62.1K likes 815 dislikes 09 Dec 201626% match

How we take back the internet | Edward Snowden
TED
3.1M views 45.2K likes 1.2K dislikes 18 Mar 201426% match

Crystal Widjaja - Pemanfaatan Big Data di dalam Bisnis GO-JEK | BukaTalks
Bukalapak
263.8K views 3.5K likes 77 dislikes 14 Oct 201725% match

Hablemos de Adoración con Elevation Worship
Secuencias.com
4.9K views 384 likes 2 dislikes 29 Jul 202025% match

Nicole Holliday - Sociolinguistics - Duocon 2020
Duolingo
5.7K views 113 likes 6 dislikes 26 Sep 202025% match

Now Go Build with Werner Vogels – S1E2 Singapore | Amazon Web Services
Amazon Web Services
686.9K views 432 likes -1 dislikes 27 Mar 201925% match

Embeddings
Google Open Online Education
12.6K views 72 likes 28 dislikes 12 Oct 201825% match

DNA
Khan Academy
1.7M views 6.7K likes 293 dislikes 22 Sep 200925% match

Announcing the #AndroidDevChallenge: Jetpack Compose
Android Developers
13.6K views 305 likes 5 dislikes 24 Feb 202124% match

The next step in modern Android development: Jetpack Compose
Android Developers
6.6K views 109 likes 6 dislikes 24 Feb 202122% match

Fireside Q&A with Dave Burke
Android Developers
3.6K views 112 likes 4 dislikes 01 Mar 202122% match

Now in Android: 35 - Jetpack Compose Beta, Android 12, WorkManager, and more!
Android Developers
10.6K views 311 likes 10 dislikes 04 Mar 202122% match

Settings Privacy About Contact Donate