Flutter Web Meetup feat. Google, hosted by Codemate

hello everyone and welcome to flutter web meetup i'm jan assalami and joined here at codemade office by tom gilder hello so as you guys know flutter it's the most fastest growing mobile application development technology out there it's made by google and we are lucky enough to have google representatives in this meetup later on so flutter it's used for creating beautiful mobile applications but now we have uh something exciting that google did last week um what's your take from flutter engage flusher engage was uh so exciting for us um we um were so excited about the announcements of flutter web going stable um and more about the the desktop platforms um for me the most exciting thing to come out of flutter engage was just this general buzz about flutter we i saw lots of people who you know kind of haven't been interested in flutter before on twitter tweeting you know i'm just trying this thing out um particularly things like um using it to make linux apps there was just this such this excitement around from it it just created such a good buzz it's so exciting definitely agreed and if you haven't already went to youtube to watch the flutter and gates uh post-production streams please do that there are a lot of good content there to get you started with flutter and the new capabilities in web and desktop but today we are going to dive much deeper into the web application capabilities of flutter and we are here at codemade helsinki office um today we had like a massive blizzard so that would be like enough to have an online event despite of having coveted 19 and everything but we're here at warm and comfy about codemates just a few words we are a design and development agency a creative tech agency and we do all kinds of things in digital development be it web applications or cloud systems or mobile apps and flutter is just one thing but it's one thing that is growing massively inside our company and we actually started um exploring flutter already back in 2018. now it was one of our employees ira who introduced it to us and convinced one of our customers to use it while it was still in beta phase and that application was really successful and made it to google i o in 2018 and our journey with fodder started back then and since then we have been developing multiple large-scale applications for mobile and now we're all doing some groundbreaking stuff again can you talk a little bit what we're going to go through today uh yes absolutely so um a bit later on um we will um i'll be talking about our experience of bringing monmoy to the web so you might have seen in some of the google blog posts about flutter 2.0 some screenshots of an app called monmoy that's what we uh make and we've had a flutter mobile app for that for the last two years uh but we've recently made a web version of it so i'll be going uh i'll be going deep into our experience of developing that and how was it and yeah looking forward to talking about that a bit later awesome so you're going to talk about the developer experience while doing the web application based on existing mobile app then we have galle the cto of mo mobile operator telling about his experiences as the development director and how it actually went but before that we are insanely lucky to have tim smith from google join us he is the director of flutter and dart teams hello tim good morning hi guys how are you doing it's lovely to see you gosh it does look snowy there where you are [Laughter] yes yes thank you for joining and it's very early hours there isn't it it's not too bad it's eight o'clock but uh yes i yeah got up early this morning for you all right we appreciate it and we have mariamaznani the product manager for flutterweb at google hello good morning maryam hi how are you doing oh thanks how are you pretty good doing well yeah and congratulations on a very successful flutter engaged conference how do you feel now a week after the conference i think yeah probably a bit of relief uh it's over it's been a pretty intensive uh season for us to kind of uh get ready and prepare for it all but yeah it's lovely to see um what people are starting to say about it and build with it and uh i was just looking at some of the uh the numbers in terms of uh um usage and uh of growth and the uh um the website views kind of like when whoo uh up in a sort of hockey stick uh last week and uh this week the tools usage numbers are similarly going up so it's it's it's fun that's what we live for like every you know every startup we you know we're not so different at google you know for us growth is the thing we're looking for so it's been fun to see um this land well i was joking with the web team that our work just started because we're about to get so many people using us yeah the expectations are definitely getting higher now that it's in the real stable channel yeah yeah for sure sure so so uh so yeah i thank you very much again for inviting us very happy to uh chat with spoke um obviously um you know in terms of our our news um uh you know i think a lot of people have watched the flutter engage event so um you know from our point of view our goal is is uh probably less to kind of just do a replay of that news but to maybe um cover some of the same ground but with a little extra um color commentary as they say in sports uh games to kind of give folk a little bit uh more of the uh of the of the background there um maybe before we do though um marion why don't you just talk a little bit about your you know you so you've come to to google you've been working on this tell us a little bit about yourself yeah um so i joined google about a year no two almost well yeah a year ago a year ago in 2019 october um and it's been a whirlwind when i joined flutter webb was just uh in preview and we were thinking of getting to beta um so it was just like three months while i was there we got it to beta and then since then it's just been meeting with customers who are willing to adopt us early and learn from them and uh just pushing all the way through to stable which we just launched last week so it's definitely been a crazy ride um my previous background has been more on like the consumer side i was at microsoft i was working on office and so uh it was really exciting to come back to my roots i did study computer science so it's really nice to come back and work with developers and build products for them so it's it's been fun yeah that's great well i guess we'll um this is all kind of very weird you know doing these kind of uh meetups in a time of covid is is extra challenging because even the presenters are you know 20 miles away from each other so it's tough for us to kind of uh um you know kind of uh collaborate in this kind of normal way so um i guess we'll probably uh show our slides maybe and we'll kind of talk through a few um different bits our rocks are the plan for the next sort of 20 30 minutes just for focus um we'll we'll say we'll cover a few of the kind of announcements from flutter engage and talk a little bit about sort of maybe some of the stories behind them as we as we think of them um and then mariam is going to show a demo of of flutter for us as web support if we can get everything up and running um and then i think our hope is to take some general q a and uh you know have anybody watching and i'm sure tom and others uh uh quiz us on uh different aspects of uh of uh what we've what we've talked about uh maybe just to kind of start i mean i think for us you know the the sort of the goal behind flutter we've been we've been working on flutter for a few um years now and uh i joined the team about three years ago um they'd already been up and running for a year or two instead of very early sort of stealth kind of um development i say stealth everything's been in the open source since day one um but the promise of of uh flutter was was really um stemmed from some of the challenges that the chrome team had as we think about trying to build uh apps and as we're trying to build great experiences and chrome was was really just starting to think about what could we do to continue to push the um the boundaries um and so you know google we have famously these 20 projects uh and so for for chrome one of the sort of things that they kick-started was this this little project to say what if we threw away every aspect of um compatibility with the web but we didn't have to worry about you know the the the document-centric model that sort of you know is 30 years old at this point what if we didn't have to worry about you know any other sort of constraints that are imposed um what would that look like and so um a few folk eric seidel adam bath uh ian hickson um went off and started sort of exploring with this thing that was originally codenamed sky originally used javascript still and originally looked quite like html and it gradually evolved and evolved away and became this thing which of course we now know as as flutter switching along the way to dart which gave them the ability to compile to native code and of course we launched flutter one back in oh gosh i'm going to say 2080 2017 um 2018 i think it was um and the goal of flutter fundamentally the goal of flutter is to take away some of the limitations that app developers today face specifically that you're often starting your app development with the wrong question today often the question you start is well which which of these devices am i building for am i building a mobile app or a tablet app or a desktop app am i building for ios or android am i building for a tablet or a mobile form factor and and for flutter we really want to turn that question on its head and start youth by thinking about what do you want to build what is the idea what is the concept what is the design what is the thing you want to create and to put that that question about well where does that want to run to defer that right till the to the end of of the development process and so you know i think people are starting to see that vision really come into fruition uh with flutter too where we now have support for all these different device types where we now make it easy to build for android or for ios for windows for mac for linux and for the web um and that's that's very much our sort of starting point is how can we get you as a developer get your idea into the market as fast as possible to the maximum number of people and so um you know web is is an area we'll talk about it a little bit but that's sort of very much the next sort of vanguard for that um dream and ironically it brings us full circle to that uh that starting point of uh such a burst out of the uh chrome team and so it was great to have folk like dion elmer who's uh one of the leads on the chrome project um uh be be part of the flutter two launch of the engage thing um anything else you want to say miriam and we'll kind of move forward from here yeah i mean you said we came full circle to chrome and i feel like we still work a lot with chrome i mean to be able to do things like pwa and influence uh bridging that gap between native and web um using flutter i think we are starting to build a lot of the partnerships again in chrome so that we're closely working with those teams yeah yeah that's very true yeah so um from a from a standing point if you don't know flutter if you haven't had a chance to kind of uh get to hands-on with it we really think about it in these these five pillars and this is kind of like our sort of way of reminding ourselves of our core principles what we want people to feel when and experience when they use use flutter um and so i love these visuals by the way the these graphics we had done um by a company called hopper who are a design agency we worked with for flutter and we'll see here dash um our mascot and uh dash she's she's a hummingbird um that uh has sort of uh become like our our thing and you know those of you um who saw um the little mascots uh on uh on the desk earlier on that's that's that's our mascot so um yeah that's what you'll see but but our five principles here um fast of course you know we our goal is that flutter is fast there's no point in building a framework that's that you have to compromise on performance for and so flatter uses darts to do its compilation uh it compiles to native machine code on android ios and desktop and compiles to a very optimized uh minified javascript when you're running uh in production mode on on the web uh secondly it's our goal is for it for us to be productive and so we've done a lot of work around uh making it uh hopefully an easy language to write to make it uh easy to see everything uh that's going on and in particular we have this uh feature that really again comes from the web that we call stateful hot reload and the idea of staple hot reload is that you can continue editing your code whilst it's running um and hit this sort of hot reload button instead of going all the way back to the beginning of the app as is often the case in mobile development where you have to recompile and redeploy and go back to the screen you're on with flutter we're able to just patch the app as it runs in development mode with any changes that occur and that gives you this productivity that you can continue to tweak and then edit and iterate on your app even whilst it's running and so some of the best flutter demos i've seen have started with an empty project and uh you know people continue to iterate on it and by the end of it they've got a full app and they never once recompiled the app from scratch and that's kind of something that is really cool we have that on um desktop we have it on mobile um we have a slightly different uh iteration on the web but that's sort of part of the core uh proposition thirdly uh flutter is beautiful we paint every pixel ourselves we're designed around giving you the ability to create the the visuals that you want to be able to style your app to imbue your brand rather than some operating system stock brand and so you know just like games developers uh use tools like unity to build and paint every pixel we want to give you that same experience for app development with with flutter lastly it's open oh sorry fourth it's open it's open source um it's licensed using the bsd license so every line of flutter code you can inspect yourself when you're building a button and you don't know what the button does you can look at the source code it's there it's just right in in the uh framework and you can debug as you're writing through all those different levels and then lastly flood is portable um it runs as i said on all these different platforms and so that's been our theme for the flutter two launches the portability and flexibility of flutters ago in those different places so um yeah uh the the the the flutter engage was our big event last week if you didn't see it we have a cool sort of seven minute recap um that covers um some of the things that we talked about but to kind of just call out some of those uh big announcements again flutter twos a free upgrade for your app um a lot of web supports that marion will talk a lot more about in a minute um we launched a new version of darts dart is our language that powers flutter that enables this productivity and uh speed um and we now have what we call sounds null safety in darts meaning that uh you can guarantee both at development and runtime uh that your code is uh null safe that it doesn't contain a null reference when you're not expecting one so you can create nullable variables or you can create non-nullable variables and you have the control over that so null reference exceptions or unexpected null reference exceptions should be um a thing mostly of the past at this point um then we had a bunch of different announcements and partnerships we uh worked with uh irobots uh who are building um an educational experience using flutter we talked about toyota who are building next generation infotainment systems for their um cars using flutter we talked about canonical who are the people behind ubuntu and they're switching to flutter as their default choice for new applications microsoft uh becoming contributors to the flutter code base in particular the surface team have contributed foldable support and the windows team have historically contributed and continuing to contribute um windows um runner support and then we have a bunch of plugins like um google mobile ads for monetizing your app firebase has done a whole bunch of work with upgraded firebase uh plugins uh and so on uh and so um yeah that sort of all comes together we've got great demos as well and um you know maybe we'll show a couple of them in a minute but uh one of the big ones is uh flutterfolio um we had a great team from a company uh gskinner.com they're a well-renowned um agency based in edmonton uh in canada um and they built this as a little showcase of um everything that uh flutter's uh able to do and one of the nice things about this is a demo is it showcases flutter on all these different screens desktop and tablet and mobile and uh um it really just showcases um the kinds of experience you can uh you can build with with flutter um i i guess to add to that uh the the app was actually also built in a way that it would show how to leverage each of the platforms and so mobile is really meant for when you're taking the pictures for this sport folio or scrapbook and then web is so that you can share it out and desktop is really where you can do the powering of those editing and um creation tools so it's kind of a good example of how we see this multi-platform story building out yeah that's totally true so um yeah i mean just kind of then to hit just a couple other points and then we'll go straight to the demo so um uh google are uh using flutter heavily ourselves so if you're kind of wondering well okay that's all very well but where's where's the sort of evidence that this thing's going to be around for a while um this slide ought to uh give you a good sense of that um here we've got apps representing literally tens of billions of dollars of google business that we put through um flutter from things like google ads um and admob um uh to g pay uh our new um uh phone and device payment uh system to things like google one our services offering to stadia our games consoles to shopping and analytics and you know you get the idea there's there's a lot of google teams um writing uh uh and shipping uh flutter apps here and these are only the ones that they're public at this point um we figure there's um over a thousand google developers today writing dalton flutter code um and that covers a lot of a lot of ground and should give you a lot of optimism about the future of flutter and you know our promise internally is the same as our promise externally that if we can um give a google developer you know a 50 productivity boost um then you know a thousand developers with a 50 um developer productivity boost that's a lot of money a lot of productivity um agility for for google and so that's uh that's very much uh our ethos um so uh i've talked a fair bit i think um we should flip over and switch to uh talk a little bit more about uh the web so so marion why don't you tell us a little bit about um what this announcement means what is a stable is it somewhere you house your your animals or is it something else i hope not um i don't have that many animals to house uh well um so as tim said in engage we announced flutter two which is an upgrade to our version and it's a free upgrade so all you have to do is just switch over to that version um and so the way we've built out our infrastructure is we have different channels and for a while uh web started as a technical preview and it was only for those that were willing to really experiment with it and it was in our lower channels that were meant for developers that are just testing things out and seeing our new features come in um and so that's like the dev channel and below and then we have a beta channel is and that's where uh flutter two or that's where uh web uh went into uh back in december of 2019 and that's where we felt like we were ready for early adopters to really try it out we knew we still had some kinks we still had a lot of work to do behind the scenes to really make sure we didn't have regressions build build in some test infrastructure really get our performance out there to match kind of that fast that we're looking for with flutter and then we worked for about a year or so and just launched to the stable channel and that's where most of our customers are building their apps with flutter mobile and so getting to the stable channel is really for us to get more input get more feedback from you as you're building your flutter mobile apps you can bring them over to the web tell us what we're still uh working on through and we with flutter two and getting it to stable we worked on a lot of different features um but the main set of features we focused on oh where's my mouse um is around performance and so when we first started with the preview we really started with that html and dom back end um really focused on using what the web already has in terms of dom and canvas apis to build something that allows you to paint the pixels on a browser um and so with the performance piece we knew there was there's only some there's only a certain point that the web could get us to with that fast development and that fast rendering um of pixels and so we started experimenting with canvas kit which is basically built off of webassembly and webgl that helps you paint skia commands and why that's important is we use skia for our flutter mobile apps today and so to be able to use canvas kit to paint those same skia commands onto the browser would help us with the consistency through mobile apps and desktop apps and web apps on flutter and so really making that cohesive multi-platform story um and so in that sense we started experimenting with canvas kit we're working closely with the canvas kit team which sits in chrome um and so really working through those features working with web assembly webgl um and those things are still building out so we were learning as they were learning and it was a great collaboration and so now we have two renderers we have an html renderer and a canvas kit renderer and we know that they both are great for certain things canvas kit is great for those high graphic interactive api or apps that you're building so if you've seen things like live where they're building and creating 2d animations that is built with flutter web and they use canvas kit um but then there's also apps that we want to be able to quickly install and you want to be able to just get in the hands of your users um and so html that html renderer is a smaller bandwidth and a smaller size and so we can quickly load up your app and get it to you get it to your customers on mobile browsers so that's where we've been thinking for performance and then we also thought about well we're on the web and for a while we've been building with mobile and so how do we shift those idioms that we have those widgets that we've created to really fit with web and so for a web we have to think about things like hyperlinks that's not something that you think about in mobile and so we created a link widget um and that that builds off of something that was already existing called the url url launcher plug-in um and so plug-ins are ways of basically allowing you to talk to native apis whether you're on mobile or on web and so we built a link widget we also worked on pwas and building in those manifests so that you can get a pwa by default when you do create a web app um and so specific web uh features that only come from the web platform and then and then we thought about well we're gonna be more than just mobile and the small screen we're gonna be on desktop browsers so how do we fit on bigger screens um and so things like thinking about people using keyboard and actual mouses instead of just your finger um and so really having those keyboard shortcuts in place being able to use your scroll wheel uh thinking about how you would probably want to see a scroll bar now and be able to interact with it so we built we've expanded our scroll bar widgets to be able to do things that are interactive with it on desktop browsers um and desktop uh form factors because we also have desktop apps um and then i'm trying to think what else we've done i mean we've uh done desktop densities like there's a lot that goes into just thinking about making something that was built for mobile and bringing it to a bigger screen a larger set of widgets that can be shown to a a user and so we have to think about the density of uh these desktops and making sure that they're big enough for or small enough for a mouse but big enough for a touch so yeah we've we've done a lot there is a blog post that i've written that goes into it a lot more in detail um and like since that i could go into it a lot more but i'd rather kind of show you um if you haven't seen how easily you can actually build a web app um and so that kind of brings me to what we're really good for uh i keep saying web app because right now that is what we're good for we're not great for like websites that are blogs uh that are really heavy and like text scrolling content um that's something we still need to work on but we are really good for those high interactive uis um that you are either be building for like creation tools or building like invoice managers and things like that or building something like mobley's app um and so we um we basically are focused on what we call progressive web apps and single page applications um things that are really meant for not really indexability but meant more for somebody that logs into this experience and it's personalized for them and they're interacting with a lot of different moving pieces and dynamic content um and so another great way of thinking about that is if you have a flutter mobile app today you can just bring that over to the web and now i'm gonna show you if i can pull it up and share the right screen uh so give me a few seconds um that what you're saying is really that we're sort of it's this deck of dance right as we sort of try not to subvert the web our goal is to build on the web platform um and to leverage everything that the wave has to provide um but sometimes to be able to go deeper into the system so that we're able to um get uh the full performance of the web platform and that's what things like the canvas kits render it does of course we're we're bypassing the document object model the dom um to get a more graphics orientated texture that we can just paint to so that's kind of this um this balance but our goal is not to kind of um is to make it feel as as like any other web app you know to integrate with the paradigms of the web like auto fill and um you know scrolling and things like that whilst uh giving you all the benefits of those kind of things so aaron's gonna show a quick demo um just hitting a couple of the points just just practically just showing you hopefully if we can get the screen projected um uh how how sort of when you're building a flutter web what app what's actually being created uh under the covers and so hopefully we'll get the chance to to show you that and then we'll um we'll do some uh some q a hopefully as well okay so i'm not going to be looking at the camera because it's on my external monitor um but uh so we built this app uh one of our one of our team members built this app called the dash cast which is kind of a podcast app um and we actually used this in one of our breakout sessions for flutter engage that we focused on the web so i'm going to show you something really quick here but if you want to go into more detail of like what exactly we did to tweak kind of the layout and navigation and other aspects of this mobile app to bring it to the web uh be sure to check it out on youtube it's called from mobile app to webapp under the flutter channel um and so right now this is kind of what we started with we um let's see if i can we have just like this home screen that had a row of um podcasts and a column of podcasts and then if you click into one you're able to see a list of them and then if you click into a specific episode you can see that you can play the podcast and so that was built as a mobile app and so i'm on the stable channel and an easy way to show you is if you just run flutter doctor um it will hopefully run i'm always just afraid coming from microsoft that i'm going to get the blue screen of demo death um but as you can see i'm on the stable channel i'm on 2.0 um which is what we just released and so with that whenever you create an app now uh usually i'm sorry if this is so small hold on i'm gonna see if i can zoom in yeah it is quite small so let's uh but what you've run is flatter doctor and it's showing you basically anything you need to to make your um any tools you're missing or anything like that to make your tools work [Music] all right how do i zoom come on uh demo mode on on android on intellij idea and but i forget i think is there a view menu i am uh yes let me see i think there's a mode that sort of makes it a bit bigger appears presentation mode it's called okay oh all right that's uh well that's that's yeah i mean yeah okay uh go away sorry guys you're just gonna see me um struggle a bit um these are the joys of uh yeah presenting in a pandemic yeah i wish okay um maybe if i all right i'm so sorry if you can't see but usually on making the screen smaller but [Music] let me at least describe kind of what i'm seeing and you just have to trust me and then go try it for yourself and hopefully you'll see it that way too um so on the on the left hand side is going to show you all the files that come in all the directories that come in with your app and so when you create it usually there's uh ios and android um that are already built in and now there's also a web directory and that's gonna have your index.html that we use to basically load your app to the browser and then there's also the manifest.json which is what we use to give you a default pwa and then there's going to be some of the javascript in this app we've used something called fluttersound which we imported ourselves as an api from the web because the plugin wasn't there and so we also are able to include some of that javascript native apis in there so this is before i've even run it as a web app right now it's still built as mobile and so a way to do it is you can do it from the command line or you can also go into the device options in intellij and there is or in any of your ides there should be the same um you're going to see chrome and the reason we've chosen chrome as the main is not just because for google but because we've also really built in a lot of the development productivity tools you'll need you can use chrome dev tools and we've integrated flutter into that and we have something called dart dev tools and it really integrates well with chrome and so that's why we recommend using chrome during development you can easily copy the url that the localhost url that you have in chrome into your other browsers just kind of see what they'll look like in safari and firefox but right now chrome is kind of our go-to target for development with web and so we're going to choose chrome and i'm going to run um and it will hopefully run but while it's running uh basically right now what it's doing is it's building all of those files it's using something called the dart dev c compiler we have two we have something that's meant for development called dart.c and then we have the dart2js compiler that is built specifically for deployment and so it just opened in another window for me um and so the reason it takes a while to load is just because it's downloading all of it but like tim was saying we have something called hot restart on the web which is similar to hot reload it's the only difference is hot reload is stateful so it keeps your state and hot restart currently does not but it does the same thing where i can make a quick change um to like the font color or something and then i can hit hot restart so um if i go into the home screen of the app i could change recommended label to say featured and then i can hit hot restart and i have to find my window again um and now you can see that now it says featured um and i did not it was faster than actually building the app for the first time it's just uh compiling um it's just pushing those deltas that we made to the browser without having to recompile the whole app um and so that's kind of that running on the web so if i inspect the source code i mentioned that we have html and canvas kit and so um if i the way we've kind of done it is when i just run this by default you're going to do something called an auto mode and what that's doing is it's using canvas kit on desktop browsers because we know that with the larger window larger screens there's more widgets and it's better performance to use canvas kit and then on mobile browsers we'll use html automatically and that's because it's a smaller uh download size and it's quickly a quick initial load of your app um and better for the bandwidth that's used by mobile phones um so if i inspect you'll see that here it says canvas kit auto selected and so that means i didn't explicitly select either of those renderers but i can run i can go to the terminal and i can do flutter run dash d chrome um and then choose the web renderer i always spell renderer wrong and i can choose it as html um and of course this is kind of gonna recompile um and probably reopen on my other window so i'll give it a few seconds but basically uh you won't see unless you have a lot of like high intensive graphics um and lots of scrolling widgets and lots of animation you probably won't really see the difference between html and canvas kit and that's our hope and um we're going to be continuously polishing now that we're out unstable and with your help and your feedback um we're hoping that we can polish it i think marion whilst it's doing that the the um i mean one thing that's sort of worth calling out right that this what you what you're seeing here is that with uh with the with the web view sure it's the same mobile experience but but with that comes you know some challenges there right you look at the code right and it's sort of it's not filling the screen there you don't get that for free right you still have to think about what makes a great web experience so it doesn't sort of like auto magically build you know something that is designed for the web um yeah but you have all the same things available to you like media query and things like that so you can actually sort of you know have run time sort of decisions about things like break points for landscape versus portrait mode and things like that so so don't worry too much you don't look at the visuals and think i don't want to build a web app like that that's not the goal here the goal is just to grab a random piece of code as an object lesson well uh i will actually show you what we ended up deploying from doing that workshop um in a few minutes in a few seconds so right now you can see how i've requested html explicitly and it doesn't look too different from um your canvas kit app and it doesn't have this is a pretty basic app so it doesn't have a lot of animations and crazy uh dynamics um to work with um so as tim was saying uh this doesn't look like a web app uh i mean it's not using the full screen uh it's not very uh responsive um and so what we actually did let me just get the url very quickly um is the cookie being made yes okay hold on i think it's called dash maybe it'll just come out dash cast oh i have it all right i'm gonna stop sharing my screen for just a second so i don't know anything while i look for this um so um whilst mariam's doing that you know a couple of things about sort of like what's going on under the covers here again um when you're in canvas kit mode um we are we are able to kind of get at the canvas uh api um and canvas kit is basically a web assembly based layer that sits on top of the uh the canvas mode um that lets you just just get at a very low level of the uh interface when you're in html mode of course we're using more of the the dom model and that's the sacrifice or the trade-off that marion was talking about but regardless if you've got things like um a screen reader or other accessibility devices um you know we build with those things in mind so you get all of the um benefits of that you don't uh get a different or you shouldn't get a different visual experience you shouldn't get a different web integration experience regardless because we're still plumbing into all the web platform uh textures and surfaces so i think i'm sharing my screen hopefully it says i am not right um oh there you go yeah uh so this is uh you can actually go to this this is this is what uh yeah i coded so fast in between that um but this is what we ended up building and so what we did is we used the layout builder and before um this is what it looked like uh and so you had that single column and so what we did is we used the layout builder set some constraints on what the size of the screen might be um and so now it's responsive and so it looks like my mobile app and then when i go back out it it basically reacts to what i'm doing um and so this is kind of what we did in our uh breakout session so you can go and like watch it see exactly what we did and how we did it um if i go in to this now you'll also see that it actually has urls that follow along the path that you're going in the previous one it also had that we have something that we're using and you can use named routes but we also have something called navigator2 which we are doing user research on to see how we can make the api a little bit more accessible to you um and so there is you notice the hash and that's one of our biggest questions is how can i get rid of it there actually is a way um it is i have the url open this time um it is in our docs and it is under configuring your navigation url strategy and so there is a way that you can go in there's also a plug-in that makes it a lot easier for you to do it um to be able to customize what your url looks like and that makes it more easy to share and deep linkable and etc um so tim you also mentioned during clutter engage and i don't know how much time we have so please time check me not much i don't think i think we're right okay oh okay well we could go into questions but you can also run this on a desktop while using your flutter uh while you're on the stable channel it's a snapshot of beta um of our beta release of desktop but uh you can easily enable a desktop flag set your platform to mac windows linux whichever one you're using and then you should be able to run the same app that was on mobile onto desktop and see it for yourself right right so um yeah very quick sort of glimpse you know even there you see the finished version is still you know there's still polish work we could do um you know around the beauty side this was very much a functional um demo but uh really cool to see um that fundamentally what you're doing is taking a a mobile app and just just making a way back out of it i love some of the tweets that i see from folk who say that they accidentally forgot to connect their mobile phone and uh typed flutter run and wound up with their app running on the desktop or running on the web because how they configured their machine and they didn't even realize they built a desktop mobile app and that's that's sort of to me epitomizes the promise of flutter what we're trying to sort of uh deliver today is uh you know an environment where that decision as i said up front that decision on how you build or where you built to is really almost a compile-time decision rather than uh you know the very first decision you make your app so with all that um hopefully that's a good sort of quick summary we've tried to kind of help to skelter through a ton of stuff there but hopefully it gives folk a general sense of um what we've built and uh i'll hand it back to you guys at codemate for uh q a thank you tim and mariam awesome awesome talk and uh now we have time for a few questions we have had quite a few actually from the audience we had a few also sent to us before this uh live stream and uh youtube chat is going pretty hot but uh the first question comes actually from tom well yes i'm going to use my privilege here to ask my own question um tim might as well um you um to us on the outside uh flutter you know started as a mobile framework and uh and then kind of web emerged later but you were saying that it started with the chrome team so i was wondering has flutter webb been part of the plan like all along all the way through the project or kind of go away and come back again i'm just intrigued yeah it's a very interesting question you know honestly i think um when we started we probably couldn't have built uh the flutter web i mean i think you know generally there was a sense of you know some frustration about some people about the sort of the limitations at the time of the web of the web platform um and it's only over the last few years we've seen things like canvas um come to the fore and you know also be pervasive in the browser ecosystem sufficiently people can target it and so so yeah i think um you know there are some there are some things where we would probably say the web has evolved to to match flutter and hopefully you know again we don't see this as these two things work very closely together um so hopefully flutter makes the web better and the web makes flutter better and it becomes this very symbiotic relationship that's good for everyone great all right um we have one question from the audience um more specific one this was actually asked by quite a few how to minimize initial download and loading time for flutter web apps okay i'll take a stab at this and tim if you want to add um so uh this is something we definitely are working on on our side as well uh code size is really important to us um and so we uh that is one of our top things that we're going to be looking towards as we move on from stable but specifically for your apps there is something called deferred loading um that is specific to flutter web and that um is something that we've been experimenting and using with and seeing the benefits of ourselves we have something called the flutter gallery demo and that loads so many assets and so many fonts into just one app and we ourselves saw how slow it was initially to load and so we were able to go in and use deferred loading to defer a lot of those font libraries and assets in the beginning that weren't needed for that initial load experience and we've seen drastic improvement changes and we are hoping to write a blog post soon so that we can explain how we kind of went about and did that so that you can also apply that to your own app um there's also things that you can do for specific widgets um instead of using just like a regular uh single um single uh what's it called list um but you can use lazy loading and lazy lists um and so that way to lazy-load specific contents of your widgets themselves in your app will also help your initial download and loading time of the web app uh tim anything you'd like to add no i think just very quickly this just speaks to the promise of um flutter is designed for pwas for single page apps more than like sort of pages which are very ephemeral that sort of come and go every sort of second or two so you know that sort of just again speaks to our where we're targeting great so um and actually we'll be talking about some of those a little bit later as well um so the other thing is uh that we've heard from a lot of people is about hot uh reload so flutter web supports hot restart but not hot reload yet and i guess there's some technical challenges around that is hot reload gonna come to flutter web um there is an issue in github so if you really wanted go thumbs up it um that is how we prioritize issues by the way i think we mentioned this in our q a and so we really look for what the community really needs and wants um and that's how we're going to be going with web as well but in terms of hot reload um we there are challenges there are technical challenges that come with building it with dart and using the browser i mean today the browser is pretty fast and productive i mean the web that is what it is and that was missing in mobile and so right now we think hot restart really still does uh the same kind of developer productivity that you would get on the web if you were building web apps um and so we would like to get to hot reload uh it is a lot of work and it is challenging but we are we are looking into it um we just don't have a great answer for when yet all right can i bring one one question up um i think it was a good question that might be uh quick to answer is there a page in the documentation where you can find all the father web related widgets uh no there is not um but it is it is a great ask i mean um there aren't too many widgets that are specific to uh the web i mean you can use the link widget even within your mobile app and your desktop app and so we kind of see this as a way for you to build using all the same widgets across the different multi-platforms so that you get that consistent experience but as we if we do develop specific widgets just to be used on the web uh we will we will add a page all right one more question i think this is not the easiest one but text selection might have been the most popular question out there um can you address the text selection on photo web yes um so we do have text selection it is within the widget itself right now and that's why we say that we're great for web apps and not really those blog sites and news sites where you want to drag a bunch of text content across the entire screen um it is something we're looking into it is an ask from internally as well and so uh i have a good blog post that explains how challenging this is uh if you want to hear and learn about the nitty-gritty of how hard it is to do text with canvas apis and and really get those measurements correctly so that your cursor lands in between the letters that you wanted to but we are working on this uh it is we know it's our top most pain point and this is what our attention is on um can i just ask one last uh thing that you know congratulations on going stable with webb um what's your next priorities what are the big priorities now you've hit stable what are your you know i guess it's things like performance and things like that what are you aiming for uh honestly polishing uh polishing what we've given to you really making it worthy of uh getting it getting it to you in production and we we did a pretty quick turnaround to get from beta to stable to get it into your hands and now we really want to polish the things that we've given to you like canvas kit and pwa there's things that we know are there that are kinks and we want to like work through them and make sure that you get the best experience um there's things like text and i think that's going to be our big focus as well being able to do the things that you hope to do on the web and that's where we want your feedback and your we want to see what you're building so feel free to at me on twitter and share what you're building so that i can i can see what what are the other use cases and what are the things you are looking for um because the way we got to stable is through feedback from customers and that's how we're going to continue is we're going to use the feedback you give us to be able to drive our product awesome so let's continue adding the questions thumping up the relevant issues in github and uh tim um what would be like the last sort of um suggestion for developers looking to um you know compile their father application into web yeah i mean i think just just generally you know this is as marion said this is like our first uh stable release right that sort of makes it available for everybody to experiment with i think if i looked at the last time i looked at statistics something like 80 of developers using flutter today are on the stable channel that's our preferred place for people to be right it's the place where all of our bugs you know have landed or fixes i should say um and uh we want people to have a good experience there so so opening this up really means that it's possible for people to start to experiment so you know i'd say start small um we're not aiming you to build um you know sort of static websites portfolio websites cvs sort of on on the web our goal is not to be um a replacement for the way of our goal is to supplement the web and to give you a new path for your app so um you know start you know if you've got a small demo app i would just start trying it out and seeing where the where the gaps are seeing um uh you know what this can do for you and uh as mariam said this is the beginning not the end right we're continuing to focus on on polish on expanding out feature sets and uh you know web didn't start with with html5 the web started with html 1.0 and we're on our we're on our way now this is the beginning and we're excited to see where the path leads fantastic and i have to say we're very glad as developers here to be back on the stable channel after having been sure yes yes all right great thanks a million yeah tim and mariam and we're gonna continue now to um the moyes and thomas park yep thank you for joining us great thanks for having us thanks for now see you all right next up um we're gonna have carl voisto the cto of mo my mobile mobile tell about his experiences from the r d you know management point of view in more mobile um father web project [Music] i'm karla worster cto of the more mobile my mobile is a mobile operator operating in finland and launched in 2016. oi has automated most of the processes are actually running about 300 processes uh so that we need all only six people in the whole company even the customer base will grow 10 times bigger or 100 times bigger we still manage that with six people i am responsible for development and and technical uh things inside operator i heard first a flutter from codemate when i discussed with them about developing our next next version of mobile applications first thoughts of flutter was that that finally someone is doing something reasonable for development purposes because moy is automating everything that is possible we have also of course self-service applications and websites and so on one problem was that it was getting slower and slower developing of of these we used react and i good technologies but still it was getting slower first project with flutter was our mobile applications changing them to flutter and it went really well and the result was was really good for example uh animations were really much easier and better looking with flutter so reason to renew one more web app also with flutter was that we can use same same code base for both mobile application and that makes everything faster my only fear and greatest fear was that there's going to be some kind of delay for this web version i trusted flood flutter web project because because i know that google is behind it i convinced myself that it's it's worth to call because we had a good experience with this mobile application side and of course we trusted our goal mate our partner fantastic so yes thank you so much to uh carla for giving his thoughts he's the cto of um um so it's uh time for us to talk about what we have made um so yeah um hello i am tom um i'm the lead developer on the monmoy application and i have been for the last two years as we have done the ios and android version um today we're going to give you a look at the app and how it was for us to bring it to the web and the challenges we faced in doing so um so we'll look at things like packages and responsive design and the positive and negative uh answer about recommendations later about flutter web so um first of all what is the monmoy app it is so um boy is a mobile operator here in finland and um the monmoy app allows their customers to track their usage and manage the accounts so moy's aim is to be totally self-service so customers don't have to get in contact with them to manage their accounts and so the app is really really critical to their core business and just to introduce uh my fantastic team um we have edermeyer our wonderful designer and you so and aero our developers so there are four of us as part of the core flutter team um yeah and they are brilliant they have done such a good job over the last um uh well over the last since the summer of developing the web web version and before that on the mobile version so yeah we started with flutter um two years ago with moy um on the ios and android version and uh yeah just to talk about development methodologies a bit uh you might have heard about uh test driven development and behavior driven development well yeah we we didn't use either of those we had quite a different approach which was ice hockey driven development you see hockey is kind of a big deal here in finland and moy was sponsoring the ice hockey world championships which were rapidly approaching then and they needed a new app in time for the championships uh it didn't seem very likely that we could ask for the championships to be moved to give us a bit more development time so you know that didn't really work so we started getting going with flutter and success it was 11 weeks from starting a brand new project to releasing live in the app store and yes finland won the hockey championships too so absolutely everyone was was happy um but i think it's fair to say that the first version of the app wasn't it wasn't exactly beautiful the tight deadline uh didn't allow us to create the kind of fantastic design that we'd want to do with flutter so we had to copy the old app design and then over the next few months we evolved it into a beautiful app that we're proud of and that is modern and takes advantage of flutters and that customers absolutely love so we're not going to talk today about really the mobile side of things that has been covered a lot and um yeah we're going to talk about the next challenge that came after shipping the mobile version so to the web yes so after the successful launch of the mobile app uh we then moved on to uh take a look at monmoy on the web and again the web version was kind of in need of a little bit of a facelift it was looking a little bit on the bland side so our fantastic designer eder meyer came up with designs for the web which built on the design of the mobile app and kind of used the same design language and then the only question there was okay how are we going to implement these designs like can we use flutter and yes we were aware last summer that flutter web kind of was a thing and um yeah we were a bit suspicious of it it wasn't beta you know it was to our view fairly early days with it uh we didn't know whether it would work um was it a platform too far for flutter um and yeah so we had a think about how we could decide as to whether or use it and you know we could have started having a load of committees and meetings and doing endless debates but that is by far the no sorry by far the best way to decide whether it's right for you is to just try it and that's what we did we just added web to our project and it's so so easy to do if you've got an existing flirta app just run flutter create and a dot and it will add web support now in the stable channel it will add web support to your existing app and you can just run it in chrome um i expected some maybe spend i don't know a week getting it running in chrome you know i expected there would be a bit of messing around with different packages and things but um much to my surprise we actually got the first version of it in less than a day so yeah it just it blew us away frankly i had absolutely no idea that i'd be able to get on the same day a version of it running so it's time to have a little bit of a look at what we've made so hopefully if i press this button here here is our lovely app running in chrome so this is the same code base as the mobile app um we'll talk you shortly uh i'll talk you through how we um brought the mobile app to the web but just to show you the app and what it does uh so here's the login screen if i hit login you'll see that we have uh some some lotty animations i'm not sure how well this is all come through on the web i can assure you this is running at uh 60 frames per second but maybe the encoding will make it not look like that um so here's the main page of usage information it looks like we've used quite a lot of data on our mobile plans this month um and here's the list of the sims from this account um we've got beautiful animations of going into the detailed usage views which are just beautiful and run so so smoothly and yeah you can go in and manage all your accounts the um various settings for the different accounts you can change your plan it's kind of you know the standard things that you have for a mobile phone operator view invoices customer service information and this is all a flutter app um but yeah let's talk about how we made this um if i head back to my slides there we go um so and sorry the one thing i need to say now is that i am incredibly happy to announce that as of now the uh monmoy flutter web project the site is live for all of moyes customers so they can all check it out i'll come back and talk about that a little bit later on though um so how has it been to develop for the web to take um the flutter mobile app and then bring it to the web spoiler pretty good um so as i mentioned we got the first version of it running in less than a day but to do so required a bit of kind of hacking around i had to comment out lots of the packages that we were using which didn't support flutter web so the first challenge was working out how to how to reproduce all the functionality that you see here with these packages that didn't work on the web but within a browser but luckily as you can see there were only four of them that didn't work which you know wasn't that many and we could um we could uh replace them all with with other functionalities so fluster secure storage was replaced by browser session storage from the you know from the native browser crashlytics doesn't have any support for the web um so we've had to use a custom error report for any exceptions native pdf view and webview flutter were the easiest because we're already in a web browser so you know you don't need to have your own custom web view right so um at that point we had verified that we could um replace all these packages that didn't work with other functionality so we could go forward with building the web version and we were really confident at that point that we could get all of the functionality that we had in the mobile app working on the web or at least we hope so so we um we went forward but the app still looked like a mobile app stretched out onto a big desktop screen which isn't ideal and we had all these beautiful designs from edema so how do we implement the designs for the web well we've got three options um here that we have used uh one is adaptive layouts that resize uh two is two completely different layouts and three is kind of this hybrid approach so let's go through each of these and kind of show you what these are the first option is by far the simplest it's just a layout which nicely resizes to adapt to the size of the screen like our login page here but sometimes you know this login screen it were it was very easy we just increased the padding at the size and tweak around with the sizes so it resizes really nicely but quite often that's really hard to do between a small mobile device and the desktop so um on a lot of uh our pages by far the best choice is just making two different layouts so um here is our customer service page and as you can see two pages like we we have just written it twice this obviously adds to the development time but we think it's worth it to give the best user experience just in in most of the app it it makes a beautiful beautiful design like this and then there's a third option which is uh here which is this hybrid approach of in some places we've been able to reuse pages from the mobile app but kind of embed them within a larger page so on the left here you can see a page from the mobile app a settings page and on the right is kind of the entire sim page on the web and if i just highlight this these two widgets are actually the same page it's just that the widgets are adapting to the different designs so here things like paddings change and borders disappear and actually the switches switch confusingly in the size the the side of the screen that they're on but the the base logic and the base page is completely the same it's just the individual widgets that change based on the screen size and how they adapt is actually is really simple um let's have a look at some code so we have an extension property on the media query object which gets us a device type so device type is a enum that we have made and we have just specified some break points as to where those those occur it gives us a device type based on the screen width and because the simplest options are so often the best uh we just made this really really simple method called is phone because we were needing to use this kind of in lots of different places and yeah it works frankly like it's a stupidly simple option but it does work so at the bottom here you can see an example of adjusting the padding based on whether it's a phone or not and it's super simple but it but it really works uh we also made this responsive builder widget so when we need to swap out the widgets uh for the uh different devices the phone um this will then look at the media query and then pick the correct builder to display these are really simple widgets that are so easy to write it's all just using that code at the top so moving on to kind of the day-to-day development experience we touched on some of these points earlier but one downsize with one downside with flutter is that when running in chrome the developer experience isn't quite as good as kind of we're used to on ios and android uh hot reload doesn't work but hot restart does um debugging sometimes just goes a bit flaky it it's not always a great experience um in general it's okay but these things you know it's just not that amazing experience you're used to with flutter but there is a fantastic work work around that we have used on a day-to-day basis develop as a mac app like it's simple it really really works this might seem a bit weird um we run as a mac application for development we currently don't have any plans to release monmoy as a mac app but on a day-to-day basis we just run it as a mac app to develop it everything works then as you would expect you've got a resizable window to test the responsive design so you can easily just resize it to the size of a mobile phone and back to the the full screen web uh hot reload and the debugger work as well as you would expect on ios and android and we have found using a mac um running as a mac flutter on desktop just incredibly stable we've been really surprised at how well it works so yeah we've been very impressed now obviously you still need to test on a real browser before pushing into production um like just i will talk about i'll talk about this a bit more in a moment but you need to test it you cannot guarantee that what you see in the mac app will be on the web in exactly the same format without issues there might be glitches it's really important to test it before going to production but running it as a mac app has given us an added benefit it's also let us make custom dev tools so we added uh to the mac menu bar of our app um a couple of options so we've added the ability to switch which back end is talking to just by picking a option from the menu bar and also change the font size like you would be able to in a browser which by default you wouldn't be able to see with a backup and these were quite simple to implement i i kind of did it in about half a day um it does require still uh it requires using a pre-release uh package uh which is on github by the flutter team um called menu bar uh but that's fine using the pre-release package for us at least because these are dev tools so they don't end up in production or at least they certainly shouldn't do if they do we've done something quite badly wrong uh so on to the hardest problem by far we face developing this uh which was an integration with a third-party payment system so users need the ability to change their credit card um in their account and this does this required us uh displaying an iframe to the user we wanted to overlay the iframe on top of the flutter app so the screenshot there you can see that the flutter app is sitting behind and then the iframe is on top but this was incredibly tricky to do this took us quite a while flutter web does have the equivalent of uh platform views are kind of embedding the html elements within the flutter app but we found them to be a little bit broken in some places and not always work properly so we ended up having to roll our own solution of directly manipulating the dom and adding html elements adding this iframe to the dom tree that sounds already complicated but luckily it's really easy to do given dance background as originally a javascript replacement there is a full dart html library this gives you full access to the dom and you can also um make custom bindings to third-party javascript libraries that you can then call directly from dart here's an example of one that we use so this is how we put the payment iframe on the screen um we have to call this and then do well there's quite a lot more code but this is the main method that shows the iframe uh however there's quite a big catch here if you put this code in your flutter app if you reference the dart html or dart js libraries the app will just fail to compile with a really confusing message it took me several hours to figure out what the message was trying to tell me um and to fix this the build and to use these you've got to do this slightly complicated dance with three different files so here are two of the three files um we have the top one for the web and the bottom one for well all other platforms in this case let's just say the top one's for the web and the bottom one is for ios and android in this example we're getting an auth token from the native platform whatever that is on the web we're getting it from the session storage so like a local cookie and on an app we're using the flutter secure storage package um and then you have to add a third file so this third file does kind of the magic that is needed to compile the app so this references the two different files but if it's um if the dart library js is defined then it exports the web version otherwise it exports the app version and then you reference this last file at the bottom in the rest of your app and then the app can call the get auth token method and we'll just get the right version for the platform but yeah this is this is quite complicated and and something we're not really used to doing with flutter where you know we're used to just writing things once and having it work on all the different platforms not worrying about build configs and that kind of thing so um yeah so um next let's uh run let's run through uh three key challenging areas of uh flutter web itself uh those being download size different rendering options we we touched on these earlier with mariam and navigator 2.0 that old chestnut so first download size yeah um for our app for an initial download it's a bit on the weighty side uh a bit bigger than we'd like 4.8 megs um yeah not you know there are websites which are bigger downloads than that but we'd prefer it to be less but and this is a super important point over half of that 4.8 megs is a shared file which can be shared with any other flutter website out there so that ends up in the browser cache it's loaded from a content delivery network and cached in the browser so once users visited one flutter website then they've got this and it's a much much smaller download for the um for then loading uh another one and as mariam said earlier uh it's something that they really care about i think the folk the flutter team are very focused on app size both on the web and ios and android there were some stats released last week about how they've reduced the app size for the mobile apps uh in the meantime our top tip is to make sure that your web server is configured uh to um compress everything so to gzip everything um hours wasn't by default and we saved over 20 of the download size just by checking and then slightly tweaking the configuration settings you can easily use chrome's dev tools to check this there's a lighthouse tab in the dev tools and you just click the performance tick box and hit generate report it will reload your page and download everything and then tell you what you can do to save on the download size it's really worth doing oh right so on to renderers we again touched on these earlier um it's really easy to think that this is kind of a boring internal flutter thing that we shouldn't really have to think about but it's super super important for flutter web there are two different options canvas kit dom canvas and they're very very different by default flutter automatically switches between them depending on the device so on mobile phones it uses uh if i just go to the next one yep on mobile phones it uses dom canvas and on desktop browsers it will use canvas kit so it will just switch based on the user agent of the device it's running on so dom canvas default on mobile devices uses html and css to render the app it's a smaller download size but then you have slower performance and you're more likely to have issues uh compared to running on ios android so as i said earlier that it's super important to run on a browser um and not just rely on it running on one platform and being being okay on the web uh particularly with dom canvas we have seen quite a few little rendering issues and and glitches compared to the other platforms canvas kit default on desktop devices it uses webgl instead of html and css but then is a bit of a bigger download size the download the 4.8 meg is using canvas kit that i was referring to earlier but you get a much much better performance out of it um really really good 60 fps it's it's really good and it matches the standard renderer so it uses skier the skier renderer and it matches the scare renderer on ios and android much much more closely so much less likely to have problems um and the tips here are with the um default options uh so there's there is this web renderer switch when you compile your app and it defaults to auto so switches between these two different renderers and um yeah if you have that make sure you test on both because you might have surprises some drawing operations aren't supported on one or the other so there are some packages that just blow up at run time particularly on on the html renderer but also some on canvas kit we had a package which just didn't work at runtime so your project might well benefit from only using one so for instance if the performance uh if the performance of your app is really really important you might benefit from just using the canvas kit renderer on every single platform so challenge number three is navigator 2.0 so this is an interesting subject um first of all let's go over why it's needed why they had to replace the uh the previous uh or not replace it but add to the old flutter navigator um the old flutter navigator served its purpose for mobile apps pretty well um they're very simple they just push and pop pages um you know that's the general navigation on on mobile phones and android you've got a back button on android but that's all the kind of complication that there is um but when it comes to the web suddenly we have web addresses to deal with and exotic things like a browser's forward button um you know which which adds great complication to things um the old navigator system couldn't cope with a forward button it had no idea how to to do that because if you pushed a page and you popped it again so you removed it from the pay from the screen that page was just gone forever the navigator had no idea if the user had a forward button and press the forward button they'd have no idea where to go back to or forward to not sure um yes so flutter needed away from going from a web url to a fully configured stack of pages so you can get back to where you were previously in an app and that's where navigator 2.0 comes in but the navigator 2.0 apis they're complicated they're very low level or relatively low level and they're fairly hard to use and kind of i think this has been widely recognized and it's been recognized by the flutter team marion mentioned this earlier there is a usability study going on right now and it's really good i'm so so impressed with the the work the flutter team are doing to research um developer needs on this they're currently evaluating various routing packages to see if they can recommend one or some of them on top of navigator 2.0 um and this is going on at the moment and they're wanting feedback so i would i really really recommend going and checking out this github url and providing feedback on what kind of navigation requirements your apps have particularly apps that you're thinking of bringing to the web um they're currently looking at the different routing packages um i in the last two weekends have started writing my own uh to see if i can kind of add to this fun um which has been going fairly well so far but let's let's see what happens um this is an ongoing issue hopefully it will be resolved soon it's pretty critical for flutter webb to have this and to get it right it's been a big challenge for us on muy um so despite all these challenges this sounds like i'm kind of being very negative about flutter web these were difficult things to overcome but um our general um experience of bringing bon moy from mobile to the web has been fantastic despite all these challenges we are thrilled with flutter web we love it uh going from moba to the web was it's just so much easier than we ever thought it might be it's the same workflow it has all the benefits of flutter that you're used to and all it just works it just works so so well and it's ready for production you know we've gone into production with it it works we have found relatively so few issues with it but there have been some so a few negatives we've um we've come across um this is my big one i want to rant about this the scrolling behavior at the moment on flutter web apps feels wrong especially on a mac so on iphone you would never ever guess that a flutter scroll view is not a native ios scroll view but on the web it it just feels kind of slow and sluggish sluggish i'm not talking about the performance here it's rendering uh quickly enough but it's just the scroll physics of the thing and it just needs some tweaking to to make it feel natural and make it feel like other web pages uh we had some weird text issues uh we opened a github issue about this um it only happened on some nokia phones um and only when we were running canvas kits so by default it uses the dom canvas and it works so we haven't actually had this in production but yeah it's very strange it's only affecting nokia phones but not being finished it turns out there are quite a few nokia phones here uh ios gestures don't work either when running as a pwa on ios so swipe to go back kind of just it's a bit weird it sometimes works and sometimes just brings up a white screen so we'd like that to be fixed but you know these are relatively minor things they don't really affect the end user that much and they ultimately um don't block the end user so in conclusion what's flutter web right for i mean mariam talked about this a lot earlier um and there are two words to sum up what it's right for right now web apps and i can't emphasize enough the apps part of that flutter is not right for building all websites and i don't think anyone in the world is suggesting that you do that currently for now at least if you're making a traditional content-centric website like a blog or a new site stick with traditional html don't use flutter web for now at least there are currently just there are too many trade-offs um with with using flutter web for pages which are mostly content um things like text selection that we talked about earlier that they just don't feel um right uh browser plugins like uh translation plugins things like that won't work uh at all with with the canvas kit um frankly users will just get a bit pissed off with your website i really don't recommend it but for applications which are like the kind of apps that you run on a desktop natively these kind of things matter much less and flutter doesn't then feel like a compromise and flutter is an absolutely fantastic way of making performance accessible and most of all beautiful web apps and that is exactly what we have found so i just want to say a really really big thank you to my uh amazing team edemaer ero and yusu uh and previous project members over the past two years uh thank you to moy for being brave and allowing us to innovate with flutter it's been fantastic and thank you for listening to me uh but we have one last thing as this is an international meet-up we're very aware that most of you watching probably aren't in finland and don't have a moy account so can't have a look at our app well we thought that was a bit of a shame it would be nice to show off uh what we have made so we've made a demo version if you go to this url right now my my.codemate.dev you can see the monmoy app running on flutterweb um it's running as a demo version things won't work on it so if you toggle switches and things because because there's no backend it won't update but you can see and get a general idea of how well it works um so yeah moy.codmate.dev have a look at what we have made um that is it for the moment for me um if you have any questions uh feel free to send those in now any questions about um our experience uh developing with flutter web and developing monmoy um add those to the youtube comment and i'll see what i can answer if any um uh but in the meantime um let's hear from khaled from uh moy again about uh his thoughts on how the flutter project has gone flutter web project went pretty well the only thing we had to do more than we expected it was also testing off different uh size tablets and phones and so on one of the biggest surprises was that i saw a version that worked with mac desktop so that would be also useful in in the future the fear of delay that existed didn't come true so so we were happy that we gained concrete savings with this new application because we don't have to develop separately mobile and web versions we are going to use flutter of course for mobile applications and this web version but also for our own internal uh tools so not just for something that our customers see but our people also arguments for for using flutter web and flutter i think two uh most important ones are of course that you you can use same code base that saves work and it saves money but also the end result is something that that you can do more you can have prettier and let's say more functional content in the india application i've been happy with coordinator and google and flutter all right thank you tom and please go ahead and try out that demo we we just posted that link to youtube chat as well and we had quite a few uh questions from the audience and keep on posting them we're probably going to have a few of them pulled up still the first question um that was actually asked maybe last but was this how we were able to sell this to the customer be that there are so many things that are not maybe already on there there are some cons that you brought up i think already mentioned in the last video that what were the reasons why they went for this uh flutter web instead of some other technology but how would you say how would you answer this well yeah i mean the first thing is we had to sell it to ourselves first you know we were really really suspicious of flutter web um i tried flutter webb out back when it was called the the hummingbird project um you know well over a year ago and um i was very skeptical about it i was very very skeptical about it the first versions the performance was um was not great but it mildly um i really really thought it might be um a platform too far for flutter um i kind of thought maybe after a few months they kind of just quietly drop it and just kind of yeah and i forget about that entire thing um but you know it was in the summer that we thought about doing this and um as i said um we made prototypes and that is how we um got moi to agree to doing this project it was just by taking it very very slowly and um it was kind of an adventure for us all they they were very aware that this was a brand new thing that it was still in beta um we kind of i kind of thought it would be going around going stable around about now it was a lucky guess by me but the the key thing was just trying it i mean right like pre-release software is risky it is a risk but if it works it works we face some challenges going on um like developing it last year particularly with switching between branches of flutter and things like that but we the answer is we made prototypes and we tested things and we kind of iterated in that kind of agile development way and it it worked and we've made something fantastic exactly and as you mentioned in the beginning it took about one day to make the initial prototype so it's not so big of a leap not just a big big of a risk for the customer to say yes to one day's work to see if they can actually get the web application out of it and this is something that is related to the next question is that um in moy's case was using flutter faster than using for example react which is the de facto uh front end framework for web applications yeah well i mean so i i would i would uh you know i i i'm not a react expert um but i would probably say that building um a react version you know it probably wouldn't be that much different the key thing here is how much code we could reuse which was um i mean to begin with all of it um we could make a mobile version on the web kind of instantly um or at least within within a few weeks after we replaced those uh packages um but you know the code reuse here is is crazy it it it's all of our logic all of our networking all of that is is reused and uh it's just uh the uis that we've had to adapt to the web once we solve those kind of technical challenges that's been the main body of the work he's building out those pages building out those beautiful designs that you've seen exactly and that's that's the i think the key selling point of flutter in the first place is that you need to only maintain one code base even if it was more even if it was more efficient to develop the new web app with react it would be ending up having a web developer and mobile developer and then maintaining two code bases and you know the fact that we have uh three developers now um are developing this major app um across three platforms is you know that's that's an amazingly small team yeah it just works so so well all right a very direct question and did you test all browsers um so that was part of what i did last year uh so um one of the first things i did you know after initially checking that we could make a version which worked in chrome i started loading up all the exotic browsers that i could find i i don't think flutter officially has a list of what browsers it supports but um i couldn't find any i mean i'm sure if i load up internet explorer 6 that it probably wouldn't work but i don't think we really care about that anymore um we are um so so one of the things that we have done because you know flutter web even though it's only gone just gone into production um we still want to make sure that it does work with all browsers so the way that we're rolling this out to customers is kind of as an opt-in so customers can opt into the flutter version try it out we're not like calling it beta or anything we're just calling it the new version they can opt in and try it and we're currently collecting feedback and seeing if we can find any browsers that don't work with it we haven't found any just yet everything has worked um fine so um yeah we'll we'll see um i i yeah we this is the thing about flutter about about flutter web it's very easy to get complacent with flutter it's been very very easy for us to um run it on ios and then go fine yeah it works on android because it basically always has done and we haven't done much device specific testing because we just haven't had any issues but we're flutter aware but it's there's a much much bigger chance that you will get browser-specific issues because of the way it renders um so yeah it is important to test on lots of different browsers we do test on all the main ones um maybe we should add to that a bit uh but we'll see if we come across any problems with any of the more obscure browsers and that was one issue that also called brought up that testing with different device sizes and manufacturers was something that we didn't expect in the beginning and and found it that we need to do it during the project um one question here do you want to talk about isolates no all right there we go that's an easy option um i haven't um uh i haven't ever had to use isolates isolates in all of flutter in my experience with it so uh no i know nothing about that and web assembly um so sorry okay let's isolate that question yes so we talked a little bit about the download size and performance but is it do you see that this question about the warm-up time is something that you could address um yeah so we've we've had a look at this um the warm-up time for us i i don't think it's too bad um we um i'm not sure what to say to this it's it's pretty quick loading loading our app at the moment i i don't think um it kind of loads within about half a second in my experience um particularly once it has cached the data from looking at the devtools in chrome the issue has been downloading and passing the kind of quite big files that it starts off with so that's something we'd have to rely on the flutter team to decrease those or defer the rendering of them to later um so yeah not um i i suspect it would be an issue particularly in bigger apps the bigger the app gets the bigger the javascript size is going to be it's not really something that we've had to look at yet i have been profiling the app and trying to uh trying to uh to look at but um all right we just ran out of the battery in our main camera sorry about that but maybe that's a cue for us to have one last question and is that are your slides going to be available uh great question um yes i have no idea where but i can share them with the world absolutely that's that's fine um and this youtube video will stay here at um at this link so if anyone does want to watch it back but yeah i will i will put them up somewhere i will put a comment on this youtube video as to as to where they are all right thanks a lot thank you thanks for all the all the viewers out there and our main point here would be that go and test it out if you know flutter if you have a mobile app just um compile it to web and and see how it works and then there's a great community out there to help with your issues and participate and you know contribute if you have something to share and get up absolutely and also thank you to uc and alex who have been helping us out and doing a fantastic job um today on the meet-up it's um it's been great yeah um one last thing from my side so um as we think we are the uh one of the leading flutter companies in europe if you are interested in a carrier with flood direct development be sure to go to codemade.com and check the carrier options we have to offer yeah all right thank you be safe out there take care you

Channel: Codemate

Views: 2,703

Rating: 4.9499998 out of 5

Keywords:

Id: hr73wcOn27g

Length: 104min 44sec (6284 seconds)

Published: Tue Mar 09 2021