Keep it Simple, State: Architecture for Flutter Apps (DartConf 2018)

Рет қаралды 186,129

Күн бұрын

Keep it Simple, State: Architecture for Flutter Apps
Let's go on a journey! In this video, we'll start with a basic Counter Widget, building up to a complex app with shared state across multiple screens. Along the way, we'll explore common patterns for managing application state and discover the building blocks provided by Dart and Flutter for this purpose. Then, we will learn how to put these blocks together to form a reactive application that’s easy to test and reason about. As a reward for our journey, we will be granted the powers of time travel, allowing us to move back and forth throughout the States of our application! This talk is perfect for folks who have used Flutter a bit and are interested figuring out the best ways to structure their applications.
About Brian:
Brian Egan is a Montana boy living in Berlin, Germany. He previously worked on popular web and Android applications for SoundCloud and Zappos. He now spends his time writing open source Dart code, developing his business, and scuba diving as often as possible. He is the author of and contributor to several Dart libraries, including RxDart, redux, flutter_redux, and flutter_architecture_samples. He’s currently exploring several different architectural patterns with Flutter, and hopes you will join him for the ride!
Watch the rest of the Dart Conference 2018 session videos here: goo.gl/4bwhE5
Subscribe to the Google Developers channel: goo.gl/mQyv5L

Пікірлер: 93

@pspensieri 6 жыл бұрын

Currently one of the best talks on Flutter, well done

@papimatlhakwane7880 2 жыл бұрын

Cnfkfkkk uriri

@relativityboy 5 жыл бұрын

Brian's presentation is awesome, his code is awesome. He seems like a brilliant guy. Very encouraged by his chronic misuse of the word ancestor. (shows his mortality) For those wondering: Ancestor & parent are overlapping concepts. They are things like root classes, objects that contain other objects, etc. If in a class definition you say "inherits from" or "extends" then it's a CHILD. The thing on the right hand side of those two expressions is the PARENT/ANCESTOR. If you instantiate a thing inside another thing, the instantiated thing is the CHILD. The instantiator is the PARENT/ANCESTOR. 2 levels up and higher (^Grand-parent) you're looking at ANCESTOR. If you're talking about 2 levels and lower (Grand-child) you're looking at PROGENY. I'm pretty sure there's something about the word PROGENY that's confused the issue. People don't seem to feel comfortable using it. But we should anyway. X -> Y extends/contained by 'X' -> Z extends/contained by 'Y'. ANCESTOR->PARENT -> (CURRENT CONTEXT) -> CHILD->PROGENY

@shahidbangash4778 4 жыл бұрын

Thanks for explaining State Architecture. It helped me a lot to understand how flutter works.

@abdouseck4894 4 жыл бұрын

Awesome, thank you. Helped me to choose which architecture and state management I should chose from the hundreds that are available

@yoosufahmadh3945 4 жыл бұрын

Thank you. Best video I've seen related ro flutter so far

@aymenmt1 2 жыл бұрын

i'm new to flutter , totally recommend this after learning the UI concepts .

@uziao 6 жыл бұрын

great! thank you! :) greetings from Brasil Ormando (Colatina - ES)

@FlutterExplained 4 жыл бұрын

Amazing Talk, thanks for sharing!

@tobiaswimmerprogramminglif2378 4 жыл бұрын

Very well explained! Great talk!

@andrescamilorodriguezespit6317 4 жыл бұрын

Awesome video! Thank you!

@AJ-dy2bt 3 жыл бұрын

Brilliant lecture!

@mmusa6486 5 жыл бұрын

Great this is an awesome explanation @Brian

@SergioArroyoSailing 3 жыл бұрын

fantastic explanation of Redux from the man himself :)

@jagdishshetty4782 6 жыл бұрын

Good presentation !!!

@Miiite 5 жыл бұрын

Excellent talk

@amugofjava 6 жыл бұрын

Wow - that was a lot to take in. I may need to watch it again. Good talk.

@FreeMusic54 5 жыл бұрын

very very helpful speak. thanks.

@tomglod9376 4 жыл бұрын

i'm so happy i watched this...great talk!!! very useful. I'm on day one of writing my first flutter app.

@JacklapottTv 4 жыл бұрын

Any scary things ahead ? Iam on day one lmao

@tomglod9376 4 жыл бұрын

@@JacklapottTv Lots of scary things.... to be honest...the learning curve really sucks. I finally got over the hump when I found a way to have global variables and not have to pass information from widget to widget. also ...becoming clear on the syntax of classes(functions) and their properties. But hint number one is not to just watch tutorials.....type the code yourself instead of copy and paste. good luck brother.

@1b0o0 4 жыл бұрын

