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
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)
src/main/resources/assets directory, type
bower install backbone --save (it updates your
bower.json file) and don’t forget to add this to
You can now run your project:
And now TypeScript coding!
assets directory, create a
models directory with a new file
assets/ ├── typings/ ├── models/ | └── Entities.ts |
And put this content in the
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:
Today, change it like that:
And add a
humans-list.ts file at the same location than
assets/ ├── typings/ ├── models/ | └── Entities.ts ├── components/ | ├── humans-list.html | └── humans-list.ts |
with this content:
When you save your files, Wisdom will transpile all
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