Applying Tagged Templates

[00:00:00]
>> Kyle Simpson: It is useful to understand this processing model of a tag function, however, because there are more interesting things that you can do. And I have in some occasions written my own tag functions when there wasn't some standard one out in a library that I might prefer. So, for example, this tag function, it's definitely a bit more complex and how it does, what it does is not all that important, but what it is for is basically as a replacement for my console.log statements.

[00:00:32]
Because when I do a console.log of a regular value like a number, I just wanted to drop in that number, if I do a console.log of like an object I don't want it to print object object, which is not helpful. And if I do a console, log of, say an error that I've gotten from a try catch, I don't want to just see the error string.

[00:00:52]
I'd like to see the whole error stack if it's available. So I did this a bunch of times over and over and then one day I just thought, why don't I make myself a tag function? That automatically can pre-format an object as JSON or an error as a statutory string.

[00:01:10]
And then instead of typing cancelled log everywhere then I can just use this tag function on my cancel strings. So this is what it looks like in action if I have that line four, I have logger there, and you notice that I don't have to say console.log and then pass on the string, logger does the console logging.

[00:01:26]
And I pass in the string and if I have a value like object, they're on the end, you'll notice that it went ahead in JSON's string format for me. I didn't have to do any extra work. It detected that it was an object and it could be JSON.stringify().

[00:01:41]
Same thing down here. If I catch an error, I can have it automatically format in my console that error with the error stack and error message and all that stuff. So that's an example of doing something a little bit more sophisticated with a tag function to solve in this case a debugging task.

[00:01:59]
But you can imagine lots of different things you might use. As a mater of fact, people have really gone way further with these tag functions. Because it turns out a tag function doesn’t even have to return a string. You might think of, I'm making a string literal. But when I call it an interpolated literal, it's because it doesnt even have to return a string.

[00:02:24]
It could, in fact, return something else entirely. So what are some examples of that? Well, let's take regular expressions for example. Regular expressions are quite famously in JavaScript. They very hard to reformat, not the least of which is because this regular expression literal requires you to put everything on one line with no white space, not comments, no anything.

[00:02:46]
So you have these regular expressions that can grow to like hundreds of characters long, and nobody can read tha. Many other languages have long had support for multiline regular expressions where you can split them out and indent them and put various white space and comments and all sorts of readability affordance.

[00:03:06]
Well, some very enterprising folks though, well, why don't we just make a regex tag function? Which then allows you, inside of your literal, which can span multiple lines and have white space, just write out a regular expression with all this white space and commenting, and it will parse your string and turn it into a real regular expression and not return you a string for but return you the actual regular expression.

[00:03:32]
So now all of a sudden we have nice, clean multiline readable regular expressions. It's almost as if inside of a literal you can write your own entire language and people have done that. People have made entire programming languages as the interpreter is a tag function. And inside of your template string, inside of your literal, you can have whatever syntax you want.

[00:03:57]
JSX, another great example. JSX in the React ecosystem, it's HTML-like stuff embedded directly in JavaScript which is it's fine, people like that. And use it quite frequently but it requires a compiler cuz it's not standard JavaScript. Well, then someone decided and actually there's multiple implementations now. They wrote a JSX tag function.

[00:04:22]
So inside of your literal, you can write out your JSX multiline everywhere, dropping values, whatever you wanna do. But now it's completely standard JavaScript, no compilation needed. And what the JSX tag function returns to you is not a string, it returns to the actual dom object just exactly like you'd expect in JSX.

[00:04:42]
So this is a tremendously powerful, it's almost like a mini language with inside of JavaScript, tremendously powerful and I'm very excited about the future. I've already got some libraries, where I've started using template tags and these different sorts of ways to push the boundaries even further. It's a great extension point for writing more declarative JavaScript.