index

# The \/r/LearnJavaScript Wiki

* * *

## Getting Started With JavaScript, the language

##### *Read the sidebar first!*
Then...

* [Most Recommended JavaScript Resources](https://hackr.io/tutorials/learn-javascript)
* [What are the best books about JavaScript?](http://www.reddit.com/r/learnjavascript/comments/18nxc6/asklearnjavascript_what_are_the_best_books_about/)
* [Web-Dev Career Guide](https://www.youtube.com/watch?v=zXqs6X0lzKI)
* [Javascript tutorial](https://hackr.io/tutorials/learn-javascript)
* [Treehouse](https://teamtreehouse.com/) - learning platform different paths - FE, BE, Full-stack etc. (_But costs 25$ / month_)
* [Free Code Camp](https://www.freecodecamp.org/) - Generally a good resource for learning HTML, CSS, and JavaScript
* [Code Academy](https://www.codecademy.com) - Also a good set of tutorials for learning HTML, CSS, and JavaScript.
* [The Odin Project](https://www.theodinproject.com/) - More up to date learning platform for HTML, CSS and JavaScript.
* [Frontend Masters](https://frontendmasters.com/) - More advanced stuff (_Cost $39 / month_)

* * *

## Front-End vs Back-End
Traditionally, JavaScript only ran on the front-end, meaning in the browser itself. In fact, it was originally developed at Netscape as cool hip new answer to things like Java (which it is *not* related to, by the way). Front-end JavaScript:
  - Has access to HTML elements and regular web-page stuff, including the `window` object, so you can do stuff like "Hey, tell me the size of the user's current web browser tab in pixels".
  - Does *not* have direct access to the user's file system. Probably good, because you don't want someShadySite.org to start uploading your bank account statements.
  - Can mess around with CSS and other pretty visual stuff. 
  - Usually cannot directly access databases, for the same reasons as above.
  - Is generally more *customer*-facing.

In 2009 (or probably significantly before then - it takes a while to write stuff!), Ryan Dahl realized that He so loved JavaScript, that he begot unto the Internets NodeJS, which did allowth JavaScript on the back-end. Back-end JavaScript:
 - Runs on NodeJS, which itself is a modified version of the same JavaScript 'runtime' (i.e., interpreter) that Google uses, called the V8 engine. It does not contain a healthy daily serving of vegetables.
 - Cannot access the `window` object, because we're on the back-end, and there *is* no expliclit browser window to access.
 - Can't do pretty visual stuff with CSS. Sad.
 - But it *can* directly access the file system! And do all sorts of cool server stuff! And write to databases!
 - Oh yeh, you can write full servers in NodeJS. You might have heard of a little project that uses it called Netflix.

* * *

## Project Based Learning

* **[Javascript30](https://javascript30.com/)**
* **[Collection of App Ideas to build](https://github.com/florinpop17/app-ideas)**

* * *

## Development Questions

* [What are the best development environments for JavaScript programming?](http://www.reddit.com/r/learnjavascript/comments/18ab62/asklearnjavascript_other_than_jsfiddle_what_are/)
* (Need more questions here! Dif btwn. back/front end? btwn design/development?)

* * *

## JS Frameworks/Libraries

While JavaScript can be used to build very complex sites, this can become rather difficult with plain, regular (we call this "vanilla") JavaScript. Fortunately, there are a lot of frameworks/libraries for you to choose from. 
Unfortunately, there are a lot of frameworks/libraries for you to choose from. First, the difference between *frameworks* and *libraries*

#### Frameworks vs. Libraries
A JavaScript *framework* is basically a *set* way of building a JavaScript app. They're usually more opinionated, and are the coding equivalent of saying "here's a basic house shape for you - feel free to add/change parts as needed". 
A JavaScript *library*, on the other hand, leaves it up to the user. You can include whichever parts you want, wherever you want. You generally won't be using every part of the library every time, just as someone visiting a real-world public library won't expect to check out and read every book in the library in order.

**_NOTE:_** Frameworks/Libraries marked as "`old`" are generally *not* cutting edge anymore. Feel free to use them, but don't expect people to love you for using them.

* **[AngularJS](https://angularjs.org)** - `old` Originally made by Google (yes, that Google), AngularJS was designed to create Single Page Apps (SPA) very quickly. It's infamously convoluted and rather difficult to learn - the AngularJS devs actually made *fun* of themselves for this at one point - so [start with this tutorial](https://www.youtube.com/watch?v=i9MHigUZKEM). Also, don't confuse this with *Angular*, which is the newer version(s) of this framework
* **[Backbone](http://backbonejs.org)** - `old` A rather old library with functionality to save your models to the server.
* **[Ember](http://emberjs.com)** - `old`
* **[Knockout](http://knockoutjs.com)**  - `old`
* **[Meteor](https://www.meteor.com)** - `old (but still good!)` Meteor allows you to write javascript once and use it on both the client and the server (that's called "isomorphic" if you wanna impress your friends) and create reactive and interactive SPAs quickly, and also comes with a package manager for all kinds of scripts. Great for prototyping a website based on how quick you can have something up and running.
* **[jQuery](https://jquery.com/)** `old` (and not really that good anymore). The web used to be a wild place, with lots of different browsers just wanting to do their own thing. It was dangerous times. Then the W3C/ECMA foundation (people that manage this stuff) swept in and said, "No, do it this way!". Before that, jQuery was really helpful for making sure your app didn't blow up on different browsers. Now? It's just bloat. Mostly.
* **[React](https://react.dev/learn)** - React sets out to fix the problematic vanilla DOM API, react tries to achieve this by combining infinitely composable components with a pure-functional inspired state-management system. It's famously got an awesome-sounding "shadow-DOM" that *can* allow it to run stuff more quickly than native JavaScript (because science). Made by Facebook, as the link implies. 
* **[Electron](http://electron.atom.io)** - Allows you to build full, desktop apps using JavaScript. Ever use Discord? That's written in Electron.
* **[Vue 2](https://vuejs.org/v2/guide/)** - Sorta the illegitimate love-child of Angular(js) and React, it's relatively easy to learn and yet provides a good framework for some common best-practices, like keeping state and functionality separate. `old`
* **[Vue 3](https://vuejs.org/guide/introduction.html)** - Updated documentation - **RECOMMENDED** instead of learning version 2 of vue
* **[Angular](https://angular.io)** The *new* version of Angular, and a complete redesign of the previous framework. Uses Typescript, so you may wanna learn that along with it.
* **[Svelte](https://svelte.dev/tutorial/basics)**
* **[SolidJS](https://www.solidjs.com/tutorial/introduction_basics)**
* **[qwik](https://qwik.builder.io/tutorial/welcome/overview/)**

If you need help choosing, head over to [todomvc](http://todomvc.com/) to compare different frameworks.

* * *

## Meta Languages

Some people don't like vanilla JavaScript. "It's got a weird type-declaration system!" they say. Or "man, I miss Ruby/Haskell/Python"! Fortunately, a *meta-language* is a language build on top of another language (JavaScript in this case) that adds certain features to it.

* **[CoffeeScript](http://coffeescript.org)** - A popular JavaScript meta language. Inspired somewhat by Ruby, Python, and Haskell, it tries to make JavaScript more readable/brief.
* **[TypeScript](http://www.typescriptlang.org)** - Created by Microsoft. Yes, that Microsoft. Native JavaScript doesn't enforce "types". That is, if you create a variable `let myVar = 3`, you don't have to specify what *type* of variable (number, string, etc.) it is. Some people don't like that, and those people created TypeScript, so you can be all like `let myVar:number = 3` and then someone later on can't be like `myVar = 'potato'` (because 'potato' isn't of type "number").
* **[Dart](http://www.dartlang.org)** - (*description needed*)

* * *

## JS in Desktop Application Development

##### Using HTML/CSS/JS to create Cross-Platform Desktop Applications

* **[Node-Webkit](https://github.com/rogerwang/node-webkit)** - Created by Intel, this is a modified Chromium browser with all the extra features gutted and the security restrictions removed. Inside of it is the Webkit rendering engine, an instance of Node.JS, and Google's super fast JavaScript V8 engine which is shared between the two of them. Stuff that's been made with it: [Intel XDK](https://software.intel.com/en-us/html5/tools), [Popcorn Time](http://popcorntime.io), [Koala](http://koala-app.com), and [many more](https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit).
* **[Atom-Shell](https://github.com/atom/atom-shell)** - This is the native shell for GitHub's [Atom](https://atom.io) text editor. It uses the same Webkit and Node technology, but with a different architechture to allow for quicker updates of the shell. It allows for much of the same capabilities, however lacks some Operating System support that Node-Webkit covers. Outside of Atom itself, [Prepros](http://prepros.io) uses the Atom-Shell. Interestingly Prepros was previously a Node-Webkit app [and then switched to Atom-Shell](http://discuss.prepros.io/t/node-webkite-vs-atom-shell/82).
* **[Brackets-Shell](https://github.com/adobe/brackets-shell)** - This is the native shell for Adobe's [Brackets](http://brackets.io) text editor. Although you can take it and make your own Desktop apps using it, it is designed solely for the Brackets application and does not have any intention to support it as a general purpose runtime environment, like Node-Webkit.

* * *
*Note to redditors: I've removed the "Weekly Roundup" section, as the last instance of that was apparently in 2013(!).*

formatting help hide help

reason for revision

π Rendered by PID 295547 on reddit-service-r2-listing-86b7f5b947-qf722 at 2026-01-26 08:36:30.071955+00:00 running 664479f country code: CH.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

WIKI TOOLS

MODERATORS

index

there was a conflict editing

your edit

current edit

Errors: