Franziska Hinkelmann: JavaScript engines - how do they even? | JSConf EU

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ต.ค. 2024

ความคิดเห็น • 107

  • @964tractorboy
    @964tractorboy 7 ปีที่แล้ว +80

    An excellent way to spend 25 minutes. Thank you!

  • @armanb9778
    @armanb9778 7 ปีที่แล้ว +76

    Very interesting stuff. It's always nice to know a little more about what goes on under the hood.

  • @serhiikrechko
    @serhiikrechko 2 ปีที่แล้ว +14

    This is very useful for understanding javascript internals. Thank you Franziska for the clear talk!👏

  • @srcmake
    @srcmake 5 ปีที่แล้ว +19

    Amazing presentation. It explained everything really well and even taught me a few tricks.

  • @peterbarraud5254
    @peterbarraud5254 7 ปีที่แล้ว +6

    Thanks much Franziska. Would love to see more of such stuff. Help us work better with the JavaScript engine

  • @crabsynth3480
    @crabsynth3480 6 ปีที่แล้ว +9

    Awesome Presentation !!! This definitely Demystified some of the Inner workings of V8 for me. Kudos !

  • @shubhamagrawal5784
    @shubhamagrawal5784 6 ปีที่แล้ว +129

    No wonder they names it V8, they made it in germany.

    • @dealloc
      @dealloc 5 ปีที่แล้ว +9

      Actually it was initially created in Denmark by Lars Bak.

    • @vasafeasdas6183
      @vasafeasdas6183 5 ปีที่แล้ว

      @@dealloc #totallyNotRelated

    • @pongstr
      @pongstr 5 ปีที่แล้ว +2

      @@dealloc oh wow, really lol

    • @jackluo9347
      @jackluo9347 4 ปีที่แล้ว

      why? i cant get it.

    • @landryplacid4065
      @landryplacid4065 4 ปีที่แล้ว +1

      lol.... v8 sounds like a german car. Had to be a high performance Car, the V8 is actually a highly optimize car for carrying js code to the os and machine code(running js code). Germans and engine. nice synonym.

  • @bouhannacheabdallah
    @bouhannacheabdallah 5 ปีที่แล้ว +11

    this course should one of the mandatory courses that a developer should follow to make the code work in very efficient way and give best performance and hardware management .

  • @FunctionGermany
    @FunctionGermany 2 ปีที่แล้ว +1

    cool talk, i learned a lot :) i wish there were more accessible talks like this that talk about JS performance

  • @vinothkumarv9722
    @vinothkumarv9722 3 ปีที่แล้ว +4

    An excellent way to spend 25 minutes. Thank you! really amazing :)

  • @matthijshebly
    @matthijshebly 7 ปีที่แล้ว +3

    Started out a bit slow, but then this talk became very interesting indeed, and this will help us write better, faster code. Awesome!

  • @belrestro
    @belrestro 6 ปีที่แล้ว +6

    Simple but useful presentation

  • @ctRonIsaac
    @ctRonIsaac 6 ปีที่แล้ว +10

    I love listening to smart people.
    - thanks!!

  • @TheAxeForgetsTheTreeRemembers
    @TheAxeForgetsTheTreeRemembers 6 ปีที่แล้ว +2

    The intro jingle is cool!

  • @ben4d85
    @ben4d85 6 ปีที่แล้ว +5

    Sehr interessant, Dankeschön!
    Would you agree that the statement "From a compiler's perspective, the best thing we can do is to write code that looks like it is statically typed", can be used as an argument in favour of TypeScript, which as I understand it naturally encourages us to write code that looks like it is statically typed. Hence, does writing our code using TypeScript make it more likely that the resulting JavaScript code can be optimised in a way that increases performance?
    Using that argument, can it therefore be inferred that "using TypeScript makes our apps faster"?

    • @f_hinkel
      @f_hinkel 6 ปีที่แล้ว +4

      Definitely, also, because TypeScript is great! The "types" in TypeScript are not necessarily the same "types" for V8, but by using TS you're getting automatically more statically types nature, so it's usually better for the engine's speculative optimizations.

    • @prashantdhameja5778
      @prashantdhameja5778 5 ปีที่แล้ว

      Hence even after being dynamic type language, the performance increases by statically typing. Is this same under the hood of python?

    • @-taz-
      @-taz- 5 ปีที่แล้ว +1

      The question is: does adding types help us understand the program better, or does it just add noise? Having used around 30 languages, including Javascript since 1996, TypeScript a bit, and a typed version of Javascript for Flash (which I would categorize as the same language in all these cases), I think the type information is mostly useless noise. I also write a lot of C++ (since 1994). It seems to always be moving more toward generics where types are inferred or deduced, so advanced C++ code is extremely noisy, sometimes becoming impossible to understand. All that extra noise merely says "do whatever you want whenever you need to, compiler." That's exactly what JS does ALWAYS and with ZERO noise.

    • @Elite7555
      @Elite7555 5 ปีที่แล้ว

      Type refinement in JavaScript is a very cheap operation but it allows the compiler to optimize parts of the code it can be certain about (look at asm.js). Variables not changing their types certainly does help optimization. Also object literals having the same "shape" does help. But what doesn't help are "nullables" (not always the same type), tuples (don't really exist in JS) or tagged unions (while a nice feature of TS, for V8 it would actually be impossible).

    • @avimehenwal
      @avimehenwal 4 ปีที่แล้ว

      Sehr nett Frage :)
      Theorytically you are right on point.If we discard the indirection stage added to first compile TS to JS, the generated JS is more optimized and hence might run slightly faster. To my observations the performance gains are considerably small for a mid sized app.
      A con is it increases the build time marginally

  • @doug2279
    @doug2279 4 ปีที่แล้ว +2

    can the engine not be modified to take typescript raw and use the types for increased speed??

  • @snjvthakur24
    @snjvthakur24 22 วันที่ผ่านมา

    Lots of knowledgeable insights thanks

  • @JM14062010
    @JM14062010 4 ปีที่แล้ว +3

    Interesting stuff, thanks for the explaination!

  • @derjansan9564
    @derjansan9564 ปีที่แล้ว

    Some time ago the Chrom profiler would show you if a function was deoptimized. Unformtunately this "performance debugging" information is no longer available in newer versions of Chrome.

  • @GauthamBangalore
    @GauthamBangalore 6 ปีที่แล้ว +4

    Very nice video. At 22:15, isn't the "let" keyword part of ES6 and not ES5?

    • @avimehenwal
      @avimehenwal 4 ปีที่แล้ว +1

      you are right. let is ES6 specification

  • @johannes-vollmer
    @johannes-vollmer 7 ปีที่แล้ว +6

    C++ has 'auto' which works similar to 'var' in Js. But, exactly as in Js, you cannot ignore the type. Even assignment does different things, depending on the type of the variable. In Js, primitives will be copied but objects will be a copy of reference, which then refers to the same object.

    • @-taz-
      @-taz- 5 ปีที่แล้ว +8

      In C++11, the "auto" keyword was redefined to be a placeholder for a single type deduced from their initializer. For example, "auto x = 42;" is identical to "int x = 42;". Likewise, "auto x = true;" would mean "bool x = true;". The "auto" variable is still bound *permanently* to a type. That's completely different from var, which is a variant. A variant's type can change during its lifetime. C++17 has std::any and std::variant, which are more like var:
      godbolt.org/z/4926dx

  • @theshermantanker7043
    @theshermantanker7043 3 ปีที่แล้ว +3

    ES6 and ES.Next are really far apart by now, everyone's having a hard time keeping up :/
    Now we have ES11!!!

  • @kasimsche2812
    @kasimsche2812 4 ปีที่แล้ว +2

    Thank you so much for sharing such a great information. Very informative 25 minutes👍🏻😇🙌🏻🙋🏻‍♂️

  • @mustafwm
    @mustafwm 7 ปีที่แล้ว +2

    Excellent talk. Thank you!

  •  7 ปีที่แล้ว +8

    is the intro supposed to sound like the zelda theme?

  • @anonmityslayer
    @anonmityslayer 28 วันที่ผ่านมา

    I didn't get
    "Baseline compiler is an interpreter"
    I am beginner and as per my knowledge interpretation is different than compilation i guess ??

  • @code_cutter
    @code_cutter 3 ปีที่แล้ว

    16'33": "this is the optimized code that was generated after we have ..." What does "" mean? Does it mean that the script file contains a similar code pattern repeatedly, or that you have pressed F5 a few times?

  • @dayumnson9769
    @dayumnson9769 3 ปีที่แล้ว +1

    great talk!
    21:00 is this the reason for the optional variables : testVar?: number etc.. in typescript?
    will be checking to what it will becompiled now! :D

    • @reiskoryphae
      @reiskoryphae 2 ปีที่แล้ว

      What happened after your test?

  • @carlosbenavides670
    @carlosbenavides670 3 ปีที่แล้ว

    Brilliant talk,
    Thanks for sharing

  • @Cognitoman
    @Cognitoman 5 ปีที่แล้ว +3

    I like how they changed the names of the processing of the V8 egine to stuff like " ignition" and "turbo fan". its easier to remember because its like a car engine now.

  • @urgn
    @urgn 2 ปีที่แล้ว

    Is there a record of tech talk by her co-worker Maria speaking about JavaScript parsing she mentioned on 11:30 ?

    • @urgn
      @urgn 2 ปีที่แล้ว

      th-cam.com/video/Fg7niTmNNLg/w-d-xo.html

  • @mortsnoody8639
    @mortsnoody8639 7 ปีที่แล้ว +4

    Thanks for the presentation. I'm in a bit over my head, but I was able to follow along. I am uncertain about one point, though.
    Given two objects {x:"a string", y:5} and {x:"another string", y:7}, would they be of the same type, despite differing string lengths? Is the string value of obj.x stored by reference so that the location of obj.y is always the same, relative to the object?

    • @gnackattack
      @gnackattack 7 ปีที่แล้ว +3

      Yes they would be considered to be the same type by the compiler.

    • @oliverford5367
      @oliverford5367 6 ปีที่แล้ว +2

      Strings are the same type. The length of a string is part of the type. Strings in js and most languages are a length/address pair.

    • @avimehenwal
      @avimehenwal 4 ปีที่แล้ว +1

      I maybe late for the party but, according the ECMA-262 3rd Edition Specification, each character represents a single 16-bit unit of UTF-16 text:. Hence both obj will have same types

  • @jaysistar2711
    @jaysistar2711 6 ปีที่แล้ว +3

    Intro was a variation of Zelda fountian/file select music.

    • @-taz-
      @-taz- 5 ปีที่แล้ว

      Also the beginning of Scott Pilgrim.

  • @prashantdhameja5778
    @prashantdhameja5778 5 ปีที่แล้ว +2

    Thanks a lot😄 this was a great video.

  • @u0000-u2x
    @u0000-u2x 3 ปีที่แล้ว

    Excellent presentation

  • @MrAlithom39
    @MrAlithom39 3 ปีที่แล้ว

    super interesting. great presentation

  • @amoshnin
    @amoshnin 3 ปีที่แล้ว +1

    Amazing talk! Thanks!

  • @yash9944
    @yash9944 6 ปีที่แล้ว +1

    Awesome explanation.

  • @PradeepSamuelRocks
    @PradeepSamuelRocks 4 ปีที่แล้ว

    Interesting !!! Nice explanation ...thank you !!

  • @oliverford5367
    @oliverford5367 6 ปีที่แล้ว +3

    If websites provided v8 bytecode instead of js to skip parsing, how much quicker would it be?

    • @eggwaffle
      @eggwaffle 6 ปีที่แล้ว +4

      Quicker x0 when it's ran on another engine and crashes

    • @crabsynth3480
      @crabsynth3480 6 ปีที่แล้ว

      i dont claim to understand it but i've heard of webassembly recently... which might be the missing interface required in this case... Good Discussion.

  • @falfonsogo
    @falfonsogo 6 ปีที่แล้ว +2

    Very nice ... interesting .... I code while I listen .... nice

  • @eyupgurel916
    @eyupgurel916 7 ปีที่แล้ว +1

    Excellent subject matter

  • @jschapir
    @jschapir 7 ปีที่แล้ว +1

    Can someone help me identify if two types are the same?! I want to make use of "hot functions". {a: [obj1]} vs {a:[obj2]}?

    • @oliverford5367
      @oliverford5367 6 ปีที่แล้ว

      Not the same as obj1 could be very different from obj2

    • @eggwaffle
      @eggwaffle 6 ปีที่แล้ว +1

      they are the same type

  • @vishalverma5280
    @vishalverma5280 2 ปีที่แล้ว

    finally some one to explain the core to an extent .. time consuming though.

  • @misterrodger
    @misterrodger 3 ปีที่แล้ว

    So wait...do they call it fau 8?

  • @Sese63728
    @Sese63728 7 ปีที่แล้ว +2

    I'd love to study this in more depth. Anyone can recommend some book?

    • @bytler4518
      @bytler4518 7 ปีที่แล้ว +1

      would also like to know.

    • @oliverford5367
      @oliverford5367 6 ปีที่แล้ว +5

      She has a medium post on v8 that includes references to books etc.

  • @maggie5350
    @maggie5350 2 ปีที่แล้ว +1

    Today, if a programmer wants to write JS code with high performance, he/she needs to be more under the hood, to be more specific, more about hardware. Although the V8 engine is just a virtual machine, it essentially was designed by people with a good understanding of hardware.

  • @hp354
    @hp354 5 ปีที่แล้ว

    Thank you for sharing !!

  • @schwanensee4488
    @schwanensee4488 4 ปีที่แล้ว

    I'm not in in development jet, more than webdesgin at least, but it what intresting to here because i will learn javascript in neaer future.

  • @BooksWeCanRead
    @BooksWeCanRead 4 หลายเดือนก่อน

    Awesome! 👏👏

  • @MecchaKakkoi
    @MecchaKakkoi 7 ปีที่แล้ว

    Great talk.

  • @randomnobody660
    @randomnobody660 3 ปีที่แล้ว +1

    While I'm always amazed at compiler black magic, I'm also confused at why they are even required.
    I get dynamic types are great for prototyping, that programmer time > cpu time n all such. Sometimes thou I wish we had access stricter typing, pointers, immovable class/struct etc just as an option. Just make it a separate mode or something. Maybe if you set a flag to true, you can no longer dynamically add properties or at least you will get some sort of warning. In exchange you are guaranteed the faster code.

  • @kirakira8174
    @kirakira8174 3 ปีที่แล้ว

    amazing, thank you!! :)

  • @szym1
    @szym1 6 ปีที่แล้ว

    the first flag and the third flag does not work with chrome

  • @prateeksurana2584
    @prateeksurana2584 3 ปีที่แล้ว

    And that's how TypeScript was invented

  • @bobbyaldol
    @bobbyaldol 7 ปีที่แล้ว

    Why doesn't --print-opt-code work for me?

    • @avimehenwal
      @avimehenwal 4 ปีที่แล้ว

      might be because Optimizing Compiler has nothing to optimize and everything is handled by baseline compiler. Happens a lot with short non-repetitive js code

  • @dan9948
    @dan9948 3 ปีที่แล้ว

    I don't like the encouragement to write more statically typed code to make up for where the JIT is not good at optimizing the dynamically typed language is made for. How about making the engine better at doing that for the programmer, so the programmer does not have to do the engine's job?

  • @buddhaburrito
    @buddhaburrito 2 ปีที่แล้ว

    8;30 is where the beef is at

  • @negasonicteenagewarhead
    @negasonicteenagewarhead ปีที่แล้ว

    I love them V8s

  • @sboontham
    @sboontham 5 ปีที่แล้ว

    Just like we coding DB III program long time ago.

  • @nueythepyasuwan
    @nueythepyasuwan 6 หลายเดือนก่อน

    Cool thank you

  • @hemantkumarsingh9204
    @hemantkumarsingh9204 5 ปีที่แล้ว

    loved it...

  • @kalindiashtikar1886
    @kalindiashtikar1886 3 ปีที่แล้ว

    Thank you mam

  • @abderahmaneaoufi
    @abderahmaneaoufi 2 ปีที่แล้ว +1

    I LOVE JAVASCRIPT

  • @ult1873
    @ult1873 3 ปีที่แล้ว

    why does every talk here have that one awkward meme at the start?????

  • @balakrishnan.m-m8q
    @balakrishnan.m-m8q 11 หลายเดือนก่อน

    Thanks for gift

  • @ultimatewarriorfrieza275
    @ultimatewarriorfrieza275 2 ปีที่แล้ว +1

    If you represent the same type of objects by having all the abcd properties for everything is like highlighting the advantages of a class based programming and emphasizing the cons of a dynamically type language, isn't it? lol

  • @bunny_rabbit5753
    @bunny_rabbit5753 4 ปีที่แล้ว

    Cool T Shirt😘

  • @CASLOAcademy
    @CASLOAcademy ปีที่แล้ว

    good shit

  • @nayemopi
    @nayemopi 2 ปีที่แล้ว

    😍

  • @vasafeasdas6183
    @vasafeasdas6183 5 ปีที่แล้ว

    I should learn assembly, not JS

  • @damonesswu8254
    @damonesswu8254 2 ปีที่แล้ว

    duktape vs jerryscript

  • @anonmityslayer
    @anonmityslayer 28 วันที่ผ่านมา

    Noice

  • @Maindev1994
    @Maindev1994 2 ปีที่แล้ว

    ajalas que pro

  • @rafaqathussain7259
    @rafaqathussain7259 4 ปีที่แล้ว

    Make python plz

  • @moussaibrahem9
    @moussaibrahem9 2 ปีที่แล้ว

    Bun is coming

  • @noshadowofadoubt1124
    @noshadowofadoubt1124 2 ปีที่แล้ว

    Great Smart Women !

  • @raulmarindev
    @raulmarindev 3 ปีที่แล้ว

    Typescript to the rescue