RRU 079: State Machines and State Charts with Farzad Yousef Zadeh
React Round Up17 Syys 2019

RRU 079: State Machines and State Charts with Farzad Yousef Zadeh

Episode Summary Today’s guest is Farzad Yousef Zadeh, a developer from Iran with a unique path into computer programming. He started by studying astrophysics and aerospace engineering in college, then dropped out in his last semester because it wasn’t the right path. He then taught himself to code, working mostly in web programming and frontend development. Despite his change in course, Farzad remains passionate about observing the night sky. Farzad is here today to talk about the ideas in his talk Explicitness and Consistency in UI, where he talks about the difficulties of developing a user interface and how the experience can be improved by using state machines and state charts. He talks about his inspiration for the talk and how he has implemented state machines and state charts into his work. The panel backtracks and talks about the definition of state machines and state charts. A state machine, from an academic background, is a model for computing something. It's for managing and controlling, taking over branching and managing a finite amount of state declaratively. State machines are not so much about sharing or reusing, but about how your communicate a certain behavior. Despite the fact that event driven programming permeates the programming consciousness, thinking about state charts and state machines is actually more natural than it first appears. The panel explains how it’s the same principle as whiteboarding to solve a problem. Lucas asks how state charts are different from pure React. Farzad talks about how it’s important not to just treat your static states as first class, but also the transitions between them. Otherwise, you would end up with something that looks like a map with cities and towns, but no roads. Using statecharts and state machines makes testing an application much easier, and in some ways you let the machine test itself. The machine will know what to do with your states because you define the path, and the machine will take the path for you. They again talk about the difference between state machines and state charts. A state machine defines a finite set of states and defining the events that the machine can take and respond to when transitioning from state A to B. If you use only this, you will encounter a snag called ‘state explosion’ because not non-concrete things cannot be modeled. So, state charts were invented to compensate for this. A state chart brings the idea of an extended state, or the context and data you need to hold and reason from. Farzad talks about other types of machines and supports that exist for branching, entry actions, and exit actions. This is similar to the use effect hook in React. He gives examples of where you would use this logic and how it would be worked into frameworks. Farzad talks about how your machine is just a definition, a declarative model of how something is supposed to behave, and how having that separation between the definition of the logic and behavior vs the implementation of API has given us so much more freedom and portability The panel talks about how using state machines and charts is an investment in the long term maintainability of your code. They agree that using state machines and charts makes it easier to communicate with other developers, new team members, and even non developers. They talk about Cerebral.js and its contributions and model. As with everything in programming, state machines are not a silver bullet and don’t work in every situation. Farzad talks about situations where state machines can be unhelpful. It is still valuable to consider state machines and charts because it forces you to dedicate time thinking and organizing your thoughts so that you can build something maintainable that won’t just be thrown away. The panel discusses how thinking things out before starting to code can be beneficial. They finish by talking about how React Hooks has started them on the path to implement state machines and charts into their code. Panelists
  • David Ceddia
  • Lucas Reis
  • Leslie Cohn-Wein
  • Thomas Aylott
With special guest: Farzad Yousef Zadeh Sponsors Links Follow DevChatTV on Facebook and Twitter Picks David Ceddia: Thomas Aylott: Lucas Reis: Leslie Cohn-Wein: Farzad Yousef Zadeh: Special Guest: Farzad Yousef Zadeh.

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Jaksot(310)

Exploring Reactivity in JavaScript Frameworks - RRU 243

Exploring Reactivity in JavaScript Frameworks - RRU 243

In today's episode, the panel of experts delves into the intricate world of reactivity in JavaScript frameworks. They explore Angular's signal-based approach, React's virtual DOM and hoisting, and how libraries like RxJS and Redux handle reactivity. They also discuss the absence of a universal standard for reactivity in JavaScript and the challenges it presents for developers. Join them as they unravel the complexities of reactivity and its impact on modern application development.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

10 Tammi 202441min

React Component Tests for Humans with Miroslav Nikolov - RRU 242

React Component Tests for Humans with Miroslav Nikolov - RRU 242

On this episode of React Round Up we chatted with Miroslav Nikolov, a UI developer at one.com, about his approach to unit testing React components. Miroslav discussed writing components in a human-friendly way, using the library UnexpectedJS. We also talked about Miroslav’s blog, including how he got started with it, and some of the tools he used, like Gatsby and Mailchimp. This is a great episode if you’re looking to learn more about how to approach unit testing in React.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinkswebup.org/blog | Miroslav NikolovUnexpectedJSReact Component Tests for Humans | CSS-TricksmailchimpSubstackPicksMiroslav- erikras.comMiroslav- Application State Management with ReactPaige- Tom Clancy's | Jack RyanTJ- DREAM SPORT Bike Computer Bicycle Speedometer and Odometer 16-Function Wired Bike Computer WaterproofAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

3 Tammi 202438min

Using AI for Web Development - RRU 241

Using AI for Web Development - RRU 241

Charles, Lucas, and Peter dive deep into the world of software development and React programming. They explore the intersection of artificial intelligence and the daily work of React developers. They discuss the benefits and challenges of using AI tools such as Copilot, the nuances of turning designer files into code, and the potential impact of AI on web development. Stay tuned as they discuss the role of AI as a learning tool, the importance of accessibility, and their recommendations for tools and resources for developers.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

20 Joulu 202352min

React Codebase Patterns - RRU 240

React Codebase Patterns - RRU 240

They delve into the realm of software development, with a focus on React best practices. In this episode, they dissect the intricacies of component structuring and file management, emphasizing the nuances of design patterns and the prudent use of Redux for state management. Tune in for a deep dive into these critical aspects of development and stay ahead of the curve in your software engineering journey.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

