May 29, 2015

Pet project: first challenges

Starting working with new technology/approach always leads to a number of questions. It's my first project on Node&Mongo so I've got a number of questions. For some of them I already have answers. For some - not yet.

1. Should I use Coffeescript or/and TypeScript or/and Dart or/and ES6?
After short investigation Dart and Coffee were rejected. Coffee looks very short and clear but it has his own caveats to learn and its support is one-person-dependent. Dart puts a lot of limitations I don't want to play with. So now main choice is between pure ES6 and TS (which, in reality, is ES + static typing).

2. What testing framework to use
Initially I wrote a minimal back-end code and tried Mocha for it. Before I had enough experience with Jasmine and it was neat and shiny. Mocha haven't won my heart (maybe because I'm in love with espresso). So, I'm going to use pretty common solution:
- Jasmine for unit-tests for both back-end and front-end code;
- Protractor (probably) for e2e (some day)
- Karma as a tests runner

3. Directory structure.
Already chose. Will be described in a separate post.

4. Should I use Grunt/Gulp or leave with npm for now? 
Still investigating.

5. What should I use to work with MongoDB?
There's a number of plug'n'play modules for Mongo. Initially I tried monk and mongoskin, but then switched to more heavy but more convenient and powerful Mongoose. Additional benefit is it's supported by a json-api node module.

6. Should I use JSON API for storefront?
I like JSON API approach. It looks great, complete, and convenient. But will it fit all my needs? Or maybe my pet doesn't need such powerful toy and there's something easier to start with? All I need is to have easy and straight JSON-messaging between client and server.

7. What Angular version is to use?
I love Angular. I fall in love when first met it in v1.0.5. I like it's declarative approach. I like how it structures an application. So here were no hesitation between Angular and Ember/Backbone/ReactJS/whatever. But the only question for now is - what version to choose? It's a long-term project, so when (if) it will be usable, Angular2 will be stable. On other hand - if now choose a first version, I can make architecture with Angular2 in mind and have additional experience... Still wondering.

To be continued...

May 20, 2015

How to get started with AngularJS testing using WebStorm

Today I've got a need to write tests for an independent angular directive. Very small package, no express, no grunt, no any pre-built and pre-configured stuff I used to. So, it was like a tiny challenge to get it worked conveniently with as low effort as it's possible.

So, tests. There are two main directions to have them run:

  • run them in browser manually (create html-page, include frameworks, include code to be tested, etc)
  • use test runner like Karma.
The second way looks more convenient and gives few extras that can be useful in future. Let's get it to work!

-1. Pre-requisites. You should have WebStorm and NodeJS installed (don't say "nodejs sucks use io.js" because they're going to merge back to a single code base). 

0. package.json. You should have it in your project directory. If you don't have it - run npm init and accept default values. It will be fast and you can change them later.

1. Install minimal set of dependencies:
npm install jasmine-core karma karma-jasmine angular angular-mocks

2. Set up Karma. In the project root create a file karma.conf.json with the following content:
module.exports = function (config) {
  config.set({

    basePath: './',

    files: [
      'node_modules/angular/angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      'directive.js',
      'directive.spec.js'
    ],

    autoWatch: true,

    frameworks: ['jasmine']
  });
};
3. Set up WebStorm. Here we need 3 steps:
3.1. Turn on Karma plugin:
3.2. Set up syntax highlight and autocomplete for Jasmine. 
  • Go to Settings -> Languages & Frameworks -> JavaScript -> Libraries;
  • Press "Download..." button;
  • In the select box choose "TypeScript community stubs";
  • In the list find and select "Jasmine", then click "Download and Install".

3.3. Create Karma Run configuration:


4. Add npm test command (optional). In case you'll run karma from command-line using npm add the following command to your package.json under "scripts" section:
  "test": "node node_modules/karma/bin/karma start karma.conf.js"

5. Write some tests:

May 12, 2015

My pet

They say pets are crucial part of life. They make you happy, they make you busy, they make you feel uncomfortable and make you grow. Some pets bark, other ones ask to press a button time to time. But there's a kind of pets that live online and can say about a pet owner much more than any ID or CV. I'm talking about pet projects.

I decided to get one. It lives on GitHub (that's pretty obvious), it's written in JavaScript (much more obvious, isn't it?) and it's very small yet. The working title is ecommerce-api.

I worked with e-commerce 4yrs and I really love it. So I decided to implement some kind of simple REST back-end for e-commerce on top of nodejs (btw, may be it's time to think about io.js?).

At the moment I don't have any expected roadmap for it but to be a sandbox for trying new technologies and support/develop my architectural skills. I'll do my best to write about found and tried interesting stuff in this blog.

May 3, 2015

Howto: Configure WebStorm for Angular2 and Typescript 1.5-beta

angular webstorm typescript logos

Yesterday I decided to try Angular 2. The 5 min quickstart guide is pretty simple and straightforward. However, pretty obviously, it doesn't cover how to set up typescript 1.5-beta support in favorite IDE. So, when I reached the step #4, I had to have small break to set up the support.

WebStorm 10 has bundled support for TypeScript 1.4. Angular 2 expects using next version, 1.5 which is still in beta. So, this requires a bit of additional configuration.

"WebStorm 10: TypeScript Support" guide section is very detailed and I recommend it if you're going to use typescript constantly. But for our "try only" purpose we need only 2 configuration points to be set up:

  1. Set TypeScript compiler version
  2. Set command line options

First, open Settings > Languages & Frameworks > TypeScript. By default it's disabled but I believe you already have it enabled. If no - enable it.

Next, set the needed compiler version. This is the most tricky part.
  1. Click the "Edit..." button right after "v1.4 (bundled)" label
  2. In the appeared dialog check "Custom directory" radio button and find a directory with typescript 1.5-beta files. On my Windows system it's located under c:\Users\Me\AppData\Roaming\npm\node_modules\typescript\bin. On MacOS/Linux it probably will be located under ~/.npm/node_modules/typescript/bin or /usr/local/lib/node_modules/typescript/bin.
  3. Click "OK"

Lastly, set "Command line options" to --module commonjs --target ES5. This allows to use angular's definition file and use decorators. More information about available command line options can be found here.

That's it. Good luck!