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
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
14 Years of iOS: Lessons and Key Points
seyfoyun
1
770
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
200
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
170
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
フロントエンドのディレクトリ構成どうしてる？　Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
テストケースの名前はどうつけるべきか？
orgachem
PRO
0
130
CSC509 Lecture 14
javiergs
PRO
0
130
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
180
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Italy
prof18
0
150
MCP with Cloudflare Workers
yusukebe
2
220

Featured

See All Featured
Side Projects
sachag
452
42k
Agile that works and the tools we love
rasmusluckow
328
21k
Documentation Writing (for coders)
carmenintech
66
4.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Building Adaptive Systems
keathley
38
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Typedesign – Prime Four
hannesfritz
40
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k

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