Welcome to my blog

I'm Agnislav Onufrijchuk, a developer from Ukraine. This blog is dedicated mostly for development-connected notes, how-to recipes and sharing my personal experience.

My current interests include JavaScript, TypeScript, AngularJS, NodeJS etc. I'm going to periodically write about all these and attendant topics. Hope this happens )

Please note than English is not my primary language. One of the purposes for this blog is to have a practice in it. So, if you find any errors, I'll be very grateful if you point me to them.

Jul 2, 2015

How to work with Angular 1.x providers

If you try to understand what providers are in angular 1.x, you risk to break your head. I'd broken. Then I fixed it, closed the doc and went to play with js in a sandbox. Today a friend asked me to explain, what the heck is that and to cook it. The explanation took 5 minutes to write a code and write few sentences. Let me share this arcane knowledge with you too.

Question: When do I need to use provider?
Answer: Only if you need to have your service make something during the configuration phase. You don't need set anything up during configuration phase? You don't need a provider. Use factory or service and be happy.

Question: Why I can't use a factory/service during the configuration phase?
Answer: They're not instantiated yet. More details - on the angular site and on stack overflow.

Question: So, during configuration phase I can use only providers?
Answer: Actually, no. You can use constants too. But we're talking about more complex things, right?

JS Bin on jsbin.com

The code is simple and should give full understanding what's going on. All inside the provider is accessible during the cofiguration phase. this.$get is what gets instantiated as a factory/service. The only difference from a factory/service is that it has access to closured date like _config.

Good luck!

Jun 29, 2015

The pet got a name

Due to a new job I hadn't time enough to write to the blog and commit to the pet repository. Due to a one of the national holidays I've got 3 free days in a row to proceed with both.

So, the news.

The pet got a name.

The API is separated to a dedicated package.
LightCom-API. I believe this is right.

The documentation for both packages got updated.
There are two the most hard duties during development: writing tests and writing documentation. While a lot of efforts are investigation, tests are in mind yet. I believe it's not good and I swear I'll write them down soon. I swear. Yes, I believe in that.

Writing documentation is much easier for me. The most hard thing is to have all your vision in memory and have no ability to write it down immediately. Balls!

Regarding other questions mentioned in the previous post.

EcmaScript 2015 or TypeScript?
TypeScript, definitely. Static typing works great.

Grunt or Gulp?
No one. At this point power of npm is enough. Later, I believe... Gulp. Less configs, more straightforward code.

Mongoose or ...?
Mongoose. Definitely.

JSON-API or ...?
JSON-API. Definitely. Huge thanks to Ethan Resnick for his perfect node package that implements most part of the JSON-API specification.

Angular v1.4 or v2.0?
Still the open question.

P.S. BTW, I've chosen a license too. Guess?

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) {

    basePath: './',

    files: [

    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!