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

Monica Dinculescu

October 22, 2016

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)

88

5.7k

Fontastic web performance

18

4.1k

What you see is what you deserve: simple visual tools for all!

5

780

Billions served, lessons learned: a Polymer story

3

1.2k

An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox

3

900

How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome

2

550

input, i ♥️ you, but you're bringing me down

7

2.1k

Building web components: lessons, I have them.

5

1.6k

🎉🐱✨or: How I didn’t fix emoji in Chrome

1

1.2k

Other Decks in Programming

See All in Programming

Jakarta EE meets AI

0

120

ヤプリ新卒SREのオンボーディング

0

130

ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module

0

150

NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1

0

330

色々なIaCツールを実際に触って比較してみる

0

330

聞き手から登壇者へ： RubyKaigi2024 LTでの初挑戦が教えてくれた、可能性の星

1

130

Snowflake x dbtで作るセキュアでアジャイルなデータ基盤

2

520

Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan

0

870

CSC509 Lecture 09

0

140

3 Effective Rules for Using Signals in Angular

0

100

Arm移行タイムアタック

0

310

Duckdb-Wasmでローカルダッシュボードを作ってみた

0

120

Featured

See All Featured

Why You Should Never Use an ORM

54

9.1k

Why Our Code Smells

334

57k

The Cost Of JavaScript in 2023

45

6.7k

452

42k

Put a Button on it: Removing Barriers to Going Fast.

59

3.5k

Typedesign – Prime Four

40

2.4k

Exploring the Power of Turbo Streams & Action Cable | RailsConf2023

27

4.3k

Optimizing for Happiness

376

70k

Facilitating Awesome Meetings

50

6.1k

Refactoring Trust on Your Teams (GOTO; Chicago 2020)

31

2.7k

A Philosophy of Restraint

203

16k

Testing 201, or: Great Expectations

38

7.1k

Transcript

