Router: Live code Session - Supercharged Google Chrome Developers Indonesian English (auto-generated)

Router: Live code Session - SuperchargedYouTube↗ IA↗(long shot)
Science & Technology 15.8K views 289 likes 4 dislikes 02 Jun 2016

Chrome for Developers 814K subscribers N/A YouTube↗

Click to Play Video

Halo dan selamat datang di siaran langsung Supercharged ini.

hello and welcome to the supercharged

livestream I'm Paul and I'm Sarah he's

Dan aku Surma. Dia adalah Surma favoritku dari semua Surma.

my favorite of all the servers today

Hari ini, kami akan membangun router.

we're gonna build a router now strictly

Sebetulnya, sebuah router--yah,

speaking a Rooter well it's not a UI

bukanlah elemen UI, apakah benar, khususnya?

element is it really typically but it's

Tapi itu memegang kendali transisi UI,

in control of you transitions

terutama dalam hal seperti aplikasi web progresif.

particularly and something like a

Dan seseorang menyarankannya.

progressive web app and somebody

Mereka menyarankannya di Twitter.

recommended this have suggested it on

Kami membicarakan itu dan, kami pikir, ya, kenapa tidak?

Twitter and we talked about it we

Mari kita coba.

thought yeah why not let's give it a go

Sebetulnya, kusadari ketika aku memikirkannya,

and actually I realized as I was

ada banyak kesempatan untuk melakukan hal

thinking it through that there's plenty

menyenangkan di sana, paling tidak akan

of opportunities to do some some fun stuff in there not least of which will

ada beberapa elemen *custom*.

be some custom elements so we're gonna

Dan kami akan memainkannya hari ini.

give that a world today I haven't done

Aku belum banyak mengotak-atiknya.

much with them they have just seemingly

Mereka tampaknya muncul di banyak tempat.

landed for reals in a bunch of places anyway

Bagaimanapun juga, kami akan mencobanya.

we're gonna give it a go what happens

Apa yang akan terjadi? Siapa yang tahu.

who knows that's why we watching it I

Itulah kenapa kita menyaksikannya, kukira. Karena apapun bisa terjadi.

suppose because anything could happen

Seperti biasa, beberapa pengingat.

as usual couple of caveats firstly the

Pertama, kodenya akan berupa kode dengan jenis protitipe.

code will be prototype style code it

Bukan merupakan kode yang siap produksi.

won't necessarily be like production

Selalu patut disebutkan.

ready always worth mentioning there may

Mungkin akan ada masalah aksesibilitas dan hal-hal

be accessibility issues and things like

seperti itu yang juga harus diperbaiki

that that would also need to be sort of

sebelum membahasnya lebih jauh.

dealt with before taking it further but

Tapi, aku akan lebih fokus pada

I'm going to be mainly focusing on

sesuatu yang semoga saja akan menjadi

something that hopefully will be

efisien dan sesuatu yang akan menjadi pengulangan pertama yang baik

performance and some there will be a good first iteration all right so that

Baiklah. Jadi, sudah kujelaskan. Seperti biasa, aku akan ada di chat

out the way as always I'm gonna be here

dan di Twitter mencari pertanyaan yang kau ajukan.

in the chat and on Twitter looking for other questions that you

Karena seperti biasa, kau punya kesempatan

have because as always you have the

untuk mengarahkan ke mana kita akan membawa ini

chance to actually influence where we

dan menginterupsi kami, dan mungkin membingungkan kami, dan membuatkan kami

are going with this and interrupt us and maybe confuses and make us more bugs

*bug* yang lebih banyak.

yeah then you intro Tim here interrupts

Ya, kau menginterupsi dia, dia menginterupsiku.

me it's oh good it's like real life

Semua beres, seperti kehidupan nyata. - Rantainya. - Tak apa.

she's fine it's fine it's fine I'm gonna

Aku akan menulis kode sekarang. Baiklah. Jadi, kita punya apa di layar?

code now right so what we get on screen

Ya, salah satu hal yang ingin kukatakan

yes so one of the things I want to say

adalah aku akan membangun router selayaknya itu

is that I'm gonna be building this

adalah aplikasi web laman tunggal di mana semua kontennya akan hadir

router as though it was a single page web app where all the content is going

di laman tersebut sejak awal.

to come into the page on the start and

Dan alasan untuk itu adalah hanya

the reason for that is purely for

untuk kemudahan pada tahap ini jadi siaran langsung ini

simplicity at this stage so that this

tidak berlangsung berjam-jam.

live stream doesn't run for like hours

Jadi bersabarlah denganku.

and hours and hours so bear with me

Baiklah. Jadi yang sebetulnya akan kulakukan adalah

right so what I'm gonna do is I'm gonna

aku akan masuk ke elemen *custom*

drop in I'm gonna drop in a custom

Aku akan memunculkannya.

I'm gonna call it up did you know what

Kami bisa saja memunculkan sebuah-- mari menyebutnya--

we could have come up with a nice to

Akan kuberitahu. Super--

call it tell you what super knows you

- Tidak, aku takkan menyebutnya. - Super-router.

can I'm gonna call it super rude here

Super-router. Aku akan menyebutnya sc untuk Supercharged.

super rude I'm gonna call sc4

Itu dia. Itulah router-nya.

supercharged there you go and see oh we

Kita punya semacam merek.

got some branding in there why not

Ya, kenapa tidak? Itu hebat.

that's great it's a really good start

Permulaan yang sangat baik. *script*, *defer*, kenapa tidak?

*source* sama dengan statis. Mari lakukan ini, statis *sc-router.js.*

source equals static to do this static SC Rooter is this it seems like a think

Itu juga seperti sesuatu yang akan aku ingin lakukan.

that I would want to do right let's drop

Baiklah. Mari kita masukkan file ini. File baru, *sc-router.js.*

in this father a new file s see that

Seperti itu, seperti itu saja.

just like that I'm gonna be jeaious so

Dan aku akan lakukan *js*. Akhir-akhir ini, aku ceritakan mengenai proyekku

recently I told you about my project I

di mana aku membangun sebuah router dan aku sangat bangga akan hal itu.

was building a route and also be proud

Aku sudah ceritakan tentang itu, dan bagaimana aku menggunakan

of not told you about it and how I used

teknik-teknik yang keren itu.

all these fancy techniques and you were

Dan kau seperti aku melakukannya setengah tahun yang lalu.

like I totally did that half a year ago

Dan aku punya ide-ide baru.

and I have new ideas so thank you for

Jadi terima kasih telah membuatku merasa seperti orang bodoh.

making me feel like it is actually

Kuharap aku akan belajar sesuatu hari ini.

hoping I will make me sound like a mean

Sekarang kau membuatnya seakan-akan aku jahat padamu. Kau adalah yang terbaik-- aku yang terbaik--

to you you are the nicest I'm the nicest something fine anyway you're a decent

Baiklah-- Bagaimanapun juga-- Kau adalah kolega kerja yang lumayan. Lumayan. "Kau adalah kolega kerja yang lumayan, Paul.

work colleague decent you are a possible

Aku seringkali bersabar denganmu."

work colleague Paul I put up with you

Jadi-- - Ya. - Baik.

most days so yeah good right document

- Lumayan. - Baiklah. *document.registerElement*, dan kami

dot register register element and we

akan menyebutnya--kami menyebutnya apa?

were going to call that what we call it

Kami menyebutnya *sc-router*.

we called SC Rooter and we'll go SC

Dan kami hadirkan *sc-router*.

Rooter now if this works

Jika ini berfungsi, kami akan lakukan *attachedCallback*,

we'll do a touched callback which I love

aku suka namanya karena itu terdengar seperti--

the name of that because that's like

Bukankah kau butuh ekstensi? Ya, benar. Aku perpanjang *HTMLElement*.

don't need extense yes Adobe and extends HTML element thank you

Terima kasih. Itu memperpanjangnya, dan kami akan melampirkan *console.log*

extends that and we'll do console.log

attach look at that all being well let's

Semua baik-baik saja, mari kita lihat. Jadi aku telah--. Lihat itu. Angka yang tak diduga.

see myself that one expected number what

Di mana aku tulis angka? Di baris kedua?

did i do a number in line two hmm that's

Aneh. Kita punya masalah.

weird hmm wow we have an issue you know stat

Bukan, statis. Itu dia. Mari kita coba itu.

stat static there we go let's try that

Ya. Itu karena--

yay it's because I'd so what I've done

- Ya. - Baiklah. Jadi, apa yang telah kulakukan adalah, asal tahu saja, karena kuharap kita akan

is I just so you know because I'm

memiliki tautan seperti *slash*

expecting that we'll have deep links like you know / about / whatever we for

*slash* apapun untuk seksi kami yang berbeda yang akan

our different sections we're gonna route

kami *route* di antaranya, aku ingin URL manapun yang kutuju,

between I want whatever URL I go to when

ketika kutekan *Refresh*, kuingin itu kembali

I hit refresh I wanted to come back to

ke indeks HTML yang sama.

the same index.html I'm going to route

Aku akan *route* ke indeks HTML yang sama. Jadi aku membuat *AppEngine*, semacam Python file tunggal,

to the same index.html and so I've set up a an app engine like single file

yang melakukan *routing*-nya untukku.

Python kind of thing they're just routes

Jadi apa yang terjadi tadi ialah itu mengirimkanku

does that reason for me so what happened

ke file yang salah.

there was it was sending me into the

wrong file so that's good I think the

Kukira keseluruhan itu disebut *routing* HTML5, sesuatu

whole thing is called html5 routing

yang, di *front end*, sangatlah populer,

which is something that on the front is

menggunakan *pushState* dan menggunakan URL yang benar.

very popular using push thing and

Sementara semua server pengembangan tidak memiliki

actually using proper URLs but all the development servers don't necessarily

dukungan yang baik, jadi akhirnya kau selalu

have good support you always end up

menulis seperti file Python tiga baris, atau file Go tiga baris

writing like a three line Python file or

untuk mengemulasi keseluruhan perilaku ini.

a go file to actually and relate this

Ya. Jadi, di *attachedCallback*, yang ingin kami lakukan

entire behavior yep okay so in the attached callback so what we want to do

ialah kami akan, mari kita lihat, *window.addEventListener*.

is we're going to do let's see window dot and event listener so we know that

Jadi kami tahu kami akan memperoleh *pop state*.

we're gonna get pop state I'll do this

Kami akan lakukan *._onChanged* ini, menurutku. Mari kita lihat, di *onChanged*, bagusnya kami lakukan itu sekarang di sini. *onChanged*, itu dia.

dot unchanged I guess that's the change here unchanged there we go and then we

Lalu kami bisa lakukan detachedCallback.

can do detached callback so if we remove

Jika kami menghilangkan elemen router ini,

to remove this Reuter element could do

kami bisa lakukan *window.removeEventListener*.

window dot remove event this and you

Kau tahu apa yang kusadari?

know what I've realized I'm gonna do

Aku akan melakukan *this._onChanged*.

this stuff on changed but I'm gonna have

Tapi aku akan melakukannya seperti ini.

to do it like this I'm gonna do the

Apa kau akan melakukan spesial Paul Lewis? Ya. Karena kalau tidak, itu akan berlawanan dengan target *event*.

special because otherwise it will be it will be run against the event so we

Jadi apakah ada *createdCallback*?

should be created callback um there

Mungkin ada, tapi--haruskah kita cari tahu?

might be but we found out created

*createdCallback*.

callback otherwise it would be binding

Karena jika tidak, kau akan membuat ikatan baru tiap kali itu dilampirkan, kan?

or like creating new bindings every guys

Ya. Baiklah, mari kita lakukan.

attached sorry fine

- Maaf. - Baiklah. Tidak, kau di sini untuk membantu.

yo-you here to help hello let's find out

Halo. Mari kita cari tahu. *createdCallback*.

created callback oh there is one let's

Baik, ada satu. Mari kita lakukan.

do that then that's like C in classes

Kau tahu, di dunia *class*, itu seharusnya akan menjadi konstruktornya, kan?

world that would've been the constructor

Benar. Jadi, itu dia.

right true so there we go so we created

Jadi, jika kami membuat salah satu dari ini, kami akan membuat salah satu dari itu.

so every time we create one of these

Saat kau lampirkan, itu tak apa.

will create one of those when you attach it great when detach it will get rid of

Saat kau lepaskan, kami akan menghapusnya. Tampaknya bagus.

that that seems good

Jadi hal lain yang mungkin ingin kami lakukan,

ialah kami mungkin ingin menghadirkan *onChanged*.

we'll probably want to do I should probably ought to call the on change so

Jadi *onChanged*-ku akan menjadi hal

my on change is going to be the thing

yang kurasa akan memperhatikan *path* manapun saat ini.

that I think is going to be watching for whatever the current path is and then

Dan itu akan menjadi hal yang memutuskan

it's going to be the one that decides to

apa yang harus dilakukan dengan tampilannya.

know what to do with the views I guess

Menurutku satu pertanyaan menarik tentang ini

interesting question for this is where

adalah, di mana kau membatasi apa pekerjaan router-nya?

do you draw the line what the job of a

Apa yang seharusnya router lakukan, dan apa cakupan luarnya?

ruler is hmm what what is it supposed to do and what is outside of its scope what

Apa yang khususnya kau ingin masukkan ke dalam router ini?

are you planning on putting into this

Baik. Ya, itu pertanyaan bagus.

route in particular okay so yeah that's

Karena salah satu hal yang telah aku

really good question because one of the

temukan selama riset bertahun-tahun

things that I've discovered over doing routes is for a good number of years is

adalah, yah-- mari kujelaskan dengan cara lain.

that oh let me let me put another way

Kesalahan yang nampaknya sering dilakukan orang

the mistake that a lot of people seem to

adalah mereka membuat router-nya pasif.

make as they make their routes are kind

Jadi itu hanya melihat perubahan URL saja. Ya. Itu pernah kulakukan.

of only passive so it's only ever watching the URL change oh yeah I I felt

- Ya. - Aku merasakan pedihnya.

the pain so then what you do is like in

Apa yang kau lakukan adalah, di bagian lain

other parts of your code you like I'll

kodemu, kau seperti, ubah URL.

change the URL change here change it

Ubah di sini, ubah lagi, ubah di sini.

again tint it here and the route is kind

Dan router-nya seperti, apakah sekarang aku mengendalikan tampilan

of going do I now control the view and

dan mengalihkannya?

switch you know switch that out would

Siapa yang melakukan apa di sini?

who's doing what here and you get this

Dan kau mendapatkan *valley* yang aneh ini.

is really uncanny valley if everything

Jika semua melalui router,

goes through the router it's active as

dan keadaannya aktif dan juga pasif,

well as passive doesn't it's the one

dalam arti, itu yang mengubah URL

that changes the URL and it's the one

dan itu yang mengendalikan semuanya,

that controls everything that one tends

itu cenderung berfungsi lebih baik.

to work out much better so that's the

Jadi, model itulah yang akan kugunakan hari ini.

model I'm gonna go with today and I feel

Kurasa aku setuju. Rasanya agak aneh jika router harus mempengaruhi

