JavaScript Jabber30 Loka 2018

JSJ 337: Microstates.js – Composable State Primitives for JavaScript with Charles Lowell & Taras Mankovski

Panel:

Aimee Knight
Charles Max Wood
Joe Eames
AJ O’Neil
Chris Ferdinandi

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’ 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 – Chuck: Let’s talk about microstates – what is that?1:32 – Guest: My mind is focused on the how and not the what. I will zoom my mind out and let’s talk about the purposes of microstates. It means a few things. 1.) It’s going to work no matter what framework you are using. 2.) You shouldn’t have to be constantly reinventing the wheel. React Roundup – I talked about it there at this conference. Finally, it really needs to feel JavaScript. We didn’t want you to feel like you weren’t using JavaScript. It uses computer properties off of those models. It doesn’t feel like there is anything special that you are doing. There are just a few simple rules. You can’t mutate the state in place. If you work with JavaScript you can use it very easily. Is that a high-level view?7:13 – 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 – Panel: We wanted it to fell like JavaScript – that’s what I heard.7:49 – Aimee: I heard that, too.7:59 – Guest.8:15 – Aimee: Redux feels like JavaScript to me.8:25 – Guest: It’s actually – a tool – that it feels natural so it’s not contrived. It’s all JavaScript.8:49 – Panel.9:28 – 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 – Guest: You have your reducers and your...we could do those things but ultimately it’s powerful – and not action names – we use method names; the name of the method.11:20 – Panel: I was digging through docs, and it feels like NORMAL JavaScript. It doesn’t seem like it’s tied to a certain framework or library platform?11:45 – 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 – 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 – and that makes sense to do less is more.14:17 – 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 – 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 – Panel: I understand that this is tiny – but why wouldn’t I just use the native features in specific the immutability component to it?16:42 – Guest: I’m 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 – Guest: You mentioned immutability that’s good that you did. It’s important to capture – and capturing the naturalness of JavaScript. It’s easy to build complex structures – and there is an appeal to that. We are building these graphs and these building up these trees. You brought up immutability – why through it away b/c it’s the essence of being a developer. If you have 3-4-5 levels of nesting you have to de-structure – get to the piece of data – change it – and in your state transition 80% of your code is navigating to the change and only 20% to actually make the change. You don’t have to make that tradeoff.21:25 – Aimee: The one thing I like about the immutability b/c of the way you test it.21:45 – Guest: There a few things you can test. 23:01 – Aimee: You did a good job of explaining it.23:15 – Guest: It makes the things usually hard  easy! With immutability you can loose control, and if that happens you can get so confused. You don’t have a way to have a way to navigate to clarity. That’s 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 – Guest: The only constant is change no matter what framework you are working on.24:46 – Chuck: We are talking about the benefits and philosophy. What if I have an app – and I realize I need state management – how do I put microstates into my app? It’s using Angular or React – how do I get my data into microstates?26:35 – 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 – 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 – if I invoke a transition and the result is unchanged – same microstate – it doesn’t emit an event. It recognizes it internally. It will recognize that it’s the same item. Using that in Ember or Redux you’d 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’t change an element that it doesn’t need to change.31:33 – Advertisement: Sentry.io32:29 – Guest: I want to go back to your question, Chuck. Did we answer it?32:40 – Chuck: Kind of.32:50 – Guest.32:59 – Guest: In Angular for example you can essentially turn a microstate...33:51 – Guest: You could implement a connect, too. Because the primitive is small – there is no limit.34:18 – Chuck summarizes their answers into his own words.34:42 – Guest: If you were using a vanilla React component – this dot – 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 – 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 – Guest: Every framework helps you in each way.Microstates let’s you do a few things: the quality of your data all in one place and you can share.38:12 – Guest: He made and integrated Microstates with Redux tools.38:28 – Guest talks about paths, microstates to trees.39:22 – Chuck.39:25 – 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 – Guest: Absolutely. We have BIG TEST and it has a Vue component.41:15 – Guest: when you create a microstate from a type you are creating an object that you can work with.42:11 – Guest: Joe, I know you have experience with Angular I would love to get your insight.42:33 – 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’t been doing Flux pattern and I hear this podcast. I think this is a great solution – where do I get started? The official documents? Or is it the right solution to that person?43:50 – 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’s a rope process. The arrow corresponds to the method, and...44:49 – Panel: It reminds me back in the day of rational rows.44:56 – Guest: My first job we were using rational rows.45:22 – Panelist: Think through the state transitions – interesting that you are saying that. What about that I am in the middle – do you stop and think through it or no?46:06 – Guest: I think it’s a Trojan horse in some ways. I think w

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

