4: Learning and Shipping with Flutter

Mark Thompson discusses his learning and launching a native app using Flutter, a new cross-platform framework developed by Google.

Links
Resources for Learning Flutter
Notes
  • Flutter.io is a cross-platform framework for building native mobile applications
  • Flutter uses Dart, another language developed by Google
  • A big motivation for using Flutter are the Animation features that are built-in to the framework
  • Left to learning an alpha product, Flutter, @marktechson had to dig right into the code and start reading it.
  • If you're using a new framework, get a Hello World pushed as close to production as possible, before you get too far down the development path.
  • Flutter comes with a built-in features for unit testing: https://flutter.io/testing/
  • The Flutter community is very responsive, especially on Twitter.
  • Seth Ladd @sethladd, a product manager with the Flutter team, was a great resource for @marktechson while trying to launch.
Show Transcript

[00:00:00] Megan Schemmel: Welcome to this old app a podcast about learning coding matching stuff together breaking things apart startups failing winning and any other buzzwords we can think of 

Randy Burgess: I would like to welcome Mark Thompson back to our show.  Mark, you were a visitor and you are a guest on our CTO Think podcast a few weeks ago. Go ahead and reintroduce yourself and tell us what you're up to. 

Mark Thompson: Absolutely. Well first thanks for having me on it is always a pleasure to talk with you and I really appreciate you taking the time.  Yeah, so my name is Mark Thompson. I am a software engineer and I work in education right now.

And I'm also the founder of a small little company called Totally Strong Inc where our primary product is a fitness app called Totally Strong and if folks are interested in more about that. they can go to TotallyStrong.me where they can sign up for our beta awesome. 

Randy Burgess: So we've [00:01:00] talked before about this and I follow you on Twitter. What's your Twitter handle again? 

Mark Thompson: Yeah that's @marktechson. So that's @marktechson. 

Randy Burgess: Okay, so people follow you on Twitter. Um, then they know that you've been working on this project for a while. And you are using a technology that I'm not very familiar with called Flutter. So today I wanted to talk to you about Flutter. Why you chose it? Um, what like what is it? Why you chose it your experience. So let's go with what is Flutter 

Mark Thompson: Flutter itself is a library that's created by a team at Google for cross-platform mobile applications. 

Randy Burgess: So it's. Like react native in that sense, right? 

Mark Thompson: And that's it. But here's what flooded differentiates itself in a unique way flooded primarily does not use JavaScript at [00:02:00] all. It actually uses Dart which is another internal language use that Google but it's getting a little bit of speed now and interest because people are starting to jump on the Flutter bandwagon so to speak so it's getting more popular. 

Randy Burgess: So talk about Dart then before we go back into Flutter. Like what is Dart? Why? Why is Dart around? I mean JavaScript is kind of the hot language in both the you and I have taught JavaScript to a lot of our students. What like, what is Dart and why are people moving in that direction? 

Mark Thompson: Yeah, so many many moons ago Google created Dart as a way to write JavaScript in a more structured way. So the back in the Wild West of JavaScript Dart came out and he used to be able to transfer dark down to JavaScript to run in the browser and recently. What happened was I guess the team at Google decided that when they were working on this new library for cross-platform. Mobile apps that have really high performance that don't use [00:03:00] JavaScript they chose Dart to do that and there's some really interesting articles out there about the the reasons why dark works so well with Flutter. I'm not as deep into that side of it yet. But I you know, there are resources out there to find out more. 

Randy Burgess: So even before we talk about Flutter, how did you learn Dart and what like based on your learning curve of other tech you know, how what was the difficulty? How did you learn? What was it difficulty? Just how did you get into Dart in the first place?

Mark Thompson: Yeah, so weird art it really came around from the fact that when I saw Flutter in a Google I/O talk. I know I noticed that that was the language being used and I started to dive deeper into Dart and in terms of learning curve, it's a little bit interesting for me. So primarily over the last five years I've done five or six years. Actually I've done mostly JavaScript front-end web development and then in full stack still using JavaScript. On the Node side, but before that I was actually a Java [00:04:00] engineer for many many years of my career. And so I had a lot of experience with the idea of the statically typed language or you can you know define your types and use them in your code and you can get all kinds of help from the compiler, etc so dark is almost what I call a cross between Java and JavaScript and the fact that it does support some Dynamic typing where you don't have to know the type at the time you declare a variable but it also supports static typing which gives you a lot of power to have runtime checking and compile time checking excetera.

Randy Burgess: So then did you spend a lot of time learning Dart first before you dove into Flutter? No, I read a couple of articles on the Dart lang website. And I think just and that part of that comes from the fact that I have had so many years experience coding. I just said okay, you know what? Let me just read some of the ideas about what we need to do and how it should work and then I'll jump back in the Flutter because I really [00:05:00] wanted to stick to this deadline that I had set for myself with this project.

