Ramblings of a man
Zever van een kieken klinkt niet zo goed
vrijdag, december 19, 2014
  ES6 head first

After being exited about the way the ES6 changes allows me to write cleaner code, it was time i actually wrote some.

The first problem: how do I write ES6 code which is usable today?

There are probably more options but traceur, 6to5 and typescript are the most common.

Typescript isn't an option I explored because next to ES6 syntax it adds its own. For example it has static typing, hence the name.

I tried traceur but the dealbreaker was the need of a runtime for the ES5 code.

So I will use 6to5. For modules you need to add requirejs but that is something I can live with.

The second problem: how do I structure my project?

I'm going to make a ES6 version of the livevalidation library because it is complex enough to go from babysteps to running.

The library usage needs ES6 syntax, this means the tests also need to be written in ES6.
Node supports ES6 using the --harmony flag, but it doesn't support all the 6to5 features.

The solution

This makes it easy to version the code.

Of course there is a node_modules directory, but which javascript project hasn't one these days.

The project setup

After npm init I run npm install 6to5 mocha should --save-dev

{
"name": "livevalidation-es6",
"version": "0.0.0",
"description": "es6 version of livevalidation",
"main": "index.js",
"scripts": {
"test": "node_modules/.bin/6to5 src -d test/out && node_modules/.bin/6to5 test-es6 -d test && mocha"
},
"author": "",
"license": "ISC",
"devDependencies": {
"should": "^4.4.1",
"mocha": "^2.0.1",
"6to5": "^1.15.0"
}
}
view raw package.json hosted with ❤ by GitHub

On line 7 you see the commands that transpiles the library and test code and starts the testrunner.

Start coding (tossing and turning)

The base of the validation library is the validate class that holds the checks you need to determine the form is valid or not.

The most used check Presence has following tests:

import validate from '../test/out/validate';
var should = require('should');
describe('Validate', () => {
describe('Presence', () => {
it('should return true', () => {
validate.Presence('test').should.be.true;
})
it('should return error', () => {
try{
validate.Presence('').should.be.an.instanceof(validate.Error);
}catch(err){
err.name.should.equal('ValidationError');
err.message.should.eql("Can't be empty!")
}
})
it('should return custom error', () => {
try{
validate.Presence('', { errMsg: 'Add a value'}).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql("Add a value")
}
})
})
// other tests ...
});

For the people who aren't familiar with mocha and should I will explain them briefly.
Should extends variables, functions and objects with a should namespace and in that namespace there are assertions that need to be met for the test to pass.
Mocha is a test runner that goes through all the files in the test directory and executes all describe function calls. The it function calls contain the actual tests.

As you can see above the there is one positive test and two negative tests.

You may have noticed I'm using the ES6 (fat) arrow function syntax. Why should I write function(){ when I can use less characters.
Line 1 is the ES6 module syntax.
The rest of the code must look familiar for people that used livevalidation and/or mocha-should before.

Now lets write the code to pass the tests.

class Validate {
static Presence(value, paramsObj = { errMsg: "Can't be empty!"}) {
if(value === '' || value === null || value === undefined){ Validate.fail(paramsObj.errMsg); }
return true;
}
// other methods ...
}
export default Validate

I'm going to add the original code as a reference.

var Validate = {
Presence: function(value, paramsObj){
var paramsObj = paramsObj || {};
var message = paramsObj.failureMessage || "Can't be empty!";
if(value === '' || value === null || value === undefined) Validate.fail(message);
return true;
}
}

As you can see instead of using an object expression to create the class, the ES6 code uses the keyword class.

Another thing you might notice it uses a functioncreatelike syntax instead of a jsonlike syntax. The keyword static looks very recognisable for people who have used object-oriented languages.

The last ES6 syntax related code of the Presence method is the default value for the paramsObj.

As you can see the class method only contains the actual code, which makes it easier to read than the original code.

The last line of the class file is the ES6 syntax for modules. Each module can have multiple exports, but it can only have one export default.

Crawling

Now that I have written code you can find in all the ES6 tutorials let's go a step further with the Numericality method.

