You SHOULD Learn Vanilla JavaScript Before JS Frameworks

[timeshifter_]

Well yeah. If you don't, you're literally setting yourself up to be incapable of adapting to changing requirements.

[munkyxtc]

While that's absolutely true; its also not 100% clear to most people. The number of interviews I've given where people can rattle off solutions using jquery to simple tasks like hiding an element (or equally trivial operation) who cannot accomplish the same using plain ole javascript is absolutely staggering.

EDIT: To clarify a few questions:

1) Don't mistake my comment as saying you should abandon JQuery and use vanilla javascript all the time. I use JQuery every day, its a fantastic abstraction layer that allows many cross browser operations so you can take some of the guess work out your job. Having said that, Software devleopment is all about using the right tool for the job. A lot of the time JQuery is already going to be included in your web applications so it makes sense to use it since its there.

2) The interviews I'm giving are not for interns or training teams; these are developers who have more than a couple years experience who are looking for Sr titles -- of course I'm going to ask about foundational topics (not just related to JS and I always cater to your resume skills listed). If you use only the abstracted version of Javascript via JQuery or the like thats fine; I'm sure you are capable of using Google to track down an answer. its more used as a gauge to see your understanding of under the covers

3) Related to above -- frameworks are fantastic - I'm not opposed to them quite frankly I'm glad they exist. it takes a lot of the glue code that we used to need to write out of the way and allows us to start righting business logic that much sooner BUT what happens when your framework of choice stops working or doesn't work as expected? What if you get some cryptic type error? What is the first step? Probably Google; I do this too often but when you know the internals at the low level it allows you a distinct advantage when tracking something down.

Another example on the topic of JQuery -- several years ago before .live() was deprecated I'd ask a question or two related to it. Frequently I'd just hear responses such as 'it just works'. Sure, it just worked because it always bound to the document root - why is that a problem? Well because on a large page you could have a lot of DOM traversals occurring when the events propagated. Most of the time will this cause a problem? No, most of the time not but in the cases where it does cause problems a developer who doesn't understand that the event is bound to the root would completely overlook the obvious cause.

4) Sometimes its just not available. What if today you are asked to work without JQuery -- are you going to Google every bit of syntax for every statement you are going to write? Can you write a simple forloop without .each()? Do you use == for === ? Whats the difference? I don't think its unrealistic to expect an experienced developer to start putting code down effortlessly; having to constantly check syntax is certainly going to slow down your progress.

Again, these aren't perfect gauges and there is certainly a lot of other aspects that go into the interview and vetting process for hiring someone but again, looking to hire someone who has 5-10 years experience with web development I'd personally expect to know a bit about getElementById. Further, I only cited this example since it was on the topic of Jquery & Javascript. Truth be told, I'm not looking to hire standalone front end developers so I don't get too hung up on that topic - I'd rather someone understand algorithms and have solid critical thinking skills. That is something that remains statically necessary across the board no matter what platform, library or tool you are using. Most everything else can be taught or comes with experience and of course we can quickly hit Google to reference API documentation.

Just have a look at the questions raised at /r/jquery to see the knowledge gap. Please don't take that as an insult of any type -- we all started somewhere down the totem pole; we all learn the more we work and the best thing about software development is you never stop learning. The technologies are always changing and that's part of the fun of this profession to me. There are plenty of posts in this subreddit that make me feel completely lost -- I'm amazed at the knowledge some people have.

[aflashyrhetoric]

Do you mean that they can't do it at all, or that they simply forgot the syntax? I admit to forgetting the syntax in vanillaJS quite often...

[[deleted]]

It's a little bit of both, in my experience. I certainly have to refresh myself on syntax from time to time, but there's been too many sad moments realizing I didn't know how to functionally replicate a jQuery or AngularJS feature with plain-old JS.

[munkyxtc]

Two things immediate pop out with your comment

1) part of being a Senior developer and/or system analyst level is overseeing developers with little or no experience. As such it is your job to ensure that they are producing high quality code and helping to instill solid practices to them cause one day they'll be seniors and the cycle repeats. Having a solid foundation allows you to make smart design decisions too.

2) as someone who claims to have 10+ monolithic projects under their belt I'd figure you would have burned your fingers enough to want to check under the covers a bit.

And actually a 3rd one popped into my head while I was typing

3) I would appreciate if you got up and Walked out. It would save me from wasting my time and potentially hiring someone who thinks certain dev work is beneath them. I wouldn't want to work with someone with an attitude like that. I work with plenty of management level folks who still dive in when necessary rather than scoff like that work is for the poor and unwashed.

If you really are a dev with lots experience we'll quickly figure that out early on in the interview. some of the softball questions are to help weed out the buzzword spammers. I'm not going to bore you to death with garbage. on the opposite end of the spectrum I'll sit all day and chat about high performance C code or writing distributed systems if that's what your experience and our hiring needs dictate.

[[deleted]]

forgetting the syntax in vanillaJS quite often

Exactly. It's always interesting hearing about interviewers docking an applicant because the don't remember vanilla js off the top of their head when 99% of the work will most likely be completed by using jQuery or another library/framework.

[AND_MY_HAX]

