Wolk Software Engineering

by Wolk Software Limited

A group of young and ambitious people dedicated to creating cutting-edge applications in combination with beautiful and functional design.

Page 2


Working with React and TypeScript

An introduction to the development of React applications with Atom and TypeScript

We are about to develop the famous TODO App from the TodoMVC project using React and TypeScript:

Screen Shot 2015-10-12 at 12.20.29 a.m..png

In this post you will learn about the following:

  • 1. Setting up the environment
  • 2. Setting up the project
  • 3. The basics about React components
  • 4. Developing React components with TypeScript
  • 5. Compiling the application
  • 6. Running the application

Let’s get started!

 1. Setting up the environment

We will start by setting up the environment:

  • Download an install Node.js from https://nodejs.org.

  • Install TypeScript and tsd using npm:

$ npm install -g typescript tsd

Note: use sudo if you are using OSX

  • Download and install atom from https://atom.io/.

Screen Shot 2015-10-11 at 11.58.23 p.m..png

  • Install the atom-typescript plugin for atom:
$ apm install atom-typescript

This plugin has some cool features like HTML to TSX:

68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f547970655374726f6e672f61746f6d2d747970657363726970742d6578616d706c65732f6d61737465722f73637265656e732f68746d6c746f7473782e676966.gif

Or dependency

Continue reading →


Decorators & metadata reflection in TypeScript: From Novice to Expert (Part IV)

 An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection.

This article is the fourth part of a series:

  • PART I: Method decorators
  • PART II: Property decorators & Class decorators
  • PART III: Parameter decorators & Decorator factory
  • PART IV: Types serialization & The metadata reflection API

I will assume that you have already read all the previous posts of these series.

In the previous post in this series we learned what are decorators and how they are implemented in TypeScript. We know how to work with class, method, property and parameter decorators, how to create a decorator factory and how to use a decorator factory to implement configurable decorators.

In this post we will learn about:

  • 1. Why we need reflection in JavaScript?
  • 2. The metadata reflection API
  • 3. Basic type

Continue reading →


Decorators & metadata reflection in TypeScript: From Novice to Expert (Part III)

 An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection.

This article is the third part of a series:

  • PART I: Method decorators
  • PART II: Property decorators & Class decorators
  • PART III: Parameter decorators & Decorator factory
  • PART IV: Types serialization & The metadata reflection API

In the previous post in this series we learned what are decorators and how they are implemented in TypeScript. We know how to work with class, method and property decorators.

In this post we will learn about:

  • The remaining type of decorator: the parameter decorator.
  • How to implement a decorator factory.
  • How to implement configurable decorators.

We are going to use the following class to showcase these concepts.

class Person { 

  public name: string;
  public surname: string;

Continue reading →


Decorators & metadata reflection in TypeScript: From Novice to Expert (Part II)

 An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection.

This article is the second part of a series:

  • PART I: Method decorators
  • PART II: Property decorators & Class decorators
  • PART III: Parameter decorators & Decorator factory
  • PART IV: Types serialization & The metadata reflection API

In the previous post in this series we learned that we can find the available decorators signatures in the TypeScript source-code.

We also learned how to implement a method decorator and we answered some basic questions about the way decorators work in TypeScript:

  • Where is decorator being invoked?
  • Who is providing the decorator arguments?
  • Where is the __decorate function declared?

I will assume that you have already read the Part I of these series and you know the answer to these

Continue reading →


Decorators & metadata reflection in TypeScript: From Novice to Expert (Part I)

 An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection.

This series will cover:

  • PART I: Method decorators
  • PART II: Property decorators & Class decorators
  • PART III: Parameter decorators & Decorator factory
  • PART IV: Types serialization & The metadata reflection API

A few months ago Microsoft and Google announced that they were working together on TypeScript and Angular 2.0

We’re excited to announce that we have converged the TypeScript and AtScript languages, and that Angular 2, the next version of the popular JavaScript library for building web sites and web apps, will be developed with TypeScript.

atscript-typescript-ecmascript-javascript--dyn--fullwidth.jpg