I agree like it feels a little bit weird that's the ruler should influence

aspek visual tertentu seperti mengubah *class* atau benar-benar

certain visual aspects like changing

mengubah animasi.

classes or actually triggering

Namun jika kau sudah melaluinya, rasanya sangat bagus.

animations but once I get over that it

Dan rasanya sangat kuat.

feels so good and it feels very robust

Jadi kurasa itu konsep yang valid untuk sebuah router.

so I think it's a very valid concept for

Baik. Jadi apa yang ingin kulakukan adalah

mari berasumsi bahwa aku punya-- seperti kataku,

so what I want to do is I think let's assume we've got so like I said this is

ini akan seperti aplikasi laman tunggal

gonna be like a single page app where

di mana seluruh kontennya ada di HTML.

all the contents in the HTML so we're

Jadi kami hanya akan beralih antara tampilan ini

just going to switch between these views

inside the HTML a better version of this

Versi ini yang lebih baik akan berupa

would be something that loads those

sesuatu yang tampilan-tampilan ini, kau tahu,

views you know over fetch or something

*fetch* keseluruhan atau semacamnya, lalu mendiami secara dinamis.

like that and then populates dynamically

Tapi untuk menghemat waktu, aku takkan membahasnya.

but for time I'm not gonna go with that

Aku akan melakukan hal lain.

today I'm just gonna do something else

Mari menyebutnya-- tampilan *app*, atau semacam itu. Bukan tampilan Supercharged? Bukan. Aku merasa seperti-- - Baiklah. - Baik, aku bisa saja begitu.

so let's just do call app view something like that super charge of you know that

Apa kau akan merasa senang? Ayo buat kau merasa senang.

make you happy let's make you happy

Itu dia, tampilan Supercharged.

they're super charged view let's have a

few of those and let's say this is like

Katakanlah ini tentangnya dan ini-- saya tak tahu.

the about and this is the and actually let's make this the like

Sebetulnya, mari jadikan ini tampilan *home*.

the home view it's gonna be about

Ini akan menjadi *about*, kontak, dan semacam *misc*.

contact and some kind of Miss risk

*Misc*, itu akan berguna.

that'll do it right so we've got home

Baik, jadi kami punya tentang, kontak, dan *misc*.

about contact and misc and what we tease

Akan kami jadikan sebagai apa masing-masing dari ini, menurutku,

is we're gonna do I suppose is we need

kami harus punya route untuk masing-masing tampilan ini.

to have a route for each one of those

Aku akan menaruh atribut route di sini.

views so I'm going to put like a route

Aku akan membuatnya sebagai ekspresi umum

attribute on here and I'm gonna be like I'm gonna make it as a regular

karena itu mungkin berguna.

expression because that might be helpful

Jika katakanlah kami memulai dengan *home*, faktanya *home*

so if we say it begins with home in fact

akan kami jadikan sebagai *slash* ke depan. Lalu akan berakhir dengan itu.

the home we'll just do is the forward slash and then it should end with yeah

Ya. Jadi, ya, itu akan menjadi *find*.route sama dengan *about*

so that will be fine root equals about

Dan itu harus punya *slash*.

that should have the slash gone you'd

Lanjutkan. Kau terdengar seperti ingin menyelaku.

sound like you're about to interrupt

Ya, kami punya pertanyaan--

yeah we have we have a question yeah so

Ya. yang agak kejam, karena aku membuatmu menggunakan *createdCallback*,

which is kind of mean because I make you use the creative callback and now we're

dan sekarang kita ditanya, tidak ada konstruktor

being asked no constructor but create a

tapi *createdCallback*? Aku tahu. Dan kupikir, dalam hal Elemen *Custom*, rasanya

callback I know and I think it's just in the in terms of custom elements it feels

seperti kau harus lebih bergantung pada panggilan ulang daur hidup sebenarnya

like you should more rely on the actual

daripada konstruktornya karena--

lifecycle callbacks then the constructor

Kau tahu, konstruktornya tidak dipanggil.

because the the good searcher doesn't

- Sama sekali? - Tidak sama sekali.

get cold at all no so if I tell you what

- Menarik. - Kuberitahu, apa yang akan kita lakukan adalah biarkan saya selesaikan ini. kontak,

we'll do is let me just finish this up

dan kita akan membuat *misc* di sini.

contact and we'll do a misc here let's

Mari membuat ini di mana kita membuat konstruktor di atas.

do this where we do constructor at the top

*constructor, console.log hello world.*

constructor console.log hello well and

Dan alasannya, sepanjang sepengetahuanku,

the reason is as far as I understand it

ini, *registerElement*, akan berfungsi sebagai prototipe.

this the register arm is going to take

Semua fungsi ini akan menjadi prototipe.

the prototype and all these functions

Konstruktor akan menjadi instantiator.

are going to be on the prototype the constructor is the instantiate er it is

Itu akan berada di aktual, sebagaimana--.

going to be on the actual as it were the

- Benar. - fungsinya dalam istilah-istilah lama.

function in old-school terms so this one

Jadi tidak seharusnya ini disebut, maka segalanya baik.

should never be called all being well

- Mengerti? - Ya. Jadi, kami memiliki ini. Jadi, karena konstruktornya tidak pernah dipanggil,

see so we have our thing so since the

kau sebenarnya memang harus sepenuhnya bersandar

Constructors never called you do actually have to rely entirely on those

pada panggilan ulang daur hidup itu.

lifecycle callbacks so in terms if

Jadi jika seseorang tidak mengetahuinya,

somebody doesn't know classes are just

pengelompokkan hanyalah hiasan buatan dari fungsi-fungsi.

syntactic sugar on top of functions so

Jadi semua kode yang kau miliki di dalam konstruksi berada dalam fungsi itu,

all the code you have in a constructor is in that function that you can use

yang dapat kau gunakan menggunakan operator baru.

with a new operator in this case this

Dalam kasus ini, hal ini tidak pernah

has never been used because we are using

digunakan karena kita memakai API dengan elemen *custom*, jadi

custom elements API so it will take care

ini akan menjaga perpindahan fungsi dari prototipe

of you ripping out functions from the

dan benar-benar meletakkan hal ini pada elemennya.

prototype and actually putting it onto

Jadi konstruktor ini terbuang secara efektif.

an element to the constructor is just being thrown away effectively

Ya, di titik ini. *sc-view*

yes at this point SC view so I'm going

Aku akan membuat yang baru dari gambaran ini, kita akan mengerjakan *js*

to make a new one for the view DJ us and we'll do SC view and then

dan mengerjakan *sc-view*. Lalu kita akan mengerjakan *document.registerElement*

we're gonna do document dot register

Kita akan mengerjakan *sc-view*, lalu kita mengerjakan *sc-view* di sini, seperti itu,

element and we'll do SC view and then we'll do SC view here like so and we

kita tidak menginginkan konstruktor ini lagi.

don't want to construct anymore we want

Mari kita lihat, kita mendapatkan route, dan kami akan suruh *return*--

let's see we do get root and we will say return one of the reasons I like this I

Salah satu alasan aku menyukai ini--

need to extend HT next and HTML element

Aku perlu mengembangkan elemen HTML lagi. *return this.getAttribute*.

again return this.getattribute so

Karena ini adalah elemen HTML yang sebenarnya,

because it's an actual HTML element it's

ini sesungguhnya lumayan baik.

actually really quite nice well done -

Salut kepada Rob Dodson yang menyarankan aku melakukan ini.

Rob Dodson for suggesting that I do this

Bob Dod, dikenal juga sebagai sang Dodinator.

bob-dad the donator also known he suggested use like when

Dia menyarankan-- dia seperti, kenapa kau tidak menggunakan elemen *custom*.

you use custom Alice so good on him all

Selamat untuknya. Baiklah, jadi route *getAttribute* atau *null*.

right so get out to be root or not and

Sebetulnya bisa menggunakan elemen *custom*

it's actually viable to use custom

*Polyfill* adalah--

elements if the polyfill is 66 kilobytes

- 6k? - 6 kilobytes *gzipped*. - Ya. - Dan ini bahkan berjalan di Safari.

gzipped yeah and it even works in Safari

Ya. Dan kupikir ini membuat aplikasimu lebih terstruktur.

so and it makes your app so much more

Ya. Aku pikir ini sama seperti IE 10 plus. Jadi ini didukung dengan baik.

structured yeah I think I think it's like ie 10 plus as well so it is fairly

Aku akan meletakkan tautannya di chat.

well supported I'll drop a link in the

chat good man right so when we attach

Baiklah. Jadi ketika kita melampirkan, yang ingin kita lakukan adalah, menurutku

what we want to do is I think we want to

kita ingin melakukan ini, buat route atau sesuatu seperti itu.

do this starts create routes or

Ayo kita kerjakan.

something like that

Dan yang kita lakukan adalah memunculkan ini di sana.

let's do that and what we'll do is we'll

Dan kita akan mengerjakan dokumen-- aku akan melakukan declaratif ini, *querySelectorAll sc-view* kita. Aku bisa mengerjakan tampilan itu, karena itu akan memberiku hal itu.

do documents I'm going to do this kind of a decorative way query selector all or SC view I could do for let view of that so because it will give me that and

Dan aku dapat melakukan *if view.route*, ini akan bekerja.

I can do if view dot root that should work I can

Dan kita dapat mengerjakan *if not*, lanjutkan.

do it if not continue

Lanjutkan, jadi jika dalam beberapa alasan kita tidak memiliki route.

continue so if we don't have a root for

*view.route* dan aku dapat mengatakan ekspresi biasa baru.

some reason view dot root and I can say new regular expression because I want to

karena aku ingin membuat ekspresi biasa di sekitarnya.

make a regular expression around that

Aku ingin membuatnya *case-insensitive*.

and I want to make it case insensitive

Lalu aku bisa melakukannya, lihat saja.

and then I could do let's see so we need

Baiklah, jadi titik ini-- akan kukatakan padamu apa yang akan kita kerjakan.

it okay so this dot oh I tell you what

*this.createRoute*

I'll do this stop create yeah create

Itu, lalu tampilannya.

root that and then view and you need to

Lalu kita sebaiknya membuat ini, ya,

actually make this right which will be

yang mana akan menjadi route.

the root and it will be the view and

Dan akan menjadi tampilannya. Lalu katakanlah, *this.route.sets* tampilan route. Dan kita dapat katakan *if this.routes*--

then we'll say this dot roots dot set root view and we can say if this start

karena saya akan memetakan di sini--

roots because I'm gonna do a map here

has look at you

Aku tahu. *return console.warn* route sudah ada.

I know return console dot warn roots already exists because we don't want

Karena kita tidak ingin beberapa route

multiple roots being handled by the same

ditangani oleh hal yang sama pada titik ini.

thing here at this point I mean again

Maksud saya, peningkatan pada hal ini

you could an improvement to this would

akan menjadi sesuatu yang lebih

be something that's a lot more nuanced

bernuansa dalam hal mendukung route dan hal lain.

in terms of the roots it supports and

Tapi sekali lagi, aku belum akan mengarah ke sana

stuff but I'm again I'm not going to go

pada titik tertentu ini.

there just at this particular point

Ayo lakukan itu. Aku membuat kode-ku marah. route.

let's do that actually I made my root so

Lakukan hal itu jika sudah punya route. Jika tidak, lakukan ini.

let's do that if we've already got the

Jadi sebenarnya kita perlu membuat satu hal ini.

root otherwise do this so we need to actually create one of these so the

Jadi *createdCallback*, kita akan

created callback we're going to do this

melakukan *this.routes* sama dengan peta baru.

dot roots equals new map and what we'll

Dan yang akan kita kerjakan adalah, ketika kau melampirkannya

do is when you attach it we will do this

kita akan-- kita akan mengerjakan di sini.

dot yeah do it here I see we keep it in the create routes

Sebenarnya kita bisa mengerjakannya di *createRoutes*. Tidak, saya akan mengerjakannya di sini. *this.Routes*.

mmm now they're here this dot roots if

Ayo kita kerjakan fungsi *clearRoutes*, itu dia. Itu akan bekerja.

we do clear let's do a clear roots function there you go that'll do it

*createRoute*, *clearRoutes*. Itu dia.

create root clear roots there we are

*this.routes.clear*. seharusnya dapat membersihkan semuanya.

this dot roots clear should clear them

Jadi kesimpulannya,

up so just to summarize this you're

kau ambil semua elemen *sc-view* di halaman ini.

grabbing all the SC view elements on the

kamu ambil catatan keluar dari atribut

page you're grabbing the records out of

dan bangun peta yang memetakan dari route ke elemen-elemen individual.

the attribute and building a map that maps from the root to these individual

Tampilan. Ya, betul. Tepat sesuai yang ingin kulakukan.

yes I am exactly exactly what I'm gonna

Mari pastikan kalau ini akan berfungsi.

do and let's just make sure that this is actually working

Menurutku pasti berfungsi, kita hanya harus ke--

console IC working we're just gonna just

maksudku kamu bisa menggunakan pernyataan *debugger* di sini.

I mean you could use the debugger

Tapi menurutku, ini mungkin akan lebih cepat.

statement here but for me this might just be faster I was gonna say faster

Menurutku lebih cepat, tapi mungkin juga tidak.

but maybe not of I don't know if

Aku tidak tahu jika [TIDAK JELAS] adalah *iterable*.

coastguards iterable maybe we need to do

Mungkin kita harus lakukan *Array.from*.

area from mmm on area from take sniff

Seharusnya begitu. Tidak, Array.from membuat *iterable* juga.

herbal as well that's really soft let's

Itu seharusnya juga berfungsi. Ayo lakukan Chrome Chrome, lihat versi yang mana yang terbaru.

do chrome chrome see which version it's

Mari kita lihat apakah ini localhost:8080.

up to date let's see whether it's

localhost:8080 yeah you see it's in the

Ini Chrome terbaru.

it's in the nor new chrome I wonder

Aku ragu Chrome yang kupunya sama sedikit lebih tua.

whether the chrome I had there was a little bit on the older side that make

Itu mungkin saja terjadi.

them very well have happened let's

Ayo kita ganti ke *Canary*.

switch the canary then or we just do a

Atau kita coba *Array.from*, yang mungkin saja bisa berfungsi.

radar from which would also work I mean

Perbesar. Perbesar? Di semua panel.

zoom in on all of the panels on all of

the things there you go

Ini dia. Bagus, teman. Poin yang bagus. Kita berhasil.

good man good point well made sir so

Jadi karena itu tidak benar-benar melesat,

since that didn't actually fire though

ayo coba kita cari tahu apa yang terjadi.

let's just let's just find out what's

Tampilkan console.log.

going on console that log view because

Karena kita mengharapkan sesuatu terjadi dari situ.

we expected something from that we

- Jadi kita pasti mendapatkannya. - Kita dapat semua elemen, sangat baik.

definitely get though we get all the

Jadi, *view.routes*.

elements it's a nice view dot root so

Kita lihat kalau-- aku tahu kenapa.

let's see if oh I know why I know why

Aku tahu kenapa. Karena aku punya router, tapi tidak punya--