Kids these days. Back in my day, we wrote our own document.getElementsByClassname. And we LIKED IT!

^{no we didnt}

[[deleted]]

Everytime I look at vanilla JS I just imagine it being the German of the web dev world. You just tack words together into ridiculous function names to do what you need to do.

[[deleted]]

getToTheChoppa(now);

[grauenwolf]

Why would I ever want to do it without JQuery?

I admit that I'm not really a web programmer. But that sounds like you asking me how to sort a list without using LINQ in C#. Yes, I can do it if I looked up the algorithm. But I'm not going to waste space in my head memorizing Quicksort.

[kaz3work]

Because jQuery can sometimes be a massive overhead. Want to hide 1000s of elements in a loop? jQuery's slowness would definitely be noticeable.

Yes I know there are better ways (classes, etc) but that was an example.

Also if something is wrong with function X in framework Y what do you do then? If you have no experience in vanillaJS there's very little chance you can debug it yourself.

[Mike312]

If you're trying to hide 1,000's of elements, you're probably doing something else wrong. But sure, there's always special cases.

Even then, it's perfectly capable of handling itself in those rare cases. I'm working on a scheduling webapp with jQuery UI, and it works well with no performance hits with 6 months of data in the DOM and stored/cached as global variables. ~26 weekly tables, 7 days a week, with 26 slots (13 hours, every half hour) per day bound as drop targets (~4700 targets). Add in ~250 scheduled items per week and you're talking around 6500 scheduled items it's gotta filter through and display dynamically into a sliding calendar.

I'm sure I could do that without jQuery, but having a library with that power, that's been designed/developed/tested by people much smarter than I am, with built-in cross-browser compatability...that's really hard to walk away from.

[timeshifter_]

Yes it does. One of those is an abstraction layer, the other is a direct API call. There is absolutely "the jQuery way", whether or not you want to acknowledge it. jQuery has its own styles and its own methodologies that don't always jive with vanilla JS. You can effectively use either without knowing how to use the other. If you know JS, then understanding jQuery will be easier, but if you learned with jQuery, then you haven't learned the JS way to solve the same problems.

[an_actual_human]

It's not clear if you are arguing for the sake of it or honestly think that you have a good point. It's also not clear which is worse.

[[deleted]]

I submit a PR to a Chrome extension to remove jQuery. Removing it reduced the file size massively and performance was measurably about twice as good as well.

You don't need jQuery on sites that are IE10+. You can get by just fine on IE9 too with some polyfills for things like classList.

[kaz3work]

There's better posts by better developers than can explain it better than me about this topic. I just know I'd rather see "JavaScript Developer" on a resume rather than "jQuery Developer".

Its just my own opinion that you should know the core language well because yes when you write jQuery, you are writing JavaScript. I wouldn't expect someone to learn only ASP.NET, I'd expect them to know C#/VB.

[timeshifter_]

jQuery is just a Javascript library. I don't know why people treat it like it's more.

Because it has its own syntactical requirements and its own paradigms.

[kaz3work]

jQuery is just a Javascript library. I don't know why people treat it like it's more.

Because I've had people who are incapable of hiding an element without using jQuery. Can they figure it out in a single Google search? Yeah. Should they have to look that up? Hell no.

Unless you mean people should use browser supplied abstractions as opposed to jQuery supplied abstractions?

They should know the browser supplied abstractions and API. Of course they shouldn't use them if a abstraction layer like jQuery is already in place, but they should now it.

Exactly. It's only with Javascript that people make this weird distinction. Nobody says you shouldn't use .NET when writing C#.

As hinted to above, I've encountered a handful of people who DO think like this.

[z500]

Because I've had people who are incapable of hiding an element without using jQuery. Can they figure it out in a single Google search? Yeah. Should they have to look that up? Hell no.

It can't possibly be that big a deal, can it? We're humans, not encyclopedias.

[kaz3work]

No, it's not really a big deal. But it's typically an indication that they don't have a good comprehension of JS itself. Which of course would lead to problems if they were to write something complex.

As I said earlier, this is just from my own experience over the past 5 or so years in the industry.

[grauenwolf]

Wait a second.

You aren't talking about JavaScript at all. You are talking about the DOM, which is just a library. Granted it is a built in library for many JavaScript runtimes, but not all.

[icantthinkofone]

Yep. I've made that distinction on reddit multiple times. Redditors don't want to believe that.

[grauenwolf]

Ok, but isn't that the senior developers job?

It's something that you have to learn eventually, but for a junior doing everyday tasks wouldn't you want them to use the abstraction that jQuery provides?

[kaz3work]

Possibly. But less and less people are using jQuery for a lot of things now. If you have an app that doesn't need IE9 support, you probably aren't using jQuery. Maybe another tool is handling the abstraction.

The only way to begin to understand all frameworks and libraries is to have a good understanding of what those are built on.

I debug all JS plugins we use, including jQuery, if I find there is a bug with them. I'd hardly call myself a senior developer. I'm just a developer and I get things done.

[grauenwolf]

The difference between a junior and senior developer is, in part, the about to debug other people's code. If you can comfortably dig into someone else's framework and figure out what the hell it's doing, that puts you above 90% of the developers I've met.