Numericality: function(value, paramsObj){
var suppliedValue = value;
var value = Number(value);
var paramsObj = paramsObj || {};
var minimum = ((paramsObj.minimum) || (paramsObj.minimum == 0)) ? paramsObj.minimum : null;;
var maximum = ((paramsObj.maximum) || (paramsObj.maximum == 0)) ? paramsObj.maximum : null;
var is = ((paramsObj.is) || (paramsObj.is == 0)) ? paramsObj.is : null;
var notANumberMessage = paramsObj.notANumberMessage || "Must be a number!";
var notAnIntegerMessage = paramsObj.notAnIntegerMessage || "Must be an integer!";
var wrongNumberMessage = paramsObj.wrongNumberMessage || "Must be " + is + "!";
var tooLowMessage = paramsObj.tooLowMessage || "Must not be less than " + minimum + "!";
var tooHighMessage = paramsObj.tooHighMessage || "Must not be more than " + maximum + "!";
if (!isFinite(value)) Validate.fail(notANumberMessage);
if (paramsObj.onlyInteger && (/\.0+$|\.$/.test(String(suppliedValue)) || value != parseInt(value)) ) Validate.fail(notAnIntegerMessage);
switch(true){
case (is !== null):
if( value != Number(is) ) Validate.fail(wrongNumberMessage);
break;
case (minimum !== null && maximum !== null):
Validate.Numericality(value, {tooLowMessage: tooLowMessage, minimum: minimum});
Validate.Numericality(value, {tooHighMessage: tooHighMessage, maximum: maximum});
break;
case (minimum !== null):
if( value < Number(minimum) ) Validate.fail(tooLowMessage);
break;
case (maximum !== null):
if( value > Number(maximum) ) Validate.fail(tooHighMessage);
break;
}
return true;
}

ES6 has the default parameters, but because it is a single parameter it will not keep the default values once you add an object in the function call.
To keep the defaults there needs to be a method that merges them with the object in the function call. A simple method for this is:

static mergeObj(out, replacements = null){
  if(!replacements){ return out; }

  for(let attr in out){
    if(replacements.hasOwnProperty(attr)){
      out[attr] = replacements[attr];
    }
  }

  return out;
}

This allows me to create a NumericalityConfig method which contains the defaults object and calls the mergeObj code.
Now I can write my tests.

describe('Numericality', () => {
it('should be true', () => {
validate.Numericality(2).should.be.true;
validate.Numericality('2').should.be.true;
validate.Numericality(0).should.be.true;
validate.Numericality(-2).should.be.true;
validate.Numericality(2.5).should.be.true;
validate.Numericality(2, validate.NumericalityConfig({isInteger: true})).should.be.true;
validate.Numericality(1.123e3, validate.NumericalityConfig({isInteger: true})).should.be.true;
validate.Numericality('1.123e3', validate.NumericalityConfig({isInteger: true})).should.be.true;
validate.Numericality(0, validate.NumericalityConfig({isInteger: true})).should.be.true;
validate.Numericality(9, validate.NumericalityConfig({exactNr : 9})).should.be.true;
validate.Numericality(9, validate.NumericalityConfig({minimum: 9})).should.be.true;
validate.Numericality(10, validate.NumericalityConfig({minimum: 9})).should.be.true;
validate.Numericality(9, validate.NumericalityConfig({maximum: 10})).should.be.true;
validate.Numericality(10, validate.NumericalityConfig({maximum: 10})).should.be.true;
validate.Numericality(9, validate.NumericalityConfig({minimum: 9, maximum: 10})).should.be.true;
validate.Numericality(10, validate.NumericalityConfig({minimum: 9, maximum: 10})).should.be.true;
})
it('should return a number error', () => {
try{
validate.Numericality('a').should.be.an.instanceof(validate.Error);
}catch(err){
err.name.should.equal('ValidationError');
err.message.should.eql('Must be a number!');
}
})
it('should return a custom number error', () => {
try{
validate.Numericality('a', validate.NumericalityConfig({notNrErrMsg: 'Not a number!'})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Not a number!');
}
})
it('should return an integer error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({isInteger: true})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must be an integer!');
}
})
it('should return a custom integer error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({isInteger: true, notIntErrMsg: 'Not an integer!'})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Not an integer!');
}
})
it('should return an exact number error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({exactNr: 1})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must be 1!');
}
})
it('should return a custom exact number error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({exactNr: 1, wrongNrErrMsg: (exact) => `The number must be ${exact}!`})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('The number must be 1!');
}
})
it('should return a minimum error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({minimum: 2})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must not be less than 2!');
}
})
it('should return a custom minimum error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({minimum: 2, tooLowErrMsg: (min) => `${min} or higher!`})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('2 or higher!');
}
})
it('should return a maximum error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({maximum: 1})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must not be more than 1!');
}
})
it('should return a custom maximum error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({maximum: 1, tooHighErrMsg: (max) => `${max} or lower!`})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('1 or lower!');
}
})
it('should return a range error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({minimum: 1, maximum: 1})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must be not less than 1 and not more than 1!');
}
})
it('should return a custom range error', () => {
try{
validate.Numericality(1.5, validate.NumericalityConfig({minimum: 1, maximum: 1, notInRangeErrMsg: (min, max) => `Must be in the ${min}-${max} range!`})).should.be.an.instanceof(validate.Error);
}catch(err){
err.message.should.eql('Must be in the 1-1 range!');
}
})
});

