JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to de...
For further actions, you may consider blocking this person and/or reporting abuse
Although you didn't cover the whole story of it, this is a decent explanation of how JavaScript engine works. All those gifs are amazing. They help my brain to solidify the theories. Thank you so much. I'm looking forward to your upcoming posts.
Thanks!
Agreed with the GIFs thing. They help heaps to understand what is going on. GIFs for the win!
Lovely animations! Thanks for a really clear article
The Gifs really pull the article together. Great stuff.
Thanks for the informative post. Your animations are superb! I am interested to know which software did you use to create your animations?
This is amazing!! I wish I'd had this at my coding bootcamp last year. I don't think it would have all sunk in at first but seeing it laid out visually would have helped things click at certain points as we learned more. I'm sharing it with them right now so future cohorts will be able to use this resource 🙌🙌🙌
Thanks!! 😃 Hope it’ll help them!
This might not be important but,i just want you to know that this post was featured in the December 17th, 2019 edition of esnextnews curated by Dr Axel Rauschmayer and Johannes Weber.
Congrats!
This is brilliant and a great place to start for anyone exploring how JS works its magic. I know this had to have taken a lot of time and effort to create. Thank you for your efforts!!!!
Thanks so much 😃
Thank you Lydia for this amazing explanation!
I am a language without a compiler but I have an engine (called sometimes a compiler). This engine is a place where 4 of my sons are playing. The first one called "Byte Stream Decoder" which creates tokens. These tokens are sent to the second one called "Parser" which creates nodes. These nodes are parts of the third one called "Abstract Syntax Tree". The last one called "Interpreter" ends the game by climbing the tree and getting the disk containing Byte Code. I forgot, I have also a daughter called "Inline Caching" which takes care of this disk and try to optimise it. I am JAVASCRIPT!
I'm gonna call you a TV series cause you've left me hangin' on a cliff. Great, great write-up and, I think I speak for everyone when I say we want more. Neh, we need more. For example, regarding "Say a certain function is invoked a 100 times...", I'm curious what the magic number is and how it was determined. Is it always 100 or does the compiler determine at run-time? And, armed with that information, how can we write more efficient JavaScript code?
Thanks you for all explanation. I've been looking for this information for a long time ^^.
But with what tool do you make these wonderful gifs ? :)
I use Keynote!
Apple Keynote? really? I did not know it was good to do that :-)
Haha yeah you can export it to animated gifs :)
It would be fantastic to know your animation creation process.
Congratulations
Thank you very much ! :D
Thanks for the great and easy-to-understand article on JavaScript Engine internals. The animations are amazing!
I've translated your article in Korean:
betterweb.or.kr/blog/%eb%88%88%ec%...
Thanks!
Nice post. Very comprehensive. I shared it on our JS group
Stunning visualizations!
Thanks!
Hello Lydia, do you mind to share what tools you've used to create such visualizations?
I was thinking about such animations for some meetups I conduct from time to time.
I would really appreciate it, thank you!
With this tool you can see the AST of your code: astexplorer.net/
then you can interpret a json with this editor omute.net/editor
One question I had in mind while reading this post was why not ship the pre-parser and parser to the world so devs can generate a more optimized version directly in their build system, and send that to the browser? Then I remembered about wasm which I guess it kinds of does exactly that, but more general and doesn't support javascript.
Very good job on this article! You broke it down to really easy to understand bits!
This brought up a question, and assuming I am understanding this correctly. There are parser nodes that signify a group of tokens that represent a single parser. For example, a single parser contains tokens about a single function.
With that said, what is faster? Having your JS code that is all in a single parser with more tokens or more parser's with less tokens?
I'd assume it depends on the case of how many parser's there are, because you could theoretically search for parser's in O(nlogn), with O(n) tokens, but at some point, if there are so many parser's, a single parser with more tokens would make sense.
Great post!! Very detailed, and I like your writing style. I appreciate the examples, like when you brought up a function being run 100 times and then getting passed through the optimizing compiler, I wish more writers would use that with programming explainers. Looking forward to reading more of your posts.
Lydia hi!
This is a very good project.I always wanted see a some kind of visual presentation for programming languages.I am new to programming and i have many questions in general but this helped me a lot.I hope to continue doing this for javascript or for another language.
Thanks.
Thanks for the overview!
Question for you and the group: at what point in this process are scopes and lookup tables created for the various variable bindings and the values the hold? 🤔
Since variable bindings and their declared values need to make it into the byte code, I would think this happens prior to running the interpreter. And it seems like that process would require access to either the raw tokens created by the byte stream decoder, or the AST generated by the parser, because the code needs to be 'crawled' in a meaningful way so as to identify the bindings that have been declared.
Can anyone clarify for me?
The visualizations make it so easy to understand! What tool did you use for that?
Thank you Lydia, that was for me, as an Java developer, the exact amount of information and lovely illustration needed to get an overview how the Javascript engine works.
Great article on JavaScript Engine internals!
I've translated it into Spanish and published it at ibidemgroup.com/edu
Authorship and original publication here are clearly stated. Hope you are fine with it!
Thanks, it's a good intro to the V8 which sometimes we see as a distant complex obscure thing.
Thank you so much for the informative post. We need more creative people like you!
I'm interested to know which software did you use to create the animations we see on the gifs!
Look forward for more beautiful posts!
In reference to your inline caching example, if you had a function that was called every other time with different data types (“sum” could be called with numbers, then strings, then numbers again repeatedly), wouldn’t the performance of having to update the type feedback be nullified? If so, how is this handled in the V8 engine? Thanks!
Thanks for the great article! I translated into korean and here is the link
This is so beautiful.
Wow! This is really cool. I did a talk on this subject before, but your gifs do such a great job (wish I had seen them when I was learning) !
Gr8 visualization, can you help to create one on those?
I am working on a visualization project for DS and algorithm.
geeksforgeeks.web.app/
Thanks for asking, but I'm afraid I'm tied up on other projects at the moment. However, you might want to reach out to the author of this article to find out how she created it and what tools she used to make the diagram.
I believe it was for the author only
Doh! Sorry about that.
What tool are you using for animations?
In another comment thread, she states that she is using Apple Keynote
Awesome post! 😃👏 Thanks for sharing!
Awesome! Love it.
Hero!
How come I missed all other visualized articles... amazing work!
Very nice illustration!
I had a compiler structures class at University before. It seems some point you described bring me back to that memory.
Really nice article! Like the visuals!
Amazing job, Lydia 😉
neat trick to record the animations!
Amazing, thanks!
You are a hero!
It's very interesting!
great job
Hi,
Thank You So much for the Valuable Information. If You Are Interested to learn JavaScript Training? You Can Schedule and Attend a Free Demo here mindmajix.com/javascript-training
Thanks and Regards,
Lavanya Sreepada.
Hey Lydia, I am so glad to have found your blog posts. They are really informative and crisp. Thanks for sharing the information so beautifully.
In this current post, I have a small doubt, if you or anyone could help, After the Byte Stream Decoded creates the token, how is the decision made if it will be passed on to processor or pre-processor. Since by that time, we don't really have had the code parsed how do we decide if the function is an event (click) handler?
Great Explanation.In the career of 8 years I have learned this first time.
awesome
This was soooo helpful. I'd love to see you cover the rest of it, cause the heap and call stack confuse me a bit. Great work!
This is awesome... Very informative. Thanks Lydia.
Your visualisations are amazing!
The graphical explanation I didn't know I needed. Great work.
Hello! This is just a great post, like all the other ones in the series. Thank you for the beautiful and accessible presentation of complex material. I decided to try to translate all the articles from the series into Russian. Here is the translation of this post: dev.to/mari_banana/vizualiziruia-j...
Amazing!
This is so detailed and beautifully written with those illustrations!
Amazing!
Great stuff!
This is really engaging and well thought out. Great job! 💯
What a clear explanation of JavaScript engine and how it works 😮
Good post!
Great to see you on the platform!! You are one of the few people that I really like to enjoy reading. I'm already checking all of your other posts here :) I'm anxious to read your upcoming posts
Thanks so much! 😃
Great concise explanation of how javascript works under the hood. Thanks for sharing...
Is awesome, but i just one question, how do this animation ? is so great
Hi, I would like to know what kind of tools you use to generate these gifs, or if someone knows what tools can simplify creating this kind of animations
Very informative! Thanks!
Nice post, congrats. Love the animations 😍
I'll maybe translate into french, I'll tell you if I do so !
Nice
it is useful
That's a good story.
Thanks
THANKS FOR YOUR DEEP VIEW OF JS.
It blows my mind after reading. It must be a long time since I had the same feeling. Thanks for great writing and illustration :3
Bookmarked this stuff.
Following you as well insanely well made posts.
Awesome! Thank you!
what's the tools help you finished these gifs pictures?
Thanks a lot for sharing this post. Also, kudos for the effort of doing it! it's pretty useful.
Thank You So Much...
I translated it into Persian.
Of course with a link to you!🙏
ooooooo Wooooowww. This is something amazing. Thanks for this much information.
how to access your slide I want to download
Great article Lydia!, even better than some textbooks, that made me wonder... what were your bibliographic resources? 🤔
how did you create these GIF, using HTML CSS js?
great!
Before getting into JavaScript programming this is what needs to be taught.
Awesome!
Thanks a lot, Lydia, your effort to explain complex concepts in an easy way is extraordinary
Lydia, this is maybe the best visualization of JS I've seen, both efficient and beautiful. Thank you so much!
Thanks for awesome animations!
Very nicely explained, the gifs helped a lot
Great job you done much valuable info thankyou@
Thank you.
Nice post. I got to learn many things. Looking forward to your future posts.
This is awesome!!! Thanks for sharing! 🚀🙌🔥
Thanks for this amazing explanation. BTW which tool/app do you use to make those awesome GIF animations? Thanks in advance.
Thank you for writing this amazing post.
Nice ;)
Awesome!
love you!
Clear words and great images & animations. Thanks!
love this!!! learning JS at the moment! do any meetups?
Great article! Thanks.
Until now, I was pretty much convinced that it was mainly black magic 🤔
This is Beyond Brilliant. Many thanks for sharing this.
Wow amazing explanation!
Also, any tips about how to make such gifs?
Loved the animations, thanks for the overview :D!
amazing.. I hope u do a series of these for other languages, from python to java to whatever else u can
Awesome article!
I learned a lot from it :).
youre the GOAT!
I'm more curious about what you used to make the animations xD
Congrats🎉 very helpful!!
pretty good
Simply amazing!
Quick question: Can i like this post like a million times?
Haha i'm happy you liked it!
This is awesome!
Wow, the description of the optimization technics (conversion to machine code) is so nice. Thanks a lot for that brilliant article!
Hi Lydia ¿What software did you use to create de animations? Thanks you!
Please make an article about browser architecture visualized.
awesome post
Just love this post and want to translate it to Thai language (absolutely with reference back to your post).
Can you please just allow me.
Thank you.
Oh I just saw the FAQ.
Nice animations and informative article. Felt like I was studying Compiler Design subject of CS during my college.
Thanks for this great visualization and explanation
This is a great article!
Thank you so much.
Great work!, Do you use after effect to make these animation?
Nicely explained!
and gif's are like feather in a cap. which tool you use for such animated gif's
What would be my learning steps if I want to create something like Nodejs
Great article!
Lovely article. When you understand the whole eco system at a granular level, it makes you visual your code how it would be running at the back. Keep more coming .. 👍
Very good article! Thanks @lydiahallie!
Really cool.
Thanks for this really clear article
Nice article
Thanks
Loved it thanks a lot for sharing
oracle fusion financials training
It was beautiful. Thank you for the animations and easy and clear explanation you gave
Great article. Another term for the pre-parser would be the lexer
excelente resumen buen aporte a la comunidad 😁