Transitioning to modern JavaScript

Over 90% of web traffic comes from browsers that support modern JavaScript, yet most websites ship legacy syntax in order to support a small number of very old browsers.
We now have the ability to deliver modern and legacy code to browsers based on what they support, but this doesn't extend to the large amount of dependency code in our applications. Our dependencies are still published as verbose legacy syntax in order to support the lowest common denominator of browsers today.
This talk explains how legacy dependency code is one of the biggest performance problems on the web today, and what steps we can all take address it.
Resources:
Publish and ship modern JavaScript → goo.gle/3fD8Tw0
Speakers: Houssein Djirdeh, Jason Miller
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-...
#chromedevsummit #chrome #javascript
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Jason Miller;

[@milanlucansky2825]

Nice! This video can be also called "The cost of IE11!"

[@0dyss3us51]

That was super interesting, would love to see more videos like this

[@kolavithonduraski5031]

you are a very good team. good presentation, good talk. nice job guys! Thanks !👍

[@nevinkuser9892]

Yes, well done.

[@georgekrax]

Great talk! Really liked the way you explained things and provided useful and easy solutions

[@megabyte01]

Thank you for this explanation of the benefits of transitioning from es5 to 'modern javascript'. I think I understand why one of my projects ran slower than expected in a certain edge case. I set the target to es5 and it used the transpiled polyfills instead of the modern code.

I've found generators to be most useful when writing code for Node; in cases where you are slowly going trough a big dataset that mutates during the operation.

[@MobiusCoin]

The ONE time I had to use a generator was to do the thing in the example 😅

[@hnasr]

Its really weird to hear my name on Google Chrome dev haha Houssein great content and awesome name dude!

[@TesterAnimal1]

Lucky to be able to. I just finished clearing our codebase of IE workarounds and polyfills today.

[@vikramadityakukreja6725]

This was a well presented session. Thanks folks!

[@nevinkuser9892]

I like how you guys casually said to leave anyone who still uses ie11 in the dust. 🤟💪

[@tptyuvi]

This is really useful 👌 and we will start implementing these modern tranpile which is into ES2017

[@truedreams1]

This video is a nice short way of catching up with status of vanilla JavaScript.

[@shaneckel]

we're boiling the ocean for transpiled js.

[@gandautama4141]

me too lol... let the transpile do its thing.

[@peggyhill8028]

How do you start?

[@emr550m]

Love the video guys. Very descriptive and super advanced.

[@javiasilis]

The moment you realized what modern JavaScript is @ 01:50.... my life has never been the same.

[@rachitsharma7921]

The generator part was awesome

[@nivo6379]

Modern for-loops suffer from low performance. The same is true for mixins vs classes. If we want people to adopt new features, we should provide better "runtime-performance" as well. Size != Runtime performance.

[@dassurma]

I don't think modern loop constructs are slower anymore. That was true about half a decade ago

[@nivo6379]

@@dassurma I cannot reproduce this in my benchmarks.

[@ddrweb_]

What about the bandwidth consumption that this video is generating, how many trees did you plant?

[@metzidis]

the modern javascript treadmill : every 2 years rewrite your app in modern javascript. bonus, payload will be 30% larger

[@DenisTRUFFAUT]

7:14 80 petabytes / month of unneeded legacy JavaScript ! 10:45 for await (let v of a)

[@jonmongeau5039]

Quiz at the start had me worried, very informative study.

[@ishan101]

This is lovely, great information. Looking fordward for more .

[@soykike1991]

Awesome! will start using estimator on all my projects!

[@ThomasGodart]

Excellent video, super clear, super useful. Thanks

[@alexleung842]

Now that Google controls the entire browser market share (Mozilla being killed, Edge & Brave running on Chromium), what's stopping the browser from supporting all the necessary APIs to bring gRPC to browsers natively (ditch the need for gRPC-Web proxies)? The W3C not cooperating?

[@Codefide]

Really great talk, very informative thanks guy. Well, looks like estimator dev got pulled offline real quick though 😢

[@serkanyazicioglu]

That kitchen is very modern and looks beautiful 👌

