Ngobrolin Web Offline di DevFest Bogor

1:48Nanti rencananya kita akan, ini sesinya akan di depan.

1:53Dan akan kita aktifkan juga di replay.

1:56Di hari Selasa Malam tentunya.

1:58Oke, kita gak perlu kenalin diri kan ya?

2:00Udah perlu kenalin diri.

2:02Udah kenal ya?

2:04Oh iya tadi juga udah.

2:06Pertanyaan langsung?

2:08Bukan.

2:09Ntar, ntar.

2:10Dan bagi teman-teman yang belum pernah menonton acara kita.

2:15Itu di setiap Selasa Malam pukul 8.00.

2:19Di YouTube Live di channelnya Mas Riza.

2:23Dengan topiknya ngobrolin web.

2:26Cari aja ngobrolin web di YouTube setiap Selasa Malam pukul 8.00.

2:30Dan kita selalu bahas mengenai all about web.

2:34Pastinya.

2:39Ya, ini pertanyaan pertama langsung aja ya. Kita jawab ya.

2:42Mau bertanya apakah ada performance dulu?

2:45Join us at Slido.

2:47Terus untuk Eka, ada pertanyaan tentang performance cost dalam kebunan transisi API?

2:52Ya, jadi kalau performance cost pasti ada ya.

2:55Apapun yang kita lakukan pasti ada performance cost.

2:59Tapi jauh lebih rendah dari kalau kita pakai animation library yang sekarang.

3:06Alasannya itu tadi karena banyak hal yang sudah dihandle oleh built-in browser features.

3:12Nah, kalau untuk melakukan animasi, itu kan sebagian property animasi itu

3:19udah punya jalur sendiri, enggak jalan di main thread.

3:23Cuma kalau untuk menganimasi size, width, dan height.

3:28Teber dan panjang.

3:30Itu ya baik pakai few transitions API atau bukan.

3:34Itu sampai sekarang memang masih dijalankan di main thread.

3:38Tapi kabar positifnya untuk few transitions yang menganimasi lebar,

3:44punya ukuran, lebar dan panjang.

3:46Karena itu umum banget kan.

3:48Misalnya kita menclek thumbnail, jadi besar.

3:50Itu kan pasti menganimasi lebar.

3:52Sekarang masih jalan di main thread.

3:54Ke depannya ada rencana untuk bisa memindahkan itu dari main thread.

4:00Itu detailnya bisa dilihat di blog Chrome Developer yang tadi ada linknya.

4:08Ini pertanyaannya enggak harus seputar materi kita tadi ya,

4:16bebas ya, nanti tentang web, tentang apa aja boleh.

4:18Tapi tentang web, jangan tanya ke alaman.

4:22Nanti kita...

4:24Oke, pertanyaan berikutnya untuk Ivan.

4:28Berdasarkan tentang BFcache.

4:30Apa bedanya BFcache dan cache biasa?

4:32Bedanya BFcache dengan cache.

4:36Kalau cache itu, yang di cache itu...

4:38Back forward cache.

4:44Jadi di back forward cache yang disimpan adalah snapshot dari halaman tersebut.

4:50Snapshot ya, jadi sudah hasil yang ke render.

4:56Kalau cache biasa, seperti...

5:00Apa ya cache biasa ya?

5:02Cache di browser itu...

5:04Browser, browser...

5:06Bukan.

5:08Di web biasa kan ada cache biasa.

5:10Cache interface, cache API.

5:12Itu yang disimpan di source-nya.

5:14Misalnya HTML-nya, tetapi bukan hasil render-nya.

5:18Jadi CSS-nya disimpan di cache.

5:22JS-nya di cache.

5:24Jadi waktu di-load, cuma di-load dari memori.

5:26Tapi tidak di-load dari origin.

5:30Atau HTML tidak di-load lagi dari origin.

5:32Cuma belum di-render.

5:34Kalau back forward cache,

5:36dia sudah hasil render-nya.

5:38Jadi kayak snapshot.

5:40Sudah tinggal ditampilkan.

5:42Bahkan nggak perlu di-render.

5:44Jadi tinggal ditampilkan saja.

5:46Kayak snapshot virtual memory gitu ya.

5:50Dengan state yang terbaru, terakhir di CSS juga?

5:54Nggak, nggak.

5:56Jadi state-nya seperti sama.

5:58Simpan.

6:00Waktu nanti ditinggal.

6:02Terus waktu di-pack, balik.

6:04Begitu lagi, gitu.

6:06State terakhir.

6:08Dan kalau teman-teman ada pertanyaan lanjutkan, silahkan ya.

6:14Kalau menurutku, ini bagian dari user experience juga nggak sih?

6:19Itu kan mirip yang view transition tadi.

6:21Sebetulnya kalau kita ngomong

6:23strictly cara kerja browser,

6:25kan memang expected

6:27kalau kita nge-update Elementum,

