Ask HN: What is the best JavaScript stack for a beginner to learn?

Familiarity with frameworks is useful, but knowing plain JavaScript inside out is way more valuable than being able to recite various APIs. But if your friend hasn't found the job yet, and therefore doesn't know what framework he will spend his days learning to loathe, I'd say put together a few small projects with a smattering of libraries to get a better sense of their strengths and weaknesses, what problems get solved, etc.

My 2c: stay away from any complex framework until you have a really good understanding of the language itself. Learn the DOM APIs with all it's drawbacks and bugs, DOM events, standalone browser APIs like Canvas, Audio, etc. Write simple node apps with express and modules whose sources you can read. Start using lightweight libraries like underscore / Backbone - you'll come to understand many of the issues that plague evented architectures and DOM manipulation; then you can approach Angular / React / Ember and actually understand how each one is solving those problems.

Ember is the Rails of JavaScript. People who like Rails tend to also like Ember -- same approach to problems, and they integrate well together.<p>Personally I am into React&#x2F;Flux lately but that&#x27;s because I like doing things at a bit lower level, with more control. Note, lower level doesn&#x27;t mean better.

I have to strongly disagree with people proposing Ember. Several teams I work with, teams with very strong js and rails background, have tried it out and uniformly rejected it as being too restrictive, pointlessly baroque, monolithic, unstable, and with immature tooling (ember-cli in particular). I know a lot of people may disagree with that list but that is my experience and that of several people I respect.<p>I&#x27;m not saying this is the &quot;ideal&quot; front end stack (because that has yet to be created) but a good simple starting point IMO would be backbone + react. Very simple, flexible introduction to concepts like router, functional reactive, and components.

I would learn Ember. The documentation is really good and it has the same philosophy as Rails (convention over configuration). It is as close to Rails for JS as you are going to get. Ember-cli is also amazing.<p>For the backend I would stick with Rails. I see no benefit of moving to Node for a general application when you already know Rails.<p>Ember, Ember Data and Rails works incredibly well together.

What worked for me (two years in webdev):<p>1. Start with vanilla JavaScript&#x2F;DOM and try to make a small app with that. You&#x27;ll learn encapsulating DOM into some kind of DIY views, and browser APIs such as pushstate, requestAnimationFrame, etc. This is an essential step.<p>2. (Optional) Try a classic MVC framework, simpler is better. Backbone is very basic and might be a good idea as middle step. Refactor your simple app to use Backbone views and models. Learn the hard way about their shortcomings.<p>3. Learn React and Flux (any flavor). Throw Backbone away. Ditch imperative DOM updates, learn top-down data flow. Even if you don&#x27;t stick with React, other frameworks (e.g. Ember) are starting to embrace top-down data flow, and it&#x27;s an essential concept that simplifies webdev so much.<p>4. (If you really feel like it) Try some Angular. This will help you see why one-way bindings, no templates, no direct DOM manipulation and minimal API surface rock over other approaches.<p>5. (If you want to stay on the edge) Try exotic stuff like Cycle.js or Om (or Omniscient.JS if you don&#x27;t want to leave JS land). These build up on ideas React pioneered, but one uses Observables as primitive and other uses Cursors.

I&#x27;d agree with most everyone here that plain javascript should be your first step. However, once you get past that stage I&#x27;d recommend the following:<p>- React: by far the most enjoyable UI tool I&#x27;ve used in a long time. Single-direction data flow is easy to reason about and requires very few new concepts to learn.<p>- Reflux: have your react components trigger events that update your data store. I find flux to be a little too complicated for my tastes. Reflux removes the need for a dispatcher and just has events and stores.<p>- Browserify: makes writing modular JavaScript much much easier by using node-style CommonJS imports.<p>- react-router: react style routes makes structuring your apps routes intuitive.<p>I&#x27;ve included these tools and more in a starter project I have on github: <a href="https://github.com/builtbybig/starter" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;builtbybig&#x2F;starter</a>

I&#x27;ve enjoyed working with riot.js (<a href="https://muut.com/riotjs/" rel="nofollow">https:&#x2F;&#x2F;muut.com&#x2F;riotjs&#x2F;</a>). It&#x27;s a &quot;minimalist&quot; front end framework, written in vanilla javascript. It&#x27;s easy to pick up, and it&#x27;s not super opinionated. You can read&#x2F;absorb the library in one sitting -- so you&#x27;ll have a good sense of what&#x27;s going on under the hood.<p>Another great resource is You Might Not Need jQuery (<a href="http://youmightnotneedjquery.com/" rel="nofollow">http:&#x2F;&#x2F;youmightnotneedjquery.com&#x2F;</a>). Take what you need, leave the bloat behind!