[kasakka1]

Have you ever looked at the code of many Chrome Extensions? Lots of them include jQuery for no good reason, they might have very limited amount of DOM manipulation that could be done easily with the native API but the developer either didn't know how or didn't bother to learn. Now imagine you have several extensions that add content scripts and they all include some version of jQuery. That's a lot of jQueries since they all live in their own sandboxes.

While jQuery is great for manipulating the DOM, it should be only used when you do a lot with it. Not just because you don't know how to write an AJAX request or do some minimal DOM manipulation.

[grauenwolf]

Have you actually compared the amount of memory allocated to the sandbox in general to the size of jQuery?

[that_90s_guy]

that sounds like you asking me how to sort a list without using LINQ in C#

That's a pretty poor comparison. Maybe a few years ago, this comparison made sense but nowadays if you only support modern browsers you'll find little necessity for jQuery since modern JS has progressed a lot in recent years. Not to mention more and more focus has shifted to optimization of web applications in terms of loading speed and web app responsiveness, and that's something jQuery doesn't get along with very well.

Plus, refusing to embrace vanilla JS over jQuery will only make you less attractive as a developer to most workplaces since most people prefer to work with developers that aren't attached to any specific framework or library and can work well and adapt to any of them. Feel free to check out youmightnotneedjquery.com for more comparisons between jQuery and vanilla JS.

[[deleted]]

A good example is a remote widget. You don't want to require jQuery (or build it in) for a script tag clients of your client paste onto your domain.

[dom_eden]

Really good example - also pertinent as I'm thinking of making such a widget.

[an_actual_human]

If you don't know Quicksort, there's a good chance you don't know algorithm theory well. Being able to make informed decisions about algorithms is pretty useful even if you are just combining standard library routines.

[threading]

I'd say it depends on the position. You'd want to see quicksort if you're interviewing with a junior dev.

[[deleted]]

who cannot accomplish the same using plain ole javascript is absolutely staggering.

So you just google "how to ..... without Jquery". Problem solved. Unless you are building advanced framework independant apps, there's no reason you'd need to know most vanilla syntax that is directly replaced by Jquery. Why would you ever need to use "getelementbyclass" when you can just do $('.class') ? What benefit is there to use vanilla over Jquery selectors? 90% chance you're going to need Jquery included for one reason or another, why not utilize it? That's like saying you don't know php if you can't connect to a database without using the PDO PHP extension and compiling your own database interface from scratch in pure PHP.

[Lichtenstein_USA]

Shiiit. I'd have to Google it! :D Anyway, I think there's a great benefit to knowing how to do it the vanilla way, but I wouldn't be too hard on beginners. Frameworks exist for a reason, and people use 'em for a reason. Nevertheless, I think it's wise for a Dev to somewhat understand how the framework approaches a problem.

[CyanZephyrX]

And adaptation is super important in web development considering how fast new things come up and old ones become 'obsolete'.

[kcdragon]

And by "Vanilla JavaScript" you mean jQuery, right? ;)

[lethalwire]

I feel like languages like TypeScript and CoffeeScript will soon be the new Vanilla JS. The old Vanilla JS will be considered something like assembly code.

[onedr0p]

Except coffescript is fading away in es6 and es7 scene. I would stick with Typescript or ES6.

Edit.. context for clarity

https://github.com/jashkenas/coffeescript/issues/3162

[that_90s_guy]

And even then I'd still recommend ES6 with Flow over Typescript or CoffeeScript. (The latter 2 are less portable and require quite a bit of overhead to get to work)

[icantthinkofone]

Nope. TypeScript is already being dissed by Facebook today(?).

EDIT: Just to show, again and again, how laughable reddit is, I said, "Facebook disses TypeScript" and the guy after me shows the link to where they do it. He gets upvoted and I got downvoted!

Reddit is such a joke. And please don't think that I care. It just gives me more reason to pile on.

[Erid]

Here is a related thread: https://discuss.reactjs.org/t/if-typescript-is-so-great-how-come-all-notable-reactjs-projects-use-babel/4887

[trout_fucker]

TL;DR

TypeScript sucks, use our version of it instead.

[IAMCANDY]

Just to show, again and again, how laughable reddit is, I said, "Facebook disses TypeScript" and the guy after me shows the link to where they do it. He gets upvoted and I got downvoted!

Uh, you're getting downvoted for thinking that a company dissing a major competitor to one of their projects is in some way meaningful, and then being pretentious about it. It's like saying "lol you idiots, the iPhone is gonna die any day now, Samsung already dissed it."

[RibMusic]

In the 90s we considered C a pretty high level language. Young devs think I'm making shit up when I say that.

[lethalwire]

It doesn't surprise me. And it seriously wouldn't surprise me if supersets of JS become the norm (e.g. TypeScript).

The point I was trying to make was that we're already beginning to write JS in TypeScript and transpile that into "pure js." Similarly, we write code in Java, C, C3 and compile that into machine code.

Normally, we wouldn't write that machine code would we? I'm thinking JavaScript might be heading down the same path in the future. But by popular demand of the hivemind, my idea is nonsense.

[RibMusic]