Randy Burgess: Okay, so so for an experienced developer you may not. To learn all the ins and outs of Dart just to get started with Flutter may help but it's not completely necessary. I mean frankly I did the same with rails. I learned rails framework before I learned much Ruby at all. Um, so going now into Flutter. Um, I remember reading your tweets. This is back in December and your tweets were always like a lot of them were about motivation of getting your project. But some of it had to do with Flutter and you were using a beta product so between you know December now, it's around April, 4 months later. Um, how what has been your experience with this beta level platform? And is it even in stable yet? I don't even know. 

[00:06:00] Mark Thompson: Yeah great great question. So when I started it hadn't even hit beta yet. It was still Alpha and my experience was a mixed bag. So I usually will tell anyone who came up to me and said hey Mark, I want to build an app really quickly. What should I use? The first question I'm going to ask is what do you know? What do you know and say let's find a tool that matches your skill set so you can be as productive as possible and I would have done that with Flutter but or with some other product, but I didn't want to I really want to push myself to say. Is there anything out there that I have not used that I could learn from that has. Really high up side if it works and that was my motivation behind Flutter because not only does it not use JavaScript. It also gives it a performance boost when you want to do things like high quality animations, and we all know that if you use the react native or NATO script or some other language that has a JavaScript Bridge. The common [00:07:00] animation side is really tough. And with the competitive landscape of apps I think static apps that just go from one page to the other. I think those don't have as much of a benefit when it comes to wowing users, especially when I'm thinking about my demographic people want to feel good with the tool they're using so I said, okay and I used that.

That once I learn how to do the animations, they'll be easy to do and they'll work out of the box cross-platform. 

Randy Burgess: Yep. So you're working on an alpha program and maybe this could be different but my experience of alpha is not much documentation. Not much examples online or tutorials online that you can use and not a whole lot of StackOverflow or debugging site-type of resources. So what did you have available when you started using Flutter versus what's available now, 

Mark Thompson: the Flutter website [00:08:00] itself was pretty well documented for a lot of the core components I found and I mean things like how to make a page itself, but then when you want to dive deeper, I found that that was that the real documentation from the Flutter team. I found that it was missing some parts to be honest with you. And that was challenging. There was really no StackOverflow that was valid because it was so Alpha that things changed since the time some of those questions were answered. One of the things that I had was there are two CodeLabs on Google which I didn't even know about this resource to be honest with you. There's a site uh by Google called CodeLabs and they walk you through a lot of their technologies and there's like a 60 to 70 minute, uh, interactive tutorial. So I use that a bunch of times. I rewatched some of the Google I/O presentations and I would pause the screen to see what was on their slides. So I can see at that time. What was what was working? Okay, I don't really know what to do and that was available to [00:09:00] me and the final thing that I use the most was the chat app Gitter. So a lot of the devs hang out on there and I would go and get her and I'd ask questions sometimes because they are like 100 of us asking at the same time a question might go unanswered.

Sometimes I post questions on StackOverflow but again, it might go on unanswered because people aren't really looking there or they don't have the skills kind of answer those questions yet. So kind of options. 

Randy Burgess: So what you're telling me and this is especially for any listeners that are new to code and learning you are a teacher, you teach people which in some ways makes you an expert in a lot of people's eyes on the code you're teaching which may not be true, especially sometimes I'm teaching things. I don't use all the time, tools that is, but you are describing what you are doing as an experienced developer to learn and you're watching videos and you're pausing in the [00:10:00] middle and you're going back and re-watching things and you're going you're talking straight to the dev community about that particular tech and I do the same but I sometimes I feel like our students often get like freeze and they don't reach out and do those things and I'm not sure why we do it versus what they do is experience. I think but you are doing that like you are basically admitting I don't know how to do this and I'm going to hammer this into my brain or talk to the people directly to get it done.

So I think that's just a it's a good lesson for anyone that's trying to learn a new technology that especially in an alpha situation, you may have to go the old fashioned route and just talk to people one way or the other to find out things. So go ahead and

Mark Thompson: I think with talkin to the people, I went on Twitter and I was investigating people like mentioning them in my tweets that were part of the [00:11:00] Flutter team and I was asked him questions literally directly on Twitter and that I get the feedback of well talk to this person via the Google message boards or then go back to like I said the Gitter community or go on StackOverflow and I would read a lot of code like that was another thing that I did because sometimes I just couldn't understand the example or the example will be missing. So I would go to the code and I view the raw source and see if I understand. Okay, what are these parameters supposed to be? How can I and then I use some list of tools from the code where you can click on a class and then you can see well this class extends this class and there's inheritance so I can start to trace the inheritance chain and start to see what I could find out that way.

