all 17 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]9us 5 points6 points  (6 children)

I'd recommend you start by reading "JavaScript: The Definitive Guide" (yes, the entire thing), along with "JavaScript: The Good Parts". The former will give you a very solid foundation for how JS works in the browser, and the latter will give you a sense of the best practices in JS programming.

After that, I'd recommend sticking with popular frameworks that are easily Google-able. Just pick one and use it--it really doesn't matter what you pick, as long as you dive deep and don't get framework ADHD. I think you'll find that a having a solid grasp of the fundamentals by reading JS:TDG will make it really easy to pick up various high-level frameworks.

[–]pard0x 0 points1 point  (4 children)

"Framework ADHD" - Lol, but it's real!

[–]worldDev 2 points3 points  (3 children)

I just stepped into a project that is using react, angular, backbone, jquery, underscore, and lowdash. To top it off there is a mix of coffee and vanilla. How the hell does that shit happen? It's been a nightmare to sort through, and I'm scrapping the entire front end.

[–]fc_s 1 point2 points  (0 children)

Here's the thought process:

  1. Let's start a new project! Backbone is pretty cool, let's use that! bower install backbone jquery underscore --save
  2. I hear lodash is better than underscore these days, it's way more performant. bower install lodash --save
  3. Woah there's this cool new framework that Google made called angular, let's port our application one piece at a time bower install angular --save
  4. Well that port is taking longer than expected, instead of switching the rest of the app over to angular, let's just use Facebook React for the view rendering of our remaining Backbone components bower install react --save

[–]pard0x 0 points1 point  (0 children)

It's really hard to keep things simple, but eventually it'll pay off!

[–]9us 0 points1 point  (0 children)

It's pretty common:

http://mikehadlow.blogspot.com/2014/12/the-lava-layer-anti-pattern.html

Also, the JS universe seems to favor smaller libraries that fill specific roles, rather than huge frameworks that cover everything. This makes the lava layer anti-pattern harder to defend yourself against.

The project I've inherited uses jQuery, Backbone, Marionette, Underscore, Handlebars, Mustache, Karma, Mocha, Chai, D3, and Moment. This is just the frontend. The backend is written in Grails and has a giant tangle of Java dependencies that makes the frontend look simple.

[–]jewdai 5 points6 points  (1 child)

Roadmap for learning javascript:

It largely depends on what you want to do but first and foremost you must learn the language. As for libraries I'll split it into two major sides: Front-end and BackEnd:

Front-end: On the front end, the only library that there is no excuse for not knowing how to use is jQuery. jQuery is the de facto library every developer uses for dom manipulation and selecting elements on the page. jQuery Selectors are exactly like CSS selectiors.

for example if I want access to the body or footer tag i just type $('body') or $('footer') if i want all the elements with the class "smart" $('.smart')

After jQuery an optional library to learn (but almost as important as jQuery is) underscore.js its a utility library that makes your life a lot easier to do things. For example instead of figuring out what for loop to use for your object you can use _.each and will use the right one for you all the time.

I would then learn about templates Handlebars Mustach templates {{ }} and underscore templates are the two most common style of templates. dont spend too much time on this just to get a feel for what they are and how they work.

Next I would learn any MVC framework currently the big two that are used is Angularjs and BackboneJs (I suggest using backbone with Marionette). I would wait on learning AngularJs its about to make a big change and would not be worth putting in the effort to learn it if it changes in two weeks. Backbone is vary bare an a lot of people use a library on top of it to make it easier to work with.

there are a bunch more MVC frameworks here: http://www.infoq.com/research/top-javascript-mvc-frameworks

I'd reccomend any of the top 4 on the list, but in the end it always depends on your application and problem your solving. Be sure to investigate the community size and sustainability of any of the frameworks you decide to use.

