Newbies Guide to Aurelia and TypeScript

npxbj[1] So, after about 24 hours trying to understand and establish a workflow for a new JS framework called Aurelia and TypeScript, I think I've finally forged a path to use both in harmony.

First, some important concepts

Aurelia is written in ES6/ES7. Aurelia is distributed through jspm. The Aurelia distribution through jspm is ES5 code. Aurelia ES5 via jspm is runnable inside your browser.

If you plan on writing view models in TypeScrypt then all you need to be concerned about is transpiling your App.ts (*.ts) View Models into ES5 code.

Get the Tools

To get setup, you're going to need:

NodeJS

Git

Be sure you can access git and npm from the command line before continuing.

Setup the Framework

Next, in a command prompt make sure you have the following installed:

npm install jspm -g

npm install tsd -g

At this point, you should go to your github account and create an access token for jspm because jspm will hit a lot of github repos when resolving dependencies. This means you can run up against an anonymous rate limit rather quickly.  Also, ensure the token you generate also has "public_repo" permission with it; otherwise you'll run up against the same rate limit as an anonymous user and jspm requests will get 404s.

Use the following command to configure jspm and github:

jspm registry config github

Create a working folder for your project, and:

tsd init

jspm install aurelia-framework

jspm install aurelia-bootstrapper

Copy all the *.d.ts type definitions inside "jspm_packages\github\aurelia" into a new folder "\typings\aurelia".

Then run in the root of your project folder:

tsd rebundle

>> added:
    - aurelia/aurelia-binding.d.ts
    - aurelia/aurelia-dependency-injection.d.ts
    - aurelia/aurelia-event-aggregator.d.ts
    - aurelia/aurelia-framework.d.ts
    - aurelia/aurelia-history-browser.d.ts
    - aurelia/aurelia-history.d.ts
    - aurelia/aurelia-loader-default.d.ts
    - aurelia/aurelia-loader.d.ts
    - aurelia/aurelia-logging-console.d.ts
    - aurelia/aurelia-logging.d.ts
    - aurelia/aurelia-metadata.d.ts
    - aurelia/aurelia-path.d.ts
    - aurelia/aurelia-route-recognizer.d.ts
    - aurelia/aurelia-router.d.ts
    - aurelia/aurelia-task-queue.d.ts
    - aurelia/aurelia-templating-binding.d.ts
    - aurelia/aurelia-templating.d.ts

Your "typings\tsd.d.ts" file should have all the necessary references now.

Note: There is a TypeScript bug in "aurelia/aurelia-binding.d.ts", see Issue 124 for the fix.

Almost there ...

Get corejs.d.ts and es6.d.ts from this repo and add both into "typings\". You will need to reference these in your *.ts files.

At this point, you can create an empty MVC project inside your working folder at root level. Configure your routes and add a simple view with (no layout). IE: Your .csproj file should be in the same directory with your proejct.json and config.js file.

If you're using Visual Studio, make sure your TypeScript compiler "Module system" is set to AMD. Project > Properties > TypeScript Build: Module system

image 

Create an app.ts file in the root project folder:

/// <reference path="typings/tsd.d.ts" />
/// <reference path="typings/es6.d.ts" />
/// <reference path="typings/core-js.d.ts" />

import {Router} from 'aurelia-router';

export class App {
    constructor() {
        this.message = "Hello World";
    }

    message:string;
}

console.log("THIS APP RAN!");

SAVE. Your app.ts -> app.js should have AMD module layout.

Create an app.html view in the root project folder:

<template>
    
    <h2>My App</h2>
    
    <span>${message}</span>

</template>

Save.

Create an index.cshtml file (Razor / No Shared Layout) or plain html file (without ~ src paths):

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/jspm_packages/system.js"></script>
    <script src="~/config.js"></script>
    <title></title>
</head>
<body aurelia-app>
    
    <script>
        System.import("aurelia-bootstrapper");
    </script>
</body>
</html>

SAVE.

Run the app, make a request for the application index and poof!

image

Much success. :)

 

PRO TIP: Going the extra mile to get decorators working with Dependency Injection