6:29tiba-tiba ada.

6:31Tapi kalau user secara bawah sadar,

6:33expect-nya visual itu datang dari somewhere.

6:37Terus back forward cache juga gitu.

6:39Mungkin user kan expect-nya

6:41ngisi form name.

6:43Atau infinite scrolling,

6:45load more, load more, sampai pos-nya banyak.

6:47Terus ditinggal untuk membuka suatu pos.

6:50Nah, pas dia pencek back,

6:52kan kalau dari logika browser,

6:54itu kan kayak sebetulnya load baru lagi,

6:56harusnya dari atas lagi.

6:58Cuma kalau dari UX, dari logika user,

7:01tadi ditinggalin di situ,

7:03pas balik kan harus kayak gitu lagi.

7:05Jadi nganggepnya kayak fisik ya,

7:07kayak analogik fisik.

7:09Kita ninggalin kamar kita atau rumah kita,

7:11semua bareng-barengnya kayak gini.

7:13Nggak mungkin pas kita balik,

7:15tapi udah rapi semua.

7:17Kecuali kemalingan.

7:19Sekarang saya lagi ya,

7:27dari Mas Badruddin.

7:29Bagaimana mengukur dan mengantar

7:33performance Core Web Vitals secara berkelanjutan?

7:37Dan apakah metric khusus yang menjadi fokus utama Anda?

7:43Core Web Vitals sudah pasti ada 3.

7:45Namanya juga Core,

7:47LCP,

7:49CLS,

7:51dan INPEC yang baru,

7:53menggantikan first input delay.

7:55Kalau vital-vital yang lain sebenarnya ada.

7:59FCP, first content full pain,

8:01time to first byte,

8:03terus kemudian time to interactive,

8:05ada banyak.

8:07Cuma kalau dari Core Web Vitals,

8:09yang paling utama,

8:11ini ya semuanya,

8:13tiga-tiganya perlu dipantal.

8:19Karena itu ketiga hal ini,

8:21kalau secara generalnya dilihat,

8:25kalau largest content full pain itu

8:27adalah seperti kecepatan ngerender-nya,

8:29kecepatan user melihat,

8:31jadi speed,

8:33LCP itu tentang speed,

8:35CLS itu tentang stability,

8:39dan INPEC itu mengenai responsive,

8:43bukan responsive size ya,

8:45tetapi responsiveness,

8:47jadi secepat apa interaksi user

8:51atau browser bisa menampilkan

8:55atau mengeksekusi interaksi yang terjadi,

8:57seperti touch, scroll, atau click.

9:01Jadi ketiganya penting.

9:03Dan untuk monitor-nya,

9:07ada yang berbayar, ada yang free,

9:09yang free ya pakai aja,

9:11yang di Search Console dari Google,

9:13Google Search Console,

9:15yang berbayar ada banyak,

9:17ada Matrix, segala macam,

9:19itu bisa kayak continuous monitoring.

9:23Ada CICD-nya juga ada?

9:25CICD, jadi kalau dari Lighthouse,

9:27ada Lighthouse CI juga.

9:35Apakah semua browser mendukung bfcache,

9:37dan apakah ada batasan atau situasi

9:39di mana bfcache tidak berfungsi dengan baik?

9:41Yes, semua browser sudah mendukung bfcache,

9:453 major browser sudah mendukung,

9:47dan ada hal apa yang menyebabkan bfcache

9:51tidak bekerja dengan baik,

9:53itu tadi sudah saya sampaikan,

9:55ada 2 yang paling umum,

9:57kalian menggunakan Windows.unload,

9:59atau Unload API,

10:01kedua kalian menambahkan header no store,

10:06no-store,

10:08kalau ada header no store,

10:10artinya browser tidak akan simpan

10:12di browser cache, sorry bfcache.

10:31Bahasa panggilan-panggilan yang bagus

10:36untuk website,

10:38website itu berarti kalau front-end

10:40sudah pasti potential CSS Javascript,

10:43atau kalau mau lebih modern,

10:45mungkin TypeScript,

10:47tapi untuk band-end, bebas,

10:49teman-teman mau pakai PHP bisa,

10:51pakai Go boleh, pakai Python, Ruby,

10:54band-end itu bisa,

10:56jadi kalau untuk front-end,

10:58mau gak mau harus belajar Javascript,

11:00atau turunannya,

11:02TypeScript dan teman-teman,

11:04juga dibina dengan CSS.

11:06Mungkin itu ya.

11:08Pertanyaan berikutnya,

11:09saya ingin membuat website portfolio,

11:11karena banyak media,

11:13jadi yang misalnya harus memberikan ke saya

11:16adalah loadingnya menjadi cepat.

11:18Ini pertanyaan kenapa ternyata aneh?

11:20Apa yang diberikan?

11:22Pertanyaan aneh?

11:24Oh sarang.

11:26Oh gitu.

11:28Jadi feature-nya jangan besar-besar.

