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

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

October 17, 2016
Tweet

Transcript

  1. 1.

    3 DAYS A N A P P I N (

    M O R E O R L E S S )
  2. 4.

    IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN IN THE

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  3. 5.

    IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN IN THE

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  4. 13.

    DO LESS / BE LAZY B U T F O

    R L I K E , E V E RY T H I N G 1
  5. 14.

    (´ ̙ҹ).牐ӈὑ ~/Code ❥ mkdir app && cd app (´

    ̙ҹ).牐ӈὑ ~/Code/app ❥ polymer init starter-kit
  6. 15.
  7. 16.
  8. 19.
  9. 20.
  10. 25.

    login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },

    attached: function() { firebase.auth().onAuthStateChanged(function(user){ // you have a user! } }
  11. 26.

    login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },

    attached: function() { firebase.auth().onAuthStateChanged(function(user){ // you have a user! } }
  12. 27.

    login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },

    attached: function() { this.$.auth.auth.onAuthStateChanged(function(user){ // you have a user! } }
  13. 38.
  14. 39.
  15. 40.
  16. 43.

    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
  17. 44.
  18. 45.
  19. 46.
  20. 47.
  21. 48.

  22. 49.
  23. 58.
  24. 66.

    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)); },
  25. 67.

    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)); },
  26. 68.

    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)); },
  27. 69.

    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)); },
  28. 71.
  29. 72.
  30. 74.

    D O L E S S . B E L

    A Z Y IRON-LIST
  31. 78.

    <link rel=“import” href=“signin-view.html”> <my-app> <signin-view></signin-view> <moji-feed></moji-feed> </my-app> firebase.auth().onAuthStateChanged(function(user) { if

    (user) { this.importHref(‘humble-brag.html', function() { this.hideSigninUI(); this.showMainApp(); }, null, true); } }
  32. 79.

    <link rel=“import” href=“signin-view.html”> <my-app> <signin-view></signin-view> <moji-feed></moji-feed> </my-app> firebase.auth().onAuthStateChanged(function(user) { if

    (user) { this.importHref(‘moji-feed.html’, function() { this.hideSigninUI(); this.showMainApp(); }, null, true); } }
  33. 80.

    <link rel=“import” href=“signin-view.html”> <my-app> <signin-view></signin-view> <moji-feed></moji-feed> </my-app> firebase.auth().onAuthStateChanged(function(user) { if

    (user) { this.importHref(‘moji-feed.html’, function() { this.hideSigninUI(); this.showMainApp(); }, null, true); } }
  34. 81.
  35. 82.
  36. 83.
  37. 84.
  38. 85.
  39. 86.
  40. 87.
  41. 88.
  42. 89.
  43. 92.
  44. 94.

    C’EST FACILE! I N T E R N AT I

    O N A L I Z AT I O N 7
  45. 97.

    locales.json: { “en”: { “sign-out”: “Sign out” }, “fr”: {

    “sign-out”: “Déconnexion” }, “zh”: { “sign-out”: “蝐ڊ” } }
  46. 98.

    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’); } });
  47. 99.

    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’); } });
  48. 100.

    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’); } });
  49. 101.

    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’); } });
  50. 102.
  51. 103.
  52. 104.
  53. 115.

    @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