This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Transpiling Modern JS & CSS" Lesson
[00:00:00]
>> Steve Kinney: Second application we're going to build is clipboard manager which is going to integrate some new and exciting terrain for us. One, it is going to listen to global shortcuts, all this accelerators we put on those menu items, those are from within the application. But, what if we wanted to trigger stuff from anywhere?
[00:00:21] Right, so we can register at global shortcuts with the operating system. It will be able to read and write from the clipboard. A common question I get a lot is, what if I wanna use Angular or Ember, or React or whatever, right? What if I wanna use TypeScript?
[00:00:36] What if I wanna use CoffeeScript? No one asks me anymore. What if I want to use Sass, or whatever. Right. And those are all very easy things to do without a complicated bell process. Yeah, I want to use Babel, so what I'm going to do is I'm going to set up a web pack config, that's going to like on every file change, automatically compile a new render JS, so on, so forth.
[00:00:58] That will work, you don't need to do any of that, it'll work. So, this application is going to read more from the clip board, it is gonna have global shortcuts, and also it's going to be able to support either TypeScript or fancy pants JavaScript with Babel or a CoffeeScript or any of those things as well.
[00:01:19] We're actually gonna build it as the world's simplest React application. Even if you don't know any React, that is totally fine. It's not gonna, you might learn a little bit of React along the way, but there is is not React prerequisite knowledge for this. It'll just be some of that by hand dom manipulation that we were doing in the one.
[00:01:38] We just, we used React for that. Instead, and it's mostly to demonstrate how easy it is to set up and the fact that you don't need to like set up a Babel compiler step for JSX and things along that those lines, but like I said, you could do this.
[00:01:50] There are also libraries, like amber usually is a, has a, I think there is a amber electron which will basically use embassy ally and an electron application together and basically in sync for you. And this is very similar for angular as well. So, for whatever your framework of choice is, there is an option for that.
[00:02:09] I only worked with React because it is for our purposes the lowest learning curve, if you didn't know any of them or if you know a different one. So, we want that one. So, how do you do this transpilation stuff? How do you do CoffeeScript to the version of JavaScript supported by whatever version of V8 is in electron.
[00:02:29] You basically just pont on the problem. There is a library called electron compile. Electron compile basically built in the recompile step, so in our dependencies, you might have seen that we had electron, now electron use to be called electron pre-built, up until like i must say 2017, where i just used electron library for that.
[00:02:56] There is a library called electron pre-built compile, where you can use that instead of electron and it will basically give you a version of electron that has all the build process steps already built in. So basically use that instead, and now all of a sudden you can use Babel, or TypeScript, or CoffeeScript, or Sass, or Less or Stylus or Jade, or whatever you want.
[00:03:16] If even that is a little bit too much for you, we'll talk about another really great tool that I recommend. But let's just talk about what we actually get from electron compile first. So as you're kind of compiled to JavaScript languages, you get Babel, TypeScript, CoffeeScript and GraphQL support.
[00:03:35] Just built in. How do you opt into these? Well, if you have a file that ends in .js it's gonna run through Babel, if you have a file that ends in .ts it's going to run through TypeScript, so on and so forth, right? The file extension will dictate what pre-compiler runs through.
[00:03:52] You don't have to worry about it. If you're using electron pile, you get the transpilation step completely for free. CSS, you can write Less, you can write Sass or SCSS, Stylus, any of those. You just use the right file extension, it will automatically transpile them and work for you, you don't have to think about it.
[00:04:13] HTML, you can use Jade or you can use Vue.js 2.0 Single-File Components. All right so, if you are into that you can just use those. Again file extension dictates which one we're working with. You don't think about it. You don't have to configure anything. There is a way to tweak and configure things, that we will take a look at in a second, but out of the box the file extension will go with some sensible defaults.
[00:04:37] The tweaking stuff is usually most important for things like Babel because, as many of us know, Babel does nothing. Right, Bable is plug-in powered mostly, if you just run code through Bable, you get the same code out the other end. It's all about Bable plug-ins. So if you're using Bable, there are some things you might want to consider doing.
[00:04:54] And then JSON, you can use CSON instead, which is CoffeeScript Object Notation.
>> Steve Kinney: It's what Adam uses. I have never used it, never occurred to me too, but it thing, and you can use that as well. And so like I said, instead of if you are starting a brand new app like this case, because I wanted to not make you watch me write CSS, You're welcome.
[00:05:22] I gave you repose and you pulled down. I had the dependencies in a packaged JSON. But instead of doing npm install electron, you would do an npm install electron-prebuilt-compile. And you'd treat everything exactly the same way, except now you have translation for free.