JS Learner Forms

Table Of Contents

• Section 1: Introduction
• Section 2: Environment Setup
• Section 3: Using JS Learner Forms
• Section 4: Skills Covered

Introduction

The concept of forms was borrowed from martial arts. Instead of solving new problems over and over in hopes that the language will stick, a form is intended to be repeated movement for movement to develop a relationship with the language and practices of a fluent developer. The student at each form level will learn to identify syntactic patterns while following an intentional and regimented process to promote fluency through a repeated process.

A student of any form will know they are ready to move to the next form when they can demonstrate proficiency in the current form by applying the techniques presented without referring to the example materials. No two programmers are alike so it is understood that the steps someone would follow may vary slightly. This variance is good as it demonstrates a deeper understanding of the ideas presented in the form.

All of the first three forms will use the same tests and will address the questions posed in the tests in the same order. For any proficiency check, the student will be expected to work through the tests by reading them and then providing an appropriate response.

As a student becomes more conversant in a particular form, they are encouraged to apply their knowledge using code katas, like the problems provided by Exercism.io.

Environment Setup

Environment Setup

To use JS Learner Forms, you will need to do the following:

• Install Node.js
• Install Visual Studio Code
• Download and unzip the JS Learner Forms:
  • Download: https://github.com/cmstead/jsLearnerForms/archive/master.zip
  • After downloading, double-click the zip file in your downloads directory
  • Copy the unzipped files to a directory/folder you can remember and find later

Forms Setup

• Set up project
  • open a terminal/command line
  • go to the directory where the JS Learner Forms project is stored
    • Windows: cd c:\path\to\jsLearnerForms
    • Mac: cd /path/to/jsLearnerForms
  • Run the setup script: npm run setup

For a video walkthrough of the setup process, check out the following video:

Using JS Learner Forms

Running a Form

1. Open a terminal/command line in the JS Learner Forms directory (like when you ran the setup)
2. Run the start script: npm start
3. Select run from the main menu
4. Choose the form number (start at 1 if this is your first time)
5. Start Visual Studio Code
6. Open the folder you cloned JS Learner Forms to in your editor
7. Open the test and source files:
   • Test files are found in the test directory
   • Source files are found in the jsforms-source directory

Starting a Form Over

1. From the start script menu, select the reset option.
2. Choose the form number to update

Solving Each Form

1. First Form -- Write code to pass each test
2. Second Form -- Update code to pass new tests, keep old tests green
3. Third Form -- Update code to pass new tests, keep tests old green
4. Test Dummy Form (Fourth Form) -- Write tests matching each description and get all of the code under test (modify ONLY the test code)
5. Async Form -- Write code to pass each test; don't forget the refactoring steps!
6. Async Test Dummy Form (Sixth Form) -- Write tests matching each description and get all of the code under test (modify ONLY the test code)

Skills Covered

This section will be updated as forms are completed and ready for use.

First Form

• Function creation
• Conditional statements
• Calling a function
• Interaction and use of function parameters
• String concatenation
• Mathematical operations and operators
• Built in modules such as the Math module
• Built in functions such as toString and valueOf
• Adding or overriding functions on objects
• Looping
• Arrays
• Nested logic

Second Form

• Inner looping functions
  • Array.prototype.forEach
  • Array.prototype.filter
  • Array.prototype.map
• Ternary expressions
• Instantiable objects
• Closures
• Factory functions
• Higher-order functions

Third Form

• Array.prototype.reduce
• Object immutability
• Generic functions
• Scope management
• Type checking

Test Dummy Form (Fourth Form)

Testing Concepts

• Writing unit tests
• Getting a test harness around untested code
• Test Doubles -- Mocks, fakes, stubs and spies
• Code seams
• Pure and impure functions
• Testing libraries - Mocha, Chai

Code Concepts

• Design Patterns
  • Factories
  • Higher-Order Functions
• Data Access Layers
• Code Organization