 Okay, so I'll be talking about template tag components today So I think we already saw a lot of coverage Like in the keynote talk by a Huda as well as the as a talk by ads Today, I will be going a bit deeper into how you can actually use it already So a bit more of the the technical practical stuff First up a word about myself. So my name is in us and I work at 40 inside We're a company that builds BI solutions for the hospitality industry We have over 75,000 hotels worldwide Using our application basically to run their hotel. So there's actually quite a decent chance If you're staying in Portland in a hotel, they're using an amber app to run their business. So that's probably nice to know So I yeah, give it up so I came all the way from Belgium where I work at the insides as a Yeah, and the platform team within the front-end Team at the insides and part of my job is to also make sure that everybody in the front-end team in the company is really as efficient as possible that the Developer experience is as nice as possible Which is also what got me really excited about template tag components. So jumping in So what if I told you there's actually a new way to write amber components today And for you, obviously, this doesn't come as a surprise anymore. We saw a lot of coverage in the talks before But I think it's also good to recognize that a lot of folks Don't read RFCs or perhaps are not on the discord channel. So I think it's also yeah a good thing to be mindful of that So yeah, let's first take a step back and look at Embers next edition, which is Polaris So Polaris is really all about Yeah, five things mainly and one of them is template tag components So I think about every pillar of Polaris. There will be a nice talk about it at Ember conf I will be going more specifically and template tag components So, oh, by the way, like this is the octane Picture of of ember. I couldn't find one for Polaris So if you could make one for Polaris, I think that would be really great to have Yeah, so if you had a look at the release post of ember 5.0 Like it went through all the deprecations of ember as well as new features But it also contained a section about things that are new about ember One section in particular was about template tag components and they're basically said, okay, you can start using it today We should support for it So you can basically start using it Especially the last sentence was really interesting to me which mentions that's during the 5.x series It will become the default way or is expected to become the default way to write components within ember So that ultimately raises the question should you start using template tag components today? I think before we can actually answer this question. We need a bit more context about What they actually are how you can use them and also why are they here? So we'll get back to this question at the end of the presentation So let's start off with why why do we need the new component formats because yeah ever since octane We've been writing glimmer components and they do the job really well. So why should we change things up? So template tag components are really all about template imports and currently if you write Yeah components in glimmer if you use for example a helper Ember will know based on like if it's a helper It will check in the helper directory of your application to find a match with that file name for that helper This work nicely, but also has a couple of issues So for example naming issues If you have let's say an add-on that that ships a helper with a certain name But you also have one in your own application with the same name It will collide and the one from your application will overwrite the one from the add-on Which is not good. It's also really hard to Have locally scoped codes and this is the thing that you do also Quickly mentioned in the keynotes. It's like if you have for example modifiers, they live in a totally different file. Some are completely Unrelated to your components while in practice it is actually very much related to your components codes So that's also an issue also wider ecosystem tooling say for example CSS solutions like CSS modules or styled components these libraries often expect your templates to have The context of JavaScript which currently is not the case with glimmer templates And then finally like the the testing setup is also currently completely different from writing actual components codes Which is at least to me was really confusing in the beginning of ember that you had like this HBS helper in your tests But it wasn't available in regular components So the goal of template imports is really to rework this to all work based on references and besides like solving all the Issues mentioned above it also unlocks a couple of new things Like code splitting because now we know if we do it based on reference where everything is coming from As well as like we're not bound by the file structure of ember anymore. Well as Mentioned before as well like there will still be Yeah conventions from ember. We're not tied into that system anymore But this raises the question as well How should we do template imports because ultimately we use handlebars for writing templates But that doesn't have syntax to actually do templates So to illustrate this I've written a small components copy to clip art It's called and it basically allows you to pass Text to it and if you click on the button it will set it to your clipboard So usage of the components could look something like this The actual components how you could write it today like the template look like this So you have a button where you register an on-click listener Based on the state if you have copied or not it was show a different text and next to it We'll also show like this clipboard icon So I can Do a live demo of this button and it should hopefully work So if I click on this, it's now been copied to my clipboards So the actual packing class Currently could look like this So we have like a track property to keep track of the states as well as an action to actually Do the copying? But if you look at the templates Like there's a couple of things you can wonder like the icon components that is being used Is this from your own application or from an add-on? Like there's really no way to tell based on just this code on the slide Also the on modifier At least you hope it's the one from amber modifier But ultimately if somebody yeah, one of your colleagues wants to have a joke with you Maybe he made like a custom on modifier and tricked you into using that one There's really no way to tell based on just this code example So how can we take this code and actually add imports to it? To have this reference based resolving So first option could be using front matter Which is a system that is often used also in markdown files to add metadata to existing files So here you could for example add just imports to it Which is a very naive naive approach also the smallest delta over the current approach But it does come at some issues like how does it work together with the tooling that amber has as well as external tooling like code editors etc Another approach we could take is like the single file component structure from view or spells That you're maybe familiar with Where you have like these imports in a script tag and then your template separately but here Yeah, you somehow have to know that your imports in the script tag is then also available in your template tag So the cementing there are a bit strange perhaps Yeah, so there's different ways to do it a third option could be Why don't we take the helper from the tests in amber and use that to like embed a template within a components? This could also work But finally Ultimately what we landed up is using the template tag and use it that way to embed templates within a components So I quickly went over all these options because really there's a lot to it and there's a lot of trade-offs to be made Ultimately all four of them solve the issue like we can have imports and templates There's just different trade-offs that have to be made between semantics between learning Tooling and testing So if you're really interested in like the whole back story of this and why ultimately we got to this point of template text I definitely recommend you to check out the blog post by Chris quite show So who wrote a lot of all of the backstory of why this is a good approach? so ever since The RFC mentioned over there. It's also the one that has been accepted to yeah officially used with an amber So that brings us to the semantics of template tag components and this is really Just a difficult words to like describe how you can use them today How you program with template tag components as well as like it will be about building this mental model of how you can use them So the first thing that comes to mind is like comparing them to the current Code format that we have and there it's really different in three ways That are at least obvious when you first start using them And so the first thing is that we have a new file extension So based on if you're using type script or JavaScript is ggs or gts Which is just short for glimmer JavaScript or typescript Yeah, and then you also have Imports that you will have to add so this is for components for helpers and for modifiers And then lastly you will also have to wrap your actual template codes within this new template tag So let's look at look at some examples of this and starting with a very basic one which is a templates only components Like this greeting components. It just says hey with a waving icon next to it today. It would look something like this If we would look at the template tag solution So we would know to wrap it in a template tag and then also add the imports for the Icon components and in this case, you know, okay It actually comes from my own example app in this case and not from an external add-on If we look back at the class-based example, this is the copy-to-cliboard components So I shown this code before In template tag components, you would also add the imports and then you can embed your templates within your backing class And because you embed it in the backing class, it's automatically linked to this backing class So it knows what the context of this component is But there's more so this is how you would compare them to the way current way of working with amber components, but actually there's more things to it that it unlocks That you can also start using in the future So one first thing to notice is that you have direct in direct access to imported values And a good example of this could be feature flags So I know a lot of you probably out there Use feature flags to like toggle things in your application based on the context of the user So if you would have a feature flag and like a constant file Just a constant string today if you want to use that in your templates Yeah, you would use it via helper But to actually have access to this constant value declared somewhere in a constant file You would have to like import it in your backing class and then like Restated in your in your backing class to actually have access to it So it's a bit annoying like you can't actually use template take them. You can't actually use Template only components for this Yeah, it's it's not ideal. So if we take a look then at the template tag version Here you can just use a template only components and in this case we just also import the value You can just literally access it from your template tag components Also notice that in this case we have added the imports from the for the Helper as well. So don't forget about those imports a second new thing or a different thing with template tag components is that you can also declare Constants helpers and modifiers locally So in this case, it's just a very simple components that will render the square of two equals four And you see like the constants of two has been declared locally within the components as well as like a helper function So ever since number four dot five we can actually use regular functions as helpers So you can just write it this way and it'll work I Think it's really nice Especially for modifiers. So at least in my code base that I work in like there's a lot of render modifiers still and we also had this issue like If you would want to have custom modifiers. Yes, and Lee your logic that that is quite Closely coupled to your component suddenly like lifts off in a file. So we're totally different So this is a great thing that template tag components unlock to be able to yeah put those things together Also a big change is that you can now also besides Constants helpers and modifiers. You can also declare multiple components in a single file because ultimately The GGS file is just a JavaScript module So you can declare multiple components use them within the same components and I think this really powerful way Because if you look at like existing Codes like at least in our code base like Components they always grow and people keep on adding new stuff to it And it's really a burden to like split up code in multiple in multiple files because Yeah, it has this extra burden for our reviewers to also make sure that that you keep track of where things moved and in essence Splitting up components into multiple parts is also like how you would split up a function in a JavaScript file If it's getting too large So I think this especially useful if you have for example a list component like in this case That has a list item components. That's only used within that list components So in that case, yeah You can just separate that to a separate components and have it's being more maintainable in this way And that brings us to testing. So I quickly touched upon this already Currently you have this HBS helper in tests that you use to render. Yeah, your your template basically and if we look at the Templatek version of this you can just actually use a template egg Which is super powerful because there's just one story to writing components There's no different thing you have to learn about writing tests. It's just the same as you would expect A different thing to notice is that also here in tests you have to do your imports Because it just works the same way as well as this access that you have to Yeah, local scope basically you can also directly use For example, this text property, you no longer have to bind it to the backing Context of this test, which is super super powerful as well. All right, and that brings me to styling So I know at least one of you has been wondering if we have like a template egg is there also something like a style tag and And Quickly move on already. So template tag in essence is Not opinionated about styling so we've seen in you who does talk He he showcased like a way to already use Style tags within template tags, but ultimately like the format itself of template tag components It's not opinionated and you can just use whatever you're already using it But that doesn't mean that amber can't work on Things that are even more nicely integrated within amber itself So I think there's a couple of interesting add-on developments going on side by side and so glimmer scope TSS is the one that You know also showed and and ads has been working on So this allows you to embed a style tag within a template tag and by doing that it will be locally scoped to just that component But also like for CSS modules if you're using that there's add-ons for that as well as just separate CSS files That also just still works with template tag components So that brings us to the topic of how you can actually use this today So yes, you can actually already use it today, but what does it look like in quotes? So the first thing you can look at is The emmer template imports add-on Which is an add-on that adds the build tooling to your application to convert this new file formats into Standard JavaScript basically so this allows you to define those new file formats And if you look at the compatibility like it actually goes all the way back to ember tree So I think it's a very powerful thing. That's really a lot of applications have access to this So that's really exciting to see Also a big benefit of this is that you can adopt it incrementally So if you have an older larger application, you can just start adding new template tag components within that application And it will just work side-by-side with existing components Yeah, one thing to note to no toe is that's like the underlying implementation of this library It's probably not going to be the final option of how it will eventually be in Polaris because really the history of this add-on is that it was used as a way to Research on what the best approach was so if you remember from the beginning of the talk like we had those four different ways to do imports this was really like a way to implement multiple versions of that and basically see based on on Evidence of what it actually look like and what works well So there's also the content tag spec, which is like a more generic way of embedding Languages within a file format. So currently we have like a template that you can embed But why don't we enable that for different languages? Like for example graphql if you want to embed that in the language you could also do that And in a sense, it's also framework agnostic similar to how GSX is not Tied to react. It's like the biggest user of react of GSX But there's also other frameworks that can make use of this specification similar to like the idea of content tag So the content text package as specifically is the pre-processor to rewrite this to valid json to valid JavaScript And this is built on top of rusts using speedy web compiler So that's really nice to see that amber is now. Yeah, also making the jump and being able to use like this modern tooling within with an amber But I think the the most important takeaway of this slide is that it actually doesn't matter for you as an end user The syntax of template type components that's done that's finished and that's that's fixed as well So even if you start writing template type components already today Like there there will be no way or no reason to ever rewrite That that syntax of that file because it's just fixed already even if there's like a layer underneath that will change so what you do have to do today to Get the full integration of template tags is for linting Making sure that you upgrade to at least the version of these plugins mentioned on the screen So we have support for ES lint as well as for template lint From starting from these versions Also prettier has supports for this one. You do have to install like a separate plug-in though So once you install that one make sure to configure it in your prettier or C file And also enable it to run on this new file extensions Depending on your code editor of preference You might also have to configure some other things if you use like a prettier plug-in within VS codes Because yeah, it's really a new language feature. You also have to enable it for that language Yeah, that's a prettier plug-in runs as well So what about type checking in in amber? So for this you can use glint for end-to-end type checking throughout your templates And this also actually already supports template type components So you also in this case have to install a separate plug-in Make sure you register it in the TS config and also import it in your types somewhere So this can be your global type registry. All right. Yeah, I know what you're thinking This this has been a lot of configuration And really this is what like the experience you get today, but keep in mind that eventually when Amber Polaris is like a feature completing This will all just come out of the box You wouldn't have to think about how do I start writing template type components. It will just work Think that's important to keep in mind So what about like local developments because as I've said, it's it's a new language and new file extension your editor Doesn't handle it out of the box So for visual visual studio codes, there's actually two plugins available. So the first one vs code glimmer It's the one that's linked in like the repository of template tech components And it's just a very basic setup to get Yeah syntax highlighting basically But me personally I'm definitely a big fan of the second one because it adds even more features Because yeah, there's a lot of things that you can do in glimmer in glimmer templates and this plug-in also really Highlights it it very well Yeah, so Richard syntax highlighting you have things like automatically closing tags when you start Writing attack and it's also by the same author as like the ember language server So it just works well together if you're using any other editor There's also quite a high chance. You will actually already have support. So I know for sure new vim is also supported But really like what all it takes is that you have grammar definitions that are available and a lot of Yeah, other IDEs also allow you to register this grammar For this new language and that way you can also already get syntax highlighting So about the thing about github and gitlab is that we don't yet have syntax highlighting which is a bit of a bummer But to actually get syntax highlighting on github they require 2,000 files in total Spread across multiple users and multiple repositories. So last I checked we were actually at 1,100 so I would also like to call upon everybody try out template tech components and Committed to github and then I'm sure we'll get to the 2,000 in no time There's there's actually a way to like also already start using with it's today with some syntax highlighting which is a way by Setting git attributes and both github and gitlab supporters. So via these configurations shown on the slides You can you actually already get syntax highlighting as if it was JavaScript Which is not great, but at least yeah, it's something So if you want to have syntax highlighting on the web So for this there's a highlight. Yes, as well as Shiki you can use So fun story here is that for my slides I wanted to use slidef and for those of you that don't know it's it's like a framework where you can use markdown to write slides and it also really Comes in handy because it allows you to write codes within your Slides, so you don't have to take like screenshots of your codes Copy paste it into your slide deck and every time you have to make a change Copy it over again the problem however was this Yeah, this Library didn't support template tag highlighting yet, which is kind of a problem if you're talking about template tag components So I ended up just looking what they use and it turned out they use cheeky So I just had a look myself and yeah start working on that and actually a couple of weeks ago They accepted this pull request as now you can also use the syntax highlighting in cheeky Which is used in slidef, but also for example in Feedpress, which you might know to write like documentation on add-ons for example I also want to give a shout-out to the tutorial on Glimmedown, which is made by a nilvox popular Which is a really nice way to already try template tag components just from your browser It takes you through like this whole tutorial on how to write template tag components and it's really powerful to build up this mental model On how it compares to template tag to classic components today So definitely check that one out and finally, let's take a look ahead So everything I've shown before is already possible today. It's already out there But there are still a couple of things that are not yet available and the first Thing to mention is that you can't use template tag components within routes because historically a number Routes are not the same thing as components So it also doesn't work yet So for this there has been like an RFC on set route components, but that one It's still it's still not merged yet There is like a polyfill available if you want to try it out so and Theoretically you can already have an app that is fully on template tag components But ultimately you just want to wait for the Polaris writer because that's really the one of the main pillars There is that you can use template tag components in your routes Also an interesting one is code mods. I think historically Ember has always been good at Yeah, keeping the whole community together and making the transitioning as smooth as possible so Chris quite show who has been doing a lot of work on template tag components mentioned that LinkedIn has been working on a code mod for this So I think it's a very ambitious goal I'm really curious to see what they're up to but even if LinkedIn doesn't do it I'm sure like there will be a lot of community Attention for it. So I think this is definitely one thing that's going to happen eventually and Then finally that brings me to my wish list. So a couple of things I would really like to see within the template tag experience today is automatic imports and your editor Because yeah, you have to do a lot of imports Also, for example for like the built-in helpers and yeah, always you have to look at what is the import again It's just a bit annoying. So it would be really nice if it could just be autocomplete. It's within your editor Blueprints blueprints is also a really interesting one So for those that use a number CLI to generate like a new components Today, it's not possible to generate like a template tag components. So I would really like to see that happening as well And then finally Documentation this will be where it all comes together So currently there is really no way to put it because it like lives in a separate repository but eventually like the whole template tag components will be on the main Yeah, amber doc sites Alright, let's wrap it up. So the states of template tag components today So it's officially the next generation component format in amber. It's already usable today You can adopt it incrementally. So Using old components in the new file format, but also the new components in old formats It unlocks code splitting because we have these references So the build tooling can better understand your codes It also has this local scope access as we saw for like local helpers local modifiers even local components And finally it also offers a stream lights stream lines testing experience, which is also a big improvement in my opinion So this brings us back to the question should you start using template tag components today and here? I think if the ants the answer is if you Don't mind like bumping into some rough had edges here and there I think it's definitely worth to already look into it because of all the benefits I've mentioned before it's just a really improved experience to like how we write components before template tag components if you're not that risk Or if you're not risk risk affair If you want to hold off for a bit until it's like in the recommended phase, that's totally fine as well Because that will eventually happen. But at least I hope after my talk today You have better context of where this template tag components are coming from and what they allow you to do personally For new projects might go to like set up as template tag components with TypeScript and Glint and I think that's super productive And then the only thing that rest me to say is thank you for listening