Sessions is temporarily moving to YouTube, check out all our new videos here.

An Introduction to Glimmer

Ruslan Zavacky speaking at Ember London in April, 2017
669Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Covering what Glimmer is, the basic and how you can start using it today.


Transcript


Ruslan: Hi, my name is Ruslan. I will talk about Glimmer a bit. I bet a lot of you heard about Glimmer. Raise your hands who tried Glimmer? A lot, that's cool. Great. So, who would think that between you and the [inaudible 00:00:23] who will be Glimmer right? What we know about Glimmer. Glimmer is a small library that can compete with [00:00:30] the things like react really, really greatly. So, this is an application that I've built in spare time, it also has nothing to do with what I'm going to talk about. But, the source code is indeed help so if you're keen you can check it. And I will be adding more stuff there just to see how Glimmer [inaudible 00:00:52] as there's lot of cool things to do. Now, what we'll actually do, we'll try to build [00:01:00] small components and we'll go through how it's different from the Ember itself, how we pass things and so on. So the first thing that people are sometimes scared of is that it's TypeScript. We'll hear about TypeScript a bit later, but one thing that I can tell you for certain, if you don't want to write in TypeScript, you can still write in TypeScript. To make it a bit quicker [00:01:30] I'm not going to [inaudible 00:01:31] instal or [inaudible 00:01:32] instal everything. So I had a simple application as is, and it's application says "welcome to Glimmer", it says it's quite fast right. So Glimmer component, in the top level itself is basically just a component. So when you start an application here ... So when the application starts, it actually routes to the component that you specified. In my case, this component name is Glimmer London, [00:02:00] and that's it. So there is no routing, there is no magic itself, there is a top component and whatever it can [inaudible 00:02:07] it will build there. We will see, for example one thing. So, sorry. It actually should be equal, but ... One sec. I'm nervous, forgot everything about Glimmer itself. Okay, [00:02:30] let's do it a different way. I will explain in a bit what I'm doing. I will do something wrong as well possibly, but ... Just bare with me. I'm [00:03:00] sorry for that. What's wrong? Live coding, never liked it. I think maybe ... Okay, never mind. Speaker 2: Add something else static to the template. Let's see if it's maybe not redefining the templates. Okay, now it's working. Ruslan: Thank you. [00:03:30] Okay, let's leave it here. So, the thing that I did basically ... Sorry. The thing from TypeScript itself, I've specified the title, which [inaudible 00:03:40] so if I were to type something else, TypeScript will complain. And you can specify title, user ... Actually, it's completely the same as an Ember itself, an Ember component and so on. The things can get different, a bit different ways. We will see [00:04:00] ... Sorry. So, to generate the Glimmer component, which is different, it's actually, you have to type "Ember G Glimmer Component" and the name of a component with a hyphen in between. It will generate the component, will place it in a [inaudible 00:04:29] folder somewhere [00:04:30] nearby. The one thing is, if you remember the Ember model unification RFC which was merged, Glimmer completely supports it, which is cool. And I suggest to go to RFC and read through to familiarise yourself with it. So, as Glimmer London, our main component, is a main component and we want to render something else, we will render it [00:05:00] with angle brackets. Something that was like ... Thank you. So, now all the components, they are basically ... Sorry guys. So the components are included with angle brackets which is really cool. And something that is [00:05:30] quite awaited because Ember promised like 2 years ago, and to get there, it was a bit more difficult path as it should be, or as it was initially thought. So ... Something is wrong, right? Yes. So, in this quite obscure example you can see that it's rendered somehow Hello one. Now, [00:06:00] there's a cool thing. And the cool things actually includes a differences between Ember and Glimmer. And the differences are how you actually pass things to components. If you guys are familiar with React, I would say it's quite close, because in React there was concept of arguments and parameters. So now, to pass something inside the component, it's not enough to just say "param 1 equals something" right. So now [00:06:30] you will actually have to prepend it with @. So, now, hopefully we will just see that it will be different. Hope that you remember that it was two things right? And, it's hard to follow, [00:07:00] but the one thing that you have to see ... Yay. So, hello 11. It's like I'm doing a mike test. Now, what's different? @London. So now, every parameter that you pass you'll have to prepend @. You might say, "oh, why should I do it?" It's actually a really, really cool important life saver because now in the component itself, you have something that is passed to you, right? We should [00:07:30] definitely know that it's at London. Next thing is, you can have actually something that will be local to the component right? So we can have something your own ... You can have a property ... [00:08:00] And this is where TypeScript is cool right? It complains straight away that I did something wrong. And it complained again that it's undefined, which is again cool. One moment. [00:08:30] Let's hope, yup. So, what we see here. We have two variables, one, which is passed from outside, and one which is actually created inside. And just glancing at your template you can easily see that they are different. So, in this case ... Actually, I really love this thing a lot. Just looking at your template, you see what is passed, what is [inaudible 00:08:54], and what you have in your template, which can be changed. [00:09:00] You'll definitely love it too going forward, trust me. And, what else cool? So the coolest thing is, not the coolest thing, just ... Old habits. Something that you can use from [inaudible 00:09:16] right. You can use it before, but you can create the functions. I don't know, like ... We can get something from Reddit itself in a form of [inaudible 00:09:29] function. [00:09:30] Maybe I'll skip this part, just trust me it works. From the [inaudible 00:09:38] itself, what I found out, playing with it, it's really fast definitely, it's super fast. Second thing, it took me maybe 5 to 10 minutes to get used to, with zero knowledge of TypeScript, so you can switch straight away. One thing that I love a lot, Jamie said, it's about [00:10:00] web components. Glimmer can be compiled to be as a web component. What it actually means, it means that any component that you created like "hello world, Glimmer London", it will be rendered if found an index. Html itself, or any page where you place it. And how it works is ... This is our index. Html right? So, whatever we place here ... [00:10:30] This is something that looks like from web component right? So, it's like "hello world, something, blah, blah blah." If you look at the source, it's nothing, it's just a tag, which is there. Not sure if you can see it? I will try to [00:11:00] make it better. So, it's there in source right? So, what web component will do? When it will be as a web component, when your Glimmer uploads, or when your "Glimmer uploads" it will actually find this thing in your DOM and replace with a real working component which is really cool because what it gives you, is you can render from the server, web components like passing parameters and so on and expect your application when it's loaded [00:11:30] to look like client application. This is actually amazing. We will do it, and we will show it. So, by default, it's all in index TypeScript file. By default, it says "initialise custom elements". Custom element is something that comes from Glimmer web component, and this is already initialised to load as if you have Glimmer London somewhere, it will load again and replace it. And we will just try [00:12:00] to do our "hello world" example right? So as you can see, now in the DOM there is no "hello world" anymore there is empty, lonely [inaudible 00:12:19]. This empty, lonely [inaudible 00:12:23] there should be two of them because currently, unfortunately [00:12:30] can't pass properties to web components itself. So, you have to rely on [inaudible 00:12:36] components, but anyway, it's a really good step forward for it to work. So as you can see, it loaded right? And it wasn't inside the DOM, and it wasn't inside the application, it was outside, but Ember did this part very well, so it found it, rendered, and it works. [00:13:00] And you don't need to do anything. The latest version which was published by Robert Jackson yesterday adds web components straight away when you instal Glimmer, so it's already by default enabled, which is amazing. And the application itself, it's small. I'm not going to go into details itself. It's like as you see, it's super [inaudible 00:13:23] and simple. And the one thing which is different is how you pass things. [00:13:30] Actions, right. So if you're used to actions like in Ember right? So, we have unclick ... Now, actions are pure functions, this is what you have to know about this. So as you can see, an error. [00:14:00] Pure function which is named Click Me and it failed, and it actually failed. Something happened with your rendering. Yup. So now, it should fail that there is no such action. Yup, so, the errors are also perfect, they just tell you what's wrong. As you can [00:14:30] see, just a pure function. Some of you possibly use the same pure functions in current Ember right and you pass them all over the place. So it works, you can click, and even show something. So, the big difference is, it's TypeScript itself, this is everything [inaudible 00:14:55] Everything is extendable, beautiful, typed, [00:15:00] less errors, and more defined things, and refactoring. With TypeScript you'll love refactoring, that's for sure. So, for web component, you basically don't need to do anything, it's already there as you can see. I will just show you one thing ... So, one app that I hosted and it's [inaudible 00:15:27] by the same name with more code, more examples [00:15:30] ... 30 seconds for [inaudible 00:15:33] to load. This app does several things, some of them funny, I thought it would be funny, but then, it didn't work out. To show you how fast it is as well, you can increase FPS. Just tries to render different random pixels and the funny button which is magic trick. The thing is, it just [00:16:00] gets an image and renders, so you basically can render your picture and just show it on your skin. You can play around and see how fast it is. There is one bug, which [inaudible 00:16:13] unfortunately now and it continues to use the body a lot, even if you hit pause, you see something happening there, but no worries. Speaker 2: That's because [00:16:30] the implementation of [inaudible 00:16:33] isn't quite clean yet, so you get constant re-renders, unfortunately they're so fast you can't notice them unless you open the inspector. Ruslan: Unless you actually try to inspect something and click somewhere because it resets I think. No, not here, somewhere it will reset your pointer. Anyways, it's cool, will be solved possibly quickly, or someone else can solve it as well. [00:17:00] At this point I think I'll stop and I'll give the stage for someone else. The main thing that I wanted to say, it's not really different, nothing exactly to show like "oh, it's super different." It's really cool, everyone can jump in, and that's it. Thanks guys.