Tom Glod id say you can copy code as long as you understand what’s happening under the hood at least from a conceptual standpoint.

@tomglod9376 4 жыл бұрын

@@1b0o0 of course you can, but typing it out speeds up your brain's ability to retain it and recall. "recalling" is a way of learning. And if you copy and paste you aren't doing that.

@ibrahimsharif1853 4 жыл бұрын

Wow, nice Talk with a lot of good information and content :)

@jilonasigbee2418 Жыл бұрын

I'm actually a pure beginner in the coding world and I've been trying to see how to even start a career to upgrade my skills but I don't even know what to learn or even how. This vid was soo understandable to me even though I've watched so many begginer's vids. buh does anyone have advice f or me

@VemueZ 6 жыл бұрын

great explanation

@user-mm6qs4oz9g 4 жыл бұрын

Thanks,I learn more about ctrl flutter state .

@MrVipulLal Жыл бұрын

Redux is nice, but Provider pretty much does everything. Nice talk thought

@icazevedo 6 жыл бұрын

He made this dense talk feel so light! Definitely gonna give it a try

@miklosnemeth8566 5 жыл бұрын

I guess in the meantime you had a chance to review the brilliant samples on fluttersamples.com

@jibraniqbal7830 5 жыл бұрын

I hope the bloc pattern also had a talk like this.

@philosophia5577 Жыл бұрын

Looking for more DartConfs in upcoming year..

@polypus74 5 жыл бұрын

apropos: "layering", speaker keeps saying: "we heard a little bit about this yesterday". anybody know which talk he is referring to?

@haos4574 4 жыл бұрын

This sounds very much like the Bloc library, but looks simpler in code.

@uwepuneet 6 жыл бұрын

Coming from React Space

@nkl_sl 2 жыл бұрын

Thanks!

@MatheusGambati 6 жыл бұрын

Worked with redux writing big react apps, such a pain wrting boilerplate. I wish that mobx existed on dart.

@theGoldyMan 4 жыл бұрын

It does exist

@KashifMinhaj 6 жыл бұрын

Great! Been waiting for this. Will surely give Redux a try. Btw, has anyone here worked with Sqlite in Flutter? Wanted to know some best practices related to maintaining tables & helper classes.

@Mohith7548 6 жыл бұрын

Move to Cloud Database, Firebase

@vibovitold 5 жыл бұрын

@@Mohith7548 this is quite stupid advice honestly. These two serve different purposes. Why give up local persistance for the cloud. It means the app wouldn't be able to save (or retrieve) user data when there's no internet reception - eg. on the subway - not to mention increased battery drain and latency. Even if the data is to be backed up in the cloud, this is not a reason not to store it locally. You keep a local copy then sync it with the cloud.

@saoudiwalid 6 жыл бұрын

The only issue I can see with this architecture is the fact that State must be immutable, so for any slight change to the state, all the state will need to be recreated. This includes nested objects !!! A more advanced pattern is used by Microsoft in the MVVM Patter (a special implementation of MVP) where the state (View Model) just need to implement INotifyPropertyChanged (or use if dependency property) to make the view updates only what has changed and no need to recreate the whole state every time. What do you think? Is there any better way I might have missed to dual with a more real life type of applications (complex state with nested objects, list of items, items with different details, actions, etc..)?

@theGoldyMan 5 жыл бұрын

MVVM died with knockout.js

@lotierm 5 жыл бұрын

Recreating state is no a bad thing. Immutable is good

@Dorumin 5 жыл бұрын

Immutable chokes the garbage collector, I get that flutter is lightning fast and you shouldn't optimize early on but I still prefer a more OOP approach where one class has certain state and methods to modify it in the same place, with listeners that can update on those changes

@vibovitold 5 жыл бұрын

@@theGoldyMan MVVM is alive and kicking on Android, in the form of Data Binding library

@vibovitold 5 жыл бұрын

If nested objects are immutable, too (as they should be), then after recreating the parent object they will be passed by reference. This shouldn't have much of a performance impact.

@politicallynotcorrect2968 4 жыл бұрын

Should build a vuex like store which will also multiple and inherited modules .

@admin202 5 жыл бұрын

As I know reducers are pure functions without side effects. This means we can't call external services from reducers. Is there any alternative similar to that of Effects in ngRx (Angular )

@felixssimoes 5 жыл бұрын

The best way to handle side effects is using middleware functions

@patrickkdev Жыл бұрын

I wish we could have the option to not use curly braces in dart. That would improve code readabilty tremendously

@imranbajwa5937 5 жыл бұрын

nice

@longbka 5 жыл бұрын

I should combo redux and BLoC

