What's new in JavaScript - HTTP203

Chrome for Developers · Intermediate ·📰 AI News & Updates ·7y ago

Key Takeaways

Discusses the latest developments in JavaScript with experts Mathias Bynens and Sathya Gunasekaran

Full Transcript

so I'm really on going to be on TV right like now you're not gonna cut it up well it's you to be on TV latitude if you cast it otherwise it's just right that's good enough [Music] so we're professional viewers totally we've been doing this a while now literally since yesterday we're gonna give you the the first question were you given everyone who are you and why I'm sorry I I work on Viet at Google on it's the engine just in Chrome and node which engine it's a JavaScript engine engine I get to you okay get to you I'll shut up now and why because I don't know better actually now you now speak oh okay thank you yeah so I also work on v8 I'm a dev rel on the DEA team and yeah Soviets implements JavaScript features as well as web assembly functionality it's all part of the same engine and a chips in chrome and node and other and matters like electron yeah I like how he skipped his name yeah oh yeah my name is Mattias so this is your well both of your first iOS we're surprising yes yeah and you both spoke at your first i/o so what wheelhouse yeah yeah yeah house I was impressed like yeah how did you get so many people what you talk about modern JavaScript features right there's out a lot of people are using javascript who journey okay what are they going to add stuff to vbscript do we are we gonna get more features that we need to feature parity yeah I like redeeming a race did we ever support it in Chrome nope it's only ever IE yeah and even they've got rid of it so okay run us through some of these new features thing okay so one big new thing well what's my favorite that's a really difficult question also isn't it no it depends on what you mean but new like one of the features that has been in the pipeline for a bit longer is modules and maybe it's not super cool to talk about modules because there were in yes 2015 I guess if you look at the syntax parts only yeah but only as of today they're available in all major web browsers which is pretty exciting and then there's no js' where they're still working out how much it should really work natively by default and what is the state of that that's good I've stayed away from that whole thing I the community seems sort of very angry internally and I was I kind of I kind of checked out but it kind surprises pretty much without any there's an experimental implementation and node behind a flag and it only supports modules for files with the MJS extension right I suppose that's where a lot of people get kind of upset a little bit because people are used to the GS extension for JavaScript but in a way I think it makes sense because you you need to make the distinction between regular scripts and modules anyway because they're treated a different way they are interpreted in a different way modules have few scripts by default so there you strict they're in strict mode by Drupal and there's other differences string that ran they have import and export like the static variants only work in modules not a regular scripts so if I if I create a constant inside a module does that go in the global scope is that one of the differences the things I can never remember it doesn't go in the global scope yeah it doesn't go in the global scope in as my driver No yeah yes yes you do Jake no but like we recently had a conversation about something similar because you know about constant let and the like block scope bindings but the same thing happens for class declarations for example there also a lexical so that means if you have a class in the global scope it's not actually globally available it's available within the same script text but it's not attached to the like the window object for it you have to assign yeah it's like I mean that's even though we implemented in v8 we rewrite the class declaration as a class expression with an assignment in a lab variable no way yes way it's all just syntactic sugar isn't it and then you write that just being a function where it's at the prototype probably not good I never failed it and at the start bubble that yeah we call it the sugar ring and it happens in JavaScript engines all the time okay so we got modules what else did we get what else is new I'm excited by it class feels like private fields now that's in classes yeah in classes so that something grow yeah it's being a flagon come I have it such actually implemented this but it's not a flag it still being a flag exclaim er but still that's something people can play with remember yeah so normally JavaScript I'll always use underscore to like to know that it's private by convention but the language doesn't enforce it yeah right so you could still access that and we've seen like people accessing private API is from react and like node so with private fields you don't have that problem so instead of using underscore you can just use the hash sign you create a property or assign to a property so it's like this this dots hash thing yep and you can only access that within within a class body so outside the class body it throws the tiber and it does it still work if like say if I'm in a set timeout I guess you're using arrow functions I can still access it there no it needs to be in the well if the set timeout itself is in the class body then sure then it's fine okay okay so is there any way to break that rule with like reflect or something nope it's hard private Wow okay that's great and it's not just private fields it's only just class fields itself is useful by itself because now you no longer need a constructor necessarily if you just want to initialize some fields you can now do this outside of the constructor just as part of the classic question just to like let X semicolon in the class that's yeah the first time I met you is because you are the one at that point still working on implementing dynamic import and that term atomic import is like the one of the biggest changes so good since we were thinking about modules I remember like it yeah um don't be freezing mailing lists like loads of arguments about how we could do a sync script loading and sort of all different sort of API is because they there was like free those big big free script loading things I was like lab je s required and I everyone disagreed and how to do it so it's just it's just so nice to see that the language come along ago no it's just like that that's an import you've done off we go we got promises now problem solved await import boom and done so I remember when you joined I got a bit jealous well not not when you joined it later because as soon as you join Google you got invited into the secret Specter meltdown Club oh I didn't even know existed and then later on is like hey I knew all along hahaha so like what was that like then to be to just join and be sort of thrown into that world to know it was mostly very frustrating because I couldn't talk about this to anyone like including my own manager or my managers manager or anyone in my 22 manager but no like I I mean I was spending a lot of time working on this and help me out with this but I couldn't include it in my weekly reports of stuff that I worked on so I had to somehow look productive for names yeah I just couldn't mention it but like yeah it's a little unfortunate v8 got caught in the middle of the storm there because I mean we're a compiler right we generate code dynamically so let's go wrong there yeah nope now at least yep out in the open and we've been working on mitigations I mean for months now even before it was made public so yeah we have this wiki article that documents all these mitigations and how people can enable them and whether you want to do so really depends on the kind of embedder you are yeah a lot of people forget has to be here for most developers these things are not relevant like because the embedder is chrome or node exactly like some yes I guess electron all these things like as a developer yeah something to worry about right yeah so these host environments have to decide whether they they basically run untrusted code like on the web where you visit a website and you run random JavaScript right it could be from anywhere it could be code that is included from a third party through that website you don't know what's going on there that's not even that rare I mean it happens yeah it happens all the time it's not rare at all but that's completely different from the security model that nodejs has for example where the idea is that you're running code that you trust like you run a web server that you wrote and sure I mean you include some NPM modules that you installed but the idea is that you trust these modules otherwise you don't Adam as dependencies so know to generally run trusted code on the web it's you know it's the Wild West it's completely for all so they're just completely different security models and we have a flag now that allows you to switch between the two modes of because there's some performance penalty if you use it that's the reason yeah I've seen some graphs but once we some servers integrate the Spector and meltdown mitigation pretty quickly obviously like servers and then yeah or depends what the access is right performance went down times went up yeah yeah it's a little sad but like ultimately security of users is much more important than any kind of performance metric I'm gonna say that yeah is it really the answer is yes so like well we've got the two of you here we there's a proposal in JavaScript that we're very excited about all right and and one that we're all so excited about but it's been made into a kind of face off race a so left hand corner yeah like double : I'm like pipeline it's okay see what it solves it seems very complicated but I see what it solves but I want the ability to oh another video about this one ability to like import methods that will be called on their class like so they they ID you'll get the tree shaking thing all happening sort of for free and it's the bind operator that lets us do that and tc39 is saying it's one or the other why [Laughter] have you you know you're aware of both of these proposals right yeah as an implementer do you have a preference like is there something where you think this is stupid to implement this is easier or do you think this has more side effect in the other like is there anything that know as far as implementation is concerned I'm okay with both they're both easy to implement so it really goes to like our diplomatic really changes the ergonomics of the language and it's complicated because we add more like syntax yeah so there's like a syntax budget that we're like constantly aware of and we wanna exceed and add more sigils to the language we remove syntax to free up the budget really Plus do we really need people don't want them anyway semicolons if I get binds you can pretty much be implemented us by using your - so let's do we just need to get rid of one Operator to get the bind operator okay these two characters right two characters so we get rid of semicolons as well there we go and job done all right oh this is serious is there a reason why I like things like bind aren't really been taken forward as much as I well I guess our bottom line was like bind is a much less intrusive change because it's just that's just the sugaring it's ejected Sugar's over the bind clock while pipeline in its different forms that are in the proposal Ram does some magic and also has even the especially the smart versions like the question mark yeah that that's one problem at pipeline like you want positional arguments and you want to say okay I want to fill out this argument here as I pipe it through and that's where everybody's hair you should take the poop emoji instead of the question mark and would make the code not for you I would be okay with that okay it's it from 14 nights and there's like you know what the teen is annoyance is so for tonight whoa I think you might be right I've always used but I do think it's like the knight and the fort you spend 14 nights in the fort yeah I'm sure that's actually more fun definition than just 14 nights

