Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Future of web development

338 views

Published on

A brief overview of the future of web development and how to make your Web Apps Load Instantly, be Available Offline and interactive.

Published in: Technology
  • Be the first to comment

Future of web development

  1. 1. WELCOME TO MOBILE NORTH
  2. 2. PROGRESSIVE WEB APPS THE FUTURE….
  3. 3. SERVICE WORKERS ARE TO PROGRESSIVE WEB APPS AS XMLHTTPREQUEST WAS TO AJAX Progressive Web Apps London PROGRESSIVE WEB APPS
  4. 4. SECURITY PROGRESSIVE WEB APPS
  5. 5. PROGRESSIVE WEB APPS SECURITY ▸ When developing, there is no needs to do anything different Localhost is treat as a secure environment. ▸ letsencrypt.org a group of people trying to get HTTPS as wide spread as possible on the web. Offer a command line tool that will help you generate your SSL certs and encourage you to automate the process.
  6. 6. PROGRESSIVE WEB APPS SECURITY ▸Mozilla SSL Config Generator (bit.ly/ssl-config-gen) ▸Should be your first stop when seeing up secure servers. ▸Tool that gives you example configurations with all the best practices that is constantly kept up to date so you know your server will be secure. ▸Chrome DevTools provides an in-depth look at the security of your site, if you haven't been already you should definitely take advantage of this free tool.
  7. 7. PROGRESSIVE WEB APPS SECURITY ▸SSL Labs ▸Analysis tool to help pain point problems in your servers security and help you rectify them. ▸bit.ly/ssl-labs ▸Lastly some “Light” reading and watching on the subject of security. ▸Google Developers Security: bit.ly/security-docs ▸HTTPS The green lock and beyond: bit.ly/green-lock-beyond
  8. 8. PROGRESSIVE WEB APPS USEFUL LINKS ▸paul.kinlan.me/detecting-injected-content/ ▸letsencrypt.org/ ▸mozilla.github.io/server-side-tls/ssl-config-generator/ ▸www.ssllabs.com/ssltest/ ▸developers.google.com/web/fundamentals/security/ ▸www.youtube.com/watch?v=9WuP4KcDBpI (Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
  9. 9. INSTANT PROGRESSIVE WEB APPS
  10. 10. EVERY STEP YOU MAKE A USER PERFORM BEFORE THEY GET VALUE OUT OF YOUR APP WILL COST YOU 20% OF USERS http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html PROGRESSIVE WEB APPS
  11. 11. PROGRESSIVE WEB APPS WEB APPS VS NATIVE ▸One thing Web apps have over Native is that they are always available so already you have retained 20% of your users. ▸Golden Rules ▸Don't be big ▸ Minify everything, .webp image format (compatibility!), <picture> element tag ▸Only download what you need ▸ Simple enough don't try to load everything in your web app your user will be left waiting and slowly but surely hating your app. ▸Only download whats changed ▸ Use file headers to see if the file has changed or not to reduce round trip time
  12. 12. PROGRESSIVE WEB APPS CACHING & OTHER TRICKS ▸Defer the loading of scripts and some one Critical CSS files until the HMTL has been parsed. ▸Defer iframe loading. ▸Reduce Round trips ▸As we all know caching allows for us to display web pages without having to make calls to servers making the over all experience for the user better. Having a robust caching strategy can shave seconds off your loading time. ▸We can now do so much more with caching using Service Workers (more on this later on).
  13. 13. PROGRESSIVE WEB APPS HTTP/2 ▸Instead of 6 simultaneous connections HTTP/2 uses only one. ▸HTTP/2 tackles the issue of heads blocking on the protocol level, by changing HTTP/1.1 connections into streams allowing connections to share a single connection splitting things up into streams. ▸Once one set of frames is finished sending the stream is freed up for the next set not needing to wait for a response.
  14. 14. PROGRESSIVE WEB APPS USEFUL LINKS ▸Gulp-Serv https://github.com/sindresorhus/gulp-rev ▸Async CSS Loading github.com/filamentgroup/loadCSS ▸Sample Web App aerotwist.com/blog/guitar-tuner/ ▸HTTP/2 github.com/GoogleChrome/simplehttp2server
  15. 15. OFFLINE AND AVAILABLE PROGRESSIVE WEB APPS
  16. 16. PROGRESSIVE WEB APPS SERVICE WORKERS ▸Service workers are the future of web apps, they provide a tremendous amount of power and control for a small amount of effort. ▸We can take control of what we show and how the user interacts with our web apps when we have no connection or a slow connection. ▸The aim is to never again see the Chrome No connection Dinosaur, or keep our users in a state of limbo.
  17. 17. PROGRESSIVE WEB APPS NO CONNECTION ▸Service workers can be used to load cached web pages and assets when a user has no connection to the internet. ▸Instead of seeing a web page telling the user they are at fault cause their device is not connected to the internet. They see their favourite app and what they were doing last allowing them to interact with the app despite having no internet connection.
  18. 18. PROGRESSIVE WEB APPS SLOW CONNECTION / LIE-FI ▸What happens when a users device is reporting they have a connection but its so slow it might as well be non existent? They are left in limbo staring at a blank screen, slowly getting frustrated by your app. ▸Using the service worker API you can do the same as if the user wasn't connected to the internet and display their application and allow them to interact with it communicating their interactions when the connection is strong enough.
  19. 19. PROGRESSIVE WEB APPS SPEEDING UP LOADING ▸Even when users have a strong internet connection service workers can reduce the time it takes load your applications up. ▸Caching and service workers can actually make a web app load up faster than some native applications. ▸(only after the first loading that is)
  20. 20. PROGRESSIVE WEB APPS USEFUL LINKS ▸Service Worker Specification github.com/slightlyoff/ServiceWorker ▸Free Service Worker Udacity course www.udacity.com/course/offline-web-applications--ud899 ▸ The Network layer is yours to own. www.youtube.com/watch?v=4uQMl7mFB6g
  21. 21. HIGH PERFORMANCE ANIMATIONS PROGRESSIVE WEB APPS
  22. 22. PROGRESSIVE WEB APPS JS ANIMATIONS VS CSS ANIMATIONS ▸Many people discuss the merits and draw backs of both ways of defining and executing animations. ▸Largely it doesn't matter which method you use as they all use the same render pipeline.
  23. 23. PROGRESSIVE WEB APPS THINKING OUT OF THE BOX ▸Animations can be expensive and fitting them in 8ms cycles is very hard and can lead to a lot of “janking” ▸Introducing FLIP Animations ▸F - First: First positions of the animation ▸L - Last: Ending position of the animation ▸I - Invert: Transformation of objects ▸P - Play: Play the animation
  24. 24. PROGRESSIVE WEB APPS FLIP ANIMATIONS ▸May sound like average animations but in fact it is different. ▸The animation actually plays out in reverse, instead of transitioning between the first and ending positions of the animation the object actually starts off in the ending state with a transform to make it look like it is in its starting position. ▸Once the transformation is removed the object will animate to its ending position creating the illusion of an animation that is more likely to play out at 60fps.
  25. 25. PROGRESSIVE WEB APPS USEFUL LINKS ▸bit.ly/aerocharged ▸bit.ly/anatomy-of-a-frame ▸csstriggers.com ▸voice-memos.appspot.com ▸bit.ly/flip-anims ▸bit.ly/flipjs ▸bit.ly/rail-udacity
  26. 26. INSTALLABLE AND ENGAGING PROGRESSIVE WEB APPS
  27. 27. PROGRESSIVE WEB APPS INSTALLABLE AND ENGAGING ▸ Giving the user the option to access the web app without the need for a browser. ▸ Creates a better mobile experience that is normally only found in native applications. ▸ Keeps users engaged with your web app as they can have instant access.
  28. 28. iPhone (2007) Chrome (2013)Android (2012)
  29. 29. NOT VERY GOOD!▸ Pretty much glorified bookmarks ▸ No real standardisation ▸ Needed to use <meta> tags ▸ No control of what is launched
  30. 30. THREE RULES!▸ Offer an offline experience ▸ Have a manifest ▸ Keep user engaged
  31. 31. PROGRESSIVE WEB APPS WORKING OFFLINE ▸ Already discussed in the previous section but applies here also. ▸ Anything that is intended to be saved on the users home screen should always be available ▸ Either have the app cache previous data to show or gracefully inform the user that they need internet ▸ No Offline-O-Saurus!
  32. 32. PROGRESSIVE WEB APPS USING MANIFEST ▸ Defines how your app will look on the mobiles home screen. ▸ How the web app looks when it is opened. ▸ What the app will launch when it is opened. ▸ How the app launches. ▸ Don’t have the app launch in a leaf page!
  33. 33. PROGRESSIVE WEB APPS THE MANIFEST ▸ manifest.json { "name": "The Air Horner", "short_name": "Air Horner", "icons": [ { "src": "images/Airhorner_192.png", "type": "image/png", "sizes": "192x192" } ], "start_url": "index.html", "display": “standalone" || “window”, "theme_color": "#2196F3", "background_color": "#2196F3" }
  34. 34. PROGRESSIVE WEB APPS KEEPING USER ENGAGED ▸ Inform the user that they can install the web application. ▸ Make the request simple and un- intrusive. ▸ Be able to handle the users choice and remove the prompt without issue. ▸ Don’t spam the user!
  35. 35. PROGRESSIVE WEB APPS THE OLD WAY
  36. 36. PROGRESSIVE WEB APPS PROMPTING THE USER
  37. 37. PROGRESSIVE WEB APPS USEFUL LINKS ▸https://w3c.github.io/manifest/ ▸https://developers.google.com/web/fundamentals/engage- and-retain/app-install-banners/ ▸https://developer.mozilla.org/en- US/docs/Web/API/Window/onbeforeinstallprompt ▸https://github.com/GoogleChrome/samples/tree/gh- pages/app-install-banner
  38. 38. INCREASING ENGAGEMENT PROGRESSIVE WEB APPS
  39. 39. PROGRESSIVE WEB APPS INCREASING ENGAGEMENT WITH PUSH NOTIFICATIONS 26%increase in average spend per visit by members arriving via a push notification 72%increase in time spent for users visiting via a push notification +50%repeat visits within 3 months
  40. 40. PROGRESSIVE WEB APPS NOTIFICATIONS SHOULD BE ▸ Personal ▸ Timely ▸ Relevant ▸ Actionable ▸ Concise ▸ Work offline ▸ Don’t advertise
  41. 41. PROGRESSIVE WEB APPS BAD EXAMPLES Google Plus Fred just posted a new message Document Saved Your document is now saved. Files Have Been Synced 7 files have now been synced Super Cool App Install my native app, it’s cool! Thanks Thanks for installing my app Super Cool App Error: Lost network connection
  42. 42. PROGRESSIVE WEB APPS GOOD EXAMPLES Questn Fred answered your questn Flight Delayed New departure time is 7:35pm. Payment due Your payment is due today HTTP203 Podcast A new episode is now available Goober Your self driving car has arrived Credit card alert Did you try to make a purchase?
  43. 43. HOW NOTIFICATIONS WORK! (THE ABRIDGED VERSION) (TOO MUCH CODE, SO LITTLE TIME)
  44. 44. PROGRESSIVE WEB APPS SUBSCRIBING USERS Ask User to Subscribe User Subscribes Send End Point Details Check If User Is Subscribed Save End Point Details Browser Server
  45. 45. PROGRESSIVE WEB APPS SENDING MESSAGES Send to End Point Send To Browser Received by BrowserGenerate Message Server End Point Client
  46. 46. PROGRESSIVE WEB APPS RECEIVING MESSAGES SW Starts Handle Message Show NotificationPush Arrives Client
  47. 47. PROGRESSIVE WEB APPS PROMPTING, SUBSCRIBING AND NOTIFYING
  48. 48. PROGRESSIVE WEB APPS USEFUL LINKS ▸https://developers.google.com/web/fundamentals/engage- and-retain/push-notifications/ ▸https://w3c.github.io/push-api/ ▸https://developers.google.com/web/updates/2016/03/web- push-encryption ▸https://github.com/GoogleChrome/propel (A library developed by Google for web push notifications)
  49. 49. PROGRESSIVE WEB APPS GOOGLE LINKS ▸Progressive web apps london slides https://docs.google.com/presentation/d/1sUKnfSHsnu4dS2o K- NyAqpTDkL2iY25zTzxTrSSnTTY/edit#slide=id.g10dfcf3c05_ 0_4660 ▸Jake Archibalds Slides https://speakerdeck.com/jaffathecake/offline-first- progressive-apps

×