*EDIT* : I watched this video: ruclips.net/video/EUYXxsur65U/видео.html of yours, and I see that you set an object containing the function you want to use in the window object. --------------------------------------------------------------------------------------------------------------------------------------- Hello, In new.js example, the use of "otherLogMe" function (as a string) inside the OtherMyLi works just because the otherLogMe function (line 1) is declared in the global scope. How is this approach gonna work in an app that uses ES6 modules (webpack, parcel, etc)? I mean the console is gonna print "otherLogMe is not defined" or something...
It saves quite a bit on boilerplate when I can use a string template so it was a great discovery for me. Have a great day and thank you so much for watching!
Hi Fredrik, Thanks for these amazing videos + tips, I find them really useful and thought provoking! :) I remember playing around with 3 ways of doing it (some time back) - #1. Directly writing to DOM ( appendChild on elements that exist in DOM) : which is what you also do in your first version #2. Forming HTML as strings and finally setting innerHTML to reflect it on DOM: which is what you showcased in this video #3. Creating elements and appending to a dummy element (that does not exist in DOM but only in memory). eg // Example var oDummyWrapper = document.createElement("div"); // add other elements that you're creating to oDummyWrapper ... // and then finally fetch the original wrapping element var oOriginalWrapper = document.getElementById("element-that-exists-in-DOM"); // copy the innerHTML over to the element that exists in DOM oOriginalWrapper.innerHTML = oDummyWrapper.innerHTML #3 is a hybrid approach where you're not manipulating live DOM tree but manipulating a temporary element. My JSPerf tests showed that #2 > #3 > #1 (best to worst in terms of speed) .... so the hybrid approach stood second in perf tests... It gives you an advantage of adding event listeners easily rather than using attributes inside HTML strings. Let me know what you think of it.
Glad to hear that my little hobby is interesting to you! This is a great insight m8, I would have sworn the innerHTML copy would lose in terms of performance but then again I have never benchmarked this approach myself. What I like about the template string approach is the readability of it all and as long as the performance difference is not that great I would stick with it. When it comes to adding event listeners perhaps doing the DOM attachment in 2 waves would be my preference, use method #2 to initialise the element and then query for said element when it has ben added to the DOM to add the event listeners. This would perhaps not be great if we had Reacts render approach but then again I would probably build something a bit different if I tried to copy that approach, perhaps I should make a video where we build our own React rendering engine. Have a great day and thank you so much for watching!
Thanks mate! :) I've used method #2 also in most of the "coding challenge" submissions where I write in comments that I'm using this approach because it's more readable and better on performance :) - always fetches good remarks. And a video on our own React rendering engine would be uber cool!
if you're not already aware of it, you should take a look at polymer.github.io/lit-html/ P.S. even tho its on the polymer directory, it is its own thing.
Hi m8! Yes I am aware of lit-html, in this video I was just experimenting with string templates as a way to use the standard without any libraries. If I where making something a bit more serious I think Polymer is an excellent choice. Have a great day and thank you so much for watching!
There is a slight difference in performance but unless you are making a UI framework like Angular or React it will not matter to you. The thing you should never do is to use document.write that has major impact on the application performance.
In a SSR solution you do not create a reference on the server, that is handled on the client. The common approach is to use an element id and load some JavaScript that queries for that id but I prefer to use a custom attribute like data-js="myId".
I am doing great Mohammed! Vanilla JavaScript is the term I use to describe JavaScript without any framework like React or Angular. It is the JavaScript that will run in the browser. Have a great day and thank you so much for watching!
Fredrik Christenson Glad to hear that. Oh , js you name like so, yes I too work in Js . But my js pages would have both jquery + js . when I struck at jq will use js to complete the task.
*EDIT* : I watched this video: ruclips.net/video/EUYXxsur65U/видео.html of yours, and I see that you set an object containing the function you want to use in the window object.
---------------------------------------------------------------------------------------------------------------------------------------
Hello,
In new.js example, the use of "otherLogMe" function (as a string) inside the OtherMyLi works just because the otherLogMe function (line 1) is declared in the global scope.
How is this approach gonna work in an app that uses ES6 modules (webpack, parcel, etc)?
I mean the console is gonna print "otherLogMe is not defined" or something...
Thanks for this, I have also been using the old approach you showed in all of my project. Will be switching to this new method.
It saves quite a bit on boilerplate when I can use a string template so it was a great discovery for me.
Have a great day and thank you so much for watching!
The old J's file goes above my head. Nice tut sir.
Hi Fredrik,
Thanks for these amazing videos + tips, I find them really useful and thought provoking! :)
I remember playing around with 3 ways of doing it (some time back) -
#1. Directly writing to DOM ( appendChild on elements that exist in DOM) : which is what you also do in your first version
#2. Forming HTML as strings and finally setting innerHTML to reflect it on DOM: which is what you showcased in this video
#3. Creating elements and appending to a dummy element (that does not exist in DOM but only in memory). eg
// Example
var oDummyWrapper = document.createElement("div");
// add other elements that you're creating to oDummyWrapper ...
// and then finally fetch the original wrapping element
var oOriginalWrapper = document.getElementById("element-that-exists-in-DOM");
// copy the innerHTML over to the element that exists in DOM
oOriginalWrapper.innerHTML = oDummyWrapper.innerHTML
#3 is a hybrid approach where you're not manipulating live DOM tree but manipulating a temporary element.
My JSPerf tests showed that #2 > #3 > #1 (best to worst in terms of speed) .... so the hybrid approach stood second in perf tests...
It gives you an advantage of adding event listeners easily rather than using attributes inside HTML strings.
Let me know what you think of it.
Glad to hear that my little hobby is interesting to you!
This is a great insight m8, I would have sworn the innerHTML copy would lose in terms of performance but then again I have never benchmarked this approach myself.
What I like about the template string approach is the readability of it all and as long as the performance difference is not that great I would stick with it.
When it comes to adding event listeners perhaps doing the DOM attachment in 2 waves would be my preference, use method #2 to initialise the element and then query for said element when it has ben added to the DOM to add the event listeners.
This would perhaps not be great if we had Reacts render approach but then again I would probably build something a bit different if I tried to copy that approach, perhaps I should make a video where we build our own React rendering engine.
Have a great day and thank you so much for watching!
Thanks mate! :)
I've used method #2 also in most of the "coding challenge" submissions where I write in comments that I'm using this approach because it's more readable and better on performance :) - always fetches good remarks.
And a video on our own React rendering engine would be uber cool!
if you're not already aware of it, you should take a look at polymer.github.io/lit-html/
P.S. even tho its on the polymer directory, it is its own thing.
Hi m8!
Yes I am aware of lit-html, in this video I was just experimenting with string templates as a way to use the standard without any libraries.
If I where making something a bit more serious I think Polymer is an excellent choice.
Have a great day and thank you so much for watching!
yeah I know, I just thought I would mention lit-html just in case you haven't heard about it.
Move the const text="foo" from 1st way outside and on top of the 1st method. Might be a bit more fair then
I'm new to programming can you clear up a confusion for me? I read that using innerHTML is bad practice. Is this true or no?
There is a slight difference in performance but unless you are making a UI framework like Angular or React it will not matter to you.
The thing you should never do is to use document.write that has major impact on the application performance.
Using the string method that you are recommending, how would you create a reference to the element for updating?
In a SSR solution you do not create a reference on the server, that is handled on the client.
The common approach is to use an element id and load some JavaScript that queries for that id but I prefer to use a custom attribute like data-js="myId".
Wow! This made my day!
Good stuff!!
hi Fredrik, how is your today ? what vennila js *☺️
I am doing great Mohammed!
Vanilla JavaScript is the term I use to describe JavaScript without any framework like React or Angular.
It is the JavaScript that will run in the browser.
Have a great day and thank you so much for watching!
Fredrik Christenson Glad to hear that. Oh , js you name like so, yes I too work in Js . But my js pages would have both jquery + js . when I struck at jq will use js to complete the task.
Thank you for sharing.
No problem m8, glad you enjoyed it!
Have a great day and thank you so much for watching!