If you're using Gulp, this is really easy, use a tsconfig.json  and enable emitDecoratorMetadata CompilerOptions flag.

If you're using Visual Studio 2013, unload your .csproj, and edit the configuration. Locate the following MSBuild props and add TypeScriptAdditionalFlags:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptModuleKind>amd</TypeScriptModuleKind>
    <TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags>
</PropertyGroup>

SAVE. Reload the project. Better, restart Visual Studio to make sure these changes really take effect. Hit the "Rebuild" on your project and you should now see your decorators working. How? You should see __metadata in the output:

image

Unfortunately, I don't think this will work with compile-on-SAVE option in VS.

 

PRO TIP: Using jspm to use packages that are not "officially" in the global registry

Credits to @grofit for the tip:

jspm's global register is rather limited compared to something like bower.io. For example, toastr isn't inside the jspm registry, but you could do this:

jspm install github:CodeSeven/toastr

     Looking up github:CodeSeven/toastr
     Updating registry cache...
     Downloading github:CodeSeven/toastr@2.1.1
ok   Installed CodeSeven/toastr as github:CodeSeven/toastr@^2.1.1 (2.1.1)
ok   Install tree has no forks.

ok   Install complete.

Have fun :)

Brian Chavez

Date Recurrence Library for .NET/C#

 

It's quite unfortunate stackoverflow is closing down questions like this:

Actually, I wish they changed this policy since the field of "what's best" is constantly changing. Normally, I'd contribute to the question and others would vote on that suggestion. The best answer usually bubbles up to the top and *that* is useful. New libraries are created all the time.

Anyway, for those of you looking for a date recurrence library, I'd like to recommend:

There are others, but I've used this before and works really well. The main class you'll need to work with is the Recurrence  in the EWSoftware.PDI name space. For example:

[Test]
public void test()
{
    var r = new Recurrence();
    r.RecurDaily(2);

    var starting = DateTime.Today;
    var ending = DateTime.Today.AddDays(7);

    var dates = r.InstancesBetween(starting, ending);
    foreach( var occurrence in dates )
    {
        Console.WriteLine(occurrence);
    }
}

OUTPUT:

5/25/2015 12:00:00 AM
5/27/2015 12:00:00 AM
5/29/2015 12:00:00 AM
5/31/2015 12:00:00 AM

Also, if you find it useful, consider making a donation to him. I actually bought a license to his PDI library way back when before he open-sourced it. He's also the author of the VS2013 spell checker plug-in. Legit.

RethinkDB Gems

After idling in the RethinkDB freenode IRC chat, I think I'm going to start a collection of very good Q/A that I see:

<dubcanada> One more question, is there an easy way to duplicate all the content in the DB
<dubcanada> I'm trying to fill it up with a ton of records for testing but it seems to be taking forever lol
<AtnNn> dubcanada: you can do something like r.table('foo').insert(r.table('foo').without('id'))

Search for documents without field:

<nicklovescode> what's the best way to search for documents without a field? I tried .filter({ foo: undefined }) but that got an error
<srh_> nicklovescode: you can use .filter(r.row.hasFields('foo').not())

How to implement failover:

20:20 <bg__> i also have a question regarding failovers
20:22 <bg__> until #223 is resolved, is there a suggestion regarding how I should handle failovers? Meaning, if i have services that are using my rethinkdb, and I have tables that have replicas, how can I ensure I'm not trafficing requests to an unresponsive node?
20:23 <neumino> You need to have a connection opened to the server
20:23 <neumino> If the connection is dropped
20:23 <neumino> You can try to connect to another server
20:23 <bg__> okay. so lets say i have web1 and web2 which are nodejs web servers
20:24 <bg__> and they handle requests that require them connecting to rethinkdb and reading from one table
20:24 <bg__> and because im afraid of one serving dying in the middle of the night, i have two rethinkdb servers, rethink1 and rethink2
20:25 <bg__> what connection string do I use to have web1 and web2 connect to rethink1 and rethink2 that protects me if rethink1 or rethink 2 goes down
20:25 <bg__> i only have web1 and rethink1 right now. web1 explicitly connects to rethink1
20:25 <bg__> but I'm reaching a point where that is not safe
20:26 <neumino> Hum
20:26 <bg__> did that make sense?
20:27 <neumino> bg__, if the master of your table fails, you won't be able to write until you declare the master dead
20:27 <neumino> We currently don't have a nice way to do it, but the coreos folks did it that way:
20:27 <neumino> They fetch `http://server:8080/ajax`
20:27 <neumino> They fetch `http://server:8080/ajax/issues`
20:27 <neumino> If there is a dead machine
20:28 <neumino> They start a script that is going to kill it using `rethinkdb admin`
20:29 <bg__> ah ha.
20:29 <bg__> i did not know about those two end points
20:30 <bg__> i was going to have a script that polled the server
20:30 <bg__> i just wasnt sure what endpoint to use
20:30 <bg__> those seem to do the trick
20:31 <bg__> thanks@!
20:31 <bg__> is there any documentation about that?
20:32 <neumino> Hum not really :/
20:32 <neumino> If you start `rethinkdb admin`
20:32 <neumino> And then send `help`, you should get the docs for `rethinkdb admin`
20:32 <neumino> For `ajax/issues`, there is no doc for now
20:33 <neumino> Try to kill a server and you will see the error you get
20:33 <bg__> i meant /ajax and /ajax/issues
20:33 <neumino> It's something like "DEAD_MACHINE" I think
20:33 <neumino> Oh
20:33 <bg__> both seem very important to someone trying to use rethinkdb as a distributed system
20:33 <bg__> getting around this isn't difficult now that i know about those
20:42 <bg__> just out of curiousity, when you say 'the way the coreos folks did it' what do you mean?
20:45 <neumino> Oh, the engineers at coreos needed to set up a kind of failover with rethinkdb
20:45 <neumino> and that's what they did
20:45 <neumino> It's kind of the only solution now ^^
20:45 <neumino> (well you could skip `rethinkdb admin` and craft post request like the web interface do
20:46 <bg__> oh, got it.
20:46 <bg__> its a great solution for now.

Performance filtering:

<thelinuxlich> something that is bugging me these days
<thelinuxlich> is it more performant to do a filter before or after a eqJoin ?
<AtnNn> if your filter only needs fields from the left table, it is better to filter before the join
<AtnNn> thelinuxlich: ^
<thelinuxlich> AtnNn: what if it uses a single field on the right side, should I filter before eqJoin on the left and after eqJoin on the right?
<AtnNn> yes, if you can independently filter from both tables
<thelinuxlich> this is a bit confusing

Convert Unix Endings to DOS/Windows using Cygwin/TCSH

Small note for me, which converts all *.cs files recursively in a directory:

find ./**/*.cs -type f -exec unix2dos {} \;

Happy coding,
Brian Chavez

Visual Studio 2013 Loading Splash Screen Slow

I recently experienced Visual Studio 2013 loading very slowly at the splash screen. It was noticeable since I'm on a very fast dev box and accustomed to VS 2013 loading very fast (normally under 10 seconds).

So, something defiantly changed.

Problem turns out that I had recently opened a project under Git source control located on a remote share.

The remote share was no longer available, yet, the Team Foundation Git Source Control provider was still probing the network share which took up a significant part of the loading time. I suppose the Git provider was waiting for a network timeout.

Anyway, to resolve the issue simply remove the offending network shares under Git source control located here:

HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0\TeamFoundation\GitSourceControl\Repositories

Under the Repositories key, you'll find a stash of GUIDs for each project the Git provider keeps track of. Locate the offending GUID keys that contain the network shares you want to remove and remove the entire GUID entry (along with the contents) -- and all should be well.

Happy coding,
Brian Chavez

@functions "This is not a valid location for a breakpoint" in Visual Studio 2013

Working with Visual Studio 2013 and I tried to set a breakpoint in "@fucntions" bout got back an error message that read:

This is not a valid location for a breakpoint.

image

That's funny, because it works in Visual Studio 2012. See:

image

Oh well, as a work around, move the @functions block up to the beginning of the cshtml razor view, and you should be able to once again set breakpoints:

image

Why? Who knows. :/

-Brian

Installing Freelan on Windows Server 2012

So, I was trying out Windows Server 2012. I tried installing freelan (http://www.freelan.org) as a service. If you know me, I'm a big fan of freelan, but for some reason, after every cold boot, there was no connectivity to the node over VPN. Specifically, this problem was only occurring on Windows Server 2012.

Generally speaking, I think it has to do with the freelan acquiring the OpenVPN TAP adapter. Changes in the operating system driver infrastructure in Windows Server 2012 somehow goofs up the freelan application as it tries to initialize itself and the driver.

Turns out, you need to force the TAP adapter to a connection state of "Always Connected". Somehow, when the TAP adapter is set to "Always Connected", Windows then makes the TAP adapter available to the OS networking infrastructure. So when freelan tries to initialize it, it's available for use. Network problem solved.

Here's how to do it. First, open the TAP adapter status, then click Properties.

image

Next, click Configure.

image

Set the Media Status to Always Connected.

This probably has a lot to do with people generally using OpenVPN's TAP adapter on Windows 8 or 8.1 too. Or, maybe freelan is just packaged with an old out-dated OpenVPN TAP adapter.

https://forums.openvpn.net/topic12865.html

https://forums.openvpn.net/topic10013-15.html

Clicking Outlook links open Blank/Empty Page in Chrome

Quick Note

google-chrome-about-crash Under the following conditions:

  • Google Chrome set as the default browser.
  • Microsoft Outlook running in "Windows XP" compatibility mode.

Clicking on links inside emails (or any hyperlink even inside contacts), Google Chrome will open up in a blank "Untitled" tab. UI menus and the ominibox are completely unresponsive.

Turns out, running Microsoft Outlook in "Windows XP" compatibility mode will cause Google Chrome to fail to open links in Outlook.

So, disable "compatibility mode" and all should be well.

image

Hope that helps,
Brian Chavez

Cleaning up Network Connections in Windows 7

image Windows makes a mess of all the network adapters when installing NIC cards. Sometimes, you remove network adapters, and you're left with something like "Local Area Network 3" that can't be renamed back to "Local Area Network". The problem is, Windows remembers the previous adapter (even if it is physically removed), so you can't rename the adapter, otherwise it would conflict with previously named adapters. View & remove all previously (non-connected) NIC adapters:

set DEVMGR_SHOW_NONPRESENT_DEVICES=1
devmgmt.msc

View > Show Hidden Devices

Now, you can remove any adapters that were previously installed (but no longer present) in windows.

After doing so, you should now be able to rename the network adapters back to "Local Area Connection".

Extra Tip 1: Using the "Network and Sharing Center", click on the icon to change the icon and network name.

Extra Tip 2: Start "Local Security Policy". Go to "Network List Manager Polices", and you'll be able to assign profiles to these networks.

Extra Tip 3: Click on an "Unidentified network"s icon, and click "Merge or delete network locations" to delete any previously remembered "networks".

Hope that helps,
Brian Chavez

Setup latest Redis on Ubuntu

image Setting up latest Redis on Ubuntu

  • add-apt-repository ppa:rwky/redis
  • apt-get update
  • apt-get install redis
  • nano /etc/redis/redis.conf
  • service redis-server restart

Extra: Ensure Durable Redis

(make Redis durable on every dataset change)

  • nano /etc/redis/redis.conf
  • Comment out:
    # save 900 1
    # save 300 10
    # save 60 10000
  • Change:
    appendonly yes
    appendfsync always
  • Ensure:
    no-appendfsync-on-rewrite no
    auto-aof-rewrite-percentage 100
    auto-aof-rewrite-min-size 64mb

Cleanup: delete /var/lib/redis/dump.rdb since we're not using snapshots.

The AOF file is in /var/lib/redis/appendonly.aof; this is your dataset on disk.

Log files are in /var/log/redis/redis.log

Hope that helps,
Brian Chavez