4 ms·

As a relative beginner in front-end dev, I have to say, the whole JS world has me completely flummoxed. I really don't know which way is up and given that my ti

As a relative beginner in front-end dev, I have to say, the whole JS world has me completely flummoxed. I really don't know which way is up and given that my time is at a premium at the moment, I want to learn something that is going to give me a firm foundation in the long-term. It seems with all these frameworks that it's like betting on a horse blindly, at least to someone who only has a cursory view of the JS landscape. I've played around a bit with Express.js and with jQuery, but not enough to know which way is up. I've been wondering if all this change means that the real way for me to start is diving straight into vanilla JS. I have a firm grasp of Fortran, C++ and experience with MATLAB, SciPy, and Julia (recent) for scientific computing. Coming from the engineering world though, I have no sense how the front-end dev community is shaping up, and that makes me nervous about deciding where to spend my time learning. There are some fun projects I have in mind to bring some of the engineering stuff I've done to the web (e.g. an asteroid redirect mission calculator), but I'm worried about spending time learning a framework that'll just disappear by the time I even really get going. Does all of this change mean that, in the long-run, I'm best working my way through vanilla JS and at a later stage making using of frameworks or libraries to make the more mundane programming tasks a synch? Or should I actually be starting off by learning a framework? Input highly appreciated!

dccoolgai 12y ago
"I've been wondering if all this change means that the real way for me to start is diving straight into vanilla JS." Yes. If you learn JS really well, you can adapt to the framework-du-jour quickly. Learn the DOM , Learn the Web Standards: Two years from now, these frameworks may or may not matter but the things that are happening in Web Standards like ServiceWorker, Components, RTC, etc. definitely will. If you are searching for the branch to cling to in the storm, it is this: Web Standards (which includes "Vanilla" JS). Start here and work your way outwards: http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/
- kartikkumar 12y ago
  Thanks, I guess that's along my line of thought at the moment. My interpretation from my limited exposure is that RoR is a big step up from "vanilla Ruby" and that the community in that case is consolidated enough that it's pretty much a no-brainer to just start with RoR as a beginner. In the case of JS it seems like a movement towards consolidation in that sense is still a long way off, meaning that "vanilla JS" knowledge carries more value than it might do 5 years from now. I've also wondered if all the energy that's being pumped into frameworks and libraries wouldn't yield more if it was targeted towards completely replacing JS with something that's more akin to modern (front-end) dev from the ground up. Maybe that's a silly thought, given legacy and the close relationship with browser development, but as an outsider it seems like a lot of energy is spent on "warring" that could perhaps be focussed more productively in a different direction altogether. Any other JS resources you would recommend to start from the bottom outwards/upwards?
  - jdhawk 12y ago
    Wouldn't it be nice if everyone concentrated on compiling JS into an IL/VM type environment (Java, .NET) - so we could extend the <script> tag into other languages? JavaScript has gotten so much traction due to the development of Node, which allows a common code base. Wouldn't it be nice if we could have Ruby/Python/Go/ASP.NET/PHP/<...> running on the browser & the server?
  - dccoolgai 12y ago
    Resources: 1. https://developer.chrome.com/devtools/docs/console-api https://developer.chrome.com/devtools/docs/console-api 2. https://developer.chrome.com/devtools/docs/commandline-api https://developer.chrome.com/devtools/docs/commandline-api If you are doing webdev, Chrome DevTools is everything. The console and CLI are your window to the truth. It literally spells the difference between wondering why things work like an idiot and knowing it like a boss. Pay special attention to getEventListeners(IClickThisAndItBreaks), debug(WeirdFunction), console.trace(). 3. http://caniuse.com/ http://caniuse.com/ The things in that list: You should know a lot of them. You should know OF almost all of them (what they do on a conceptual level). 4. Hate to reco a paid thing, but this book was critical to me: Secrets of the Javascript Ninja by Resig. TL;DR: Everything in JS is a function. There is 1 thing to know about functions: The "Everything/Nothing Rule" (my paraphrase) - Scope has everything to do with how the function is declared and nothing to do with how it's called. "this" has everything to do with how a function is called and nothing to do with how it's declared. 5. Embrace Function-ness: lodash.com/docs 6. Embrace Event-ness: http://api.jquery.com/callbacks.add/ http://api.jquery.com/callbacks.add/ 7. Embrace Async-ness. Easiest way for me on this was to dabble with Node - async.js & promises. 8. After you lock all that down (don't get scared - it's actually easier than it sounds), learn how a browser really works and performs. Good place to start on that: http://superherojs.com/ http://superherojs.com/ - "Under the Hood" section. (Other good links there, too.) 9. Follow people like Jake Archibald to learn about the Web's "coming soon" stuff like https://jakearchibald.github.io/isserviceworkerready/ https://jakearchibald.github.io/isserviceworkerready/
GlennS 12y ago
I'd say this is a pretty sensible approach. Ultimately if you want to understand JavaScript properly you're going to have to do it barebones for a bit first, so why not start there? The only caveat is that JavaScript is still really lacking in a few areas, and you'll probably find yourself wanting some 3rd party parts to help you with them: 1. No modules or dependency management. I believe these are coming in ECMAScript 6, but the browser support isn't there yet. You can invent your own module system by hand and then write out all the script tags but it gets really annoying once you get to say 10 files. I'm using npm (the NodeJS package manager) with Browserify and that seems ok, although there are a few other solutions out there too. 2. I use Lodash to give me some extra operations on functions and collections that aren't in by standard, but I find useful. I'd actually prefer to have a library which provided some good standard data structures instead, but I haven't found the right one yet. 3. DOM manipulation. The standard DOM interface is a bit scabby. I'd recommend D3.js as a pretty nice DOM manipulation library that you can dip into or out of as you like. It's a fairly large learning effort, but I'd say worth it.
akrymski 12y ago
I'd definitely recommend learning vanilla js over a framework. From there you should pick up and read the source of some useful libs like Backbone, or (shameless plug) my own MVC framework: https://github.com/techlayer/espresso.js https://github.com/techlayer/espresso.js Only once you know how these frameworks operate will you be able to make an informed decision as to whether you need something as complex as Angular or React under the hood. I'd also suggest learning Node.js - as NPM packages and the whole dependency management system of node is really great. Browserify lets you package such apps for the browser, and this is definitely the future of javascript imo.

