Learn JavaScript by Building Your Own JQuery

Mihael Šafarić — Thu, 09 Jul 2015 00:10:00 +0000

So you heard that JavaScript is the best programming language and you’ve decided to become a JavaScript Warrior? LearnQuery will launch you on a wild adventure where you will learn how to use JS swords. Swords? Yeah, swords! You’ll find them, believe me. It’s an adventure after all.

Maybe you’ve wanted to learn JavaScript but have only had bad experiences with simple tutorials that you complete without putting much thought into and that don’t end up teaching you anything except syntax? If this is the case – you’re in the right place.

The story is this – we wanted to train new JavaScript developers in the best possible manner. We wanted a standard learning path to learn quality JavaScript development. We looked around, couldn’t find a solution for our problem – and so decided to scratch our own itch and create one ourselves.

Everybody knows jQuery

If you’re a web developer, chances are you’re familiar with jQuery. Most developers know how to use the popular library, but a very small fraction of them know how jQuery really works internally. This was our starting point – to teach JavaScript and jQuery at the same time. And so, learnQuery was born.

LearnQuery is an open source learning exercise that teaches developers the basics of JavaScript by building their own jQuery clone.

Welcome to the Infinum JavaScript team lad. Shall we begin?

It was developed with the main objective of imparting a strong JavaScript foundation that allows simple and fast mastering of complicated JavaScript concepts. The final product is your own jQuery clone, with a subset of functionality that the actual jQuery has. The main purpose of completing this exercise is that afterwards you’ll have a pretty good impression of how jQuery works under the hood.

LearnQuery structure

In order to successfully solve learnQuery, a student is expected to have a basic knowledge of programming.

LearnQuery is divided into a number of tasks and gradually introduces core JavaScript concepts. The tasks become more challenging as one progresses and by passing through them a student is forced to constantly acquire new knowledge that builds on what was learned in previous tasks.

Each task has its own folder with the following structure:

    00.example: 
        – spec
            example.js
        – src
            example.js
        runner.html

The src folder contains a .js file in which a student must write a function to perform the requested task.

The spec folder contains a .js file which applies specs to the written function. Students are encouraged to write several specs on their own.

The specs are written using the Jasmine framework for testing JavaScript code.

LearnQuery contains the following tasks:

Simple selector

CSS manipulation
CSS class manipulation
DOM manipulation
AJAX request
Event listeners
- Additional event listener trigger
- Event delegation
Make learnQuery

Solving learnQuery

One example task of medium difficulty is provided, and has already been solved. This task introduces basic JavaScript concepts that are applied in subsequent tasks.

Tasks are described with very little or no text at all (just a function definition). Student’s functions must behave just like corresponding jQuery functions.

The goal is to encourage students to do research on their own. Additionally, a student can review the given specs, and from the test descriptions they should be able to deduce how a function should behave.
Jasmine syntax is obvious, so it’s easy to learn and specs are easy to read. For example:

    it(’should cover small numbers’, function() {
        expect(fibonacciCalculator.compute(0)).toBe(1);
        expect(fibonacciCalculator.compute(1)).toBe(1);
    });

Writing your own specs is an important task because it encourages you to think about the corner cases.
By writing specs, a student discovers his bugs and gets familiar with debugging (the best way to learn is from your mistakes).

Mentorship

LearnQuery can be solved without a help of a mentor, but internally, we assign a mentor to each student. A student writes his own specs which allows him to experience the full learnQuery potential. In the other words, a mentor is not necessary, but it’s recommended.

A mentor is a person who advises a student, teaches him good programming practices, and reviews his code. After a code review, a mentor will point out the flaws and/or propose a better solution.

A mentor covers the things that can’t be tested automatically, like, for example, code quality. Additionally, a mentor’s feedback will provide a student with valuable information that will help a student to progress rapidly from task to task.

Don’t give up

Solving learnQuery will probably induce emotional highs and lows. You might require an entire day to solve a very simple task. This is not wasted time, however, because it will help you gain very valuable experience.

Please do not give up!!!

We believe that in the end you will definitely feel the effort is worth it. Solving LearnQuery will probably take a beginner student about two weeks.

Influenced by: Viking Code School Blog

LearnQuery is an open source project and is available on GitHub.