[@pavel7781]

What programmes do use to create so excellent presentation? Thank you.

[@vivekgautamj]

Clear and concise explanation 👍

[@JackSparrah]

This was fantastic info. Thank you!!

[@tritc]

Great! Thank for useful sharing :)

[@eneajahollari1203]

We get this out of the box with #Angular. It's called Differential Loading.

[@JasonMillerDeveloper]

Yep, Angular is doing this nicely too for packages that use the Angular Package Format, since they have an Angular-specific way to publish ES2015. We need that for all the non-Angular modules though (even for ng projects).

[@arjunshinde7]

Liked your video very much. Thanks for sharing with us.

[@lukor-tech]

I am def. Going to show it to my coworkers. Maybe it'll help us a bit.

[@semrana1986]

solid stuff... really enjoyed it... thx

[@RodyDavis]

Lately I have just been writing everything in typescript. Does this just allow me to target modern and legacy via the typescript compiler?

[@jemesmemes9026]

Yep

[@FastLegs]

Google has some fake-conversation-format in some of these videos and I find it very weird and distracting

[@marlonlamancio]

Great and funny class!!

[@vikramsrinivasan8176]

Where do I learn this => when I learned javascript years back it wasn't there?

[@Ostap1974]

The solution works for now, but would have liked to see a solution that could be also used in 5y. for example or similar, so that every browser could choose the topmost version it knows it supports.

[@JasonMillerDeveloper]

This was proposed a few times and did not move forward. Thankfully, it's very unlikely ES will end up undergoing a transformation on the scale of ES2015 - that spec and the two years that followed it were essentially 10 years of language design rolled into one.

[@moonfaceddr]

Very very nice presentation!

[@shubitoxX]

What about the CSS part? Shipping modern vs legacy CSS?

[@dylanadc4403]

Very cool talk thank you!

[@sangharshjadhav522]

for a person who is on a learning path to web development how would you guide them to learn the modern way of java scripting as their first approach to javascript.

[@MrJohn360]

Great content, thanks so much for sharing!

[@adityapoddar3798]

After listening to the cost of shipping older version of javascript. In terms of my small contribution towards environment I will try to ship modern javascript. Save Trees.

[@jadedtheredone]

Did anyone create a webpack configuration, referencing the last scheme, building both modern and legacy bundles?

[@RakeshKumar-bq3mf]

nice info and great job guys...........Thanks...:-)

[@kathrinayer6402]

Is there a link to the data for the carbon cost of old javascript?

[@varandpezeshkian6299]

very informative , thank you

[@axel_so]

You made me think, great video!

[@trappedcat3615]

var and console are actually modern: supported in all modern browsers.

[@JasonMillerDeveloper]

The wording may have been a little off, but the code samples were intended to show examples of syntax that was previously not supported. While ECMA versions are backwards compatible, newly introduced syntax can provide advantages over existing syntax. As an example: `let` bindings can be used within nested scopes, whereas `var` can require a function to achieve the same (same result, just smaller/faster).

[@vladmelnyk4329]

Lewis must have learnt JS pretty fast

[@jamalabdullahi8155]

Hi Hussein GREAT JOB

[@avneeshgupta4580]

Amazing video ! Very well explained! But I tried the estimator.dev tool it seems broken to me! I see lot of console errors, even when I tried with google.com

[@JasonMillerDeveloper]

Some websites are blocked because of the simple technique I used to block ads/embeds. Google should work but it takes a while. Might have been over the bandwidth limit on the weekend (not sure).

[@VitalyZdanevich]

Please use dark background for your slides for less CO2.

[@peggyhill8028]

Where do you find a Generators to JavaScript

[@sudhamajayanthi]

As someone with python background and started with JavaScript recently, I HARDLY UNDERSTOOD anything in this, but I felt really something important and interesting to know “what it is” when it is linked with environment...... it would be great if anyone could explain briefly what this video is about?

[@adamploof3528]