13 Joulu 202352min

How we Deploy our Apps - RRU 239

How we Deploy our Apps - RRU 239

Welcome to the new set of panelists for the React Round Up podcast. Chris Frewin is a full-stack software engineer. Peter Osah is a full-stack software engineer. Lucas Paganini is a senior front-end Engineer.They delve into the world of software development and system architecture. They explore the nuances of vendor lock-in, migration strategies, and the diverse perspectives on deploying single-page applications. Additionally, they share their experiences with various tools, platforms, and cloud providers, shedding light on the challenges and best practices in the ever-evolving landscape of software development.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipSocial MediaUnvoidLinkedIn @unvoidweb https://www.linkedin.com/company/unvoidwebInstagram @unvoidweb https://www.instagram.com/unvoidwebLucas PaganiniYouTube @lucaspaganiniweb https://youtube.com/@lucaspaganiniwebLinkedIn @lucaspaganiniweb https://www.linkedin.com/in/lucaspaganiniwebTwitter @lucaspaganini https://twitter.com/LucasPaganiniInstagram @lucaspaganini https://www.instagram.com/lucaspaganiniChris FrewinGitHub @princefishthrower https://github.com/princefishthrowerBlog Chris Frewin https://chrisfrew.in/Peter OsahLinkedIn @peterosah https://www.linkedin.com/in/peter-osah-744118179/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

6 Joulu 20231h 1min

Redux, Redux Toolkit, OSS and More with Mark Erikson - RRU 238

Redux, Redux Toolkit, OSS and More with Mark Erikson - RRU 238

Returning guest Mark Erikson joins the React Round Up team to discuss how he found himself in the position of being an open source maintainer for Redux, how he's helped shepherd/author future versions of Redux (and the complete overhauls that happened when React Hooks were introcuded), and the new examples he's written for Redux Toolkit to make Redux easier for devs to get started with. Mark also addresses some commons misconceptions around React and Redux, such as: is React Context a perfect substitute for Redux (spoiler: it's not), and is Redux still relevant today (it is). Take a listen to hear about getting into open source, where Redux is headed and Mark's broader thoughts on helping the React community document and standardize all the options out there so developers have an easier time choosing the tools needed to solve their particular problems.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksCheng Lou - On the Spectrum of Abstraction at react-europe 2016Blogged Answers: Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)Coding Career AdviceGitHub | markerikson/react-community-tools-practices-cheatsheetGitHub | markerikson/react-community-tools-practices-cheatsheet - Initial RFC: Scope and Goals #1Comparison with Other FrameworksRedux Style Guide#Redux Essentials, Part 1: Redux Overview and Concepts#Redux Fundamentals, Part 1: Redux Overview#Redux ToolkitRTK QueryJavaScript for Java-ish DevelopersMark's Dev BlogTwitter: Mark Erikson ( @acemarke )GitHub | Mark EriksonPicksCarl- Writing for Software Developers by Philip Kiely Mark- Josh ComeauPaige- Open source password manager - BitwardenTJ- Bowflex SelectTech DumbbellsZain- GitHub | zalmoxisus/redux-devtools-extensionAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

22 Marras 20231h 5min

How Do I Introduce New Tech at Work? - RRU 237

How Do I Introduce New Tech at Work? - RRU 237

Today the panel is discussing how to introduce new tech at work. They agree that it’s important to get input from all teams on the decision, although it will primarily affect the development team. One should also consider the different ways people make decisions, such as through discussion or quiet thinking, and give everyone time to come to a decision. The panel talks about positive and negative examples of how to introduce new tech at work. Thomas believes that it is important to acknowledge your own biases in decision making and to try to avoid them. The React experts discuss the significance of the team dynamic and the necessity of different roles in decision making or if it is better to have an organic discovery phase. This relates to Thomas’ point about personal biases, and he believes that it is important to put people in roles that are opposite of their personality. When making decisions about new technology, it is also important to note that not all decisions require the same amount of input, and they discuss how to measure how much input is required for a decision.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksVue12 React Best Practices You Need to Follow in 2019SaulTest && commit || revertVS Code ESLintPicksThomas - Teachable MachineCharles - White ChristmasCharles - Holiday InnChris - Practical React HooksAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

8 Marras 202337min

Navigating React Navigation with Zain Sajjad - RRU 236

Navigating React Navigation with Zain Sajjad - RRU 236

Zain Sajjad is a frontend developer at his company Peekaboo Guru, an app built in React. The show begins with Zain explaining why he chose to build Peekaboo Guru in React. Ultimately, he chose React for its composability and reusability. He talks about how much data is shared between his React and React Native applications.Zain explains what he means by a container since he is not talking about Docker, and how he has the app organized. He talks about the differences between routing and navigation between React and React Native. When approaching these differences, he breaks things down into components, containers, and platform, paying careful attention to how they work together. This differentiation can actually help a lot with testing as well. SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksPeekaboo GuruReactReact NativeReact Native NavigationReact NavigationSQLTensorFlowFun Fun FunctionImmer.jsPicksLucas - Ember.jsLucas - 3Blue1BrownThomas - Rite in the Rain notepadAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

18 Loka 202349min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
psykopodiaa-podcast
mimmit-sijoittaa
rss-rahapodi
herrasmieshakkerit
ostan-asuntoja-podcast
hyva-paha-johtaminen
taloudellinen-mielenrauha
sijoituskaverit
rss-rahamania
rss-lahtijat
rss-sisalto-kuntoon
rss-lentopaivakirjat
leadcast
rss-huomisen-talous
rss-merja-mahkan-rahat
rss-paasipodi
kasvun-kipuja
rss-startup-ministerio
rss-bisnesta-bebeja