Building Progressive Web Apps & Use The Platform to build a Better Web

Event: Tech Talk Thursday with Google and GDGKL: Firebase, PWA, Polymer & Angular

Topic: Polymer, PWA

Transcript

1. #GDGKL Tech Talk Saturday with Google and GDGKL
2. #GDGKL Building Progressive Web Apps
3. #GDGKL Henry Lim @henrylim96 Google Developer Group Kuala Lumpur Polyman, Firebass Fisherman
4. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL IS NOT GOOD *
5. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL https://upload.wikimedia.org/wikipedia/commons/e/eb/Interior_-_Pullman_trolleybus.jpg
6. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL https://upload.wikimedia.org/wikipedia/commons/6/67/Qatar_Airways_Boeing_777-200LR_Business_Class_cabin_Beltyukov.jpg
7. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL FIRST-CLASS EXPERIENCE
8. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL FIRST-CLASS EXPERIENCE
9. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL FIRST-CLASS EXPERIENCE
10. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL Magnus Hyttsten
11. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL PROGRESSIVE WEB APPS
12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL LET’S BUILD GOOD APP
13. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL IS AWESOME
14. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL HOW ?
15. #GDGKL Demo
16. #GDGKL “This presentation is one big advert for airhorner.com” - Paul Kinlan Paul, now you owe me a treat
17. #GDGKL Air Horner airhorner.com
18. #GDGKL
19. #GDGKL Pokedex pokedex.org
20. #GDGKL Voice Memos voice-memos.appspot.com
21. #GDGKL THANK YOU
22. #GDGKL THANK YOU why u no clap?
23. End of slideshow, click to exit
24. #GDGKL What makes PWA so special?
25. #GDGKL Homescreen Access App-like experience
26. #GDGKL 1. Web App Manifest ✓ 2. Service Worker ✓
27. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL
28. #GDGKL Push Notification Yes, push notification to webapp
29. #GDGKL 1. Works If Browser Closed 2. Needs Permission
30. #GDGKL Offline That Works™ & Instant Loading No more T-rex :(
35. #GDGKL
36. #GDGKL That’s (exactly) one month before my birthday
37. #GDGKL
38. #GDGKL
39. #GDGKL
40. #GDGKL Done.
41. #GDGKL End
42. #GDGKL Service Worker? Huh? html5rocks.com/en/tutorials/service-worker/introduction/
43. #GDGKL sw-precache npm install --save-dev sw-precache
44. #GDGKL Service Worker GENERATOR
45. #GDGKL Service Worker HTTP/2 CDNs Smaller images Lazy-load async/defer Defer iFrames Compression And more...
46. #GDGKL
47. #GDGKL
48. #GDGKL Well, you need HTTPS
49. #GDGKL
50. #GDGKL
51. #GDGKL So, am I progressive enough?
52. #GDGKL
53. #GDGKL Stops you crashing into the rocks; lights the way “ ”
54. #GDGKL lighthouse github.com/GoogleChrome/lighthouse
55. #GDGKL lighthouse Stops you crashing into the rocks; lights the way github.com/GoogleChrome/lighthouse
57. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL NOW WHAT? QUACK
58. #GDGKL Web App Manifest <link rel="manifest" href="manifest.json">
59. #GDGKL webmanife.st app-manifest.firebaseapp.com
60. #GDGKL { "short_name": "Kinlan's Amaze App", "name": "Kinlan's Amazing Application ++", "icons": [ { "src": "launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" }, { "src": "launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone", "orientation": "landscape" }
61. #GDGKL Can I Use ...
62. #GDGKL Internet Explorer?
63. #GDGKL caniuse.com
64. #GDGKL caniuse.com
66. #GDGKL FONTS Well, that’s Comic Sans.. f*ck
67. #GDGKL
68. #GDGKL PHYSICAL WEB google.github.io/physical-web
69. #GDGKL
70. #GDGKL WebVR https://webvr.info
71. I forgot to talk about devtools Can I talk until 2am? * i really didnt design this slide… eh purposely
72. #GDGKL What’s next? Web Bluetooth Web VR RAIL FLIP 60FPS DevTools Go watch all the videos from #io16 and #pwadevsummit
73. #GDGKL Find us on: Twitter @chromiumdev Slack chromiumdev-slack.herokuapp.com Chromiumdev.slack.com YouTube youtube.com/user/ChromeDevelopers
74. #GDGKL #PWA #GDGKL
75. #GDGKL Credit / Source Chrome Team Paul Kinlan Paul Lewis Jake Archibald Surma Dion Almaer Bruce Lawson Pete Lepage Addy Osmani Sam Dutton Bok Thye Yeow Bangalore: Progressive Web Apps - goo.gl/XiX8vU Offline-o-saurus Who else?
76. #GDGKL THANK YOU
77. #GDGKL Tech Talk Thursday with Google and GDGKL
78. #GDGKL #UseThePlatform to build a better web
79. #GDGKL Henry Lim @henrylim96 Google Developer Group Kuala Lumpur Polyman, Firebass Fisherman
80. #GDGKL Web is useless
81. #GDGKL
82. #GDGKL Web is useless so you need Javascript * i didn’t use Javascript to create that animation...
83. #GDGKL
84. #GDGKL You need MOAR Javascript
85. #GDGKL
86. #GDGKL The Cost of Frameworks aerotwist.com/ blog/the-cost-of-frameworks/
87. #GDGKL
88. #GDGKL Polymer Project #GDGKL
89. #GDGKL <button></button>
90. #GDGKL <button></button> <polymer-button></polymer-button/>
91. #GDGKL <button></button> <polymer-button></polymer-button/> This is Custom element It is reusable
92. #GDGKL Let’s build a Custom Element Using Polymer
93. <html> <head> </head> <body> </body> </html> index.html
94. <html> <head> <!-- remember to add webcomponents-lite.min.js --> </head> <body> </body> </html> index.html
95. <html> <head> <!-- remember to add webcomponents-lite.min.js --> <link rel="import" href="polymer-button.html"> </head> <body> </body> </html> index.html
96. <html> <head> <!-- remember to add webcomponents-lite.min.js --> <link rel="import" href="polymer-button.html"> </head> <body> <polymer-button></polymer-button> </body> </html> index.html
97. <link rel="import" href="../polymer/polymer.html"> polymer-button.html
98. <link rel="import" href="../polymer/polymer.html"> <dom-module id=""> </dom-module> <script> Polymer({ is : ‘’ }) </script> polymer-button.html
99. <link rel="import" href="../polymer/polymer.html"> <dom-module id="polymer-button"> </dom-module> <script> Polymer({ is : ‘polymer-button’ }) </script> polymer-button.html
100. <link rel="import" href="../polymer/polymer.html"> <dom-module id="polymer-button"> // put whatever you want here </dom-module> <script> Polymer({ is : ‘polymer-button’ }) </script> polymer-button.html
101. #GDGKL Don’t want to build your own? How about ......
102. #GDGKL
103. #GDGKL Material Design
104. #GDGKL
105. #GDGKL
106. #GDGKL Material Design ??? Polymer ???
107. #GDGKL Material Design ??? Polymer ??? PAPER ELEMENTS
108. #GDGKL
109. #GDGKL Putting Google Maps on a website
110. #GDGKL <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3168 .6392906210613!2d-122.08624618499388!3d37.42199987982524!2m3!1f 0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fba02425dad8f% 3A0x6c296c66619367e0!2sGoogleplex!5e0!3m2!1sen!2smy!4v146804290 5293" width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>
111. #GDGKL POLYMER !!! <google-map latitude="37.77493" longitude="-122.41942"> </google-map>
112. #GDGKL
113. #GDGKL
114. #GDGKL Introducing POLYMERFIRE bower install --save firebase/polymerfire
115. #GDGKL Actually there is an awesome element to make Firebase works offline… polymer/app-storage
116. <link rel="import" href="bower_componenets/polymerfire/polymerfire.html"> firebase-app
117. <link rel="import" href="bower_componenets/polymerfire/polymerfire.html"> <firebase-app> </firebase-app> firebase-app
118. <link rel="import" href="bower_componenets/polymerfire/polymerfire.html"> <firebase-app api-key="API_KEY_FROM_CONSOLE" database-url="https://{{YOUR_APP}}.firebaseio.com/" auth-domain="{{YOUR_APP}}.firebaseapp.com" storage-bucket="{{MY_APP}}.appspot.com"> </firebase-app> firebase-app
119. #GDGKL So you want to add login to your app ...
120. <link rel="import" href="bower_componenets/polymerfire/polymerfire.html"> <firebase-app api-key="API_KEY_FROM_CONSOLE" database-url="https://{{YOUR_APP}}.firebaseio.com/" auth-domain="{{YOUR_APP}}.firebaseapp.com" storage-bucket="{{MY_APP}}.appspot.com"> </firebase-app> <firebase-auth id="auth" user="{{user}}" provider="google"> </firebase-auth> firebase-app
121. #GDGKL So you want to show something from the database...
122. <firebase-document path="/users/{{userId}}/notes/{{noteId}}" data="{{noteData}}"> </firebase-document> <firebase-query id="query" app-name="notes" path="/notes/[[uid]]" data="{{data}}"> </firebase-query> firebase-document / firebase-query
123. #GDGKL There’s some amazing tools!
124. #GDGKL Polymer Snippets by Bob Dod
125. #GDGKL Let’s build a Progressive Web Apps with Polymer
126. #GDGKL Polymer App Toolbox a collection of components, tools and templates for building Progressive Web Apps with Polymer.
127. #GDGKL Install the Polymer CLI npm install -g polymer-cli
128. #GDGKL Initialize your project with an App Template polymer init app-drawer-template
129. #GDGKL Serve your project polymer serve --open
130. #GDGKL
131. #GDGKL What you have done: - Progressive Web Apps - Offline - Responsive - PRPL Pattern (Push, Render, Pre-cache, Lazy-Load)
132. #GDGKL PRPL Pattern - Push components required for the initial route - Render initial route ASAP - Pre-cache components for remaining routes - Lazy-load and progressively upgrade next routes on-demand
133. #GDGKL Demo
134. #GDGKL
135. #GDGKL Find us on: Twitter @polymer Slack polymer-slack.herokuapp.com polymer.slack.com YouTube youtube.com/user/ChromeDevelopers
136. #GDGKL Polymer User Group Malaysia facebook.com/groups/PolymerMalaysia
137. Polymer User Group Malaysia facebook.com/groups/PolymerMalaysia #GDGKL
138. #GDGKL Credit / Source Chrome Team Polymer Team Rob Dodson Taylor Savage Michael Bleigh Bok Thye Yeow Polytechnic Who else?
139. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL
140. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL Find us on Facebook & Twitter fb.me/GDGKualaLumpur facebook.com/groups/gtugkl twitter.com/gdgkl
141. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL Google I/O Extended Kuala Lumpur 2016 30 July 2016, Kuala Lumpur
142. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL
143. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem #GDGKL Feedback goo.gl/LX2z7r
144. #GDGKL Henry Lim @henrylim96 TERIMA KASIH!