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.

Transcript

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

   View Slide

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

   View Slide

3. @NOTWALDORF
   

   View Slide

4. @NOTWALDORF
   NEELIX
   

   View Slide

5. @NOTWALDORF
   EMOJINEER
   

   View Slide

6. @NOTWALDORF
   

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES
    

    View Slide

15. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES
    

    View Slide

16. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    RESPONSIVE UI OFFLINE
    ROUTES LANGUAGES
    

    View Slide

17. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES
    

    View Slide

18. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES
    

    View Slide

19. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES
    

    View Slide

20. IT’S GOT USERS THAT
    NEED AUTHENTICATION

    DATA IN THE
    OFFLINE RESPONSIVE UI
    ROUTES LANGUAGES
    

    View Slide

21. SO LET’S BUILD
    THIS APP
    

    View Slide

22. HTTPS://MOJIBRAG.FIREBASEAPP.COM
    

    View Slide

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

    View Slide

24. HTML
    

    View Slide

25. 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 Slide

26. 
    
    
    
    
    
    
    

    View Slide

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

    View Slide

28. View Slide

29. View Slide

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

    View Slide

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

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

    View Slide

33. 
    
    
    
    
    Meow
    
    
    

    View Slide

34. 
    
    
    
    
    Meow
    
    
    

    View Slide

35. 
    
    
    
    
    Meow
    
    
    

    View Slide

36. 
    
    
    
    
    Meow
    
    
    

    View Slide

37. 
    
    
    
    
    Meow
    
    
    

    View Slide

38. View Slide

39. 
    
    href=“google-map.html”>
    
    
    latitude=“37.7”
    longitude=“-122.3”>
    
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. 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 Slide

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

    View Slide

46. View Slide

47. View Slide

48. localhost:8000/view2
    

    View Slide

49. localhost:8000/view3
    

    View Slide

50. View Slide

51. View Slide

52. AUTHENTICATION
    2
    

    View Slide

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

    View Slide

54. View Slide

55. View Slide

56. 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 Slide

57. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. “THE CLOUD”
    3
    

    View Slide

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

    View Slide

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

    View Slide

64. 
    

    View Slide

65. 
    
    

    View Slide

66. 
    
    

    View Slide

67. path=“/posts/{{channelName}}“
    data="{{_liveData}}">
    
    session="[[uid]]"
    key="/posts/{{teamName}}"
    data="[[_fbPosts]]"
    persisted-data="{{posts}}">
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

71. View Slide

72. View Slide

73. View Slide

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

    View Slide

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

    View Slide

76. 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 Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. 
    ✨
    

    View Slide

82. View Slide

83. 
    

    View Slide

84. 
    

    View Slide

85. 
    
    

    View Slide

86. 
    
    
    

    View Slide

87. 
    
    
    

    View Slide

88. 
    
    
    
    

    View Slide

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

    View Slide

90. 
    
    

    View Slide

91. View Slide

92. ACTIVE
    CHANNEL
    

    View Slide

93. ACTIVE
    CHANNEL
    EVENT:
    POST !
    

    View Slide

94. OFFLINE:
    FALSE
    EVENT:
    POST !
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

99. 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 Slide

100. 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 Slide

101. 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 Slide

102. 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 Slide

103. 
     Sign in
     
     

     View Slide

104. View Slide

105. View Slide

106. M
     AKE IT
     FAST
     6
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

110. importHref(
     fileName,
     successCallback,
     errorCallback)
     

     View Slide

111. 
     
     
     
     
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

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

     View Slide

120. View Slide

121. WEBPAGETEST.ORG
     

     View Slide

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

     View Slide

123. 
     Sign out
     
     

     View Slide

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

     View Slide

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

     View Slide

126. 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 Slide

127. 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 Slide

128. 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 Slide

129. 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 Slide

130. View Slide

131. View Slide

132. View Slide

133. ALL TOGETHER NOW
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

143. @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 Slide