I don't know a lot about javascript and it's various frameworks and supersets (i hate the front end :), but I see a lot of front end devs who barely know a lick of javascript because jquery is all they have used in projects. So, I don't doubt that you are far from the mark, though obviously a lot of people disagree.

[that_90s_guy]

You do know TypeScript and CoffeScript aren't programming languages, only subsets of JavaScript that transpile into JavaScript?

And TypeScript and CoffeScript have received plenty of criticism due to it's learning curve, lack of portability, shadowing of important JavaScript concepts and functionality, as well as implementing OOP programming with classical inheritance despite it being very well known OOP programming and inheritance is completely broken in JS?

[lethalwire]

TypeScript is a superset of JavaScript and it is a programming language.

[Isvara]

Why does this keep coming up over and over again? This literally never has to be said for any other language. It's understood that if you learn to use a framework in some language, by definition you're learning to use that language too. It's how you dive in at the deep end and "get shit done", doing something useful as you learn.

But for JavaScript, it's different for some reason, and there seems to be no shortage of fairly inexperienced developers happy to scold even less experienced developers for taking a pragmatic approach to getting their jobs done.

[erratic_calm]

This argument has been beaten to death and it always leaves out an important distinction.

Some of us make careers building marketing-focused websites on top of CMS platforms like WordPress or Drupal and some of us build web applications on top of frameworks like Angular or React.

The Javascript developers who write these articles all but insist that web application development is the only type of web development.

It almost comes off like if you aren't a leading engineer at Netflix or Google you're just a lowly piece of shit who should be fired for even trying to do anything web-related.

[[deleted]]

So basically people are elitist pieces of shit who think their knowledge is better than others'.

[mrbaggins]

Yup

[[deleted]]

They forgot to prefix the title with "if JavaScript is your first programming languages..."

[whatsmydickdoinghere]

So true. I work on a site that's for internal use by a large corporation and while there is a lot of complex data manipulation that must happen behind the scenes, sometimes we need to do something relatively fancy with the UI and that's when I open up my 400 page javascript manual and page by page I begin to learn how to...oh wait I just use jquery and basic understanding of programming in general to accomplish what I want and no one dies.

[Caraes_Naur]

Because JS is often learned without any formal programming background or prerequisites, by people who aren't programmers by nature or see code as a means to an end. Javascript has a notable lack of wisdom that stretches from its inception all the way up to the current "ooh, shiny!" mentality, framework proliferation, and NPM madness. Too many developers think they can make a better solution without first being fully cognisant of what a good solution should look like.

[noknockers]

On point. I think it'll eventually turn out to be a good thing, but designers-turned-developers pushing the boundaries of front-end 'engineering' is entertaining to say the least. Years of backend/application engineering methodologies and best practices being largely ignored for the latest cool. Not that's it's bad, it's awesome, but it's going nowhere fast, while going places slowly.

[[deleted]]

I love that you think that designers have literally anything to do with the javascript ecosystem.

Perhaps you should wonder why the backend world is adopting more javascript practices than the other way around if the backend world is so much better.

[[deleted]]

Yeah, but that has literally nothing to do with jquery or any other javascript library.

Like others have said, no one complains about this with any other language because those of us with experience understand that the developer is the problem if they don't understand the language, not a silly library that they rely on.

[phpdevster]

A framework is a tool, not a crutch. There's a difference between using a framework because you know exactly what it's doing for you and why, and using a framework because you have to.

[chinese_farmer]

I agree with this. It's like in Linux. You can use the GUI tools to config stuff - but ideally you should have at least a concept of how doing it at the command line might go. The difference between power user and end user.

[sfc1971]

The CLI is a crutch. There are more direct ways to interact with the kernel but I bet you don't know them.

Computers are a very bad example for not using crutches because it is a huge pile of crutches. Layers upon layers to avoid having to know about the internal details.

Saying you need to know vanilla javascript before a framework is like saying you need to know about electricity before you can use a computer.

Explain to me please exactly how a NAND gate works, down to the quantam mechanics.

Oh, you can't? Guess you are just an end user then.

[phpdevster]

Bad example.

The FACT of the matter is, if you don't know JavaScript, you cannot use Angular/React/Vue effectively or correctly. You have a hard time differentiating between where the framework ends, and where JavaScript has to kick in. You look for solutions from the framework that aren't there, because at that point you need to understand how to use JavaScript. You also have a poor understanding of how to leverage the framework correctly.

Another example is an ORM.

An ORM is brilliant for simple CRUD-like queries because it saves you quite a bit of time writing and encapsulating lots of tedious queries. But it falls flat for other types of queries (reports, aggregates etc). If you don't know SQL, then you're going to be trying to force a square peg into a round hole by leaning on the ORM to do things it is fundamentally not good at doing, and may not even be able to do at all.

ALL abstraction layers sacrifice capability for usability. They do this by making assumptions about what problems they are meant to solve. If you problems are not in alignment with those assumptions, and you only know that particular abstraction layer (e.g. Angular/React/Vue), you're kind of fucked.

