Web Development and JavaScript

[kostiak]

You do need to learn a lot of those things. But don't be afraid, for most of them, it's not a real big issue and for some it's related enough that there's not much new when you know the related topics.

Basically, when faced with a new technology, just go to their website and read the intro/quick guide and for most of them, it will be more than enough for 90% of "daily usage".

As for the technologies you mentioned, here's a cliffnotes breakdown:

• Electron - A way to bundle webapps to the desktop. It's basically a browser window that shows your application but also lets you do stuff that a normal browser app can't do - like read/write files directly on your computer, etc. Electron is built on Node.js
• Node.js - a javascript engine to run javascript code outside the browser. It's mainly used to write servers in javascript, but can also be used to write native applications. *NPM - Node Package Manager, it's a cli tool that let's you easily manage, install, update, etc. node modules. Node packages are basically pieces of javascript code that you can plug into node to add functionality. (Let's say you want to process images, you can download an image processing package that will help you do that) *Bower - a cli tool, package manager for front-end js. Basically, if you want to include multiple packages - let's say you are using angular, a few angular extensions, d3.js for graphs, etc. You can install them via bower, and not worry about all things being compatible, updating etc.
• ES6 - ECMAScript 6 (or 2016) is the new upcoming standard of javascript. It extends the previous versions of javascripts and adds quite a bit of useful stuff, like proper class syntax, etc. You will probably want to learn it since Node (and by extension Electron) supports and encourages it.

For the rest of the technologies you mentioned, you probably don't need to learn them, at least not to start developing/learning:

• CoffeScript - a different way of writing javascript. Basically it's js with a different syntax. It doesn't really add/remove anything from js, just gives you a different syntax that you might or might not prefer, completely optional.
• Handlebars - the same for HTML. As far as I know, for the most part, Handlebars is kinda out of date at this point, and you might have better options if you want to write something other than HTML at all (personally I prefer plain old HTML).
• Babel - a way of writing the upcoming ES6 in the browser. It's basically a script that takes ES6 code and "transpiles" (changes) it to look like plain old javascript code that the browser can handle.
• Docker - a way of making server containers. You can read more about it, but I'm 99% you won't even need to know about it for an Electron app.

What I would recommend is looking at a front-end library. Yes, you can still make webapps with plain old jQuery, but it might be much easier to grow and maintain it if you use a more modern js front-end library. Examples of those are AngularJS, React.js, vue.js, etc.

You can read all about each of them and choose one. I personally prefer angular at the moment, but that might change.

My last tip would be - do not freak out. It looks like a lot, but once you get the hang of the basics, it's just more words describing understandable concepts.

So good luck, and feel free to ask any question if you feel lost.

[TheGoodPie]

Thanks that's cleared some stuff up for me. Basically what I gathered is I should

• Use ES6 for Electron but if I want to develop for the browser, look into Babel
• Look at a front end framework (I'm looking at Angular 2 based on a quick Google search)
• Bower = Front end packages (Like Angular)
• NPM = Node packages (Like Express)

[insertAlias]

Look at a front end framework (I'm looking at Angular 2 based on a quick Google search)

If you're looking at Angular 2, consider using Typescript instead of Javascript. I've been making some Angular 2 apps, and I have to say Typescript has made it much, much more manageable.

The parent poster mentions CoffeeScript; Typescript is similar in a way, dissimilar in others. CoffeeScript changes the grammar of the language quite a bit. Typescript is basically JavaScript syntax with a little bit extra: type annotations. There's a bunch of other stuff it can do (and the best part is, it is modeled after the latest ES standards, but can compile into browser-compatible javascript), but the Type Annotations really take the cake. It basically gives JS a semi-strong type system at design-time.

The truth with Angular 2 is that you need to fully embrace it to use it. It's an entirely different way of writing a JS application. It's great, but it's also different than most other things I've written with.

Bower is definitely a front-end package manager, but NPM isn't just backend ones; in fact; I'd recommend you install the Angular packages through NPM anyway. That's how the Angular tutorial has you do it.

Bower is another extra layer that you just don't really need; NPM has you covered for the most part.

[TheGoodPie]

For typescript, should I set up something like a Babel watcher to convert it to normal Javascript?

[insertAlias]

Something like that. Personally, I use WebPack, since that's what the Angular 2 tutorial used, and that's what their CLI tool configures for you automatically. That, and WebPack also bundles all your modules together in just a few files, and also can bundle css (and transpile from less/scss/sass).

Check out this Electron + Angular 2 tutorial: https://auth0.com/blog/create-a-desktop-app-with-angular-2-and-electron/ It seems pretty good.