Alex interviews Rody Davis about Flutter, a cross platform framework for iOS and Android development. They also address cross platform development issues Dropbox experienced with their mobile apps.
0:00 · you’re listening to inside hours dev show about real-world iOS development today with you your host Alex Bush and today we have a very special guest Rhodey Davis hi Brody hey how’s it going good good so Rhodey this episode is sort
0:17 · of sort of on the wings of the last episode but we would talk to road even before then basically Rhodey you you already started in Florida college as a starting something sound engineering and then worked as a system administrator and then later as a freelance producer and developer and and these days working
0:41 · as a full-stack developer building cross-platform applications iOS and Android and using flotter specifically so this is why we have Rhodey here today to kind of talk about it since last episode we talked about Dropbox announcing that they you know dropping
1:02 · their support of C++ cross-platform before we talked about react native and my experience with Java scaring code with JavaScript so now we figured okay let’s talk about flutter so Rhodey I guess stage is yours and tell us what’s
1:22 · flutter is let’s start with that awesome well thanks for having me on so one of the biggest things about flutter as compared to other ones this flutter is a mobile-first framework it wasn’t ported from the web it was never meant to have web compatibility actually the whole reason flutter was made was they took chrome and they said let’s take out all the web dependencies and see how fast we can make it and so that
1:46 · was actually the very first prototype version of flutter since then they were able to do Android and then later iOS what I’d note flatterers Witten and dart right not jump yep flutter is written in Dart so the very first early version of dart was actually very similar to JavaScript it didn’t have types since then when flutter was released they really start to point O which is strongly typed so one of the cool things dart is it has two modes has ahead of
2:16 · time compiling where it actually compiles all the code down to machine code but the other one is just in time compiling where it actually can allow hot reload this is while you’re coding your application you can make a change and it just inserts the code while instead of having to do a full rebuild now since then Xcode has come out with
2:35 · previews on swift UI so it’s kind of very similar except for the fact that it’s actually running your application when you do a hot reload and flutter it actually maintains your app state so if you’re 10 applicate out of ten screens down it you don’t have to go back to and you’re just still on that same screen you make a change it I just updates so it’s really powerful for a development and speaking of that development tools for flutter have been just simply awesome Google is really good at developer first focused stuff so yeah
3:06 · and another yeah another side note real quick about the flutter stuff specifically is for me in our application at our company we’ve been able to support all the way down to iOS 8 and Android KitKat so with the same UI so which has been super awesome so ok let’s quickly take a step back so sort of just to reiterate to you big port parts of the whole flutter echo system is again dart right is the objective oriented hi what is a general-purpose
3:39 · language with type system and optional dynamism or other way around dynamic optional type type safety and then there is flutter which utilizes the language and flutter itself is a framework or what is it virtual machine
4:00 · it’s a framework so you actually ship it with your application so what’s nice is you can even add slaughter to an existing app as well so yeah you you can actually for iOS when you create a flutter project it will do iowa’s as a framework and then on android it’ll be a module of flutter as well as long as you
4:22 · it connects it correctly you’re able to get access to all the stuff so the difference between react natives and flutter is react native uses of webview flutter uses a uiview so on flutter you’re actually painting all the pixels to the screen so instead of just rendering objects over a virtual JVM on
4:44 · flutter you just you’re literally painting everything inside that canvas so you could actually have an existing iowa’s application and just have one section of your screen or just an entire screen that’s flutter okay yeah so we’ll get to that how it renders it so but essentially the way to use it right you either as you mentioned either can have one portion of your app maybe one screen can it be just one view even yes right it’s just a UI view basically you initialize your eye again maybe you
5:15 · could clarify how technically it happens but you initialize your flutter quote-unquote component and then it spits back out a view canvas that is gonna draw a draw on and then you insert that into your view hierarchy yes and the UI views and flutter communicate with dart over what are called platform
5:35 · channels and so it’s basically JSON that it goes back and forth so you can for example if you have a Bluetooth plug-in it will stream the Bluetooth events over to Dart but then you can also stream events back to the native platform so there’s a lot of plugins and flutter where we’re starting to do things like platform inputs where you can take an ios text field and then get access to them from the dark side as well but typically just to finish with how it all
6:01 · kind of initialize them and how you work with it from the outside on the higher level perspective in general though you would have one flutter produce one big container view that takes over your entire app and that effectively overlays code on core everything becomes your app that flutter code drives correct okay that makes sense and so
6:30 · yeah how does it draw it so you mentioned that unlike react which is basically sort of transpiling that 3/3 virtual three who uiview stuff or something like that how does flutter you said it draws it so
6:49 · does it mean the rebuilds the implements all the UI components we have yes actually in fact they took every single quick to Cupertino widget and I’ve rebuilt it in footer which is awesome so you can make an app look exactly like iOS but the really powerful part about flutter is you can take on any branding or theming that you want you can make it look like material design you can make a literary iOS you can make it look like completely custom and because flutter
7:14 · was built with UI and animations first you always have 60 frames a second so like I said where flutter came from they took chrome the rendering image it engine called skia and that’s actually where they get the painting library from so all like they have all the codes that they use on chrome - you know parse HTML and JavaScript you create websites they use that same I think it’s written in C++ rendering engine to use for flutter
7:41 · so it’s super high performance and extremely fast and then so all it does is take a UI view or an Android an Android view and just paints all the pixels coming from flutter flutter has its own tree and can do its own dipping and stuff for changes but the thing is since it’s compiled down the machine code it doesn’t have to do that when it’s running only when it’s um debugging mm-hmm so
8:03 · does it mean that there is a typically a delay between iOS and Android releases and let’s say they come up with new UI elements or something and then slaughter team has to recreate them copies roughly speaking the really cool part about flutter is the community has been super awesome one of the most active communities I’ve been a part of and a lot of times community will make the thing before even the flutter team does and then just submit a PR and it’ll be pushed out on
8:34 · the next version of flutter but you can you can making widgets is super easy so if I wanted to make a custom text field you get access to everything in the framework everything down to skia is written in dart so if I wanted to make my own canvas renderer from a flutter or if I wanted to make my own custom gesture recognizers I can do that because it’s all written in dart and because I ship my own version of flutter it really can be as customized as I need it to be okay so so that inter
9:07 · so you also mentioned that there is a communication between layers is in Jason right could you yes give more details on that how that process goes yeah so it’s called platformer channels and so it allows letter to communicate with the native side this is only for the backend plug-in side not for UI so if you’re
9:31 · connecting with Bluetooth for example you can have your the Iowa side be an objective-c or Swift so it’ll communicate with that Swift plugin over that json platform channels so very simple types you know strings json maps or you can have a list of
9:48 · events and you can communicate both ways it allows you to have all your existing Swift’s and Objective C code the same so you could literally take an application written in Swift yeah install flutter on top of it and then just communicate with all your existing Swift code and they just basically rebuild your UI and flutter if you wanted to it doesn’t mean that flutter application when it needs
10:14 · to do networking it has to have that bridge between itself and whatever networking you nsurl session right on iOS so on Android it’s equivalent so the cool part about Google being so big is the fact that flutters been internal for like six years and Plus dart has been used on angular dart for a long time so a lot of those kind of core parts of the flutter are in Dart it’s the networking HTTP are is actually built into dart
10:46 · itself so you don’t even need a platform channel if you don’t want to so you can of course do that if you want to use in a crl session or you can just use dart HTTP and do pretty much everything you need to so it’s more like a trying to do everything in Dart if possible in terms of code sharing and then going out to the native platform when you can’t when you have to do something perfectly so for example I built a cross-platform MIDI synthesizer for flutter and by doing that I took my native Android app and my native iOS I took the MIDI synthesizer out of them
11:18 · and created a common shared platform channel to where I could say play MIDI 127 and then for each plug-in it would say okay if the note is this then it runs the native code and vice versa so it allowed me to in dart just call play MIDI note but in the Swift and Android I’m able to call the native Android libraries and the native Swift packages as well mm-hmm mm-hmm I see okay that that makes sense so AHA I what I wonder
11:49 · is how kind of from my research I my understanding was that flutters design and architectural if you will model is similar to react in a sense of rear end during a tree of of your UI tree based
12:09 · on data changes so you have this unidirectional data flow for from like a Redux type of thing and then you calculate the diff and order not you but there yeah work with them using an algorithm and then it just updates the parts that were supposed to change is that is that how it works conceptually and and sort of when you build flutter apps that’s your mental model yes exactly so flutter has its own tree but
12:40 · the difference is it’s painting everything onto the canvas so whereas on react native you would have a performance delay by going over the JVM and trying to communicate that back to UI elements for flutter it’s just rendering whatever it’s seeing in addition to that flutter because it’s so new and because it’s so extensible you can use whatever state management solution you want if you want to use Redux there’s already Redux packages and
13:04 · it’s built for that if you want to do something like that’s similar to combine on Swift so like very streaming kind of approach is important right yep there’s there’s rx start there’s flutter block there’s a lot of paradigms that are already built with the streaming components in mind so you have to just build on top of what Swift and Android have you can do it all completely in dark where it’s made to
13:28 · have high performance what’s the recommended way like what does Google promote you know Apple keeps pushing NBC down our throats similar thing with well reactive rendering or whatever is cold so with flutter it’s an open question right now because there’s so many options they recommend for beginners to use provider which is a a simple version
13:51 · of a change notifier where you can just call like you’re telling the UI when to change and then it’ll update all the listeners the very simple one if you want to use something called set state which i know all i OS components are stateful by you know by default so where if you just change the field it’ll just update on the UI but in flutter you have to call set state which causes a rebuild for that specific widgets but then if
14:15 · you’re using streams the next recommended one is blocks so it allows you to just react based on changes coming in hmm I see very interesting I mean the side note I used dart many years ago well three four years ago when it was still web yes stuff and it was mmm best alternate if I could find first
14:39 · web development with angular was pretty great yeah okay so and it changes all the time - right yeah actually now now I’m curious cuz I thought they’re very rigid in terms of like oh no no let’s only use reacts model and I was like that’s it then that’s the biggest issue
14:59 · one of the well maybe one of the issues that I have with react whole thing is the design of it right but if they’re open to two other mmm sort of solutions that that’s great that’s good to know provider was actually built by the community as well and they’re recommending it so that’s that’s another example where Google is saying you know we may name may not be the best on this but we’re gonna promote something in the community that is so right
15:29 · make sense okay so let’s get to let’s let’s talk about that Dropbox article right maybe they’re like sort of four points that they had there and maybe we can see if flutter addresses them or has them at all things like that so one of the problems they had was the overhead of custom frameworks and libraries right there C++ they had to build build a lot
16:02 · of stuff right that to share again to simplify my understanding like networking right if they were networking in that shared codebase a C++ code base they had to build all of that and then somehow Bridget with both Android and iOS yeah how flawed or addresses that so
16:27 · one of the biggest things with flutter is it allows you to use any existing framework so in fact you can use Carthage or cocoa pods or straight-up modules if you want on iOS you can very easily just create flutter for just iOS applications or just Android applications in fact when I started I didn’t even use flutter for Android I was only using it for iOS because of how much faster I could move so for example
16:54 · if you need to use a a crypto currency or crypto kit that’s built with cocoa pods then all you have to do is go and install that as a cocoa pod inside your framework and then you have access to it a good example of this is the plug-in system for flutters every plugin and flutter can not only just shared our code it can also do UI code for native
17:14 · platform channels which is what makes it so powerful I can bundle because I’ve created a lot of packages for flutter I send out it can includes its own dependencies with either cocoa pods on iOS or all the Android modules on Android and when you send out that plug-in it will install everything you need to for that application flutter also knows the inter dependencies so if you have version mismatches and whatever but it allows you to leverage any
17:42 · existing application so for example when I created the midi synthesizer I went out to Android found an android library that was already built to do midi synthesis i customized it and then i just installed that inside of the android application and then published that for android and
17:58 · same for iOS there was a MIDI the sizer already built in cocoa pods and so I took that and you know just built something on top of it so you don’t have to rebuild the wheel every time you need to do something mm-hmm one of the big related to the issues that Dropbox mentioned was threading and a background process process yes and so the coordinate and all of that it was a challenge with C++ what happens with
18:25 · Florida so really cool part is flutter by default is single threaded and a lot of people think that that’s all dart is but dart provides a extremely simple interface on top of isolates which you know can manage background processes on both iOS and Android you can create as many cores as you need to so like let’s say I spun up I spin up these isolates
18:48 · it will use as many cores as the phone has available so if you have an eight core phone it will use all eight core threads the only limitation with isolates is you have to day there have to be static functions or types coming in because isolates have no information
19:05 · about the other isolates around it so basically you have to compile the work and then you get the result back and do something with it you can’t have access to other things inside of it you have to pass everything it needs basically interesting so these isolates they are it’s not a concept of a thread really it’s well it’s built on top of Iowa’s threading so oh yeah it uses the same like network or the Grand Central Dispatch and it mm-hmm yep and it uses
19:34 · the Android one as well but it actually the reason why it has to be static is so it has everything it needs to spin it up and whenever it finishes you just have to use the results so if you’re going to do the Fibonacci sequence you just specify the however many numbers to go out to and then you just get a result back so primitive types so interesting so okay you cannot really give it a custom model
20:00 · object to compute stuff right you have to give it your motives yeah but you can give it a map which is really powerful so you can parse JSON on an isolate so you can give it a map data and get back a custom object so it but it then within the isolate that function you run it is still dart fully capable start so you can recreate models or whatever structures in there okay exactly the worst case you just map yes to the
20:28 · dictionary thing and then back from that to whatever correct yeah so just JSON interesting so does it mean that you and I can’t really as you said they can’t talk to each other like with with let’s
20:44 · say you have something Rx swiftly type of stuff where you have a stream of data and you want to process it asynchronously and then map one thing unto another then filter then have some other hi-oh or their function and then subscribe to the whole chain to get the results on let’s say main thread so the isolates are only for doing extremely heavy operations that are like under the hood there like one-off operations
21:10 · everything else you use a streaming API with stream controllers and stuff like that to where you can do exactly what you said where you modify the stream will pass it down and react to events flutter uses like a big Advent cycle so every time you do like a button press it just keeps computing until that event triggers in the future and then it just works off the next one so yeah flutter
21:32 · when you’re using streams and stuff you have all you can depend on anything you need to and it’s exactly what you would think it would be like it’s only isolates where you doing like you know like math or something that would be a very heavy calculation that’s what you’d use AC makes sense okay let’s go to the next big point in Dropbox article so
21:57 · they had an overhead of custom development environment meaning yeah they had Swift’s and objective-c Swift iOS environment Xcode all about stuff and libraries and then they had equivalent some Android and it was all so they’re ready there but then four plus plus score that they shared between them nothing was there and they had to build it all and you know polish their
22:23 · own tools and create their own tools and that took a big overhead was it we go ahead took a lot of work yep so a huge thing that one of the reasons why I chose flutter cuz this thing exactly so one advantage that it has over react native is when I’m in you know and footer for example I personally love using BS code and it has first party plug-ins for flutter but then when I want to go into Android and let’s say I need a refactor to Android X and I I can open my flutter project just the Android
22:55 · folder in Android studio have access to all my java my Kotlin all my packages I can refactor with the built-in IDE tools like I can refactor to Android X or not to do you know you get access to just like a regular Android app but then if I want to go to open my Xcode project I just right-click on the iOS folder and can open Xcode I have access to all my normal things that you’ve seen a Xcode project I can create a storyboard I can create a you know all my my plugins my
23:23 · dependencies I can you know even go down to my actually app delegate which can be in Swift or objective-c and you you’ll feel right at home because it’s an actual Xcode project so which is really nice make sense okay another another
23:41 · thing they talked about was the overhead of addressing differences between platforms right and I think they even had like a sort of funny to me example of was picking images or something image picker one of those you that initially
24:01 · was similar but then as platforms developed diverged and that kept that overhead of that kept increasing yes so one like I said I’ve made a lot of packages for flutter and well we can use the image picker as an example but when
24:19 · you want to do things and I wasn’t Android separately you just say like on dart you would say image picker pick image and then on Android it would present the native dialog to pick an image and on iOS it present an iOS dialog - like an actual iowa’s I like to pick an image and then you get that image back from the result so whenever you’re doing custom stuff that you want native features you would use the native components already you don’t have to rebuild those if you want to you can but otherwise you know all
24:50 · the differences are in the plugins themselves so as a plug-in maintainer I will have to write this swift and Johnny yeah but then when I publish that the person using my flutter package only ever has the dart of course they can you know do a pull request of mine and if they want to make improvements but all they ever see is just image picker pick image image picker pick video or you know stuff like that so they don’t even have that part in their application that they have to worry about but okay but
25:20 · does it effectively mean if you sort of if you rely on JavaScript package plug-in packages like that that they mostly become uncommon implement a common denominator between two platforms right they cannot really diverge too much into how iOS does it or Android because well you need to find that only one place where they overlap yeah so I
25:44 · try to like in my applications I try to make it as abstract as possible so the only part that’s going to be different is going to be the very very very last step which is gonna be the calling out to Swift to call it like an iOS delegate for something and everything else is going to be in dart for me so everything like they’re receiving the parsing the networking all those other layers are gonna be inside dart so I don’t have to write that twice and as far as the UI that’s another area which can differ but uh since the release of dart 2.3 you can
26:16 · do if iOS and do conditional things inside of your UI if you want to show specific things on different platforms but yeah it’s it’s the biggest thing is going to be on the back end Swift and Kotlin differences but it says it’s a shared or is separate and abstract as you want it to be or someone could put all their completely separate Iowa’s networking
26:40 · and once a find an android networking on the other but you kind of lose the advantage of having dart and be able to already have networking and do that all in one place right hmm okay that that makes sense I
26:56 · guess still they’d like in in some scenarios and that’s one of those problems with cross-platform solutions like that I am just trying to trying to think of you obvious simple and that we can talk through but maybe a lot of iOS
27:18 · apps they prefer using tabs but Android apps prefer using the hamburger menu with a side menu right effective function of it is similar to the user you’re picking between quote-unquote menu options within your app but you
27:39 · know but yeah if let’s say you were coding that on Iowa’s using Swift you can do both and there are libraries to help you or you just use a UI tab bar from Apple UI kit but then the way you structure it to complete code is so different you so how does that happen
27:59 · with that yeah so it’s actually a package I just released on flutter it’s called mobile sidebar and it does exactly this it allows you to abstract your navigation because because flutter everything is a widget I mean everything even your theme is a widget you create a navigation
28:16 · component where you can just take a list of screens and you specify what type of navigation you want and then it handles the navigation for you so for if you want a tab bar you say you know type tab bar and then under the hood flutter will create a tab bar and then put the screens for each one as a stack and then if you for Android if you want a top tab bar you can also do that too it handles it so by being able to abstract that kind of stuff you’re able to in one place keep your navigation so instead of nesting everything inside one screen you
28:48 · can you and you know abstract so you create your settings screen and you pass in setting screen into this tab bar navigation and then it handles when to call that and where to show it so it’s all about because everything’s a widget you can do stuff like this so you can call just setting screen as a
29:07 · parenthesis as an object you can use that anywhere you want to you can push to it you can show it you can render it and stuff like that hmm so it’s one of those things that like you have to like do an example application to see yeah then you then you really like you get it like I didn’t really understand it when I first started but once you start it’s really addicting because you can just create things so fast and like you can end the refactoring stuff and flutter is awesome so you create a huge UI tree and you can
29:35 · just like click on a widget and refactor out to extract the widget and then you can completely have that as a separate component so you can that’s actually what flutter recommends is you build your application on one screen as big as possible or is minimal screens as possible and then you just refactor at the end and then you can put it in separate folders and stuff like that so it knows what depends on what and yeah it’s that’s one of my favorite parts very interesting yeah and you only need
30:04 · to play without specifically yeah okay and you can feel free to check out my github too I have tons and tons of examples so and you know even now with a flutter web you can actually run these examples in the browser which is cool nice yeah well we’ll add that to show notes okay so the last portion of that
30:26 · article the robox article was focusing on overhead of training hiring and retaining developers right so basically attracting talent and simply people skillful with C++ and their keys right and it was a challenge because they would either find people who know C++ which are I guess rare maybe but then
30:51 · they’re know as much about iOS or Android and then there’s that overhead of training them or other way around they’ll find good iOS engineers and good Android and I only know Catalan and Java and maybe Swift or Swift an object to see they don’t know C++ nor do they want to yeah
31:12 · that’s even more important actually bigger problem and you know you you can’t blame them really because every other the likely most of the other jobs they will not it wouldn’t be useful yeah exactly so we actually had our company we just hired another flutter engineer and you
31:32 · know because flutters new obviously people aren’t going to have three years a flutter experience but we did look for native developers so I found someone who is an Iowa’s developer and I have on-boarded him and he’s already self-sufficient and creating flutter applications in a matter of three weeks because you already know the Iowa side
31:51 · you know he’s familiar with Xcode you know the hardest part about mobile is knowing at least one of the platforms it’s really hard to learn mobile coming from web but if you start with mobile it’s super easy to be like okay this is just a different way to write UI and you know it’s really easy to talk through okay this is this is what this is in Xcode this is what this is in Swift in fact clutter has multiple guides for coming from iOS coming from Android coming from what and shows you exactly how to map your kind of your knowledge
32:21 · to where to put it hmm okay interesting so I have a sort of another my own question here or yeah I think to address maybe maybe the last one will probably time mark to wrap up since it’s a Google
32:43 · product or Google technology we know how Google loves shutting things down right I was actually I kind of thought dark died not officially but virtually a few
33:00 · years ago because not like the web spark just fizzled away and then then typescript kind of you know became a got a bigger muscle there and the community as far as I understand yes well as with any Google product it’s always you tread lightly but one of the huge advantages
33:21 · is it was open force open source from the very beginning so if Google went away tomorrow it’s still convenient community maintained they even treat community engineers that are submitting fee requests as well as internal Google requests for PRS as the same so even
33:40 · Google engineers have to submit PRS to the main repo to submit changes so if it went away tomorrow hopefully the community would step up and still be able to take on all this stuff which we are doing I think you would just have not as many people on the salary doing taking care of issues but yes it’s
33:59 · definitely a concern but I think the community has been super strong and being able to like Alibaba for example has switched all their stuff to flutter and that’s interesting they react native shop right baking so they make huge paw
34:15 · requests to flutter all the time and there’s just been a lot of other huge companies that have jumped on board recently like Abbey Road Studios and just a lot of really cool companies Hamilton for example so a lot of other big companies are incentivize to keep flutter around so I think that’s also it’s like a catch-22 like you have to have the big companies to keep the big companies and I think we’re starting to see a huge shift of people coming on
34:41 · because they see that it’s so fun to work with and there’s so many people that you can find that can work with it as well as yeah it’s actually just really enjoyable to use yeah I have to play with it again never you haven’t convinced me per se but at least I’m curious now because I again yeah it sounds like it’s more different at least in some regards then I then I thought from react native yes which for
35:12 · me personally okay I’ll give it a shot but okay cool well Rhodey thanks for coming in and sharing your experience and kind of giving us this overview and absolutely sing what the problem straw box had and yeah guys you can reach us out at hello at inside I was dev calm tweeted us at inside I was dev and roadie dude where people can find you so
35:41 · they can find me at my website at rody Davis comm Twitter at Brody Davis and on github at Apple educate mm-hmm yeah and we’ll add all of those links to to our filaments all right thank you ot see you next time bye see ya bye