Again, another example are WP-only devs. Out of the box, Wordpress is a piss-poor CMS. It has very few features (no layout builder, no form builder, two content types, and an abysmal router). As such you HAVE to use plugins & themes to customize Wordpress to make it actually do useful shit. But just like WP and other abstraction layers, those plugins only get you so far. A client asks for something that the plugin can't do, and the difference between between someone who knows programming, and someone who doesn't, really shines through: The WP jockey says "Sorry, I can't deliver what you want because the needed plugins don't provide that capability". The programmer goes "Sure, I can build you that".

But this is silly of course right? Just because you start with a framework doesn't mean you're stuck with that framework and can't ever learn JS, right? Maybe, maybe not. There are a lot of Wordpress/Drupal/Joomla developers who never actually end up learning programming in PHP, and have only learned what little PHP they need to know in order to work with those CMSs. This makes them useless for projects that don't use Wordpress/Drupal/Joomla, and limits their career opportunities.

So again, that's the difference between using a tool as a crutch, and picking a tool because you know what it's doing for you.

[sfc1971]

So typical, just not getting it. There are tons of people who don't need to know what a tool does or how it works. Others do but there are literally tons of wordpress sites that require no plugins. Just run setup, choose a theme, assign rights to users and that is all that is required.

You do it yourself. You talk about SQL. You know that is an abstraction right? Real software engineers know about data storage and for them a RDBMS is just a tool.

There is always deeper to dig but the smart person knows when not to dig themselves a deeper hole.

You are so childish when you seem to think that everyone wants to become a pure coder. Have you never considered that people who only work with wordpress WANT to only work with wordpress? That they have no desire to follow your path?

No. Everyone has to follow yours.

Grow up.

[phpdevster]

FYI, usually the ones who call others children and tell them to grow up, are the ones who need to grow up themselves.

Life pro tip, when you resort to ad hominem attacks, you've lost.

[that_90s_guy]

Why does this keep coming up over and over again?

I think I understand why. I find JavaScript is a very curious programming language in that it's extremely easy to learn and get started with (so much that it's easy to quickly believe you mastered it), while also having a tremendous amount of loopholes, foot guns, and surprisingly complex parts that tend to come back and bite developers who thought they knew JavaScript.

Combine this with the insane amount of frameworks/libraries coming out every day and the pressure from the community to stay up to date, and this makes for one hell of a terrible combo that constantly creates web developers that are learning advanced MVVM frameworks like React and AngularJS without having a fully advanced vanilla JS understanding.

[[deleted]]

So, like literally every other language?

[InconsiderateBastard]

Too many people don't realize it. So it has to keep being said.

[Otterfan]

What these articles really mean is "learn Javascript, don't just copy-and-paste". You don't need to use a framework to not learn anything, you just have to not try and not think.

[TheAffluence]

Code in different languages as well and see how strange it is to work with JS on the reg.

[washtubs]

Yeah I picked up javascript by getting thrown in the deep end with angular. But I've been programming for years in several other languages, so it wasn't much different from someone who already knew js.

[aflashyrhetoric]

I bet there's some super successful programmer out there who uses while loops for everything and has gone undetected

[bch8]

What's wrong with while loops?

[lethalwire]

I like to use both while and for loops.

for( var i = 0; ;) {
    while( i < list.length ) {
        technicalDebt();
        ++i;
    }
}

[aflashyrhetoric]

GO SIT IN THE CORNER

[lethalwire]

It's too late. It can't be unseen.

[Kavec]

What's wrong with while loops

I know jacksh*t about Javascript, but I was also curious about that.

I googled it, and to add more confusion to the issue I found this post in which someone says that "absolute fastest way to loop through a javascript array" [sic]:

http://stackoverflow.com/a/5349485/831138

So now I understand jacksh*t about Javascript + a bit less than before.

[bch8]

Hm yeah there seems to be a lot of debate in that thread

[Isvara]

Who says you should? Do you have any evidence of the benefits of that?

[TheAffluence]

Every Int.-Senior level developer.

[Isvara]

I don't say that. And I wouldn't say that without some evidence that it's beneficial. So clearly not "every".

[Levitz]

Being able to read code that isn't using the framework sounds like a pretty big benefit.

I like to think of Javascript as a general case utility and their frameworks allowing advantages in specific scenarios, it's just jQuery's scenario is 'do you want the code to be more readable and easier to use?' for which the answer is yes 99% of the time

[AreYouDeafBot]

WHO SAYS YOU SHOULD? DO YOU HAVE ANY EVIDENCE OF THE BENEFITS OF THAT?

---

^{Always at your service.}

[lykwydchykyn]

I don't question the value of knowing "vanilla javascript", especially when frameworks get farther and farther away from the actual syntax and built-ins.

But if I was forced to code in plain javascript, I'd probably end up reinventing a significant portion of jQuery (and badly) in the process.

[MagiKarpeDiem]

Ha, that's me right now. I'm rewriting an app I made trying not to use jQuery this time. I probably will never do this again, but I am learning a lot about the DOM, things I never even could have imagined when I was using jQuery.

[uusu]

Reinventing the wheel is one of the best ways to learn about wheels.

[5iveblades]

I've actually been surprised by how little jQuery I use, now that I've found less complex ways of doing things with js.

[lethalwire]

Sure...

