Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox

An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox

Think of your favourite app. It's probably meowni.ca/emojillate (who can blame you), but if it isn't (and we need to talk) it probably has one, if not all, of these things: a database; a potential for disaster, with many users looking at and clicking on the same data; offline support, and a responsive layout. While preferably being faster than the average bear. Recreating this from scratch might sound like a terrifying experience, but I'm going to show you how the polymer toolbox and a few other already-built elements can help you go from zero to hero and build a PWA in no time.

Video: (Polymer Summit): https://www.youtube.com/watch?v=6t2JRKTCYbI&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ&index=26

Monica Dinculescu

October 17, 2016
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. 3 DAYS
    A N A P P I N
    ( M O R E O R L E S S )

    View full-size slide

  2. I’VE NEVER BUILT
    O K . R E A L TA L K
    AN APP

    View full-size slide

  3. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  4. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  5. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  6. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  7. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  8. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  9. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  10. SO LET’S BUILD
    THIS APP

    View full-size slide

  11. HTTPS://MOJIBRAG.FIREBASEAPP.COM

    View full-size slide

  12. DO LESS / BE LAZY
    B U T F O R L I K E , E V E RY T H I N G
    1

    View full-size slide

  13. (´ ̙ҹ).牐ӈὑ ~/Code ❥ mkdir app && cd app
    (´ ̙ҹ).牐ӈὑ ~/Code/app ❥ polymer init starter-kit

    View full-size slide

  14. localhost:8000/view2

    View full-size slide

  15. localhost:8000/view3

    View full-size slide

  16. AUTHENTICATION
    2

    View full-size slide

  17. USE FIREBASE
    W H E N I N D O U B T

    View full-size slide

  18. api-key=“…”
    database-url=“https://your-app.firebaseio.com"
    auth-domain=“your-app.firebaseapp.com"
    storage-bucket=“your-app.appspot.com”>

    user="{{user}}" provider=“google”>

    View full-size slide

  19. api-key=“…”
    database-url=“https://your-app.firebaseio.com"
    auth-domain=“your-app.firebaseapp.com"
    storage-bucket=“your-app.appspot.com”>

    user="{{user}}" provider=“google”>

    View full-size slide

  20. login: function() {
    this.$.auth.signInWithPopup();
    },
    logout: function() {
    this.$.auth.signOut();
    },
    attached: function() {
    firebase.auth().onAuthStateChanged(function(user){
    // you have a user!
    }
    }

    View full-size slide

  21. login: function() {
    this.$.auth.signInWithPopup();
    },
    logout: function() {
    this.$.auth.signOut();
    },
    attached: function() {
    firebase.auth().onAuthStateChanged(function(user){
    // you have a user!
    }
    }

    View full-size slide

  22. login: function() {
    this.$.auth.signInWithPopup();
    },
    logout: function() {
    this.$.auth.signOut();
    },
    attached: function() {
    this.$.auth.auth.onAuthStateChanged(function(user){
    // you have a user!
    }
    }

    View full-size slide

  23. “THE CLOUD”
    3

    View full-size slide

  24. JUST USE FIREBASE
    S E R I O U S LY.

    View full-size slide

  25. data="{{_fbPosts}}"
    path="/posts/{{ref}}">

    session="[[uid]]"
    key="/posts/{{ref}}"
    data="[[_fbPosts]]"
    persisted-data="{{posts}}">

    View full-size slide

  26. path=“/posts/{{channelName}}“
    data="{{_liveData}}">

    session="[[uid]]"
    key="/posts/{{teamName}}"
    data="[[_fbPosts]]"
    persisted-data="{{posts}}">

    View full-size slide

  27. path=“/posts/{{channelName}}“
    data="{{_liveData}}">

    session=“[[user.uid]]”
    key="/posts/{{channelName}}"
    data="[[_fbPosts]]"
    persisted-data="{{posts}}">

    View full-size slide

  28. path=“/posts/{{channelName}}“
    data="{{_liveData}}">

    session=“[[user.uid]]"
    key="/posts/{{channelName}}"
    data="[[_liveData]]"
    persisted-data="{{posts}}">

    View full-size slide

  29. path=“/posts/{{channelName}}“
    data="{{_liveData}}">

    session=“[[user.uid]]"
    key="/posts/{{channelName}}"
    data="[[_liveData]]"
    persisted-data="{{posts}}">

    View full-size slide

  30. PUTTING IT
    TOGETHER
    V I E W S ’ N ’ D ATA
    4

    View full-size slide

  31. FEATURES
    T H I N K I N G A B O U T

    View full-size slide

  32. T R A N S L AT E S T O W E B C O M P O N E N T S
    FEATURES
    T H I N K I N G A B O U T

    View full-size slide

  33. PROPERTIES DOWN
    D ATA F L O W
    EVENTS UP

    View full-size slide

  34. ACTIVE
    CHANNEL

    View full-size slide

  35. ACTIVE
    CHANNEL
    EVENT:
    POST !

    View full-size slide

  36. OFFLINE:
    FALSE
    EVENT:
    POST !

    View full-size slide

  37. OFFLINE:
    FALSE
    EVENT:
    POST !
    THIS.$.POST.HIDDEN

    View full-size slide

  38. WORK OFFLINE?
    B U T D O E S I T
    5

    View full-size slide

  39. SERVICE WORKER
    A L R E A DY D O N E

    View full-size slide

  40. CONDITIONAL UI
    Y O U M I G H T WA N T

    View full-size slide

  41. ready: function() {
    this.offline = navigator.onLine === false;
    window.addEventListener('online', function() {
    this.offline = false;
    }.bind(this));
    window.addEventListener('offline', function() {
    this.offline = true;
    }.bind(this));
    },

    View full-size slide

  42. ready: function() {
    this.offline = navigator.onLine === false;
    window.addEventListener('online', function() {
    this.offline = false;
    }.bind(this));
    window.addEventListener('offline', function() {
    this.offline = true;
    }.bind(this));
    },

    View full-size slide

  43. ready: function() {
    this.offline = navigator.onLine === false;
    window.addEventListener('online', function() {
    this.offline = false;
    }.bind(this));
    window.addEventListener('offline', function() {
    this.offline = true;
    }.bind(this));
    },

    View full-size slide

  44. ready: function() {
    this.offline = navigator.onLine === false;
    window.addEventListener('online', function() {
    this.offline = false;
    }.bind(this));
    window.addEventListener('offline', function() {
    this.offline = true;
    }.bind(this));
    },

    View full-size slide

  45. M
    AKE IT
    FAST
    6

    View full-size slide

  46. D O L E S S . B E L A Z Y
    IRON-LIST

    View full-size slide

  47. IF YOU DON’T NEED IT
    DON’T IMPORT IT
    D O L E S S . B E L A Z Y

    View full-size slide

  48. importHref(
    fileName,
    successCallback,
    errorCallback)

    View full-size slide






  49. firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
    this.importHref(‘humble-brag.html', function() {
    this.hideSigninUI();
    this.showMainApp();
    }, null, true);
    }
    }

    View full-size slide






  50. firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
    this.importHref(‘moji-feed.html’, function() {
    this.hideSigninUI();
    this.showMainApp();
    }, null, true);
    }
    }

    View full-size slide






  51. firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
    this.importHref(‘moji-feed.html’, function() {
    this.hideSigninUI();
    this.showMainApp();
    }, null, true);
    }
    }

    View full-size slide

  52. LIGHTHOUSE
    I S R E A A A A L LY AW E S O M E

    View full-size slide

  53. HOW PAUL LEWIS
    S T O RY T I M E
    RUINED MY DAY

    View full-size slide

  54. FAKE IT
    P R O T I P
    YOU MAKE IT
    W H I L E

    View full-size slide




  55. Hi there!
    Loading..



    View full-size slide




  56. Hi there!
    Loading..



    View full-size slide

  57. BEFORE CHANGE WITH CHANGE

    View full-size slide

  58. C’EST FACILE!
    I N T E R N AT I O N A L I Z AT I O N
    7

    View full-size slide


  59. [[localize(‘sign-out’)]]

    View full-size slide

  60. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “zh”: { “sign-out”: “蝐ڊ” }
    }

    View full-size slide

  61. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “zh”: { “sign-out”: “蝐ڊ” }
    }
    Polymer({
    behaviors: [Polymer.AppLocalizeBehavior],
    ready: {
    this.language = ‘en’;
    this.loadResources(‘locales.json’);
    }
    });

    View full-size slide

  62. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “zh”: { “sign-out”: “蝐ڊ” }
    }
    Polymer({
    behaviors: [Polymer.AppLocalizeBehavior],
    ready: {
    this.language = ‘en’;
    this.loadResources(‘locales.json’);
    }
    });

    View full-size slide

  63. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “zh”: { “sign-out”: “蝐ڊ” }
    }
    Polymer({
    behaviors: [Polymer.AppLocalizeBehavior],
    ready: {
    this.language = ‘en’;
    this.loadResources(‘locales.json’);
    }
    });

    View full-size slide

  64. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “zh”: { “sign-out”: “蝐ڊ” }
    }
    Polymer({
    behaviors: [Polymer.AppLocalizeBehavior],
    ready: {
    this.language = ‘en’;
    this.loadResources(‘locales.json’);
    }
    });

    View full-size slide

  65. ALL TOGETHER NOW

    View full-size slide

  66. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  67. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  68. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  69. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  70. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  71. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  72. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  73. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  74. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    IRON-LIST LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  75. @NOTWALDORF
    NOUN PROJECT ICONS: JAIME CARRION, RFLOR, STOCK IMAGE FOLIO, BERNAR NOVALYI
    h t t p s : // m o j i b r a g . f i r e b a s e a p p . c o m

    View full-size slide