because I have the Rooter but I don't

Kita tidak punya *JavaScript* untuk itu.

have we don't have any JavaScript for it

there we go so now they're actually

Jadi ini semua sebenarnya--

they're actually being instantiated and

Lihat? Itu semua sebenarnya telah dipakai dan ditangani

handled nor that kind of stuff and

dan semua hal itu. Kabar yang baik.

that's great news so now we've got a map

Jadi sekarang kita punya peta dengan semua route dan tampilan.

with all the routes and the views what

Yang akan kita lakukan adalah memasukkan ini-- lagi,

we'll do is let's throw in again you

kau mungkin akan mengkomponenkan dengan sedikit lebih baik

would probably component though this a

daripada yang kulakukan.

little bit better than I'm doing

Kau tahu, mari lakukan *style*-- *superstyles*--

s-see let's just do style super styles

*Superstyles*! *Superstyles.css{i/}. Kenapa tidak?

super styles that CSS why not

Dan kita akan melakukan tautan.

and we'll do a link so we have a couple

Jadi kita punya beberapa orang dalam chat yang sebenarnya

of people in the chat who apparently are

asing dengan perbaruan-perbaruan ES2015 dalam bahasa *JavaScript*.

not that familiar with the es2015 updates on the JavaScript language I

Aku mendorong kalian semua untuk melihat dan menggunakannya,

encourage you all to located and and use

karena ini membuat *JavaScript* menjadi bahasa yang baik sekali.

it because it makes JavaScript so much

better of a language yeah the amount of

Ini mengurangi kesulitan hanya dengan menunjukkan

pain reduces in in just addressing

masalah tertentu yang kau biasa hadapi ketika

certain prompt that you usually

menulis aplikasi, ini sangat menyenangkan.

encounter when writing apps it's so good

Sebenarnya aku sangat menyukainya. *html, body, padding 0*.

I actually love my body padding:0

Semoga kau masih bisa membaca yang kuketik, kau tahu?

hopefully you can still read what I'm rutted typing you know I know it's a bit

Aku tahu ini agak berbeda, tapi semoga-- ya itulah.

different but hopefully yeah that's what

I want that's the old one it's old

Itu Chrome yang lama.

Chrome let's switch across there from

Ayo kita alihkan dari sana ke sana. Baiklah. Jadi itu berfungsi.

there to there okay so that's working

Dan tambahan informasi, ES2015 sebelumnya disebut ES6.

and your information yes 2015 used to be called es6 es2016

ES2016 sebelumnya ES7.

was year seven yes and now we might we

Ya. Tapi karena mereka berencana melepasnya setiap tahun, mereka

have since they're planning to do a

bertahan dengan versi berdasarkan tahun.

release every year they're sticking to the year based yes yes there'll be no

Ya, jadi tidak akan ada ES di bawah tahun 2015, betul?

yes anything below 2015 right yes yeah

Ya. Kita hanya melewati versi 2000.

we just skipped two thousand versions

Ya, itu bagus. Itu bagus.

yeah it's good that's fine all fine it's

- Semuanya bagus. - Itu bagus.

Tidak ada yang salah dengan itu.

there's nothing wrong with that but it's

Tapi sebenarnya ini sangat membantu, menurutku,

actually really helpful I think because

karena ini seperti menempatkan orang pada jalan pikiran,

it kind of puts people in the mindset of

ini bukan sekedar melepaskan versi yang besar.

it's not just this major release version

Sekarang aku tidak tahu kenapa mereka memilihnya, tapi kudengar dan aku seperti,

no I don't know why they chose it but up

ini hanya memberi kau ide yang kasar

I here and I'm like it just kind of

tentang kapan ini semua benar-benar ada, kau tahu?

gives you a rough idea when this thing actually landed you know not necessary

Ya. Dan dukungan untuk mereka sangat luar biasa,

and the support foam is amazing like a

seperti lintas *browser* yang sekarang.

cross browser now like even a year ago

Bahkan setahun yang lalu, ini seperti, kamu butuh *transpiler*.

it was like oh you need a transpiler

Kau tahu, jika kau memakai *evergreen*, ini sangat bagus.

now you know if you're on an evergreen

Dan jika tidak, kau tetap mendapatkan *transpiler*.

it's something really good and if you're not you've still got the transpilers

Kebanyakkan browser memiliki 99% dukungan dari fiturnya

most browsers have like 99% support or

untuk semua ES2015.

Eevee carries off years 20 yeah it's

- Ini luar biasa. - Iya, ini sangat mantap.

Benar, kembali ke kode.

right back to the code then so what I'm

Jadi yang akan kulakukan adalah aku akan

going to do is I'm going to make each

membuat setiap tampilan-- aku akan mengatur posisi, di atas, 0, kiri, 0, kanan, 0.

view I'm gonna do like position:fixed top:0 left:0 right:0 I'm gonna do the

Aku akan membuat yang kanan dan bawah jadi 0.

the right and bottom zero thing I'm not

Aku akan membuat lebar 100% dan tinggi 100%.

gonna do with hundred homes and I've

Aku telah meningkat sebagai seorang manusia. Baiklah. Ya, kutahu kau tidak akan mempercayaiku.

improved as a human okay so that would

Jadi semuanya akan, secara teori, menempatkan semua tampilan

in theory place all the views on top of

di atas masing-masing seperti itu, yang mana ini tidak ada masalah.

each other like that which is fine let's

Mari kita lihat.

Aku akan mengatur *opacity* 0, dan aku akan

I'm going to do opacity:0 and I'm going to do

coba kita lihat-- *opacity* 0 dan aku tidak akan

let's see personally I'm gonna do

melakukan *pointer-event*.

pointer events and I'm going to assume

Aku akan menganggap bahwa kita memiliki penampilan

that we'll have some kind of visible

ini adalah *class* tampilan aktif.

this is the active view class so let's

Jadi mari kita tampakkan.

do a visible visible anybody who's seen

Siapapun yang melihat pembicaraan I/O-ku, akan tahu

my IO talk knows what I'm doing here

yang kulakukan di sini tentang menggunakan *opacity*

about using point I'll pass t0 and

0 dan tidak ada *pointer-events*.

pointer events and on the reason there

Alasanku melakukannya adalah ketika aku ingin sesuatu

is when I want something to be primed

dibuat prima siap untuk animasi.

and ready for animations it's not always

Ini tidak selalu sempurna. Tapi pada dasarnya, jika aku mengatur tampilan menjadi tersembunyi atau terlihat

perfect but basically if I set

kepada siapapun, ini semua akan dipindahkan dari pohon *render*.

visibility to hidden or display to non they'll be remove from the render tree

Dengan cara ini, seharusnya ini menjadi lebih prima

this way it should be a little bit more

dan benar-benar siap membawa tampilan masuk.

prone and really touchy might bring the

Tapi sekali lagi, ini akan menjadi pertukaran

view in but again this will be a

karena kau punya kemampuan untuk menyiapkan semua tampilan.

trade-off because you potentially got all these views ready to go and so if

Dan begitu jika kau memilikinya dalam jumlah banyak.

you have lots of them again it's I think

Sekali lagi, kurasa, versi yang lebih canggih.

a more advanced version and we can come

Kita bisa kembali ke sini.

back this if you're enjoying the the

Jika kau menyukai router, ketika kita selesai,

Reuter when we're done we can come back

kita dapat kembali dan kita dapat melakukan siaran langsung yang lain

and we could do a under the live stream

di mana kita bisa melanjutkan dan melakukan lebih banyak hal yang mungkin

where we take it on and do like the more advanced stuff that we probably won't

tidak sempat dikerjakan sekarang.

get time to do refine the entire thing

Perbagus semuanya. Beri lebih banyak fitur yang kau mungkin telah menanyakannya

you may have been requesting Twitter for

lewat twitter, misalnya.

example yes which is why you should be

Ya, itulah mengapa kau harus ada di chat dan berkata, hai aku punya ide,

on the chapter in the whole hi I have

karena itu sangat membantu kami. *Pointer-events auto*.

ideas because that helps us a point

Benar, jadi ketika tampilannya ada di sana, ketika itu tampak,

about Auto right so when the the view is

kita akan melakukannya. Semua berjalan baik.

there and when it's visible we'll do

Jadi kita sebenarnya tidak punya apapun di layar

that so that's fine so we don't actually have nothing on screen because they've

karena semuanya diatur tersembunyi, itu tidak apa-apa.

all been set to hidden which is fine

Yang akan kulakukan, hal yang kulakukan di kelas

what I'll do is I'll just do like in

sama dengan di rumah, atau mungkin seperti *view-home*, hal seperti itu. Kita memiliki *view-about*, *view-*apapun. *view-about*, *view-contact*, *view-misc*.

class equals home some time maybe just like view home you about you contact view misc that's good so what I'm gonna

Itu bagus. Jadi yang akan kulakukan adalah aku akan memberi warna di sini.

do is I'm just going to color code these

Sehingga menjadi lebih jelas.

so that it's kind of a little bit more

Latar belakang merah.

obvious background red that's gonna be

Ini akan menjadi terang. Kontak akan berwarna biru.

bright contact is gonna be a blue let's

Kita lihat apa lagi yang kita punya.

see what else did I have at home easily

- *Misc*. - Saya punya *home*, kontak. Saya punya *misc*, ini yang terakhir.

I admit that was the last one and about

Dan *about*. - Dan *about*. - Baik.

about okay I think yeah I hope I'm not

- Sepertinya. - Ya. Kuharap aku tidak mengacaukannya sekarang.

screwing you over right now no I'm sure

Tidak, aku yakin tidak. Kita akan mewarnainya hitam dan putih. Latar belakang hijau.

you know it's black color white and background green wow this is

Itu akan sangat mengerikan. Baiklah.

gonna be really horrible oh well

Paul menulis kode yang sangat besar sekali lagi.

Paul writes tremendous code once again

24 piksel. Mari kerjakan *font-family* Arial, sans-serif. Itu dia. Baiklah. Jadi kita seperti mengatur semuanya kecuali faktanya.

24 pixels let's do font family family Arial there we go okay so we're all kinda set except for the fact that now

Sekarang, kita benar-benar harus membuat router menjalankan tugasnnya.

we've actually got to make the Rueter do

Dan dengan itu, kupikir kita akan memiliki sebuah *nav*.

its thing and for that I think we're gonna have to have a nav so I'm going to

Aku akan membuat sebuah *nav* jadi kita dapat benar-benar seperti beralih

create a nav so we can actually kind of

di antara bagian-bagian ini.

toggle between these various sections so

Mari kita lihat, kita akan lakukan *ul*, *li*.

let's see the URL Oh

Dan di sini adalah titik di mana seseorang

all right and this is the point where he

pergi, menggunakan Emmet karena kau sangat lambat, Paul.

goes use Emmet because you're being so

Ini seperti, cukup adil, dan aku tetap tidak harus melakukannya. Kau tahu? Jadi kita baru saja ditanya bahwa kau, sangat jelas

slow Paul it's like fair enough and I still haven't got to doing that you know yeah so we've just been asked that you

mengatakan selama kamu mengerjakan bagianmu dalam 100

very prominently keep saying as long as you do all your stuff in 100

milidetik, ini bagus, jika kau mau memulai animasi atau sesuatu.

milliseconds it's fine if you want to

- Ya. - Dan tampaknya di desktop, jelasnya,

start animation or something yeah so and apparently and on a desktop obviously it

ini bekerja di bawah 100 milidetik

works in under 10 milliseconds to just

untuk hanya melampirkan sesuatu yang baru ke DOM, mengubahnya ke piksel.

attach something new to the Dom have it

rasterized yeah so keep in mind that

Ingatlah bahwa ini seharusnya bisa juga bekerja pada seluler.

this should also work on mobile and

Dan alat-alat seluler tidak cepat melakukan pengubahan.

mobile devices are not as fast at

rasterization so that's why we have to

Itulah kenapa kita harus sortir ulang untuk benar-benar mempertahankannya

resort to actually keeping it not only

tidak hanya di DOM, tapi benar-benar harus mempertahankan warnanya.

in the Dom but actually having to keep

it painted yeah and actually opacity

dan sebenarnya, *opacity* 0, di sana kemungkinan dioptimalkan.

zero my age TV there might be an

Menurutku, di dalam Chrome pada dasarnya akan menghentikannya menjadi berwarna.

optimisation I think in chrome that basically would stop that being painted

Jadi kita mungkin harus mencari cara lain

so we might have to work around if we

jika kita lihat semacam kilauan hijau yang besar

see a big sort of kind of a big green

ketika tampilan pertama muncul.

flash when the view first shows up I'm

Kuharap kita tidak melihatnya hari ini, tapi mungkin saja.

hoping we won't see that today but we

might but yes whoever let's get that

Siapapun yang bertanya pertanyaan itu, tentunya.

question absolutely so we have this

Jdi kita punya model hasil yang disebut RAIL.

performance model called rail if you tap

Jika kau mengetik sesuatu dan mengharapkan sesuatu

something and you expected something to

semacam yang terjadi pada layar sebagai akibat dari ketikan itu,

sort of happen on screen in response to

kau menginginkan itu terjadi dalam sepersepuluh detik.

that tap you want it to happen in a

Jika tidak itu tidak akan terasa--

tenth of a second otherwise it doesn't

- Bagus. - bagus.

feel good it just feels like and that

Sepertinya kurang lancar. Ini sedikit mengecewakan pengguna.

kind of upsets users but whoever's

Tapi siapapun yang mengatakannya, itu seperti ketika kau melampirkan,

saying is like when you attach something

akan memakan waktu yang lama mulai dari 0 menuju ke sesuatu yang kamu

it takes a long time to kind of get from

dapat perlihatkan, adalah sangat benar.

zero to something that you can show is

Itulah kenapa kau harus sangat taktis mengenai lampiran dan pemisahan.

absolutely right and that's why you've got to be really tactical about kind of attaching and detaching things and it's

Ini adalah kompromi karena kamu

a trade-off because you've got memory

memiliki kendala ingatan dan hal-hal lainnya.

constraints and all that other stuff

Benar. Jadi kita punya, jika aku tidak salah-- ya kita punya

right so we have if I'm not confused yes we've got an Ave

sebuah *nav* dengan banyak tautan ke bermacam bagian.

with the bunch of links to the various

Mari kita lihat, apa yang akan kulakukan?

sections and let's see what do I want to

Aku mau benar-benar memberinya *style*.

do I want to actually style that I'm

Aku akan lanjutkan dan memberi *style* langsung pada *nav* hari ini.

just gonna go go ahead and just star the nav directly today now I'm gonna do

*nav*, aku akan *position.fixed*.

position fixed oh right

Kanan 10, atas 10 piksel.

10 top 10 pixels and I'm just gonna say

Aku hanya akan mengatakan latar belakang.

background data and I'm gonna do a box

Aku akan masukkan *box-shadow*, karena kenapa tidak? 0,2 piksel, 4 piksel, rgba 255, 255, 255, 0.3.

shadow because why not not 2 pixels 4 pixels RGB a 255 255 255 not 0.3 I enjoy

