DailyJS

DailyJS

The JavaScript blog.


TagMicrosoft
Featured

node editors Microsoft

Visual Studio Code

Posted on .

Visual Studio Code

Yesterday Microsoft released Visual Studio Code, or VSCode for short. It's an editor for Windows, Linux, and Mac OS, and is aimed at web developers. That doesn't just mean ASP.NET, but also Node.js.

The Node features include IntelliSense, debugging, linting, and outlining. Some of these features extend to other web technologies, like HTML, CSS, LESS and SASS. And, it even understands tasks with bundled support for autodetecting Gulp files. On a Mac you can press Shift-CMD-P then search for "Run Tasks" to get a parsed list of Gulp tasks.

Visual Studio Code also has Git integration, which I found to be perfectly manageable although I still quickly reached for my terminal when doing anything beyond basic commits.

If you're not familiar with Microsoft's JavaScript-related technologies, then you'll need to familiarise yourself with some of the basic TypeScript concepts. For example, VSCode is capable of providing IntelliSense suggestions thanks to TypeScript definition files. These files contain metadata for JavaScript objects and function signatures. This makes sense when you consider Microsoft's languages, like C#, have details about types for method signatures. IntelliSense is able to provide a match for a method, but also make it more meaningful with details on the parameters based on the type.

To really make the most of VSCode, you'll need to find the right TypeScript definition files. Microsoft's Node tutorial explains how to quickly set this up for Node itself, but you can also help the editor provide IntelliSense for projects like Express and AngularJS. The way you do that is to install definition files, and the best source I know of is DefinitelyTyped. There's a package manager for definition files called TSD.

The editing features are comparable to Atom and Sublime Text -- VSCode supports bracket matching, multi-cursor editing, snippets, go to definition, go to symbol, gutter indicators, peek (a Visual Studio feature that shows you another file in a panel), split windows, find in project, and symbol renaming. It's very powerful and will strongly appeal to those of you with previous experience working in Windows-based editors.

I say Windows-based editors because the keyboard shortcuts, even on a Mac, are very reminiscent of Visual Studio. Some of the text selection and deletion shortcuts that I instinctively use in Mac-based editors do things that I didn't expect, so it'll take me a while to get used to VSCode.

Another issue I have is I don't like the typings folder that VSCode adds to the current directory for the TypeScript definition files. I'd rather that was system-wide, because I don't want to accidentally commit it to my project. I could add a global ignore for it, but the folder name seems too generic for that. Also, I really don't like the idea of adding code comments for the definition files, I'd much prefer the editor to remember which definition files I use for a given project.

VSCode is definitely an impressive editor. As a Vim user for over 15 I'm unlikely to switch, but I enjoyed trying it out, and the JavaScript support is compelling. It's worth trying if you're a JavaScript programmer.

Featured

ui graphics images icons Microsoft

Material Design Icons, rdljs, PhotoSwipe

Posted on .

Material Design Icons for Angular

Google's Material Design stuff is amazing, and their recent UI and animation libraries are useful for those of us who don't want to spend too much time developing a totally new UI for every project. However, these tools have limitations. Urmil Parikh found that the official Material Design Icons were hard to recolour without patching the SVG files.

Material Design Icons

To work around this issue, Urmil created Angular Material Icons v0.3.0 (GitHub: klarsys/angular-material-icons, License: MIT, Bower: angular-material-icons, npm: angular-material-icons). By including this project, you get a new Angular directive called ng-md-icon which supports options for style and size. It also optionally supports SVG-Morpheus -- this allows you to morph between icons which might work well in animation-heavy material design projects.

This library works by hard-coding the SVG paths in an object called shapes. The paths can be embedded in svg elements with the required size and style attributes.

rdljs

André Vale sent in rdljs, a library for Microsoft RDL/RDLC reporting. This technology is completely new to me, so I had to ask him for clarification. Apparently, RDL stands for Report Definition Language, and is used with Microsoft SQL Server Reporting Services. RDL files are XML schemas for designing reports, so André's library allows you to take RDLC files and render them in a browser.

The library comes with a demo, but you'll need to run a webserver to try it out. It's intended to be used with a server side application that sends the XML using Ajax requests. It uses D3 and jQuery. The source that does the XML parsing looks extremely involved, so it would be interesting to see what people can do with it who've got RDL experience.

PhotoSwipe

PhotoSwipe (GitHub: dimsemenov/PhotoSwipe, License: MIT, Bower: photoswipe) by Dmitry Semenov is a mobile-friendly image gallery. It works through instances of the PhotoSwipe object, and there are methods for things like going to the next/previous slide, and skipping to a specific slide. The API also supports events.

There's full documentation in website/documentation/api.md which explains how to add slides dynamically, so you can load slide data asynchronously if required.

One thing I liked about the PhotoSwipe was the mouse gestures: if you click and swipe it works in a similar way to swiping on a touchscreen. It also feels fast and lightweight.

Featured

libraries languages Microsoft typescript

TypeScript Log, Supplemental

Posted on .

This week on DailyJS every post is about TypeScript! This article is a roundup of interesting TypeScript libraries.

