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 )
  2. PROGRESSIVE WEB APPS F R I C T I O

    N L E S S D O W N L O A D S
  3. PROGRESSIVE WEB APPS O F F L I N E

    ! S E RV I C E W O R K E R !
  4. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN IN THE

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  5. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN IN THE

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES
  6. 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
  7. HTML E L E M E N T S A

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

    AV E A N A P I
  9. 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 : (
  10. WEB COMPONENTS E L E M E N T S

    A R E M A D E BY Y O U !
  11. POLYMER E A S I E R W E B

    C O M P O N E N T S
  12. POLYMER “ T H E R E ’ S A

    N E L E M E N T F O R T H AT ”
  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
  14. (´ ̙ҹ).̶ӈὑ ~/Code ❥ mkdir app && cd app (´

    ̙ҹ).̶ӈὑ ~/Code/app ❥ polymer init starter-kit
  15. login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },

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

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

    ready: function() { this.$.auth.auth.onAuthStateChanged(function(user){ // you have a user! } }
  18. 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
  19. 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)); },
  20. 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)); },
  21. 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)); },
  22. 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)); },
  23. D O L E S S . B E L

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

    A Z Y IRON-LIST
  25. <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); } }
  26. C’EST FACILE! I N T E R N AT I

    O N A L I Z AT I O N 7
  27. locales.json: { “en”: { “sign-out”: “Sign out” }, “fr”: {

    “sign-out”: “Déconnexion” }, “tw”: { “sign-out”: “ጭڊ” } }
  28. 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’); } });
  29. 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’); } });
  30. 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’); } });
  31. 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’); } });
  32. @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