Electron JS in 100 Seconds
ฝัง
- เผยแพร่เมื่อ 25 ก.พ. 2020
- 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 - วิทยาศาสตร์และเทคโนโลยี
![รวมเพลงลูกทุ่ง 6 หนุ่มไทบ้าน ฮิตติดกระแส ชุดที่ 1 l มนต์แคน ไมค์ ไผ่ เสถียร ไหมไทย พี [Longplay]](http://i.ytimg.com/vi/GD2v1OjMw5I/mqdefault.jpg)
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!
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 ☺
Can we package electron into mobile apps? No?
@@elmotareal No, but there are tools designed for this like Cordova and Capacitor (Ionic).
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?
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.
"And you can bring along your favorite frameworks"
**Doesn't show React**
I LOL'd
Lol, never heard of it ;)
@@Fireship Sick burn 😂
Why? 😂
@@Fireship A man of culture, I see.
PS: Any chance you can make a video about integrating Jest and Cypress into an Angular project?
May be because that's a library
This is awesome! No idea how you can take a whole concept and explain it in 100s . Such craftsmanship in content creation. Unique style
hello Sensei
@@sweatypotato248 name your favourite anime
Totally ironic to you, bdw i also love your videos, rather I listen to them as podcast
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.
he does this a lot he is kinda crazy
Unreal. I literally started learning Electronjs like 30min ago
Same lmao
LMAO I want to create my first desktop app with it
Jeff knows everything!
WTF Same!!
*That's Crazy*
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!
Wow, that is awesome, would love to take a look if it's a public project 👍
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
god i love having a chat app take up 2 gigabytes of memory... man the future of programming is grim
@@ChristopherGray00 *cough* tauri *cough*
Does it kick the AC on every time they open it?
I'm excited for the full-length video! Nice work.
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!
Wow can't wait for full tutorial!! I was about to spend 8-10 horus listening to keyboard noise and static 😜
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!
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
This is so weird. I just randomly looked for electron spontaneously and you happened to make this video today! lol
Ikr! This happened to me multiple times
Cold......killed it . great work love your concise explanation able to grasp the concepts quickly.
build native desktop apps using nothing but html, css, js and 400 mb rams more than it should
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
@@CrowJam That my friend, just made my day :D
Don't forget the input lag.
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.
@@lolwhatever7307 Sounds like you need a new system
These videos are awesome... can we maybe have mongoose in 100s?
is that mango DB would really love that
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
@@aleksd286 Maybe MongoDB + Mongoose?
up for electron series
YES!
@@eshaan7_ YES!
the best as always. waiting for the full course.
Thank you for the video! ElectronJS looks awesome. I will definitely give it a go
These 100 sec videos are awesome.
Man do 100 minutes of this.. need it
I am considering a full course on electron if there's enough demand for it
@@Fireship There is, please do it in a detailed way so that someone who's never touched electron before could learn as well!
@@Fireship there is I think...
@@Fireship Do it, I subscribed for it.
@@Fireship Subscribed also.
What a beautiful way to present!
I love short videos likt this. Its informative, its like a movie trailer
Love it. Tells you a lot in 100 seconds.
Looking forwards for the full project.
Amazing, keep going i love all what you do
Why am I only learning about this now?! This sounds pretty cool!
Amazing! I didn't know this existed 😁
Didn't knew Electron was about that, Im a lot more curious and aware for a tutorial now, thank's again for your content!
An electron tutorial by the most well spoken content creator on youtube??? HYPE
Well I was watching your `console.log(console)` video for the 3rd time this month, and found this. Thanks!
Brilliant ☺️
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.
I wanted to know what it is in a non-superficial way, and that's what I got. Thanks Much!!
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?
Your reviews are awesome I'm really appreciate that
I never even heard of electron till now this is awesome thank you so much
Just doing my job!
Great video, thanks!
Bro your explanations are awesome...love from india
These videos are so awesome I do not skip the ads just so you can earn a little more :D
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!
Amazing framework!! More info please!!!!
practical crash course in under 2 min!!!!!!! now that's something hell yeah i smashed da like button:)))))))
Oh ya! bring it on 🕺🏽🕺🏽🕺🏽🕺🏽🕺🏽
I watch these 100s videos during commercial breaks :)
You are a Godsend bro .... Thank you sooooo much ♥♥♥ from Malaysia
Your videos make programming look cool!😎
Because it always was cool 😎
I looooveeee this videos!!
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...
And that a code editor now takes literal gigabytes of RAM to open a single plain text file
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.
"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
@@dualbladedtvrecords4383 this has been the case with Java, and it's been working well for the past 20 years.
please make a Vue js playlist too . You are an awesome teacher
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 ?
cool, i`m waiting for electron project
I like that you mentioned Svelte! I am the only Svelte developer I know IRL! :D
THIS VIDEO IS AWESOME !!!
More 100 second versions and one full version of electron please
Me about to build out a new project,
"Wow i really hope Fireship has a vid on Electron"
[Results Display]
YES!!
This is f.. amazing 🤩
NativeScript in 100 seconds would be interesting, so we can finally have a single codebase for Webpages, desktop applications and mobile applications
Very cool video!
Love your videos
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.
Keep doing it man
Looking forward!
Just when I took a break from Angular, to learn Vue, I see this video and now I want to learn this too
Super. To the point.
Well that's awesome
This so cool!
This absolutely rules.
Very good work.
This is great 👌
What? That's crazy, I gotta learn this. :o
You are the best
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.
I might even use svelte in the next video...
You can do stuff like connect to serial ports too.
That's really cool actually
Can we have short video description on STRAPI Headless cms for frontend apps like blog
You're Amazing !
Could you also do React and its different versions like React Web, React Native etc.?
OH yeah Thanks for the project
You’re awesome dude
That was awesome
thanks for covering so much in 100 sec. what tool do you use to make this video? graphics, animation etc?
Mostly Premiere, with a little Aftereffects & Figma.
@@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.
Seems great.
CAN'T WAIT.
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
Is the compiled code closed source or anyone can see our code from compiled setup?
Jeff is still my favourite tech TH-camr
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).
Awesome!!!!!!
Is it possible to test electron based desktop application using Robot framework. How ?
Didn't expect to get Rick Rolled like that lmao
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.
NW JS in 100 seconds? They look similar but I'm unsure how different they may be :)
Great overview on Electron
It has some benefits, but I prefer Electron over NW. Still would not rule out a future video :)
Don't know JS much, but still this is quite fascinating. Any plans for a beginner's course?
I am not a beginner but would love a refresher from fireship
I'd recommend you really get the grips on vanilla JS first. Electron uses some quite advanced programming patterns.
@@didiercatz I was talking about JS only. Like a "JS for dummies" by fireship
This guy is a genius like no joke 🧠
You make documentation look like a joke.
I've never seen a greater compliment.
Hi! I have enjoyed the video, and decided to test electron out. Although when I tried downloading it-, I have faced the following error:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@12.0.1 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron@12.0.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I'd appreciate any help regarding it! :D
Pls i want to purchase the App but its not working why, is there any other way to purchase the app?
Made a standalone app with electronjs and python was a really joyful experience :)
What's the difference between node-webkit and electron. They both looked the same.
0:36
excuse an idiot but its late and i cant find out where to run this. wtffff i caant
I'm running it in the vs code terminal and it doesn't recognize it as an internal or external command
god help me
also i downloaded electron master files whatever its called at the link in description
please someone help me