Electron JS in 100 Seconds

Build your first native desktop app (MacOS, Windows, Linux) in 100 seconds with Electron JS. fireship.io/tags/electron/
Electron Docs www.electronjs.org/
#100SecondsOfCode #Electron #JS
Install the quiz app 🤓
iOS itunes.apple.com/us/app/fires...
Android play.google.com/store/apps/de...
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font

[@Fireship]

Stayed tuned for a long-format Electron ⚡ video in a few days where we'll build & distribute a more complex desktop app. Suggestions are welcome!

[@SXCRD]

Is there something like a windows API that could be used to create an Electron app that is pretty much a launcher/shortcuts interface? That's would be cool ☺

[@elmotareal]

Can we package electron into mobile apps? No?

[@Fireship]

@@elmotareal No, but there are tools designed for this like Cordova and Capacitor (Ionic).

[@DKPstudios]

Please make sure to explain when to use Electron and when not to. For example, if it's mostly the same code (HTML, CSS, JAVAScript), what are the benefits of doing it in electron rather than straight web? Just easier access to file systems and the OS?

[@kofi.0]

Please don't only create an electron app with multiple windows. Over the last few days, the subtle "multi-page" app tormented me and I found multiple vague answers on the topic during research. Google search key "multi page electron" the first hit confirms the vagueness.

[@Qexia]

"And you can bring along your favorite frameworks" **Doesn't show React** I LOL'd

[@Fireship]

Lol, never heard of it ;)

[@danebrouwer]

@@Fireship Sick burn 😂

[@knowledgenews5343]

Why? 😂

[@Qexia]

@@Fireship A man of culture, I see. PS: Any chance you can make a video about integrating Jest and Cypress into an Angular project?

[@sudeep.g]

May be because that's a library

[@hnasr]

This is awesome! No idea how you can take a whole concept and explain it in 100s . Such craftsmanship in content creation. Unique style

[@sweatypotato248]

hello Sensei

[@ShubhamPandey-st4nn]

@@sweatypotato248 name your favourite anime

[@tks4]

Totally ironic to you, bdw i also love your videos, rather I listen to them as podcast

[@martin_93]

Love both your and Fireship video. Fireship can pack whole concept in 100s video, where you shine at explaining deep concept, without shortcuts. Particulary your videos about databases they're just awesome.

[@LooTingPro]

he does this a lot he is kinda crazy

[@himbary]

Unreal. I literally started learning Electronjs like 30min ago

[@moon_tm]

Same lmao

[@yuri2741]

LMAO I want to create my first desktop app with it

[@FilledStacks]

Jeff knows everything!

[@sporekapu]

WTF Same!!

[@MelvinAdekanye]

*That's Crazy*

[@blazefirer]

build native desktop apps using nothing but html, css, js and 400 mb rams more than it should

[@CrowJam]

you could unironically ship a 16gb ram stick to every customer who buys your electron app, just purely on savings you ll have by developing cross platform this cheaply : D

[@Daniel-dj7vc]

@@CrowJam That my friend, just made my day :D

[@aprithul]

Don't forget the input lag.

[@lolwhatever7307]

Electron is the worst abomination of JS infrastructure. Everything written on electron runs bad on old systems, this is not how desktop apps should perform.

[@dc4539]

@@lolwhatever7307 Sounds like you need a new system

[@brettgregory3622]

Love your work man! No jokes, been following you for a year and tomorrow I am releasing my first full project management platform using firebase and Angular for my company tomorrow. Cant wait to see the Electron video in the next few days!

[@Fireship]

Wow, that is awesome, would love to take a look if it's a public project 👍

[@joecodes5938]

Electron is an amazing tool. I had an internship where we made all angular applications into electron apps to be used at big conferences for marketing purposes

[@ChristopherGray00]

god i love having a chat app take up 2 gigabytes of memory... man the future of programming is grim

[@Synthetic_geth]

@@ChristopherGray00 *cough* tauri *cough*

[@qwertykeyboard5901]

Does it kick the AC on every time they open it?

[@FilledStacks]

Tuuuuuned in for the full video. Been working on a project on Flutter for desktop. I'm enjoying it quite a bit. Keen to see how electron works through your video. Thanks for the awesome video!

[@dmhendricks]

I'm excited for the full-length video! Nice work.

[@hdluktv3593]

I don't know how many times you blow my mind with your videos. I discover so many cool frameworks and other mind-blowing technology with your channel it's just unbelievable. Thanks a lot!

[@EntityPlantt]

Thanks for creating a video for my favorite app environment! It's really nice how you explained all things to motivate a person to use it. And shoutout for naming electron-packager before electron-forge

[@_tsu_]

Wow can't wait for full tutorial!! I was about to spend 8-10 horus listening to keyboard noise and static 😜

[@indrarajyadav528]

up for electron series

[@eshaan7_]

YES!

[@g-luu]

@@eshaan7_ YES!

[@codingprograms2078]

Cold......killed it . great work love your concise explanation able to grasp the concepts quickly.

[@abhishekprashant3791]

