Create Typescript Definition from Polymer Element using Yeoman


Javascript evolution

Growing fame of javascript language not only in front-end development but also to develop back-end application (aka isomorphic development), has put in evidence the need to evolve such language to give a developer the same level of abstraction of other languages (eg. java c# swift) and so the ECMA6 standard has came out.
With ECMA6 for the first time in its history, javascript deal with portability issue and we have to understand how javascript will overcome such problem

Why Typescript ?

In the meanwhile Typescript is , in my opinion, one of the better choices for developer in order to use a expressive & modern language without deal with portability issue. Typescript is a very mature language and Microsoft, with helps of  Community, are very active on it and so hence a lot of tools and facilities are available for us.

Using Typescript and Polymer(TS) 

The Webcomponents have changed the way to approach web development, Polymer has provided a complete "production ready" framework to build applications using them. 
As said in this post Polymer+Typescript the marvelous couple, I'm developing with Polymer and Typescript  using PolymerTS project that perfectly joins both of them.

Yeoman Generator for creating a Polymer Element in Typescript

After a while I've decided that was need to have some accelerators, so I've started to develop a PolymerTS Yeoman Generator to speed up the startup phase. In the first versions I've focused my effort on scaffold a new Polymer element in Typescript using PolymerTS stuff. below its usage

$ yo polymerts:el my-element [--path <output>] [--nodecorator]

The importance of Typescript Definitions (.d.ts)

Scaffolding is a good start but, in order to work with Typescript in effective way, we need to have definitions (ie. .d.ts files) of third party elements that we use in our application. Definitions have double value: 
One is: provide a, well defined and readable, description of the element that we are going to use.
Second is: Providing meta-information to Typescript-aware IDE (eg. Atom, VSCode, ... ) that allow  to enable the "intellisense", feature very appreciate by developer. 
About that, there is a huge Typescript definitions' repository DefinitivelyTyped , where you can found the definition that you need.

Create a Typescript definition from a Polymer Element 

But what happen if you haven't definition? You could build one from yourself or simply work without it.
Unfortunately, in the case of Polymer's elements, we haven't  all definitions ready to use, but don't worry the Yeoman generator, currently, is able to create Typescript's definitions from Polymer Element.
Here we go. Relying upon a package provided by Polymer's team itself, named Hydrolysis, from release 0.3.0 of generator-polymerts I've implemented a gen goal that create a Typescript definition from a Polymer's Element
Use it is pretty straightforward, it is enough give the element name and the related typescript definition will be created. below its usage.


$ yo polymerts:gen polymer-element [--path <output>] [--elpath <source path>]

Take note that assumption is  that such element has been already installed and available in bower_components folder.

Conclusion

Hope this generator helps who is approaching to work with Polymer and, like me, loves develop using Typescript.



Comments

Post a Comment

Popular posts from this blog

Google Web Toolkit Vs AngularJS

Image
Lately  i've been involved in a discussion about ... which technology we have to use to build best  enterprise web application ?  The question was very interesting so, all involved actors started to put on the table  a lot of different technologies. The most sponsorized ones were been  GWT and AngularJS. But ,from my perspective, we have first to understand the context where such applications will be  developed in order to , as much as possible, understand of what we need and not what we like . The Context Let assume that we have a group of 10 developers skilled in java  and with a enough know-how about web design (i.e. html/css knowledge ). They use Eclipse IDE to write code and maven to build,package and deploy. Finally the  backend is entirely written in java The Choice Considering that  both of these technologies seem to fill the same space, but coming at it from different angles,  the choices behind the decision cou...
Read more

PlantText: The new "Online" UML Editor powered by PlantUML

Image
At beginning " PlantUML Server " As states in a previous article " PlantUML - a DSL for creating UML Diagrams ",  PlantUML is a great way to create & share  UML diagrams quickly & easily. PlantUML already provided a sort of "cloud solution" named " PlantUML Server "  which was mostly a kind of "Proof Of Concept"  to give an idea of its functionalities And finally " PlantText " Currently Arwen Vaughan  has  released " PlantText " completing the PlantUML  "cloud solution"  PlantText is a text-based tool for quickly creating clear UML diagrams that can be compared, versioned, and managed. Simply type PlantUML language into the editor and refresh the screen to produce a professional diagram. Save, export, or copy the image for use in your requirements or design documents. Features PlantText provides a complete  WYSIWYG  PlantUML editor and other interesting features like: Import/Expo...
Read more