Aku sangat menikmati yang satu ini. - Bayangan putih? - Padding 10.

that one part white shadow 10 oh you're

Kau benar. Tidak, maksudku 0.

right no I meant 0 you've written that

Kau telah menulis garis tertentu dari *box-shadow*,

particular line of Boxford I think a

kurasa, jutaan kali.

Aku tidak tahu apa yang terjadi denganku hari ini, teman. *Border-radius*, itu maksudku.

no just what's going on with me today dude border-radius that's what I mean

yeah 3 pixels all right it's all being

Baiklah. Semua berjalan baik, kami mengakhirinya dengan semacam-- ya.

well we end up with some kind of yeah

- Baiklah, ini-- - Lihat itu.

okay so look at that is not the

Bukan yang paling cantik. Atas, kanan, bawah, kiri.

prettiest top right bottom left just do

Kau punya alat *mnemonic* untuk mengingat urutannya?

you have a mnemonic device to remember

Atas, kanan, bawah, kiri. Ini sebuah kompas. Utara, timur, selatan, barat.

in which order top right bottom left is so it's a compass north east south west

Kenapa searah jarum jam?

clockwise the mathematical order would

Urutan matematika akan berlawanan arah jarum jam.

be counterclockwise I don't know but I

Aku tidak tahu. Aku hanya mengingatnya sebagai-- Baik, hari ini aku belajar.

just remembered as north east south west

Utara, timur, selatan, barat. Itu dia.

so there you go anyway so it thinks I'm

Itu berpikir aku di sana. Karena tidak adanya pilihan lain, aku akan katakan ini, ini akan benar-benar

there now by default as I say this would

membawamu ke berbagai bagian, tepat seperti yang kami inginkan.

actually take you to these various sections which is absolutely what we

Jadi sekali lagi, di dalam skenario sempurna,

want so you can again in the kind of the

server akan benar-benar bereaksi dengan HTML

perfect world scenario the server would actually just respond with the HTML for

untuk setiap laman ini.

each of these pages in my case it's

Dalam kasus ini, ini bereaksi dengan HTML yang sama, seperti yang kukatakan,

responding with the same HTML which as I

ini untuk membuat semuanya sederhana.

say is just to keep things simple so

Jadi ini sangat tidak efisien.

it's not very available but right now

Sekarang, itu adalah tautan sebenarnya dengan muatan ulang situs.

it's an actual link with an actual

Ya. Ini benar-benar hal yang sangat penting bahwa kita makin maju

complete site reload yeah and that's really it is actually an important thing that we progressively enhanced

berkembang, terutama jika kau membuat aplikasi web yang progresif,

especially if you're making a

dengan petunjuk di namanya.

progressive web app with the kind of

Dan lagi, sebagian dari ini mengambil tautan sesungguhnya.

clues in the name and again part of this is like taking

dan lalu kita akan membajaknya.

real links and then we're going to

Tapi ini berarti bahwa kau benar-benar dapat

hijack them but it means that you can

menuju ke berbagai bagian jika *JavaScript* tidak berfungsi

actually get to the various sections if

atau terjadi kekeliruan atau ada sesuatu yang salah.

javascript is disabled or there's some kind of error or just something goes

Kau tahu, ini seharusnya adalah sebuah tautan dan berfungsi.

wrong you know it should be that it's a link

Itulah yang sedang kucoba.

should work so that's what I'm trying to

Setidaknya mencoba mempertahankannya, paling tidak dalam versi yang sederhana ini.

do at least trying to maintain it at

Seperti yang kukatakan, kau dapat sedikit lebih maju tentang ini.

least in this simple version as I say you could be a little bit more advanced

Benar. Jadi hal lain yang aku ingin lakukan adalah

about it right so the other thing I need

aku akan-- ini akan menjadi sedikit mentah, bagian ini, menurutku.

to do is I'm just going to this is going to be pretty raw this bit I think so

Jadi yang akan kulakukan adalah aku akan menulis *document.querySelectorAll*,

what I'm going to do is I'm going to say document dot query select a role and ask

dan aku akan meminta semua *anchor*.

for all the anchors I'm going to do for

Aku akan masukkan *let link* itu.

let link of that I'm going to do link

Aku akan melakukan *link.addEvenListener onClick*

dot add event listener on click for

untuk klik. Dan *onClick*, fungsi *onClick*.

clicks and unclick function unclick this

Ini salah satu bagian yang bukanlah kode berkualitas produksi, mungkin.

is one of the bits that is not production quality code properly

- Tentu saja bukan. - Kita bajak semua tautan.

we're hijacking all the links yeah and

Ya, dan kita tidak peduli. Kita hanya-- benar.

we don't care we just write prevent the

Cegah *default* lalu kita akan melakukan--

default and then we're going to do see

Aku akan katakan padamu apa yang kita butuhkan. Kita akan menulis akan *const* router sama dengan *document.querySelector*.

what we need we're gonna say Const Rooter equals so far the people yep

Jadi untuk orang-orang-- kami ditonton lebih banyak orang

gained a lot more viewers in the

sementara kta membahas ini.

meantime so for the people who's joined

Untuk kalian yang baru bergabung, hai.

a little bit later hi hi this is Paul

Ini Paul. Ini Surma.

hi this Irma and we are building a

Kami sedang membangun router.

Rooter so we open the component actually

Kami membangun komponen yang benar-benar menangani transisi antara tampilan yang berbeda

handles transitioning between the

dalam aplikasi milikmu.

different views in your app and

Semoga ini akan berjalan dengan sangat baik, dengan elok.

hopefully it will do it in a very nice

Kami menggunakan Elemen *Custom* API,

elegant way and we're actually using the

jadi semua orang bisa memakainya.

custom elements API the same rounds

Kami membangun elemen milik kami sendiri.

we're building our own elements I mean

Maksudku, ini semua hal baru untukku.

it's all new to me but that's the point

Tapi terkadang inilah intinya menjadi pengembang web, 'kan?

of being a web developer sometimes isn't

Kau tahu, mencoba hal baru.

it you know try new stuff I mean there's

Maksudku, selalu ada hal baru untuk dicoba.

always new stuff to try we're never

Kita tidak akan pernah kekurangan hal-hal untuk dicoba. Sejauh ini, ya kami pada dasarnya

short of new stuff to try and so far

memperoleh beberapa tampilan yang akan kami

yeah we basically got ourselves some some views that we're gonna transition

transisikan di antaranya. Kami mendapat sebuah elemen tidak tampak untuk router.

between got ourselves a non-visible

Kami lalu mendapatkan JavaScript yang kami sekarang sedang kerjakan.

element for the router and we've got then some JavaScript that we're kind of

Saat ini, aku hanya membajak *anchor* di sini.

working our way through and at the moment I'm just hijacking these anchors

Kenyataannya, aku akan katakan padamu apa yang akan aku

here in fact I'll tell you what I'm

lakukan adalah saya akan mengambil-- katakanlah, *nav anchors*.

going to do is I'm going to grab the let's see the nav anchors so it's just

- Jadi hanya *anchor*nya di sana. - Jadi pertanyaan.

the anchors there so question question

Jadi pertanyaannya tekait dengan pertanyaan lain yang kita miliki di chat.

with another question we had in chat yes

Ya. Pertanyaannya adalah apakah arti *defer* pada *script*?

the question was what does defer mean on

Sebenarnya aku sendiri tahu jawaban yang satu ini.

escape and I actually know the answer to

this one myself go go go go so deferred

Jadi arti *defer* adalah evaluasi dan eksekusi

means that the evaluation and execution

pada JavaScript akan tertunda sampai seluruh dokumen HTML

off the JavaScript will be postponed until the entire HTML document has been

telah diuraikan dan diletakkan pada DOM.

parsed and put in

Dengan begini, *script tag* menjadi tidak memblokir.

to the Dom so that this way this script

Jadi jika kau punya *script tag* di atas dan kau punya *defer*,

tag becomes non-blocking so if you have script tags at the top and you have to

kau tidak akan diblokir sampai *JavaScript* bekerja.

defer you won't block until this job is

Tapi ini akan terus menguraikan HTML, meletakkan semua pada layar,

run but it will continue parsing the HTML put everything on screen and then

dan menjalankan *JavaScript*.

execute the JavaScript and into that I

Mengenai itu, aku ingin katakan bahwa kau telah dirujuk

want to remark that you have referred

ke Elemen *Custom JavaScript*, tapi bukan yang sebenarnya.

your custom elements JavaScript but not

Tapi jika kau gunakan API dari router, akankah bekerja?

the one that X is but you've used the API of the future will that work good

Pemikiran yang bagus.

Aku tidak tahu, kita akan cari tahu.

the defer I don't know we'll find out

*Defer* juga bermakna bahwa ini harus dijalankan sesuai urutan

the defer also means that these should

- sama dengan hal lainnya. - Ya, itu penting.

be executed in order as well that's the

Itu sangat penting diketahui.

other thing that's important it's very

Ada virus pada browser lama yang tidak selalu berakhir baik, jadi kau sebaiknya

important to know there is there are bugs in all the browsers where that doesn't necessarily end up being true so

selalu berhati-hati. Kau mungkin butuh pemuat *script*.

you've got to always be careful you might need a script loader again

Sekali lagi, aku hanya mengoperasikannya dengan beberapa asumsi.

I'm just operating with a certain bunch

Tapi untuk produksi, ya, kau mungkin akan harus memikirkan beberapa hal lain.

of assumptions but for production yeah you'd have to probably figure some of

Haruskah kita cari tahu apakah ini benar bekerja?

that stuff out should we find out

Ya itu akan sangat menarik.

whether it actually yeah that would actually be very interesting well I

Baik, aku tidak melihat ada kesalahan.

don't see any errors that is amazing so

Ini luar biasa. Jadi aku akan memanggilnya dan

I'm gonna call that and it says rooted

katanya *router.go* bukan merupakan fungsi karena aku tidak pernah benar-benar

octo is not a function because I haven't

menulisnya. Jadi kita harus menambahkan itu.

actually written it so we should add

Saat kau panggil *router.go*, ini akan menjadi bagian yang aktif sekarang.

that so when you call go this would be

Aku akan memberinya URL.

the active part now so I'm gonna give it

Aku akan melakukan *window.history.pushState*.

a URL and I'm gonna do window dot history dart push date and I'm gonna say

Aku akan tuliskan *null*, yang merupakan objek yang dinyatakan,

no which is the state object or is that

atau apakah itu judulnya?

the title oh well it's a state object

Bukan, ini merupakan pernyataan objek, lalu judul. Judul, lalu URL.

then title then the URL yeah so we want

- Ya. - Jadi kami akan melakukannya.

to do that and then we want to say this

Lalu kami mau mengatakan ini *onChanged*.

dot unchanged so we're going to push the

Jadi kami akan menekan URL lalu pada dasarnya kami akan-- dengan cara yang sama, ketika

URL and we're gonna basically in the

kamu *popState* di sini, kami akan memeriksa apa URL saat ini.

same way when you pop state here we're going to check what the current URL is

Lalu kami harus masuk ke sini, yaitu *onChanged* kami.

so then we will now need to go in here which is our unchanged and we'll say

Aku akan tulis *this.routes*.

this dark roots going on what we need to

Sekarang kau tahu apa yang harus kita lakukan?

do at E what we'll do is we'll say Const

Yang harus kita lakukan adalah kita akan tulis *const path*-- *path*? Ya. *window.location.pathName*.

path yeah window dot location dot path

name how exciting we're going to ask at

Kita akan beraksi-- katakan, Paul, katakan. - Ini dia. - Inggris.

words ball words here we go yeah yeah

Ya. Ya, itu dia.

that's the one we're going to actually

Kita akan benar-benar menanyakan apa *pathname*-nya.

ask what the path name is and then what

Lalu yang kita akan lakukan adalah kita akan,

we're going to do is we're going to

coba lihat, *for*.

let's see before watch do we want to do

Baik, apa sebenarnya yang kita ingin lakukan?

a four no I think what we'll do

Bukan, aku akan katakan yang akan kita lakukan. *const routes* sama dengan *Array.from* dan kita

const routes equals array dot from and

akan melakukan *this.routes.keys*.

we're going to do this dot routes dot

Jadi ini akan menjadi ekspresi umum yang berbeda, benar?

keys so this will be all the different regular expressions right yeah so I'm

- Ya. - Jadi aku akan melakukan itu.

going to do that and then we're gonna

Lalu aku akan tulis *const route* sama dengan *routes.find*.

say const routes equals routes dot find

Aku akan memberinya fungsi *callback*.

and we give that a callback function so

Jadi jika route-- jika kita mengujinya melawan *path*. Jadi itu berfungsi. Seharusnya demikian.

if the route is if we test it against path so that works that should be there

Jika kita tidak punya route, kita bisa kembali.

if we don't have a route we can return

Jadi pada dasarnya, ini adalah jika kita tidak menemukan pasangannya.

so basically this is if we don't find a

Sekarang jika kita menemukan pasangannya, ini akan

match now if we did find a match this

menjadi bagian di mana kita sekarang butuh sejenis permulaan

would be the bit where we now need to kind of kind of start toggling views and

tampilan beralih dan seterusnya. Mari kita pikirkan tentang ini.

so on so let's have a think about this

Kita butuh menemukan tampilan yang mana.

so we need to sell we need to find out

Jadi *const view* akan menjadi *routes.get*.

which view it is so so const view is going to be route this dot routes dot

Lalu kita akan mendapatkan dari route.

get and then we're gonna get the from

Dan itu akan memberi kita tampilan kembali.

the root and that will give us the view

Kita mungkin akan mau menyimpan catatan tentang itu jadi

back and oh we're probably going to want to keep a track on that so it's the

itu adalah tampilan sekarang. Jadi jika ini tampilan sekarang, ini dia.

current view so if it's the current view then we are actually not tell you what

Sebenarnya tidak. Aku akan katakan yang akan kita lakukan. Kita akan lakukan pembuatan tampilan baru.

we'll do with a const new view and so we

Jadi kita bisa bilang jika ada tampilan sekarang-- bersabarlah denganku

can say if there is a current view just bear with me i think this is gonna work

kurasa ini akan berfungsi. Ya, ya, ya. Baiklah.

so we know when it yep yep okay so

Jadi di sana tampilan sekarang, pikirkanlah.

there's a current view mmm thinking it

Baik, mari kita lihat yang harus kita lakukan.

through okay let's see what we need to

Tampilan yang baru.

do so the new view by default what we'd

Secara *default*, yang ingin kita lakukan adalah kita ingin tulis *new view.in*.

want to do is we want to say new view

Katakanlah kita dapat fungsi yang bisa melakukan itu.

dot in let's say we've got a function that's going to do that but we know that

Tapi kita tahu bahwa jika di sana ada tampilan awal,

if there's an existing view we have to

kita harus mengubahnya, benar?

transition that out right so let me

Biar kutebak, di sana ada fungsi keluar?

guess there's an outer function there's

Di sana ada-- ya. Aku beranggapan, aku akan meletakkan-- coba kulihat.

