Transitioning to modern JavaScriptYouTube↗  IA↗(long shot)
Science & Technology  83.1K views 3.8K likes 72 dislikes   17 Dec 2020
Chrome for Developers 814K subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
(musik ceria)
(upbeat music)
Hai semuanya, hari ini kita akan membahas tentang
- Hi folks we’re here today to talk about
bertransisi ke JavaScript modern,
transitioning to modern JavaScript,
untuk mendapatkan nilai performa yang lebih baik dari setiap bite.
in order to get better value performance out of every bite.
Saya Houssein.
I'm Houssein.
Saya Jason, Houssein, Anda sudah siap?
- And I’m Jason, Houssein, are you ready?
Siap untuk apa?
- Ready for what?
Siap bermain ‘Apakah itu Modern’,
- Ready to play Is It Modern,
acara di mana saya menguji kontestan
the show where I quiz contestants
tentang apakah sebuah bagian JavaScript itu modern atau tidak.
on whether a piece of JavaScript is modern or not modern.
Hussein, Anda adalah kontestan beruntung hari ini, mari kita mulai.
Hussein, you're our lucky contestant today, let's begin.
Untuk pertanyaan pertama, kita punya dua baris kode ini.
For question one, we have these two lines of code.
Bagaimana menurut Anda Houssein, modern atau tidak modern?
What do you think Houssein, modern or not modern?
Saya lihat bulan dinyatakan menggunakan var
- I, see months is declared using var
saya cukup yakin indexOf
and I'm pretty sure indexOf
diperkenalkan di ES5, jadi ini tidak modern.
was introduced in ES5, so this is not modern.
Benar, tidak ada sintaksis baru yang digunakan di sini,
- Correct, there's no inherently new syntax being used here,
ini tidak modern, lanjut ke pertanyaan kedua.
so it's not modern, on to question two.
Ada dua baris kode lain, apakah ini modern?
Another two lines of code, is this modern?
Sepanjang baris yang sama, object.assign,
- Along the same lines, object.assign,
ini bukan sintaksis yang relatif baru atau semacamnya.
isn’t a relatively new syntax or anything.
Jadi sekali lagi, saya akan menjawab tidak modern.
So again, I’m going to go with not modern.
Anda benar, tidak modern, baiklah, pertanyaan terakhir.
- You're right, not modern, all right, last question.
Potongan kode ini agak panjang
This piece of code is a little larger
tapi saya berjanji, ini bukan pertanyaan jebakan.
and I promise, it’s not a trick question.
Apa pendapat Anda, modern atau tidak modern?
What do you think, modern or not modern?
Kalau dilihat di sini, saya rasa tidak ada yang modern
- Taking a look here, I don't think there's anything modern
mengenai sintaksis <i>promise</i>,
regarding the promise syntax,
tetapi saya melihat variabel dinyatakan dengan <i>const</i>
but I do see a variable being declared with const
sedangkan<i> </i>constant let belum diperkenalkan hingga nanti,
and constant let wasn't introduced until much later,
maka seharusnya ini adalah kode modern.
so this has to be modern code.
Oh, cakupan blok yang rumit, let dan const
- [Man] Oh, tricky block scope, let and const
sebenarnya sudah didukung di Internet Explorer 11.
are actually supported in Internet Explorer 11.
Ada sejumlah bug untuk diingat,
There's a few bugs to keep in mind,
tapi kita bisa menjalankan kode ini.
but we can run this code.
Wow, oke, sepertinya saya mendapat pelajaran baru hari ini.
- Wow, okay, I guess I learned something new today.
Apakah kita akan terus melanjutkannya, Jason?
Are you really going to be doing this the whole time, Jason?
(tertawa) Tidak.
(laughing) - No.
Tapi hal itu menimbulkan pertanyaan.
- But that kind of begs the question.
Apa sebenarnya yang kita maksud dengan kode modern?
What exactly do we mean when we say modern code?
Nah, sebagai permulaan, JavaScript modern
Well, for starters, modern JavaScript
bukan sintaksis ES2015 atau ES2017, atau bahkan ES2020.
is not ES2015 syntax or ES2017, or even ES2020.
melainkan kode sintaksis tertulis yang didukung
it’s code written syntax that is supported
di semua browser modern.
in all modern browsers.
Saat ini, Chrome, Edge, Firefox dan Safari,
Right now, Chrome, Edge, Firefox and Safari,
menguasai 90% pasar browser.
make up 90% of the browser market.
Selanjutnya ada 5% penggunaan lain yang berasal dari browser
And then another 5% of usage comes from browsers
berdasarkan mesin rendering yang sama,
based on the same rendering engines,
yang mendukung fitur yang sekiranya sama.
which support roughly the same features.
Itu berarti 95% pengunjung situs Anda
That means 95% of visitors to your site
menggunakan browser modern yang cepat.
are using a fast, modern browser.
Browser yang menguasai mayoritas pangsa pasar,
The browsers that make up majority market share,
juga merupakan <i>Evergreen</i>, yang artinya mereka memperoleh
are also Evergreen, which means that they get
fitur JavaScript baru dari waktu ke waktu.
new JavaScript features over time.
Tapi bagaimana kita menulis atau membuat kode untuk target bergerak?
But how do we write or generate code for a moving target?
Cara termudah adalah dengan mengandalkan fitur-fitur
The easiest way is to look to the features
yang sudah didukung secara luas.
that are already widely supported.
Pertama, class, yang memiliki lebih dari 95% dukungan browser.
First up classes, which have over 95% browser support.
Fungsi Arrow, 96%, generators juga
Arrow functions, 96%, generators also
memiliki 96% dukungan browser.
have 96% browser support.
Mungkin fitur JavaScript yang paling jarang digunakan,
- [Man] Probably the most underused JavaScript feature,
khususnya, generator enam baris ini
in particular, this six line generator
mengimplementasikan pencarian biner lambat melalui DOM.
implements a lazy binary search over the DOM.
Ya, sejujurnya, saya tidak bisa membayangkan
- Yeah, to be honest, I can't think of ever
harus menulis generator secara manual.
having to write a generator by hand.
Mungkin ini pengalaman pertama saya.
- This might have been my first.
Cakupan blok deklarasi constant let,
- [Man 2] Block scoped, constant let declarations,
menyelamatkan kita dari masalah hosting
save us from our hosting issues
sekaligus memiliki 95% dukungan browser.
and have 95% browser support.
Seperti disebutkan tadi,
And like we mentioned earlier,
sebenarnya ini secara sebagian telah didukung di beberapa browser lama.
this is actually partially supported in some older browsers.
Karenanya jika berhati-hati,
So if we're careful,
kita hampir bisa menyebutnya 97% dukungan.
we can almost call this 97% support.
Destructuring memiliki 94% dukungan
De-structuring has 94% support
rest parameter dan rest spread<i>,</i> juga memiliki 94% dukungan.
rest parameters and rest spread, also 94% support.
Object shorthand, yang mudah dilupakan
Object shorthand, which was easy to forget
yang tidak ada dalam bahasa pemograman sebelum ES2015,
that this wasn't in the language before ES2015,
sekarang memiliki 95% dukungan browser.
now has 95% browser support.
Akhirnya sampai pada await asinkron, yang meskipun dulunya adalah
And finally async await, which even though it was
fitur ES2017 2017, memiliki 95% dukungan browser.
an ES2017 2017 feature, has 95% browser support.
Ini tentu merupakan fitur bahasa favorit saya.
- This is easily my favorite feature of the language.
Oh benarkah, bukan generator?
- Oh really, not non generators?
Kita cukup sering menggunakan istilah dukungan browser,
We're using a term browser support quite often,
sehingga ada baiknya mengklarifikasi apa artinya.
and it’s worth clarifying what that means.
Anda dapat menganggap dukungan browser sebagai persentase
You can think of browser support as a percentage
lalu lintas web global dari browser
of global web traffic from browsers
yang mendukung fitur tertentu.
that support a given feature.
Untuk mendapatkan gambaran lengkap tentang dukungan browser JavaScript modern,
To get a full picture of modern JavaScript browser support,
kita dapat mengambil contoh penyebut umum terendah
we can take the lowest common denominator
dari fitur yang baru saja kita lihat,
of the features we just saw,
maka bisa dilihat bahwa semua fitur ini
and we can see that all these features
didukung oleh 94% trafiic browser.
are supported in 94% of browser traffic.
Sekarang perhatikan, ini bahkan lebih tinggi
Now keep in mind, this is even higher
untuk situs dan aplikasi yang lebih baru.
for newer sites and apps.
Sebagai contoh, di sini jumlah totalnya adalah 97%
As an example, the total here would be 97%
hanya dari pengunjung AS.
for visitors only from the US.
Ya, jadi meskipun sebenarnya akan sangat berguna
- Yeah, so while it's actually pretty useful
untuk mendapat gambaran kasar dukungan browser
to have a rough idea of the browser support
untuk fitur bahasa, yang akan Anda gunakan,
for language features, you're going to use,
kita tidak menulis kode
most of us aren't writing code
yang dikirimkan tanpa modifikasi sama sekali, untuk dijalankan di browser.
that gets delivered totally unmodified, to run in browsers.
Kita sangat bergantung pada transpilasi.
We rely pretty heavily on transpilation.
Jika saya ingin punya fungsi
Say I wanted to have a function
yang mengembalikan resolve promise ke nomor 42.
that returns promises resolving to the number 42.
Saya mungkin menulis fungsi arrow asinkron kecil seperti ini.
I might write a little async arrow function like this one.
Agar dapat menjalankan kode tersebut
In order to have that code run
pada 5% browser terakhir
in the last 5% of browsers
yang tidak mendukung fungsi arrow asinkron<i>,</i>
that don’t support async arrow functions,
Saya mungkin mentranspilasikan menjadi semacam ini,
I might transpile it to something like this,
atau setidaknya saya akan mencoba.
or at least I might try.
Kenyataannya, peralatan terbaru akan mengambil
In reality, most current tools are going to take
21 byte kode sumber saya dan mentranspilasikannya
my 21 bytes of source code and transpile it
menjadi sekitar 583 bite kode sumber.
to something like 583 bites of source code.
Ditambah<i> </i>runtime library yang menentukan kode yang dihasilkan,
Plus a runtime library that the generated code depends on,
yang sebenarnya menambahkan enam
which actually brings us up another six
setengah kilobyte, menjadi 7.000 byte.
and a half kilobytes, to 7,000 bytes.
Kode yang ditranspilasi perlu waktu lebih untuk dimuat
Obviously the transpiled code will take longer to load
dibanding versi asli, dan lebih besar,
than the original version, it's larger,
tapi kode dikompilasi dengan drastis membesar
but the dramatically larger compiled code
juga berjalan jauh lebih lambat setelah didownload.
also runs significantly slower once downloaded.
Kode JavaScript dikompilasi menjadi petunjuk
JavaScript code gets compiled to instructions
yang dijalankan oleh mesin virtual.
that are executed by a virtual machine.
Kita bisa menghitungnya guna memperkirakan
And we can count those to estimate how much work
jumlah pengerjaan diperlukan untuk menjalankan program.
is required to run a given program.
Jadi<i> </i>fungsi asinkron asli kami mengkompilasi hingga 62 perintah.
So our original async function compiles to 62 instructions.
Sedangkan output yang ditranspilasi dikompilasi hingga lebih dari 1100.
Whereas the transpiled output compiles to over 1100.
Kita dapat membandingkan secara berdampingan
We can also benchmark these side by side
maka versi transpilasi
and the transparent version
mengeksekusi enam kali lebih lambat.
executes more than six times slower.
Peningkatan ukuran ini sebenarnya
And this size increase is actually
relatif konsisten di seluruh fitur modern.
relatively consistent across modern features.
Mengambi semua contoh sintaksis sebelumnya
Pulling all of those earlier syntax examples
menjadi satu modul, sekitar 780 byte
into a single module, is about 780 bytes
jika diperkecil dengan terser, untuk menghilangkan spasi.
when minified using terser, to remove white space.
Jika kita kemudian mentranspilasikannya, kode yang dihasilkan
If we then transpiled that, the generated code
adalah enam kilobyte, itu tujuh kali lebih banyak
is six kilobytes, that's seven more
dan satu-satunya keuntungan yang kita dapat
and the only benefit we got
adalah bahwa dijalankan di Internet Explorer 11,
was that it could run in Internet Explorer 11,
jika kita menambahkan 10 kilobyte polyfill lagi,
if we add another 10 kilobytes of polyfills,
yang dibutuhkannya.
that it depends on.
Secara teoritis, kami juga mendukung
Theoretically, we also support
mode rendering ekstrem opera mini.
opera mini's extreme rendering mode.
Tapi kenyataannya, kebanyakan aplikasi transpilasi
Although in reality, most transpiled apps
masih tidak berfungsi dalam mode itu, karena batasan lainnya.
still won't work in that mode, because of other limitations.
Sekarang kita tahu bahwa kode di sebelah kiri ini
Now we know that the code in the left here
berfungsi di 95% browser,
works in 95% of browsers,
sebagian banyak dari kita sudah menulis kode modern seperti ini.
and a lot of us are already writing modern code like this.
Sehingga ingin rasanya mengatakan, ah, baiklah.
So it's tempting to say, well, that's fine.
Saya pindahkan saja kode modern yang saya tulis, ke browser.
I'll just ship that modern code that I wrote, to browsers.
Nah, Anda boleh berpendapat bahwa Anda bisa mengubah
- Well, you can think that you can change
semua kode pada aplikasi Anda,
all the code in your application,
tapi jika kita kembali
but if we actually take a step back
lalu memperhatikan apa yang menyusun kode situs web kita,
and look at what makes up our website code,
kita akan mendapati bahwa sebagian besar code base kita
we'll find that the majority of our code base
berasal dari dependensi pihak ketiga.
comes from third party dependencies.
Daya dari arsip ACB, menunjukkan bahwa setengah dari semua situs web
Daya from ACB archive, shows that half of all websites
mengirimkan hampir 90% lebih banyak kode pihak ketiga, dibandingkan pihak pertama.
ship almost 90% more third-party code, than first party.
Baiklah, saya telah melakukan perhitungan kasar secara singkat,
- Right, so I did some really rough napkin calculations,
yang tentunya berisiko.
which is always dangerous.
Jika ditinjau kembali dari traffic web global,
But working back from global web traffic,
kita bisa mendapatkan perkiraan kedepan
we can estimate that the overhead
dari pengiriman legacy JavaScript,
of shipping legacy JavaScript,
dengan hitungan sekitar 80 petabyte per bulan
accounts for around 80 petabytes per month
jumlah bandwidth internet yang ada.
of internet bandwidth.
Pengiriman bandwidth ekstra yang tidak memerlukan polyfill itu,
That extra bandwidth shipping unnecessarily poly-filled,
dan kode tertranspilasi, menghasilkan sekitar 54.000
and transpiled code, produces something like 54,000
metrik ton karbon dioksida ke atmosfer.
metric tons of carbon dioxide into the atmosphere.
Kita harus menanam 30 juta pohon,
We'd have to plant 30 million trees,
untuk mengimbangi jumlah karbon dioksida itu.
to offset that much carbon dioxide.
Tentu ini merupakan angka perkiraan besar,
These are obviously super approximate numbers,
tetapi bisa membantu menggambarkan
but they kind of help paint a picture
skala permasalahan.
of the scale of the problem.
Ya, dan sebagian besar dari skala itu
- Yeah, and a big part of that scale
berasal dari seberapa umumnya masalah ini pada NPM.
comes from how prevailing this issue is on NPM.
Jika kita perhatikan seribu modul front-end teratas
If we take a look at a top thousand front end modules
pada registri MPM, versi sintaksis median adalah ES5.
on the MPM registry, the median syntax version is ES5.
Jumlah rata-rata juga ES5.
The average is also ES5.
Faktanya, kurang dari 25% memiliki sintaksis yang lebih baru dari ES5.
In fact, less than 25% contain any syntax newer than ES5.
hanya 11% modul menggunakan kolom browser.
only 11% of modules use the browser field.
90% ini mengarah ke ES5.
And 90% of these point to ES5.
2% modul memiliki kolom jsnext:main
2% of modules have a JS next main field,
tetapi hanya satu dari semuanya yang merupakan ES5.
and all but one are ES5.
Juga hanya 9% modul menggunakan kolom modul.
And only 9% of modules use the module field.
Jadi mengapa demikian?
- So why is this?
Sebagian besar alasannya adalah,
A big part of the reason is that,
penawaran paket tidak dapat bergantung pada aplikasi bundle
package offers can't rely on application bundlers
untuk dependensi transpilasi, untuk memastikan dukungan browser.
to transpile dependencies, to ensure browser support.
Kami perkirakan bahwa hanya setengah dari peralatan bawaan
We estimate that only half of built tools
mampu mentranspilasi ketergantungan,
transpile dependencies at all,
yang berarti bahwa kode modern menghasilkan NPM
which means that modern code published NPM
dipaket sebagaimana adanya, dengan peralatan yang tersisa.
gets bundled as is, by the remaining tools.
Kemudian tiba-tiba merusak
And that unexpectedly breaks
dukungan browser untuk para pengguna.
browser support for those users.
Perlu diketahui, bahwa penulis paket membuatnya dengan sepenuh hati.
Thing is, package authors came by this honestly.
Saat JavaScript modern menjadi populer,
As modern JavaScript got popular,
paket masih diterbitkan dalam ES5,
packages still published in ES5,
karena bisa disetel secara manual,
because it could be hand tuned,
di mana<i> </i>transpiler serba bisa
where general purpose transpilers
harus sesuai spesifikasi, sehingga tidak merusak kode yang valid,
have to be spec compliant, so they don't break valid code,
penulis paket dapat mentranspilasi keluaran yang lebih efisien
package authors could transpile to more efficient output
dengan membuat asumsi khusus untuk sumbernya.
by making assumptions specific to their source.
Saya mungkin menggunakan class,
Maybe I'm using classes,
tapi saya memakai bit yang ditranspilasi
but I only use the bits that transpile
menjadi perintah sederhana, dan inheritance prototipe.
to simple functions and prototypal inheritance.
Ketika kita semakin sering
As we found ourselves using more
menggunakan sintaksis JavaScript modern dari waktu ke waktu,
and more modern JavaScript syntax over time,
segala kemungkinan tadi, akan transpilasi yang merugikan, akan memudar.
those possibilities, for lossy transpilstion, faded away.
Untungnya, masalah itu kini dapat dipecahkan.
Thankfully, this is now a solvable problem.
Secara historis paket NPM dinyatakan sebagai kolom utama,
Historically NPM packages declared a main field,
menunjuk ke beberapa kode JS umum,
pointing to some common JS code,
sebagaimana kita ketahui, secara umum disebut sebagai ES5.
which as we know, is generally assumed to be ES5.
Baru-baru ini, node, dan sejumlah paket,
Recently node, and a number of bundlers,
telah membuat standar kolom baru yang disebut ekspor.
have standardized a new field called exports.
Bagus, bisa melakukan banyak hal,
It's great, does a lot of things,
tetapi memiliki satu atribut terpenting,
but it has one very important attribute,
yang diabaikan oleh versi node yang lebih lama.
which is that it's ignored by older versions of node.
Ini berarti bahwa modul yang direferensikan oleh kolom ekspor
This means that modules referenced by the exports field
menunjukkan versi node minimal 12.8,
imply a node version of at least 12.8,
dan node 12.8 mendukung ES2019.
and node 12.8 supports ES2019.
Berarti kita harus beranggapan,
That means that we have to assume,
modul yang direferensikan oleh kolom ekspor
modules referenced by the exports field
adalah JavaScript modern.
are modern JavaScript.
Selanjutnya, ada setidaknya dua jenis
Going forward, there’s at least two types
paket NPM yang ingin saya lihat.
of NPM packages I expect to see.
Kita juga memiliki Javascript modern, yang hanya memiliki kolom ekspor
We have modern only, where there's just an exports field
yang menunjukkan paket ES2019,
and that implies an ES2019 package,
kemudian paket yang dilengkapi dengan ekspor, dan kolom utama,
and then packages with both exports and main fields,
di mana kolom utama menyediakan ES5 serta JS fallback umum,
where main provides an ES5 and common JS fallback,
untuk lingkungan yang lebih lama.
for older environments.
Apa maksudnya?
What does this all mean?
Intinya adalah bahwa sebentar lagi,
The bottom line is that soon,
jika Anda tidak mentranspilasikan ekspor paket,
if you don't transpile package exports,
maka kemungkinan besar Anda akan mengirim
there’s a high likelihood that you’ll ship
kode modern secara tidak sengaja.
modern code by accident.
Mungkin mengirim kode modern bukan masalah.
- And maybe shipping modern code is okay.
Kuncinya adalah, Anda menentukan versi modern
The key is, that you define a version of modern
yang mencapai keseimbangan tepat
that strikes the right balance
antara fitur JS dan dukungan browser.
between JS features and browser support.
Penelitian kami telah menunjukkan bahwa EAS2017 ini sangat bagus,
Our research has shown that EAS2017, is a sweet spot here,
karena memiliki 95% dukungan browser,
since it has 95% browser support,
menawarkan peningkatan besar atas ES5,
offers huge improvements over ES5,
juga masih cukup mirip dengan
and it's still really close to what
yang kita semua anggap sebagai Sintaksis modern.
we all think of as modern Syntax.
Ya, kami tidak bilang bahwa
- Yeah, we're not saying that
Anda seharusnya hanya menulis ES2017, tapi justru sebaliknya.
you should only write ES2017, it's much the opposite.
ES2017 adalah target transpilasi yang bagus.
ES2017 is a great transpile target.
Mentranspilasi fitur-fitur sintaksis ES2020 terbaru
Transpiling the most recent ES2020 syntax features
menjadi ES2017, pada umumnya sangat menghemat biaya.
to ES2017, is generally extremely cost-effective.
Output transpilasi, seperti untuk await loop ini,
Transpiled outputs, like this for await loop,
adalah sesuatu yang kami cari.
are the kind of thing we're looking for.
Overhead yang terjadi di sini hanya empat byte.
The overhead incurred here is only four bytes.
Tapi mungkin Anda memang perlu didukung Internet Explorer 11.
- But maybe you do need to support Internet Explorer 11.
Atau mode ekstrim Opera Mini.
Or Opera Mini's extreme mode.
Untungnya, ada cara yang sangat efektif
Thankfully, there's a really solid way
untuk mendukung browser lama tanpa memengaruhi browser yang lebih baru.
to support older browsers without impacting newer ones.
Pertama-tama buatlah paket ES2017 untuk aplikasi Anda
First generate ES2017 bundles for your application
lalu masukkan ke browser modern,
and serve those to modern browsers,
menggunakan tipe skrip module.
using script type module.
Kemudian buat paket polyflow ES5 dan sajikan
Then generate polyfill ES5 bundles and serve those
ke browser lama menggunakan skrip nomodule.
to legacy browsers using script nomodule.
Tidak perlu pengaturan server yang mahal
There's no expensive server setup
atau mendeteksi agen pengguna,
or user agent sniffing required,
itu juga sangat sesuai
and it lines up really nicely
dengan ES2017 kami.
with our ES2017 sweet spot.
Ada dua cara untuk menghasilkan dua set file JavaScript ini.
There are two ways to generate these two sets of JavaScript files.
Yang pertama, adalah mengompilasi aplikasi Anda sebanyak dua kali.
The first, is to compile your application twice.
Kemudian yang kedua adalah mengompilasi aplikasi Anda menjadi modern,
And the second is to compile your application for modern,
lalu transpilasikan outputnya.
and then transpile the output.
Dengan teknik pertama, kami ingin membuat aplikasi,
With the first technique, we want to build the application,
seolah kami hanya akan mendukung browser modern.
as if we were only going to support modern browsers.
Setiap modul sumber ditranspilasi ke ES2017,
Each source module gets transpiled to ES2017,
dengan sesuatu seperti Babel atau TypeScript, lalu kode dipaket.
by something like Babel or TypeScript, then code is bundled.
Lalu kami menjalankan aplikasi full build kedua,
Then we run a second full build of the application,
tapi kali ini dengan transpiler yang telah dikonfigurasi
but this time with the transpiler configured
untuk mengonversi modul ke ES5 disertai polyfill.
to convert modules to ES5 add polyfills.
Hasilnya adalah kumpulan paket JavaScript yang independen
The result is independent sets of JavaScript bundles
yang bisa kita muat dengan browser modern dan yang lama.
that we can load modern and legacy browsers.
Pendekatan kedua akan sedikit mengubah keadaan.
The second approach flips things around a bit.
Kami menjalankan tagihan tunggal untuk menghasilkan paket ES2017
We run a single build to generate ES2017 bundles
untuk browser modern, lalu kami mentranspilasi
for modern browsers, then we transpile
paket tersebut ke ES5, dengan polyfill.
those bundles down to ES5, with polyfills.
Satu keuntungan utama pendekatan ini, bahwa semua kode,
One great advantage of this approach, is that all code,
termasuk dependensi apa pun, bisa menjadi ES2017.
including any dependencies, can be ES2017.
Karena keseluruhan build mengasumsikan kode modern,
Since the whole build assumes modern code,
semua kode bisa modern.
all code can be modern.
Semuanya akan ditranspilasi saat membuat
It'll all be transpired when generating
versi lama dari paket.
the legacy versions of bundles.
Sekarang, semua ini sangat penting
Now, this is all really important
karena IE 11 adalah pajak yang kami, dan para pengguna kami tidak perlu bayar.
because IE 11 is a tax we and our users don't have to pay.
Pertimbangkan biaya, saat Anda memikirkan
Consider the cost, as you think
tentang performa situs Anda.
about your site's performance.
Jika Anda perlu dukungan IE 11,
If you need to support IE 11,
usahakan tidak memperlambat penelusuran
be careful not to degrade the experience
bagi mayoritas pengunjung, demi mendapatkannya.
for the majority of visitors, in order to get there.
Semoga penjelasan kami terkait mengapa
We hope we've made the case for why
JavaScript modern sangat penting sudah cukup.
modern JavaScript is so important.
Kami juga ingin membuatnya semudah mungkin untuk diterapkan.
We also want to make this as easy as possible to adopt.
Jadi kami telah menerbitkan artikel panduan
So we've published a how to article,
yang menyediakan konfigurasi
that provides configurations
untuk fitur build populer agar Anda bisa memulai.
for popular build tools to get you started.
Ya, dan tergantung pada pengaturan Anda,
- Yeah, and depending on your setup,
ini bisa semudah memasang plugin.
this can be as easy as installing a plugin.
Jika Anda penasaran, seperti apa dampak
If you're curious, what kind of impact
mengaktifkan JavaScript modern bagi situs web Anda,
turning on modern JavaScript would have on your website,
hari ini kami meluncurkan fitur untuk itu.
today we're launching a tool for that.
Muat alat, masukkan URL halaman
Load the tool, enter the URL of a page
kemudian itu akan menganalisis JavaScript dari halaman tersebut,
and it will analyze the JavaScript of that page,
untuk menghitung seberapa kecil
in order to calculate how much smaller
dan seberapa cepat halaman itu nantinya, jika memanfaatkan kode modern.
and faster that page would be, if it leveraged modern code.
Silakan lihat, beri tahu kami pendapat Anda.
Go check it out, let us know what you think.
Kami juga sedang mengerjakan sesuatu yang serupa untuk paket NPM
We're also working on something similar for NPM packages
sehingga masukan apa pun untuk versi ini,
and any feedback for this version,
juga akan membantu menyempurnakannya
helps make that one better too.
Terima kasih, kami harap Anda senang mendengarkan,
- Thank you, and we hope you enjoyed listening,
sebagaimana kami senang memberikan presentasi ini.
as much as we enjoyed giving this presentation.
Terima kasih telah menonton.
- Thanks for watching.
Similar videos:

Upgrading DevTools' architecture to the modern web
Chrome for Developers
10.4K views 338 likes 5 dislikes 23 Dec 202070% match

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202060% match

Chrome Dev Summit Adventure: How we built it
Chrome for Developers
4.4K views 131 likes 6 dislikes 14 Dec 202060% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202058% match

The web ahead
Chrome for Developers
5.3K views 105 likes 3 dislikes 21 Dec 202058% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202058% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201956% match

The best of Chrome games | Chrome Developer Summit 2020
Chrome for Developers
11K views 417 likes 18 dislikes 24 Dec 202056% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201956% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201956% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201956% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201956% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201956% match

Extending Workbox: Custom strategies and plugins
Chrome for Developers
4.5K views 83 likes 5 dislikes 18 Dec 202056% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201956% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201956% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201956% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202056% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201956% match

Facilitating payments on the web (Chrome Dev Summit 2019)
Chrome for Developers
2.5K views 86 likes 3 dislikes 22 Nov 201956% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201947% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201947% match

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201947% match

Chrome’s ecosystem collaboration (Chrome Dev Summit 2019)
Chrome for Developers
2.7K views 51 likes 5 dislikes 18 Nov 201946% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201946% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201946% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202045% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201945% match

Designing for speed and hacking user perception (Chrome Dev Summit 2019)
Chrome for Developers
9K views 539 likes 4 dislikes 15 Nov 201944% match

User-first interactive sites with AMP (Chrome Dev Summit 2019)
Chrome for Developers
3.1K views 98 likes 38 dislikes 18 Nov 201944% match


Settings Privacy About Contact Donate