1 of 13

Polymer

Typescript

2 of 13

Summary

  1. Introduction
  2. Web component: what is it?
  3. State of the art
  4. Integration
  5. Structure
  6. Create a TypeScript + Polymer component
  7. Use the component
  8. Conclusion

3 of 13

  1. Introduction
  • Developer / CTO at

​

  • Good knowledges in Typescript
  • Not a Polymer expert

​

4 of 13

  1. Web component: what is it?
  • Part of the W3C HTML 5 specifications (pushed by Google)
  • Extension of the HTML native tags
    • Own style
    • Own behaviour
  • More semantic
  • More object oriented (encapsulation, polymorphism)

​

5 of 13

  • State of the art

Ohw. What should I use?

6 of 13

  • Integration
  • WebComponents polyfill

​

  • PolymerTS

​

  • Polymer and its elements

​

7 of 13

  • Structure
  • Each component's HTML, CSS and JS have to stick together

​

  • App / site organization is different (splitted HTML / style / behavior, domain layers, lower layers, etc...)

​

​

  • How to tell tsc / less processor where to put files?

​

8 of 13

  • Create a TypeScript + Polymer component

meetup-demo-panel.html:

​

meetup-demo-panel.less:

​

9 of 13

  • Create a TypeScript + Polymer component
  • Plain old class
  • Define Polymer properties (is, properties, listeners, …) as instance fields
  • Declare public / private fields and methods as usual
  • Use inheritance
  • Register through polymer.createElement(Class)
  • Clear contract

​

10 of 13

  • Interact with the component

Import / declare it:

​

Retrieve / use it:

​

( )

the index.html

​

11 of 13

  • Interact with the component

Event registration:

​

12 of 13

  • Conclusion
  • Polymer / WebComponents + TypeScript = <3

​

​

  • Polymer itself: not ready yet for production

​

​

13 of 13

Questions ?