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

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

Monica Dinculescu
October 22, 2016
Programming
2
1.2k

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

See All by Monica Dinculescu
How to train your dragon (web standard)
notwaldorf
90
6k
Fontastic web performance
notwaldorf
18
4.6k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
820
Billions served, lessons learned: a Polymer story
notwaldorf
3
1.3k
An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox
notwaldorf
3
930
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
590
input, i ♥️ you, but you're bringing me down
notwaldorf
7
2.1k
Building web components: lessons, I have them.
notwaldorf
5
1.6k
🎉🐱✨or: How I didn’t fix emoji in Chrome
notwaldorf
1
1.2k

Other Decks in Programming

See All in Programming
Cursor/Devin全社導入の理想と現実
saitoryc
24
18k
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
2
1.2k
PHP で学ぶ OAuth 入門
azuki
1
210
個人開発の学生アプリが企業譲渡されるまで
akidon0000
0
1k
GitHub Copilot for Azureを使い倒したい
ymd65536
1
200
プロダクト横断分析に役立つ、事前集計しないサマリーテーブル設計
hanon52_
2
480
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.6k
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
2
6.6k
Qiita Bash
mercury_dev0517
2
210
「理解」を重視したAI活用開発
fast_doctor
0
200
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
560
RubyKaigi Dev Meeting 2025
tenderlove
1
400

Featured

See All Featured
Facilitating Awesome Meetings
lara
54
6.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
BBQ
matthewcrist
88
9.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Into the Great Unknown - MozCon
thekraken
38
1.7k
For a Future-Friendly Web
brad_frost
177
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Adopting Sorbet at Scale
ufuk
76
9.3k