Kokeile Premiumia

Nauti 14 päivää ilmaiseksi

Tilaa Premium

Jaksot(734)

Svelte 5: Compiler, Signals, and Web App Performance - JSJ 627

Rich Harris joins this week's episode. They dive deep into the world of web application performance, signals, and the capabilities of Svelte 5. Join them as they explore the innovative features of Svelte 5, its compiler capabilities, and its potential impact on application building. From discussing the fastest mainstream framework to drawing parallels with traditional compiler optimization modes, they leave no stone unturned in dissecting the advancements in Svelte 5. Stay tuned as they also explore topics like React server components, the controversy around embedding SQL in React components, and much more. SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocialsGitHub: Rich HarrisPicksCharles - Sushi Go Party! | Board GameDan - "Rethinking reactivity" talk by Rich Harris from 2019Dan - I Care a Lot Dan - Saga of the Pliocene ExileBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Huhti 20241h 21min

Embracing Web Standards with Owen Buckley - JSJ 626

Delve into a thought-provoking discussion with Owen Buckley, a seasoned web developer with 20 years of experience. Owen introduces Greenwood, a project focused on leveraging web standards and simplifying web development. Throughout the episode, They explore Greenwood's evolution, capabilities, and unique approach to application scaffolding and local development. From the emphasis on HTML and web components to Greenwood's seamless integration with HTMX, they uncover the project's vision to provide an onramp close to web standards. Join them as they navigate through the world of web development and gain valuable insights from Owen's expertise and passion for web standards and components.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Owen BuckleyPicksCharles - The White CastleOwen - Hypermedia SystemsBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Huhti 20241h 9min

Simplifying Development with Deno - JSJ 625

Kevin Whinnery is the Head of Developer Relations at Deno. They dive deep into the world of Deno, exploring its evolution, functionality, and differences from its predecessor, Node.js. They discuss the challenges Deno has faced in establishing compatibility with the NPM ecosystem, its out-of-the-box TypeScript support, built-in tools, and its use in edge computing. With insights into Deno's standard library, TypeScript implementation, and plans for improving compatibility with popular meta frameworks, this episode is a must-listen for developers looking to stay ahead in the ever-evolving world of JavaScript. Get ready to uncover the latest developments in Deno and its impact on the development landscape!SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Kevin WhinneryGitHub: kwhinneryTwitter: @kevinwhinneryPicksCharles - ApiaryCharles - Puppeteer | PuppeteerDan - The GentlemanKevin - House of NinjasSteve - New data shows: Tabs more popular than Spaces. But Spaces users are happier.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

29 Maalis 20241h 14min

Navigating Web Development Challenges - JSJ 624

Shay Davidson is a full-stack web, mobile, and game developer. He is currently leading the front end at Lemonade. The discussion revolves around the use of Supabase as a free database and its comparisons to Firebase for developer experience. They dive into building applications with Next.js and React 18, utilizing React Server Components to interact with the Supabase API. They share their experiences, frustrations, and insights regarding caching mechanisms, server actions, and the challenges of adapting to new technologies in the React ecosystem. The episode also delves into the React server components controversy, the importance of learning and experimenting with new technologies, the use of AI for creative purposes, and the potential dangers of deep fakes.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Shay DavidsonPicksAJ - Dune: Part Two (2024)Dan - Arnold Schwarzenegger Sings About Rainbows (AI)Dan - Finance worker pays out $25 million after video call with deepfake CFOShai - Rendezvous with RamaSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

18 Maalis 20241h 16min

Unveiling Chrome DevTools: Network Monitoring, Cache Debugging, and Beyond - JSJ 623

Michael Hablich is the product lead for Chrome DevTools and Puppeteer. They delve into a comprehensive discussion on various features and uses of the network tab for monitoring API calls, performance debugging with cache, simulating network conditions, and visual understanding of page loading. They cover topics such as debugging, PHP, and the history of dev tools. Michael Hablich shares insights into the development and evolution of Chrome DevTools, highlighting its migration to TypeScript and the team behind it.Tune in to uncover the challenges and advancements in debugging tools, the potential integration of AI, and a range of powerful features within Chrome DevTools.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Michael HablichPicksDan - Killing EveMichael - Spirit IslandsSteve - Victory GripsSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

12 Maalis 20241h 22min

The Alphabet Soup of Performance Measurements - JSJ 622

Dan Shappir takes the lead in explaining all of the acronyms and metrics for measuring the performance of your web applications. He leads a discussion through the ins and outs of monitoring performance and then how to improve and check up on how your website is doing.SponsorsChuck's Resume TemplateDeveloper Book ClubBecome a Top 1% Dev with a Top End Devs MembershipLinks<picture>: The Picture element - HTML: Hypertext Markup Language | MDNPicksAJ - The Way of KingsAJ - Taco BellAimee - web.devAimee - @DanShappirDan - New accessibility feature in Chrome Dev Tools: simulate vision deficiencies, including blurred vision & various types of color blindness. In Canary at the bottom of the Rendering tab.Dan - Better Call SaulSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

27 Helmi 20241h 19min

Simplifying Full-Stack Dev with the "Boring JavaScript Stack" and Sails Framework - JSJ 621

Kelvin Omereshone is the lead maintainer of Sales.js. In this episode, they uncover the complexities of the "Boring JavaScript Stack" and its implications for building full-stack web applications. They engage in in-depth discussions on MVC conventions, data modeling, front-end and back-end integration challenges, and the role of frameworks like React and Vue in UI development. Kelvin shares his insights on the "Boring JavaScript Stack" and its aim to simplify development by leveraging stable technologies. Alongside these technical discussions, they share personal anecdotes and delve into topics ranging from aquarium hobbies to drone certifications. Join them as they navigate through the multifaceted landscape of JavaScript developmentSponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Kelvin OmereshoneSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

20 Helmi 202453min

Unpacking Core Web Vitals - JSJ 620

Harry Roberts is a web performance consultant. They immerse themselves in the critical realm of web performance and JavaScript. The esteemed panel, including the renowned Harry Roberts, delves into the intricate details of site speed measurement and the evolving landscape of web performance metrics. The conversation sheds light on the profound impact of Core Web Vitals on businesses and the challenges they pose. Join them as they navigate the intricacies of web development, explore the nuances of user experience, and unravel the complexities of performance optimization.SponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Harry RobertsGitHub: Harry RobertsPicksAJ - ImageOptimAJ - AmeriDroid AJ - CloudFreeAJ - TRÅDFRIAJ - Aquarium Co-OpAJ - MJ AquascapingAJ - AQUAPROSAJ - Father FishDan - Apple Vision ProDan - Cache Rules Everything | Harry Roberts | performance.now() 2023Dan - GriseldaSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

13 Helmi 20241h 19min

Kaikki yhdessä sovelluksessa

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi yhdessä paikassa.

Sinulle valikoitua sisältöä

Podme-sovelluksessa kokoat suosikkisi helposti omaan kirjastoosi. Saat meiltä myös kuuntelusuosituksia!

Jatka kuuntelua koska tahansa

Voit jatkaa siitä mihin jäit, myös offline-tilassa.

Premium

9,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa

Aloita 14 päivän kokeilu

Premium

13,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa
Yksi lisäkäyttäjä

Kokeile 14 päivää maksutta

Suosittua kategoriassa Liike-elämä ja talous

Tarinat ja äänet, joita rakastat kuunnella

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi

Lue lisää