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

An app in 3 days [with an intro to PWA/Polymer]

An app in 3 days [with an intro to PWA/Polymer]

Think of your favorite 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.

Monica Dinculescu

October 22, 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. ӞԫӣࢥԲمӠكԜ܈ݣ傀
    ፓ෭์กॠӧय़ੜஞமӾ࿜ᅉ
    ࢿᔭ๙຋༏ਦՈفڊݗ樌槹樄
    ๜᥺ਞঀካኦ୙ᛔ૩አࡋ揌ಋ
    ᜎሴᡩێઊྋྊ㾴

    View full-size slide

  3. @NOTWALDORF
    NEELIX

    View full-size slide

  4. @NOTWALDORF
    EMOJINEER

    View full-size slide

  5. PROGRESSIVE
    WEB APPS
    C O O L “ N E W ” T H I N G !

    View full-size slide

  6. PROGRESSIVE
    WEB APPS
    N AT I V E L O O K & F E E L

    View full-size slide

  7. PROGRESSIVE
    WEB APPS
    F R I C T I O N L E S S D O W N L O A D S

    View full-size slide

  8. PROGRESSIVE
    WEB APPS
    O F F L I N E ! S E RV I C E W O R K E R !

    View full-size slide

  9. PROGRESSIVE
    WEB APPS
    S O U N D S U P E R H A R D ?

    View full-size slide

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

    View full-size slide

  11. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  12. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  13. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES

    View full-size slide

  14. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  15. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  16. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  17. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES

    View full-size slide

  18. SO LET’S BUILD
    THIS APP

    View full-size slide

  19. HTTPS://MOJIBRAG.FIREBASEAPP.COM

    View full-size slide

  20. POLYMER 101
    W H AT I S I T ?
    0

    View full-size slide

  21. HTML
    E L E M E N T S A R E M A D E BY T H E B R O W S E R

    View full-size slide

  22. HTML
    E L E M E N T S A R E E N C A P S U L AT E D

    View full-size slide

  23. HTML
    E L E M E N T S H AV E A N A P I

    View full-size slide

  24. HTML
    R E A L LY V E R B O S E A N D H A R D T O S H A R E : (

    View full-size slide

  25. WEB COMPONENTS
    E L E M E N T S A R E M A D E BY Y O U !

    View full-size slide



  26. href=“google-map.html”>


    latitude=“37.7”
    longitude=“-122.3”>



    View full-size slide

  27. JQUERY
    E A S I E R J AVA S C R I P T

    View full-size slide

  28. NPM MODULES
    E A S I E R J AVA S C R I P T

    View full-size slide

  29. POLYMER
    E A S I E R W E B C O M P O N E N T S

    View full-size slide

  30. POLYMER
    “ T H E R E ’ S A N E L E M E N T F O R T H AT ”

    View full-size slide

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

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

    View full-size slide

  33. localhost:8000/view2

    View full-size slide

  34. localhost:8000/view3

    View full-size slide

  35. AUTHENTICATION
    2

    View full-size slide

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

    View full-size slide

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

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

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

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

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

    View full-size slide

  42. “THE CLOUD”
    3

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  53. ACTIVE
    CHANNEL

    View full-size slide

  54. ACTIVE
    CHANNEL
    EVENT:
    POST !

    View full-size slide

  55. OFFLINE:
    FALSE
    EVENT:
    POST !

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

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

  64. M
    AKE IT
    FAST
    6

    View full-size slide

  65. D O L E S S . B E L A Z Y
    RENDER LESS DOM

    View full-size slide

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

    View full-size slide

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

  68. importHref(
    fileName,
    successCallback,
    errorCallback)

    View full-size slide






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

    View full-size slide






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

    View full-size slide






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

    View full-size slide

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

    View full-size slide

  73. WEBPAGETEST.ORG

    View full-size slide

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


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

    View full-size slide

  76. locales.json:
    {
    “en”: { “sign-out”: “Sign out” },
    “fr”: { “sign-out”: “Déconnexion” },
    “tw”: { “sign-out”: “ጭڊ” }
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. ALL TOGETHER NOW

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    FAST ELEMENTS LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  89. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    FAST ELEMENTS LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  90. POLYMER CLI APP-LAYOUT
    SERVICE-WORKER POLYFIRE
    PROPERTIES ⇣ EVENTS ⇡
    NAVIGATOR.ONLINE
    FAST ELEMENTS LAZY LOADING
    APP-LOCALIZE-BEHAVIOUR

    View full-size slide

  91. @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