There is only one positive test because the output of all the assertions is the same and there are 12 negative tests.
The ES6 syntax you can see in these test is a template string. Instead of writing "My name is " + name you can write `My name is ${name}`. It gives more context to the variable. Because a template string is executed directly you need to wrap it in a function to defer the execution.

Lets look at the code of NumericalityConfig and Numericality.

static NumericalityConfig(config = null) {
var defaults = { notNrErrMsg: "Must be a number!",
isInteger: false, notIntErrMsg: "Must be an integer!",
minimum: null, tooLowErrMsg: (min) => `Must not be less than ${min}!`,
maximum: null, tooHighErrMsg: (max) => `Must not be more than ${max}!`,
notInRangeErrMsg: (min, max) => `Must be not less than ${min} and not more than ${max}!`,
exactNr: null, wrongNrErrMsg: (exact) => `Must be ${exact}!`
};
return Validate.mergeObj(defaults, config);
}
static Numericality(value, paramsObj = { notNrErrMsg: "Must be a number!",
isInteger: false, notIntErrMsg: "Must be an integer!",
minimum: null, tooLowErrMsg: (min) => `Must not be less than ${min}!`,
maximum: null, tooHighErrMsg: (max) => `Must not be more than ${max}!`,
notInRangeErrMsg: (min, max) => `Must be not less than ${min} and not more than ${max}!`,
exactNr: null, wrongNrErrMsg: (exact) => `Must be ${exact}!`
}) {
var val = Number(value);
if(isNaN(val)){ Validate.fail(paramsObj.notNrErrMsg); }
if (paramsObj.isInteger && (/\.0+$|\.$/.test(String(value)) || val != parseInt(val)) ){ Validate.fail(paramsObj.notIntErrMsg); }
if(paramsObj.exactNr){
var exactNr = Number(paramsObj.exactNr);
if(isNaN(exactNr)){ throw Error('exactNr is not a number!'); }
if(val !== exactNr){ Validate.fail(paramsObj.wrongNrErrMsg(paramsObj.exactNr)); }
}
if(paramsObj.minimum && paramsObj.maximum){
let minimum = Number(paramsObj.minimum);
let maximum = Number(paramsObj.maximum);
if(isNaN(minimum)){ throw Error('minimum is not a number!'); }
if(isNaN(maximum)){ throw Error('maximum is not a number!'); }
if(val < minimum || val > maximum){ Validate.fail(paramsObj.notInRangeErrMsg(minimum, maximum)); }
}
if(paramsObj.minimum){
let minimum = Number(paramsObj.minimum);
if(isNaN(minimum)){ throw Error('minimum is not a number!'); }
if(val < minimum){ Validate.fail(paramsObj.tooLowErrMsg(minimum)); }
}
if(paramsObj.maximum){
let maximum = Number(paramsObj.maximum);
if(isNaN(maximum)){ throw Error('maximum is not a number!'); }
if(val > maximum){ Validate.fail(paramsObj.tooHighErrMsg(maximum)); }
}
return true;
}

Again you see the method only contains the code needed to do the checks.
You also see that the error messages with a template string get called with the value(s) that are needed in the string.

Taking a break

If you would copy all the code and run the tests it would would fail. This is because I haven't shown you the error code of the validate class.

static fail(errorMessage) {
throw new Validate.Error(errorMessage);
}
static Error(errorMessage) {
this.message = errorMessage;
this.name = 'ValidationError';
}

It already has been a lot to take in so I'm going to end it here. Later posts will show the other parts where ES6 improves the code.

 
Reacties: Een reactie posten



<< Begin

RECENT
WIDGETS
ARCHIEF
augustus 2006
september 2006
oktober 2006
november 2006
december 2006
januari 2007
februari 2007
maart 2007
april 2007
mei 2007
juni 2007
juli 2007
augustus 2007
september 2007
oktober 2007
november 2007
januari 2008
maart 2008
april 2008
mei 2008
juni 2008
juli 2008
augustus 2008
september 2008
december 2008
februari 2009
april 2009
juni 2009
december 2009
februari 2010
februari 2011
december 2014
september 2015