Original Description

Jake & Surma discuss the latest developments in JavaScript with Mathias Bynens & Sathya Gunasekaran. Subscribe to the channel! → http://bit.ly/ChromeDevs1 Watch more HTTP203 → http://bit.ly/2sPq2LB Listen to the HTTP203 podcast for more content! → https://developers.google.com/web/shows/http203/podcast/ Itunes → https://apple.co/2IQagG6
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 0 of 60

← Previous Next →
1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Related AI Lessons

AI - Understanding it the modern way
Learn how AI is integrated into daily life and its modern applications
Dev.to · Riturathin Sharma
The AI Approval Gate: What Anthropic’s Mythos 5 Decision Means for Your Business
Understand the implications of Anthropic's Mythos 5 decision on AI approval and usage for businesses
Medium · Cybersecurity
The AI Moat Paradox: The Better Models Become, the Less Models Matter
The AI moat paradox suggests that as AI models improve, their importance may decrease, and understanding this concept is crucial for AI professionals and businesses.
Medium · AI
170,927 AI Papers Reveal the Biggest Research Shifts of the First Half of 2026
Discover the biggest AI research shifts of 2026 based on 170,927 papers, and learn how to apply these trends to your work
Medium · Machine Learning
Up next
Man dies after horror Gold Coast house fire; high-speed Sydney motorway pursuit | 9 News Australia
9 News Australia
Watch →