$30 off During Our Annual Pro Sale. View Details »

What if there isn’t?

Surma
September 27, 2015

What if there isn’t?

Surma

September 27, 2015
Tweet

More Decks by Surma

Other Decks in Technology

Transcript

  1. 1

    View Slide

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

    View Slide

  3. 3

    View Slide

  4. 4
    +PolymerProject
    @Polymer



    >

    View Slide

  5. 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. 22

    View Slide

  23. 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