dccoolgai 12y ago

"I've been wondering if all this change means that the real way for me to start is diving straight into vanilla JS." Yes. If you learn JS really well, you can adapt to the framework-du-jour quickly. Learn the DOM , Learn the Web Standards: Two years from now, these frameworks may or may not matter but the things that are happening in Web Standards like ServiceWorker, Components, RTC, etc. definitely will. If you are searching for the branch to cling to in the storm, it is this: Web Standards (which includes "Vanilla" JS). Start here and work your way outwards: http://youmightnotneedjquery.com/ http://youmightnotneedjquery.com/

kartikkumar 12y ago
Thanks, I guess that's along my line of thought at the moment. My interpretation from my limited exposure is that RoR is a big step up from "vanilla Ruby" and that the community in that case is consolidated enough that it's pretty much a no-brainer to just start with RoR as a beginner. In the case of JS it seems like a movement towards consolidation in that sense is still a long way off, meaning that "vanilla JS" knowledge carries more value than it might do 5 years from now. I've also wondered if all the energy that's being pumped into frameworks and libraries wouldn't yield more if it was targeted towards completely replacing JS with something that's more akin to modern (front-end) dev from the ground up. Maybe that's a silly thought, given legacy and the close relationship with browser development, but as an outsider it seems like a lot of energy is spent on "warring" that could perhaps be focussed more productively in a different direction altogether. Any other JS resources you would recommend to start from the bottom outwards/upwards?
- jdhawk 12y ago
  Wouldn't it be nice if everyone concentrated on compiling JS into an IL/VM type environment (Java, .NET) - so we could extend the <script> tag into other languages? JavaScript has gotten so much traction due to the development of Node, which allows a common code base. Wouldn't it be nice if we could have Ruby/Python/Go/ASP.NET/PHP/<...> running on the browser & the server?
- dccoolgai 12y ago
  Resources: 1. https://developer.chrome.com/devtools/docs/console-api https://developer.chrome.com/devtools/docs/console-api 2. https://developer.chrome.com/devtools/docs/commandline-api https://developer.chrome.com/devtools/docs/commandline-api If you are doing webdev, Chrome DevTools is everything. The console and CLI are your window to the truth. It literally spells the difference between wondering why things work like an idiot and knowing it like a boss. Pay special attention to getEventListeners(IClickThisAndItBreaks), debug(WeirdFunction), console.trace(). 3. http://caniuse.com/ http://caniuse.com/ The things in that list: You should know a lot of them. You should know OF almost all of them (what they do on a conceptual level). 4. Hate to reco a paid thing, but this book was critical to me: Secrets of the Javascript Ninja by Resig. TL;DR: Everything in JS is a function. There is 1 thing to know about functions: The "Everything/Nothing Rule" (my paraphrase) - Scope has everything to do with how the function is declared and nothing to do with how it's called. "this" has everything to do with how a function is called and nothing to do with how it's declared. 5. Embrace Function-ness: lodash.com/docs 6. Embrace Event-ness: http://api.jquery.com/callbacks.add/ http://api.jquery.com/callbacks.add/ 7. Embrace Async-ness. Easiest way for me on this was to dabble with Node - async.js & promises. 8. After you lock all that down (don't get scared - it's actually easier than it sounds), learn how a browser really works and performs. Good place to start on that: http://superherojs.com/ http://superherojs.com/ - "Under the Hood" section. (Other good links there, too.) 9. Follow people like Jake Archibald to learn about the Web's "coming soon" stuff like https://jakearchibald.github.io/isserviceworkerready/ https://jakearchibald.github.io/isserviceworkerready/

GlennS 12y ago

I'd say this is a pretty sensible approach. Ultimately if you want to understand JavaScript properly you're going to have to do it barebones for a bit first, so why not start there? The only caveat is that JavaScript is still really lacking in a few areas, and you'll probably find yourself wanting some 3rd party parts to help you with them: 1. No modules or dependency management. I believe these are coming in ECMAScript 6, but the browser support isn't there yet. You can invent your own module system by hand and then write out all the script tags but it gets really annoying once you get to say 10 files. I'm using npm (the NodeJS package manager) with Browserify and that seems ok, although there are a few other solutions out there too. 2. I use Lodash to give me some extra operations on functions and collections that aren't in by standard, but I find useful. I'd actually prefer to have a library which provided some good standard data structures instead, but I haven't found the right one yet. 3. DOM manipulation. The standard DOM interface is a bit scabby. I'd recommend D3.js as a pretty nice DOM manipulation library that you can dip into or out of as you like. It's a fairly large learning effort, but I'd say worth it.

akrymski 12y ago

I'd definitely recommend learning vanilla js over a framework. From there you should pick up and read the source of some useful libs like Backbone, or (shameless plug) my own MVC framework: https://github.com/techlayer/espresso.js https://github.com/techlayer/espresso.js Only once you know how these frameworks operate will you be able to make an informed decision as to whether you need something as complex as Angular or React under the hood. I'd also suggest learning Node.js - as NPM packages and the whole dependency management system of node is really great. Browserify lets you package such apps for the browser, and this is definitely the future of javascript imo.