Randy Burgess: So digging into the code is a pretty for I would say a lot of beginners that would be brand. Like they'll be going farther than they've ever gone before. How often did you do that with JavaScript 

Mark Thompson: almost never exactly never do that.

Randy Burgess: And [00:12:00] neither do I and I don't know if I ever will but yeah, I mean when you don't have a lot of resources. Sometimes it means like opening the hood looking at the engine directly kind of thing. Um, so you've launched you basically you have do you have it on multiple platforms or are you using just one now? 

Mark Thompson: I laucnhed them iOS and Android. 

Randy Burgess: Okay. How is that experience even with an alpha product, or an alpha framework work? How is pushing it to those two? Um platforms? How did that go 

Mark Thompson: one thing they do pretty well with Flutter is they have a checklist that you can walk through and say here's what you need to do to actually get it off your machine good into the different app stores. So that part was good, but getting it into the App Store was a nightmare for me to be honest with you.

Like I Was defeated one night because I just couldn't figure out what Google wanted and it wasn't really the Flutter problem. That was just my experience of working with the [00:13:00] Android Google Play store. Then when I went to I I couldn't figure out how to create all the different images that it needed for the different resolutions to the screen sizes?

Like that was a you know, you need like 15 different image sizes and I didn't realize that so when I do my build and then try to set up, you know, the different test groups all the things so that part was I hated that to be honest with you. 

Randy Burgess: So so I guess if you were to go back in time and you know tell yourself at that point, hey, you need to be prepared for certain things. How would someone go about answering those questions ahead of time? Where would they get the information I guess. 

Mark Thompson: Oh, that's a good question. So I did a lot of searching but I think the better experience is what I teach students to do now always tell students now is that if you have a new product project to be turned in one of the first things I want you to do is get a Hello World working and submit it up to [00:14:00] Heroku, like get it off immediately. Not the night before it's due not an hour before do it in the first couple of days because once you get the process working, you don't have to learn those hard lessons. That's what I would do again knowing how the App Store works and how you can upload multiple versions more multiple builds of your app. Yeah, you could do that. So I would do that early on like literally the first week. I will probably set up the I will set up the deployment to the App Store early on.

Randy Burgess: Okay, and you know what when you deploy you don't have to have it out there. It's not accepted until you turn the switch on so to speak. So if there's nothing wrong with deployment to the App Store because you it doesn't go to review until you tell it to correct 

Mark Thompson: exactly. 

Randy Burgess: Okay. Well, that's great advice. I again I would tell my students the same thing quit messing around with GitHub Pages like at the last minute push that up to the front and get a Hello World going. So that's great advice. 

So [00:15:00] now um, I don't know it's just still and this is Fluttering beta now or what's the stages that now. 

Mark Thompson: So Flutter in the second beta right now and they did a lot of updates around using the second version of Dart which allows you to do some really cool things. So when you're in your code and you have to type new or const everywhere it has really intelligent features where you can you can avoid typing that and it'll know to instantiate or use a a constant version of an object and that's pretty fantastic because you can cut down on the code, you know, the verboseness of the code a bit.

Randy Burgess: Yeah. Are there any tools that you're using with Flutter? Like what are you're using for your Editor to build to use Dart and Flutter? 

Mark Thompson: Yeah started off with Android Studio. Actually, that was my first tool but I was not familiar with that platform and that's a really huge tool. Just like when you have Eclipse right Eclipse was a huge Java, you know Behemoth and after a while, it just can't do hard to use the feet and starting to [00:16:00] begin.

So I started there and then I love Visual Studio code for front-end development and I'm really familiar with that. So I use Visual Studio Code editor. There's a Dart plugin that is community-based. Actually that is really excellent. And so between those two things I do that I get an iPhone and an Android phone that I use for my development sometimes use the emulators but a lot of times I want to test it on the phone itself. So that's not advice, uh, get the work done to get. To get the app on the phone as soon as you can because that's also is very easy on on Android. You just plug it in via USB button. You actually have to have a paid developer account just a test on the phone. So getting that set up again. That's one of the things I would say get that done early.

Randy Burgess: Yep, that makes perfect sense. So I guess where are things going to the Flutter? Like what? Well, okay. Let me actually rewind that the next question is you made the choice of Flutter because you wanted to have better [00:17:00] animations on that was a one made or stressed on. How are they? How did that work with Flutter? Did you get the experience you were looking for there?

Mark Thompson: So I have not built into animations yet. And I keep in the back of my mind thinking of something that I'm going to do and maybe a second release, but the other thing I liked about Flutter was how declarative the you eyes were like and that could you could really read it once you look at the code you can actually read predict with some certainty what's going to happen because everything's a widget so you can say new widget or start new center, you know, and you know that whatever is a child of that widget is going to be Centered for a new column new row and you put those types of that type of language that's have a domain language into your code.It really helps it to be easy to to create.

