Architecting the Reactive Flutter App

thank you might have noticed I'm Gavin dowdy I'm an engineer on the AdWords mobile app at the Google office in Los Angeles I've been working with flutter for about the last year and I'm here to tell you something about it I'm going to show you how the flutter SDK works really well if you're building a reactive application I'm going to show you how it's programming language dart gives you some really good core language level primitives that you can build up reactive data systems with and I'll show you a few practical tips that we've learned building an app with flutter over the last few months I don't think I'm gonna lose many of you guys but I expect you to understand object-oriented programming and know what a function is particularly functions that can return other functions and take functions as parameters that's because I'm going to show you a little bit of code in the dart programming language I think he'll find dart quite familiar but I'll try to highlight the relevant parts as I go along now I've been at Google for about 11 years I worked on the web for the first five years and then I worked on native iOS development around the same time I started working on native iOS development on things like Google+ and Google Photos I also had a kid my youngest kid around 2011 and you know I always have some little hobby project cooking on the side but when I had the kid I was like totally busy I was just like deja Fatherhood for several years and it turned out these were these were bad years to miss in web development I wanted to get back into doing some some hobby web projects just to experiment with things let me show you the whole testbed application I was using for this amazing application it's a little tic-tac-toe game that I was using to figure out different web technology stacks after being away for several years and you know you can play a robot AI and if you're on the internet you can play a another person live over the Internet so this is my testbed application because what I was really interested in was live data this idea that data is going to be changing in real time potentially by multiple users so things like chat apps and collaborative editor in multiplayer games these are all kind of live data applications and I thought they were they were really interesting and I wanted to have some some pretty good tooling to start out with for a live data and as I dug into the live data I had this realization which that is that come on all data is live data so as programmers we like to lie to ourselves and pretend that the data is going to change when it is convenient for us to have the data change but inevitably we get it wrong you know mountains crumble and stock market prices fluctuate and your application data changes somewhere on that spectrum but you never get it right the first time and if you don't design your application for it right away at the beginning you'll you'll be in for a lot of trouble later when the the real-world characteristics of the application suggest it's can be changing on some other time scale so I kind of missed out what had happened in the front-end after 2011 when my kid was born and I came back in and it's like wow all this stuff has happened in such a short time you know you not only to had things like web components and service workers also web pack and babble and it's like wow there's just an explosion of technologies to look at but there was also this architectural sea change which I'm sure you guys are all familiar with by now and that is reactive programming so I started looking at you know how react worked and Elm and all of these kinds of systems and they kind of blew my mind because they were they aligned really perfectly with this idea of your data always changing so I kinda want to share with you my little model of what I would I consider the reactive programming this is not particularly original but you start with some piece of state that's coming from you know all the users in the world maybe and you produce the state of your application the UI renders that state to create a view which the user then interacts with to produce events that are combined with the state to produce a new version of the state and the cycle continues now you can simplify this a little further just say the user is a pure function of UI the users input the user function input is the user interface and the users output is a stream of events that changed the state so I want to say like hats up to Andre stalls for coming up with that you should go watch his talk and then this middle section when you're rendering the state and when you're handling the user input that that piece is your reactive UI system and that was the kind of that like the missing piece that started the flood of being able to reason about your application as this flow of data so I'm working on this and I'm having a lot of fun and I'm you know doing this fluid development you know and I'm talking about it at work a lot and saying this is great this is amazing but at work I'm still doing your classic model-view-controller programming so I'm sad but then my team lead comes up to me and says you know I've been hearing you talk about this reactive stuff for a while I want you to take a look at this flutter thing and see if we can use it for our app and I started looking at what flutter was and how it worked and I realized that flutter one of the things that was really designed to be was a reactive UI system so happy Gavin so how many of you heard of flutter before not nearly enough so mile-high overview kilometer height overview since we're in Europe it's a full application SDK you use the dart programming language you use the flutter SDK and the flutter API is to write your application it gives you a really nice developer ergonomics but you deliver an arm binary image compiled machine code application to both Android and iOS so it's a cross platform SDK it's just the same as you would if you were writing an objective-c or Swift or C++ or something it's got a really complete set of widgets you generally don't have to write your own widgets for the sort of standard UI components they're very complete but we don't pretend that there isn't an underlying operating system so there's a plugins interface that you can use so you can take native code and access platform level functionality and you can also use code that you've already written if you've got native mobile code and finally it's a reactive framework it uses the the reactive idiom for rendering your user interface and a lot of mobile development systems the the code that is running when your application runs you know there's there's a fairly small percentage of it that is accessible to you the engineer you know you don't you don't really have a lot of insight into how uikit renders the views on iOS or you don't have you don't have control of how the Dom itself operates or how the compositor operates or how the stylesheet system operates you know you're using it through a fairly small piece of that code is yours flutter kind of flips it on its head flutter starts with a very print low-level primitive layer it's the text rendering subsystem from Google Chrome it's a very mature text rendering subsystem it's multilingual and it does nice fonts you know all of that good stuff it uses the dart runtime VM and libraries dart is a high-performance language interpreter that was written by some of the original engineers on the v8 interpreter team so it's a really kind of a next-gen language and then it uses skia which is a portable hardware accelerated graphics layer and it does the very primitive graphics operations like bleeding and drawing lines and filling and things like that so very low level on top of that low level it's all exposed as the dart UI package the rest of flutter is built and that includes not just what you'd expect you know low-level primitives but all the way up into the widget and styled widgets system so everything that you would normally think of as kind of off-limits to you as an engineer is available to you in flutter so you can hook into it and unlike systems like where you are programming in JavaScript say and then you are driving the native UI system with your code and pushing code back and forth across a bridge to the underlying platform UI system flutter it keeps all of that code on sort of its side of the wall so there's no bridging and you get really good performance that way now I was really a you know excited to be able to build a reactive system at work I was also pretty skeptical that you'd be able to get something that looked and felt nice because a lot of the other cross-platform systems I've used in my career kind of always left me wanting a little bit more but I did just what you guys can do tonight is downloaded the flutter SDK I built the sample applications this is one of them this is a gallery application and I was like okay these are great these were running at 60 frames a second you can do these really nice designs and animations with it and you know animated gifs don't actually run at 60 frames a second so if you want to get a feel for the the native look and feel you can download the SDK if you don't feel like downloading the SDK you can actually download this app it's the Hamilton app it's available in the App Store since since we're not in the States Hamilton's one of our presidents there's a really successful Broadway musical production live musical production about this guy it's a rap opera about president Hamilton it's been selling out for years now it's like completely sold out theaters and they the producers of the play contracted with a digital agency in New York who wrote this application using flutter and firebase and it's the application you can use to submit yourself to a lottery to win a chance to spend hundreds of dollars for a ticket to a Broadway show it's kind of interesting because they didn't choose either material design or iOS as their UI metaphor so they've got more of a branded UI experience and they found that was very easy to develop with the flutter system so why were we interested in using flutter flutter wasn't even officially in alpha release when we started prototyping with it it is now but we were particularly interested in it for a few reasons one is we wanted a reduced API surface like our team is actually a fairly small team for like a mainstream Google consumer facing application and half of it was doing iOS and half the team was doing Android development and we liked each other just fine and we're using the same data sources and stuff but we couldn't really share code and we couldn't share expertise but we did have to have the applications be you know fairly identical on both platforms so it was nice to say okay great we're only gonna have one API to target and it's not going to be iOS or Android it's gonna be the flutter SDK API you know similarly we were able to say it's just gonna be this one language so we can share some expertise and we can share some code between ourselves and we don't have to like be expert in both Java and iOS and finally we had quite a bit of existing dart code and this is kind of a bonus a bonus round here there are a lot of a lot of dart code running in production from major applications inside of Google so we were able to leverage some of that expertise and some of that code but that's not really required if you want to take advantage of flutter I only mention it because a lot of that code has been open sourced so you're not you're not doing a cold start you've actually got quite a lot of libraries that are available dart has a nice packaging system akin to NPM so you can get a hold of these dart packages and write your own but one of the other major reasons we were interested in using flutter was simple developer happiness our large mobile applications were taking several minutes to compile you know you'd go and you'd have to navigate to some subview and like make sure that you've changed the fonts or the spacing of the layout to be correct for that view and if you didn't you'd have to like rebuild and reallocate down to that view and flutter has hot reloading so as you might be comfortable with from other environments you can you can do this for like high-performance native mobile development as well and the nice thing a couple of nice things about hot reloading and flutter is the way the system is architecture architected it preserves state so you can hot reload in under a second and it will preserve the state of your application you see there's a little counter number that and forth and when they change the text it will it will maintain the state another nice thing about flutter hot reloading is if you make an error you can you'll see debug information for that widget that had the error in it this particular widget is taking up the whole screen but it could be just some sub widget on your UI and you'll see debug information about the widget you can usually correct it and reload again and it'll just keep going so that's a really nice productivity thing that's code isn't it we're not seeing nearly enough code are we so I started learning flutter just on the flutter to write a prototype for our app and I started right where you probably will with widgets and widgets are the overriding metaphor in flutter so it's like files and the UNIX systems so they're sort of a metaphor that's used for things you wouldn't necessarily expect them to be so everything in flutter is a widget including things like visuals styling and animation are all widgets and you compose these widgets and deep hierarchies of simpler objects and the flutter runtime system makes that efficient so let's take a look at a really simple widget this is like a labeled value it's got a label it's got a value it's got some default padding around it here's the source code for that widget just a couple of things it's got a couple of member variables they're marked is final which would be equivalent to like es6 Const it's got a Const constructor which means once you construct this object it's never going to change widgets are always immutable do I default but you can even mark them constitute a language level and then all it's really responsible for is returning a tree of other widgets that will then be composed so this is this is maybe equivalent to a pure functional react component you know if you want to expand this the padding you could just introduce a padding widget around everything else so it gives you a single model a single semantic model for doing your styling as well as rendering your UI if you do have state like this this nice material design slider that's dragging back and forth it has some state which is the current position of the slider in numeric space and then that that floating-point value is being rendered in a label so this is called a stateful widget a state for which it doesn't produce the render method directly it produces an object called a state object that then implements the the render method state objects stick around between widget rebuilds so the state and this object is just a value as a floating point value and when you implement the build method now in your state object the state keeps building this widget tree you can use that value so it keeps the the stateful value of your widget together with the code that builds the UI and that's actually all that flutter provides at a conceptual level it's got a really rich library of these things that do a lot of stuff for you but that's really what you need to know to get started building so knowing this and having worked a little bit with react and redux on my hobby projects i built a prototype in a couple of months and i want to tell you though most of that time was doing application infrastructure work to you know be able to use it from dart and to be you know work with our build system and stuff there's a lot of kind of heavyweight infrastructure at Google for writing these super scalable applications with really large teams the flutter part was kind of the fun lightweight part and here's a little screenshot of the the application that the prototype application you see like the animations are pretty smooth and UI looks pretty nice because I'm using the out-of-the-box flutter widgets and it's actually making a live data query against our production servers it's a fake account so that's nobody's real data by the way so how do I build the prototype I started with the out-of-the-box widgets I use the core library for HTTP to do the networking to do authenticated HTTP fetches against our production servers I used the Google authentication plug-in so if you want to have your users authenticate to their Google services you would use the same plug-in that I did for the prototype and it you know it pulls up the permissions page that they have to agree to and all of that you don't have to write any of that stuff yourself you just get the the correct token back and I used a redox datastore I used a ported Redux called green cat and that worked just fine it worked just like you'd expect it to so this was convincing enough we decided we would start work on a production version of our application using flutter but one thing they became pretty obvious to us is that we had some complicated asynchronous logic going on so I only go into detail for a second about this table view you can say it'll resort when you click on one of these column headers you can scroll past the currently loaded page of data and just keep scrolling and eventually when you stop scrolling it'll load the next page of data so you can quit down to these ends of these multi thousand line lists and it will it'll fetch extra data for you and it will also filter by that date range at the top it'll filter your queries by that date range and all of these user interactions and all these network interactions you know are fairly complicated to coordinate and we looked at a bunch of solutions for this and what we decided to use was observables so there's a port of the observables library it only took about 100 lines of code to do that that's blurred out because it's you know not open source code but that's really about what the code looked like to do all of those interactions with that table and all that complicated async logic that's a like a snippet a readable snippet of it but you can see it's it's very similar to how you would chain operations on collections and JavaScript some say it's just very straight line and you're declaring a lot of interaction this is taking the the virtual list scroll index that that list is virtualized so it's not doing a lot of extra work that's not on screen and using the observable for the scroll position of the list to drive the creation of a network RPC request that asks for a specific page of data so it's doing kind of a lot of work but it's all kind of packaged up in this nice declare it's too much that's too complicated isn't it we're gonna do this widget instead of that list so I can show you what observables look like when you're coding this is just a button as you get a bunch of clicks on the button and you add them up and render it inside the button so it's just a link riman encounter these are all kind of trivial examples in there and it's overkill sometimes to use streams but it's easy to illustrate this this is gonna use the scan operator from our X from the observables library this is a little animated rx marbles diagram of how the scan operator works it basically takes the last value produced by the stream and the new value and runs a function on them and outputs the results of that function so this is all the code that you would need to do to implement a stream of this incrementing value based on clicks on the button you could you know you see it's creating a new observable from the stream of clicks and it's running the scan operator on it with this accumulation function you can even play coke off on it a little bit and inline the accumulation function because we've got some pretty compact FATA or syntax for defining functions so observables are just transforms on this data flow and if you want to make your own observables or if you want to be able to read the observables library in Dart what you can use is the core dart streams library so let's take a couple minutes and look at streams this is kind of a contrived example but again it's this stream of clicks on a button down at the bottom you can see you can subscribe to that stream of clicks and then call set state with an incrementing counter values so this is this is the state of a stateful widget calling set state so it'll be rearend 'red and here's here's how you build the button they're just mapping the unpressed handler to push the number one into this stream so the input stream that the that you're starting with is 1 1 1 1 1 1 1 11 asynchronously from the user and then they're being added up and there is a member variable getting updated so I can call set state with it but that feels kind of non-functional to me so you which can do is you can move it into like a local variable and then use it inside of the stream map operator so this is just like map on an array except instead of processing all the values in the array it's processing them as they come in as they arrive and then I'm just calling this local closure that's incrementing the counter value and returning a stream of that value but I'm not calling set state because what flutter gives you out of the box is this the stream builder widget and that's a generic widget that you can include and it takes the stream that's producing some value and a build function that takes that value and you takes a snapshot of the latest version of that value and lets you build your UI using that value so you don't have to hold on to the state in your stateful widget you just have to use a string builder widget and that will also take care of subscribing and unsubscribing to the stream and calling set state for you so it's really the way to go if you're doing stateful UI if you look at this map function a little bit it's just a transform on the stream so a map is implemented with transform transforms and an interface you can implement yourself there's a handy stream transform operator here I'm not going to go into this too much except to say you could make a generic helper function it takes parameterised types so you don't have to work on integers like I'm doing in this example and if you look at this implement implementation you can see it's basically calling a reducer function with a state in action which is the core of how redux does its thing in addition to being almost almost all of redux right here you get this is pretty much literally the implementation of the scan operator in the RX observables library that you get with rx start if you're using rx dart observables are subclass from stream so you can pass one directly to the stream builder widget and that's what we're doing with a lot of our our code so how are we using flutter in our production app well the first thing is we have a lot of business objects that represent kind of complex data flows and and user interactions and network requests and we're modeling those things as essentially named collections of streams and sinks a sink is just how you input a value into the stream so the public API for a business object would be you know you put a value in here and then there's a stream that you could subscribe to that might represent the results of taking that value in making a net request and transforming the data to make it convenient for rendering so and that connection is actually made using our observables so the implementation of connecting the input sink to the output stream is through some arbitrarily complicated stream chain of observables so we're using the observables library ourselves also using the native streaming library it sort of depends on the use case we're using plugins we're not just using plugins because we want to access certain platform functionality we do but we also have quite a lot of native libraries that we've already implemented for Android on and iOS for like that have comparable functionality for example first-party authentication is a plug-in and there's Android and iOS implementations that we're wrapping up as a plug-in so we can use it in our application without having to write all is kind of complicated and maybe legally significant code to make sure we're authenticating people correctly we're using a lot of fluttered widgets we're contributing widgets back to flutter there was an engineer on our sister team who wrote an autocomplete widget that's going into the main flutter library and that's because we're relying on all of you there's there's quite an ecosystem of reactive tooling already not all of it is written by Googlers there's the RX dart library that you can use if you're into immutable immutable j/s immutable values I encourage you to take a look at the Bilt value library that uses some really slick dart code generation which is a whole other topic but it makes it very easy for you to say to define a complicated structure of immutable objects and then efficiently produce new versions of that based on your your desired mutations and then there are redox implementations so this is the one you should use it's the the public Dart Redux implementation there is a flutter companion package these guys are building out these are not Google employees but they're building out the the redox an ecosystem for you so you can hook up to a Redux store with flutter with a minimum of boilerplate so go to and I just want to wrap this up and say you've seen how like applications might want to respond to data that changes on some unpredictable schedule you can use observables to get a powerful vocabulary for declaratively describing how you want to react to these things you can use dart streams if you want a little more low-level power I think you know dart streams is going to continue to add things and maybe and maybe get up to parity with observables so you just use them directly and you can hook it all into flutter pretty trivially flutter is designed to work with data that's going to be changing rapidly so you can take all of your reactive development expertise and start right away with flutter you don't have to like reinvent your your mental model of how this stuff works you could just use mine if you've got any questions about flutter if you download the SDK and play with it and have problems with it you can ask me anything tomorrow at 2:30 there's also a talk about Rx tomorrow at 5:30 so you want to really deep dive and observables if you want to learn more about our X you can go to reactive xio if you want to have some those cool marble diagrams there rx marbles comm you can learn more about dart at dartlang.org one of the cool things they have on that site is an interactive browser-based repple for the dart language so you can just pull it up in your browser and try out code snippets in dart and it has a sharing functionality we use it all the time we like hey how'd you code this up in dart and you like well you could try this or you could try that and you could send a link to somebody it's really really handy and finally if you wanna learn more about flutter you can go to flutter io and get the link to download the SDK for your platform as well as a lot of really good polished documentation and API Docs and so forth oh okay all right I'm John so thank you very much

Channel: Coding Tech

Views: 51,000

Keywords: mobile development, flutter, google, architecture, mobile apps

Id: cfqpSgYDLAc

Length: 28min 21sec (1701 seconds)

Published: Tue Jul 03 2018