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