11:30Tapi desain grafik harus bagus,

11:34jangan sampai...

11:36Jadi feature itu,

11:38kalau halaman banyak grafik ya,

11:40feature itu kan bisa responsif,

11:46atau source set,

11:48sudah dengar source set,

11:50src set.

11:52Kalau misalnya browser hub,

11:54webnya dibuka di mobile,

11:56kan nggak perlu kecil-kecil amat.

11:58Jadi bisa pakai source set,

12:00yang menampilkan umurannya lebih kecil,

12:02yang ditambil yang sedikit lebih besar,

12:04yang di desktop yang paling besar.

12:06Namun,

12:08tetap butuh dilimit,

12:10misalnya jangan sampai kasih yang full size,

12:12karena yang full size itu,

12:14mungkin bisa,

12:16kalau 8-10 mega kan,

12:18kegedean ya,

12:20dan boros bandwidth.

12:22Yaitu pakai source set ini,

12:26dan kasih opsi ke user,

12:28kalau melihat full size-nya,

12:30bukan intact baru.

12:32Jadi benar-benar,

12:34atau benar-benar,

12:36hanya menampilkan umur yang paling besar itu bisa,

12:38untuk perang saja.

12:40Jadi yang menghabiskan boros bandwidth bagi user,

12:42dan hanya memberikan opsi itu,

12:44jika user ingin melihat yang full size.

12:48View source set ini,

12:50bisa kita tweak,

12:52detail banget,

12:54jadi ukuran viewport.

12:56Terus kadang kan,

12:58misalnya kalau di HP mobile,

13:00itu 100% besarnya.

13:02Tapi kalau di desktop,

13:04cuma tunel kecil.

13:06Karena ini desain grafis ya,

13:08jadi kualitas gambar kan,

13:10itu penting.

13:12Jadi bisa kita spesifikasi yang di situ.

13:14Terus kalau misalnya retina,

13:16bisa kita tentuin juga,

13:18itu satu source set.

13:20Terus jangan khawatir,

13:22karena image source set itu,

13:24kita tetap fallback ke src,

13:26source atributnya.

13:28Jadi kalau browser nggak support,

13:30walaupun jadi lebih berat ya,

13:32karena mungkin ukuran file-nya lebih besar,

13:34tetap aman.

13:36Lalu mungkin tips yang terakhir,

13:38bisa lazy look,

13:40pakai string base64.

13:42Base64 itu misalnya bisa kayak di blur dulu,

13:44selama masih loading,

13:46di situ sambil nunggu gambarnya diambil,

13:48baru setelah selesai ditampilkan.

13:50Tapi jangan lupa,

13:52yang paling atas, yang lcp,

13:54jangan di lazy look.

13:56Tabahan, satu lagi,

13:58kalau media image,

14:00itu nggak

14:02mesti pakai image src.

14:04Bisa pakai picture.

14:06Ada yang tahu,

14:08picture tag?

14:10Picture tag,

14:12nanti coba baca di MDM.

14:14Art Direction,

14:16nanti ada picture tag.

14:18Jangan lupa juga ada

14:20format-format baru ya,

14:22dari image,

14:24contohnya active,

14:26dan lain-lain yang lebih optimized

14:28untuk ditampilkan

14:30di browser yang lebih modern.

14:32Karena JPEG dan PEG itu udah cukup lama,

14:34mungkin di browser yang modern,

14:36cukup bagus, tapi kalau browser modern,

14:38mungkin lebih cocok

14:40untuk format-format yang modern.

14:42Nah, berhubung kita punya

14:44tanggau dari Kuala Lumpur,

14:46dan web angular, kan,

14:48jadi bisa kita tanya-tanya.

14:50Jadi,

14:52we would like to welcome

14:54Mr. Jera.

14:56We invite Mr. Jera

14:58to come back to stage

15:00with us

15:02to give more insight

15:04about web AI

15:06and also angular.

15:08Because Jera

15:10is web GTE

15:12for angular,

15:14right? Am I correct?

15:16Okay, welcome Jera.

15:18And give applause for Jera.

15:20So,

15:26first question.

15:28How's Indonesia?

15:30Very hot.

15:32Okay.

15:34What about the food?

15:40Hello?

15:42Okay.

15:44So, the weather is very hot.

15:46And the food is very spicy.

15:48That's another video.

15:52And how about the people?

15:54Okay, I haven't got

16:00that much time to interact

16:02with the people, but so far

16:04I think the people is really nice

16:06and they interact

16:08with me

16:10on my talks, and

16:12I think they like my jokes.

16:14I don't know.

16:16So, my first question,

16:18my second question is,

16:20or third,

16:22what's the meaning

16:24of angular?

16:26Alright, so there's, I don't know

16:28how many of you are angular

16:30developers?

16:36I use angular1.

16:38Okay, angular1, okay.

16:40I use angularjs.

