Create a Desktop App With JavaScript & Electron

Поділитися
Вставка
  • Опубліковано 18 жов 2024

КОМЕНТАРІ • 261

  • @georgebatsiashvili4160
    @georgebatsiashvili4160 Рік тому +161

    Was 2017 when i first started learning programming and this channel was first in my list. After 5 years in my career as senior dev still coming back to this to learn new stuff. thank u so much ^^

    • @outsomnia
      @outsomnia Рік тому

      mec daaxloebit mag dros daviwye swavla ;d

    • @jfimedia2638
      @jfimedia2638 11 місяців тому

      a familiar situation :)

    • @Alien-cr1zb
      @Alien-cr1zb 8 місяців тому

      Any advice second year cs and i feel lost

    • @vaillant_media
      @vaillant_media 2 місяці тому

      Me too! Brad is one of the most inspiring people in this world!

    • @jaosafado132ronaldo7
      @jaosafado132ronaldo7 Місяць тому

      senior in only 5 years? i graduated this year and im junior only. congrats!!

  • @davidemiozzi8589
    @davidemiozzi8589 Рік тому +34

    spent a whole day trying to get things going, came here, and now everything is illuminated. Hands down the best programming tutorials around!

  • @zachjensz
    @zachjensz 2 роки тому +366

    Finally I can use all my RAM

    • @akshaypendyala
      @akshaypendyala 2 роки тому +10

      😂

    • @alirmaity1570
      @alirmaity1570 2 роки тому +3

      Hahahahahaha

    • @web3media843
      @web3media843 2 роки тому +4

      nice one hhhh

    • @andriyabu
      @andriyabu 2 роки тому +6

      Cool 😎 just watch if any smoke coming ou

    • @agussatria7138
      @agussatria7138 2 роки тому +5

      hhahaha, all tools that are forced to cross platform always end up badly in terms of memory resources. I used to try cordova just made a simple to-do-list app, I ran it on my phone and my phone got hot in just 5 minutes lol

  • @nanohedron
    @nanohedron 2 роки тому +9

    Thanks Brad. I don't think I'll ever be able to repay you for all the great training.

  • @mmvarma.p
    @mmvarma.p 2 роки тому +4

    Dude, I am literally checking for latest Electron tutorial. Many people comment about this, but never thought it will happen to me. Anyway thanks buddy.

  • @bobmonsour
    @bobmonsour 7 місяців тому +1

    I went through this slowly and carefully...took several hours so that I could digest things...especially the ipc stuff. It makes a lot more sense now. I do hope you'll update your udemy course on this some day. That said, I know enough to be dangerous now and I really like what can be done with Electron. Thanks!

  • @amirnoorani5017
    @amirnoorani5017 2 роки тому +3

    This week I was working on Electron and suddenly I saw your video notification on my phone. As always thank you Traversy

  • @kaxabekov1627
    @kaxabekov1627 7 місяців тому +1

    Best tutor for programming on UA-cam!!!

  • @jeroen.herczeg
    @jeroen.herczeg 5 місяців тому

    Thank you for the tutorial!
    I like that you focus on electron and not on adding a front-end framework in the mix.
    It made the way you explained the main process, renderer and IPC communication very clear!

  • @qwerty74
    @qwerty74 2 роки тому +5

    Absolutely perfect timing. I wanted to do something very close to this.

  • @alexpiano
    @alexpiano 2 роки тому +5

    Thanks for this one, I have never tried electronjs, it was something I was kinda avoiding but I find it super interesting. And also it refreshes a lot the knowledge of node usage. Don't hesitate to make more ;)
    All the best from Barcelona

  • @subiebugeye02
    @subiebugeye02 2 роки тому +10

    @traversymedia
    Brad, I’ve lurked on UA-cam and other sites for a while as I am trying to learn JavaScript for a upcoming Bootcamp and I’ve been stressing because I keep getting stuck in trying one resource and moving to the next as it feels too slow. I watched some of your JavaScript UA-cam videos and am completely impressed with how you structure the learning topic and your tone that you teach in. You make beginners feel welcomed and hopeful. I just purchased two of your courses on Udemy and want to thank you for the top tier content and hope you are getting enough support to continue producing such high quality material. Please, if you don’t do it already, start a podcast man. I, among many others, would love to dive into that content with you. Cheers my friend!

    • @idkcoder
      @idkcoder 2 роки тому

      Bobo just use Udemy

    • @subiebugeye02
      @subiebugeye02 2 роки тому

      @@idkcoder what?

    • @Oliver_twist00
      @Oliver_twist00 Рік тому

      @@subiebugeye02 if you want to program web apps learn c+ javascript is mainely for web apps and web pages, this stuff is really for advanced users in javascript to be able to code desktop apps without learning new languages

  • @TheMvarnell
    @TheMvarnell 9 місяців тому

    Excellent work explaining this. I got a lot out of seeing how it all worked, and coding along. Really appreciate the time you took to make it!

  • @iamcasted
    @iamcasted 2 роки тому +2

    this is really what i was searching information for atleast a month now, thank you

    • @Gigusx
      @Gigusx 2 роки тому +1

      Electron? Remember that Brad has a full course on the topic. Another amazing instructor that made a course on Electron is Stephen Grider!

    • @iamcasted
      @iamcasted 2 роки тому

      @@Gigusx Thank you🥺

  • @abhishekpratap05
    @abhishekpratap05 2 роки тому +3

    Today i made a screen recorder using electron, I wish this video would have come a few days earlier. Would have saved a lot of time.

    • @overboostoverboost2541
      @overboostoverboost2541 2 роки тому +1

      May I ask you to share the code with me for education purposes? Just curious :)

    • @abhishekpratap05
      @abhishekpratap05 2 роки тому

      @@overboostoverboost2541 i tried sending 7 msgs and all got deleted

  • @karlkrasnowsky1393
    @karlkrasnowsky1393 4 місяці тому

    Hey, thanks for the vid... always fun working with your tutorials...
    Something that threw me ... when setting the values on the width and height fields of the selected image form, the values were invisible (I thought it was failing) but turned out the text color was opaque for some reason, so setting style color to black to both inputs "fixed" it. May go back and determine the source of the problem and do a more systemic adjustment later, but love your teaching style. No BS and fundamental.

  • @MRAMetharam
    @MRAMetharam 2 роки тому +3

    Another great video! Thanx!!!
    For those interested, to get rid of the menu on the About window...
    abountWin.setMenu(null);

  • @reidainutilidade8743
    @reidainutilidade8743 Рік тому

    Thank you for this video. I watch from begin to end, and I was not have any problem during development.

  • @Flamewheel2001
    @Flamewheel2001 Рік тому

    I just finished your react udemy course and then i was researching a a problem i wanted to solve and this youtube video was exactly concept i was looking for

  • @Konslufius
    @Konslufius 2 місяці тому

    One of those products that aged like the finest milk in terms of tutorials. I'm glad that this one is still relevant

  • @Arabian_Abomination
    @Arabian_Abomination 2 роки тому +12

    Html/css/js can be used now to build pretty much any software, server side, front end, even mobile apps and of course desktop apps with electron. No other stack can compete hence why JS is the #1 programming language :)

    • @emreaka3965
      @emreaka3965 2 роки тому +2

      you can do that with c# which is faster and obviously a better choice to develop such applications except for web applications.Right now, You can develop cross-platform (web, macOS, windows, ios, android...) applications with html, css, c#. 😉

    • @nonametrackz7887
      @nonametrackz7887 11 місяців тому

      @@emreaka3965 with electron or do i need to use webview?

    • @inthenameofallah12
      @inthenameofallah12 Місяць тому

      And when it comes to games☠️🗿

  • @dryoldcrabman6890
    @dryoldcrabman6890 11 місяців тому +1

    This was super useful! Thank you so much! What would be super helpful is showing how to set up a webpack in the renderer. And show how to set up a framework in the rednerer.

  • @kerrykreiter445
    @kerrykreiter445 Рік тому +2

    One of if not the best Electron videos on UA-cam. Nice job Brad!

  • @sahilverma_dev
    @sahilverma_dev 2 роки тому

    I was planning to learn electorn and then you dropped this video. Thanks man

  • @paulthomas1052
    @paulthomas1052 2 роки тому +3

    Great session, Very useful and informative at a great pace. Thanks.

  • @muhammadidrees6650
    @muhammadidrees6650 2 роки тому +12

    We need one project with Advance Angular please 😊, stay blessed Brad 🎉

  • @am1nuhassan
    @am1nuhassan Рік тому

    The best Electron tutorial on youtube 🙌🙌

  • @MedyZeus
    @MedyZeus Рік тому

    Never regret the day I subscribed to your channel dude.. thanks for the video

  • @destinlee
    @destinlee 2 роки тому

    Good times. Thanks as always Brad. Much love ☮

  • @charbelsarkis3567
    @charbelsarkis3567 2 роки тому

    Something I've been waiting for. There were so many updates to electron

  • @seunolugbemi6394
    @seunolugbemi6394 4 місяці тому

    Great tutorial. You're a very good teacher sir!

  • @javascriptes
    @javascriptes 2 роки тому +6

    Another classic, I also want to say that there is nothing like development with bare js and nodejs :)

    • @pupfriend
      @pupfriend 2 роки тому

      like raw-dogging in a whorehouse.

  • @learninternetwithkelly8338
    @learninternetwithkelly8338 2 роки тому +1

    He is here again. Thanks Brad!

  • @PROTOTYPZ
    @PROTOTYPZ Рік тому

    Thank you very much for a clear tutorial. I was pulling my hairs out looking for a solid tutorial.

  • @LarryMarkel
    @LarryMarkel Рік тому

    Great video. Taught me a lot. Felt like Bill Burr was teaching me with your accent!

  • @rommelpetilo
    @rommelpetilo 2 роки тому

    thank you Brad for this updated tutorial on electron!

  • @itamarribeiro8865
    @itamarribeiro8865 2 роки тому

    I will save it on my list so I can follow it later,
    Tks Brad

  • @spacexnix
    @spacexnix 8 місяців тому

    It's amazing. Thank you for a good experience for a newbie

  • @christian-schubert
    @christian-schubert 2 роки тому +4

    REALLY interesting video, thanks for that Brad! Don't know what I would give for a course on a Vanilla HTML/Javascript/CSS to Native Mobile App conversion [maybe using Cordova?]. The discontinuation of PhoneGap has left a huge gap in that respect (yes, I am WELL aware of its drawbacks, but I'm obviously NOT talking about creating one million plus downloads gaming apps here)

    • @erasmusmensah
      @erasmusmensah 2 роки тому

      Try PWA

    • @christian-schubert
      @christian-schubert 2 роки тому

      @@erasmusmensah Wish it were that simple. Most of the time, it's really a matter of prestige - there are clients out there who INSIST on a native app where a PWA would totally suffice

  • @sumitsarkarbusiness
    @sumitsarkarbusiness Рік тому

    This is the best tutorial I could find ... thank you :-)

  • @erasmusmensah
    @erasmusmensah 2 роки тому

    This content should be made a playlist

  • @chetanjain4616
    @chetanjain4616 2 роки тому +10

    Great course as always Brad... But personally I am waiting for Tauri Crash Course, they have an amazing framework and I really want to give it a try

    • @AbhishekBM
      @AbhishekBM 2 роки тому +1

      Check other channels. Brad is a web developer. It's unlikely he'll do a tutorial on a rust based framework

    • @chetanjain4616
      @chetanjain4616 2 роки тому +2

      @@AbhishekBM Why not? He has done a tutorial on Rust and this is a tutorial on desktop application... I guess it depends on him but it wouldn't be new to his ecosystem

    • @mykus1000
      @mykus1000 2 роки тому

      me too

  • @somethingcoolgoeshere
    @somethingcoolgoeshere Рік тому +1

    Super cool video!
    Trying to learn how electron works so I can make my own Music player app

    • @darshanpagar1894
      @darshanpagar1894 Рік тому

      I am planning to make my own video player. Can you drop your github link

  • @timothybaker8922
    @timothybaker8922 2 місяці тому

    No up to date udemy courses for electron. Can't wait for yours

  • @kennedychidi7012
    @kennedychidi7012 2 роки тому +2

    I'm done just watching, is time I follow up and start building... I'll be back to testify.

  • @bennyakaz
    @bennyakaz 2 роки тому

    Ive been waiting for this. THANKS BRO

  • @zulfikarbandhan2783
    @zulfikarbandhan2783 2 роки тому +4

    Could you please make a video on "Create a Desktop App with JavaScript & Tauri"? Thanks Brad for all the good works.

  • @ankitabannore8014
    @ankitabannore8014 9 місяців тому +1

    Thanks for this one!
    I am creating one desktop application using electron now I want to connect it to the database. Can you tell me anything that I need to do?

  • @mrbuslov
    @mrbuslov Рік тому

    Extremely awesome video, it's better, than docs. Thanks!

  • @repotranstech9614
    @repotranstech9614 2 роки тому +2

    Cool project,we also need an update on progressive web application.Its good for cross platform.

  • @rpaengineer5114
    @rpaengineer5114 2 роки тому +1

    Great tuto Mr brad 🔥🔥
    Hope to make project based on TAURI framework 🙏🙏🙏

  • @dr.margulis7773
    @dr.margulis7773 2 роки тому

    Awesome, Brad! 👏👏👏👍

  • @thiagot7706
    @thiagot7706 Рік тому

    I learned so much! Thank you

  • @rockNbrain
    @rockNbrain Рік тому

    Great job dude !

  • @sixtusushahemba9419
    @sixtusushahemba9419 2 роки тому

    Thanks for the course, it's very informative and helpful.

  • @natreextv8516
    @natreextv8516 Рік тому

    Thanks A LOT! Very helpfull video!

  • @nicolas____
    @nicolas____ Місяць тому

    really good video, thank you

  • @Rlifshitz19
    @Rlifshitz19 2 роки тому +1

    Can you do a video on building a UA-cam to MP3 Converter? All the ones online are sketchy. It would be awesome if we could build our own. Love the video!

    • @selfmaster1123
      @selfmaster1123 2 роки тому

      that would be amazing and helpful tool

  • @jesterlw
    @jesterlw Рік тому

    Awesome tutorial thank you very much

  • @indianolaguitarman
    @indianolaguitarman Рік тому +2

    What steps must developers creating desktop apps with Electron use to make those accessible to screen reader software that blind folks use? Came across something recently to configure a device for recording wildlife and if it was a web page, could benefit from labels for text edit fields, radio buttons and checkboxes. But with electron, what is the best practice so that the app is then screen reader accessible?

  • @karlkrasnowsky1393
    @karlkrasnowsky1393 4 місяці тому

    making the height and width fields required on the form elements will forgo the need to check in the submit if they have values. Just saying.

  • @KulturanCov
    @KulturanCov 3 місяці тому

    Great video! What is your VS Code Color Theme? :D Looks like GitHub Darker, but the outlines are less prominent with your theme.

  • @savimcgee7443
    @savimcgee7443 Рік тому

    Always excellent.

  • @glatocha
    @glatocha 2 роки тому

    ahh, so much needed as those security changes in electron made many many tutorials not suitable

  • @rivgadeextras
    @rivgadeextras Рік тому

    I love this guy fr

  • @jagadeeshkj5561
    @jagadeeshkj5561 2 роки тому +1

    Cool background.

  • @justfun591
    @justfun591 2 роки тому +6

    Electron JS uses chromium to render HTML CSS JavaScript so even if you only have a simple h1 tag it will be more than 100MB in size

    • @imbayi
      @imbayi 2 роки тому +4

      How is this an issue in 2022? Developers like making a mountain out of a molehill. Today average computer users are just doing fine with PCs and Macs with 256GB of storage. We are no longer storing photos, music and movie files on our computers to worry so much about storage. This is the same argument most developers make against certain technologies arguing that technology X cannot support millions of users yet in the entire life they'll never build a product or service for millions of users. Every dev out there argues as if he is building the next Facebook.

    • @justfun591
      @justfun591 2 роки тому +4

      @@imbayi Sir.... but if I just want a simple image resizer, for this, I am asked to download 100MBs software then I would definitely think that there should be some malware/spyware/resource consumer program also running with that software

  • @joelnjoroge7202
    @joelnjoroge7202 24 дні тому

    Thanks a lot Traversy. I had a lot of trouble though getting the file-path from my renderer.js file. It was simply not available at files[0].path. So I had to send a unit8Array to main.js

    • @googlengineer
      @googlengineer 11 днів тому +1

      same error. there are two possible solution: 1.install electron js 20 version 2. read the electron current version(32) doc - it is helpful

  • @haythamaldamen3578
    @haythamaldamen3578 2 роки тому +3

    Thank you for your work did you consider Neutralinojs as much smaller and much faster than electron because it uses chrome library

  • @collinsk8754
    @collinsk8754 10 місяців тому

    Excellent! 👍👍

  • @sunitjoshi3573
    @sunitjoshi3573 6 днів тому +1

    Is the updated course on Udemy available now?

  • @BSenta
    @BSenta Рік тому

    It doesn't make sense to worry about memory leaks when your application closes. Even in C++ if you have forgot to free stuff in the heap when the whole application ends all of the memory will be claimed back by the OS. It doesn't make sense to set that window to null when your closing your app. Unless electron apps don't 'close' and just run in the background like chrome does even when you close all the windows - which would be stupid if it did this

  • @aogunnaike
    @aogunnaike 2 роки тому

    Thanks for this 😌

  • @danielvega646
    @danielvega646 Рік тому

    How is your VS code theme called? Looks neato! And thanks a lot for the tutorial, helped me a lot to become familiar with Electron development.

  • @janzenfaidiban
    @janzenfaidiban 2 роки тому

    Thank you Brad...

  • @yanaytsabary8297
    @yanaytsabary8297 Рік тому +1

    Love your videos and thanks for sharing your knowledge. Will your updated Udemy course include working with React? I find that there's a big gap there as someone who's coming from React and trying to figure out how to use that With Electron. Also, when is it due to be updated?

  • @KulturanCov
    @KulturanCov 3 місяці тому +2

    Hi. Is the udemy update ready?

  • @SandeepSingh-ye5fh
    @SandeepSingh-ye5fh 2 роки тому

    Thanks Brad

  • @burd1129
    @burd1129 2 роки тому +1

    Great Video!

  • @SlipperyBrick89
    @SlipperyBrick89 Рік тому

    I never thought that Mark Wahlberg would be teaching me Electron

  • @BukkyOdunsi
    @BukkyOdunsi Рік тому

    UA-cam needs to add a feature to clip favorite channels and videos

  • @flave11
    @flave11 2 роки тому

    Thank you for this video toaay

  • @antoniusaguswijaya9341
    @antoniusaguswijaya9341 2 роки тому

    man. Thank you!

  • @muadzrosli
    @muadzrosli 2 роки тому

    Hi Brad. I was wondering, how do you get the css file used in this electron app? Since it is Tailwind css, did you design elsewhere and treeshaking the classes first or that is full css in Tailwind?

  • @johnsunday3548
    @johnsunday3548 Рік тому

    Great stuff mentor...pls do same with react js if possible with a DB...thnks...

  • @karlkrasnowsky1393
    @karlkrasnowsky1393 4 місяці тому

    Oh, and early implementation of the "about" window is generating a new instance of every selection. If not addressed in later in this tutorial, and easy way to prevent this?

  • @ibrahimsfofanah6215
    @ibrahimsfofanah6215 2 роки тому

    Thank you 🙏

  • @valenciawalker6498
    @valenciawalker6498 5 місяців тому

    Thank you

  • @wadhajable
    @wadhajable 2 роки тому

    Thanks sir
    In this app Can I use RPC (remote procedure call) as in web apps

  • @lateeagle1
    @lateeagle1 Рік тому

    npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
    At line:1 char:1
    + npm init
    + ~~~
    + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

  • @mamupelu565
    @mamupelu565 2 роки тому

    Is it still worth it learning angular now? I want to get in the IT market asap, Ive been 3 years as a trainee but doing support stuff

  • @John223
    @John223 2 роки тому

    I don't mean to disrespect, but why are we still using electron in the holy year of 2022? There are plenty more options that use simple html, css and js and are easy to learn and easier to run performance wise. I would personally promote NW.js and Tauri more then Electron. You don't have a Tauri course and the NW.js one is 2 years old. Keep it up though, you were one of the first channels I watched when I started learning to program and I appreciate your help.

  • @abhisekdas9976
    @abhisekdas9976 2 роки тому +1

    Please make a video on Tauri App which is an electron replacer.

  • @Imaginativeone_DF
    @Imaginativeone_DF Рік тому

    When will the course-update be available?

  • @anserwaseem3362
    @anserwaseem3362 2 роки тому +1

    How to use SQL with electron? I'm trying to connect Sqlite but alas! Please shed some light on it

  • @poetslayer
    @poetslayer Рік тому

    Thx a lot

  • @安全保密
    @安全保密 Рік тому

    thank you

  • @SodiqOlaniyi
    @SodiqOlaniyi 2 роки тому

    I was thinking of searching this then this video popped up 🤣

  • @narutosingh5239
    @narutosingh5239 2 роки тому

    Year 2000:
    -You had HTA which were HTML container with full system access. Ran HTML+ VB Script
    -VB6 - desktop application development IDE which produces native code, can do what the system is capable of.
    2022: lets make desktop apps using Javascript and it will consume only 1GB of memory.

  • @etanheyman5009
    @etanheyman5009 2 роки тому

    Hey I just started working on a react electron app with typescript, but I'm having difficulty finding a guide/way to do it properly, would you be able to show a way for that?
    tried using a boilerplate but having problems connecting to the nodejs server.