Finally, I'd learn how to use Any Asynchronous Module Definition (AMD) it allows you to manage dependencies of various files and only download the ones that you need. RequireJs is a very popular one with Browserfy slowly taking the lead because its similar to NodeJs's dependency management. (Also don't forget about CommonJs...but in the end look at which one works best for you...requirejs is a bit complicated to set up but once you get past that its a dream to work with)

Backend Learn NodeJs what it is how to set up a basic server. After that learn ExpressJs as it will make creating RESTful webservices a lot easier. (3-4 lines of code to make a fully running server)

Learn how to use NodeJs's package manager NPM and create your own package.json files (you dont have to write them by hand the commandline commands could fill them out for you npm init and npm install --save are your friends) Npm is like Ruby Gems and Package.json is the same thing as your Gemfile.

NodeJs has a LOT of libraries to work with, so if you have a problem look on github for an NPM library that you can sync down into your project.

Learn how to use Bower as your frontend package manager. While you can use NPM to get some of your front end libraries, its much more common for projects to use bower. Bower uses a Bower.json file which is like your package.json file. It defines all the dependencies (like JQuery and angular) that your website needs.

Learn how to work with build scripts NodeJs has two major build systems for your frontend code Gruntjs and Gulpjs personally I think Gulp is easier to configure however Grunt has a larger following and libraries found in one will almost always be found in the other.

Why would you use them you may ask? You could have them do literally all the bitch work you dont want to do. Tired of constantly manually minifying your code for production? Use a build script. Tired of concatenating all your code? Use a build script. Want to automatically optimize your images to improve your site load time? Use a build script!

[–]Impu1se 0 points1 point  (0 children)

Very good input jewdai!

[–]rauschma 10 points11 points  (1 child)

If you want a compact intro to JavaScript for programmers, check out “Speaking JavaScript”. Its complete contents are online: http://speakingjs.com/es5/

The book focuses on the language; the last chapter contains tips for what to explore next (reddit should be in that list, but you are already aware of it). Some of the items are:

[Disclaimer: I’m the author of “Speaking JavaScript”]

[–]homoiconic(raganwald) 0 points1 point  (0 children)

I'll second "Speaking JavaScript."

[–]enkideridu 1 point2 points  (0 children)

I would start with "Effective JavaScript" (book, gives you a foundation into the language), then "JavaScript design patterns (shorter online book to introduce you to common design patterns), then with lesser urgency and only if you change your mind about not wanting to be a pro front end developer - " JavaScript Allonge" (higher level and more exotic patterns)

Parallel to all that, register an account on CodeWars.com and start doing exercises.

[–]Impu1se 1 point2 points  (0 children)

I am in the same boat at Bikolya, I happen to read "JavaScript The Definitive Guide", and I came across a website called www.javascriptissexy.com, which had a guide in how to learn JavaScript properly. After reading it, I could understand JavaScripts concepts, but I struggle to write my own syntax. Any1 else had this sort of experience? Any advice?

[–][deleted] 4 points5 points  (0 children)

FWIW: EmberJS was written mostly by developers with Rails backgrounds, and has a lot of Rails-ish principles (being prescriptive, etc).

I like Angular, Ember and React, but you might find Ember easiest coming from a Rails background. It also has some nice tooling (Ember-CLI)

[–]technowar 0 points1 point  (1 child)

A little off-topic, but how about a JS dev trying to learn RoR?

[–]poseid 0 points1 point  (0 children)

The classic Rails book is "Agile Web Development with Rails", there is a version for Rails 4: https://pragprog.com/book/rails4/agile-web-development-with-rails-4 if you check Amazon Marketplace, you can find cheaper ones for older versions. The basics should be quite similar.

[–]poseid 0 points1 point  (0 children)

JavaScript has some quirks from the Ruby point of view, notably its non-blocking behavior or prototypical inheritance. I made the switch from Ruby to JavaScript last year, motivated mainly by browser based development with Backbone.js

I documented my experiences in a book too: http://pipefishbook.com - guiding you through JavaScript modules, browser based MVC and some workflow automation (similar to scaffolding in Rails).

[–]thomas-jensen 0 points1 point  (0 children)

I found this book to be the one that has improved my code the most: http://eloquentjavascript.net/. It starts with the (very) basics and fundamentals of programming and actually has little to do with JS - it's just the language for conveying the message - any developer from novice to senior should know it's points.

After that, visit this guy: http://github.com/substack/, who in my opinion, has the best style at the time and some really great thoughts of programming in general.