Wisdom, TypeScript, Backbone and Polymer
Yesterday, I made my first steps with Wisdom (http://k33g.github.io/2014/07/13/WISDOM.html) and my conclusion was: “I think I’ve found THE Best Candidate to serve my Single Page Applications”, so today I decided to play further away with my new toy.
I’m going to change my previous sample and rewrite it with TypeScript, Backbone and Polymer. I love TypeScript because it allows to write code in a similar way of thinking as EcmaScript 6 (it’s my belief).
So, you’ve to read http://k33g.github.io/2014/07/13/WISDOM.html
Add TypeScript support to Wisdom
It’s very easy, there is already a plugin for this. Add this to your pom.xml file:
<plugin>
<groupId>org.wisdom-framework</groupId>
<artifactId>wisdom-typescript-maven-plugin</artifactId>
<version>0.6</version>
<executions>
<execution>
<id>compile-typescript-files</id>
<phase>compile</phase>
<goals>
<goal>compile-typescript</goal>
</goals>
</execution>
</executions>
<configuration>
<version>1.0.1</version>
</configuration>
</plugin>TypeScript definitions
Now we need TypeScript definitions for Backbone, Underscore and jQuery. Definitions allow TypeScript to use existing JavaScript frameworks (a kind of contract).
We need to install tsd first, type this command: sudo npm install tsd -g (see https://github.com/DefinitelyTyped/tsd for more details) and go to src/main/resources/assets and type tsd query backbone underscore jquery --action install.
tsd will create a sub-directories typings with 3 TypeScript definitions:
assets/
├── typings/
| ├── backbone/
| | └── backbone.d.ts
| ├── underscore/
| | └── underscore.d.ts
| └── jquery/
| └── jquery.d.ts
Add Backbone (and Underscore)
In src/main/resources/assets directory, type bower install backbone --save (it updates your bower.json file) and don’t forget to add this to index.thl.html:
<script src="/assets/bower_components/underscore/underscore.js"></script>
<script src="/assets/bower_components/backbone/backbone.js"></script>You can now run your project: mvn wisdom:run
And now TypeScript coding!
in assets directory, create a models directory with a new file Entities.ts:
assets/
├── typings/
├── models/
| └── Entities.ts
|
And put this content in the Entities.ts file:
/// <reference path="../typings/jquery/jquery.d.ts" />
/// <reference path="../typings/underscore/underscore.d.ts" />
/// <reference path="../typings/backbone/backbone.d.ts" />
module Entities.Models {
export class Human extends Backbone.Model {
constructor(options?: any) {
super(options);
}
}
}
module Entities.Collections {
export class Humans extends Backbone.Collection<Entities.Models.Human> {
model: typeof Entities.Models.Human;
constructor(options?: any) {
this.url = "/humans";
super(options);
}
}
}We’ve just created a Backbone Model and a BackBone Collection.
Update ou WebComponent
assets/
├── typings/
├── models/
| └── Entities.ts
├── components/
| └── humans-list.html
|
Yesterday, the content of humans-list.html was like that:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="humans-list">
<template>
<ul>
<template repeat="{{humans}}">
<li>{{firstName}} {{lastName}}</li>
</template>
</ul>
</template>
<script>
Polymer("humans-list",{
ready: function(){
$.ajax({url: "humans", type: "GET"}).done(function(humans){
this.humans = humans;
}.bind(this));
}
});
</script>
</polymer-element>Today, change it like that:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="humans-list">
<template>
<ul>
<template repeat="{{humans}}">
<li>{{firstName}} {{lastName}}</li>
</template>
</ul>
</template>
<script src="humans-list.js"></script>
</polymer-element>And add a humans-list.ts file at the same location than humans-list.html:
assets/
├── typings/
├── models/
| └── Entities.ts
├── components/
| ├── humans-list.html
| └── humans-list.ts
|
with this content:
///<reference path="../models/Entities.ts" />
declare var Polymer: any;
Polymer("humans-list",{
ready: function(){
var humans = new Entities.Collections.Humans();
humans.fetch().done(() => {
this.humans = humans.toJSON();
});
}
});When you save your files, Wisdom will transpile all .ts files to JavaScript.
You can refresh http://localhost:9000/, you’ve got the same result as yesterday, but with TypeScript. And you’ve gained the ability to write classes and modules.
Tweet