an oh yeah I'm sure I'm assuming by the

Akan ada fungsi masuk di sini.

way I'm gonna put let me see there's going to be an in function here there's

Akan ada juga fungsi keluarnya ketika tampilan ini harus keluar.

gonna be an out function as well when

Kita akan memperbaharui fungsi

this view has to leave and we're gonna

seandainya kau di *slash about* dan kau *about*

do an update function in case you kind of go to your in slash about and you go

sesuatu yang lain.

about something else we're just gonna

Kami hanya ingin tulis tampilan sekarang untuk memperbarui dirinya sendiri.

tell the current beauty like update itself so we'll assume they all take

Kami beranggapan ini akan membutuhkan beberapa data,

some kind of date

yang kurasa kita bisa menebaknya dari ekspresi reguler.

which I think we can probably figure out from the regular expression right so we

Benar, jadi kita punya route. Mari kita lihat.

get the roots and let's see so we want

Kita ingin tahu apakah ada tampilan sekarang.

to know if there's a current view so

Jadi, baiklah. Tunggu, mari kita lakukan.

okay so let's do this

*if this.currentView*-- kenapa tidak?

if this dot current view yes do that if

Ya, mari kita lakukan. Jika ada tampilan sekarang dan jika tampilan sekarang itu adalah

there's if there's a current view and if the current view is the same as the new

sama dengan tampilan baru, lalu kita

view then we tell the current view to

minta tampilan sekarang untuk memperbarui. Aku akan katakan padamu yang harus lakukan

update and I'll tell what we need to do

juga adalah mendapatkan data. *const data*

as well let's do they get the data

sama dengan-- biar kulihat. Ini akan menjadi *route.exec* melawan *path*.

Kant's data equals you see a B root duct yeah B root dot exact against the path

Itu akan menjalankan ekspresi reguler terhadap nama *path*.

that would then there execute against the the regular expression against the

Karena aku, dalam kode-ku di sini, aku telah menangkap beberapa data, jadi

path name so cuz I in my in my code here I've got like capturing stuff so that in

secara teori, itu bisa melewatinya.

theory that can get passed through and

Lalu tampilan bisa memutuskan apa yang akan dilakukannya dengan data itu

then the view could decide what to do

ketika mendapatkannya. Itu sepertinya berguna.

with that data when it's got it so that's kind of kind of handy so we need

Kami harus melewati itu di dalam sana.

to pass that in there so if there's a

Jadi jika ada tampilan sekarang, dan jika tampilan sekarang itu cocok

current view and if the current view

dengan yang baru yang kita coba bawa masuk,

match is the the new one that we've

maka tampilan sekarang dapat langsung memperbarui.

tried to bring in then the current view

Jadi kami dapat kembali di sana.

can just update so we cannot we could

Kami dapat mengembalikannya.

return there so we can return that here

Sekarang kami akan melakukan *this.currentView.out*,

we're gonna do this dot current current view dot out which gonna pass the data

yang mana kami juga akan melewati data.

as well and we need to wait for that to

Kami harus tunggu sampai selesai sebelum yang itu masuk.

finish before that one comes in so why

Kenapa kau butuh data masuk/keluar?

do you need data in out you never know

Kau tak pernah tahu. Sebenarnya aku mengerti, karena aku--

you never know because I so let's say

Katakanlah, misalnya, kau akan keluar

for example you're going out from your

dari tampilanmu sekarang.

current view and let's say for example

Katakanlah, misalnya, kau melakukan transisi yang indah

you're doing a fancy transition from one

dari bagian yang satu ke bagian yang lain.

section to another let's say you got a

Katakanlah kau punya transisi indah ini

fancy transition from about to get to

dari *about* ke kontak, dan itu

contact and that's different from your

berbeda dari yang biasanya.

standard one and what you might do the

Datanya akan berisi *path* yang baru.

the date is going to contain the new

Kau akan mengatakan pada tampilan *about* siapa yang datang.

path so you're going to be told you're gonna be telling the about view whose

- Ya. - Yang mana dalam hal ini akan berupa kontak.

incoming yeah which in this case will be

Ini bisa, aku punya kasus spesial untuk itu.

contact amigo oh I've got a special case

Aku akan membuat animasi untuk itu.

for that I'll do my animation for a

Itu sebenarnya masalah yang kuhadapi sekarang,

problem that I have run into right now

bahwa aku mau memiliki animasi spesial untuk sebuah lapisan.

I want to have a special animation for

an overlay there you go and it just

Sekarang sangat terlihat bodoh.

looks stupid right now so I might have

Jadi aku mungkin harus benar-benar menambahkan itu pada web-ku.

to actually add that to my there you go

Itu dia. Kau lihat? Praktis.

you see handy alright so we've got the

Baiklah. Jadi kami punya ini.

this so what I'm gonna do is I'm going

Yang akan kulakukan adalah aku akan mengatakan-- Jadi katakanlah *outViewPromise*.

to say so let's say out view promise so

Aku akan pakai beberapa *Promise* di sini.

I'm going to use some promises here if

Jika kau tidak terbiasa dengan *Promise*, ini

you're not use promises this might look

mungkin akan terlihat sedikit aneh. Dan semoga kau akan mengikutinya.

a little bit strange and hopefully

Tapi, jika tidak, ada beberapa hal yang dapat kamu baca.

you'll follow along but if not you know there's plenty of stuff that we can read

Aku yakin jika kau menanyakan itu,

you can read and I'm sure if you asked

Surma di sini akan memunculkan beberapa tautan.

the question so here we'll pop in some

Kami akan katakan itu.

links so we're gonna say that and we're

Kami akan beranggapan itu, secara *default*, di sana

going to assume that by default there is

tidak ada animasi keluar.

no out animation so we'll just resolve

Kami hanya akan menyelesaikan *Promise* dengan cepat.

the promise immediately however if we

Bagaimanapun, jika kami harus melakukan keluarannya

had to do the out we're going to update

kami harus memperbarui *outViewPromise* untuk itu, berarti kami harus tulis kode itu ke sini.

the out view promise to that which means we'll have to code that into here and so

Kami akan tulis *outViewPromise.then*, lalu kita dapat melakukan itu.

we'll say out of you promise start then and then we can do that so this really

Ini sebenarnya kekuatan *Promise*,

is the power of promises that you can

bahwa kamu bisa tuliskan rantai *Promise* yang akan

just write chains of promises that will

menjalankan satu ke yang lainnya.

execute one after the other and it can

Itu bisa berupa transisi, bisa hanya memuat data. Kau tahu semua langkah-langkah sebelumnya

be about transitions it can be just loading data and you know all the steps

akan melanjutkan ketika kode-mu sedang dijalankan.

beforehand will have continued when your

Baiklah. Jadi yang akan kulakukan adalah aku akan melakukan hal ini di mana

code is being run all right so what I want to do is I want to do this thing

setiap tampilan hanya akan seperti menekan kembali dan menghilang,

where each of you is just going to sort of kind of push back and fade out and

dan yang lainnya akan menekan masuk dan lenyap.

the other ones gonna pull in and fade in

Aku akan sepenuhnya menghilangkan salah satunya,

I'm gonna fade one out immediately like

dan aku akan membawa masuk yang satu.

fully and then I'm gonna bring in the

Ini seperti memberi seperti suasana dorongan dan tarikan dari transisiku.

next one so kind of gives us this push push pull kind of feel for my

Ini hanya di tahap transisi, ini bisa berupa apa saja.

transitions it's just our transition

Yang akan kulakukan adalah aku akan melakukan transisi dari transformasi.

this could be anything what I'm going to do is I'm going to do a transition on transform people keep asking how they

Orang bertanya bagaimana mereka bisa diinformasikan jika kita sedang siaran.

can be notified if we're going live and

Pertama, kau harus berlangganan saluran YouTube kami,

it's first of all you should be subscribing to our channel because we

karena kami mengirim pemberitahuan ketika kami sedang siaran.

send out notifications when we go live

Itu benar. Dan juga, masuk ke twitter dan ikuti kami.

not true and also go to the Twitter's

Ya, itu juga benar.

and follow us now that's also true I

Sepertinya akan ada pada hari Kamis jam 2.30,

tend to be Thursdays at 2:30 roughly

kurang lebih, sekali sebulan.

speaking once a month I'm so expected

Jadi tunggu dari sekarang. Tapi, apa kau tahu?

from now but you know what we can always

Kami dapat melakukan lebih jika kau suka.

@aerotwist, @DasSurma, kami akan memberitahumu.

lists at the Summa will let you know

yeah that's the ones we appreciate you

Dan kami berterimakasih jika kau bertanya karena kami sangat suka melakukannya.

asking because we're enjoying doing them

Jadi begitulah. Baik.

so there we go alright so I'm good what

Jadi yang akan kulakukan adalah aku akan membuat

I'm gonna do is gonna make these

animasi-animasi ini dengan sangat lambat awalnya,

animations super slow to begin with just

Jadi kita benar-benar bisa melihat yang terjadi dan mengidentifikasi

so that we can actually see what's

setiap masalah, jika ada. Jadi 0, 0, 0,3, 1.

happening and any issues if there are any so not-not-not 0.31 just you know we want

Dan kita akan melakukan hal yang sama untuk *opacity*.

to do the same for opacity opacity oh

Jangan ambil itu, Paul. Ambil sedikit di sana.

don't take that poll take there so there

we go and we need so we need a transform

Dan kita harus mengubah, mengubah skala 0,95.

transform scale not point 95 so it's a

Jadi ini hanya sedikit menekan.

little bit push back and then we'll do

Lalu kita akan melakukan *transform none*.

transform no no there we are

Ini dia. Transformasi dan *opacity*, hal yang sangat super.

transforms an opacity super-duper stuff

Menurut kami, yang akan kami lakukan adalah kami akan mengembalikan. Kami akan mengembalikan *Promise* baru.

so in our view what we're gonna do is we'll do return and a return and you

Itu akan menyelesaikan atau menolak. Kami akan menulis *const onTransitionEnd*. Itu yang akan terjadi.

promise and that's going to resolve or reject and we're going to say Const on transition and is going to be that I

Aku harus benar-benar me-- aku belum melontarkan

should really be and fight up this

kode ini dalam waktu yang lama.

coding in quite a while now it's

Jadi ini bisa saja salah. Ini akan menjadi daerah yang berbahaya di mana ini semua

becoming the the danger zone where it

pasti tidak bekerja tapi kau telah menulis

will most definitely not work but you've

banyak hal yang kau tidak ketahui apa penyebabnya.

written so much of the on to actually know what is the cause

Ya, dan aku takkan percaya jika ini bekerja.

yeah and I'm gonna not believe it if it

Jadi daftar *class* ini, kami akan menambah *class*

did work so this class list we're gonna

karena kami tahu bahwa itu akan ke arah-- di mana itu?

add a visible class because we know that that's gonna wear as it where is it

Ke *class* yang akan kami tambahkan ini.

where is it that's the visible class here that we we

Jadi kami akan menambahkannya.

added on so we're gonna have that added

Baik. Jadi kami akan melakukannya.

on okay so we're going to do that and

Aku akan meminta untuk akhir transisi.

we're gonna ask for the transition and

Jadi *this.addEventListener transationend*, *onTransationEnd*.

so this the eventlistener transition and on transition end and we're gonna do

Kami akan melakukan *this.removeEventListener* padanya.

this stop remove event listener and then

Lalu saya akan menyelesaikan *Promise* di titik ini.

we're gonna resolve the promise at this

Jadi kami akan menambahkan *class*.

point so when the we're gonna add the

Saat transaksinya berakhir, kami

visible class and when the transitions

akan menyelesaikan *Promise* yang mana akan membiarkan segala

ended we're going to resolve the promise

yang terikat melawannya.

which would allow anything that was

Hal sama akan nyata untuk keluarannya.

chained against that and the same will

Mari kita lakukan juga.

be true for the out let's do that as well so let's do that

Jadi mari kita lakukan.

and here we're going to just return

Dan di sini, kita akan kembali ke *Promise.resolve*.

promise dot resolved one thing to keep

Satu hal yang harus diingat ketika kau melakukan sistem ini di mana

in mind when you do these assistance

kau memiliki *Promise* yang saling terikat satu sama lain,

where you have promise as a chain on to

Jika salah satu dari *Promise* gagal, semua rantai berikutnya

each other if one of these promises fails all the subsequent ones will not

- tidak akan dijalankan. - Ya.

execute series will have to add handlers

Jadi kau akan harus menambahkan *handler* jika kamu mau rantai berikutnya tetap dijalankan.

if you want the other subsequent chains

to be executed anyways yeah so think

Pikirkan tentang kesalahan penanganan, itu selalu jadi nasihat yang baik, sebetulnya.

about your error handling just always good advice actually but in

Tapi pada kasus ini, ini menjadi lebih penting karena tiba-tiba kau

this case it's even more important

akan hanya memiliki sistem yang tidak bereaksi lagi

because suddenly you will just have a

karena *Promise* sudah ditangani, tergantung begitu saja,

system that doesn't react anymore because it compromises handle just

- tidak terselesaikan atau ditolak. - Apa yang bisa salah?

dangling in the air not being resolved

Ya, ini baik-baik saja.

or we go wrong okay so let's see so

Baiklah. Jadi mari kita lihat. Jadi sesuai teori kita punya sesuatu yang, ketika ini masuk, ini akan kembalikan

we've got in theory we've got something

*Promise* [?baru?], ini akan ditambahkan di dalam *class*.

that when it comes in it's going to return new promise it's gonna add the

Harus menunggu transisi berakhir.

visible class it's gonna wait for the

Ketika itu terjadi, ini akan memindahkan itu dan selesai.

transition end when that happens it's

Sama dengan keluar, kecuali itu memindahkan *class*nya.

going to remove that and resolve same out except that it removes that class so

Kita mungkin bisa, kalau kita menjadi sedikit lebih KERING,

we could probably if we were being a

kita dapat memindahkan beberapa hal di sini.

little bit dry we could remove some of

Tapi semuanya sama, kita mengerti.

this stuff here but all the same we've

Lalu pembaruannya saja, karena ini tidak akan segera melakukan sesuatu.

got it and then just the update is not

Yang akan kami lakukan adalah kami hanya lakukan *console.log*

going to do anything immediately I tell you what we'll do is we'll just console

data saat ini, hanya agar kami dapat melihat bahwa ada beberapa data.

that log data for now just so that we

Mari kita lihat.

can see that there is some data so let's

Tampilan *Promise*, jika tampilan sekaranglah tampilan yang baru.

see the view promise if their current

Tampilan sekarang. Kami belum melakukan apapun dengan tampilan sekarang.

view is the new VR the current view we haven't done anything with the current

Jadi saat pertamanya, *currentView* akan diatur menjadi tiada.

view so the first time through current view will be set to nothing so let's see

Mari kita lihat. Jadi tampilan baru, kita lihat, akan berupa itu.

it so the new view let's see it's gonna

Bisa kami tulis-- *currentView* bla bla bla.

be that and we could say right there we

Baiklah, dalam teori, kami hanya dapat katakan tampilan saat ini

