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

Vanilla TypeScript Components

Nikos Katsikanis speaking at Ember London in February, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Vanilla JavaScript is using the most common denominator of code to accomplish the task at hand without using complete frameworks. With Vanilla TypeScript Components we want to accomplish several things: compatibility across different frameworks, minimal abstraction, communication through custom DOM events, zero learning curve, and future proof code. Find out how in this talk.


Well, the good news is, everything that you learn tonight, you will be able to keep with you till the rest of your life because it's teaching JavaScript programming without any dependency on any framework or any hipster newest fad framework that comes out every week, you know. Someone once says that what you can do is you can Google any noun.js and you'll find that somebody's made a framework for it. You could probably take floor.js and somebody's created a JavaScript framework for floor, you could probably type cider.js and you'll find something like that. What I'm gonna talk about, is-- Well, this is my website; I do training on various subjects on JavaScript and I have a YouTube channel teaching code and vlogging and things like that. So, Vanilla-TypeScript Components. I've been around for a while, coding for about eight years and I've seen a lot of frameworks come and a lot of frameworks go and some really good ones stay and mature like Ember. I'm writing my own suite of JavaScript things that could be called microservers used for the browser. Each of them do something really small and specific and they don't have dependencies and they can be sort of mishmashed together. So, Vanilla-TypeScript Components, what is this? These are two of my pigeons in my garden. This one thinks he's big and strong, but this one, he's a trained fighter, I'll explain later on. So, Vanilla-TypeScript is a term that I coined myself; it's exactly the same as Vanilla-JavaScript. Has anybody heard of Vanilla-JavaScript before? One, two, three, four, five, six-- So, basically Vanilla-JavaScript is using the most common denominator of code or the lowest level code in a browser to accomplish the task at hand without using complete frameworks you know, as a group and to make a few applications; so, that's what Vanilla-JavaScript is. With Vanilla-TypeScript I have these goals, Cross Framework Compatible; so, my components are designed to work with any framework and if a framework can't work with the component then it's the frameworks fault. Minimal Abstraction; so, I don't introduce unnecessary abstractions to my components if I don't need to. So, if it can be simple, I will keep it simple. You'll see examples of two components that I've made. Communication Through Custom Dom Events, basically that means that the communication buses are using a native browser as the engine or as the framework for communication. And, Zero Learning Curve, which is quite important because this stuff that I'm using here, reduction and things like that, I want to also be able to teach people that are brand new to coding or someone that's just learned what a var, a number is, object; I want to be able to jump straight into showing them how to make real world things in a browser. And also Future Proof because there's no dependency on any framework, then these things should, in a sense, work until the end of time as long as the browser API doesn't change which happens very infrequently. Frameworks change, they all need updated and things like that but code that's been written for the browser doesn't tend to go out of date or need updated because it's a JavaScript language it doesn't really do that very much. And, it's official because I actually created the GitHub tag for this Vanilla-TypeScript and if you go and search for Vanilla-TypeScript, these are all my repositories, and, hopefully, this will grow and I will be the master. So, yeah, there's a lot of arguments about frameworks and Vanilla code but, thankfully, it's been resolved because there were two pigeons outside my window, and they were having a discussion about this actually, very thing here; so, the one on the left is explaining to his friend who's in love with jQuery which is a JavaScript framework and I'll just-- I don't know if we have any sound in here but I'll give it a bash. So, if there's any, I think it was pretty quick. I was inspired, okay, so let me show you an example of a Vanilla js component that I made. So I wanted to have a way of notifying the user in a browser that something happened; so, I was a bit sneaky here and somebody was on this page and they interact with the page as normal but they don't realise that there's a little satellite dish down here. So, when there's something, some background process, I wanted to have this thing generate a pulse that would, sort of, propagate through the page and start spinning around and I've done that just with a little bit of CSS and I just toggled, added a CSS class to this. So, look what happens when I click on start pending. So, the user on their phone or their browser will see what's happening here; that's basically the user will-- You could have a lot of things that spins around, you know, like this, but I wanted to just be me and do something a bit unusual there. It has an API so you can stop it, you can append a message, and you can then it'll close the message after a certain time and that's, for me, that's a Vanilla-TypeScript Component. You could also call it a Vanilla-JavaScript component if you remove the typescript part of it. The code is virtually the same whether it's Vanilla-JavaScript or Vanilla-Typescript. I will show you the code. So, something like an NPM, the energy it can use, it's called the SmartTerminal, very basic, it uses webpack to compile the source files here into the build folder and I publish this on the NPM. You can use the components with or without typescript. You can use it without typescript by, in a sense, just importing the build file, like this. Can you see the code? Is that clear? So, it can be used in Vanilla-TypeScript; var component equals new SmartTerminal, and it's got some methods here. The component itself, this is all the code for the component, it's a hundred lines and it only imports two things. It imports the style sheet, postCSS, which is pretty much the future-proof CSS that's gonna be standardised across everything. It's called, yeah, postCSS. And I have this thing called Icomponent called typescript. Now, what I've done to sort of provide some level of unity amongst all these components, otherwise we can descend into the Wild West, is I created an npm package called Vanilla-Typescript. So, what I'm doing is I'm exposing these interfaces and my components, these components will either implement, will implement these interfaces which means they have to do this method and this method. I have two interfaces that I've created in this framework, sorry not framework, this library. I have an I-attachable component which you use when you want to design a component that will attach to existing dom and then I have just an Icomponent which is when you just want to show something on a page that doesn't need any dom to actually attach to or have like a portal. So, like the SmartTerminal, implements Icomponents like so. SmartTerminal implements Icomponent, it has to implement show methods and the destroy method. When we do the start pending, the little thing that shows a pulse, and start spinning around, all I do is add on this data set pending to it and that goes into here; it's got a CSS rule for that. There's a spin keyframe that rotates it and there's a pulsate which basically creates a border of a circle and then expands the scale and that is applied in this rule here, this is all postCSS. And, postCSS is basically the same, it looks kind of the same as Less. It does need a bit of configuration. These are the libraries that I've needed to use in order to make it behave like Less or Stylus. PostCSS comes with-- If you want to import another postCSS, if you want to have custom variables, custom media files, then that's how you do it. I have a fluent API; so, all these methods return this so you can basically change the way this component works. So, there you are, that's a hundred of line JavaScript code for a little usable component here. Another component I've made that I wanted to show you is the solar popup, which I do use in my website. I will show you it on my website being used. So, if you go click on Build us an app, you click this, this thing that slides in and slides off, is called a solar popup. It responds to escape presses, it has a little button that you can press and also and ones to submit events. I have the code here, SolarPopup. Again, very minimal component itself, 90 lines of code, including comments and spaces. It has a dependency on IComponent again and I have some constants and also depend on it's own CSS but the CSS it uses is actually output as a CSS file, it's not actually in-built to the JavaScript like the SmartTerminal; so, in a sense, you can use the component and completely style it yourself if you want. So, the actual component, the show method, what it does is it basically appends this dom here to the body element like this. And I have some methods called addListeners so it will respond to click, or key up or submit. And I have a destroy method which removes all the stuff on the screen. I want to show the code on the actual browser page so you can see how clean it is. So, at the moment,-- Let me just refresh the page. So, when we trigger the popup, you see that they've added it down here. So, what I've done here is I've added two things. I've added this modal background but is has a z-index of 1 and that means that the person can't click on any part of the screen and it's got an opacity so that it kind of dulls that up. But I didn't just instantly show it, I did a transition so if you watch the colour here, it doesn't instantly fade out here, it gradually fades in. And you see that? So the popup only provides a child container and this close element and the user can put absolutely anything they want inside this, you could put Ember up inside that popup if you wanted or a Reactor elementor a jQuery. The modal background itself is a typescript class, it has a render method and a destroy method. So, that's pretty-- any questions? On my website? - [Audience Member] Yeah. Yeah. So, this app button here, this button, when they click this button here, that button, it creates a dev element and it creates a form, like this. And it has a submit button, it'll create a new popup, you show the popup which will then shove into the screen. And then what I do is, I add submit listener to the form. So, this functionality I'm doing here isn't actually within the component, the user provides everything. So I don't have to worry about implementing this so I'm letting the user decide what the component will do. So, any framework could decide what the popup will do once there's a submit button. So, yeah, basically take the data from the submit event and then I fire it off to an API and I'm using a SmartTerminal to start pending so actually, if you notice down here, I've got my SmartTerminal, you see that, you see down here, You see down here, that's a SmartTerminal, it stays there; so, if they say I wanna build an app here-- This doesn't look very good in a mobile but it's not the popups fault, the user should tell this form to get small, yeah. The component is smart enough to know that if it's mobile, then you want it go up to the top of the screen here, see that? The component isn't smart enough to just size it up for him, that should be up to the user; so, that's why it looks a bit gaff on the mobile. So let's do something here. I'm using HTML validation that'll be supported in Safari soon, do you know that? Safari will support these forms, this stuff here, I didn't write any JavaScript for that, Safari now supports that; that's gonna make our lives a whole lot easier. More professional speakers will actually write something sensible in there but, I'm not a professional speaker yet. So click send, that thing, ah it's supposed to pulse-- This is an old version of the library. The pulse affect, I added that in recently and I'm using Heroku; so it takes ages for the server to-- So now it sees and I'll get an email. I'm gonna be using AWS Lambda for this email thing soon. If you wanna know what else I'm makin, I'm makin a, I'm makin a router so you can do lite routing, like react routing or Ember routing, stuff like that but it can also be used as a combination mode, it can be used as a slide show, cause it just looks at a component and gets a portal and a page, but it can be a full size page, the component's flexible enough for that. I'm creating a jQuery data grade thing but, again, very minimal, just rendering stuff to tables and I'm creating-- Yeah, this is the presentation framework, that's not the router, the router is a warp-router, warp-router is having URLs changing stuff like that and creating different content. So, it's fun, it's taking a bit of time but -- Yeah, and also gonna build a full application against it. I'm gonna be building out a real-world application. So, I started this off vanillajs-cookbook, which is quite popular considering I've never, I haven't touched it in months, but this will eventually use all Vanilla-TypeScript Components and it'll be like a full app. I actually don't know easy it'll be, but, I'm gonna try anyway. But all this stuff, I'd be happy to teach a new person and have them have real-world skills that they can-- It's low level JavaScript interfacing with the browser so the skills that I'll teach, it will never leave them, and will always be valid to any JavaScript job; that's my hope anyway. But Ember's great, great framework.