This is the end of TypeScript week on DailyJS. I've been going through my email archives looking for TypeScript-related things that people have sent in. Here is a selection! As always, please share anything TypeScript (or JavaScript) related with me by going to contact.dailyjs.com.

VCL.JS

VCL.JS (GitHub: vclteam / VCL.JS, License: Apache 2.0) is a component-based web framework. The built-in components are based on Bootstrap, so the UI code should be quite easy to work with if you've used Bootstrap before.

It has deep Visual Studio integration, so Microsoft developers should be able to get started quickly. It even supports data binding and AMD for client-side code.

EndGate

I'm intrigued by EndGate, a game framework for HTML5 games written in TypeScript. It has APIs for input, graphics, animations (tweening), and collision detection.

There's a tutorial that explains how to use collisions and tweens. It seems to focus on map-based 2D games, which usually work well in browsers anyway.

asyncawait

One of the big things in C# 5.0 was the async modifier and await operator. These keywords allow C# code to be asynchronous, without callbacks or delegate methods.

The asyncawait module for Node is inspired by this API. You can await asynchronous methods, so you get to use non-blocking APIs with synchronous convenience:

var foo = async (function() {  
    var resultA = await (firstAsyncCall());
    var resultB = await (secondAsyncCallUsing(resultA));
    var resultC = await (thirdAsyncCallUsing(resultB));
    return doSomethingWith(resultC);
});

This module is based on two great projects: node-fibers and bluebird, but it's written with TypeScript:

TypeScript: asyncawait is written in TypeScript (look in the src folder), and includes a type declaration file. TypeScript makes JavaScript development faster, less error-prone, more scaleable, and generally more pleasant.

Featured

languages Microsoft typescript

TypeScript's Compiler

Posted on .

This week on DailyJS every post is about TypeScript! This article is all about TypeScript's compiler.

This week a new TypeScript compiler was announced, along with the move of the project to GitHub.

Our work to date on the new compiler has been very promising. At its current level of completeness, the new compiler is able to compile existing real-world TypeScript code 5x faster than the currently shipping compiler. These results are still early. Once the compiler has reached parity, we'll be able to report out a more complete picture of the performance improvements.

You might be wondering how the TypeScript compiler works. The source can be found at GitHub: Microsoft/TypeScript, and is written in TypeScript. It's structured using features and idioms commonly used in TypeScript, like services and generics.

There's a parser, scanner, and the infrastructure needed to work with command-line options and files. The parser generates nodes that are used by an "emitter" that produces the desired output. You'll see a lot of switch statements matching on enums that relate to language constructs.

Comparison with Other Compilers

The CoffeeScript parser is generated from a Jison file -- so unlike TypeScript it has an additional context free grammar file. There are attempts at writing Jison-based TypeScript compilers, which are interesting to look at. LiveScript is also based on Jison.

ClojureScript's compiler transforms ClojureScript into JavaScript. Originally ClojureScript was written in Clojure, and I'm not sure if it's self-hosted yet. There was a fork that is self-hosted, however.

Automation

One issue with JavaScript compilers is the fact you have to recompile files to JavaScript whenever you make a change. Fortunately, tsc has a --watch option, so you can write tsc -w file.ts to watch for changes on file.ts. This can easily be used with a module like nodemon to automatically restart the Node process (if you're using Node) as well.

There are also Grunt and Gulp plugins for TypeScript:

Conclusion

It's interesting that there seems to be three main approaches to transpiling JavaScript:

  • Parser based on a context-free grammar
  • Self-hosted hand-written parser
  • External language

If someone had showed me TypeScript I would have assumed it was written with a CLR-based language, so it's cool that it's self-hosted and able to easily run without Microsoft's development tools.

Featured

languages Microsoft typescript

TypeFramework: A TypeScript Web Framework

Posted on .

This week on DailyJS every post is about TypeScript! This post is about TypeFramework, a possibly Rails inspired web framwork aimed at TypeScript developers.

One of the aims of TypeScript is to help you write large applications. In Node, the popular idiom is "small modules" -- programs are composed from small packages with APIs based on patterns found in Node's core modules. That means EventEmitter, streams, callbacks with the error-first signature, and modules that return a single function.

This can work well, but people still seem to struggle to maintain larger web applications. Surely a TypeScript MVC framework offers insights on how to structure larger projects?

TypeFramework (GitHub: zekelevu / typeframework, License: MIT, npm: typeframework) by Zeke Kievel is built on Express. It has controllers, models, views, routing, and configuration. The models are based on the Waterline ORM, and they look like this:

class User extends TF.Model {  
  name: string;
  email: string;
  age?: number;
}

app.addModel(User);  

The chainable API is quite nice:

User.find()  
  .where({ name: 'John' })
  .skip(10)
  .limit(5)
  .done((err, users: User[]) => { /* callback */ });

Everything looks very much like a lightweight Rails. It will probably help C# developers who want to write things that run on Node, or Rails developers who are transitioning to Node.

What I'd really like to see is a more MVVM-style framework with interfaces for code contracts, services, and ReactiveUI-style APIs. I'd prefer skinny models so I can avoid putting business logic in them and use my own persistance layer. I think TypeScript is perfectly suited to this, but I haven't yet found such a framework.