Thank you for the video! ElectronJS looks awesome. I will definitely give it a go

[@fahad.hossain]

the best as always. waiting for the full course.

[@RawandHawez]

Looking forwards for the full project.

[@NeerajGuptaIthaca]

Love it. Tells you a lot in 100 seconds.

[@rafaelgpontes]

This is so weird. I just randomly looked for electron spontaneously and you happened to make this video today! lol

[@tobeqz7065]

Ikr! This happened to me multiple times

[@pwan3971]

What a beautiful way to present!

[@jogindersingh9096]

These 100 sec videos are awesome.

[@BillFlann9]

I wanted to know what it is in a non-superficial way, and that's what I got. Thanks Much!!

[@DjCtavia]

Didn't knew Electron was about that, Im a lot more curious and aware for a tutorial now, thank's again for your content!

[@fhanjacson7289]

I love short videos likt this. Its informative, its like a movie trailer

[@ben6]

Well I was watching your `console.log(console)` video for the 3rd time this month, and found this. Thanks!

[@elweb1882]

Amazing, keep going i love all what you do

[@alwaysgrowww]

Eager to see the detailed video about electron! Suggestion: Maybe build a terminal :-) I have seen nativefier npm package... pls have some fun with it guys!

[@SXCRD]

Amazing! I didn't know this existed 😁

[@BabarAli-yb1eg]

Man do 100 minutes of this.. need it

[@Fireship]

I am considering a full course on electron if there's enough demand for it

[@GoldNugget]

@@Fireship There is, please do it in a detailed way so that someone who's never touched electron before could learn as well!

[@yt-sh]

@@Fireship there is I think...

[@someoneelse7568]

@@Fireship Do it, I subscribed for it.

[@aleksandarveselinovic5985]

​@@Fireship Subscribed also.

[@jhsloz3160]

An electron tutorial by the most well spoken content creator on youtube??? HYPE

[@robertkylethomas173]

These videos are awesome... can we maybe have mongoose in 100s?

[@aroesynth]

is that mango DB would really love that

[@aleksd286]

Uhh. I don't think Mongoose is a good topic because it's just a library used in JS to work with MongoDb, instead MongoDb itself is a good topic

[@NicolaiWeitkemper]

@@aleksd286 Maybe MongoDB + Mongoose?

[@sonictailsandsally]

Why am I only learning about this now?! This sounds pretty cool!

[@vaibhavsinghnegi76]

Bro your explanations are awesome...love from india

[@QuentinWatt]

Brilliant ☺️

[@vincejosefs]

I still remember the time when I'm creating a desktop app using JavaFX. Damn, technologies these days. It's making me feel like I'm already senile.

[@agustinlavalla8892]

Amazing framework!! More info please!!!!

[@aybak3k]

practical crash course in under 2 min!!!!!!! now that's something hell yeah i smashed da like button:)))))))

[@hussamabdallah4776]

Your reviews are awesome I'm really appreciate that

[@prasanthmanimaran7540]

You are a Godsend bro .... Thank you sooooo much ♥♥♥ from Malaysia

[@tonysmarks3578]

Looking forward!

[@will_abule]

Oh ya! bring it on 🕺🏽🕺🏽🕺🏽🕺🏽🕺🏽

[@marflage]

These videos are so awesome I do not skip the ads just so you can earn a little more :D

[@jantube358]

I like that you mentioned Svelte! I am the only Svelte developer I know IRL! :D

[@HereWasDede]

I never even heard of electron till now this is awesome thank you so much

[@Fireship]

Just doing my job!

[@codediporpal]

Holy crap, I did not realize popular desktop apps like slack and discord were using Electron JS!!! I guess I will not hesitate use it for a project I've been thinking of.

[@bksubramanyarao]

THIS VIDEO IS AWESOME !!!

[@Way_Of_The_Light]

Your videos make programming look cool!😎

[@Anto-xh5vn]

Because it always was cool 😎

[@yuri2741]

This is f.. amazing 🤩

[@nikhilgholap6243]

Keep doing it man

[@sandipbamrel2087]

please make a Vue js playlist too . You are an awesome teacher

[@LoneWolf-wp9dn]

I watch these 100s videos during commercial breaks :)

[@kingbeencent]

I looooveeee this videos!!

[@aravindkumar8145]

