Strategy and Factory patterns in Typescript

I've recently read the dzone article Design Patterns: The Strategy and Factory Patterns which gives clean example of how design patterns such as Strategy and Factory patterns can improve code structure in every day programming tasks.
I've converted the JAVA syntax used in the article to Typescript, to see how close are the language constructs in those two. Here's the gist with the code:

	// see article with examples in JAVA here: https://dzone.com/articles/design-patterns-the-strategy-and-factory-patterns
	// example for educational purposes shownig close and mature syntax of modern TypeScript
	enum AccountTypes {CURRENT, SAVINGS, HIGH_ROLLER_MONEY_MARKET, STANDARD_MONEY_MARKET}
	////////////////////////////////////////
	/// the interface that is used by the strategy
	////////////////////////////////////////
	interface InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number;
	}
	////////////////////////////////////////
	/// Null object implementation and 4 account type related calculation stategies
	////////////////////////////////////////
	class NoInterestCalculation implements InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number {
	return 0;
	}
	}
	class CurrentAccountInterestCalculation implements InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number {
	return +accountBalance * (0.02 / 12);
	}
	}
	class SavingsAccountInterestCalculation implements InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number {
	return +accountBalance * (0.04 / 12);
	}
	}
	class MoneyMarketInterestCalculation implements InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number {
	return +accountBalance * (0.06/12);
	}
	}
	class HighRollerMoneyMarketInterestCalculation implements InterestCalculationStrategy {
	calculateInterest(accountBalance:Number):Number {
	return accountBalance < 100000.00 ? 0 : (+accountBalance) * (0.075/12)
	}
	}
	////////////////////////////////////////
	/// select and apply the correct strategy
	////////////////////////////////////////
	class InterestCalculationStrategyFactory {
	//Strategies for calculating interest.
	private currentAccountInterestCalculationStrategy:InterestCalculationStrategy = new CurrentAccountInterestCalculation();
	private savingsAccountInterestCalculationStrategy:InterestCalculationStrategy = new SavingsAccountInterestCalculation();
	private moneyMarketAccountInterestCalculationStrategy:InterestCalculationStrategy = new MoneyMarketInterestCalculation();
	private highRollerMoneyMarketAccountInterestCalculationStrategy:InterestCalculationStrategy = new HighRollerMoneyMarketInterestCalculation();
	private noInterestCalculationStrategy:InterestCalculationStrategy = new NoInterestCalculation();
	public getInterestCalculationStrategy(accountType:AccountTypes):InterestCalculationStrategy {
	switch (accountType) {
	case AccountTypes.CURRENT: return this.currentAccountInterestCalculationStrategy;
	case AccountTypes.SAVINGS: return this.savingsAccountInterestCalculationStrategy;
	case AccountTypes.STANDARD_MONEY_MARKET: return this.moneyMarketAccountInterestCalculationStrategy;
	case AccountTypes.HIGH_ROLLER_MONEY_MARKET: return this.highRollerMoneyMarketAccountInterestCalculationStrategy;
	default: return this.noInterestCalculationStrategy;
	}
	}
	}

view raw typescript-strategy-and-factory-patterns.ts hosted with ❤ by GitHub

React, Redux architecture notes

After some discovering of the React JS (and Redux of course) as a way to build modern web apps, I've collected some keynotes that could have helped the newbie to start off faster.

modern webapp starter packages - typescript, es6, redux etc.

Recently I've created couple of starter repositories with configured modern client-side stack. Main goal was to avoid using major frameworks (like Angular or React) built in but to have the best tooling which goes together with them. It was mostly for personal use and training skills. Hopefully it may save you some time - because, you know, cutting off boilerplate code is less efficient than starting with a small and clean project customising it for you purposes later.

es6-webpack-starter 
contains webpack powered app using Redux (with no React) and set of libraries for data handling and routing. On a UI side there's a material design library attached + LESS configured.

systemjs-typescript-simple 
Typescript (without Angular) with systemjs built application.


In addition - yet another react starter kit but not overloaded with all kinds of plugins and best practices examples. Clean and really simple to bootstrap.
https://github.com/alicoding/react-webpack-babel

Android app development quick start

I've been diving into native Android application development with Android Studio lately. It went quite well, thanks to lots of available tutorials and large community on Stackoverflow.

As a result of last 2 weeks I've created this gist with links and code snippets for Android development that will hopefully help you to bootstrap. 

Full gist is inside of the post.

Angular attack 2016 hackathon review

It was a first experience of an online hackathon for me. On the one hand with doing hackathon online you don't have that close interaction with other participants, looking at each other's screens, having fast-food-and-beer dinner together and don't feel this unity of people involved, gathered in one place to achieve something.
However, on the other hand that makes your team more flexible in time and work planning during a weekend time. It also helps to gather an order of magnitude more participants across the globe.

Please find my view on the passed Angular Attack 2016 below:

Pipes in Angular2

Pipes are Angular 1.x filter being rethink. Pipes can be defined with special decorator @Pipe.
This entity can accept a value plus additional options parameters and return a transformed result.
By default you have available: DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe;

Google Chrome extension development tips

1) Get manifest.json properties of running chrome extension
chrome.runtime.getManifest() 

2) Integrate live google search in google chrome extension

Sample code below, supposingly using jQuery.UI widget with <input id="googleSearch">:

$("#googleSearch").autocomplete({
   source: function(request, response) { 
    $.ajax({ url: "https://suggestqueries.google.com/complete/search?client=chrome&q=",
  dataType: "jsonp",
  data: { q: request.term },
  success: function(data) { response(data[2].splice(0, 15)); } }); },
  minLength: 1,
  select: function(event, ui) { 
   var value = ui.item.label;
   if (ui.item.label.indexOf("http://") === -1 &&      ui.item.label.indexOf("https://") === -1)
  { 
   value = "http://google.com/search?q=" + value }
   document.location = value; 
 }
});

Catchups on Angular2 and TypeScript

How to define arrays in the interface and class properties in TypeScript
How-to's on using services, router and templates in Angular2

and many more coming...

RSS reader with in NodeJS example

Readline module is used to read and write data in console. Full docs on Readline module in NodeJS
In this example the list of RSS channels from Yandex.news
To call the script you should use type: node --harmony cmd.js

	/*
	Readline module is used to read and write data in console.
	Full docs on Readline - https: //nodejs.org/api/readline.html
	In this example the list of RSS channes from Yandex.news - https: //news.yandex.ru/export.html
	To call the script you should use type: 'node --harmony cmd.js'
	*/
	// Adding needed modules:
	// readline - reads console ine
	// request - does http resquests
	// parser - parses the responses
	const readline = require('readline');
	const r = require('request');
	const parser = require('/usr/local/lib/node_modules/xml2json/');
	// Script variables:
	// currentState - flag showing what news type to show
	// items - list of news in the RSS
	// rsss - list of RSS litst
	var currentState = 'general';
	var items = [];
	const rsss = [{
	'title': 'Hardware',
	'url': 'https://news.yandex.ru/hardware.rss'
	}, {
	'title': 'Science',
	'url': 'https://news.yandex.ru/science.rss'
	}, {
	'title': 'Finances',
	'url': 'https://news.yandex.ru/finances.rss'
	}, {
	'title': 'Society',
	'url': 'https://news.yandex.ru/society.rss'
	}, {
	'title': 'Internet',
	'url': 'https://news.yandex.ru/internet.rss'
	}, {
	'title': 'Netherlands',
	'url': 'https://news.yandex.ru/Netherlands/index.rss'
	}, {
	'title': 'Football',
	'url': 'https://news.yandex.ru/football.rss'
	}, {
	'title': 'Law',
	'url': 'https://news.yandex.ru/law.rss'
	}];
	//init Readline interface
	const rl = readline.createInterface({
	input: process.stdin,
	output: process.stdout
	});
	//Below there are several handlers
	// - loadChannel, channelAnswers, generalAnswers, loadGeneral
	// their names should be pretty self-explanatory
	var loadChannel = function(e) {
	currentState = 'channel';
	var ch = JSON.parse(e).rss;
	items = ch.channel.item;
	console.log('|| ', ch.channel.title);
	items.forEach((x, i) => {
	console.log((i + 1) + ' - ' + x.title);
	});
	console.log('>> Select item to read (0 - for level up)');
	}
	var channelAnswers = function(answer) {
	if (!items[answer]) {
	console.log('Wrong item number');
	} else {
	console.log('|| ', items[(answer - 1)].title);
	console.log(items[(answer - 1)].description);
	console.log('>> Enter next command...');
	}
	}
	var generalAnswers = function(answer) {
	if (!rsss[answer]) {
	console.log('Wrong channel number');
	}
	r(rsss[(answer - 1)].url, function(error, response, body) {
	if (!error && response.statusCode == 200) {
	loadChannel(parser.toJson(body));
	}
	})
	}
	var loadGeneral = function() {
	console.log('Please select channel to read out of ' + rsss.length + '\n');
	rsss.forEach((x, i) => {
	console.log((i + 1) + ' - ' + x.title);
	});
	currentState = 'general';
	console.log('>> Enter id from 1 to ' + rsss.length + ':');
	}
	//Main Readline event handler
	rl.on('line', (answer) => {
	if (answer == 0) {
	loadGeneral();
	return;
	}
	//quit it user presses 'x' or 'q'
	if (answer == 'x' || answer == 'q') {
	console.log('Bye!');
	process.exit(0);
	}
	(currentState == 'general') ? generalAnswers(answer): channelAnswers(answer);
	});
	/*
	This is relatively simple example.You can extend this one or use one of the advanced modules working with cli in NodeJS.
	For example this: https: //github.com/chriso/cli
	*/
	//JS module syntax - default function to call when module file in called
	module.exports.default = loadGeneral();

view raw cli-rss-reader.js hosted with ❤ by GitHub

Displaying icons in angular material app

There are several ways to display icons in angular material application. It's described in the angular material documentation. However my team had problems with making work the svg-based mdIcon directive so we had to investigate what are the other solutions people use.

1) Use icon Font
The simplest way. You need to include link to the font css in <head> tag of your application:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2) Use custom directive
Used in this nice Codepen demo: http://codepen.io/kyleledbetter/pen/gbQOaV
File http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js injects a list of icons and a directive. As a result you get ngMdIcons directive and icons can be included with following syntax in your templates: <ng-md-icon icon="search"></ng-md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.

3) Use template cache
File http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js injects map of named SVG paths and puts it into Angular $templateCache.
Usage in the template:
<md-icon md-svg-icon="alarm" style="color: #0F0;" aria-label="Alarm Icon"></md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.

Links list of various Javascript conferences

• 50+ videos 2010-2016
• 10 best talks from Frontendconf 2015 (RU)
• JSConf US 2015
• JSConf UE 2015
• NGConf 2015
• MoscowJS videos (RU)
• JSConf Uruguay 2016
• Node Conf London 2016

view raw js-conf-videos-list.md hosted with ❤ by GitHub