3 DAYS A N A P P I N (
M O R E O R L E S S )
ӞԫӣࢥԲمӠكԜ܈ݣ傀 ፓ෭์กॠӧय़ੜஞமӾ࿜ᅉ ࢿᔭ๙຋༏ਦՈفڊݗ樌槹樄 ๜᥺ਞঀካኦ୙ᛔ૩አࡋ揌ಋ ᜎሴᡩێઊྋྊ㾴
@NOTWALDORF
@NOTWALDORF NEELIX
@NOTWALDORF EMOJINEER
@NOTWALDORF
None
PROGRESSIVE WEB APPS C O O L “ N E
W ” T H I N G !
PROGRESSIVE WEB APPS N AT I V E L O
O K & F E E L
PROGRESSIVE WEB APPS F R I C T I O
N L E S S D O W N L O A D S
PROGRESSIVE WEB APPS O F F L I N E
! S E RV I C E W O R K E R !
PROGRESSIVE WEB APPS S O U N D S U
P E R H A R D ?
I’VE NEVER BUILT O K . R E A L
TA L K AN APP
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN IN THE
RESPONSIVE UI OFFLINE ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN IN THE
RESPONSIVE UI OFFLINE ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN THE RESPONSIVE
UI OFFLINE ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN THE OFFLINE
RESPONSIVE UI ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN THE OFFLINE
RESPONSIVE UI ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN THE OFFLINE
RESPONSIVE UI ROUTES LANGUAGES
IT’S GOT USERS THAT NEED AUTHENTICATION  DATA IN THE OFFLINE
RESPONSIVE UI ROUTES LANGUAGES
SO LET’S BUILD THIS APP
HTTPS://MOJIBRAG.FIREBASEAPP.COM
POLYMER 101 W H AT I S I T ?
0
HTML
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
<html> <body> <input> <input type=“checkbox”> <video src=“video.mp3” controls></video> </body> </html>
HTML E L E M E N T S A
R E E N C A P S U L AT E D
None
None
HTML E L E M E N T S H
AV E A N A P I
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 : (
WEB COMPONENTS E L E M E N T S
A R E M A D E BY Y O U !
<html> <head> <link rel=“stylesheet” href=“fancy-button.css”> </head> <body> <div class=“fancy button
jquery-ui”>Meow</div> </body> </html>
<html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>
<html> <head> <link rel=“import” href=“number-input.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>
<html> <head> <link rel=“import” href=“fancy-button.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>
<html> <head> <link rel=“import” href=“fancy-button.html”> </head> <body> <fancy-button>Meow</fancy-button> </body> </html>
None
<html> <head> <link rel=“import” href=“google-map.html”> </head> <body> <google-map latitude=“37.7” longitude=“-122.3”>
</google-map> </body> </html>
JQUERY E A S I E R J AVA S
C R I P T
NPM MODULES E A S I E R J AVA
S C R I P T
POLYMER E A S I E R W E B
C O M P O N E N T S
POLYMER “ T H E R E ’ S A
N E L E M E N T F O R T H AT ”
DO LESS / BE LAZY B U T F O
R L I K E , E V E RY T H I N G 1
(´ ̙ҹ).̶ӈὑ ~/Code ❥ mkdir app && cd app (´
̙ҹ).̶ӈὑ ~/Code/app ❥ polymer init starter-kit
None
None
localhost:8000/view2
localhost:8000/view3
None
None
AUTHENTICATION 2
USE FIREBASE W H E N I N D O
U B T
None
None
<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>
<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>
login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },
attached: function() { firebase.auth().onAuthStateChanged(function(user){ // you have a user! } }
login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },
attached: function() { firebase.auth().onAuthStateChanged(function(user){ // you have a user! } }
login: function() { this.$.auth.signInWithPopup(); }, logout: function() { this.$.auth.signOut(); },
ready: function() { this.$.auth.auth.onAuthStateChanged(function(user){ // you have a user! } }
“THE CLOUD” 3
JUST USE FIREBASE S E R I O U S
LY.
<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>
<FIREBASE-QUERY> <MY-APP>
<FIREBASE-QUERY> <MY-APP> <MIRROR>
<FIREBASE-QUERY> <MY-APP> <MIRROR>
<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>
<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>
<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>
<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>
None
None
None
PUTTING IT TOGETHER V I E W S ’ N
’ D ATA 4
FEATURES T H I N K I N G A
B O U T
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
None
None
None
None
✨
None
<FIREBASE-AUTH>
<FIREBASE-AUTH> <MY-APP>
<FIREBASE-AUTH> <MY-APP> <NEW-POST>
<FIREBASE-AUTH> <MY-APP> <NEW-POST> <IRON-LIST>
<FIREBASE-AUTH> <MY-APP> <NEW-POST> <IRON-LIST>
<MY-APP> <MAIN-SCREEN> <NEW-POST> <LOGIN-SCREEN> <IRON-LIST>
PROPERTIES DOWN D ATA F L O W EVENTS UP
<NEW-POST> <MAIN-SCREEN>
None
ACTIVE CHANNEL
ACTIVE CHANNEL EVENT: POST !
OFFLINE: FALSE EVENT: POST !
OFFLINE: FALSE EVENT: POST ! THIS.$.POST.HIDDEN
WORK OFFLINE? B U T D O E S I
T 5
SERVICE WORKER A L R E A DY D O
N E
CONDITIONAL UI Y O U M I G H T
WA N T
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)); },
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)); },
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)); },
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)); },
<paper-button hidden$=“[[offline]]> Sign in </paper-button>
None
None
M AKE IT FAST 6
D O L E S S . B E L
A Z Y RENDER LESS DOM
D O L E S S . B E L
A Z Y IRON-LIST
IF YOU DON’T NEED IT DON’T IMPORT IT D O
L E S S . B E L A Z Y
importHref( fileName, successCallback, errorCallback)
<link rel=“import” href=“signin-view.html”> <my-app> <signin-view></signin-view> <moji-feed></moji-feed> </my-app>
<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); } }
<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(); }); } }
<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(); }); } }
None
None
None
None
LIGHTHOUSE I S R E A A A A L
LY AW E S O M E
None
WEBPAGETEST.ORG
C’EST FACILE! I N T E R N AT I
O N A L I Z AT I O N 7
<paper-button> Sign out </paper-button>
<paper-button> [[localize(‘sign-out’)]] </paper-button>
locales.json: { “en”: { “sign-out”: “Sign out” }, “fr”: {
“sign-out”: “Déconnexion” }, “tw”: { “sign-out”: “ጭڊ” } }
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’); } });
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’); } });
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’); } });
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’); } });
None
None
None
ALL TOGETHER NOW
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
IRON-LIST LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR
POLYMER CLI APP-LAYOUT SERVICE-WORKER POLYFIRE PROPERTIES ⇣ EVENTS ⇡ NAVIGATOR.ONLINE
FAST ELEMENTS LAZY LOADING APP-LOCALIZE-BEHAVIOUR
@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