 Annotations & decorators

This partnership has helped TypeScript to evolve additional language features among which we will highlight annotations.

Annotations, a way to add

Continue reading →


The end of JavaScript?

 We will no longer write pure JavaScript really soon

I’ve been keeping an eye on the arrival of some ES6 and ES7 features and proposals, as well as some trending JavaScript technologies (particularly Compile-to-JavaScript languages like TypeScript, BabelJS or CoffeeScript) and I dare to predict that we will not longer write pure JavaScript really soon.

 What are your arguments?

I have some arguments to back up my idea:

 1. Compiler emitted metadata

We can find online proposals to add Decorators to ES7, along with a prototype for an ES7 Reflection API for Decorator Metadata. The idea behind decorators and reflection is that we can add some metadata to JavaScript objects in order to add support for some JavaScript features (like Dependency Injection, Runtime Type Assertions or Reflection/Mirroring) that were not possible no longer ago.

These new features will help us to improve the

Continue reading →


Introducing InversifyJS

 A lightweight inversion of control container for TypeScript & JavaScript apps

Untitled.png

A few months ago I started to think about the possibility of creating a requireJS TypeScript fork in order to add dependency inversion (DI) support.

After some time thinking about it, I decided that mixing a dependency loader and an inversion of control (IoC) container wasn’t the best idea (based on the S, the single-responsibility principle, in SOLID principles). So I started to create a stand-alone IoC container for TypeScript & JavaScript apps.

I started the project thinking about how it should work and how it should be used. During that time I had two major influences:

  • My thoughts about how an IoC container should work are highly influenced by a popular open-source IoC container for .NET: Ninject

  • My thoughts about how an IoC container should be used are highly influenced by a great book

Continue reading →


JavaScript and Web Development Trending Productivity Power Tools 2015

test.png

Since January 2015 I’ve been trying to investigate what new libraries, frameworks, languages, etc. are popular these days.

Last year learned a lot MV* frameworks, in particular, about Ember.js, Backbone.js, Chaplin.js and Marionette.js.

I also learned a lot about JavaScript in the MEAP Stack (MongoDB, Express, Angular.js, and Node.js) and about modern web development productivity tools. I mainly worked with Grunt.js and Yeoman.

2014 was a very productive year in knowledge terms. Let’s take a look to the tools, technologies and frameworks that I plan to learn in 2015.

 Browserify & Gulp

I’m planing to migrate the automated builds from Grunt.js to Gulp.js during 2015. There are not huge difference between these two tools but I find the Gulp.js configuration files more clean and easy to follow. Grunt.js is a great tool but it looks like Gulp.js will dominate the throne of the

Continue reading →


SOLID Asp.net Web API Project Organization for maintainability and scalability

I like to organize my Wep API projects using the following solution organization (Sorry for the ugly diagrams…).

1.png

Each circle in the diagram is a .Net project (or DLL) in the solution:

  • Solution.Global: The global DLL contains POCO objects and the public interfaces of all the others DLLs. All the DLLs have a reference to the Global DLL.
  • Solution.IoC: The IoC project declares the bindings between abstractions (interfaces in Global) and implementations (Objects in each DLL). The code of this DLL can easily be re-used.
  • Solution.WebApi: The Web API project is the composition root for the IoC and therefore it is the only DLL that points to the IoC project.
  • Solution.DAL: The application data access layer.
  • Solution.WebClient: The front-end application.

By using this separation we can follow the SOLID principles, for example I can replace the Solution.DAL DLL for a new one by just

Continue reading →


Thoughts on JavaScript IoC containers with Require.js & TypeScript

Lately I’ve been thinking about IoC in JavaScript and I would like to find out the community opinion about my thoughts…

The require.js documentation recommends avoiding the usage of named modules and to let the naming task to the optimization tool:

It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names. The optimization tool needs to add the names so that more than one module can be bundled in a file, to allow for faster loading in the browser.

I understand that by using unnamed modules we must provide the relative path of the module and the path will help us to locate the dependencies of a particular module.

requirejs.config({
    baseUrl: './'
});

define(['models/user_service'], function(userService){
    var users = userService.get();
});

In the example above, the usage of unnamed modules helps us to know where

Continue reading →