@junyuzhan6555 6 жыл бұрын

In the end, you will need a Relay for Flutter.

@warcraft3reforgedisannounc428 5 жыл бұрын

Wanted to program my first app with Flutter. Read: "Keep it Simple [...]". I didn't understand anything.

@rbp365 5 жыл бұрын

:D software engineering is a lot about experience. In order to understand really good, innovative architecture which solves a lot of problems during development, you have to first experience those problems by failing a lot as a developer. There is no way around it at this moment. Software engineering is a 50 year old industry and science, compared to math which is thousands of years old. There is no fool-proof way to just explain everything these people do in a 60 minute presentation, you have to experience it in order to understand it

@francisgeorge7639 4 жыл бұрын

Google keeps throwing engineers at us instead of people who know how to teach. The docs are the same.

@ibrahimragab2299 6 жыл бұрын

Well talk, but why not open Android Studio and show us how to do this?

@robertdobert4714 5 жыл бұрын

I'm not sure how these are set up but it might just be a time constraint.

@jordancech9918 5 жыл бұрын

11:15 did you mean pass down to all of its children?

@znelson32 5 жыл бұрын

Right?

@rajr9598 4 жыл бұрын

You forgot Facebook is using redux and the inventor of Redux Dan is a React developer.

@miklosnemeth8566 5 жыл бұрын

This is an excellent presentation. Still, I think anything that is more complex than the Vanilla (see fluttersamples.com) is overkill for mobile applications. I am in the mobile business application development arena for 7 years now, and I've never seen an application where the complexity of UI is the challenge. Redux is anything but simple. If Flutter were used for really complex desktop applications, I'd say OK, but for mobile apps, no way it is required. To me the Vanilla solution is the real gem from fluttersamples.com; Redux is like walrus; I come to the zoo to admire them, but I wouldn't take one home.

@vibovitold 5 жыл бұрын

It's not about complexity of the UI as such, but state management in general. This pattern comes at a cost of boilerplate, but it also makes troubleshooting easier, incl. a form of time travelling debugging. The benefits are well laid out in Hannes Dorfmann's MVI series - hannesdorfmann.com/android/mosby3-mvi-1 and the subsequent parts. It's about native Android development / Kotlin, but it discusses the pattern conceptually. The nomenclature may differ from Redux here and there, but it boils down to prety much the same thing.

@giorgospapadakis7613 6 жыл бұрын

2018 and still a new framework which nobody knows what a design pattern is which forces you to write clean maintainable code.

@lipinski2452 6 жыл бұрын

Yeah lol, it's quite annoying coding things like this

@sdshsjg 5 жыл бұрын

@Dorumin 5 жыл бұрын

That's a weird sentence but yeah, most of these frameworks are very freeform with what approach you can take with state management, I guess it's just a lot of trial and error and learning why one is better than the other for your usecases rather than following one pattern because it's the only one there is

@amalraj9437 3 жыл бұрын

What about flutter clean architecture with rxdart Anyone please reply me

@ismannyb8148 4 жыл бұрын

Multiprovider baby

@quangvuong4089 6 жыл бұрын

Wow, Redux in Flutter is the same as React Native

@kgsachinthau 5 жыл бұрын

programming basis

@humanontheinternet6510 5 жыл бұрын

so you who created redux

@mhbdev 4 жыл бұрын

It would be so much better with more real worlds examples 👍🏻

@rankingcompare336 5 жыл бұрын

Can I check out my APK source file before publishing google play store, it's safe for my user or not?

@RowanGontier 4 жыл бұрын

If the store provider is found from a child widget, why does this not violate the principle of reusability, in sense that if the child widget was used in another app, there probably will not be a provider with the same name?

@fuaditrockz 5 жыл бұрын

I wanna learn Flutter to avoid Redux, and finnaly I found Redux again... Sh*t!

@Hiro-yn4vt 4 жыл бұрын

@JonesDTaylor 4 жыл бұрын

Now you can use Provider for state management.

@GiriJeedigunta 4 жыл бұрын

Checkout MobX

@dennismwebia1831 4 жыл бұрын

haha

@RamziHemadou 4 жыл бұрын

Redux is very simple I don't know why people fear of it?.

@canerdemircigm 4 жыл бұрын

State Management is: To bring water from 1000 rivers.

@muhamedabdalla2301 4 жыл бұрын

I think that trying to simple a lot, make it so messy and bad.

@tmst2199 5 жыл бұрын

12:17: You touch on duplication between the State and Widget classes and then just skip it to discuss testing. I assume it remains a problem with your architecture. The Flutter testing and documentation is extensive and professional. But is it a case of putting lipstick on a pig?