 It's View Cross Platform Desktop Apps. So let me just go further a bit. So I gave this talk, not this one but the previous one like last year, on how to get excited about it. And now I'm like introducing about it. So it's kind of like an inverse. I should be introducing first then get excited, right? But anyway. So you can watch my previous talk which is very different than this one. So I purposely make it different so that you have to watch this one. So it's kind of like, you know, it was in a talk.js. It's a JavaScript Meetup. Now it's a PHP Meetup. So I'm like here for some reason. So about me. So I'm Ji-Yan. I'm a front-end engineer. You might have seen me somewhere here on TV last week. It's like an interview thing on Channel 8 News or Channel News 8. So I don't really do much PHP but I work with a lot of PHP developers in my company. So my says that Slack runs on PHP. And then according to this Quora page if I zoom in. So Slack runs on the LAM stack. So actually I don't know what LAM stands for anymore. Like A is Apache. M is MySQL. P is PHP, right? L actually stands for what already? Linux, right? Okay, cool. Totally forgot. It was so old. And then I tried to double confirm if it's really running on PHP. So I'm like okay, cool. Okay, where is it? PHP, cool. And then so Slack, if you use Slack. So Slack runs on PHP, right? And then let me do this thing. So this is Slack. So this is the desktop app for Slack. So Slack runs on PHP and then Slack's desktop app is built with Electron. So somehow it's related that way. And that's why I'm here. So Electron is kind of like a framework for you to build desktop apps with web technologies. So there's no PHP. It's mostly JavaScript, HTML, CSS. So it's purely just that. A bit of Node.js and a bit of extra API calls. So last month, I think, March, April, May, June. Last few months, last month. So they finally released the final version of 1.0. So it's kind of stable. So you can use it right now. So previously it was at 0.0. A lot of things breaks. So now it's very stable. Still something breaks but anyway. It's 1.0. So it should be stable. So a lot of things. So in this topic, I'm not going to show a lot of code. So the thing is it used to be very difficult to build Electron apps from my experience. So I started from 0.1 or something. And it was like, oh my God, so difficult. And so many steps just to build one single desktop app for all platforms. So it turns out that it's actually quite easy right now. So if you want to know how big Electron is, so it's actually quite big. I'm surprised. So Slack is one of them. Atom, which is the editor that you can use. It's built by GitHub. So it turns out that there's a lot of really big apps on small apps, I guess. So a lot of them. Even Brave Browser, you can build a browser with Electron. Really weird. So it's kind of like now you can actually build desktop apps. And these are the companies that prove that it's stable. So let me go on. So previously I said it's very hard to start. There's too many packages. If you're in the Node.js world, it's like so many packages you have to download. You have to like a lot of NPM install and stuff like that. So it turns out that, so I was looking at this like last few days and then like how to do a quick start. And it's really quick. So it's just like three lines. So previously it was like few lines like here. So I kind of like can show this kind of thing. Ya. So wait, where is it? Can you guys see? So it starts from here. So it's like git clone this thing, this repo. And then you run a lot of stuff like CD to the folder and NPM install. So you just do everything for you. And then you can just NPM start. And then oh done. So you got a desktop app. You got a Hello World. You got your web inspector thing. So everything like HTML. You can tell it runs Node 6.1 Chromium and Electron 1.2.5. So it's kind of like building a web page inside a desktop app. Ya. So if you're like thinking of building desktop apps, so it's kind of like nice to finally do it in a much easier way. Ya. You do all the UIs and CSS and stuff like that instead of like some other frameworks or other languages. So kind of cool. And this is the quick start which I find it like too short. It's a bit like too easy, actually. Ya. So this is kind of like one of my project. So I can show you guys the code a bit. Hmm, let me see about this. Hmm. White background, sorry. Hmm. I cannot. How can I do this? It's different team. Different team. Wow. How do I switch? Hmm. Hmm. Bit difficult. Ya. Wow, I have to switch teams now. I like. Oh, wow. Ya. No, the syntax team. Okay, one like okay. It should be okay, cool, cool, cool. Wow. Okay, big enough. So it's actually quite easy. It's just like one single variable for every single thing. So everything is inside electron.app, electron.browser window. So you might find it weird because let's say you used to build desktop apps before, like in the older days if you think about it, like Adobe Air, there used to be Adobe Air, and then the accelerator titanium. And then there's also the comparator, the Node Webkit, or NWJS. So most of them, if you build desktop apps, you always think about windows. Like the first thing that you think of building is like a window of something. Like a window of toolbar, status bar, sidebar. For electron, it starts with like a JavaScript file instead. So it starts with a script that will run something. So it's kind of like from this script it will actually create the window. So instead of create the window first then run the script, then it will actually starts from the script first then create the window. So it's kind of like a single process that you can spawn multiple windows if you want to. So it gives more flexibility in the sense if it's like other frameworks, it's always like one window and then you'll be like, okay, now I have to open another window from that window. So it's kind of like weird. So I think it's the differentiation between atom and all the other frameworks. So it always starts from a single script and everything else runs from here. So you create a window and then main window equals to new browser window. And then load a file and then it's actually quite simple. So there is this thing that, where is it? Okay. So if you go to the website actually there's this thing which is really nice here actually. So I guess the github guys or whoever they are, right? So they found that a lot of people have a lot of problems trying out the APIs. So if you think about desktop apps there's actually a lot of things you can create custom windows with multiple shapes if you want to. It's not always square the windows. It's like even M or whatever. And then it can be like everything. It can be like a right. You have to create a custom, context menus and all that stuff. And if you even go through the documentation there's every single thing for every single dialogue item. Frameless window. Menu, menu item. Power monitor. Somehow you can monitor something. So it's all this very low level kind of low level, OS level kind of thing. So I think most of the time you probably use web view. But you can grab stuff from your clipboard, crash reporter. What if the desktop app crash and you just report back to your server. Pretty a lot of stuff. And all this submission to the Mac app store. So there's actually quite a lot of steps. And this is like pretty cool. And one thing that you should try is actually this thing which I'm not sure if I install this. Install Okay, probably I didn't install it. So it's like if you download this for Mac, you demo every single API in that desktop app. So it's actually quite cool. And then so this is kind of like the app that I built myself Kyoku. So this app doesn't create a window. It just creates a menu bar item on your Mac menu bar. So it's kind of like look like this. Super simple. It doesn't need special UI. So basically like it's an app to that shows iTunes current playing song on the Mac menu bar. That's it. So it's kind of like this. Where is it? Yeah. So this is like my app. So it's like app.js with a lot of stuff like the menus. So it's kind of like this. Does it work? Okay. Kind of like this. Kind of like MPM star. Okay. It looks a bit ugly now. So it's kind of like this. So if let's say I open iTunes or something. Okay, whatever. And then play songs. And then you do this. So you show the name, artist, album and then preferences. I can change the character limit on the fly. And then sometimes you just go where. So it's kind of like simple. Okay. So it's like just one single file. Well, there's actually multiple files. But yeah, like iTunes is kind of like I have to do like some special scripting. Just to grab the iTunes playing songs. So it's quite yeah. So it's not really a fancy at all. You can just like a menu bar app. I think that's most of the use case that I see from a lot of people. A lot of developers actually. So kind of like this. So another example is a WeBuild SG app which is also a menu bar app. So instead of showing like menus it shows like a web view inside a menu. So wow, this is really big. So it's like if you click on the like a WeBuild icon on your menu bar like a web page actually. So it's like super simple. This is another one. This is by Joshua. I think it's not here. So he built like something even fancier. So he built like a this visualization desktop app with like JavaScript. So he did a very nice animated gift of like the whole usage of the app. So it's like everything looks like native if you look at it. All the starlings are CSS like pure CSS, pure like JavaScript, HTML. So this is like pretty neat. You can build this kind of really huge apps and really like CPU intensive or whatever this intensive like whatever apps. So another guy from SUTD also it's not an app. So it's kind of like a build an app to build electron apps. Like any questions? Sorry? It runs on Windows, Linux and Mac. It's a bit different because Windows got different UI So you need to call it JS? Oh yeah, Node.js and a few like platform specific stuff. There are a few things like let's say you want to create icons a bit troublesome because Mac has its own icon format with like vector icon format and then Windows has like from 16 pixel all the way to like thousands of pixels and then you have to like provide that kind of icon. Kind of troublesome for me. Oh yeah, it will end up as a like if it's Windows it will end up as a one single EXE file and then Mac will be like one single .app file and then Linux I think .deb and then you can still repackage them into installers. So they're like separate installers for you to like for people to install and then Mac will be the DMG installer thing. So you package them into like some weird zip file, DMG file and then yeah I tried that also like it's kind of complicated. It's not very like javascript site anymore it's more like native like all those desktop people like it's their world now so I have to go into their world and then like figure out how they build installers and then Windows you know there's like actually yeah yeah so you can do almost anything I guess that's the good part well the bad part is you don't have all the all the like UI components you may try like let's say let's say you use bootstrap or you use like some frameworks like those CSS frameworks thing that provides you two bars and styles right but for me I'm actually looking for for native elements native buttons so there's a lot of like resources now people actually build like they want your Mac app to look like a Mac app and your Windows app to look like a Windows app so that's kind of like nice so okay we can come back so native fire so this guy he build a command line to to wrap your web page into an like just like like this so it's kind of like the command is just like native fire and then your URL and then just like boom so he kind of like write a command line to package everything for you all the icons and all those like the troublesome stuff actually and his word is quite hard I can really understand that so he package everything so now you can just oh launch your web page into a desktop app which you can minimise you can do whatever you want anything that a desktop app can do so super simple actually there's nothing much flash support these are kind of like the extra stuff let's say your web page place flash plug in into the electron app so that's a bit troublesome and then few troublesome parts let's say your web page plays video and then it can be any videos MP4 and then all those codec stuff and then you have to embed FFM pack the whole thing into your electron app so it's kind of like troublesome a lot of like this low level stuff for me i don't really want to care about so if you do video stuff flash it's kind of troublesome already so this is a native fire i think it gave a talk like in other meetups before and talk js i think and then so anyone here plays with nwjs before or no webkit so there's a few differences but i guess the main differences the main difference would be let's say last time there's adobe air which is actually a platform that i really really like but i don't know why everyone just don't like it so because if you think about adobe air it feels like java so it's kind of like you first need a java runtime environment install your machine and then you download the java file and then you can run the java file so adobe air is exactly like that so you have to download adobe air into your platform and then you can download dot air files so it's much lighter a few hundred kilobytes but the runtime is actually a few megabytes so there's always that runtime versus your app thing and then that runtime is very big because it includes everything like chromium but for electron the whole runtime is inside your app so this is one thing people complain so even my app this simple kyoku app it's like few hundred megabytes so even though it's like a just simple menu bar app it's like hundred megabytes so people will be like whoa like this is crazy right like hundred megabytes just for simple small little app but i guess it's difficult it's always like that issue or what if your runtime got upgraded and then your app is not upgraded so adobe air probably kind of fail because of that because there's always this update and then to install adobe air app you have to install the runtime first so the user kind of like oh i have to install the runtime first like that kind of stop them from installing but i guess this one is just like install that one huge file and you're done kind of like that nwjs it's sort of like not like that it also has a built-in chromium but slightly different concept and that's pretty much it like different build system and everything actually so this guy he created a whole like resource page for electron apps so everything like apps, open source so he list all the really good apps so the differentiation like the good part about this list is he's very picky this guy is very picky so if you go to the contributing page so it's kind of like oh if you just created something at least a couple of weeks before submitting so he want to make sure that the list has like the quality instead of like quantity because in the end you end up with like thousands of apps so he's quite picky about this so which is like good and then if you submit a close source app so even electron apps can be close source in the sense that you can kind of like encrypt the source code there's also like some sort of like encryption i don't know how they do it anyway but some people manage to create close source apps with electron and then if you submit a close source apps include evidence of it being built with electron so it's kind of like nice and then open source apps should have English, readme, screenshot of the app and a binary for at least one OS so this list is pretty pretty neat so awesome electron so if you like need more resources check out this page and there's a discussion page which is I'm not very active at it because yeah and then that's it and this is like my my links if you I can share it later if you guys miss some of my slides actually I don't have slides, this is not a slide anyway yep more questions like server side i'm not sure about that to get the read out of how to do it yeah like HTTP request yeah yeah so if you want to connect it to a server most likely you can if it's built or not have some built-in packages for HTTP request you can get request yeah so this is just me assuming so there's this confusing part it's also a web page and then there's also Node.js so it's kind of like a lot let's say the main.js just now has Node.js stuff but then on the web page there's no more Node.js so it's kind of like but then at the same time you can call back to the main process like hey I need some Node.js so it's kind of like a lot of this cross cross linking kind of thing so that's a bit confusing it's javascript but different javascript yeah anything else thank you yeah