Javascript is more &quot;messy&quot; because front-end is harder (on web) than backend.<p>The advice of learn &quot;vanilla javascript&quot; break if your targets (=browsers) are older than, lets say, THIS YEAR.<p>So, is the interest to do only &quot;modern javascript&quot; aka &quot;this year release of browsers implementation of JS&quot;? or &quot;javascript as understood by, please not! internet explorer 6?&quot;.<p>So &quot;vanilla javascript&quot; is different depending in how much &quot;modern&quot; we are talking about. With truly recent JS, is possible to avoid jquery. If you are only in the server-side, Javascript IS == NODE.<p>So? No universal version (that could be retrofit to older devices) of JS exist on this earth (and the same apply to CSS3).<p>Think is like C&#x2F;C++: The same bloat, pain as experience by the first users at the dawn of it, plus half-baked new shinny things, that are not universally used, and never equally across the board.<p>So, is very likely you need to learn &quot;real vanilla javascript = as understood in the IE6 era, perhaps some versions up (if lucky) plus &quot;jquery&quot;.<p>You can avoid jquery if use some kind of niche stack, but, jquery IS javascript as &quot;everyone&quot; use it. Think no only in raw use, but, interfacing with libraries and stuff. So, jquery is the &quot;rails&quot; of js, could be argued.<p>IF you actually have total control on the deployment environment, and on the use of external dependencies, you can SKIP JS and use coffescript, elm, typescript, etc. But you need to be very lucky to be in this position ;)

I&#x27;m not sure how hands on you are being teachinging your friend, but I tried going the full JS stack route with another friend with only 2-3 courses of programming under his belt, and he clearly was struggling due to the complexity of tooling, setting up environments, and generally having a difficult time figuring out the problems &amp; coming up with solutions to them - I am not inexperienced with teaching either, having done it in various capacities (as a paid &amp; unpaid tutor, a lecturer, and discussion section leader).<p>FWIW, we were working with Sails.js (<a href="http://sailsjs.org/" rel="nofollow">http:&#x2F;&#x2F;sailsjs.org&#x2F;</a>), with the intent to getting to use Socket.io, Angular.js, and MongoDB - the setting up of Sails and understanding what things did in Sails ended up being the problem spot.<p>Instead, I changed my approach to act more like a mentor and have my friend go along the excellent Ruby on Rails Tutorial (<a href="https://www.railstutorial.org/" rel="nofollow">https:&#x2F;&#x2F;www.railstutorial.org&#x2F;</a>). Things have been much better, although my friend has fallen on his face a few times with Git &amp; SSH in general. I now believe a good intro text is worth far more than picking the right framework(s) to learn.

To provide a counterpoint to many of the responses here, I find that the best way to ramp up quickly in a language is to build a few small things using one or two of the main frameworks or libraries, rather than trying to just learn the language or specifically working only with microframeworks.<p>There are a lot of benefits that come from using mainstream existing frameworks and libraries from the beginning. You learn conventions pretty quickly, and immediately learn to write idiomatic code for that language. When you use a major framework or library there are typically a lot of blog posts and stackoverflow answers, more so than just for a language itself. When you track down errors you&#x27;ll end up learning about how the frameworks and libraries work, and thereby learning about how to implement things you wouldn&#x27;t have considered independently.<p>As a result, what I&#x27;d recommend is coming up with two extremely simple ideas for tools that he&#x27;d find useful for himself and implement one each with Ember and React.<p>Personally, I&#x27;ve been following this approach for many years (I&#x27;m currently simultaneously working on three new projects in multiple new-to-me languages like this) and it works extremely well in my experience.

I&#x27;ve written about Meteor a few times, recently not too positively (<a href="https://news.ycombinator.com/item?id=8230631" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=8230631</a>), but I still think it&#x27;s the easiest way to get started with full stack JS development. It gives you a bunch of quick wins which is really good for morale, and from there you can slowly start looking at &quot;raw&quot; node if you want to.<p>An essential that might be obvious but in case he missed is that learning JS is much easier in the developer console. If you want to experiment with underscore, go to <a href="http://underscorejs.org/" rel="nofollow">http:&#x2F;&#x2F;underscorejs.org&#x2F;</a>, hit cmd-i&#x2F;f12 and type in _.map([1, 2, 3], function (x) { return x * 2; }); or if you want to understand moment, go to <a href="http://momentjs.com" rel="nofollow">http:&#x2F;&#x2F;momentjs.com</a> and type moment().fromNow(); in the console -- the library objects are available there and this makes it really fast to try things out.

Assuming your friend already knows javascript, Backbone would be a solid choice. You can add it to an existing codebase as a model layer and then if you really truly need a framework you can tack marionette or chaplin on top of it.<p>If your friend&#x27;s a total beginner, though, then it&#x27;s better to just learn vanilla js for now.

The phrase &quot;Rails of javascript&quot; doesn&#x27;t make sense to me. What exactly is Rails...er...the &quot;Rails of&quot;? I&#x27;m assuming you mean something analogous to, &quot;Rails is to full stack web-development as X is to JavaScript&quot;...but that doesn&#x27;t make any sense. Web development is a profession. JavaScript is a language. Maybe you&#x27;re thinking that Rails is to back-end development as Something is to front-end development? But that doesn&#x27;t make a lot of sense either, as modern Rails is pretty entwined into modern front-end development.<p>So I don&#x27;t really know what to tell you, except that you probably have the wrong idea about JavaScript, and so the best recommendation is, as others have said, to work without a framework (other than jQuery, of course) until you understand what JS&#x27;s role is in web development.

