programming

Getting started with F#

F#

tl;dr This post is a list of resources for learning F# and overview of my mini-project: Stock Estimator.

I couldn’t resist anymore, and I finally tried F#. For the first two days it was painful. Some elements of F# syntax are weird. However after getting use to that, F# became a joy, and instead of a week (as I planned) I spent with F# almost two months.

Getting Started

Deep Dive

There is also a book written by Jon Skeet and Tomas Petricek: Real World Functional Programming: With Examples in F# and C#.

Testing

Web Development

The most popular F# Web Framework is Suave. There is great SuaveMusicStore tutorial (code), which is inspired by ASP.NET MVC Music Store tutorial. If you want to build Web API with F#, check Building REST Api in Fsharp Using Suave.

It is also worth to check End-to-end Functional Web Development by Tomas Petricek where he showcases building web app with Suave.

For more, check Web Programming with F# Guide.

Stock Estimator

I created F# based app for predicting future stock prices ($1,000,000 idea!). The back-end is written in F#, and communicates with stock data API (Yahoo Finance) through F# type provider. There is also Suave Web API (microservice), and ASP.NET Core web app that communicates with it. Front-end is powered by Aurelia Framework, and D3 library. In other words: I built F# microservice, consumed it from non-F# app, and have reusable logic in separated project. All communication with microservice happens through the client (with Aurelia Framework). So, there is no usage of F# from C#, but…I also created simple Console app (with C#) that uses mentioned F# logic. There is also Windows Forms app for displaying estimates, written in F#, that also use reusable logic.

Entire source code is available on github. Check it out!

Summary

Programming in F# is pure joy! It’s a great language for working with data. Moreover, F# fits perfectly into today’s World of microservices. You don’t have to rewrite your already existing app, or create entire app with F#. You can just create one microservice with F#, and see how it works for you!


.NET Rocks Podcast: Building the Azure Portal

.NET Rocks

I work on the new Azure Portal for almost two years now. Two months ago I gave a talk about this largest SPA in the World at NDC London.

In addition to my talk, I also gave an interview for .NET Rocks Podcast – Building the Azure Portal – where together with Carl and Richard we chat about different aspects of building, managing, and using this sophisticated web app:

Enjoy!


Speech Recognition in the Browser at SeattleJS

Last month I presented how to take advantage of Speech Recognition in the Browser at SeattleJS meetup. Google Chrome is still the only one browser that supports recognizing speech with WebSpeech API, but since last month Microsoft Edge team has adding WebSpeech API in their backlog. In this session I’m showing how to use the raw, browser API, and also how to easily add voice commands to your website with my voiceCmdr library.

I also would like to mention that SeattleJS is an awesome meetup with great people. I had many interesting conversations at the after-party. If you are from the area I really recommend you to check it out!

Video from my session:


NDC London 2016 – Azure Portal and recommended talks

Last month I had a pleasure to speak about the Azure Portal architecture and Speech Recognition in the Browser at NDC London conference.

Azure Portal – the largest SPA in the World

Video

Slides

Speech Recognition in the Browser

video coming soon…

Recommended talks

Must see:

Better single-page apps with ASP.NET MVC 6 – Steve Sanderson – how to improve performance of SPA, by running client-side JavaScript on the server
Case Studies in Terrible Testing – Todd Gardner – how to NOT test software, lessons learned on example of 5 projects
Aurelia: Next-Generation Web Apps – Rob Eisenberg – overview of the modern JavaScript Framework
Play by Play with Rob Conery, Jon Skeet and K. Scott Allen: The C# Q&A, Episode 1 Jon Skeet and Scott Allen are answering 10 StackOverflow questions about C# live on stage
50 Shades of AppSec – Troy Hunt – an overview of variety of security vulnerabilities
Azure for Developers – Scott Hanselman – nice overview of Azure
Making Hacking Child’s Play – Troy Hunt – an overview and showcase of different hacking techniques
Building awesome desktop apps using web technologies – Jonas Follesø – intro to Electron
Everything I know about computers, I learned from the movies – Mark Rendle – funny, entertaining talk about programming in the movies

