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

• src: this holds the ES6 library code
• test-es6: this holds the ES6 tests
• test: transpile the tests and library code in this directory. The library code is in the out subdirectory.

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

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:

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.

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

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.

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.

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.

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.

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.

¶ vrijdag, december 19, 2014 0 reacties

Velen denken dat er al te ver gegaan wordt met de fitnesstrackers en smartwatches, maar dit is maar een klein deeltje van wat er gemaakt wordt om gedragen te worden.

Laten we beginnen met de voeten. Hang eens iets aan je schoen om je prestaties bij te houden en je routes te onthouden.

Ben je niet zo sportief. Doe dan een paar rolschaatsen aan met elektrische aandrijving.

Wil je weten hoe de andere delen van je lichaam bewegen, hang een bewegingssensor waar je wil.

Er is zoveel plaats aan je rok of broekrand om dingen aan te hangen, waarom geen thermometer of uv meter en waarom geen lucht kwaliteits meter.

Om jewat meer zichtbaarheid te geven, doe eens een led lamp riem aan.

Fitnesstrackers zijn maar eenzijdig, dus waarom geen fitnesstracker met noodalarm. Nu het over veiligheid gaat geef me dan ineens maar een wachtwoord vervangende armband. Omdat je op je handen loopt doe eens een wandel houding verbeteraar armband aan.

Vergeet het uurwerk niet, maar waarom een smartwatch als je een zonnepaneel annex uurwerk.

Je smartphone vasthouden dat is niet meer van deze tijd, dus draag je de smartphone band.

Voor je vingers ga je low tech met pen/stylus ring en high tech met de smartring.

Waarom zou je handshoenen alleen maar aan doen bij koud weer als ze je muziek kunnen aansturen.

Waarom zouden halskettingen alleen maar mooi mogen zijn. Hang er eens een camera aan. En zorg voor je nek met nektracker.

Omdat google glas creepy is draag je beter een zonneklep.

Als je alles filmt wat voor je gebeurd waarom ook niet alles wat achter je gebeurd.

¶ woensdag, december 03, 2014 0 reacties