16:42Angularjs, yeah, this is a long time.

16:44I actually started

16:46with angularjs.

16:48And then when I saw

16:50angular2,

16:52or the new angular, this is when

16:54I got more active in the community.

16:56And at the time

16:58I was at ng-comp

17:00in Utah when they

17:02released angular2.

17:04It was really exciting.

17:06So, just

17:08few days ago,

17:10angular released

17:12a new version, which is now

17:14version 17.

17:16Wow!

17:18So maybe you only know

17:20about angular2, and then

17:22it got a little bit out

17:24of hand. But I think

17:26since angular14,

17:28we have seen like

17:30really, really a big

17:32change in angular.

17:34And I think until this last

17:36version, everything has

17:38come together, and

17:40actually, the angular

17:42team, they

17:44released a new logo.

17:46So if you

17:48look, if you go to the

17:50website, which actually there's

17:52a new documentation

17:54website, it's angular.dev,

17:56the whole

17:58new look is way more

18:00modern.

18:02You will see a lot of pink,

18:04you will see

18:06kind of a modernized brand

18:08for angular.

18:10And yeah, it's really exciting.

18:12What the angular

18:14community mentions

18:16most of the time is this

18:18angular renaissance.

18:20Like it's

18:22coming back stronger

18:24and

18:26it's faster, it's really, really fast.

18:28And some of the

18:30initial tests on speed,

18:32they have

18:34put in the blame

18:36all the other frameworks.

18:38It's 90% faster

18:40than the last version

18:42of angular. And if you

18:44go, there's a benchmark

18:46website where all the frameworks,

18:48web frameworks

18:50are compared. And now

18:52angular17,

18:54it's faster than build, it's faster

18:56than react, it's faster than

18:58it's built, it's

19:00super, super fast. So it's really,

19:02really exciting times for angular.

19:04Nice.

19:06Well,

19:08they released,

19:10so what has happened is

19:12in a few versions back,

19:14they released a new build

19:16engine, which is the rendering

19:18behind angular.

19:20And that allowed

19:22a lot of new cool features.

19:24And if I give you

19:26like a list

19:28of features, probably

19:30the most important

19:32one, I guess, is the performance.

19:34I mean, this increase in

19:36the performance is really, really

19:38amazing. And

19:40when you compare it to the other frameworks

19:42that maybe you think that react will be faster

19:44than angular, now

19:46we have proof that

19:48it's now behind. So that's

19:50really cool. And then

19:52one thing that has

19:54made also a lot of

19:56news in social media is

19:58the new, what they call the new

20:00control flow. And

20:02the new control flow is a new way

20:04to use ng-if,

20:06ng-for, and ng-swift.

20:08And now

20:10we have a new syntax

20:12to use in our templates for

20:14angular. And this is also part

20:16of the performance improvements.

20:20Nice. What do you think

20:22the key feature of Angular compared to

20:24Angular? I see you

20:26have to convince us

20:28to use Angular. What's the meaning?

20:30Well, I think now the shiny

20:32the shiny

20:34diamond in

20:36Angular is

20:38the signals,

20:40angular signals. So

20:42it has been

20:44also everywhere for

20:46front-end. And

20:48signals have been implemented

20:50now in React.

20:52Everyone has

20:54adopted signals.

20:56Yes, yes.

20:58So there's a few frameworks that

21:00introduced the concept, the idea.

21:02And then angular was one

21:04of the first that released it.

21:06And yeah, right

21:08now it's part of the

21:10new version. So it's completely

21:12fully integrated. There

21:14was a developer preview

21:16for a few months.

21:18And right now it's official. So if you

21:20build a new Angular

21:22application, it will incorporate

21:24signals

21:26just from the initial

21:28build. So your application

21:30will be really, really fast.

21:32Thank you. So

21:36this is like a curiosity

21:38question for me about

21:40the positioning of Angular

21:42in this entire

21:44ecosystem. Because we

21:46know that like

21:48well, this

21:50the whole community is

21:52divided between

21:54React, Fue,

21:56different spell, and so on.

21:58This is like a framework

22:00war somewhere

22:02up there, right? New framework comes up.

22:04Every second, new framework

22:06comes up. So, but I'm curious

22:08how this come up with it.

22:10Where does the Angular

22:12comes out in this

22:14in the ecosystem?

22:16What, what, what?

22:18Like, how it

22:20being used in the industry? Is it like

22:22mostly enterprise, or

22:24scale, or just like it in the

22:26I don't know. So

22:28to you, Angular.

22:30So Angular has been focusing

22:32in different areas.

22:34And one of them was

22:36always stability.

22:38So that means

22:40that when you introduce a new

22:42version, you have

22:44a way to automate

22:46your code from

22:48the last version to the new version.

22:50So you can run a command.

22:52This is a

22:54migration of the code.

22:56And they automated

22:58the whole process. So when you

23:00change version, you run

23:02on your command line, you run