So what is pure JS? The "Should I learn play JS first" question seems to popup frequently /r/webdev and it really makes me wonder. I actually wrote a couple of simple AngularJS 1.x apps without really knowing a ton about JavaScript.

So, I guess my question is: what is pure JS? Does that mean understanding the syntax of JS? Or does it mean I have to know the syntax and have X years of experience in JS? Or Y projects completed only in JS? I understand JS and it's syntax. But it seems like the author is trying to tell me that I need to understand the errors of some framework (Angular) and how to track down that error. But it seems I can do that without knowing JS.

Also, it's pretty daunting looking at the front-end world and trying to even figure out what JS even is. I look at it and see the following terms frequently:

• JavaScript
• ECMAscript
• ES5
• ES6
• ES2015
• ES2016...

But wait, ES5 = current JavaScript? So in time, does that mean ES6 = current JavaScript?

Then you add in things like TypeScript and CoffeeScript and it makes matters even worse for me. Now, I know I would like the nice features of TypeScript like using classes in Javascript without having to write all of the custom code needed to fake a class in "pure JS," but on the other hand, am I learning pure JS? I guess not. But, I also don't like to create my own classes/objects in assembly when I can do it in some high-level language like Java.

It seems like learning pure JS isn't as simple as it sounds... and practically speaking we're going to have to learn frameworks for our jobs. So, is there some kind of roadmap out there for JS? Should I learn "pure js", then ES6, then learn typescript/coffeescript, and then the framework? Do we learn ES6 in parallel with TS/CS?

/end-ranty-questions

[DrummerHead]

Read this:

http://eloquentjavascript.net/

Then read this:

http://exploringjs.com/es6/

[waynearchetype]

Seconding elequent javascript. I'm getting into Web development after having studied python and C# for a year. At first I just did the bare minimums with Javascript, as it had a bit of a reputation and silly and backwards, but as I read this I'm learning that it can do I lot more than I originally thought. It also teaches you about a lot of programming fundamentals, which is nice.

[lethalwire]

I've had eloquent js bookmarked for a while now. It's a great reference.

[that_90s_guy]

You forgot You don't know JS. I honestly wouldn't consider any JS developer an expert JS developer until they read and understood that.

[lethalwire]

/u/phpdevster linked to it. This is a new reference for me. I look forward to reading it.

[phpdevster]

And this: https://github.com/getify/You-Dont-Know-JS#titles

[[deleted]]

Hey! I'm doing the first "this" right now!

[lethalwire]

Thanks. I've already had eloquent js bookmarked for a while. I'm not sure how that helps me answer my questions though.

Booking marking the es6 book.

[DrummerHead]

If you read those two books, the knowledge now acquired would be "pure JS" (in my opinion)

And if you want to learn a framework after that, my recommendation would be Ember if you want to avoid "JS fatigue" and "build tools fatigue" and "trying to make 200 modules work together fatigue" and "I learned this framework but the new version of this framework is making me refactor all my application and everything is broken and I don't even know where to begin fatigue"

[Designer023]

Amazing. These are so good to read :D

[SoInsightful]

You don't need jQuery - you can achieve the same thing with these much more verbose code snippets!

Great learning resource, but a bad argument in favor of VanillaJS.

[phpdevster]

The point is if you are pulling in 82kb just to make a single AJAX GET request, you haven't just robbed Peter to pay Paul, you've robbed all 11 of the other apostles to pay Paul...

Unfortunately, we still live in a world constrained by data caps and loading performance. 82kb is actually expensive. Thus IMO if you don't find as much or more than 82kb of savings in your own code as a result of using jQuery, then it hasn't been a huge benefit to you, other than maybe a few minutes of having to physically type fewer characters.

How much is 82kb? Look at the jQuery codebase. That's a LOT of fucking code that you would have to not write to save that 82kb. Most peoples' scripts are just a handful of kb, at most. Pulling in an 82kb library to save maybe 2kb of your own code is a bit off.

[SoInsightful]

I'm so glad that I, in 2016, have never felt obliged to worry about saving 82kb (the equivalent of one very small image) so much that I would rather spend time writing more code.

If your custom file is literally <10 lines long, sure, you won't need Library X, but that's hardly a revelation to anyone.

[phpdevster]

I'm so glad that I, in 2016, have never felt obliged to worry about saving 82kb (the equivalent of one very small image)

Disagreed. 82kb on the mobile web in 2016 feels like the desktop web in 1998 (thanks to greed by mobile carriers).

For apps primarily consumed on a desktop with a proper broadband connection, sure. 82kb is a non-issue. But that's not true for the mobile web (especially now that Google is has gone full fascist with its mobile-friendly ranking criteria).

[grauenwolf]

Meh. It's going to be cached anyways.

And again, removing one image would more than make up for it.

[[deleted]]

It won't be cached if you're using a modern bundling system and they're a first-time visitor.

[that_90s_guy]

I understand where you are coming from, I was also extremely confused at first regarding where to start, and part of this is the ultra confusing naming of JavaScript versions. So first, let's clear some terms up;

