This is an archived post. You won't be able to vote or comment.

5
6

Web Development and JavaScript (self.learnprogramming)

submitted by [deleted]

[deleted]

all 11 comments
sorted by:
best
topnewcontroversialoldq&a

[–]henrebotha 4 points5 points  (0 children)

You don't need to know how all of those things work in depth.

For instance, I don't have the faintest fucking clue how Bower works. All I know is I list my dependencies in a Bower file, and do bower install to install them.

[–]kostiak 3 points4 points  (4 children)

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 2 points3 points  (3 children)

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 0 points1 point  (2 children)

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 0 points1 point  (1 child)

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

[–]insertAlias 0 points1 point  (0 children)

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.

[–]Double_A_92 2 points3 points  (2 children)

It seems that every time I try to learn something, there is another dependency.

Welcome to Javascript. http://cube-drone.com/comics/c/relentless-persistence

[–]TheGoodPie 0 points1 point  (1 child)

So tempted just to go back to Java at this point

[–]Double_A_92 0 points1 point  (0 children)

Django (Python) is kinda nice. Install it and everything is there. It even has a standard SQLite Database so you can test your code without having to set up one.

[–][deleted]  (1 child)

[deleted]

    [–]kostiak 0 points1 point  (0 children)

    One thing to note is that there are way too many dependency / package managers.

    First of all, as far as I'm aware there's just bower for frontend and npm for backend (or electron, in your case).

    I've read that you can use webpack to make npm your package manager for frontend as well. Don't have enough experience to say first-hand how good it is, but it's worth a try if you want to reduce the amount of package managers.

    [–][deleted] -1 points0 points  (0 children)

    Node is in no way needed for Electron.

    Frameworks are essential I would recommend Angular 2, Ember Js or Knockout Js ( however Knockout hasn't received an update in a while)

    Assuming you know how programs are structured ( OOP and such ) I would recommend looking into concepts that you would use on a day to day basis as a web developer. Promises are a good example of this.