23:04ngupdate. It's always

23:06the same command. And

23:08ngupdate will go

23:10through all of the updates

23:12on that version, will

23:14look for the code changes,

23:16and will automate that

23:18for you. So that's really

23:20really good. And maybe some

23:22developers, they don't know about this.

23:24Because this, this has been

23:26improved and

23:28developed maybe in the last two

23:30years. So this is

23:32something that Angular developers

23:34enjoy. So if there is a new

23:36version, you just go into your

23:38CLI and run

23:40ngupdate. And

23:42you can do that for multiple versions.

23:44So imagine you have an old, maybe

23:46a project that you...

23:48Yes, maybe it's a

23:50three years old project.

23:52ngupdate

23:54will take you from

23:56Angular, imagine Angular 8

23:58to Angular 17.

24:00And you don't have

24:02to change anything.

24:04Of course,

24:06it just requires you to jump

24:08one version. So you need to do

24:10one version at a time.

24:12I can relate to that because

24:14mostly my time spent is

24:16to update dependencies

24:18of my project.

24:20So sometimes if I like

24:22to upgrade React 16

24:24to React 17, and I get

24:26compatibility issue

24:28with certain libraries,

24:30it doesn't allow me to update,

24:32I have to fix here and there,

24:34and it's all heading.

24:36This is one of the main pains

24:38in the frontend

24:40or web.

24:42The dependencies just keep

24:44upgrading, they just keep upgrading.

24:46Even if you just use TypeScript,

24:48because TypeScript

24:50is quite fast-paced,

24:52there will be always some new release

24:54of TypeScript.

24:56And it's really good

24:58that Angular offers this

25:00automated

25:02upgrade experience

25:04for developers.

25:06They have been improving the developer

25:08experience a lot.

25:10So that's what makes Angular

25:12in another category, because

25:14for other frameworks, do you have

25:16this automation between versions?

25:18It's interesting that

25:20Angular has been doing this for

25:22two years, because

25:24Svelkit, not Svel, but Svelkit,

25:26the meta framework, offered it, but

25:28not only this year, when they

25:30released a major

25:32version, but it's nice to see

25:34like many frameworks.

25:36This was introduced with

25:38Angular schematics,

25:40so it's a way to automate

25:42code changes.

25:44Alright, thank you.

25:46Shall we come back

25:48to the questions

25:50that we have here?

25:52I can translate.

25:54Question from Hanif.

25:56Can we ask the tips and tricks

25:58to improve process

26:00time from API

26:02if the user

26:04if the user use like

26:08there are a lot of

26:10concurrent user

26:12and database has

26:14millions of records?

26:16Okay, this is a good question.

26:18Okay.

26:20So that means like

26:24the architecture is like

26:26you have

26:28millions of data

26:30and then you have a lot of

26:32concurrent user

26:34that access the same time

26:36and this is like I'm talking about

26:38enterprise kind of

26:40architecture.

26:42There is no

26:44one answer

26:46to fix this.

26:48There's no one answer.

26:50There's no like silver bullet

26:52to fix this.

26:54It's always come back to trial

26:56and error and of course

26:58this is like whether your architecture

27:00playing in place.

27:02It doesn't help. You cannot help this

27:04just using one framework and it will

27:06fix for you.

27:08And it doesn't also automate this.

27:10Of course,

27:12cache method here.

27:14Cache method and also

27:16asynchronous or queuing

27:18queue

27:20to handle the traffic

27:22and also

27:24yes, of course, database

27:30replicas and

27:32replicas from

27:34many, so it's

27:36like scaling your

27:38architecture, not scaling

27:40your framework.

27:42So this is about architecture.

27:44Maybe someone have

27:48a better opinion.

27:50You can also talk in Indonesia.

27:54Maybe next question.

27:58Apakah OSM dapat integrasikan dengan API

28:02jika bisa bagaimana proses teknisnya?

28:04Sebenarnya sama aja.

28:06Seperti mengintegrasikan dengan

28:08API tanpa memasuki.

28:10Tapi yang lebih

28:14memungkinkan lagi adalah

28:16bahkan bisa ditaruh di World Assembly.

28:18Ada yang namanya Skylight

28:20database yang cuman satu file

28:24dan itu bisa di load

28:26atau bisa di compile

28:28kompilasi ke World Assembly.

28:30Sehingga database kita

28:32berada di client.

28:34Dan mungkin kesempatannya hanya syncing aja.

28:36Itu mungkin lagi sekali.

28:38Satu user, satu DB ya?

28:40Jadi kayak

28:44itu lah modelnya.

28:46Jadi ketika ada koneksi ke server

28:48hanya untuk syncing aja.

28:50Itu juga mungkin.

28:52Jadi maksudnya, kalau misalnya kita punya

28:54Web Assembly,

28:56kita bisa koneksi ke API dari Web Assembly?

28:58Ya.

29:00Cuma seperti