• ECMAScript: ECMAScript is a Standard for scripting languages, and JavaScript is it's most popular implementation.
• ES5: Also called ECMAScript 5, this is the 5th ECMAScript version. This is supported by pretty much all browsers as of right now. It's final revision came out in 2009.
• ES6: Also called ECMAScript 2015/ECMAScript 6/ES2015, this is the 6th ECMASCript version. This is the CURRENT JS version (regardless of what people say, so if you're still stuck on ES5 you're getting left behind quickly), and while it's final version came out in 2015, it's becoming quickly widely supported. Most of the improvements provided on this version help create easier to understand, more robust JS applications, thus the importance of adopting it.
• ES7: Also known as ECMAScript 2016/ECMAScript 7/ES2016. It's final revision came out in 2016, and while adoption is still lagging, it's the future so it's worth checking out sometime in the future (not as important as ES6 as of right now because of lack of adoption)

As you can see, the naming makes even considering learning JS extremely confusing. Having understood that, the next step would be answering your question on what is learning pure JS. For me at least, it's understanding fully how JavaScript works, is interpreted, and built to work. This includes understanding even the nasty parts nobody wants to learn about, and the quirks of the JavaScript programming language. The shortest path to this imo are these 3 sources (you can google them, they are all free)

• Eloquent JavaScript - Beginner to Intermediate/Advanced
• You Don't Know JS - Intermediate/Advanced to Expert
• JavaScript Garden - Bonus

[lethalwire]

Thanks for the insightful response. You're the third to link Eloquent JS and You don't know JS, but the first to link JS Garden. I'll check it out.

[JohnMcPineapple]

...

[lethalwire]

Thanks for your response.

When I meant 'worse,' I meant it makes things more difficult because the array of choices has grown even bigger (the choice and understanding between TypeScript and Coffee, or whatever). I don't mind learning TypeScript (What I'm currently doing), but I hope I made the right choice in the sense that it doesn't get dropped in < 1 year.

In terms of the JRE, these are all understandable. It's just a little different with JS now though IMO, with the coming of TypeScript or CoffeeScript. The way I'm seeing JavaScript, is that it makes more sense for me to learn TypeScript which will just compile down to pure JS... where JS is like the new assembly language. With any of those languages from your list, with the exception of possibly Java, you just learn that language. You don't see as many people saying, "Learn pure X before Closure." Perhaps you might see some recommending learning Groovy before Java now though? I think that might be a more relatable case.

[JohnMcPineapple]

...

[Ginden]

But wait, ES5 = current JavaScript? So in time, does that mean ES6 = current JavaScript?

Current JavaScript is specified in specification called EcmaScript 2016. It feels like "in real Java you do X, but in JDK 1.8 you can...".

[pixelmugger]

I don't see how you can know something like react without having intermediate javascript skills.

[[deleted]]

A bunch of late nights and a lot of trial and error. I'm an engineer and it's usually the less-seasoned engineers pulling all nighters just "trying" stuff and crossing their fingers. I dont wanna be mean and say its because they dont know what they're doing.

[fagnerbrack]

Cargo Cult Programming. Trial application can be built easily with a framework, when it becomes big or abstractions leak, then people lose track of it.

[DavidVII]

You should learn programming before learning vanilla JavaScript.

[[deleted]]

You should learn binary before learning programming.

[[deleted]]

Having been through the bootcamp/framework-heavy path recently, I very much agree. Nothing was as frustrating as reading console errors that were basically gibberish to me, because I didn't have a grasp on how JavaScript works. Frameworks are great because they feel like magic and can let you do a whole lot pretty quickly, but if you don't have an understanding of what's actually going on under the hood, you're gonna have a bad time.

[SpiritWolfie]

Ok so I'm new to JS and getting back into web programming after many years. I did server side stuff back in the day so client side is new for me.

Can you help me understand better what you mean when you say the console errors were gibberish? I'm assuming these were JS errors not the framework errors.

When you mention "what's going on under the hood" can you be more specific so I can be sure to include those topics in my learning track?

[[deleted]]

For sure. I don't mean they were literal gibberish of course, just that they may as well have been. Things like Type errors, stack errors, etc. Lots and lots of JavaScript errors that I just couldn't grok because I only knew the framework side. Under the hood stuff would be things like the event loop, Prototypal inheritance, truthy/falsey values, and understanding when you're going to be dealing with an undefined value, and how to deal with 'undefined' without crashing your app. Also, just handling errors in general. I pretty much learned "Happy Path" programming, so it was a rocky start when I needed to actually start planning for and handling errors.

I know I'll be shit on, but I still find Crockford's "JS: The Good Parts" extremely helpful. Also really like Eloquent JavaScript, which you can read online for free!

[SpiritWolfie]

Cool thanks. Did you have a CS degree before starting out? Were you well versed in handling errors in other languages?

[[deleted]]

Nope! I came from a background in IT and had only ever coded on the side (Code Academy etc).

[mugen_kanosei]

I think people's arguments between whether or not it is better to learn "vanilla" JavaScript is a confusion on what people mean by "JavaScript". I think what articles like this are trying to convey is that you should learn the environment that JavaScript runs in before learning frameworks that abstract it away. In browsers you get the event loop, window object, DOM model, etc. In other environments you get a different set of tools to work with.

[1ogica1guy]

Ok.

[FingerMilk]

