Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ProData Consult: Web Trends

ProData Consult: Web Trends

Evening event about the latests web trends and summary from ColdFront Conference 2015.

October 2015

Kenneth Auchenberg

October 21, 2015
Tweet

More Decks by Kenneth Auchenberg

Other Decks in Programming

Transcript

  1. Agenda 17:00 - 17:45 • The web as an application

    platform • Service workers • Push Notifications • App Manifest + related features 17:45 - 17:55 Break 17:55-18:30 • WebRTC • Microsoft Edge 18:30 - 19:00 • Food/Dinner 19:00 - 20:00 • Physical Web • The headless web • The web in a native world • Future challenges
  2. Mobile browsers has changed too 34.38% 13.32% 16.78% 13.59% 16.82%

    3.12% Others 1.99% Source: http://www.sitepoint.com/browser-trends-october-2015-sustained-safari-slips/?utm_source=html5weekly&utm_medium=email
  3. Progressive Web Apps ServiceWorker WebRTC App Install Banners App Manifest

    Web Bluetooth Push Notifications Client Hints Responsive Images Web Crypto Media Source Extensions (MSE) requestIdleCallback Object.observe Copy & Paste ES6/2015 WebVR CSS: Grid Layouts CSS: Scroll snapping Pointer Events
  4. Progressive Web Apps ServiceWorker WebRTC App Install Banners App Manifest

    Web Bluetooth Push Notifications Client Hints Responsive Images Web Crypto Media Source Extensions (MSE) requestIdleCallback Object.observe Copy & Paste ES6/ES2015 WebVR CSS: Grid Layouts CSS: Scroll snapping Pointer Events
  5. Potential use-cases • Background data synchronization • Responding to resource

    requests from other origins • Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes • Hooks for background services • Custom templating based on certain URL patterns • Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the new few pictures in a photo album.
  6. “JSON-based manifest that provides developers with a centralized place to

    put metadata associated with a web application.” Source: http://www.w3.org/TR/appmanifest/
  7. { "name": "Voice Memos", "icons": [ { "src": "/images/icon-192x192.png", "sizes":

    "192x192", "type": "image/png" }, ], "background_color": "#FAFAFA", "theme_color": "#FAFAFA", }
  8. App install banners • You have a web app manifest

    file ◦ The manifest defines how your app appears on the user’s system and how it should be launched - and you are required to have a `short_name` and a `144x144` png icon • You have a service worker registered on your site. We recommend a simple custom offline pageservice worker • Your site is served over HTTPS (you need a service worker after all) • The user has visited your site twice over two separate days during the course of two weeks.
  9. • SDP - Session Description Protocol - Format for describing

    streaming media initialization parameters • STUN - Session Traversal Utilities for NAT - Enables announcing your public IP addrreess during the negotiation phase of a session • TURN - Traversal Using Relays around NAT - Relays all media via a TURN server that is visible to all parties in a session • ICE - Interactive Connectivity Establishment - Decide the best solution connect (direct, STUN or TURN) Core protocols
  10. Alliance for Open Media “An open-source project that will develop

    next- generation media formats, codecs and technologies in the public interest. The Alliance’s founding members are Amazon, Cisco, Google, Intel Corporation, Microsoft, Mozilla and Netflix.”
  11. Progressive Web Apps • Responsive: to fit any form factor

    • Connectivity independent: Progressively-enhanced with Service Workers to let them work offline • App-like-interactions: Adopt a Shell + Content application model to create appy navigations & interactions • Fresh: Transparently always up-to-date thanks to the Service Worker update process • Safe: Served via TLS (a Service Worker requirement) to prevent snooping • Discoverable: Are identifiable as “applications” thanks to W3C Manifests and Service Worker registration scope allowing search engines to find them • Re-engageable: Can access the re-engagement UIs of the OS; e.g. Push Notifications • Installable: to the home screen through browser-provided prompts, allowing users to “keep” apps they find most useful without the hassle of an app store • Linkable: meaning they’re zero-friction, zero-install, and easy to share. The social power of URLs matters.
  12. • Abstract HTML Markup and Styling away from the developer

    for building UI’s so that you can render native components using JS as the runtime. • A Platform that run’s everywhere. • Optimized to run natively on the platform where the user is. • If you are Facebook, you now have an app platform without app stores. Facebook React as a Trojan Horse Paul Kinlan, Google