Transcript

  1. 3 DAYS A N A P P I N (

    M O R E O R L E S S )

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

  3. @NOTWALDORF

  4. @NOTWALDORF NEELIX

  5. @NOTWALDORF EMOJINEER

  6. @NOTWALDORF

  7. None

  8. PROGRESSIVE WEB APPS C O O L “ N E

    W ” T H I N G !

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

    O K & F E E L

  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

  11. PROGRESSIVE WEB APPS O F F L I N E

    ! S E RV I C E W O R K E R !

  12. PROGRESSIVE WEB APPS S O U N D S U

    P E R H A R D ?

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

    TA L K AN APP

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

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES

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

    RESPONSIVE UI OFFLINE ROUTES LANGUAGES

  16. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN THE RESPONSIVE

    UI OFFLINE ROUTES LANGUAGES

  17. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN THE OFFLINE

    RESPONSIVE UI ROUTES LANGUAGES

  18. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN THE OFFLINE

    RESPONSIVE UI ROUTES LANGUAGES

  19. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN THE OFFLINE

    RESPONSIVE UI ROUTES LANGUAGES

  20. IT’S GOT USERS THAT NEED AUTHENTICATION
 DATA IN THE OFFLINE

    RESPONSIVE UI ROUTES LANGUAGES

  21. SO LET’S BUILD THIS APP

  22. HTTPS://MOJIBRAG.FIREBASEAPP.COM

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

    0

  24. HTML

  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

  26. <html> <body> <input> <input type=“checkbox”> <video src=“video.mp3” controls></video> </body> </html>

  27. HTML E L E M E N T S A

    R E E N C A P S U L AT E D
  28. None
  29. None

  30. HTML E L E M E N T S H

    AV E A N A P I

  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 : (

  32. WEB COMPONENTS E L E M E N T S

    A R E M A D E BY Y O U !

  33. <html> <head> <link rel=“stylesheet” href=“fancy-button.css”> </head> <body> <div class=“fancy button

    jquery-ui”>Meow</div> </body> </html>

  34. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>

  35. <html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>

  36. <html> <head> <link rel=“import” href=“fancy-button.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>

  37. <html> <head> <link rel=“import” href=“fancy-button.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>

  38. None

  39. <html> <head> <link rel=“import” href=“google-map.html”> </head> <body> <google-map latitude=“37.7” longitude=“-122.3”>

    </google-map> </body> </html>

  40. JQUERY E A S I E R J AVA S

    C R I P T

  41. NPM MODULES E A S I E R J AVA

    S C R I P T

  42. POLYMER E A S I E R W E B

    C O M P O N E N T S

  43. POLYMER “ T H E R E ’ S A

    N E L E M E N T F O R T H AT ”

  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

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

    ̙ҹ).̶ӈὑ ~/Code/app ❥ polymer init starter-kit
  46. None
  47. None

  48. localhost:8000/view2

  49. localhost:8000/view3

  50. None
  51. None

  52. AUTHENTICATION 2

  53. USE FIREBASE W H E N I N D O

    U B T
  54. None
  55. None

  56. <firebase-app api-key=“…” database-url=“https://your-app.firebaseio.com" auth-domain=“your-app.firebaseapp.com" storage-bucket=“your-app.appspot.com”> </firebase-app> <firebase-auth id=“auth" user="{{user}}" provider=“google”>

    </firebase-auth>

  57. <firebase-app api-key=“…” database-url=“https://your-app.firebaseio.com" auth-domain=“your-app.firebaseapp.com" storage-bucket=“your-app.appspot.com”> </firebase-app> <firebase-auth id=“auth" user="{{user}}" provider=“google”>

    </firebase-auth>

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

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

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

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

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

    ready: function() { this.$.auth.auth.onAuthStateChanged(function(user){ // you have a user! } }

  61. “THE CLOUD” 3

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

    LY.

  63. <firebase-query data="{{_fbPosts}}" path="/posts/{{ref}}"> </firebase-query> <app-indexeddb-mirror session="[[uid]]" key="/posts/{{ref}}" data="[[_fbPosts]]" persisted-data="{{posts}}"> </app-indexeddb-mirror>

  64. <FIREBASE-QUERY> <MY-APP>

  65. <FIREBASE-QUERY> <MY-APP> <MIRROR>

  66. <FIREBASE-QUERY> <MY-APP> <MIRROR>

  67. <firebase-query path=“/posts/{{channelName}}“ data="{{_liveData}}"> </firebase-query> <app-indexeddb-mirror session="[[uid]]" key="/posts/{{teamName}}" data="[[_fbPosts]]" persisted-data="{{posts}}"> </app-indexeddb-mirror>

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

  69. <firebase-query path=“/posts/{{channelName}}“ data="{{_liveData}}"> </firebase-query> <app-indexeddb-mirror session=“[[user.uid]]" key="/posts/{{channelName}}" data="[[_liveData]]" persisted-data="{{posts}}"> </app-indexeddb-mirror>

  70. <firebase-query path=“/posts/{{channelName}}“ data="{{_liveData}}"> </firebase-query> <app-indexeddb-mirror session=“[[user.uid]]" key="/posts/{{channelName}}" data="[[_liveData]]" persisted-data="{{posts}}"> </app-indexeddb-mirror>

  71. None
  72. None
  73. None

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

    ’ D ATA 4

  75. FEATURES T H I N K I N G A

    B O U T

  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
  77. None
  78. None
  79. None
  80. None

  81. ✨

  82. None

  83. <FIREBASE-AUTH>

  84. <FIREBASE-AUTH> <MY-APP>

  85. <FIREBASE-AUTH> <MY-APP> <NEW-POST>

  86. <FIREBASE-AUTH> <MY-APP> <NEW-POST> <IRON-LIST>

  87. <FIREBASE-AUTH> <MY-APP> <NEW-POST> <IRON-LIST>

  88. <MY-APP> <MAIN-SCREEN> <NEW-POST> <LOGIN-SCREEN> <IRON-LIST>

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

  90. <NEW-POST> <MAIN-SCREEN>

  91. None

  92. ACTIVE CHANNEL

  93. ACTIVE CHANNEL EVENT: POST !

  94. OFFLINE: FALSE EVENT: POST !

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

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

    T 5

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

    N E

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

    WA N T

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

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

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

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

  103. <paper-button hidden$=“[[offline]]> Sign in </paper-button>

  104. None
  105. None

  106. M AKE IT FAST 6

  107. D O L E S S . B E L

    A Z Y RENDER LESS DOM

  108. D O L E S S . B E L

    A Z Y IRON-LIST

  109. IF YOU DON’T NEED IT DON’T IMPORT IT D O

    L E S S . B E L A Z Y

  110. importHref( fileName, successCallback, errorCallback)

  111. <link rel=“import” href=“signin-view.html”> <my-app> <signin-view></signin-view> <moji-feed></moji-feed> </my-app>

  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); } }

  113. <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(); }); } }

  114. <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(); }); } }
  115. None
  116. None
  117. None
  118. None

  119. LIGHTHOUSE I S R E A A A A L

    LY AW E S O M E
  120. None

  121. WEBPAGETEST.ORG

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

    O N A L I Z AT I O N 7

  123. <paper-button> Sign out </paper-button>

  124. <paper-button> [[localize(‘sign-out’)]] </paper-button>

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

    “sign-out”: “Déconnexion” }, “tw”: { “sign-out”: “ጭڊ” } }

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

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

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

  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’); } });
  130. None
  131. None
  132. None

  133. ALL TOGETHER NOW

  134. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  135. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  136. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  137. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  138. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  139. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  140. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  141. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  142. POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE

    FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR

  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