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
88
5.7k
Fontastic web performance
notwaldorf
18
4.2k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
790
Billions served, lessons learned: a Polymer story
notwaldorf
3
1.2k
An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox
notwaldorf
3
910
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
560
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
range over funcの使い道と非同期N+1リゾルバーの夢 / about a range over func
mackee
0
110
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
Security_for_introducing_eBPF
kentatada
0
110
htmxって知っていますか？次世代のHTML
hiro_ghap1
0
330
あれやってみてー駆動から成長を加速させる / areyattemite-driven
nashiusagi
1
200
快速入門可觀測性
blueswen
0
320
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
useSyncExternalStoreを使いまくる
ssssota
6
1k
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
A Tale of Four Properties
chriscoyier
157
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94
Testing 201, or: Great Expectations
jmmastey
40
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Building Applications with DynamoDB
mza
91
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Experiences People Love
moore
138
23k

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