could just say this current view is the

adalah tampilan yang baru, benar? Kupikir itu akan--

newbie right I think that will sounds

Itu sepertinya benar.

Ini mungkin akan berfungsi untuk--

work for probably laid it out the old

Ini akan menyamarkan yang lama dan juga *currentView* yang baru.

one and so the newest current view is

Jadi kita ada di potongan *misc*.

there so we're in slash misc ooh now

Sekarang *nav* itu telah hilang.

that nervous disappeared yeah we don't

Ya, kami tidak menginginkannya.

want that you know we don't want that so

Tidak, kami tidak menginginkannya

let's see if we can just put his own

Mari lihat jika kita cuma bisa letakkan a z-indeks dari 1 di atasnya dan membawanya kembali.

index of one on that and bring that back

okay okay so this is already starting to

Jadi ini telah mulai berfungsi, secara tidak sengaja,

work incidentally because we've gone to

karena kami menuju ke potongan *misc*.

slash misc as in we've deep link to the

Seperti kita telah bertautan dalam ke potongan *misc*,

slash misc the route has picked it up

router memungutnya, menambahkan transisinya

it's added the transition in on the misc

di dalam pada tampilan *misc*.

view all the other views so if we look

Semua tampilan yang lain-- jika kita lihat pada elemen-elemen,

at the elements you can see that misc is

kau bisa lihat bahwa *misc * itu terlihat tapi tidak dengan kontak, *about*,

visible a contact and about and home

dan *home*. Ayo ke kontak.

aren't so let's go to the contact so

Itu akan melenyapkannya dan memasukkan yang terlihat itu.

that's gonna fade that out and brings in

Benar-benar berfungsi seperti yang diharapkan.

the visible it is literally working as

Itu luar biasa.

intended oh that is amazing

Baiklah. Itu tidak biasanya terjadi.

ah alright that doesn't normally happen

Biasanya saat aku menulis kode, biasanya terjadi kepanikan luar biasa karena--

normally when I write code it's normally a massive panic because we need a buck

Kita butuh *bug* untuk siaran ini.

for this live stream yeah so we need

- Ya, seseorang-- - Tulis sesuatu! Ya.

something yes I'll write some code don't

Aku akan menulis kode, jangan khawatir.

worry somebody actually remarked they

Seseorang benar-benar bilang, mereka seperti, kulihat kau telah buat satu *bug*

were like I see you've had your

untuk episode ini.

customary one bug for this episode and

Dan ini seperti, kau terlalu memuji kami.

it's like you're giving us way too much

Seperti aku menulis kode dan ini ada *bug*-nya.

Aku seorang pengembang.

cohdon as bugs I'm a developer we write

Kami menulis *bug*, ya tidak?

bugs don't we we were kind of a mace or

Kami kadang kagum pada diri sendiri

a seller we hit like the one hour mark

bahwa kami mencapai satu jam di dua episode terakhir.

on the last two episodes we're just

- Ya. - Sekarang kami tunggu saja sesuatu

waiting for it to go wrong horribly

menjadi salah, sangat-sangat salah. Sangat, sangat salah. Tapi ini tidak, jadi.

horribly wrong very wrong anyway so this

Ini benar-benar berfungsi seperti yang diharapkan.

is actually working as intended but one

Tapi satu hal yang kurasa perlu kita perhitungkan adalah ini.

of the things that I think we'll need to account for is this if you go like let's

Jika kau seperti, mari kita lihat, *home*, *about*, *contact*, *misc*,

say home about contact misc right we

kita ingin *misc* masuk.

want misc to come in but did you see in

Tapi apakah kau lihat di latar belakang di sini?

the background there there was a weird

Itu adalah campuran warna yang aneh.

mixture of color yes and actually look

Ya. Sebenarnya, lihatlah. *Home*, *about*, *contact*, dan *misc* semua memutuskan bahwa mereka terlihat.

home about an contact and misc are all deciding that they're visible and I

Menurutku ini karena faktanya bahwa *Promise* itu

think this is because of the fact that

berantai semua seperti-- setiap kali kau panggil *onChange*,

those promise chains are all kind of we've got a few but every time you you

kita membuat rantai *Promise* itu.

call on change we create that promise

change yeah and so it's a bit like a

Jadi ini hampir seperti urutan panggilan.

call order thing almost usually kind of

Ini biasanya hanya akan seperti--

goes that last one wins its last like

Yang terakhir menang, tapi yang satunya tetap terjadi di latar belakang.

the other ones are still happening in

Ya. Jadi itulah yang bisa diperbaiki pada situasi ini.

the background yes so let's that's that's something to fix in the situation

Itulah kenapa jika kau lakukan hal semacam ini,

which is why if you're going to do

selalu berguna jika transmisimu berjalan lambat

something like this so he's useful to have your transitions run slow and to

dan meniru klik cepat semacam itu,

like mimic that sort of fast click or

atau hanya klik maju mundur di kontrol riwayat browser

just kind of click back and forth in the browser the history controls so you can

sehingga kau dapat menemukannya.

kind of find that out so we have a

- Jadi kita punya pertanyaan. - Ya.

question yeah in production would you

Di produksi, akankah kau memuat tiap tampilan di kemudian waktu?

load each of you at a later time and I

Kurasa itu sesuatu yang akan kita implementasikan di salah satu--

think that is some that we would actually implement in one of the yes in

Ya. Di router episode 2, barangkali, jika itu akan terjadi.

Ruta episode two so to speak yes if

Ya, jika orang-orang ingin kami kembali dan melakukan router

people want us to do that if want to come back and do like the more advanced

yang lebih canggih, kurasa pasti.

Rooter I think definitely so the fact

Faktanya, aku punya satu HTML ini yang selalu

that I've got one HTML that's always

melayani konten yang sama untuk setiap tautan dalam, kurasa,

serving the same content for every deep

itu bukanlah sesuatu yang kau inginkan.

link I think is not what you'd want

Kurasa kau ingin tiap tampilan di sini di HTML-ku,

I think you'd want each of these views here in my HTML I think you'd want each

Kurasa kau ingin tiap-tiap dari itu untuk dipisahkan menjadi dokumennya tersendiri.

one of those to be its own separate

Kau akan lakukan *fetch*, memperlakukannya sebagai dokumen.

document you do a fetch treated as a

Jadi apa yang mungkin kami lakukan adalah kami mungkin punya elemen wadah,

document so what we probably do is we'd

semacam itu di aplikasi yang akan berupa seperti,

probably have a container element something like that in the app that

inilah di mana tampilan harus ada jika kau telah memuatnya.

would be like here's where that view needs to live when you've loaded it and

Ketika kau klik itu, kami mungkin

then when you click it we probably do

melakukan semacam perlombaan di mana kami menaruh pemutar

something like a race where we put up a

jika terlalu lama waktu *fetch*-nya.

spinner if it takes too long to fetch it in and then you know get the book

Kita sebenarnya bisa menulis elemen *custom* yang

actually write a custom Anna there's an

di *sc-remote-view* itu, daripada meletakkan

SC remote view that instead of having

konten sebenarnya di dalam, ambil saja

natural contents inside just takes a

konten URL-nya, dan, kau tahu, jejali ke dalamnya.

content URL that it fetches and you know

- Lalu berhasil. - Ya.

stuffs it in there and then it works

Dan itu, menurutku, akan lebih baik.

yeah and I think would be better and

Tentu, seperti kataku, apa yang

certainly as I say what we're doing

kami lakukan sekarang adalah kami telah menyiapkan semua elemen ini

right now is we've kind of got all these

dan siap beraksi.

Itu tidak akan berukuran bagus.

and ready to go and that isn't gonna

Itu artinya bisa saja kau mendapatkan dokumen yang besar.

scale very well it's going to mean that you have potentially huge documents but

Tapi melampirkan dan menghilangkan semacam itu dan seterusnya

that kind of handling of attaching and

bisa menjadi lumayan rumit.

detaching and so on can get quite

Dan ini router versi sesederhana mungkin yang kutahu.

convoluted and this is the simplest possible version of a Rooter that I know

Jadi itu mengapa aku mau melakukannya di sini jadi kita tidak

about so that's why I wanted to do it in

menghabiskan banyak waktu selama kita membahasnya.

this so that we're not spending forever on your time as we go through it so I'm

Jadi saya akan mencoba memperbaiki masalah ini secara kasat mata.

going to try and fix this this issue with all of them being visible and I

Menurutku cara termudah untuk dapat melakukannya

think the easiest way to probably do it

yaitu menambahkan blok di sekitar sini, dan di sekitar *Promise*.

would be to add a kind of block around around this here with their code around

Dan, kurasa, cara untuk memikirkannya adalah ketika ada animasi,

the promises and I think the probably the way to think about this is that when does animation going on we want to store

kami ingin berlama-lama. Jadi jika aku klik-- tidak, salah browser, Paul.

so if I was to click no wrong browsable

Jika aku klik, kau tahu, 1, 2, 3,

if I was to click you know 1 2 3 4 very

4 dengan sangat cepat, manapun yang lenyap,

quickly when whichever one's going out I

aku ingin itu menjadi yang terakhir diklik masuk kembali.

would want it to be the last one that clicked that kind of came back in yeah

- Ya. - Baik. Jadi jika itu yang terjadi.

ok so since that's the case if somebody

Jika seseorang meng-kliknya ketika itu sedang masuk,

clicked while it was coming in it would

itu akan tetap selesai lalu lenyap, bukan?

still finish and then go back out right

Benar. Benar, benar. Ya, tepat sekali. Mari lihat apa yang bisa kita lakukan di sini.

right right right yeah exactly so so let's see what we can do here this is

Selalu menjadi agak rumit ketika aku memikirkannya.

gonna this always a bit fiddly and I

Jadi apa yang akan kita lakukan-- jadi yang ini,

think this through so let's say we want to do so we're gonna do mmm so this one we should allow

kita harus membiarkan mereka melakukannya.

them to do this and then we say it so if

Lalu kita katakan, jika itu tidak bergerak--

if it's not animating if it's not animating or if it is on a meeting let's

atau jika itu bergerak, mari lakukan itu. Jika itu bergerak, kembali.

do that if it is animating return so we

Jadi kita tak biarkan itu melakukan hal semacam itu.

don't let them do anything like that

Itu secara otomatis tidak terdefinisikan.

that by default will be undefined so we

Kini kita bisa katakan bahwa itu benar.

can now say that that's true

Saat tampilan sekarang yang keluar sudah hilang, kita bisa lakukan-- *this.animation* adalah *false*.

when the when the current view this got out has gone we could do this the animating is false we can we

Kita bisa atur ulang itu.

can reset that so now we're going to

Kita akan biarkan interaksi masuk kembali jadi

allow interactions back in so this code

kode ini seharusnya berjalan.

should run I think that would that work

Menurutku-- apakah itu akan berhasil?

this is where yeah as I say this is

Ya, ini seperti kataku tadi, inilah di mana kerumitan terjadi.

where it gets complicated now so well

Jadi apa yang ingin kau lakukan--

what do I want to do it so we have this

kita punya bendera ini saat kami berada di suatu transisi sekarang.

flag when we are basically in a

Maksud dari animasi seharusnya ini, kan?

transition right now that is what animating is supposed to mean

Ya. Dan saat kita berada di dalam animasi--

right yes and when we are in an

terlebih lagi di luar animasi-- kita ingin

animation in the out animation more so

menimpa tampilan yang seharusnya masuk dan memulai pengikatan--

we want to overwrite the buter is supposed to come in and set off yes so

Ya. Jadi *newView* ini takkan berguna untuk kita.

this this new view here would be no good

Kita ingin mengatur-- di mana kita punya newView?

to us so we want to set where we've got

Mari hilangkan itu dan ganti dengan *this.newView*.

a new view so let's get rid of that and make that's this not yet a class

Ya, harus merupakan variabel *class*. Ya, jadi kita bisa menyimpannya untuk nanti. Jadi, jika tampilan sekarang sesuai dengan tampilan baru,

variable yes we can store it for kind of future so if the current view matches

Jadi *this.newView* di sini adalah nilai sekarang manapun. Mari kita lihat. Itu bagus.

the new view blah blah blah and then this new view whatever that current value is so let's see so that is fine we

Jadi kita memperoleh *Promise* dari ini, tapi ini--oh,

get we get a promise for this but this

apa kita menginginkannya?

oh do we even want this I don't know Oh

Aku tak tahu. Mari kita lihat bagaimana kelanjutannya.

we'll see how we get on here let's see

Mari kita lihat apa yang akan terjadi. Kita akan melakukan ini.

what happens so we'll do this the break

-Apakah itu rusak? -Itu rusak. Baik, kami merusak.

here broke okay we broke things here's

-Inilah *bug* yang kita buat. -Ini melegakan sekali.

our crystal book that is so relieving

newView tidak terdefinisikan. Jadi di mana newView?

new view is not defined so where's new

Aneh, bukan? newView, newView, newView, itu dia. *this.currentView* sama dengan *this.newView*.

view on our new view that should do it

-Seharusnya berhasil. -Ya. Ya. Ini seharusnya hanya ada-- tunggu, tunggu, tunggu.

yep yeah so this would only apply wait

Apakah akan berhasil?

wait wait it's not gonna work yeah

- Ya, itu bagus. - Ya. Tidak, takkan berhasil.

that's fine no it's not gonna work it's

- Tidak? - Tidak, karena apa yang ingin kami lakukan

not no because what we want to do is we

adalah [kami katakan?] newView tersebut. Dan kami ingin-- kurasa kami ingin melakukannya di sini.

say the new view and we want to I think

Tidak, tidak, tidak, tidak.

we want to do it here no no you want to

Kau ingin melenyapkan tampilan sekarang setelahnya dan ketika

fade out the current view afterwards and

kita [sampai?] kurasa kau mungkin ingin

once we were right I think you might

melakukannya di *Promise*, bukan?

want to put in the promise right mmm

Mari kita cari tahu. Mari kita cari tahu.

let's find out let's find out let's fail

Mari kita gagal. Itu, itu dia.

so that ya know just doing the right

Itu sedang berfungsi. Oh, tidak.

Lebih hampir saja, bukan?

oh no it's not so it kind of closer

Jadi apa yang terjadi di sini adalah kau masuk ke *misc* dan katakanlah kau akan *about* seperti itu,

right because so what's happening here as you come into misc and so you're

lalu kau klik *home*. Itu akan membawa *home*.

going to about like that and then you click home you'll bring in home but when

Tapi ketika aku klik kontak, itu menghilangkannya di titik khusus ini.

I click on 'contact that should allow it to disappear a particular point this is

Ini selalu kode yang menyenangkan, bukan?

always fun code isn't it right so let's

Benar. Mari lakukan secara bertahap. Baik.

let's do this step by step then right

Temukan newView.

figure out the new view so that's fine

Itu bagus. Lalu mari kita lihat.

and then let's see so I have to write

Terkadang aku menulis kode dalam bahasa Inggris

sometimes I write out my code in English

jadi dapat aku pahami.

so that I actually can understand