cool, i`m waiting for electron project

[@ahmedbh8837]

You are the best

[@AhmadHassan-ss5un]

OH yeah Thanks for the project

[@g-luu]

CAN'T WAIT.

[@sarthakbansal8652]

More 100 second versions and one full version of electron please

[@GnarMarv2]

Me about to build out a new project, "Wow i really hope Fireship has a vid on Electron" [Results Display] YES!!

[@kervondonai1579]

You're Amazing !

[@jaimerojas6578]

Well that's awesome

[@tylermaddox5105]

This absolutely rules.

[@cyberlord64]

The only thing I have against electron is the fact that you have to ship each app with the browser engine + node... I mean, why not separate the two? Why not fetch the engine if it does not exist on a system and reuse it for each app? It's like compiling java to a file which contains both the jar and the jvm...

[@DJstarrfish]

And that a code editor now takes literal gigabytes of RAM to open a single plain text file

[@dualbladedtvrecords4383]

Most people are not devs and dont have node installed on their machine. Moreover, the fact the electron in shipped with node inside (although its bloated), isolates it from the NodeJs that might be installed on the users machine. You wouldnt want your app to use a preconfigured and unknown NodeJS environment. Especially if it's configuration will cause your app to misbehave and crash.

[@circuit10]

"It's like compiling java to a file which contains both the jar and the jvm..." This is actually the most common way to do it now I think

[@dusscode]

​@@dualbladedtvrecords4383 this has been the case with Java, and it's been working well for the past 20 years.

[@khalidelgazzar]

Super. To the point.

[@jingzheshan]

Hi @fireship, really like your video and particular the those animations, just wondering what tools you are using to produce those animations, do you create those assets by yourself?

[@rhiji4583]

NativeScript in 100 seconds would be interesting, so we can finally have a single codebase for Webpages, desktop applications and mobile applications

[@developedbypy]

This so cool!

[@TechdubberStudios]

I would totally use svelte for an electron app, as Sapper did not hit version 1.0 yet, and SEO is not a concern here.

[@Fireship]

I might even use svelte in the next video...

[@j3ns]

Very cool video!

[@Xinthose]

You can do stuff like connect to serial ports too.

[@-.-_._--]

A video on development of software application roadmap would be great because i couldn't find any video explaining about building a software application (except web apps like thats the only thing that exists).

[@ZyncInteractive]

Love your videos

[@TerjeNesthus]

Just when I took a break from Angular, to learn Vue, I see this video and now I want to learn this too

[@WinningEmpire]

That's really cool actually

[@dantewhite7659]

You’re awesome dude

[@hamdyahmed5742]

This is great 👌

[@junaid.hassan]

Seems great.

[@yampolskie]

What? That's crazy, I gotta learn this. :o

[@shivammakwan6409]

That was awesome

[@justingolden21]

To start the app, add this to scripts in package.json: "scripts": { "dev": "electron main.js", Then run `npm run dev` from terminal

[@Martin-dg7it]

You make documentation look like a joke.

[@jamestill4172]

I've never seen a greater compliment.

[@Blixzful]

Going to run a project with electron (running angular ivy app) and Golang, so it will be high appreciated if you'd create a end to end project tut

[@mubafaw]

Awesome!!!!!!

[@waynevanson277]

NW JS in 100 seconds? They look similar but I'm unsure how different they may be :) Great overview on Electron

[@Fireship]

It has some benefits, but I prefer Electron over NW. Still would not rule out a future video :)

[@eric000]

thanks for covering so much in 100 sec. what tool do you use to make this video? graphics, animation etc?

[@Fireship]

Mostly Premiere, with a little Aftereffects & Figma.

[@eric000]

@@Fireship thank you for the reply. Your videos are Really hi quality . I need to do the same for presentations at work, currently I use Powerpoint which is boring. I will start with learning Figma.

[@minijames6637]

This guy is a genius like no joke 🧠

[@MercyFromOverwatch2]

Jeff is still my favourite tech KZbinr

[@koushiknaskar4751]

I want to build a electron app with react-webpack. But most of the tutorial I came accross that gives too much effort on the react front end part, and don't really leverage the fact that a full Node environment is present there. Make videos keeping this in mind. Also include the rust webassembly too.

[@StingSting844]

I'm building a chat app with reveryui which is Reasonml framework. Its really hard to make cross platform apps and I can understand why electron is winning

[@key_michael]

Can we take Electron in 100 Minutes? 🔥

[@dinkopehar982]

I've heard of Electron before, but recently ran at NodeGUI. It states that its powered by Qt5 . It's much more CPU and memory efficient than electron. Any expirience with it ?

[@abdulkerimyalcn3911]

fireship 100 seconds videos are like trying on a piece of clothing before buying it from the store to see how it looks on you.

[@-._]

Could you also do React and its different versions like React Web, React Native etc.?

[@abhishekdas2512]

Made a standalone app with electronjs and python was a really joyful experience :)

[@erniea5843]

Yes!

[@axaysushir]

Can we have short video description on STRAPI Headless cms for frontend apps like blog

[@JamieBainbridge]

It's called Electron because that's the smallest thing. People say "Gee this uses a lot of RAM, can you make is smaller?" and the answer is "No".

[@kissu_io]

Electron course please. 🙏🏻

[@raghavgoel1265]

Don't know JS much, but still this is quite fascinating. Any plans for a beginner's course?

[@HELLDOZER]

I am not a beginner but would love a refresher from fireship

[@didiercatz]

I'd recommend you really get the grips on vanilla JS first. Electron uses some quite advanced programming patterns.

[@raghavgoel1265]

@@didiercatz I was talking about JS only. Like a "JS for dummies" by fireship

[@mayorityz]

Definitely

[@nagakrushnay4254]

Super