29:02memasuki.

29:04Tapi java Skylight bukan memasuki.

29:06Ia memasuki dari

29:08programming language yang digunakan

29:10dari web assembly.

29:12Oh.

29:14Saya baru tahu.

29:18Oh ya, saya melihat.

29:20Ya, saya melihat kita bisa menggunakan

29:24workplace dari Web Assembly.

29:26Dan itu server web.

29:28Ya.

29:30Sebenarnya.

29:32Oke. Pertanyaan selanjutnya.

29:34Oke. Pertanyaan ini

29:38adalah tentang tweet

29:40untuk saya.

29:42Untuk memperbaikkan LCP

29:44dalam karusel,

29:48tapi karusel itu

29:50ada X.

29:52Oke. Jadi

29:54sekarang pertanyaannya

29:58X nya di depan

30:00atau di tengah atau di belakang?

30:02Biasanya

30:04setahu saya, X di karusel itu di tengah.

30:06Ya.

30:08Setahu di karusel itu di tengah.

30:10Bukan di karusel pertama.

30:12Biasanya.

30:14Karena karusel itu seperti image.

30:16Dan kamu ada X

30:18ketika kamu scroll.

30:20Ya. Jadi.

30:22Kalau LCP nya untuk

30:26image pertama, sama seperti yang saya katakan.

30:28Tetapi jarang banget yang pakai

30:30X di LCP.

30:32Sebagai karusel dan itu sebagai LJP.

30:34Dan biasanya

30:36biasanya

30:38LCP

30:40ketika browser melihat LCP

30:42ketika browser melihat LCP

30:44dan itu adalah image yang di-lazy load.

30:46Bisa jadi browser

30:48menangkap LCP nya

30:50di elemen yang lain.

30:52Bukan berarti karusel itu.

30:54Bisa jadi text yang ada besar

30:56sebelum title

30:58biasanya.

31:00Dan

31:02kalau kalian mengatakan

31:04X kalian di karusel itu

31:06semuanya X.

31:08Kayaknya itu melanggar

31:10ini deh.

31:12It breaks the rule.

31:14Karena X itu gak boleh

31:16di dalam karusel semuanya.

31:18Masih banyak-banyak karusel ya?

31:20Hah?

31:22Masih banyak-banyak karusel.

31:24Ya.

31:26Even though I don't

31:28like karusel.

31:30Tetapi yes.

31:32Because still

31:34kalau X nya di tengah-tengah

31:38maka itu gak dianggap sebagai LCP.

31:40Yang dianggap adalah image yang pertama

31:42biasanya.

31:44Tapi kalau itu kalian terpaksa harus

31:46image yang pertama

31:48yang usahakan ada text yang besar

31:50sebelumnya.

31:52Sehingga

31:54LCP yang dipakai adalah

31:56text yang besar itu.

31:58Bukan X nya.

32:00Itu load paling berakhir.

32:02Jadi jangan sampai X nya yang

32:04diutamakan.

32:06Nah, ikut aja.

32:08Speaker, tapi ikut aja.

32:10Karena gak bisa ngepick di slide.

32:12Jadi kan LCP

32:14gak harus X nih.

32:16Tapi gimana kalau gambar pertama

32:18di karusel yang dianggap sebagai LCP

32:20itu adalah konten dynamic.

32:22Berarti itu bit praktis ya?

32:24Misalnya

32:26kita punya user generated

32:28konten, latest post

32:30dari user kita, kan itu bisa

32:32berubah-ubah tuh. Tapi apasnya

32:34yang dideteksi sebagai LCP itu.

32:36Nah, berarti kan kita LCP-nya bakal

32:38salah terus kan?

32:40Bukan. Yang diambilkan elemennya

32:42bukan kontennya.

32:44Kontennya bebas. Jadi elemen

32:46itu yang diambil sebagai LCP.

32:48Dan kalau

32:50page load itu LCP selalu

32:52berubah-ubah loh. Jadi

32:54when browser

32:56start rendering

32:58the LCP keep changing

33:00when they see largest content

33:02and the last largest

33:04content that's the LCP.

33:06The last largest content that render

33:08that's the LCP.

33:10So

33:12it depends.

33:14It also depends

33:16on the view point.

33:18LCP on desktop may be

33:20different from LCP in mobile.

33:26Berarti bisa diakalin pakai

33:28placeholder asal kalau kita

33:30tahu proporsinya.

33:32Okay, next question.

33:36Arsitektur komunikasi yang sering dilakukan

33:38antara kalian dan software adalah REST.

33:40Normally we use REST.

33:42Can we use

33:44GRTC? Of course.

33:46Keto bisa.

33:48Karena itu adalah

33:50protokol komunikasi

33:52networking. Jadi bisa pakai

33:54REST, bisa pakai GraphQL,

33:56bisa pakai SOAP,

33:58pakai SNL,

34:00pakai SOAP, bisa.

