Electron Elm Tutorial

Key Takeaways

hi guys welcome to the electron Elm tutorial my name is tensor I'm from the tensor programming blog and today we're going to do something slightly different than what we've been doing before we're going to be mainly just talking about this electron framework rather than writing any code for it we built an application in the last 2 m2 toriel's and this application is a single-page elm application that allows us to interface with reddit here's the code for our application and inside of this folder as you can see I built up a few more JavaScript files here I have this app dajatol I have this main dot JS file and I have our index.html file and then I compiled our main dot elm file into this Elm that J's file I did all this to allow us to use electron so let's actually run this in electron so to run the application all I have to do is type electron name jeaious and this will open a new window and as you can see this window is got its own stuff on it it says reddit SP a in the corner here and we can just run the application like we were running at an elm reactor if we click one of the links it opens a new window and it's almost like we are working with our own browser and that's exactly what electron really does is it's a browser that was dope up with the chrome API so it's like a stripped-down version of Google Chrome and that allows us to build cross-platform offline applications using web technology so you'd be surprised to learn that actually this application that we're in the visual studio code application was built off of electron so was the atom text editor so was the light table text editor and so was the adobe brackets text editor all these were built using electron if we hit control shift Y it will build it will bring up a javascript console like we could inside of chrome of course this one is heavily modified so electron was actually built by the people over at github mainly to help them create atom and if we go down here and they actually list all the applications that have been built in electron there are quite a bit more than just water right here because you can see there are quite a few notable ones for example atom slacks WordPress Visual Studio code we're all built on the electron module and as you see here it talks about you can use any web technology and it uses the chromium API and nodejs and then you can just build it using HTML CSS and JavaScript so basically any language that can compile to JavaScript can be used to build an electron application now this is important for elm because elm is mainly an online language you know it compiles to JavaScript and to HTML and we can use it we can use that to our advantage to compile something for electron so how exactly does this work well we have a few files here as I as I mentioned before so first we have our index.html file and as you can see it's a very simple HTML file it's just a normal HTML file it's got the title reddit s.p.a as you noticed in the corner of our electron app that was the title of it showed then we just have a div with an ID of app and then we link to a script called fjs so inside the fjs we are bringing in our elm dodge as fire which is our elm file compiled to JavaScript and then we are grabbing the container so the element with the idea of app and then we are embedding our Elm inside of that container if you look at the way that the HTML is structured in here that's how it looks as you can see we've got a typical HTML the body looks a lot like this index.html and then inside of this gives here this div ID app we have our entire application so then this main applicant is main dodge as file is used to configure our application so as you can see here we're bringing an electron so we're saying requiring electron and then we're saying from electron dot apt we're creating an app variable and then we're creating a browser variable browser window variable rather from electron dot browser window and then we're saying ret main window and then we're using this main window variable to create a browser window object inside of this create window function this great window function is deployed anytime electron is in a ready state meaning anytime we launch electron and then we can define the width and the height of the window so only watch I want launched electron it launches in a 1024 by 768 resolution here and of course we can go to full screen and we can come back we've also hidden the menu bar so if I was to remove this we would have a menu in here it's just a very basic menu and we can edit the menu if we want we can put in custom things like for example if we wanted to allow people to go back and forth using the menu or if we wanted to maybe add some more functionality to this application we could embed it right into the electron window then we say ok we've got this main window this browser window object rather and we say ok load the index.html file to load URL index.html and in this next line here main window that web contents that open dev tools actually is what automatically opens the JavaScript console on launch so every time we launch this app it will automatically open the JavaScript console then this line down here is what allows us to close the window so every time we hit close it deletes the main window object so if I hit close it will actually close the app and this here this line here and this anonymous function is mainly just to make sure that we have no menus on any other windows which slide from the global window so for example if I click one of these links as you can see it brings up a new window and this window doesn't have a menu either so that's what that line is doing then this line below it is mainly just for Mac's for the Mac operating system so as you guys probably know if you have Mac Mac users sort of the dock system to launch applications and what this basically does is so when you close a window in Mac a lot of times the application stays open and it's just hidden behind the dock and if you just click the icon it will not relaunch the application but rather just reopen a new window what this is basically doing is it make sure that when you close the window inside of Mac's it officially closes the application itself so it runs without that quit function which will quit the application and finally this last line will activate the window so when we create a another instance of our electron app so we already have it open here if I was to run another instance it wouldn't create a new window instead it would just focus in on this window so we don't have the ability to open multiple windows of course we could change this mix so that we could open as many windows as we want so yeah this is just mostly just boilerplate here I mean aside from minor things like the width and the height and removing the menu this is mainly just boilerplate if we want to automate this and maybe even make a binary so that people can install our application on their computer the way that we do it is through a package.json file or a make file that would automatically run our scripts here so for example we could create a very simple executable that would just run electron and then main dodge is we've also created another electron app out of our snake chest or our elm snake file so here's our almond spank file we open a window and inside it is our snake game so we could do a lot with this if we wanted to we wanted to package this snake game as its own thing and maybe distribute it to people as an open source cross-platform offline application we could do that there are a few notable differences with this compared to the reddit SDA though I didn't change the index as you can see it's still red SDA we do have our basic menu here so we just have file exit and edit undo and all that stuff reload we can toggle the dev tools and stuff like that when you want to create your electron application the first thing of course you want to do is to install electron so the way you install electron is by using NPM or by using yarn so you can just use NPM install and then you want to install it globally so you type in - gee and then you type in electron and that will install it globally alternatively you can use yarn so you can use yarn global add electron and this one star globally as well for those of you who don't know what yarn is yarn is basically NPM except it is faster it works asynchronously and concurrently so it builds the packages faster for any of you who've worked with node you guys probably are aware that a lot of node packages have hundreds if not thousands of files sometimes it can be you know it can take a while for them to actually don't be you know the actual module in the case of electron we do have quite a few files here so ya yarn is a good alternative if you're interested I'll put a link down in the description of how you can get yarn if you want to also link electron and I'll link note in the description as well anyway guys I hope you enjoyed this very simple explanation flash tutorial of electron and elm keep in mind that of course Elm is not the only language that you can use to build electronic a shion's you can build them with native javascript or with any language that compiles to JavaScript personally I prefer Elm I prefer dart as well and I've used closure script to build a few electron applications too I believe the s code was built using javascript I know Adam was built using CoffeeScript and I know right table was built using closure script so yeah you can see the variety is rather high on the different languages that can be used alright guys so if you enjoyed this tutorial feel free to subscribe and like if you have any questions of course feel free to comment and if you just liked it go ahead and hit the thumbs down also feel free to take a look at us on Twitter if you want to see when the next video will come up I believe our next video will be go tutorial so we will be continuing our go tutorial and perhaps going into elixir or rust after that anyway I hope you guys have a good night