Karena terkadang aku lihat kodenya, lalu aku jadi, ahh.

because I just sometimes look at clothes

Ya, tapi kau tak harus memutar semuanya di otakmu lagi.

don't have had any more you can actually

- Kau bisa mengingatkan dirimu sendiri. - Ya. Jika ada tampilan sekarang, jika itu yang telah kita miliki,

yeah myself so if there is a current view so if there's a current view if it's one we already have just update it

perbarui saja. Itu bagus.

Kalau tidak, kita gerakkan keluar saja.

otherwise we animate it out right yeah I

think they're pretty confident of that

Kita lumayan percaya diri dengan percabangan *if* tertentu itu. Ya.

particularly if branch of the thing yeah

Sekarang ini bagian di mana kita sebetulnya

and now this is a bit where we actually

ingin-- kita bisa memanggil berkali-kali di sini, yang aku tidak sukai.

we want to so we could we can call out potentially a lot of times here which I

Rasanya-- oh, tidak, rasanya oke.

don't like that feels oh no it feels

Rasanya oke, tapi tidak luar biasa.

okay feels okay but it's not great

Bukankah seharusnya kau mengatur animasi di sini?

should you be setting animating there

Karena sebetulnya saat kau mulai memanggil itu akan dilenyapkan.

because once you actually start calling out it will actually be faded out yeah

Ya. Yang aku pertanyakan adalah

so that's that's what I was wondering is

apakah kita harus memblokir di titik kita berada.

whether we we need to we shouldn't be

Mari kita cari tahu.

blocking where we are so we'll find out

Mari kita lihat. Aku akan pindahkan ini di atas untuk sekarang.

but let's see did he mean I'm gonna move

Karena jika ada tampilan sekarang, tapi kami sedang menggerakkan,

it up here for now because if there's a

- kami tak peduli. - Ya.

current view but we're animating we

Benar. Lalu atur.

don't care yeah right so and then set it

Ya. Jadi kita lakukan ini di sini. Oh, ayolah, Paul.

yeah so do that here come on Paul there

Itu dia. Aku akan lakukan hal itu saja. Itu bagus.

we go so we need to see that so that's

Tapi hanya saja-- oh, tidak, tampilan barunya, itu harus berfungsi.

fine but the only thing is now the I know the new view that should work she

Haruskah kita cari tahu? Jadi itu ke kontak. Itu kontak.

find out goes to contact contact and

- Lalu *home*. - Ya. Kontak.

then home yep contact see we're still

Lihat, itu masih tak kami biarkan.

not allowing that to happen does that

Apakah berhasil? Tidak.

work now so now it's kind of locked

Jadi sekarang itu semacam mengunci dirinya sendiri, itu hal yang menyebalkan. Karena?

itself out which is never fun because is

Karena ini anggapannya tidak pernah--

because this presumably noticed never

- Ini tidak pernah tidak diatur. - Ya. Mungkin itu masalahnya.

unset yeah so that's probably the

Mari kita cari tahu saja.

problem let's just find out

Ngomong-ngomong, hal baik tentang Elemen *Custom*

also by the way a nice thing about

adalah kau bisa menginspeksi pernyataan dengan memilih nodus

custom ellen's is that you can just inspect the state by selecting the Dom

DOM di Inspektor dan lihat bagian-bagian internalnya.

node in the inspector and look into the

Itu bukanlah objek yang melayang bebas lagi.

internals those are not fully for free

floating objects anymore nice yeah so we

Kita tidak sampai ke situ.

never get to that point and I assume

Aku berasumsi ini penyebabnya, itu tidak menyenangkan.

it's because of this she's no fun at all

Benar. Aku menjadi kesal karena hal ini.

right I'm getting myself into a bit of a

Tenangkan dirimu.

pickle over this one so take a breather

Apa ada orang lain yang melakukannya? Kau pernah berhenti, minum secangkir teh?

anybody else do this you have a stock go

Kau mungkin tidak minum secangkir teh. Itu mungkin khas Inggris sekali, ya?

for a cup of tea well you might not go for a cup of tea that's a probably a

very British thing to do isn't it let's

Kami selalu butuh secangkir teh yang nikmat.

be honest we all we need a good cup of

Ya. Memang begitu, ya. - Itu membantu cara berpikir. - Tepat sekali. Benar.

tea right helps to think things exactly

Baiklah, tampilan barunya.

right so the new view figure out the new

Cari tahu tampilan barunya. Siapapun yang menonton, jika kau bisa cari *bug*-nya,

view maybe anybody on the livestream if

sangat boleh sekali memberitahu apa yang kau temukan.

they can see the bug they'd be very welcome to say what they see I'll let

- Akan kuberitahukan. - Surma, terima kasih.

Aku menghargainya.

Thanks appreciate it

Baik. Baiklah. *onChanged*, itu dia.

right alright so unchanged here we go if

Jika kau menggerakkan, kembali. [TIDAK JELAS] Baiklah.

you're animating what I'm curious about

Aku penasaran-- aku mungkin benar-benar menghapus

is I might actually just delete the code

kode saja dan menulis ulang. Tidak lagi menggerakkan.

and write it again no longer animating

so there you go

Itu berfungsi, kan?

pop that that's doing that that's doing

the correct thing right well I guess

Walaupun pesannya datang sedikit lebih awal

although the image comes a little bit

karena itu berkata aku tak lagi menggerakkan.

early because it it says I'm no longer

Aku sekarang menggerakkan--

animating out I'm okay so I put a

Baik, aku men-*debug* dengan buruk [TIDAK JELAS].

terrible debug I'm mulling it what the

Aku penasaran semantik macam apa dari variabel itu seharusnya.

semantics are third variable is supposed

Tapi sepertinya itu karena aku tak lagi menggerakkan.

to be but I guess it is about I'm no

Ini seperti-- sebetulnya, kau benar.

longer animating out it's a sort of it's

Lebih seperti *shouldBlock*, bukan, *shouldNotMakeMoreOutPromises*

kind of like actually you're right it's more like should block should not make more I don't promise this is what it

lebih tepatnya. Kode berkualitas.

really is quality code hey there you go

Hei, itu dia. Kalau benar, jadi itu dia. Seharusnya di sana.

which if that's true there you go should

Kalau sudah tidak membuat *promise*, itu dia.

be there maybe shouldn't make any any

Kau tahu, seperti yang kukatakan, coba saja dan dapatkan semacam maknanya.

more out promises there you go well you know as I say it's just to try and get

Pertanyaannya adalah, dengan itu di posisinya--

the kind of meaning but the question is then with that in place that goes to the

jadi itu menuju ke *home*.

Itu memanggil, tapi itu memanggil--

it calls out but it's calling out they

[TIDAK JELAS] router.

also make the route I'm wondering if

Aku penasaran apakah itu masih benar, bagian *shouldNotMake*--

that is actually still true they should

Kurasa aku tahu kenapa.

not make I think I know why oh do you I

- Oh, benarkah? - Kurasa begitu. Kurasa itu.

think so I think it's that I think it's

Kurasa itu menentang hal yang bergerak masuk.

deciding to call the out against the thing that's animating in that could

Itu bisa saja benar sekali. Ya, itu--

very well be true and oh yeah that is so

Menurutku, kita coba saja.

I think let's try that it looks so much

Terlihat jauh lebih baik. Kita punya *bug* biasa untuk setiap episode.

better we have had our customary one

vote per episode yes it happens every

Setiap waktu terjadi. Luar biasa. Bukan maksud kami begitu. Aku tahu. Kali ini aku seperti, tak apa, tak apa.

single time this is so not what we intended no this time I was like it's

Surma, aku tak mau menangani *bug* biasa satu itu.

fine it's fine so I won't do the customary one bug okay

Baik. Baiklah. Karena itu secara luar biasa gagal--

anyway right well since that singularly

ya, ini apa yang akan kami lakukan.

failed yeah here's what we'll mail do so

Dan ya, kami akan tetap menyimpan variabel itu.

this yes we're going to keep that

Ya. *ShouldNotMakeMoreOutPromises*

variable yeah should not make more out

- Baik. - Kita tahu Java. Panjang sekali, bukan?

promises well okay we know Java it's

Maka dari itu namanya JavaScript, kan?

really long isn't it it's called

Dalam kasus yang mana, itu akan seperti--

JavaScript for a reason they're just well in which case you'd be like oh I'm

oh, aku akan mengecilkannya, jadi aku akan menyebutnya *this.a* saja. Jangan. Tolong, jangan. Tidak. Begitu juga dengan *TransitioningBetweenViews*.

gonna minify this or disclose this thought I please done now so if so is transitioning between at least you

Lihatlah, kau jadi mudah membacanya, kan?

- Ya. - Jadi, kami tak mau membuat lebih--

should be able to read this right so okay so we don't want to create more

Orang-orang memintaku untuk mengulangi *bug* apa sebenarnya tadi.

people asking you to reiterate what the

Baik. *bug* sebenarnya tadi-- biarkan aku pindahkan ini ke sini.

actual bug was okay so the the actual bug was that we'd move it back out here

Aku melakukan ini di sini tadi.

I was doing this here so what I was

Aku tadi berasumsi bahwa jika ada tampilan sekarang

assuming was that if there's a current

dan itu sesuai dengan tampilan yang baru, kami ingin perbarui kontennya.

view you'll want to and it matches the new one we want to update its contents

Kami hanya ingin lewat.

we just want to pass through so you're

Jadi kau ada di seksi *about* dan kita akan

on the the About section and we do we go

- memberi *slash* di bagian lain. - Ya.

to about slice something else yeah okay

Apa yang ingin kita lakukan hanyalah memperbaruinya, oke?

what we wanted to do though is just

update it okay that's fine that's that's

Itu bagian yang secara relatif langsung ke tujuan.

a relatively straight for bit if you're

Jika kau dari, katakanlah, *about* ke kontak,

going from say about to contact we want

kami ingin melawan itu.

to call the out on that but what we want

Tapi apa yang ingin kami lakukan adalah kami ingin

to do is we want to hold on to the

tetap mempertahankan tampilan sekarang.

Karena jika orang lain meng-klik lagi,

because if somebody then clicks again we

kita tetap ingin menyuruh, tampilan *about* atau tampilan

still want to tell the about view or

manapun yang menjadi tampilan sekarang, kita tetap ingin menyuruhnya untuk keluar.

whichever view that was the current view

Kau seharusnya bertransisi keluar, keluar, keluar.

we still want to tell that go out you're supposed to transition out out out out

Apa yang tadi kulakukan adalah aku memperbarui variabel itu

out what I was doing is I was updating

untuk menjadi variabel manapun yang diharapkan untuk masuk.

that variable to be whichever one was

Tapi kami tidak ingin melakukannya terlebih dulu, karena kalau tidak,

expected to come in but we don't do that

kami akan menyuruh variabel baru yang hendak masuk,

just yet because otherwise we'll tell

kau harus keluar.

the new ones about to come in

Kami sedang memperbarui referensi ke tampilan aktif--

you should go out so it's like we're updating the reference to the active

Itu hal yang benar-benar tak kami inginkan.

view we don't one yeah we're doing it

Ya, tadi aku melakukannya terlalu cepat.

too I was doing it too early you see I

Kau lihat, aku langsung melakukannya.

was doing it straightaway what we want

Apa yang ingin kami lakukan adalah kami hanya ingin memperlihatkan-- kau tahu,

to do is we all only want to point our

tampilan apakah sekarang jika tampilan sekarang yang keluar telah lenyap?

you know what is the current view when the the current one that's going out has

Tampilan yang baru sebenarnya sedang masuk.

disappeared and the north

Ya, tampilan yang baru hendak masuk.

yeah the new one's about to come in so

Kita tadi bisa saja melakukannya di sini atau di sini.

we could have done it I could have done it here or we could have it here I mean

Maksudku, jujur saja, kita bisa, kau tahu.

to be honest we could just you know so

Pelajaran yang kita peroleh dari hal ini

the lesson you learn from this is when

adalah saat kau gunakan rantai *Promise* untuk menjembatani jarak waktu tertentu, pikirkanlah kau sedang dalam kondisi apa.

you use promise chains and you know to bridge over certain time gaps think about what the state is that you're in

Ya. Karena ini *Promise*, kami bisa mengembalikannya ke sini.

yeah and since this is a promise we can

Itu membiarkan kami untuk *then* titik *then*, jika kami mau,

return it here and that would then allow us to then dock then if we wanted to and

dan menjadi seperti, console.log-- Selesai. selesai. Selesai!

be like console.log dun dun dun right

Benar. Mari kuperiksakan apakah itu masih bekerja setelah aku otak-atik.

let me just say that still working after

Yang itu keluar, yang baru masuk.

me messing around so the goes out anyone comes in and at

Dan pada akhirnya-- - Selesai. - -- selesai.

the end of it dun dun so you know that's

Hal yang cukup berguna memiliki rantaian *Promise* di sini.

a kind of useful thing about having the

Itu bekerja seperti yang kami harapkan, yakni sangatlah bagus.

promise chains here boo so that is working as intended which is

Jadi kami bisa lebih cepat membahasnya.

really really good so we can now speed

things up a little bit like not point

Jadi saran dariku, sebenarnya.

three so remote from my site actually I

Aku kembalikan *Promise* ke fungsi *go* pada router

have I returned the promise in my go

sehingga aku bisa memanggil Call Latch secara eksternal pada rantai

function on the Ruger Sevilla I can external court can latch onto the

*Promise* dan mulai jalankan setelah semuanya

promise chain and started working after

sudah dilakukan oleh router.

everything has been done by the Woodard

Jadi ya, kita bisa lakukan itu.

so yeah we could totally do that I mean

Maksudku, dalam kasus ini, kami akan mengembalikannya dari sana

I think in this case we would return

lalu kita akan mengembalikan itu dari sana.

that from there and then we would return

Tepat sekali. Jadi ketika kita kembali apapun yang akan dikembalikan *onChanged*,

that from exactly so we return whatever on chain unchanged would return which

akan menjadi *outViewPromise*.

will be the out view promise however in

Bagaimanapun, dalam kasus ini kita juga harus

this case we'd also have to do something

melakukan sesuatu seperti itu di sini.

- Sesuatu yang kosong-- - Seperti *Promise.resolve*.

an empty like promise that resolved yeah

so that we're just saying you get a

Lalu, kita bilang saja kau akan selalu mendapatkan *Promise* kembali,

you're always going to get a promise

tapi mungkin saja tiba-tiba terselesaikan,

back but it might just immediately

atau itu akan selesai ketika tampilan baru telah muncul.

resolve or will resolve when the new

Itu akan terselesaikan ketika tampilan yang diminta muncul pada layar,

view has come in it results meant the

- yang mungkin saja langsung atau nanti. - Sentuhan yang baik.

view that is on screen immediately or later let me

Mari kutunjukkan sesuatu yang baru lainnya.

show you something else that is brand-new and this actually does relate

Dan ini benar-benar berhubungan pada tampilan dan semacamnya karena kita-- kita punya sekitar, berapa, lima menit.

to views and the like since we are we

Jika kita ingin ini tetap dalam durasi biasanya.