Worth to see:
Under the hood of C# 6.0 – Bart De Smet – very informative deep dive into C# 6 features
What does an “Open Source Microsoft Web Platform look like?” – Scott Hanselman – why Microsoft is doing Open Source
Project Rider – Hadi Hariri – new C# IDE from JetBrains
Saying “Goodbye” to DNX and “Hello!” to the .NET Core CLI – Damian Edwards & David Fowler – instead of cross-platform CLI for ASP.NET vNext we will have cross-platform CLI for entire .NET
AngularJS & ASP.NET MVC Playing Nice – Miguel Castro – intro to developing apps with ASP.NET MVC and AngularJS
A brief history of ASP.NET: From 1.0 to 5.0 – Damian Edwards and David Fowler
ASP.NET 5 on Docker – Mark Rendle
Developing Killer Apple Watch Applications – Wei-Meng Lee – overview of developing apps for Apple Watch
Continuous Delivery of Mobile Apps – Karl Krukow
C# Language Internals – Bart De Smet – how C# language works on the IL level
Legal pitfalls for developers – Kuan Hon – law for developers in nutshell
Debugging tools for the Web – Lenard Gunda – Chrome Dev tools and Fiddler overview of features
What’s new in Security in ASP.NET 5 and MVC 6 – Dominick Baier – Overview of auth with ASP.NET vNext

Summary

NDC is a great conference! I strongly recommend it to all developers. You can learn from the best industry experts, have interesting conversations with fellow developers and make new connections.

There is even unofficial NDC Song by Dylan Beattie:


Testing focus in JavaScript

This blog post is an overview of testing focus behavior in web browser.

During the work on Azure Portal I spent quite a bit of time on ensuring rich keyboard support. This requires appropriate focus management. When user press some keyboard shortcut, the focus should move to appropriate element. There is a good article on MDN about Keyboard-navigable JavaScript widgets. Focus behavior should be also tested very succinctly. As it is very easy to change (break) with even the smallest change in the HTML or JavaScript.

Standard test goes as follows:

  • Arrange: open some page
  • Act: execute some keyboard shortcut that should open particular page and/or set focus on particular element
  • Assert: check if expected element is focused

How to check if element is focused

The simplest way is to use jQuery:

expect($(element).is(':focus')).equals(true);

However this may not always work. Especially if you run your unit tests in parallel, because $element.is(‘:focus’) will not work when window does not have focus.

The better (right) way is to use document.activeElement:

expect(document.activeElement).equals(element);

This will work even when browser window is not focused.

Testing async actions

Sometimes, keyboard invoke asynchronous actions that eventually will change focus. This can cause:

  • false negative tests: assertion was executed before focus was eventually set
  • false positives: finally focused element, got focus after assertion was executed

The simplest recipe for the first problem is to delay assertion:

setTimeout(() => {
    expect(document.activeElement).equals(element);
    done();
}, 100);

The problem with this approach is choosing appropriate delay for assertion. Therefore it is better to avoid raw setTimeout, and use polling approach that I described in my post setTimeout considered harmful:

poll(
    () => document.activeElement === element, 
    () => {
	       assert(true);
	       start();
	  },
    () => {
	       assert(false);
	       start();
	  }
    );

The polling function can be also used for the second solution (by changing assertion order in callback functions). However, for the false positives problem, simple setTimeout is good enough, because we do not have a choice other than wait some particular period of time to execute assertion.

Invoking keyboard actions

There are 3 types of events that we can use to simulate keyboard action:

  • keydown
  • keyup
  • keypress

The safest bet is to use keydown. Why? An example might be using special keys. While in case of keypress – various browsers handle it differently (e.g., by not triggering the event), keydown is pretty consistent. I recommend you to check this article if you are interested in details. It was not updated for some time, but it will give you an idea.

In order to detect keyboard actions you may handle events on capture or bubbling phase. You should choose model depending on your needs, but in general bubbling phase is optimal solution. Additionally it is supported by jQuery, with browser inconsistencies taken care of for you.

To invoke keydown event in your tests, you need to set focus on the element first:

$(element)
  .focus()
  .trigger("keydown", { which: keyCode });

You can find JavaScript key codes here.

Summary

Use document.activeElement to check which element is focused.
Use polling approach for testing async actions.
Use keydown event, and bubble phase to invoke/handle keyboard actions.