Developing for the web is not my specialty by any means, but I'll take a crack at this question. The main theme of this video is that modern Javascript features are significantly more efficient in terms of the computing power needed to execute Javascript written with those features as well as being generally cleaner to write from the programmer's perspective. The trade off is that not all browsers support these features so you run the risk of your website not functioning properly for a certain segment of users. The typical compromise is to take code written in a modern style and transpile (translate) it into an older syntax of JS that is understandable to browsers that don't support those modern features. The trade off with this approach is that, in return for wider browser support, your program will run slower and be more costly in computing resources to execute. In a nutshell, what the presenters are advocating for is a "have your cake and eat it too" approach. They suggest, when building (compiling) the JS for your application, build a modern version and a legacy version and serve whichever version is most appropriate to the user depending on the browser being used. That way people using modern browsers get the benefits of modern JS, and your application will still work for people on older browsers.

[@joshpetit8298]

The moment they brought in the climate statistics I was sold. I'm always reluctant to change but I'm down if it means saving the environment!

[@epion33]

I thought that segment was un proportionally expressed, considering the rest of the video being all about browser support.

[@blehbleheh]

Admit it, we all know "cross browser compatibility" was just the politically correct way of saying "make sure it works on Internet Explorer."

[@simioni]

Microsoft itself has stopped supporting IE. It's no longer installed by default on Windows. It even is redirecting users to Edge automatically now. Why are we even talking about IE at this point?

[@liam_iam]

education and enterprise holding everyone back smh

[@JasonMillerDeveloper]

It's easier to move forward once build systems and the module ecosystem can move beyond catering to the lowest common denominator. This is a distributed problem that requires a distributed solution.

[@make-coffee-now]

Murphy’s law: whatever can be coded will eventually be coded in JavaScript

[@danieltroger]

I'd like a guide for parcel to ship untranspiled bundles

[@danieltroger]

btw I figured it out and built a very nice compiling and deployment system

[@danieltroger]

try changing ie11 to "latest 1 firefox version" in this github.com/parcel-bundler/parcel/files/5757137/parcel-bug-repro.zip

[@alukart123]

Ok, now why is Object.assign not modern? I only use that in composition based projects, and never had issues. If it's not modern, what else do you use?

[@dassurma]

"not modern" doesn't necessarily mean bad. Just means it had support on legacy browsers.

[@nguyentonggiang1994]

I think the modern version of Object.assign is spread syntax ( const newObject = {...oldObject}; )

[@AzizKhambati]

2:49 That's not binary search but rather depth first search.

[@JasonMillerDeveloper]

Heh - I was waiting for someone to point that out. I wrote the wrong thing in speaker notes and didn't remember to correct it during recording 😂

[@phil86_]

Super super intreresting

[@FINSuojeluskunta]

I'm sure this has been asked a million times before but why care about those using IE11 or unsupported browsers? Is it mainly government etc. and they need to be catered to?

[@vulgarlang]

If you're a big company, like a bank, you don't want to lose that 1% of boomers still using IE11. Interestingly, my bank's website recently announced they are dropping support for IE, which is I think is very bold and commendable of them. Government website's will probably never be able to drop support.

[@puk3rz]

There are many enterprise entities still using ie11, and at much more than 1%. This is of course ignored by people that think web dev is only for public facing websites

[@puk3rz]

