What if there isn’t?

Polymer Summit 2015
https://www.youtube.com/watch?v=qogKAkxrfrk

Transcript

1. View Slide

2. 01
   What if there isn’t?!
   Surma
   @surmair +PolymerProject
   @Polymer 2
   

   View Slide

3. View Slide

4. 4
   +PolymerProject
   @Polymer
   
   
   
   >
   

   View Slide

5. View Slide

6. +PolymerProject
   @Polymer 6
   
   posts="{{posts}}"
   sorting="{{sorting}}"
   subreddit="{{subreddit}}">
   
   paper-input>
   
   
   
   
   href="[[item.link]]">[[item.title]]
   
   
   

   View Slide

7. +PolymerProject
   @Polymer 7
   
   posts="{{posts}}"
   sorting="{{sorting}}"
   subreddit="{{subreddit}}">
   
   paper-input>
   
   
   
   
   href="[[item.link]]">[[item.title]]
   
   
   

   View Slide

8. +PolymerProject
   @Polymer 8
   
   
   notify-event="data"
   on-data="_newData"
   library-url="[[_requestUrl]]"
   >
   
   
   
   

   View Slide

9. +PolymerProject
   @Polymer 9
   <br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>subreddit: {<br/>type: String,<br/>reflectToAttribute: true,<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
   

   View Slide

10. +PolymerProject
    @Polymer 10
    <br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>sorting: {<br/>type: String,<br/>reflectToAttribute: true,<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
    

    View Slide

11. +PolymerProject
    @Polymer 11
    <br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>posts: {<br/>type: Array,<br/>readOnly: true,<br/>value: function() {<br/>return [];<br/>},<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
    

    View Slide

12. +PolymerProject
    @Polymer 12
    <br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>baseUrl: {<br/>type: String,<br/>value: 'https://api.reddit.com',<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
    

    View Slide

13. +PolymerProject
    @Polymer 13
    <br/>Polymer({<br/>is: 'reddit-api',<br/>properties: {<br/>_requestUrl: {<br/>type: String,<br/>computed: '_computeUrl(baseUrl,<br/>subreddit, sorting)',<br/>notify: true<br/>},<br/>// ...<br/>});<br/>
    

    View Slide

14. +PolymerProject
    @Polymer 14
    <br/>Polymer({<br/>is: 'reddit-api',<br/>_computeUrl: function(baseUrl,<br/>subreddit, sorting) {<br/>return baseUrl +<br/>subreddit + '/' +<br/>sorting + '?jsonp=%%callback%%';<br/>},<br/>
    

    View Slide

15. +PolymerProject
    @Polymer 15
    
    
    notify-event="data"
    on-data="_newData"
    library-url="[[_requestUrl]]"
    >
    
    
    
    

    View Slide

16. +PolymerProject
    @Polymer 16
    <br/>Polymer({<br/>is: 'reddit-api',<br/>_newData: function(ev) {<br/>this._setPosts(<br/>ev.detail[0].data.children.<br/>map(function(post) {<br/>return {<br/>title: post.data.title,<br/>link: post.data.url<br/>};<br/>}));<br/>}<br/>});<br/>
    

    View Slide

17. +PolymerProject
    @Polymer 17
    
    posts="{{posts}}"
    sorting="{{sorting}}"
    subreddit="{{subreddit}}">
    
    paper-input>
    
    
    
    
    href="[[item.link]]">[[item.title]]
    
    
    

    View Slide

18. +PolymerProject
    @Polymer 18
    
    posts="{{posts}}"
    sorting="{{sorting}}"
    subreddit="{{subreddit}}">
    
    paper-input>
    
    
    
    
    href="[[item.link]]">[[item.title]]
    
    
    

    View Slide

19. +PolymerProject
    @Polymer 19
    
    radio-button>
    ✨ radio-button>
    
    paper-radio-button>
    
    

    View Slide

20. +PolymerProject
    @Polymer 20
    
    posts="{{posts}}"
    sorting="{{sorting}}"
    subreddit="{{subreddit}}">
    
    paper-input>
    
    
    
    
    href="[[item.link]]">[[item.title]]
    
    
    

    View Slide

21. +PolymerProject
    @Polymer 21
    
    posts="{{posts}}"
    sorting="{{sorting}}"
    subreddit="{{subreddit}}">
    
    paper-input>
    
    
    
    
    href="[[item.link]]">[[item.title]]
    
    
    

    View Slide

22. View Slide

23. View Slide

24. +PolymerProject
    @Polymer 24
    skip-waiting
    clients-claim
    auto-register
    state="{{state}}"
    on-service-worker-error="swError"
    on-service-worker-updated="swUpdated"
    on-service-worker-installed="swInstalled">
    
    
    

    View Slide

25. +PolymerProject
    @Polymer 25
    href="custom-fetch-handler.js">
    
    handler="customFetchHandler"
    path="/(.*)/customFetch">
    
    

    View Slide

26. +PolymerProject
    @Polymer 26
    _constructServiceWorkerUrl: function() {
    var paramsPromises = [];
    var cs = Polymer.dom(this).children;
    for (var i = 0; i < cs; i++) {
    if (typeof cs[i]._getParameters ===
    'function') {
    var params = cs[i]._getParameters();
    paramsPromises.push(params);
    }
    }
    }
    

    View Slide

27. +PolymerProject
    @Polymer 27
    return Promise.all(paramsPromises).
    then(function(paramsResolutions) {
    var params = {}
    paramsResolutions.
    forEach(function(childParams) {
    Object.keys(childParams).
    forEach(/* merge into params */);
    });
    })
    

    View Slide

28. +PolymerProject
    @Polymer 28
    var serviceWorkerUrl =
    new URL(this.href, window.location);
    serviceWorkerUrl.search =
    Object.keys(params).sort()
    .map(function(key) {
    return encodeURIComponent(key) + "=" +
    encodeURIComponent(params[key]);
    }).join('&');
    navigator.serviceWorker
    .register(serviceWorkerUrl, {
    scope: this.scope
    }).then(...);
    

    View Slide

29. 01
    Surma
    @surmair +PolymerProject
    @Polymer 29
    https://elements.polymer-project.org/
    https://github.com/PolymerElements
    /platinum-sw
    /platinum-push-messaging
    https://github.com/GoogleWebComponents
    /firebase-element
    /google-map
    /...
    

    View Slide