have about five minutes if you want to

Kita akan melakukannya dalam satu jam, entah kita suka atau tidak.

keep some of the usual customer hour we're doing an hour of weather we do

Naskahnya tertulis kita melakukan hal yang baru lalu-- Ini tidak adil, karena kita benar-benar tidak mencoba melakukannya.

then this is not fair because we're

Tapi apapun, baiklah. Yang aku mau lakukan.

actually not trying to do this but

Inilah yang kadang-kadang mengagetkan orang.

anyway okay what I want to do here's what here's something that often bites

- Kau mempunyai empat tampilan, benar? - Ya.

people you've got these four views right

Dan secara ide, mereka terpisah, benar?

and notionally they're separate right

Maksudnya kau ingin mengunci hal seperti *layout* dan *style*

there's in you want to lock things like

dan seterusnya untuk menjadi sepenuhnya terpisah.

layout and styles and so on to be

Tapi hal seperti *layout*-- maksudku, aku

completely separate but things like

bicara tentang ini lumayan sering ketika aku sedang menampilkan sesuatu.

layout I mean I talked about this quite

Tapi *layout* biasanya meliputi semua dokumen, benar?

often when I'm doing perform stuff but layout is normally scoped to the whole

- Jadi ketika kau menampilkan *layout*-- - Sayangnya.

document right so if you trigger family

Ya. Dan orang akan berkata, ah ini buruk.

yeah and so people kind of go ah this is

Mari kita lihat tentang ini.

bad let's see about this let me show you

Biarkan aku menunjukkan ini. Katakanlah aku sedang di bagian *home*.

this so let's say I'm in the home

Yang akan kulakukan adalah aku akan mengambil sebuah kotak, itu oke.

section what I'm gonna do is I'm gonna add myself a box which is okay it's just

Ini hanya sebuah kotak, benar? Jadi itu tidak apa-apa.

the box right so that's fine and I'm

Dan aku akan menampilkan *home*.

gonna do I'll do view home this is where

Di sinilah saat kutemukan bahwa aku tak bisa mengingat bagaimana melakukan ini.

I find out that I can't remember how to

do this but here we go

Jadi katakanlah lebar 50 piksel, tinggi 50 piksel,

so let's say width 50 pixels height 50

latar belakang-- apa warnanya *home*?

pixels background what causes the home

Menurutku-- mari kita warnai putih.

let's just do white and then we'll say

Lalu kita akan berkata posisi mutlak. mutlak, benar.

position:absolute Oh absolute right and

Dan yang akan kita lakukan adalah kita akan mengerjakan *slide keyframe*.

what we'll do is we'll do keyframes

Baik. Selanjutnya kita katakan dari lalu ke.

slide okay and we'll say frog and then

Sekarang yang akan aku lakukan adalah aku akan memunculkan *layout*, oke?

too now what I'm going to do is I'm going to trigger layout okay so I'm gonna do is

Jadi yang akan kulakukan adalah aku akan

I'm going to do an animation of

membuat animasi tentang sesuatu seperti lebar.

something like width and I'm gonna go

Aku akan menuju dari 100-- tidak, sekitar 300.

from a hundred now like three um kids

- Jangan lakukan ini di rumah, anak-anak. - Jangan lakukan ini di rumah.

don't do this at home definitely done

Pastinya jangan lakukan hal yang satu ini di rumah.

this one at home I'm just showing you

Aku hanya ingin menunjukkan padamu, seandainya untuk beberapa alasan kau

two in case for some reason you are

benar-benar memunculkan *layout*.

actually triggering there which is there

Ada waktu yang valid, seperti kau *appendChild*

are valley times like you append child

atau *removeChild*, kau akan memunculkan *layout*, misalnya.

or remove child you're gonna be able a

Jadi mari kutunjukkan ini.

up for example so let me show you this

Jadi lebar dari 300 ke 100.

so with from 300 to 100 and so I guess

Kurasa aku akan memberi nama animasi secara slide,

I'll do animation animation name will be slide in not

durasi animasi 3 detik

slide slide animation duration three

Lalu *animation-iteration-count* tidak terbatas. Jadi katakanlah kita punya itu.

seconds and then animation iteration count infinite so like like say we've

Bagaimana menghabiskan bateraimu?

got that how it would ruin your battery

and well yeah so if i refresh that so

Jadi aku *refresh* itu.

you see I've got this animation right

Jadi kau lihat aku punya animasi ini, benar? Dan aku letakkan ke kiri, ini seperti ke kiri 100 piksel. Baik. Ayolah. Benar. Jadi kita punya ini.

and let me just put a left on it so it's like left 100 pixels okay camera right

Dan jika kita merekam *timeline*-- ini akan cepat karena ini Macbook yang bagus.

so we've got this and if we do a timeline recording and this will be fast because it's a decent MacBook yeah so

- Ya. - Jadi itu berbeda [tidak jelas] Jika kau melakukan ini di phone, akan terlihat berbeda.

it's different phone things will look

Ya. Tapi yang kau lihat adalah selama animasi ini,

different yeah so but what you can see

jika aku perbesar di *frame* manapun--

is during this animation if i zoom in on

dan memang seperti yang kukatakan, ini 60 frame per detik, bukan?

any one of the frames and admittedly as I say this is comfortably 60 frames a

second right there's no it's Abby

Ini besar-- tidak ada DOM tree itu butuh di-*layout* ulang.

there's no Dom trivia that needs to be

Ya. Ini DOM yang kecil. Tidak ada masalah di sini.

relay out it yeah this is a small Dom

Tapi jika memang kau punya masalah, aku hanya memperlihatkannya saja,

there's no issue here but if you did

karena aku pikir ini sangat menarik.

have an issue I'm just showing it for the sake of showing it really because I

Lihat, akar dari layout di sini adalah dokumen.

think it's really interesting see the layout route here is that is the

Dan jumlah nodus yang dibutuhkan adalah tiga.

document and the number of nodes that

Jadi kau punya kotaknya, kau punya *parent*-nya,

need layout is three see you at the box you've got its parent which will be the

yang akan menjadi sc-view, lalu tubuh di atasnya.

SC view and then the body above it so

that's why yeah so that's why you've got

jadi itulah kenapa kau punya tiga hal itu, menurutku.

those three I think and so you can see

Jadi kau bisa lihat, secara efektif, ini meliputi dokumen, benar?

that it effectively it's document scope

- Karena akar *layout* [TIDAK JELAS] - Jadi jika mau pikirkan hal itu,

right because the layout route so if you

itu akan memiliki papan navigasi yang kita tulis terakhir kali di luar.

think about it would have like a navigation drawer that we wrote last

Itu akan menjadi *layout* ulang meskipun tidak ada yang berubah.

time outside that would get real layout

Ya. Jadi ini adalah properti baru yang masuk.

it even though nothing changed yeah and so this is this is a brand new property

Karena dalam tampilanku, aku punya sesuatu seperti perbaikan posisi,

that's coming in because on my view I've

dan aku benar-benar mengatur-- kuberitahu saja,

got something like position fixed and I've actually set to I'm going to switch

aku akan menukarnya menjadi lebar dan tinggi

that across to width and I because I

karena kupikir mungkin saja itu membutuhkannya

think it might need it

Lebar 100%, tinggi 100%. Kita harus mengecek rinciannya. Tapi jika aku meletakkan *contain strict*-- sekarang

width 100% 100% but if I put contain

jika kau tidak menemukan properti konten,

strict now if you've not come across the

pada dasarnya ini akan membiarkanmu menulis *layout*, *style*, *paint*,

contain property basically it would let you say layout styles paint or strict

atau *strict* dan juga konten. Dan yang akan dilakukannya adalah itu akan mengunci beberapa perhitungan.

and there's also content and that will what it'll do is a lock off some of the

Kuletakkan *strict*, yang merupakan kata kunci dari semuanya.

calculations I put strict on which is

Jadi *style*, *paint*, *layout*, dan juga konten, menurutku.

like the key word for all of them so styles paint layout and content as well

Bagaimanapun, kita harusnya lihat sekarang, semuanya berjalan baik,

in any case what we should see now or

jika aku lakukan ini-- berhentilah merekam.

being well if I do this stop recording

Hentikan rekamannya. Berhenti.

stop it stop we zoom in we're still

Dan kita perbesar, kita akan tetap memiliki *layout*. Tapi kau dapat lihat sekarang bahwa akar *layout* telah benar-benar

gonna have layout but you can see now

diperbaiki pada tampilan tertentu itu,

the layout route has actually been fixed

yang berarti kita tidak lagi akan mempengaruhi semua tampilan yang lainnya

to that particular view which means we're no longer potentially affecting

yang tidak ada hubungannya dengan yang ini.

all these other views that have nothing

Kita katakan, intinya, ini adalah batasan *layout*.

to do with this particular one we're saying essentially this is a layout

Ini adalah akar dari perhitungan ini.

boundaries that it's the route of this

Kau dapat menemukan ini di dalam Canary sekarang.

calculation so you can find this in the current canary I don't know what these

Aku tidak tahu status pendukung secara umum di luar dari Chrome.

support status is generally outside of

- [?Iphone?] - Tapi ini sesuatu yang akan segera tiba.

chrome but it's something that's

Aku ingin menunjukkannya karena seperti yang kukatakan--

incoming and I wanted to show it because

Maksudku, dalam kasus ini, waktu *layout* itu

as I say I mean in this case the the

sangatlah kecil hingga tidak berarti.

layout time is so minuscule it doesn't

Tapi dalam aplikasi yang besar ketika kau punya banyak tampilan yang bolak-balik

matter but I'm a big app we've got a lot

dan dapat memunculkan *layout*, yang dahulu bisa

of views going back and forth and you potentially trigger layout which

sangat mahal, dengan *contain strict*, kau akan merasa lebih baik.

historically might be really expensive to deal with with contain streets you're

Dengan demikian-- maksudku, aku punya animasi yang bodoh,

gonna be a lot better off so with that

yang ingin kuhapus saja setelah ini.

said I mean I've got a ridiculous animation which I'm just gonna I'm just

Tapi apa yang akan kita lakukan?

gonna remove it after this what we're

Baik, apa yang akan kita lakukan,

gonna do all right what we're gonna do

kita akan menghentikannya di sini, karena kita telah mencapai batasan waktu.

we are going to call this a day because

Kita punya *bug* yang biasa.

we've hit pretty much the hour mark we

Jangan lupa berlangganan saluran ini.

had our customary bug don't forget to

Dia tidak percaya aku bisa melakukannya. Aku sendiri tidak percaya.

subscribe to the channel if you can't believe I've done that I can't believe

Terima kasih banyak telah bergabung dengan kami.

Terima kasih atas pertanyaan-pertanyaannya.

thank you so much for joining us thank

Kuharap kau menikmatinya.

you for your questions I hope you've

Jangan lupa, kau bisa temukan kami di twitter.

Kau bisa beritahu kami bahasan apa yang kau inginkan.

don't forget you can find us on Twitter you can let us know what you want us to

Kami dapat membahas lebih jauh tentang router di waktu yang lain,

cover next we can cover a more advance

atau kita bisa lakukan tampilan perluas dan persempit

route to next time or we could do and

atau sesuatu seperti itu.

expand and collapse view or something

Beritahu kami kau ingin kami lakukan apa,

like that you let us know what you want

kami akan mencoba menyelesaikannya.

us to do and we will try and get it done

Terima kasih telah bergabung. Kita bertemu di lain waktu. Sampai bertemu.

and thank you so much for tuning in and we'll catch you next time see you then

Similar videos:

Swipeable Cards: Live Code Session - Supercharged
Chrome for Developers
233.9K views 532 likes 8 dislikes 14 Apr 201649% match

0 views 0 likes 0 dislikes 07 Jun 202636% match

Week 1
CS50
289.5K views 0 likes 0 dislikes 12 Sep 201536% match

[ SUB INDO ] BTS LIVE on VLIVE - BE.T.S 💜 19.02.2021 || bts live 🔴

2.7K views 195 likes 2 dislikes 19 Feb 202135% match

0 views 0 likes 0 dislikes 07 Jun 202635% match

0 views 0 likes -1 dislikes 07 Jun 202635% match

Section, Week 5
CS50
19.1K views 36 likes 18 dislikes 20 Oct 201535% match

[PT-BR SUB] [ENG SUB] [HD] LIVE BTS ALBUM BE DELUXE BE.T.S 💜 [19 FEB 2021] [INDO/THAI SUB]
Van Bangtan
4.5K views 316 likes 2 dislikes 19 Feb 202135% match

Week 1
CS50
156.1K views 0 likes 0 dislikes 11 Dec 201335% match

0 views 0 likes 0 dislikes 07 Jun 202635% match

[ENG/INDO/JPN/ESP SUB] BTS VLIVE 19022021 BETS💜
ram
7.8K views 261 likes 4 dislikes 19 Feb 202135% match

BTS ~ HOME PARTY ( FULL ) { Sub Indo }
Diyah Aini
22K views 995 likes 4 dislikes 23 Apr 202035% match

Week 1, continued
CS50
145.2K views 0 likes 0 dislikes 15 Dec 201434% match

Week 2
CS50
135.3K views 0 likes 0 dislikes 17 Sep 201534% match

Ruby on Rails by Leila Hofer
CS50
167.4K views 2.1K likes 124 dislikes 28 Jun 201634% match

Week 0, continued
CS50
369.8K views 0 likes 0 dislikes 13 Sep 201534% match

Week 2
CS50
120.3K views 0 likes 0 dislikes 03 Oct 201433% match

Week 1
CS50
241.3K views 0 likes 0 dislikes 15 Sep 201433% match

[ENG SUB]LOONA이달의 소녀 X LieV (Full Episode)
LUMIÈRE PH
177.5K views 7.2K likes 30 dislikes 29 Oct 202033% match

Week 1, continued
CS50
175.4K views 0 likes 0 dislikes 14 Sep 201533% match

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

Section, Week 2
CS50
26.1K views 64 likes 17 dislikes 13 Oct 201532% match

Week 0, continued
CS50
251.9K views 0 likes 0 dislikes 24 Sep 201432% match

Week 9, continued
CS50
46.3K views 101 likes 24 dislikes 05 Nov 201532% match

ENGSUB Weekly Idol EP429 ATEEZ
1stonkpop
2.5M views 98.6K likes -1 dislikes 16 Oct 201932% match

Week 0
CS50
340.9K views 0 likes 0 dislikes 10 Dec 201331% match

The Last Reformation: The Life (2018) - FULL MOVIE
The Last Reformation
628.5K views 0 likes 0 dislikes 31 Mar 201831% match

Week 10
CS50
39.5K views 91 likes 17 dislikes 18 Nov 201531% match

ENG ATEEZ - ANNIVERSARY ATINYDAY 2020 (atiny day) vlive (ENG/ESP/INDO/JAP/COR/POR)
Chas Channel
31.3K views 1.2K likes 4 dislikes 17 Nov 202031% match

Week 8
CS50
39.3K views 107 likes 5 dislikes 27 Oct 201531% match

Settings Privacy About Contact Donate