34:02Dan bisa juga pakai GRTC

34:04dan berbagai protokol lain.

34:06Berikutnya,

34:08kalau menggunakan WebAssembly,

34:10if you use WebAssembly

34:12consume by JavaScript,

34:16which is better?

34:18SSC, SSS

34:20or SSSR?

34:22Gak ada masalah sih. Mau pakai apa aja boleh.

34:24Yang dijawabkan

34:26di demo tadi, saya pakai

34:28client side aja.

34:30Ada server-nya. Jadi server side rendering

34:32itu boleh.

34:34Server-nya akan load

34:36database static. Atau pakai SSC juga boleh.

34:38Static side generator.

34:40Jadi webnya static, kemudian

34:42WebAssembly di load, kemudian

34:44webnya jadi

34:46keterlaluan di

34:48sisi client aja.

34:50Mudah-mudahan

34:52menjawab.

34:54Kemudian, pertanyaan

34:56berikutnya.

35:20Saya bukan pengguna.

35:22Tapi ada

35:24pengguna keluarga yang dipanggil

35:26Gerard Sacks.

35:28Sekarang saya berbicara bahasa Jepang.

35:30Tapi mungkin.

35:32Sebenarnya, banyak orang membuat

35:34saya membuat pengguna keluarga

35:36tersebut.

35:52Saya juga

35:54punya hobi ini.

35:56Saya tidak tahu jika kalian sudah melihat talk saya.

35:58Tapi di slide, ada sedikit

36:00desain.

36:02Jadi itu hobi saya.

36:04Saya punya banyak fons.

36:06Saya suka fons.

36:08Dan saya mencoba

36:10menggunakan fons yang bagus

36:12untuk slides saya.

36:14Mungkin saya menghabiskan

36:16banyak waktu menemukan

36:18fons yang bagus.

36:20Yang terlihat lebih seperti desainer.

36:22Bukan pengembara.

36:24Dan itu sama.

36:26Jadi ketika saya memilih fons untuk

36:28environment saya,

36:30untuk visual code misalnya,

36:32saya bisa menunggu 2 hari.

36:34Maksud saya, saya bisa menunggu 2 hari

36:36karena itu tidak benar-benar apa yang saya suka.

36:38Dan saya bisa

36:40menjadi sedikit gila dengan fons.

36:42Ya, ya.

36:44Mungkin karena nama saya.

36:46Oke.

36:48Pertanyaan selanjutnya.

36:50Apa yang terjadi dengan animasi

36:52jika pengguna menggunakan browser

36:54yang tidak mendukung view transition

36:56API?

36:58Nah, ini untungnya cukup mudah

37:00karena semua yang di platform web

37:02harus sebaiknya menggunakan

37:04progressive enhancement.

37:06Apa yang dimaksudkan progressive enhancement?

37:08Kalau memang di support,

37:10fitur yang baru

37:12dan lebih bagus di support,

37:14ya dijalankan.

37:16Kalau enggak, jangan sampai mempengaruhi user.

37:18Nah, kalau di sini, caranya

37:20ya cukup detek saja.

37:22If, tanda semu,

37:24document.startViewTransition.

37:26Jadi kalau metode itu tidak ada,

37:28return. Ya udah.

37:30Se-simple itu.

37:32Jadi bagi user yang browser-nya enggak support,

37:34ya langsung meng-update.dome

37:36seperti biasa.

37:38Sedangkan kalau user yang browser-nya support,

37:40akan mendapat fitur view transition.

37:42Itu yang paling simple.

37:44Strategi yang paling

37:46sederhana.

37:48Tapi gimana kalau misalnya

37:50animasi itu memang bagian yang

37:52penting dari produk kita.

37:54Misalnya kita portfolio designer

37:56apapun yang perlu visual.

37:58Kita bisa pakai strategi yang namanya

38:00dynamic import.

38:02Atau kita sering sebut lazy loading.

38:04Itu udah jadi fitur standar

38:06di JavaScript.

38:08Di React juga bisa.

38:10Jadi kita bisa pakai kondisional.

38:12Misalnya if, document.startViewTransition.

38:14Kalau metode-nya ada,

38:16ya kita pakai metode itu.

38:18Kalau enggak ada,

38:20kita bisa await import.

38:22Misalnya kita await import pakai library custom.

38:24Kalau di React pakai framer motion.

38:26Kalau di vanilla pakai

38:28swap.js dan lain-lain.

38:30Itu gini-gini.

38:32Pertanyaan terakhir kali ya.

38:34Kita udah mau dihujung acara.

38:36Jadi pertanyaan terakhir.

38:38Apakah web server ini hanya untuk C++

38:40dan S9? Nggak. Tadi saya udah contohin ya.

38:42Ada C++.

38:44Ada bisa pakai Rust.

38:46Bisa pakai Go.

38:48Zip.

38:50Ada Dart juga.

