From mobile app to web app

[Music] hi i'm john a developer relations engineer on the flutter team and joining me today is someone who also works on flutter miriam hi miriam hi john hi everyone i'm miriam a product manager for flutter so miriam you're actually the product manager for flutter on the web which is what we're going to talk about today yeah i'm so excited to be here and work with you john to get a flutter app running in a web browser and deploy as a progressive web app me too actually before we dive in miriam can you explain why we added web support to flutter sure as some of you may know flutter started as a ui framework for building beautiful ios and android mobile apps like the ones you see here but our vision is to provide a portable framework that helps developers build beautiful natively compiled applications for any platform and since the web already runs on any device targeting the web felt like a natural next step for flutter to achieve our goal enabling you to build high quality high performance experiences across multiple platforms so with today's release of flutter 2.0 we now have production quality support for the web on the stable channel which means you can build apps for ios android and the browser with the same code base that's super exciting so now i can run flutter apps natively on my phone and now in a browser yes and emphasis on apps while you can do a lot on the web flutter's initial stable release is best fit for building web applications not static content websites okay so maybe i should keep my landing page for my site in html if i want that to play nicely with search engines for example exactly we see flutter being a great fit for apps that can be installable progressive web apps a rich interactive single page app or even an existing flutter mobile app so john what web app should we build today i've been updating the dashcast app which is a podcast app so first let's walk through some of the features on the iphone so this page loads podcasts using http and json it also uses this custom font here using the google fonts package it as you can see uses material design components like ink splashes right here animations and if i go to a podcast say this one you can see i'm using the url launcher plugin to open links using plugins which operate on the host platform either android or ios that's pretty cool and i'm not just saying that because i like the name of it um it would be awesome if i could use that on my laptop i think having it run in the browser would actually let me use it on any device yeah that sounds great so what do i need to do so with the stable release the web is just another device target now for flutter so like you see iphone or android listed as devices in your ide you should also now see chrome or edge if you're on windows so all you have to do is run flutter create and that's going to generate the web directory then select chrome as the device and then hit run okay so let's see if we can do that so open my terminal here and i'll run flutter create and i'll pass it the current directory to recreate this project and once that's done i should see a web directory with an index.html file and i can see that right here so now i'll select the chrome device and hit run all right so running the app for the first time takes a while to load because flutter is launching the application using the dev compiler dart dev c to run in debug mode the first compilation takes the longest because it needs to compile the entire app cool so yeah on the web dart uses different compilers right yeah so for our mobile apps we have a git compiler and an aot compiler that converts your app into machine code or arm similarly on the web dart uses the dart.c and dart2js compilers which convert your app into javascript so having separate compilers for development and deployment will give you a fast dev cycle and also make sure your production app runs as fast as possible so since the flutter framework is written in dart the entire framework can be compiled into javascript right yeah just like you said the flutter framework is built using dart and so is your app that sits on top of the framework so all we had to do to add web support was replace the low level c plus rendering engine that's used by mobile apps and instead map to browser apis dom or webassembly to render your web app either using html or canvas kit so the only real difference between flutter mobile apps and web apps is that underlying engine that they use yeah our model for the web is not two separate frameworks that look the same and use the same language but actually a shared framework across platforms mobile web desktop etc so when we improve features on the flutter framework all platforms get the benefits okay so that that's why i don't have to change any my app's code the framework apis are the same so i've got the app running now are we done well there are a few things i like to consider when building a flutter web app so first especially when you're bringing an existing flutter app to the web you want to check if the plugins are supported for the web flutter plugins allow you to talk to native libraries for the platform you're running on so when you're running your flutter app on the web you can get access to existing javascript libraries through these plugins okay so i'm using url launcher so let's check if url launcher is supported i'll go to pub.dev and i'll just search for the packager plugin i'm interested in and i can see here this label at the bottom it's got the different platforms that are supported so it's got android ios and it is supported on the web but what do i do if my plugin isn't supported yet so you'll actually want to add web support for that plugin and you can find instructions for upgrading your plugin to include web support on our blog site great so since url launcher already has web support and i already have it in my pubspec for my mobile app i don't actually have to change anything that's right for most google plugins we do all the work behind the scenes such as wiring up to javascript libraries so the plugin works as you'd expect on both mobile and web right and sometimes a plugin will require some javascript to work if i open up index html you can see that i imported some javascript to make it work so i have all the plugins working for both mobile and on the web what's next so now i'd like to think about layout web apps can run on many different form factors and it's important for our app to adjust the ui accordingly so i need to think about layout for different screen sizes cool so the home page needs some work let's change the bottom section to use a two-column layout here for this i'm going to use a layout builder and i'm going to check the constraints so i'm going to go to this podcast column here and i'm going to change this podcast list to a layout builder so i'm going to type in layout builder and that takes a builder parameter which is a callback and that callback takes two parameters one of the parameters is the build context and interestingly we get the constraints here and the constraints are the incoming constraints that the layout system passes to this portion of the widget tree so i can actually check the constraints i've already kind of set up the two-column layout with my podcast list so what i'm going to do is i'm going to just add this back in return this podcast list and i'm going to use the constraints to set this two column parameter here so i'm gonna set it to a two column layout if the constraints max width is greater than 700. so i'm going to reformat and now that i've made that change how do i restart the app and see the change great question so you can trigger a hot restart for web apps which basically means that you don't have to restart your app and wait for it to recompile everything and load again it's just a fast way for you to see changes so if you make a small change the dev compiler is smart and only recompiles the javascript that was affected and then pushes only the deltas to the browser so this works similarly to the hot reload feature for mobile development the only difference is that hot reload remembers your state and hot restart does not cool so if i restart my app here and open up the browser i can see that the changes show right away and i can resize the window here manually or i can open up the chrome dev tools and click on this toggle device toolbar button and what that allows me to do is demo this app on different device types in this case it's a pixel 2. wow that looks so much better on every screen by the way there is more info on building responsive ui on flutter.docs so john the next thing to think about is navigation sure i've actually set up deep linking in my app using navigator2 so on the web if i navigate to a specific page the url in the url bar updates i can also navigate to specific pages by updating the path in the url or if i were to click on a link it would update the page this would also work if i were using named routes but i'm using navigator2 here and if i click the back button it takes me back to the previous page that i visited so i changed the podcast from one to two here if i click the back button it's going to take me back to the first podcast and if i click the back button again it takes me back to the home screen and if i were to click on a podcast like this click the back button in the app and then click the back button in the browser it takes me back to the previous page i visited so this looks better already what other things can i do to make my app feel right in a browser well since our app can run on the desktop browsers as well as mobile browsers we should also consider adding scroll bars and mouse or keyboard interactions for the desktop sure let's uh let's add a scroll bar to our list view in this page for example so if i go to the the widget for that page the episode list and i wrap this list view in a scroll bar so by typing wrap with widget scroll bar and hot restart the app i should be able to see this page reload and now i get this nice desktop style scroll bar on the right hand side and you can also see that my cursor changes from a normal pointer to this clickable pointer this click pointer and that's a piece of the framework that uses the mouse cursor widget so if you want to do this yourself you can use the mouse region widget and provide the mouse cursor that you want to display when you hover over that widget so to add keyboard shortcuts i also used the shortcuts widget here so i can actually play and pause this podcast using the spacebar all right that's looking good so finally you'll need to think about what rendering mode will be best for your app unlike flutter mobile apps that just use skia to render there's actually two renderers for web there's one html which uses dom canvas apis and another one canvaskit which uses webassembly and webgl to render skia paint commands so how do i know which one of those two renderers i should use well by default the render mode is set to auto so this means that your app runs with the html render on mobile browsers and canvas kit on desktop browsers this is our recommended combination to optimize for the characteristics of each platform that's really cool so what if i set the renderer mode to either html or canvas kit how do i know what the difference is between those two so html allows you to optimize for download size and uses less bandwidth that's why we think it's better for mobile browsers on the other hand canvas kit is faster so if you have larger screens with a higher number of widgets showing per frame that's what it's better for gotcha so i i think it makes sense to use auto in this case since i'm rendering quite a few widgets on desktop screens and on mobile browsers if i were to load this in ios safari i would want to load fast i would want it to load fast so um if i'm debugging how do i know which one of these is running so if you inspect the body tag in chrome and spec source code you'll see a class flt-renderer that's going to either show you canvas kit or html and then let you know if it was set automatically or not it looks like something is wrong with my app here one of the dates is not showing up it's showing null can i set breakpoints while my app is running in the browser yeah you can we connect to chrome's javascript debugger which allows you to set breakpoints evaluate expressions and also use chromedev tools cool so let's set a breakpoint after we load this json so i'm going to make sure i'm running in debug mode here and i can see i've got my debugger open and i'm gonna set a breakpoint after i load the details for this podcast and i'm gonna reload this page by just navigating back and opening it again and you can see that once i'm stopped at a break point i can do all the normal things like evaluate expressions for example i can just type response.body and see the response body so it looks like i'm parsing the json correctly if i scroll through this i just want to check that the episode url here publish date here is the value i would expect and i can see that it's null so i can see the value is coming from the server as null but let's verify that by opening up the chrome dev tools so if i go back to my app here continue and pop open the chrome dev tools i can see network requests here just like any other web app so if i navigate back to this page i'm still stopped at this break point but i can see the network request here and i can also verify that the value is null if i wanted to so let's work around this issue for now by fixing this widget so it doesn't display the word null i can open up the inspector here disable this breakpoint and enter select widget mode and i'm just going to select this widget and once i've got that selected i can navigate directly to that widget by double clicking on it in the flutter inspector and i can see that i'm just putting the raw value of tostring into the text widget so if time ago date is null it's going to put the string null into that widget so i can just fix this quickly by doing a quick null check so if the episode time ago date equals null i'm just going to give it a null widget here otherwise i'll give it the text widget that i was giving it before and i can perform a hot restart and go back to my app and you can see that the null widget is gone now fun fact just like flutter dev tools the inspector is also built using flutter all right i think the app feels ready to me let's ship it let's ship it so in addition to the flutter build ios and flutter build android commands there's now a flutter build web command so if i go to my terminal and i run this command flutter build web that's going to do a release build of my app and it's going to put the output assets in this build slash web directory and i've already run a build here so i've already got the build web directory filled out with my index.html and my dart.js file yeah and john when you use that build command you can choose which renderer to use just like you did earlier with the run command but since you didn't specify one it's just going to use the auto option cool that makes sense so uh it looks like it's done now now that the release bundle is is ready to go what are my options to host this app well there's a lot of options um there is uh firebase hosting google cloud github pages or other similar hosting services okay so i'm familiar with firebase so let's go with that i've actually already installed the firebase cli so i'll just run from my project directory firebase init hosting and that's going to ask me a few questions here so it's going to ask me what to use as my public directory and we'll use build slash webs and that's where the output assets go and i'm going to configure it as a single page app since flutter apps are single page and i'm not going to overwrite the html file and once that's done it writes a firebase configuration file and i can run firebase deploy only hosting for my current project which will upload the assets and it should just take a second here and once that's done i can actually click on this link to load the final version of the app running in release mode wow that was really fast it looks just like we expected yeah it does so now that it's hosted how do i turn it into a pwa i want my users to be able to install it when they visit the page so it's already a pwa if you look at that icon in the url bar it's a plus icon if you click on it you'll get an option to install it as a progressive web app so when you build your flutter web apps we create a web manifest file for you so that by default your app can use pwa features like installation offline support or notifications great and now that it's installed i can access it without opening my browser so are we done yeah yeah we're done let's recap all the steps we took sure so we started with our mobile app we ran it in the browser and we changed some things to keep the web platform in mind so we looked at plugin support for our app we tweaked some things for responsive design for desktop screens we looked at navigation and how that works on the browser and we looked at desktop idioms like scroll bars mouse cursors and keyboard shortcuts and we also looked at the different web renderers like auto and canvas kit and html yep and we also used hot restart to iterate quickly and debug the code using breakpoints evaluation expression inspector and chrome dev tools then we deployed it using firebase and installed it as a pwa yeah and it's all available now in the stable channel so thanks again for joining me today miriam yeah thank you for having me i had so much fun and i encourage everyone to try building their own flutter web apps on the stable channel now thank you all for watching and check out flutter.dev web to learn more you

Channel: Flutter

Views: 211,357

Keywords: mobile app to web app, mobile app migration, Flutter app migration, mobile app to PWA, how to deploy web app, Flutter, Flutter Engage, #FlutterEngage, Flutter events, Flutter conference, Flutter developers, Flutter developers news, Flutter news, Flutter updates, mobile app developers, web app developers, web developers, app development, flutter designers, Flutter live, Google Flutter, Dart, type: Conference Talk (Full production);, pr_pr: Flutter, purpose: Educate

Id: HAstl_NkXl0

Length: 21min 25sec (1285 seconds)

Published: Wed Mar 03 2021