As most people have said learn Backbone. This is really worth reading as a starting point:<p><a href="http://backbonejs.org/docs/backbone.html" rel="nofollow">http:&#x2F;&#x2F;backbonejs.org&#x2F;docs&#x2F;backbone.html</a><p>If you don&#x27;t understand all of that, probably learn more javascript.

I would go with Ember. The router will feel familiar as well as some of the concepts in ember-cli. The documentation is great. Ember Data is very stable (has been for the past 6+ months) and shouldn&#x27;t be too difficult to grasp from ActiveRecord

I would start with implementing some backend in Node and Express, and with LevelUp for the database. Since you&#x27;re familiar with Rails and backend development, it should be easy to build something quickly. Just make a simple API. That should show you the basics of JS!<p>After that, you should have enough JS knowledge to start building a client-side app that consumes your API. I honestly prefer AngularJS, but React+Flux seems like a fine choice.

If this is about getting a job, forget about stacks and just start hacking on the first thing that seems interesting. If you&#x27;re comfortable, you&#x27;re doing it wrong.<p>Whatever you&#x27;re working with will most likely be out of touch with what the job requires and outdated in a year, but the ability to pick up new things is an indefinitely transferable skill.<p>In addition to not bothering with stacks, I would also advise you not to limit yourself to JS.

I&#x27;d say its extremely difficult to give you a good answer without knowing what you are trying to build. Is the goal to be able to add some interactivity to otherwise relatively static or content driven websites? Do you want to long running client side apps? Is using JavaScript on both the client and server a goal? The JS community is pretty diverse, largely because there are a lot of wildly different use cases.

If you&#x27;re interested in the fun and pointless, I&#x27;d like to plug my own library for working with and playing timed event sequences: <a href="https://github.com/zachrose/barrel" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;zachrose&#x2F;barrel</a>.<p>Using it to make something stupid definitely won&#x27;t get you a job, but it&#x27;s easy to using it will encourage you to use&#x2F;learn about the cool parts of JavaScript.

I&#x27;d say check out sails.js, it mimics the mvc pattern of rails, and coffeescript instead of js since the syntax is cleaner and would be more familiar. (<a href="https://www.npmjs.com/package/sails-generate-new-coffee" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;sails-generate-new-coffee</a>) &lt;- may be helpful. Additionally, check out yeoman, which mimics the generate commands provided by thor and yeoman generators help you scaffold out apps. Theres the learn from scratch approach if you have a lot of time and want to appear smart, and then theres the ;i need to build something working right away approach&#x27;, which i like more. Programming is all about abstraction, why bother with the low level apis when you can just use the shiny wrappers and save time. I used the MEAN stack for a long time, enjoyed it, relatively easy to use, and has come a long way since then(we did actually have to fix bugs in the framework in the start).<p>When youre more familiar you can roll your own cutting edge framework, maybe use koa, write a yeoman generator, fancy non-relational databases like couchDB. Learning to recite APIs as one comment pointed out will actually help you understand good api design, and give you a working idea of how theyre wired usually, allowing you to ramp up faster on a new framework than if you jut knew vanlla js and individual components. IMO. Sorry for any spelling errors, temporarily on a samsung v1 chromebook, things appear a few seconds after i type and the internet is hard to use while listening to music

My suggestion would be to learn Sencha ExtJs [1]. It has a proper MVC framework and is very mature compared to the others mentioned here.<p>It&#x27;s not something that can be learnt over the weekend and takes time to master.<p>Just like Rails, it seems to be able to a lot of things by magic and needs some dedicated effort to understand. This article from their blog [2] and this video [3] gives a very good comparison of what Sencha ExtJs covers with respect to other Javascript frameworks.<p>[1] <a href="http://www.sencha.com/products/extjs" rel="nofollow">http:&#x2F;&#x2F;www.sencha.com&#x2F;products&#x2F;extjs</a><p>[2] <a href="http://www.sencha.com/blog/4-questions-to-ask-before-choosing-a-javascript-framework/" rel="nofollow">http:&#x2F;&#x2F;www.sencha.com&#x2F;blog&#x2F;4-questions-to-ask-before-choosin...</a><p>[3] <a href="http://vimeo.com/108127206" rel="nofollow">http:&#x2F;&#x2F;vimeo.com&#x2F;108127206</a>

For a single page app framework that encourages modularity and eschews unnecessary complexity, I highly recommend Mithril. It&#x27;s pretty trivial to hook it up to a REST API which you can build in Rails or whatever.

I&#x27;m really surprised by the people comparing Ember to Rails. Rails is modular, is opinionated but has affordances for and encourages other ways of doing things, is flexible. Ember is none of those things.

lebron is the only stack -- <a href="http://lebron.technology/" rel="nofollow">http:&#x2F;&#x2F;lebron.technology&#x2F;</a>

DART + Polymer? I know it`s not Javascript per say, but seems at least to be a step up.

Angular 1 has a 2-year lifespan minimum.

vanilla.js

Just JavaScript is enough.

jquery

Why not AngularJS?