Published: Oct. 30, 2018, 10 a.m.
Panel:\xa0
- Aimee Knight
- Charles Max Wood
- Joe Eames
- AJ O\u2019Neil
- Chris Ferdinandi\xa0
Special Guests:
Charles Lowell (New Mexico) &
Taras Mankovski (Toronto)In this episode, the panel talks with two special guests
Charles and
Taras. Charles Lowell is a principle engineer at
Frontside, and he loves to code. Taras works with Charles and joined
Frontside, because of Charles\u2019 love for coding. There are great personalities at
Frontside, which are quite diverse. Check out this episode to hear about
microstates, microstates with react,
Redux, and much more!Show Topics:1:20 \u2013 Chuck: Let\u2019s talk about microstates \u2013 what is that?1:32 \u2013 Guest: My mind is focused on the how and not the what. I will zoom my mind out and let\u2019s talk about the purposes of microstates. It means a few things. 1.) It\u2019s going to work no matter what framework you are using. 2.) You shouldn\u2019t have to be constantly reinventing the wheel. React Roundup \u2013 I talked about it there at this conference.\xa0Finally, it really needs to feel JavaScript. We didn\u2019t want you to feel like you weren\u2019t using JavaScript. It uses computer properties off of those models. It doesn\u2019t feel like there is anything special that you are doing. There are just a few simple rules. You can\u2019t mutate the state in place. If you work with JavaScript you can use it very easily. Is that a high-level view?7:13 \u2013 Panel: There are a lot of pieces. If I spoke on a few specific things I would say that it enables programming with state machines.7:42 \u2013 Panel: We wanted it to fell like JavaScript \u2013 that\u2019s what I heard.7:49 \u2013 Aimee: I heard that, too.7:59 \u2013 Guest.8:15 \u2013 Aimee:
Redux feels like JavaScript to me.8:25 \u2013 Guest: It\u2019s actually \u2013 a tool \u2013 that it feels natural so it\u2019s not contrived. It\u2019s all JavaScript.8:49 \u2013 Panel.9:28 \u2013 Guest: Idiomatic Ember for example. Idiomatic in the sense that it gives you object for you to work with, which are simple objects.10:12 \u2013 Guest: You have your reducers and your...we could do those things but ultimately it\u2019s powerful \u2013 and not action names \u2013 we use method names; the name of the method.11:20 \u2013 Panel: I was digging through docs, and it feels like NORMAL JavaScript. It doesn\u2019t seem like it\u2019s tied to a certain framework or library platform?11:45 \u2013 Guest: Yes, we felt a lot of time designing the interfaces the API and the implementation. We wanted it to feel natural but a tool that people reach for.(Guest continues to talk about WHY they created microstates.)Guest: We wanted to scale very well what you need when your needs to change.13:39 \u2013 Chuck: I have a lot of friends who get into React and then they put in Redux then they realize they have to do a lot of work \u2013 and that makes sense to do less is more.14:17 \u2013 Guest: To define these microstates and build them up incrementally...building smaller microstates out of larger ones.Guest continued: Will we be able to people can distribute React components a sweet array of components ready for me to use \u2013 would I be able to do the same for a small piece of state? We call them state machines, but ultimately we have some state that is driving it. Would we be able to distribute and share?16:15 \u2013 Panel: I understand that this is tiny \u2013 but why wouldn\u2019t I just use the native features in specific the immutability component to it?16:42 \u2013 Guest: I\u2019m glad you asked that question. We wanted to answer the question...Guest: With microstates you can have strict control and it gives you the benefit of doing sophisticated things very easily.18:33 \u2013 Guest: You mentioned immutability that\u2019s good that you did. It\u2019s important to capture \u2013 and capturing the naturalness of JavaScript. It\u2019s easy to build complex structures \u2013 and there is an appeal to that. We are building these graphs and these building up these trees. You brought up immutability \u2013 why through it away b/c it\u2019s the essence of being a developer. If you have 3-4-5 levels of nesting you have to de-structure \u2013 get to the piece of data \u2013 change it \u2013 and in your state transition 80% of your code is navigating to the change and only 20% to actually make the change. You don\u2019t have to make that tradeoff.21:25 \u2013 Aimee: The one thing I like about the immutability b/c of the way you test it.21:45 \u2013 Guest: There a few things you can test.\xa023:01 \u2013 Aimee: You did a good job of explaining it.23:15 \u2013 Guest: It makes the things usually hard \uf0e0 easy! With immutability you can loose control, and if that happens you can get so confused. You don\u2019t have a way to have a way to navigate to clarity. That\u2019s what this does is make it less confusing. It gives you order and structure. It gives you a very clear path to do things you need to do. If there is a property on your object, and if there is a way to change it...25:29 \u2013 Guest: The only constant is change no matter what framework you are working on.24:46 \u2013 Chuck: We are talking about the benefits and philosophy. What if I have an app \u2013 and I realize I need state management \u2013 how do I put microstates into my app? It\u2019s using Angular or React \u2013 how do I get my data into microstates?26:35 \u2013 Guest: I can tell you what the integration looks like for any framework. You take a type and you passed that type and some value to the create function so what you get is a microstate.(The Guest continues diving into his answer.)28:18 \u2013 Guest: That story is very similar to Redux, basically an event emitter. The state changes on the store.Maybe this is a good time to talk about the stability benefits and the lazy benefits because microstates is both of those things.Stability \u2013 if I invoke a transition and the result is unchanged \u2013 same microstate \u2013 it doesn\u2019t emit an event. It recognizes it internally. It will recognize that it\u2019s the same item. Using that in Ember or Redux you\u2019d have to be doing thousands of actions and doing all that computation, but stability at that level.Also, stability in the sense of a tree. If I change one object then that changes it won\u2019t change an element that it doesn\u2019t need to change.31:33 \u2013 Advertisement: Sentry.io32:29 \u2013 Guest: I want to go back to your question, Chuck. Did we answer it?32:40 \u2013 Chuck: Kind of.32:50 \u2013 Guest.32:59 \u2013 Guest: In Angular for example you can essentially turn a microstate...33:51 \u2013 Guest: You could implement a connect, too. Because the primitive is small \u2013 there is no limit.34:18 \u2013 Chuck summarizes their answers into his own words.34:42 \u2013 Guest: If you were using a vanilla React component \u2013 this dot \u2013 I will bind this. You bind all of these features and then you pass them into your template. You can take it as a property...those are those handlers. They will perform the transition, update and what needs to be updated will happen.35:55 \u2013 Chuck: Data and transitions are 2 separate things but you melded them together to feel like 1 thing. This way it keeps clean and fast.36:16 \u2013 Guest: Every framework helps you in each way.Microstates let\u2019s you do a few things: the quality of your data all in one place and you can share.38:12 \u2013 Guest: He made and integrated Microstates with Redux tools.38:28 \u2013 Guest talks about paths, microstates to trees.39:22 \u2013 Chuck.39:25 \u2013 Panel: When I think about state machines I have been half listening / half going through the docs. When I think of state machines I think about discreet operations like a literal machine. Like a robot of many steps it can step through. We have been talking about frontend frameworks like React - is this applicable to the more traditional systems like mechanical control or is it geared towards Vue layered applications?40:23 \u2013 Guest: Absolutely. We have
BIG TEST and it has a Vue component.41:15 \u2013 Guest: when you create a microstate from a type you are creating an object that you can work with.42:11 \u2013 Guest: Joe, I know you have experience with Angular I would love to get your insight.42:33 \u2013 Joe: I feel like I have less experience with RX.js. A lot of what we are talking about and I am a traditionalist, and I would like you to introduce you guys to this topic. From my perspective, where would someone start if they haven\u2019t been doing Flux pattern and I hear this podcast. I think this is a great solution \u2013 where do I get started? The official documents? Or is it the right solution to that person?43:50 \u2013 Guest: Draw out the state machine that you want to represent in your Vue. These are the states that this can be in and this is the data that is required to get from one thing to the other. It\u2019s a rope process. The arrow corresponds to the method, and...44:49 \u2013 Panel: It reminds me back in the day of rational rows.44:56 \u2013 Guest: My first job we were using rational rows.45:22 \u2013 Panelist: Think through the state transitions \u2013 interesting that you are saying that. What about that I am in the middle \u2013 do you stop and think through it or no?46:06 \u2013 Guest: I think it\u2019s a Trojan horse in some ways. I think w
Become a supporter of this podcast:
https://www.spreaker.com/podcast/javascript-jabber--6102064/support.