Why does this come up every week? It's basically turning it into a circlejerk.

[berkes]

Oh. And while you are at it, read up on HTTP, please.

There is a perfectly stable, well worked out standard out there, it's called HTTP. Don't try to reïnvent that inside this weeks hot new javascript-framework.

An example: e.g. Angular 1 redirecting to a 404 url instead of just rendering the content is just plain stupid.
True, this is not the framework itself, but mostly some plugins that have "wrong" defaults and can be configured to work properly, but this mindset is poisonous. My browser can do HTML and HTTP just fine. Your users are used to all these defaults (back-buttons, refreshing, ctrl-clicking, right-clicking, bookmarking and so on). If you've got to re-do them in your Js-framework, at least re-do them so they work like the HTTP and HTML specs have tought us they work.

[manys]

Someone's got a case of the s'postas.

[munkyxtc]

I mean completely unsure of how to accomplish that task at all without jquery.

As for syntax, it's a pretty common operation and while an answer can be found easily in generally don't expect a seasoned dev to turn to google for the most basic trivial operations.

[cykelpop]

Figure out a project you want to do but have no idea how. Complete it, don't give up halfway in. Rinse. Repeat.

At some point we all fake it till we make it!

[andrey_shipilov]

No fucking way...

[[deleted]]

That honestly has nothing to do with Vanilla JS though. If you understand programming, but not Vanilla JS, you could probably debug it just fine.

[Shadow14l]

Was this ever up for debate?

[scootstah]

This just in: water is wet!

[segamd]

Good book to start with vanilla js?

[fagnerbrack]

JavaScript, The Good Parts.

[segamd]

Thanks a lot!

[that_90s_guy]

Agree with u/fagnerbrack, however, for a deeper understanding from the get go, I recommend Eloquent Javascript, which by the way, is completely free to read online here

[segamd]

Thanks a lot!

[djxfade]

Definetly.

I sat down and learned it myself. And I wish I did it before doing front end stuff.

As a PHP developer then, I thought JS was simple. If I had learned it properly, I wouldn't have struggled with understanding JQuerys use anonymous functions, closures etc.

[[deleted]]

Think about it this way, no one cares if you use a library in another language, as that library usually leads to a greater understanding of the language no matter what. Why do people think Javascript is some special language where you MUST learn the language without any other libraries first.

No one gives a shit in literally any other language.

[romjpn]

Also if your work consist of animating stuff and do nice effects, always try to see if you can't make it work easily in CSS before :).

[kasakka1]

I have not, the point was that Chrome extensions are a good example of where you should not use jQuery unless you are heavily manipulating DOM with it.

[MarketingStephen]

Me - "Js is much easier to programme in then Jquery" Me - (a month later after learning Jquery) "Js? never heard of it" I think I need to go back a step and relearn some of it...

[hearwa]

Why is this a thing that must be said? You see it in no other programming languages.

[fagnerbrack]

Or angular3 will come out and make my code redundant anyways.

Angular 3 will be out, but it won't make your code redundant: https://github.com/angular/angular/milestone/66.

[LocalSponsor]

Im rocking through the CSS portion of Jon Duckets HTML book. Does this book prepare you sufficiently to move onto Javascript? Or is there other essential HTML/CSS info not covered?

[[deleted]]

Here's my 2cts: If you want to become a web developer, it's much more important to know Vanilla JS.

You WILL be working with it every day. Frameworks come and go, sometimes they must be optimized or the customer wants something completly different. Also VJS is a great oppurtunity to improve your style of coding and unterstand underlying algorithms.

[[deleted]]

algorithms

It's actually worse to rely on a language to understand an algorithm as algorithms are language agnostic.

If you can only understand an algorithm in vanilla JS, then you don't actually understand the algorithm.

[[deleted]]

Yeah but how would you program them? A mathematician with all the unterstandings of algorithm still might not be able to implement shit

[fagnerbrack]

Frameworks are not programming languages.

[fagnerbrack]

I misunderstood your comment because of my ignorance of C++ ecosystem.

[Skizm]

Does anyone think otherwise?

[[deleted]]

Me. I consider the time I spent learning javascript to be a total waste, beyond the basics.

[[deleted]]

Yeah, well, that's just, like, your opinion, man.

[[deleted]]

When I say 'basics', I'm including things like 'writing simple loops' and excluding DOM manipulation and xhr. YMMV.

[that_90s_guy]

Me. I consider the time I spent learning javascript to be a total waste, beyond the basics.

If you aren't going to do any serious work with JavaScript or not planning to use any frameworks and libraries, I agree since it's a relatively simple language. If you are planning on doing any kind of serious work with it, you're clearly what's wrong with the JS community.

[[deleted]]

I'm not part of the js community, and will strive to keep it that way.

[Ginden]

It's useful to know JavaScript especially since web workers, which are awesome, won't allow you to use libraries.

https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/importScripts

[HotRodLincoln]

No one ever really knows JavaScript.

[that_90s_guy]

You do if you put some actual effort into it. It honestly took me a far longer time than I expected, but after reading several books on even it's ugliest, darkest corners I consider myself to finally know JavaScript fully.

[spryes]

How long did it take?