Randy Burgess: Anything, any tools you use for testing that might be unique or that work with Flutter on that part

Mark Thompson: for testing, they there's [00:18:00] actually a unit test framework that's already kind of built in that ships with the with the scaffolding part of the app. So when you scaffold a new app, it says if your test first so you can also do that and that's what I use right now.

Randy Burgess: Oh cool. So what do you do anything for acceptance testing like integration testing? Yeah for acceptance testing right now I ship out a so when I ship it I have someone who's actually going through and testing we don't have anything automated have someone who volunteer to just be you know, like a user UAT tester for me before I send it out to my entire Alpha Testing group.

I have one person who gets to build first and then he goes through and doesn't testing 

Randy Burgess: awesome. Okay, um that I think that covers most of it. Um, what are you looking forward to that Flutter says is on the way. 

Mark Thompson: I'm actually looking forward to just more completeness. To be honest with you. There are some parts of the app that has all the framework that I think still needs some [00:19:00] some Polish and when I started my process I get my stuff like this 30-day window to do the entire thing.

And the reason I did that was because I just wanted to see if I could ship. And I know for a lot of developers if you talk to 9 or 10 developers will all say I had the idea for XYZ app but I never got around to finishing and so I said okay rain or shine, you know success or failure in 30 days I'm going to ship this app.

And so I did not have a lot of time to wait for a new features to come. I need a lot of things like right now and that process was was really interesting because it really pushed me to practice a lot of what I preach the students things like the what my philosophy about design or software development is make it work make it right make it fast.

And so a lot of things just make it work then make it right. So go back and refactor make things better than make it fast, you know do optimizations after I've already identified that they must have problem that needs to be optimized. So a lot of that got put into the [00:20:00] forefront when I was doing this really 30 day sprint.

Randy Burgess: Cool, um last question before we call it a day. How what's the community like you talked about? You've been on Google Groups. You talked on Twitter? What's how many people are you able to work with? Um, Not connected not directly. But how big is that community related to compare to other platforms you've worked on?

Mark Thompson: You know, I think the community is much smaller than other platforms because I think you find tons and tons of JavaScript help. But what I did notice is that one, the community is growing. The second thing is the community's really responsive. They're quite a few people who followed me on Twitter after they find out I was trying to do this 30 days Sprint with uh, my products.

And people who are really influential in the community and they'd offer not only more support but like code support people say how's this going? Look at this repository this may help you and lot of people, uh one guy, Seth Ladd, [00:21:00] who was one of the pro... Think he's one of the program managers for Flutter at Google he would from time to time just send me like mentioned me on Twitter and say hey, how's it going?

You know, we're rooting for you and like I think that's amazing that you know, people would do stuff like that because it kept me going when I wanted to quit. Which is pretty common when anyone's developing something that's challenging. 

Randy Burgess: Oh, no doubt. So they are that you're not going to get that from a whole like a lot of communities just so many people best pretty awesome. 

So actually I've got another question for get my last question thing if I decided tomorrow that I wanted to get into Flutter, um and build something what would you recommend as the first step? 

Mark Thompson: I'd do the Google code lab where they show you how to make the chat app because I won't cover so many different parts of the of the platform and get you familiar with how to make just what we call it, the material [00:22:00] app on the Google side, or you can where you can do with a custom UI if you want to write so you have those options and so I say go with that with the codelab walk through it do all the steps type it yourself and then I think it'll set you up where again the documentation is great and it's constantly improving so you can go back later on and find out more information and you start to ask a question like how do I make a button that looks like this and you start to look through the repository of content and all the plugins that are growing and so you find what you need overtime. 

Randy Burgess: Awesome. Well, thank you very much for being on the show educating us about Flutter and the all the support around it and the new community.

Congrats on launching the app again. Um, we will put all the links TotallyStrong.me is where people can look for your app and we will put links to all the other things you refer to in the show notes as well. But uh, we'll call it a day and thanks for being on [00:23:00] Mark. 

Mark Thompson: I really appreciate your time. And as always it's been a pleasure. Thank you. 

Megan Schemmel: Thanks for listening to This Old App.

Notes and previous episodes can be found on our website at https://www.thisoldapp.online. 

Reviews on Apple and iTunes are always appreciated and help promote the show 

For questions, comments, or things you would like to hear on future shows, please email us at hello@thisoldapp.online

Show music is Guns Blazing by Fab Claxton, music licensed by pond5.

Voiceover work by MeganVoices.com.

You'll hear from us soon!

Join our newsletter

Got it. You're on the list!

This Old App is produced by the folks at CTO Think.

© 2018 This Old App. All Rights Reserved.