Again ignoring enterprise software development, which has a much larger user base still on IE11. (I wish that wasn't the case, but it is)

[@MaxMustermann-vu8ir]

Classes: a feature in "modern" JavaScript that "old fashioned" languages such as Java had some 20 years earlier. Funny 😁

[@justiceparis7741]

Old JavaScript prototypical inheritance is much easier to understand than "traditional" classes.In some ways it is even better considering single inheritance.

[@justiceparis7741]

What if I only know ES5 ? Can I only use ES5?

[@NandoSangenetto]

Nice video!

[@AurelioPita]

Great stuff

[@ahmde]

Me in 2014: I will even support IE 6 Me in 2021: I don't even care about FF

[@logusgraphics]

Great content

[@samiemadfdc]

How is the generator example at [2:49] implementing a lazy "binary search". If I can read it properly it's lazily iterating over all elements. How would it even do a binary search if the dom elements are not sorted?

[@AzizKhambati]

Its depth first search.

[@samiemadfdc]

@@AzizKhambati Yeah, exactly

[@JasonMillerDeveloper]

heh - yeah, I changed the example but forgot to correct in my speaker notes. Read them out during recording without remembering to correct on the fly.

[@samiemadfdc]

@@JasonMillerDeveloper Thanks for the clarification. I was a bit confused because I was really new to the JS generator syntax.

[@heinhtetzaw9463]

Save the world by using modern Javascript

[@peggyhill8028]

How do you JavaScript

[@dachd]

as angular Ivy transforms modules to ES2015 and generates Ivy code from ES2015 code, then I don't see a problem that plenty of code is median ES2015. Why not? it's not indicating anything malicious or carelessness.

[@JasonMillerDeveloper]

ES2015 is fairly modern compared to the prevailing default of ES5 used by npm packages. Ivy doesn't generate code from ES2015 though, it generates code from templates. ES2015 is essentially bundled as-authored aside from optimization/minification passes.

[@michaelquamdonkor5254]

Is it relevant to learn jquery now? I wanna learn react or vue

[@michaelquamdonkor5254]

@@claudeb.3473 I already know the basics

[@ash-faque]

We should forget the ie11 :)

[@HoffmannPeter]

Unfortunetly we can't all just forget about ie11. One sad example are schools that still have to deal with old pieces of technology.

[@keithnicholas]

the irony of legacy software, there's a lot of stuff built for the enterprise that relies on IE11 (things like ActiveX). This software just works, its stood the test of time. Now people want to kill it because they want the latest cool thing :) .... having said that, I want IE11 dead also :)

[@Wavywahid]

Im so tired of writing or transpiling different code for different browsers. Like I developed web components and for legacy browsers I had to transpile and use polyfills. But IE Edge didn't support it either so I had to transpile and use polyfills for that too. But edge doesn't load scripts when you use 'nomodule'

[@JasonMillerDeveloper]

module/nomodule isn't the best cutoff for Web Components support. For that I'd recommend conditionally loading the polyfill script when `window.customElements` is undefined.

[@codeblooded]

@6:04, the metric should be 780B not 780b

[@JasonMillerDeveloper]

good catch. or 6240b! haha

[@kayan_dev]

Amazing

[@pankajkhushalani]

I thought you would mention the solution of all this to shift to web assembly language such as Rust😅

[@w1d3r75]

I didn't know vanilla js was that harmful for the planet :/

[@arthurmartincoutrier9586]

i learn slowly about you said,sorrry

[@martinalcala4823]

Generators are really cool tho

[@martinalcala4823]

@@agenticmark btw, Redux Sagas are a great example for using generators in a reactive way

[@manantank]

Wow 😮

[@AlexandrosFotiadis]

es5, es6, es7, es8, es9, es.. typescript we will get you there if you like it or not 😜

[@kathib2571]

I prefer to not think about energy, that is wasted all the time, frome bitcoin to js, it does not play a role anyway, but thanks^^ for reminding

[@cheng6523]

End of a day: damn... wrote quite a lot CO2-generating JS, probably worth 2 more trees 😂

[@ouweiya]

7:13 Using modern codes can reduce carbon emissions.

[@KavehSaket]

Thank you. It’s up to us to save the planet

[@vikramsrinivasan8176]

Does browser tightly coupled with Operating System? How difficult is to incorporate JVM into browsers as scaled down java (JavaScript) is supposed to be platform independent?

[@samchoi1860]

37 million trees!!!!

[@webosm6494]

Really? Cost of legacy Javascripts is measured in CO2 which actually promotes plant and tree growth. Looking back it would have been better to base browser standards when IE 5.5 (50-80% market share) was avaialble and grow from that. It was just hate for MS that got this into this mess in the first place. Box model anyone....

[@TrainingWithKona]

lol why did i not know generators could iterate using for-of

[@besrabasant]

Stop using Javascript.... Reduce CO2 emissions 😂😂😂😂

[@FINSuojeluskunta]

This is the only real solution.

[@kathib2571]

and i don´t understand