38:52Ada Swint bahkan.

38:54Dan Kotlin juga bisa.

38:56Dan akan banyak bahasa-bahasa lain

38:58yang dihormati.

39:00Bukan. Ini untuk C++.

39:02Program.

39:04Oke.

39:06Mungkin kita

39:08belari.

39:10Cukup ga usulnya.

39:12Bagaimana menghubungkan kursi-kursi

39:14kursi-kursi panjang yang di dapet dari belari

39:16atau dibagi untuk mengadakan kursi-kursi web?

39:18Oke. Ini untuk

39:20camp long task

39:22into

39:24smaller task in

39:26JavaScript execution.

39:28So, ya.

39:30Seperti yang contoh yang saya kasih tadi.

39:32Banyak

39:34kasus-kasus di mana kita

39:36mengimplementasi

39:38eksekusi JavaScript

39:40yang panjang.

39:42Jadi untuk di break,

39:44usahakan kalau misalnya

39:46dia, bisa kita pakai yield

39:48juga ya. Yield.

39:50Untuk bisa nge-pause

39:52dan memberikan kesempatan

39:54untuk hire

39:56event untuk dieksekusi.

39:58Dan bisa dilanjutkan lagi dengan

40:00yield. Bisa juga dengan

40:02yang tadi. Pakai

40:04delay atau set timeout.

40:06Jadi, dia masih dieksekusi di beda

40:08thread. Bukan masih beda thread.

40:10Di beda cycle.

40:12Ya, karena begitu kalian tambahin set

40:14timeout, dia akan masuk ke

40:16apa ya, queue.

40:18Event loop. Dekat queue selanjutnya

40:20untuk dieksekusi kebelakangan.

40:22Differ. Kita sudah pernah bahas

40:24tentang event loop di

40:26MauRollinWeb. Silahkan nanti pencungi

40:28di youtube-nya.

40:30Terakhir tadi saya ada ngasih

40:34sebuah link ke ENP.

40:36Nanti bisa diminta ke panitia juga slide

40:38saya. Boleh dipake. Nanti ada

40:40ENP atau di web dev ada untuk

40:42optimize ENP. Disitu lebih

40:44banyak informasi mengenai breakdown

40:46task. Ya, bisa lebih banyak

40:48dibajarin.

40:50Dan yang terakhir, kita jawab

40:52aja.

40:54This one is

40:56I said don't never use

40:58event. Windows.unlock

41:00don't do it because

41:02it will disable the back-forward

41:04cache.

41:06So, how to implement

41:08alert when document is not

41:10safe. Okay, what are

41:12the alternatives?

41:14Ini maksudnya jika ada email

41:20atau misalnya text box

41:22kalian mau save.

41:24Sorry, belum di save, tetapi sudah

41:26di close dan kita harus kasih

41:28notifikasi. Itu adalah

41:30teknik yang lama.

41:32Jangan pakai lagi.

41:34Ya.

41:36Don't use that.

41:40Itu

41:42satu

41:44back-forward cache akan

41:46berhenti berfungsi dan

41:48tidak baik untuk

41:50experience. Dan halur itu

41:52kayak mengunci semua

41:54apa? Mengunci semua

41:58input, interaksi.

42:00Jadi tidak baik untuk experience.

42:02Alternatifnya adalah simpan

42:04apapun yang diketikan

42:06oleh user di local

42:08storage.

42:10Just stop.

42:12Use local storage

42:14or

42:16only local storage, atau pakai

42:18yang database apa? Index

42:20dv. Use

42:22local storage or index dv

42:24store user

42:26draft.

42:28Jadi begitu paste itu

42:30di load pulang, kontennya user

42:32tidak hilang.

42:34It's better that way.

42:36Terus.

42:38Ya. Kita sudah

42:46di penghujung acara.

42:48Terima kasih buat teman-teman semua yang masih

42:50di sini. Dan genhan bracket dulu

42:52kita mau selfie kali ya.

42:54Mengabadikan moment ini.

42:56Jadi kita selfie dulu.

42:58Buat teman-teman mungkin

43:00kalau yang di belakang boleh maju-maju ke depan

43:02dan tekan-tekan kamera.

43:04Ini moment yang luar biasa.

43:06Sekarang kita baru sekali melakukan offline.

43:08Dan mudah-mudahan teman-teman

43:10di sini mendapatkan ilmu

43:12pertama ilmunya.

43:14Apa yang kita sampaikan berfakar buat teman-teman.

43:16Kita ketemu lagi

43:18di masa depan.

43:20Dan terima kasih.

43:22Dan semoga kita bisa diskusi

43:26dengan teman-teman.

43:28Dan kalau nanti masih ada

43:30yang mau dapat pertanyaan, kita masih di sini.

43:32Jadi silahkan datang ke kita

43:34dan bertanya. Dan kita bisa diskusi

43:36dengan lanjut.

43:38Who's the longest hand?