Search document.getElementsByClassNames(...) for href=..... (and not ID=....)

[justsomeguy]

jQuery is between 80 and 100kb when minified, so that's a whole lot of room to play with to add more code in order to make the application more efficient. And really, it's easy enough to write a small set of helper functions for repetitive tasks. There's just no real reason to make that set of helper functions an entire library with awful performance. I can write my own wrapper for document.getElementsByTagName with a shorter name and not have it be 485 times slower, like $('span') is.

 

I understand something though. If you don't care about writing efficient code then I'm not going to be able to convince you, you'll never have a problem importing jQuery so that you can use $('#some_id'), or using multiple libraries on the same page because you found some code in Mootools for a slider that you just have to use, but there's this great Dojo parallax plugin, and sure you might be able to use selectors with those also but you don't want to look it up so you'll just use jQuery for basic selectors. You either prioritize efficient code, or you don't, and if you don't then you'll use whatever libraries you want and never bother to look up performance benchmarks. You'll import hundreds of kilobytes of external dependencies while patting yourself on the back because now you only need to write 1 line of code to fade out an element. I understand that this is the mindset of the modern Javascript programmer.

[thescientist]

I'll only add that although jQuery is helpful in the situations where cross-browser support is required for very old browsers and also for some of it's other nice API's, in general these days I think it is more beneficial to point new developers to native first solutions, especially in teaching exercises like this. If the developer gets into a position where the time spent costs more than the pro / cons of just pulling in jQuery because of some constraint not self-imposed, then that's a time to consider it.

 

Additionally, as an application grows, a developer might instead favor looking into libraries and frameworks like React or Angular to help scale their application, bypassing jQuery altogether in favor of trading some opinionation and the cost including a dependency for quicker and more focused development. The cons of having to pull in a big toolbox or negated these days by more frameworks and libraries being built in a modular fashion, so you only pull in what you need, rather than a monolith.

 

Personally, I find myself writing as much vanilla ES6 as possible, leveraging something like Babel, or the TypeScript compiler (and / or writing TypeScipt). Tools like React, Angular 2, and Aurelia have very small footprints in the actual source code itself, as they let you use just extend their module using ES6 class syntax.

 

To sum it up, just use the right tool for the job, but for learning, I think vanilla ES6 is the way to go.

[justsomeguy]

React kind of rubs me the wrong way with how they've introduced a compiler and changed the syntax so that it's no longer valid Javascript, when I'm reading through the code I feel like putting quotes around everything.

[thescientist]

Are you referring to JSX? I thought so too, but I got over it pretty fast. For me, React components in ES6 look very nice. Here's an example from one of my projects

https://github.com/thescientist13/github-dashboard/

'use strict';
 
import React from 'react';
 
import './user-details.css!';
import { GithubStore } from '../../stores/github/github-store';
 
class UserDetails extends React.Component {
 
  constructor() {
    super();
 
    this.state = {
      avatar: '',
      name: ''
    };
 
    this.getUserDetails();
  }
 
  getUserDetails() {
    let store = new GithubStore();
 
    store.getUserDetails().then(response => {
      this.setState(response.data);
    });
  }
 
  render() {
    return (
      <div className="user-details">
        <img className="user-avatar img-responsive" src={this.state.avatar}/>
        <h1><span className="user-name">{this.state.name}</span></h1>
      </div>
    )
  }
 
}
 
export default UserDetails;

I like Angular syntax too, in particular when using TS. That said, not every tool is for everyone, and I always defer to the team / project / situation.

[justsomeguy]

Yeah, my immediate reaction is to fix that for you.

 

    return (
      '<div className="user-details">' +
        '<img className="user-avatar img-responsive" src={this.state.avatar}/>' +
        '<h1><span className="user-name">{this.state.name}</span></h1>' +
      '</div>'
    )

That's better. Looks like you're missing some function keywords too. And I see a "let". Clearly this isn't Javascript.

[thescientist]

not sure if you are poking fun, but that's pretty much all ES6.

 

Also, JSX is not required in order to use React. You can just write HTML in the render function instead.