{"id":2800,"date":"2015-08-19T19:32:26","date_gmt":"2015-08-19T19:32:26","guid":{"rendered":"http:\/\/www.aheadsrl.com\/wordpress\/?p=2800"},"modified":"2015-08-19T20:19:09","modified_gmt":"2015-08-19T20:19:09","slug":"polymer-plus-typescript","status":"publish","type":"post","link":"https:\/\/www.aheadsrl.com\/wordpress\/web\/polymer-plus-typescript\/","title":{"rendered":"POLYMER plus TYPESCRIPT"},"content":{"rendered":"

Polymer 1.0 - why I love component based approach<\/p>\n

From last GoogleIO - Polymer 1.0 production ready has been announced<\/a><\/p>\n

I use Polymer<\/a>( currently the 0.5) in my projects and love the component based
\ndevelopment approach and I'm grateful to webcomponent\/polymer teams having ported such approach also in front end development<\/p>\n

This is the most important point for me and the main reason because i haven't used the more famous AngularJS.
\nWhen evaluating AngularJS 1.x it was impressed in term of features but, except for the mysterious directives, it didn't promote a components approach but rather a way to better arrange a complex javascript projects giving to developers features that, until then, was exclusively provided by back-end frameworks<\/p>\n

However the widely announced AngularJS 2 will rely on webcomponent and the main focus has been put on directive development, so my choice to follow the component based approach in front end development seems to go in the right direction <\/p>\n

Role of Object Oriented paradigm in component based approach<\/p>\n

As you know the object oriented paradigm has been very important to push component based approach so, what missed me, was use the same language expressiveness to work in front end development.
\nHere is where coming in scene Typescript<\/a>. Typescript is a 'transpiler' (ie source-to-source compiler) that, as result of its compilation, produce pure and well written javascript. Typescript as language has all the features that allow us to use, in clear and easy way, object oriented and functional constructs, it anticipates the ecma6 features and promise to be compatible with them.<\/p>\n

For who doesn't know typescript yet, please take a look to TypescriptLang before continue, for the other ones let's start to coding<\/p>\n

PolymerTS project<\/p>\n

About typescript definitions, instead to use the official DefinitelyTyped, I've find out a very cool project on Github \"PolymerTS\" that has introduced the annotation concept relies on decorator feature provided by Typescript language.
\nAgain in my opinion the annotations increase the semantic of the code avoiding to deal with annoying boilerplate.<\/p>\n

In this proof of the concept i've used :
\nAtom (the hackable test editor of 21th century)<\/a> plus the Typescript package
\nYeoman Polymer generator<\/a>
\nPolymer Starter Kit<\/a><\/p>\n

Using Polymer Starter Kit we generate a Basic, full featured, Polymer application. So open a shell, in chosen project's directory, and type:
\n> yo polymer
\nand then
\n> bower install
\nafter that, install the PolymerTS<\/a> stuff typing
\n> bower install polymer-ts --save
\nCreate an Element<\/p>\n

Now create a new element. For this article I create a simple timer element
\n > yo polymer:element my-timer
\nNote: answer Y at question :
\nWould you like to include an import in your elements.html file?<\/p>\n

Update Element's template<\/p>\n

The above command will generate file my-timer.html in app\/elements\/my-timer folder<\/p>\n

\n<link rel=\"import\" href=\"..\/..\/bower_components\/polymer\/polymer.html\">\n<dom-module id=\"my-timer\"> <\/p>\n<style>\n :host {\n display: block;\n } \n <\/style>\n<p> <template><\/p>\n<div>Hello from <span>{{foo}}<\/span><\/div>\n<p> <\/template><br \/>\n<\/dom-module><\/p>\n<p><script>\n(function() { \n Polymer({\n is: 'my-timer',\n properties: {\n foo: {\n type: String,\n value: 'bar',\n notify: true\n }\n } \n });\n})();\n<\/script><br \/>\n<\/xmp><\/p>\n<p>In order to switch from javascript to typescript edit such file, remove explicit javascript and include an external file my-timer.js, moreover we will update template to reflect the timer appearances.<br \/>\nThe new my-timer.html now, will appear as shown below<\/p>\n<p><xmp><br \/>\n<dom-module id=\"my-timer\"><br \/>\n <template><\/p>\n<p>from <span>{{start}}<\/span> is now: <span>{{count}}<\/span><\/p>\n<p> <\/template><br \/>\n<\/dom-module><br \/>\n<script src=\"my-timer.js\"><\/script><br \/>\n<\/xmp><\/p>\n<p><strong>Implement Element <\/strong><\/p>\n<p>After we defined template within html file, now we go under my-timer directory and add a new file named my-timer.ts where, using amazing typescript, we will declare element and will implement its behaviour.<br \/>\nAfter file creation type the code below:<\/p>\n<p><xmp><br \/>\n@component(\"my-timer\")<br \/>\nclass MyTimer extends polymer.Base implements polymer.Element<br \/>\n{<br \/>\n @property({ type: Number, value: 0 })<br \/>\n public start: number;<\/p>\n<p> @property()<br \/>\n public count: number;<\/p>\n<p> private timerHandle: number;<\/p>\n<p> ready() {<br \/>\n console.log( this[\"is\"], \"ready!\");<\/p>\n<p> this.count = this.start;<br \/>\n this.timerHandle = setInterval(() => {<br \/>\n this.count++;<br \/>\n }, 1000);<br \/>\n }<\/p>\n<p> detatched() {<br \/>\n clearInterval(this.timerHandle);<br \/>\n }<br \/>\n}<\/p>\n<p>createElement( MyTimer );<\/p>\n<p><\/xmp><\/p>\n<p>Let analyse the code above:<br \/>\n@component - annotation<\/p>\n<p>@component annotation is enough to declare the class as a webcomponent. The class itself has to implement polymer.Element, that mainly declare component lifecycle methods and extends polymer.Base in order to inherits the utility methods provided by Polymer implementation. (see declarations in polymer-ts.ts)<\/p>\n<p><xmp>@component(\"my-timer\")<\/xmp><\/p>\n<p>class MyTimer extends polymer.Base implements polymer.Element<br \/>\n@property - annotation<\/p>\n<p>@Property annotation is used to declare a public property of component and its characteristics providing some meta-informations.<\/p>\n<p><xmp><br \/>\n @property({ type: Number, value: 0 })<br \/>\n public start: number;<\/p>\n<p> @property()<br \/>\n public count: number;<br \/>\n<\/xmp><\/p>\n<p>The available meta-informations are declared in the following interface ( refer to polymer-ts.ts )<\/p>\n<p><xmp><br \/>\n export interface Property {<br \/>\n name?: string;<br \/>\n type?: any;<br \/>\n value?: any;<br \/>\n reflectToAttribute?: boolean;<br \/>\n readonly?: boolean;<br \/>\n notify?: boolean;<br \/>\n computed?: string;<br \/>\n observer?: string;<br \/>\n}<br \/>\n<\/xmp><\/p>\n<p>ready(), detached() - methods<\/p>\n<p>Ready and detached are two methods related to component's lifecycle declared in polymer.Element interface ( refer to polymer-ts.ts ). this contains the behaviour of our component that, simply, will show a timer starting from start value and updating count every sencond<\/p>\n<p><xmp><\/p>\n<p>ready() {<br \/>\n console.log( this['is'], 'ready!');<\/p>\n<p> this.count = this.start;<br \/>\n this.timerHandle = setInterval(() => {<br \/>\n this.count++;<br \/>\n console.log( 'count', this.count);<br \/>\n }, 1000);<\/p>\n<p>}<\/p>\n<p>detatched() {<br \/>\n clearInterval(this.timerHandle);<br \/>\n}<\/p>\n<p><\/xmp><\/p>\n<p>createElement - function<\/p>\n<p>The createElement global function ( refer to polymer-ts.ts ) allows to create\/setup the element. Such function is required before we can use the new element.<\/p>\n<p>createElement( MyTimer );<\/p>\n<p>Preparing to use Element(s)<\/p>\n<p>Before to use our custom elements we have to do some steps required once only<br \/>\nTranspilation<\/p>\n<p>first we have to transpile (ie source-to-source compilation) the typescript to javascript.<br \/>\nThis task is pretty straightforward using the <a href=\"https:\/\/github.com\/TypeStrong\/atom-typescript\" target=\"_blank\">atom-typescript<\/a> package , it is enough right-click on typescript file, select build and magically will appear the javascript counterpart.<\/p>\n<p>The first time that we will execute a transiplation will be created also the file tsconfig.json that is the project file that keeps track of all your typescript's files, for make your life easier I suggest to move it in the project's root directory<br \/>\nInclude polymerTS implementation<\/p>\n<p>Now open the file element.html in app\/elements folder and add, before the custom element declarations, the inclusion of polymerTS implementation as shown below<\/p>\n<p><xmp><br \/>\n<script src=\"..\/bower_components\/polymer-ts\/polymer-ts.js\"><\/script><br \/>\n<\/xmp><\/p>\n<p>Use element<\/p>\n<p>Now we are ready to use the new \"my-timer\" element. I want put such element in the mainToolBar , so open file index.html in app folder and add my-timer element as child of paper-toolbar as shown below<\/p>\n<p><xmp><br \/>\n<!-- Main Toolbar -->\n<paper-toolbar id=\"mainToolbar\">\n <paper-icon-button id=\"paperToggle\" icon=\"menu\" paper-drawer-toggle><\/paper-icon-button>\n <span class=\"flex\"><\/span><\/p>\n<p> <!-- Toolbar icons -->\n <paper-icon-button icon=\"refresh\"><\/paper-icon-button>\n <paper-icon-button icon=\"search\"><\/paper-icon-button>\n <my-timer start=\"1\"><\/my-timer><br \/>\n<\/xmp><\/p>\n<p>That's all , now run > gulp serve and we will have our app running with our element on top-right of the header as shown below<\/p>\n<p><a href=\"http:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk-300x227.png\" alt=\"psk\" width=\"300\" height=\"227\" class=\"alignnone size-medium wp-image-2802\" srcset=\"https:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk-300x227.png 300w, https:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk-1024x776.png 1024w, https:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk-200x150.png 200w, https:\/\/www.aheadsrl.com\/wordpress\/wp-content\/uploads\/2015\/08\/psk.png 1280w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Conclusion<\/strong><\/p>\n<p>Hope that you agree with me about the fact that the Web Componentization is a sort of revolution concerning web development.<\/p>\n<p>The Javascript is the language that is driving such revolution (and not only concerning front-end development). <\/p>\n<p>On the other hand, Typescript and in the near future: ECMA6, fills the gaps respect other, more mature, development languages allowing, finally, to implement with it \"large\" enterprise application.<br \/>\nNote:<\/p>\n<p>Take note that PolymerTS is under active development and a lot of a new features are coming out like inline component. Currently I'm using the release 0.0.9.<br \/>\nCode:<\/p>\n<p>You can find the example in article on GITHUB, I've forked the original PolymerTS project and created the starterkit branch for the article. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Polymer 1.0 - why I love component based approach From last GoogleIO - Polymer 1.0 production ready has been announced I use Polymer( currently the 0.5) in my projects and love the component based development approach and I'm grateful to webcomponent\/polymer teams having ported such approach also in front end development This is the most important point for me and the main reason because i haven't used the more famous AngularJS. When evaluating AngularJS 1.x it was impressed in term of features but, except for the mysterious directives, it didn't promote a components approach but rather a way to better&nbsp;<a href=\"https:\/\/www.aheadsrl.com\/wordpress\/web\/polymer-plus-typescript\/\" class=\"read-more\">Continue Reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":2801,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","two_page_speed":[]},"categories":[78],"tags":[79],"_links":{"self":[{"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/posts\/2800"}],"collection":[{"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/comments?post=2800"}],"version-history":[{"count":16,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/posts\/2800\/revisions"}],"predecessor-version":[{"id":2819,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/posts\/2800\/revisions\/2819"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/media\/2801"}],"wp:attachment":[{"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/categories?post=2800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aheadsrl.com\/wordpress\/wp-json\/wp\/v2\/tags?post=2800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}