074 Progressive Web Apps (A Gentle Intro for CFers who are scared of PWAs) with Ray Camden

Raymond Camden talks about “Progressive Web Apps (A Gentle Intro for CFers who are scared of PWAs)” in this episode of ColdFusion Alive podcast with host Michaela Light. By our nature web developers are prone to anxiety. Show notes What is a Progressive Web App (PWA) from a high level The next level from Web 2.0 “Progressive Web Apps are user experiences that have the reach of the web, and are: Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience.” What is a PWA in more detail? A Progressive Web App is: Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet. Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next. Connectivity independent - Enhanced with service workers to work offline or on low-quality networks. App-like - Feels like an app, because the app shell model separates the application functionality from application content . Fresh - Always up-to-date thanks to the service worker update process. Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with. Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it. Re-engageable - Makes re-engagement easy through features like push notifications. Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store. Linkable - Easily share the application via URL, does not require complex installation. (from https://developers.google.com/web/progressive-web-apps/ ) Why care? Better UX, more engagement, more ad revenue or sales How compare to a native app Easier to build Very easy to install (just go to the website link!) Cross device on release Not for complex Progressive - grac Background sync Push notifications How different from Responsive web apps? Progressive apps are responsive with other features too Famous Examples Uber - runs great even on 2G networks tech details https://eng.uber.com/m-uber/ Pinterest - user engagement time up 40%, ad revenue up 44% Tech details https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154 Tinder - 90% reduction in download size Tech details  https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0 Forbes - content load time down from 6.5 to 2.5 seconds, 40% increase in user engagement Tech details https://digiday.com/media/new-mobile-site-forbes-boosted-impressions-per-session-10-percent/ What is the preferred way of building a PWA? Uses Mobile chrome features Frameworks Bootstrap for the responsive part Offline libraries for connectivity independence What are you looking forward to at ITB? Mentioned in this episode https://developers.google.com/web/progressive-web-apps/ PWAstats.com Chrome User Experience report (CrUX) Brad Wood CommandBox episode Listen to the Audio Bio Raymond Camden Raymond Camden is a senior developer advocate for Auth0 Extend. His work focuses on Extend, serverless customization, and the web in general. He's a published author and presents at conferences and user groups on a variety of topics. Raymond can be reached at his blog (www.raymondcamden.com), @raymondcamden on Twitter, or via email at [email protected]. Interview Transcript: Michaela 0:01 Welcome back to the show today we're talking about progressive web apps, something that you might have been afraid of. But after this gentle introduction from Ray Camden, you are going to be all over them. And he's going to be speaking at into the box about this topic, and very excited to have him if you're not sure what a progressive web app is, will go into that. But it seems to be reliable, fast, engaging, connectivity, independent, responsive, all kinds of good things will go into the details of what it is what technologies you might use to make it appear in your web app. So and if you don't know, Ray is the sub in senior developer advocate for off zero, extend. And he works on extend and service customization and a web in general. And he talks at all kinds of conferences, as well as into the box. So welcome, Ray. Thank you. Raymond Camden 1:12 Thank you for having me. You're welcome. Always a delight. So what exactly is a web app, progressive web app progress, high level my level. So it is basically a set of expectations, certain functionality, I like to think of it, think of it like we used to think of web two point O web two point O was a big marketing term, like four or five years ago. And there were certain expectations about what a web two point O app was. It uses Ajax, and pretty much that was it. Read more   And to continue learning how to make your ColdFusion apps more modern and alive, I encourage you to download our free ColdFusion Alive Best Practices Checklist.Because… perhaps you are responsible for a mission-critical or revenue-generating CF application that you don’t trust 100%, where implementing new features is a painful ad-hoc process with slow turnaround even for simple requests.What if you have no contingency plan for a sudden developer departure or a server outage? Perhaps every time a new freelancer works on your site, something breaks. Or your application availability, security, and reliability are poor.And if you are depending on ColdFusion for your job, then you can’t afford to let your CF development methods die on the vine.You’re making a high-stakes bet that everything is going to be OK using the same old app creation ways in that one language — forever.All it would take is for your fellow CF developer to quit or for your CIO to decide to leave the (falsely) perceived sinking ship of CFML and you could lose everything—your project, your hard-won CF skills, and possibly even your job.Luckily, there are a number of simple, logical steps you can take now to protect yourself from these obvious risks.No Brainer ColdFusion Best Practices to Ensure You Thrive No Matter What Happens NextColdFusion Alive Best Practices ChecklistModern ColdFusion development best practices that reduce stress, inefficiency, project lifecycle costs while simultaneously increasing project velocity and innovation.√ Easily create a consistent server architecture across development, testing, and production√ A modern test environment to prevent bugs from spreading√ Automated continuous integration tools that work well with CF√ A portable development environment baked into your codebase… for free! Learn about these and many more strategies in our free ColdFusion Alive Best Practices Checklist.