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.

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

October 22, 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. 7.
  3. 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
  4. 11.

    PROGRESSIVE WEB APPS O F F L I N E

    ! S E RV I C E W O R K E R !
  5. 14.

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

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  6. 15.

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

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  7. 24.
  8. 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
  9. 27.

    HTML E L E M E N T S A

    R E E N C A P S U L AT E D
  10. 28.
  11. 29.
  12. 30.

    HTML E L E M E N T S H

    AV E A N A P I
  13. 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 : (
  14. 32.

    WEB COMPONENTS E L E M E N T S

    A R E M A D E BY Y O U !
  15. 38.
  16. 42.

    POLYMER E A S I E R W E B

    C O M P O N E N T S
  17. 43.

    POLYMER “ T H E R E ’ S A

    N E L E M E N T F O R T H AT ”
  18. 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
  19. 45.

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

    ̙ҹ).̶ӈὑ ~/Code/app ❥ polymer init starter-kit
  20. 46.
  21. 47.
  22. 50.
  23. 51.
  24. 54.
  25. 55.
  26. 58.

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

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

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

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

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

    ready: function() { this.$.auth.auth.onAuthStateChanged(function(user){ // you have a user! } }
  29. 71.
  30. 72.
  31. 73.
  32. 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
  33. 77.
  34. 78.
  35. 79.
  36. 80.
  37. 81.

  38. 82.
  39. 91.
  40. 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)); },
  41. 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)); },
  42. 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)); },
  43. 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)); },
  44. 104.
  45. 105.
  46. 107.

    D O L E S S . B E L

    A Z Y RENDER LESS DOM
  47. 108.

    D O L E S S . B E L

    A Z Y IRON-LIST
  48. 112.

    <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); } }
  49. 115.
  50. 116.
  51. 117.
  52. 118.
  53. 119.
  54. 120.
  55. 122.

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

    O N A L I Z AT I O N 7
  56. 125.

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

    “sign-out”: “Déconnexion” }, “tw”: { “sign-out”: “ጭڊ” } }
  57. 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’); } });
  58. 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’); } });
  59. 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’); } });
  60. 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’); } });
  61. 130.
  62. 131.
  63. 132.
  64. 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