POPULARITY
5 episodes with xstate
3 episodes with xstate
3 episodes with xstate
4 episodes with xstate
2 episodes with xstate
2 episodes with xstate
3 episodes with xstate
2 episodes with xstate
2 episodes with xstate
Join us on today's episode as we interview David Khourshid. We will learn about state machines, how XState plays nice with Angular right out of the box and how we can use XState Store to build light weight state machines for simple state.More about David BlueSky: @davidkpiano.bsky.socialX:@DavidKPianoLinkedIn: David Khourshid Follow us!X: The Angular Plus Show BlueSky: @theangularplusshow.bsky.socialThe Angular Plus Show is a part of ng-conf. ng-conf is a multi-day Angular conference focused on delivering the highest quality training in the Angular JavaScript framework. Developers from across the globe converge on Salt Lake City, UT every year to attend talks and workshops by the Angular team and community experts.Join: http://www.ng-conf.org/Attend: https://ti.to/ng-confFollow: https://twitter.com/ngconf https://www.linkedin.com/company/ng-conf https://bsky.app/profile/ng-conf.bsky.social https://www.facebook.com/ngconfofficialRead: https://medium.com/ngconf Watch: https://www.youtube.com/@ngconfonline Edited by Patrick Hayes https://www.spoonfulofmedia.com/ Stock media provided by JUQBOXMUSIC/ Pond5
In this episode, Charles sits down with TypeScript expert Matt Pocock to dive deep into the world of TypeScript migration, learning curves, and developer challenges. They explore why having a TypeScript "wizard" is crucial for teams transitioning from JavaScript and how TypeScript's integration with development environments like Visual Studio Code has been a game changer.Charles and Matt discuss the importance of real-time typechecking, the community's role in TypeScript's success, and practical strategies for migrating large codebases to TypeScript. You'll hear about Matt's journey from drama school to becoming a DevRel expert, his contributions to the XState library, and his philosophy of type-driven development. Together, they highlight TypeScript's advantages, such as enhanced code reliability and the nuanced benefits of explicit vs. inferred types.Whether you're a seasoned developer or just starting with TypeScript, this episode offers valuable insights and actionable advice to help you harness the full power of static typing in your projects. Tune in for a fascinating discussion that underscores the value of "boring" code, the need for continual learning, and the ongoing evolution of software development practices. Stay with us as we unravel the intricacies of TypeScript and share practical tips to elevate your coding journey.SocialsLinkedIn: Matt PocockBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.
Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro. Show Notes 00:00 Welcome to Syntax! 01:22 Brought to you by Sentry.io. 03:10 What is state? 03:29 Common state jargon. 03:48 Reactive State. 04:14 Store. 04:46 Immutable vs Mutable State. 05:53 State updaters. 06:15 Signals. Solid.js Signal Docs. 06:49 Observables. 07:07 UI is a function of state. 08:39 State Machine. 10:58 Binding state. 11:36 Global vs local. 11:49 Computed State, derived state, selector state. 12:41 Approaches to state management. 12:52 Reducer based. 16:39 Mutation based state. 21:17 Adam based state. 25:15 Ways to hold state. 25:17 Holding state in an object. 27:38 Holding state in the URL. Syntax Shows. 29:34 Holding state in IndexedDB, local storage, and cookies. 32:16 Holding state with FormData. 33:56 Holding state with Signals. Signals Proposal. 37:27 Holding state with the server database. 38:55 Global State vs Component State. Habit Path. 40:39 Sharing state. 42:58 State libraries. 45:26 Zustand. 50:24 Jotai. 51:50 xState. 54:56 Easy Peasy. 55:24 Pinia. 56:01 TanStack Query. 57:02 Sick Picks + Shameless Plugs. Sick Picks Scott: Cremo Mens Body Wash, Bentgo Adult. Wes: Adult Bento Box. Shameless Plugs Wes: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
In this episode of The Work Item, I had a conversation with David Khourshid, founder of Stately.AI. You might know him as @DavidKPiano on social media. Today, we're breaking new ground around unconventional paths of building an engineering career, entrepreneurship, and leveraging your audience as the potential first customers for your product. And of course - we talk a bit more about state machines (David is also the developer behind XState) and lessons learned from launching and growing a startup in the midst of a pandemic.
News:Paige - XState v5 debuts the “actor model”Jack - StyleXTJ - Deno CronBonus News:VS Code floating editor windows What Makes Us Happy this Week:Paige - General good healthJack - CO2 detectorTJ - Twinkly Christmas LightsJoin Us:Outro: Thanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, reach out to us via email or Tweet us on X @front_end_fire.Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire
### Tematy Storybook 7.6 - https://storybook.js.org/blog/storybook-7-6/ Fresh 1.6 - https://deno.com/blog/fresh-1.6 Vitest 1.0 - https://github.com/vitest-dev/vitest/releases/tag/v1.0.0 VestJS 5.1 - https://vestjs.dev/ Deno Cron - https://deno.com/blog/cron 28 urodziny Javascript - https://web.archive.org/web/20070916144913/https://wp.netscape.com/newsref/pr/newsrelease67.html State of React Native 2023 - https://survey.stateofreactnative.com/en Xstate 5 - https://stately.ai/blog/2023-12-01-xstate-v5 Nowości w rodzinie Reduxa - https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0
Amal, Nick & special guest Laura Kalbeg geek out over the remarkable growth and evolution of the XState project and its team in recent years. Laura also tells everyone about Stately.ai, a SaaS platform that uses AI to create seamless state management solutions compatible with various tools like XState, Redux & zustand.
Amal, Nick & special guest Laura Kalbeg geek out over the remarkable growth and evolution of the XState project and its team in recent years. Laura also tells everyone about Stately.ai, a SaaS platform that uses AI to create seamless state management solutions compatible with various tools like XState, Redux & zustand.
David Khourshid, founder of Stately AI and creator of XState, comes on to talk about how developers can make their state management more intelligent. Links https://twitter.com/DavidKPiano https://www.linkedin.com/in/davidkpiano https://twitter.com/statelyai https://stately.ai https://codepen.io/davidkpiano https://github.com/davidkpiano https://podrocket.logrocket.com/xstate Tell us what you think of PodRocket We want to hear from you! We want to know what you love and hate about the podcast. What do you want to hear more about? Who do you want to see on the show? Our producers want to know, and if you talk with us, we'll send you a $25 gift card! If you're interested, schedule a call with us (https://podrocket.logrocket.com/contact-us) or you can email producer Kate Trahan at kate@logrocket.com (mailto:kate@logrocket.com) Follow us. Get free stickers. Follow us on Apple Podcasts, fill out this form (https://podrocket.logrocket.com/get-podrocket-stickers), and we'll send you free PodRocket stickers! What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: David Khourshid.
In this episode, Rob Ocel is joined by Jenny Truong, Head of Operations and Developer Relations at Stately, to talk about state machines, XState, and mental health. They discuss the challenges and opportunities of starting a company from an open-source project, the benefits of user research and how Stately has used it to develop their new stately studio, and they extensively discuss Jenny's recent talk at AgentConf on looking at moods, burnout, and stress through the lens of state machines. Finally, they talk about the fun of being a doughnut connoisseur. Guest Jenny Truong- Head of Operations and Developer Relations at Stately Host Rob Ocel - Architect and Engineering Lead @ThisDotLabs - @robocell Sponsored by This Dot Labs
In this episode of the React Native Show, Łukasz Chludziński (https://twitter.com/loginlukasza) and Ola Desmurs-Linczewska (https://twitter.com/p_syche_) discuss state management in React Native apps. As there's no magical formula for handling it, don't expect straightforward direction or easy answers from this episode. Instead, get ready for: - an overview of state management in React Native & React apps - a deep-dive into state management libraries based on different philosophies, including Redux, MobX, XState, Jotai, and React Query - an insight into how Ola compared these libraries when writing “Simplifying State Management in React Native” - a few words of the book-writing process as seen by Ola You can find Ola's book on Amazon (https://www.amazon.com/Simplifying-State-Management-React-Native/dp/1803235039) and GitHub (https://github.com/PacktPublishing/Simplifying-State-Management-in-React-Native). New state management libraries keep appearing, so choosing the one that best suits your project and taste may be challenging. We hope to help you make this decision and get a broader perspective on state management in React Native by having Ola and Łukasz discuss the following aspects of a few libraries: - the people behind them - the category they belong, e.g. flux vs. proxy vs. atom, mutable vs. immutable, battle-tested vs. experimental - how they work and what it means to the developer Resources that Ola and Łukasz mentioned in this episode: ➡️ Dan Abramov's Fundamentals of Redux Course https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867 ➡️ Michel Weststrate's courses on Mobx https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx, https://egghead.io/courses/manage-application-state-with-mobx-state-tree ➡️ State explosion https://statecharts.dev/state-machine-state-explosion.html ➡️ Daishi Kato's course on Mobx https://egghead.io/courses/manage-application-state-with-jotai-atoms-2c3a29f0 ➡️ Dominik Dorfmeister's blog about React Query https://tkdodo.eu/blog/practical-react-query Enjoy the episode, and don't forget to subscribe to our channel for more content like this! How about boosting performance of your React Native app with the help of our ultimate guide? https://www.callstack.com/campaigns/download-the-ultimate-guide-to-react-native-optimization?utm_campaign=RN_Performance&utm_source=youtube&utm_medium=social&utm_content=State_Management_podcast If you feel like learning more about state management with Redux, check out our training: https://www.callstack.com/training/state-management-with-redux?utm_campaign=Podcast&utm_source=youtube&utm_medium=social&utm_content=State_Management_podcast_promo_1 Need help with your React Native project? Give us a shout! https://www.callstack.com/services?utm_campaign=Podcast&utm_source=youtube&utm_medium=social&utm_content=State_Management_podcast_promo_1 Check out other episodes of our podcast: https://www.callstack.com/podcast-react-native-show?utm_campaign=Podcast&utm_source=youtube&utm_medium=social&utm_content=State_Management_podcast_promo_1 Do you want to work with us? We're looking for Senior React Native developers! Check out the details and apply here: https://www.callstack.com/senior-react-native-developer?utm_campaign=Podcast&utm_source=youtube&utm_medium=social&utm_content=State_Management_podcast_promo_1 Follow us on Twitter to stay up to date with upcoming episodes: https://twitter.com/callstackio
Today we talk with Matt Pocock, who comes from Oxfordshire, England. As a big fan of TypeScript and maintainer of the Xstate library, we discuss the benefits and downsides of TypeScript. As the discussion gets a bit heated, we debate the true value of TypeScript, and where it holds value to the programming community. Sponsors Top End Devs Coaching | Top End Devs Links Advanced TypeScript - Become a TS Wizard TypeScript Error Translator Podcast Hosting and Analytics - Welcome to Fireside! Transistor - podcast hosting for creatives, brands, professionals Stately - Visualize your application logic Matt Pocock - YouTube Twitter: @mattpocockuk Picks AJ- dotGo 2015 - Rob Pike - Simplicity is Complicated AJ- GothamGo 2018 - Things in Go I Never Use by Mat Ryer AJ- GopherCon 2019: Mat Ryer - How I Write HTTP Web Services after Eight Years AJ- Plain Text - Dylan Beattie - NDC Oslo 2021 AJ - coolaj86 on Twitch Charles- Legendary: A Marvel Deck Building Game - Dark City Charles - Conferences | Top End Devs Charles - Sponsors | Top End Devs Charles- Trusted CDN Provider | Faster Content Delivery | CacheFly Charles - Podcasts | Top End Devs Matt- The Crew: The Quest for Planet Nine Matt - Race for the Galaxy Steve - Dad Jokes
Today we talk with Matt Pocock, who comes from Oxfordshire, England. As a big fan of TypeScript and maintainer of the Xstate library, we discuss the benefits and downsides of TypeScript. As the discussion gets a bit heated, we debate the true value of TypeScript, and where it holds value to the programming community. Sponsors Top End Devs Coaching | Top End Devs Links Advanced TypeScript - Become a TS Wizard TypeScript Error Translator Podcast Hosting and Analytics - Welcome to Fireside! Transistor - podcast hosting for creatives, brands, professionals Stately - Visualize your application logic Matt Pocock - YouTube Twitter: @mattpocockuk Picks AJ- dotGo 2015 - Rob Pike - Simplicity is Complicated AJ- GothamGo 2018 - Things in Go I Never Use by Mat Ryer AJ- GopherCon 2019: Mat Ryer - How I Write HTTP Web Services after Eight Years AJ- Plain Text - Dylan Beattie - NDC Oslo 2021 AJ - coolaj86 on Twitch Charles- Legendary: A Marvel Deck Building Game - Dark City Charles - Conferences | Top End Devs Charles - Sponsors | Top End Devs Charles- Trusted CDN Provider | Faster Content Delivery | CacheFly Charles - Podcasts | Top End Devs Matt- The Crew: The Quest for Planet Nine Matt - Race for the Galaxy Steve - Dad Jokes
In this episode I have a conversation with David Khourshid, creator of XState, about state machines and their role inside the front-end environment.If you don't know what a state machne is, I highly recommend you check this episode out. We answer questions such as:- What is a state machine?- What can you do with it?- How do state machines help the front-end?And more!Get in touch with DavidTwitter: @DavidKPianoGithub: https://github.com/davidkpiano/Stately.ai: https://stately.ai/Review Us!Don't forget to leave a review of the episode or the entire podcast on Podchasers!Meet our host, OpenReplay:OpenReplay is an open-source session replay suite, built for developers and self-hosted for full control over your customer data. If you're looking for a way to understand how your users interact with your application, check out OpenReplay.
We talk to Matt Pocock, XState core team and Stately dev advocate, about working at XState, quitting his job to work at Stately, and bringing TypeScript into the XState core. Links https://twitter.com/mpocock1 https://stately.ai https://xstate.js.org/ https://twitter.com/statelyai https://stately.ai/editor https://discord.com/invite/XState https://statelyai.notion.site/Careers-at-Stately-db3d704abd8f41058e5361e5ab9c1098 https://twitter.com/DavidKPiano https://www.mattpocock.com/ Review us Reviews are what help us grow and tailor our content to what you want to hear. Give us a review here (https://ratethispodcast.com/podrocket). Contact us https://podrocket.logrocket.com/contact-us @PodRocketpod (https://twitter.com/PodRocketpod) What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today (https://logrocket.com/signup/?pdr). Special Guest: Matt Pocock.
Nick rewrote our JS Danger game board app from Dojo to React for his talk at React Global Online Summit about componentizing application state with React and XState. On this episode Jerod, KBall, and Feross chat with Nick about the entire process and what he learned along the way. Oh, we also play an epic round of Pro Tip Time!
Nick rewrote our JS Danger game board app from Dojo to React for his talk at React Global Online Summit about componentizing application state with React and XState. On this episode Jerod, KBall, and Feross chat with Nick about the entire process and what he learned along the way. Oh, we also play an epic round of Pro Tip Time!
Anton pratar om sin senaste förälskelse XState och gör sitt bästa för att förklara både hur det fungerar och vad dess storhet är för Therése. Det blir state nodes, transitions och events. Ett trafikljus. Ett litet sidospår om useReducer. Hur state machines tillåter en att visualisera och samarbeta kring kodens logik. Om du gillar podden blir vi väldigt glada för en liten recension i iTunes, prenumeration på Spotify eller om du säger hej på Twitter (Anton, Therése)
Atila Fassina joins the Round Up to discuss how he got into Next and what he's doing with it now. The panel dives into the ins and outs of what you can do with Next and some advanced uses for the framework. Panel Jack HerringtonPaige NiedringhausTJ Vantoll Guest Atila Fassina Sponsors Top End DevsRaygun | Click here to get started on your free 14-day trialCoaching | Top End Devs Links State Management In Next.js — Smashing MagazineWeb VitalsGitHub - BuilderIO/partytownLocalizing Your Next.js App — Smashing MagazineTwitter: Atila ( @AtilaFassina ) Picks Atila- XStateAtila- RemixJack- WunderGraphPaige- React TableTJ- Camtasia: Screen Recorder & Video Editor (Free Trial) | TechSmith Special Guest: Atila Fassina.
Be part of our community by joining our Facebook group: https://www.facebook.com/groups/thoughtbehindthings Exploring property investments in Islamabad with the founders of X-state, Atif, and Altamash. What is X-state? How did they think of it? Why do people invest in real estate? What are different investments in Pakistan? What's the legal aspect of x-state from SECP? What are the different types of funding in startups? Where does their legality stand? What is their grand vision with x-state? How do they make money? Tune in to know more on blockchain tokens, parking money on investments, their first successful IPO, and Pakistan of 2050! Connect with us: • https://www.instagram.com/thoughtbehindthings • https://www.instagram.com/muzamilhasan X-state website: https://www.xstate.com/ --- Support this podcast: https://anchor.fm/syed-muzamil-hasan-zaidi3/support
I see you use XState on your new website. Why and how do you use it? Are there any best practices and pitfalls? Implementing a simple state machine library in JavaScript
XState is a framework-agnostic library for creating and using state machines and statecharts. Learn more by listening to our interview with David Khourshid, creator of XState. Links https://twitter.com/DavidKPiano (https://twitter.com/DavidKPiano) https://xstate.js.org (https://xstate.js.org) https://stately.ai (https://stately.ai) https://stately.ai/viz (https://stately.ai/viz) https://discord.gg/xstate (https://discord.gg/xstate) https://github.com/statelyai/xstate/discussions (https://github.com/statelyai/xstate/discussions) https://twitter.com/statelyai (https://twitter.com/statelyai) https://github.com/statelyai/xstate (https://github.com/statelyai/xstate) https://statecharts.dev (https://statecharts.dev) Contact us https://podrocket.logrocket.com/contact-us (https://podrocket.logrocket.com/contact-us) @PodRocketpod (https://twitter.com/PodRocketpod) What does LogRocket do? LogRocket combines frontend monitoring, product analytics, and session replay to help software teams deliver the ideal product experience. Try LogRocket for free today. (https://logrocket.com/signup/?pdr) Special Guest: David Khourshid.
As Chris says, we're back to the meat 'n potatoes of ShopTalk with a Q&A episode including: XState thoughts, getting comfortable with JavaScript, tips on managing several WordPress sites, the best method to schedule high latency tasks with Node.js, a strategy for background images in CSS, and dealing with landing pages and subpages.
A wideranging convo with Sunil covering the future of React, the Third Age of JavaScript, and the Meta of online discourse.Watch on YouTube: https://www.youtube.com/watch?v=H3h1WICelqsFollow Sunil: https://twitter.com/threepointoneChapters: [00:01:40] React and Temporal, Declarative vs Imperative My Temporal Explainer: https://twitter.com/swyx/status/1417165270641045505 https://www.solidjs.com/ [00:12:57] State Charts and Lucylang https://lucylang.org/ XState and Stately https://stately.ai/viz [00:17:08] The Future of React [00:25:03] React Streaming Server Rendering vs SSR/JAMstack/DSG/DPR/ISR ReactDOMServer.renderToNodeStream() Sunil's Slides: https://www.icloud.com/keynote/0MyOJkDIOVfFit76PqJFLvPVg#react-advanced https://react-lazy.coolcomputerclub.com/ [00:33:13] Next.js and the Open Source Commons [00:38:46] The Third Age of JavaScript Third Age of JS Benedict Evans (not Sinofsky) on Word Processors: https://www.ben-evans.com/benedictevans/2020/12/21/google-bundling-and-kill-zones [00:45:16] ESbuild vs SWC vs BunBun (Jarred Sumner) https://twitter.com/jarredsumner/status/1390084458724741121 [00:50:46] Let Non-X Do X: Figma vs Canva, Webflow vs Wix/Squarespace Canva vs Figma valuations https://twitter.com/swyx/status/1438102616156917767 [00:52:42] JavaScript Twitter and Notion's 9mb Marketing Site Notion 9mb JS Site Tweet mrmrs' Components.ai [01:06:33] React Server Components and Shopify Hydrogen/Oxygen https://twitter.com/swyx/status/1410103013885108229 [01:09:18] Categorical Imperatives of Web Platforms: Cloudflare vs AWS, MongoDB vs Auth0, Gatsby vs Netlify https://auth0.com/blog/introducing-auth0-actions/ [01:18:34] Wrap-up Transcript [00:01:40] React and Temporal, Declarative vs Imperative [00:01:40] swyx: Okay. So the first topic we want to talk about is React and Temporal, right? [00:01:43] Sunil Pai: I feel Temporal is introducing a shift into the workflow ecosystem, which is very similar to the one that React introduced to the JavaScript framework system. [00:01:54] swyx: That's the hope. I don't know if like my explanation of Temporal has reached everybody or has reached you. There are three core opinions, right? The first is that whenever you cross system boundaries, when you call it external API. So when you call internal microservices, there's a chance of failure and that multiplies, the more complex the system gets. [00:02:11] So you need a central orchestrator that holds all the retry states and logic, as well as timers And it tracks all the events and is able to resume from it from failure. [00:02:21] Second opinion that you should have is you should do event sourcing rather than try to just write your business logic and then instrument with observability logs after the fact you should have your logs as the source of truth. And if it's not in the log, it did not happen. [00:02:34] And then the final piece is the workflows as code, which is the one that you're focusing on, which is the programming model, in the sense that like all the other competitive workflow engines, like, Amazon step functions, Apache airflow, Dagster, like there's a bunch in this category. [00:02:48] They're all sort of JSON and YML DSLs, and the bind that you find yourself in is that basically you're reinventing a general purpose programming language inside of these JSON and YML DSLs because you find a need for loops, branching, variables functions, all the basic stuff. And, people find that like at the end of the day, all this tooling is available, you just have to make it run in inside of a general purpose programming language. So that's what Temporal offers. [00:03:12] But it's very interesting because it kind of straddles the imperative versus declarative debate, right? [00:03:17] React, people view as declarative. And I think it's mostly declarative, like there's imperative escape hatches, and because it's declarative, people can have a single sort of render model of their entire app for the entire tree. And I think it makes sense to them. [00:03:32] And you're saying that that's better, right? That's better than the imperative predecessor of like jQuery and randomly hooking up stuff and not having things tied up together. You sounded like you want it to [00:03:42] Sunil Pai: interrupt. So it's actually two things. One is the jQuery had an imperative API, and then they went way too hard into the declarative side with templating languages and then started reinventing stuff there. [00:03:54] So really react was like, no, you need access to an imperative language to create, you need a fully featured programming language to generate description trees like Dom trees or in this case, a workflow graphs. [00:04:10] swyx: Got it. So it's kind of like a halfway solution, maybe, maybe anyway. So the problem with us is that we're trying to say that imperative is better than declarative, for the purposes of expressing general purpose business logic, which is an interesting sell for me because in all other respects, I'm very used to arguing to declarative is better. [00:04:33] Then there's also an idea that people should build declarative layers on top of us. And I, it's just a very interesting, like back and forth between declarative and imperative that I don't know where I really stands apart from like, wherever we are is never good enough. So we need to add another layer to solve the current problems [00:04:51] Sunil Pai: there. [00:04:51] So there's a phrase for it and I forget what it's called the mechanism. It says that, uh, the system that allows you to execute stuff should not be the same system that prevents you from doing bad things. So there's a core, which is basically a fully featured API. And then you put guard rails around like the experiences. [00:05:12] For example, as an example, this is like adding TypeScript on top of JavaScript, let's say, unlike reason ML, let's say like, OCAML or a lot of very strongly type a language where if your code doesn't compile, you can't really run the code in TypeScript. There are times when you're like, you know what? [00:05:29] I need an escape hatch to actually like, do something like really funky here, X, Y, and Z, that that's not even well expressed in either the type system or sometimes even the language itself. You need to like hack it. And like, you might even email a couple of things. Uh, and in react, this was, I think when react came. [00:05:47] It wasn't just that it was a, oh, like there's JSX. It was very much, uh, okay. Uh, I have a lot of existing code, so I can add, React to one part of it and then hook onto the DOM, it renders and then have like this whole jQuery widget that I would like render onto the thing. Uh, so it gave you this whole incremental part to adopting the system, but then like after a point, like react consumes all of it. [00:06:11] And the fuck up with react is if you go too hard into react, doing stuff like animations is like impossible, which is why like we are at least a year or two away from a good animation API in React, or while you use, Framer or whatever Framer has become right now. Like frame of [00:06:27] swyx: motion. No. Um, [00:06:31] Sunil Pai: Yeah, but he's working. [00:06:32] I think Matt is now working on like a new, new thing. That's got a really funky name. Like, it sounds like a robot or something. All right. But it was curious to me that React's biggest deal was that, Hey, like, They talk about it being declarative, but a whole lot of things you wrote were like in regular-ass JavaScript, you would say on click and get an event and start doing things [00:06:53] swyx: beautiful. [00:06:54] It's a perfect blend. [00:06:56] Sunil Pai: Right. And you would suffer with this in. So there was the jQuery prototype phase, which was like directly imperative. And then they went hard in the other direction with type templating languages, like Jade and dust. And, uh, there were a number of popular ones at the time. And that's when like even Angular 1 became super popular because they're like, here's the whole kit and caboodle full whole framework. [00:07:18] And then React came and said, oh, well just the view. But that's because they didn't want to release like really yet. And they were like, yeah, this is all you need and the whole ecosystem. But anyway, so in temporal temporal for me is particularly interesting for that because it is now clearly making that. [00:07:35] I hate the phrase, but it's a good one. The paradigm shift of like how you start thinking about these systems and you just write some fucking code and then like you start adding on bits and guardrails for the things you want to do, which is on for the few hours I spent going through the docs and failing to get it running on my laptop. [00:07:53] That's my understanding of it. Feel free to correct me. [00:07:56] swyx: Okay. Yeah. And I think you're right, actually, I'll try this messaging on you because, it's something that we're consciously designing for. In fact, I have a, one of my API proposals was, reacts like API for tempo. And so essentially what we enable you to do is bundle up each individual service or job into a component that we happen to call workflow. [00:08:21] And my struggle here is that I currently tie component to workflow because what is the component like? It's, it's something that's self-contained that is a deterministic. Like it has a strict rule of execution from top to bottom, right. It just does the same thing every single time, uh, where we differ and why I struggle with this is because we put all the side effects into things that we call activities. [00:08:44] That's where all the non-deterministic stuff goes. And that one gets retried, basically at Temporal's will and essentially Temporal is serving as the central runtime or framework that has knowledge of all these workflows and activities. And can re-render them based on its internal rules, I retries timeouts, uh, heartbeats, all that good stuff. So I struggled with things like, which is the component and which is the hook or the effect. [00:09:08] And then there's other concepts. So, uh, we have ways to send signals into individual workflows, right? That's a very important property of the system that you can send data in while it's running and you can get data out while it's running. I'm not sure that's reflected in React at all. So maybe I'm stretching the analogy too much, [00:09:24] Sunil Pai: Solid, had an answer for that the word signal. So like solid JS. This is by Ryan Carniato the Marco folks, signals are a first-class concept in the framework. Again, I haven't dived into it in detail in a while, but it feels like an important thing. And I always wondered why React actually didn't have it because props are something that you just like pass. [00:09:46] Right. And it's just a value, like if you like plot it on a graph, for example, it's, let's say if you had to have like a graph of binary values, it would be either zero or like one, and that would be the shape of the graph, but signals are something that can be like something that happens and yeah, just pops up and goes down, like pressing a key on the keyboard. [00:10:06] And that's actually not so easy to define in a, in a react like system, like, uh, which is why it's kind of hard to build like audio processing graphs with like React or JSX. Um, I don't have like a good answer. I'd probably have to like hack on Temporal a little more, but the idea of like signals as a channel, through which you can like send information and having it as a first class part of the system is something that's not represented well in well, in React at least. [00:10:33] Yeah. Well, [00:10:34] swyx: isn't that in an action? For reducers [00:10:38] Sunil Pai: and event effectively. Yes. Like it's basically one of those actions. [00:10:42] swyx: The problem is that everything just ties right into the component tree instead of just having the component B and sort of isolated unit that can function independently. [00:10:50] Sunil Pai: That's the other thing, which is a workflow engine isn't a directed acyclic graph. In fact, it could have cycles, it could have cycles and it could have a number of other things, which is the [00:11:00] swyx: beautiful thing, by the way. [00:11:02] For us coding, a subscription platform literally is charged Stripe sleeps 30 days, charged Stripe again, and then infinite loop until you cancel and then you break out of the loop. [00:11:13] That's it. [00:11:13] Sunil Pai: That's awesome by the way. So I was actually thinking that someone's going to implement not someone's going to implement, uh, someone's going to use Redux saga on top of Temporal, that's what I was thinking, because then you will have generators that define like long running processes that are just talking to each other. [00:11:30] I think that would be good. CloudFlare also loved Temporal, by the way, like we were talking about it, like for awhile, they're like, oh, this is like fundamentally a new thing. And as you can imagine, some engineers were like, well, why isn't this running on workers? I'm like, I don't know why isn't it running on workers? [00:11:43] Like maybe we should get it there. [00:11:45] swyx: It is fairly heavy duty right now. We're trying to reduce that to a single binary, which could maybe run a workers. I'm not sure about the memory requirements that you guys have. It could, it's just not a priority for us based on our existing users. [00:12:00] Sunil Pai: Um, I was just, I was saying what they're saying. [00:12:04] They want everything to run on workers and I'm like, dude, it's just like one small, weird isolated like condo. [00:12:10] swyx: Ironically we also using V8 isolates for our TypeScript runtime. And that's just to make sure that people don't do non-deterministic stuff. So we did mock out everything, which is also pretty cool because whenever you use a library with, like setTimeout inside of that library, that persists to us as well. [00:12:25] So we set the durable timer. Your system can go down and we, we bring it back up and you're using our timer, not the JavaScript runtime timer, which is like just awesome. There's a trade off to that, which is, things don't work when you import them, like you would in a normal, Node.js project. [00:12:39] So most of, because you have to inject them into the environment of the V8 Isolate, you can't just randomly import stuff that as freely as you would in a normal node environment. So dependency injection and becomes a topic for us. [00:12:57] State Charts and Lucylang [00:12:57] swyx: Um, yeah. We actually clashed a little bit with David Khourshid because David is on this warpath of like everything in a state machine, right. Everything in the time-tested 40 year old JSON format that describes state machines. And we actually thought we were going to be competitive with him for a while because for him, the thing about writing imperative code is that it's prone to bugs, right? Like you can not really see the full, possibly the full span of like all the possible states that you're exposing, but in a state machine everything's explicit so he was butting heads with our founder for awhile. [00:13:31] But I think recently he decided that he is better at building on top of us than trying to compete with us on the reliability front. So that's, that's kind of an interesting evolution that has happened over the past year on this topic of declarative versus imperative. [00:13:44] I'm still like coming to terms with it. Like I'm not fully okay with it yet, but, it clearly is more expressive and that's something I am Very in favor of, and I have genuinely looked at like the workflow solution from Google, the workflow solution from Amazon, and they are literally have you write the abstract syntax tree by hand in JSON and that's just absolutely no way that that's going to work. So I'm pretty down with the imperative approach for now. [00:14:09] Sunil Pai: Well, that's, I figured at some point you will run XState on it and extent should work fairly well. I think contemporary, I don't see why it would. I think that that would actually, [00:14:19] swyx: Honestly, I'm not really sure what he's going to charge for. He's pushing the idea of state machines and making it more of a commonly accepted thing. [00:14:26] Sunil Pai: Well, his pitch isn't even state machines. It's very specifically state charts and I love state charts. I even bought the book by the way, the Ian Horrocks $700. So when I got it on Amazon, it was $180. I was like, cheap. Let's do it. I got really lucky at the time. It, it fluctuates like mad by the way that that value, well, you should expense it now is what it is. [00:14:46] Um, but, uh, what struck me about the thing? Here's what I tried. I really liked it. And I took a course, a couple of steps back and I was trying to understand, well, why isn't it like a success? Why don't people get into it? And the truth is that this falls not just into the intersection of this is the intersection of like computers and humans in the sense that sure. [00:15:07] There are things that can be correct, but there are things that can be expressible as well. Like I don't even know what code I want to write when I'm sitting down to write it. I love to like discover it while I'm writing it and really. All the syntax that we have created and abstractions, we have created around programming languages have been purely to express these things and have let's call it implicit state machines, even though that implies that it's bad. [00:15:32] Um, so for example, if you look at state charts, there's no real good way to compose two state charts together. You have to like manually start wiring them together. And like, there's, you know, like you've got in react, you say, oh, combo, if you have two components to put it together, you put like a little, uh, function around it. [00:15:49] And now it's two components in one component. So it's important not just to have a good unit of computation, but to have it like be composable with each other so that you can gather it and then make this whole nesting doll react, Dom tree of things. And I think. Until there's an actual language that supports that has state charts as a first class primitive, much like Lucy, I think that's what Matthew Phillips built. [00:16:15] He wrote a, he wrote an actual language that compares to state charts called Lucy Lang. That was very cool by the way. Like, I really like it. Uh, well, and it's fairly young, so it's too early to say whether people like love it or not. And other than, but people like you and me who look at something like, wow, this is awesome. [00:16:33] Let's all use it. No, like to take a while to grow. But I think that's the state charts has a bit of dissonance with the languages that it's written in right now, because it's not a first-class thing. I mean, it's adjacent object with keys and. Okay. Like we can do better maybe. Uh, but I would not bet against David and the people he's hiring. [00:16:53] Like he's hurting some smart people, you know, they're all like pretty intelligent. So I'm curious to see how that plays out. [00:17:00] swyx: I'm just glad that we're not competing. Uh, so that's, that's something that, that, that resolved itself without any intervention from me, which is very good. [00:17:08] The Future of React [00:17:08] swyx: Well, let's have this conversation since it's related, should React to be more of a DSL, [00:17:14] you know, this conversation that happened over this week, so I'll pull it up. [00:17:20] Sunil Pai: Uh, wait, so I've, I'm seeing, is this the whole Svelte versus React thing that's been happening over the last two, three days? [00:17:25] swyx: Yes. So basically it's saying React is already so far down almost like its own language. [00:17:30] They should just embrace it more. And instead of using linting to catch rule violations, just make a DSL, people are gonna use it. It's fine. And just like build things in so that it's impossible to make these errors that, that people commonly make. [00:17:47] Sunil Pai: So this is Mike Sherov, uh, he was smoking about it. [00:17:51] He mentioned how it shouldn't be a lint rule. And since we already have customs, insects and GSX, he should introduce a couple of other things. So as you can imagine, the react team has thought about this a lot. So the big problem with this all boils down to that fucking dependency area on use effect, by the way, that's the one that trips, everything else is fine. [00:18:09] Like you stayed all that is like fine. You can get. This is [00:18:13] swyx: what it was. Yeah. People want like state something memos and things like, you know, just build the reactor primitives into the language. [00:18:22] Sunil Pai: So yeah, I think this, this actually, isn't a bad idea and I think that was the whole deal with hooks. Whereas what's the phrase that they use in the docks. [00:18:30] A sufficiently advanced compiler might comply with these things at some point, and you're like, oh wow, great job. On pushing that responsibility onto the community, React team, well done. [00:18:41] swyx: My joke is like it's the react teams equivalent of a assume, a frictionless spherical cow from physics. [00:18:48] Sunil Pai: Exactly. [00:18:48] That's a perfectly spherical code. [00:18:54] swyx: It will exist. [00:18:57] Sunil Pai: And it's just the five of them or six of six of them hacking on this. And they have to make sure they don't break like facebook.com whenever they're working on these things. Imagine it's taken this long for Concurrent to show up and Concurrent is nice by the way. And we can talk about the server rendering API. [00:19:14] Okay. Uh, so react right now is, uh, yeah, that's the one like that. It shouldn't just be an intruder, but, uh, inside the inside Facebook only, well, not everybody can see it, but it's an in an internal, uh, uh, Facebook Wiki page, which is a list of potential F projects. You know, how the react team has fiber, whatever the hell. [00:19:47] Right? So there's a list of these projects that, or when we do this, uh, project F F I forget what the one for, uh, uh, animation that's called, is it called flat? Flat was the dumb one. And so there are lists of them and there are about 15, 20. I'm pretty sure my India has done. So Hey, so, uh, there's a list of them. [00:20:09] And if you look at them and you start assigning values in terms of work, oh, this is about six months of work. This is about, uh, another six months of work. It strikes you that there's a roadmap for about five to 10 years. At least if not more than that, I mean, look at how long it took to get like this. Of course this was very more foundational. [00:20:26] Those could probably happen a little quicker when it comes, which means the react team is like solely aware of what's missing in react right now. And to an extent that they can talk about it because if they do it becomes like a whole thing and like don't really engage in that conversation. They don't, I, I, and I don't blame them for it. [00:20:44] It's very hard to have this discourse without somebody coming in and saying, well, have you considered CSS transitions? I like that. Yes, we have. We have, we have considered CSS a lot. Uh, so, uh, so. There are all these projects like a sufficiently advanced compiler that compiles down to hooks. There's the animation API. [00:21:04] There's a welcome current, et cetera. This whole data fetching thing has been going on for years. And now it's finally starting to come to light, thankfully with collaboration, with the relay team and effectively all of the core when they built out facebook.com and, and that is the length that those are the time periods that Sebastian looks at and says, yeah, this is how we can execute on this because it can be prioritized. [00:21:33] It has to be prioritized by either Facebook wanting it or making Facebook wanted. So for example, the pitch was, Hey, let's rewrite facebook.com the desktop version because they haven't, it's a film mishmash of like hundreds of react routes on one page. It should be a single react route that does this thing. [00:21:52] Now that we have gotten management to agree to a rewrite, let us now attach it to the concurrent mode thing. And that was also part of it, which is in the older version, there was a lot of CPU fighting that used to happen between routes, which is why the whole work for the share dealers started and took like two years to like fix effectively. [00:22:08] They're doing cooperative, multitasking VM in JavaScript, which sure. When you're a Facebook, I guess you've got to like do these things. Uh, and how does that all, [00:22:18] swyx: was that ever offloaded to the browsers, by the way? Like I know there was an effort to split it out of react. [00:22:24] Sunil Pai: So I think last, I checked they were talking to Chrome literally every week. [00:22:29] Uh, but I think it's also been down to, uh, well, what Chrome wants to prioritize at the time. I think it is still going ahead again. It's the sort of work that takes years, so it's not going ahead. Nice and slowly, uh, which is why. Which is why it's architected inside react for the same reason as like it's attached to global and then read off the global. [00:22:52] I think it's also why you can't have two versions of React on the same page. There's the whole hooks thing. But also if you have two versions of React, and they'll just start fighting with each other on the scheduler, because the scheduler would yield to one than to the other than to the other one. [00:23:08] And there would be no like central thing that controls what is on the scheduling pipeline. That's from the last, again, this conversation is at least two years, or maybe they fixed that, but that's the goal of the dealer. There has to be one scheduler for the thread that everybody comes on to, and like tries to pull stuff, uh, with it. [00:23:26] I think it will become a browser API. It's just a question of like, when, like, yeah, I mean, the shared dealer in react itself has undergone so much change over the last three years. Uh, so maybe we should be glad that it isn't in the browser yet, because like, it's changed so much. It's coming there. It's I mean, the fact that they're releasing in November is a big deal. [00:23:45] swyx: You said there's so many projects that you want to ship, and the way to ship it in Facebook is to either convince them that this feature itself is worth it, or you tie it together with something else, like the Facebook, I think it's called FB5 rewrite. [00:24:00] Sunil Pai: Oh yeah. I think it's good for them. Like it worked because the Facebook, facebook.com is now more performant. Like it actually works well and they don't have CPU fighting. The fact that Facebook itself is becoming slightly irrelevant in the world is a whole other conversation. [00:24:17] swyx: Well, you know, I still use my billions, so, uh, it's it's, it improves the experience for them. [00:24:23] Sunil Pai: I'm only being snarky. [00:24:25] swyx: Uh, but I, you know, hopefully hopefully you're like, you know, there's other properties like Instagram and WhatsApp and what is, uh, which hopefully it will apply there. And then obviously like there there's the VR efforts as well. Absolutely. Yeah. [00:24:39] Sunil Pai: And that is the future. In fact, uh, several components also happened because they suddenly realized what they could do for how the deal with server components and server-side streaming rendering was never about an SSR story, or even a CEO. [00:24:54] Facebook doesn't give a fuck about SEO, right. It was about finally they figured out how to use concurrent mode to have a better UX altogether. [00:25:03] React Streaming Server Rendering vs SSR/JAMstack/DSG/DPR/ISR [00:25:03] Sunil Pai: So, okay. I should probably just keep Server components aside for right now. [00:25:06] And I'll just talk about the new streaming rendering API. Okay. [00:25:09] Okay. So I know there's like about three styles of rendering. [00:25:14] I say legacy, but legacy is such a dirty word. I don't mean it in the form that it's old it's in fact, [00:25:20] swyx: traditionally, like, sorry. [00:25:24] Sunil Pai: Uh, heritage Facebook would say heritage, it's a heritage style rendering, um, which is the, Hey, you use something like a rails or spring or some, it could be node as well. And you spit out a bunch of HTML and then you progressively enhance it with sprinkling JavaScript, pick your metaphor there like three or four metaphors that you could use. [00:25:44] Uh, uh, web components actually falls square into this, where it just comes to life only on the browser and then like make stuff interactive. Uh, then there's the whole client fully client side rendered one. So this is create react app or, well, a number of like smaller players then there's server side rendered. [00:26:04] And so as I rendered is actually like, it's not just next year. It's also your Gatsby. I feel like pretty much every, uh, react framework now has some kind of service side rendering story. Okay. So the next slide goes into what types of server-side rendering things happen. [00:26:20] swyx: there are a lot of subdivisions within here, right? [00:26:22] Like, uh, Gatsby is up here trying to reinvent like D S R D P R or something like that, which is like deferred, [00:26:29] Sunil Pai: static, [00:26:32] swyx: DSG, deferred static generation. That's the one. My former employer, Netlify also DPR, and is all, these is all like variations of this stuff with, [00:26:41] Sunil Pai: like, it's a question of where you put the cache is what it is. [00:26:46] It's a TLA three letter acronym to decide where you put the caching in. [00:26:49] Yeah, so there's the whole JAMstack and that's like the whole Netlify story, but also CloudFlare pages, or even GitHub pages. [00:26:56] There's no real runtime server rendering. You just generate a bunch of static assets and you Chuck it and it just works. Then there's fully dynamic, which would be next JS without any caching. Right? Like every request gets server-side rendered then like a bundle loads on top of it. And, um, like suddenly makes it alive, like sort of like it hydrates it. [00:27:16] And then after that it's effectively a fully clients rendered application then there's okay. So I just said ISR, but like you said, there are like three or four after this as well. There's this whole DSP. Yeah. Oh wait. So the new streaming API is actually fundamentally new because. I don't know if people even know this, but react already has a streaming rendering API. [00:27:37] It's called a render to node stream. I think that's the API for it. And the reason that that exists is so that, uh, only for a performance thing on the server where otherwise synchronous renders would block like other requests. And it would make like if for a server that was very, uh, uh, there was heavily trafficked. [00:27:57] It would become like really slow. So at least with the streaming API, yeah. That's the one learner to notice the stream, at least with this one, it wouldn't clash and you could interleave requests from there happening, but it didn't solve like anything else, like nothing, you couldn't actually do anything asynchronous on it, which is kind of that fucking sucks because like, it looks like it's an asynchronous API, but you can't do anything asynchronous through it. [00:28:18] It's the only thing that, okay, so vendor to readable stream is cool because I can, even if you go to the very last slide last bit, once. You know what this is, where the very first link open it up. Like it says react, lazy.cool computer club. So this is the demo that they have that exists with this new API. [00:28:36] This is what they link to. So if you refresh it a couple of times and I'll show you something that happens here, so you see the little spinner that shows up there and then the content loads. Yep. So, um, you know what, maybe I can share my screen because I want to show like a couple of things. Uh, [00:28:53] swyx: yeah. I'll fill in some context, like I knew that the renderToNodeStream API was not good enough, basically because everyone who is doing SSR was doing like a double pass render just to get the data in. Um, and I noticed a very big sticking point for Airbnb so much that they were almost like forking react to something like that to, [00:29:11] Sunil Pai: they invented a caching API. [00:29:13] They did like a whole bunch of things. Okay. So if you have a look here, you'll see that there's a little bit of spinner and then the content comes in. But now what I'm going to do is I'm going to show you the actual HTML. So let's just go to prettier and just pretty far this, for that, we can see the content and I'll show you something that's very like fundament. [00:29:32] That's the playground playground paste, big HTML. All right. So are you looking at this HTML it's rendering rendering by the way, this, these are special comments that mark suspense boundaries. It's very cool. If you come down here, you'll see a dev, which is the spinner. So this is the spinner that you see when you refresh the page. [00:29:52] So this is. And then the rest of like then, like the, like the bits that are below that close and the HTML closes, but content still start stream is streaming in at that point. So like, this is the actual, like devs that are coming in with the content. And then a script tag gets injected that says, Hey, this thing that just came in, shove it into where the spinner was. [00:30:13] This template [00:30:14] swyx: tag is so small. I would, I would have imagined it was much bigger. [00:30:18] Sunil Pai: It's not. So by the way, at this point, the react has not loaded. This is happening without react. This is just a little DOM, much like swelled ha uh, just a little operation that does it. So you, you, you get this content. And, uh, so, so that's the first feature which is that suspense. [00:30:35] It not only works out of the box, but fallbacks and replacing or fallbacks with actual content also happened. Um, I want to pull this outside of this main window to show you something. Um, so you can see the content load in, but keep an eye on the loading spinner. Okay. Just to prove a point. So the content loads in, oh man. [00:30:56] Oh, is it cash just that way? Uh, the content loads in, but the spinner is still going on. That's because there's an artificial delay for the react bundle to show, to show up. That's the point of this demo, which is to show that it can do async. Now you can imagine that it's not just one part of the page. [00:31:13] There could be multiple suspense boundaries here, some with something heavy, something with something asynchronous and they're potentially streaming in effectively in parallel in the, like after the HTML tag closes and they load nicely the, the other cool feature, which is a feature, every framework should steal is if you do a second refresh and here, I think if the, if you do a second refresh and at this point, the react bundle, the JavaScript bundle is cached. [00:31:42] So it loads before the react, the server. Finish the streaming. So at that point, the react says, fuck you, I don't care about the streaming bit anymore. I'm taking over, it's now a client set up like just automatically out of the box, because now that would be faster. So it basically raises the client and suicide. [00:31:58] So suspends working out of the box itself is like a big deal first. So people will start using it like with react dot lazy, but then with data fetching and a bunch of slate styling solutions, which they're also working on. Um, but this is the new server entering API. The reason I was talking about this, I keep losing context about these things. [00:32:19] I should stop sharing, I guess. Um, the absolute best feature of this of course is the reason why is something that comes out of Facebook, which is it works with existing applications and you can incrementally add it. So the first thing you will do is you'll take your render to string that one line somewhere in your code base, which says rendered to. [00:32:39] And you'll replace it with vendor to notable readable string. I mean, [00:32:43] swyx: either way 99% of users have never used render to string. Right. That's what next year is for. [00:32:51] Sunil Pai: Well, that's the, that's all my God. That's part of a whole other conversation, right? [00:32:54] swyx: This is rendered a string as a service. [00:32:59] Sunil Pai: The moment you update next, year's your version of next year? So work on yes. [00:33:04] swyx: Which is good, which is good. Right? Because, uh, people won't even know and they will just benefit, but it's, it's a little bit bad. Okay. [00:33:13] Next.js and the Open Source Commons [00:33:13] swyx: And this is a little bit of my criticism, which is that your blessing, a meta framework, at the expense of all the others, right? Like which admittedly have not been as successful, but, uh, basically reacts Chrome, picked a winner and it was next year. [00:33:27] Sunil Pai: I've been thinking about this so much. Oh, look, it let's get into them at our conversation now. So let's standard disclaimers. I think Guillermo is a mench. [00:33:35] I think the people who work there are incredible. There are some people I'm close to. I'm so happy for them. I know people on the Chrome team who work with these folks. I love them as well. Nicole for me is, uh, is a hero. Uh, and of course the React team at all my buddies, I love them. Okay. That being said, the React team is six people and they don't have the time to build the meta framework and Guillermo, uh the one thing he's incredible at is he's great at building relationships. [00:34:03] He's just amazing at that. Like he, uh, in a very genuine way, like this, there's nothing like ulterior about it. Next JS is open-source and runs on any node runtime and it's designed to do so. There's nothing about it. That's become special on Vercel. Because of that the React team felt, feel like, okay, fine. [00:34:20] We can have a primitive and meta frameworks will solve it. And let's just make sure it works with next two years, because so many other people who are just reach out to them and say, Hey, this new API is showing up. Uh, this is not just with next.js. It's a similar thing is with like react testing library. [00:34:34] When the new activity I showed up, right. I made the PRS to react testing library. I was like, what you should do is have every function and react testing library be wrapped in back act. So nobody really has to like use the API by hand. I just, it's now it's the D and it's a very good testing framework, the Chrome team. [00:34:53] And this is my, I'm not saying this, like, it's a bad thing. I think they did the right thing. The Chrome team realized that if they provide performance enhancements to next years directly, they can have so much impact on the internet because so much of the react tool is running on next year. So fixing how the images are loaded in next year certainly makes the internet faster. [00:35:15] Yeah. And maybe that's what we should do also like for the accessibility, just ship acts in, uh, all the acts rules in development mode, either in like react Dom directly, or at least the next years. Oh yeah. The sweatshop, the axles. Yeah. [00:35:33] swyx: Oh, they're enabled by default. And, uh, your, your app one compile, uh, actually I think it would warn you won't fail by a worn. [00:35:40] Sunil Pai: Okay. So you should be making the swag folks should be making way more noise about that. That is such an incredible draw for accessibility. [00:35:48] swyx: The thing is like, uh, if you encourage, if you think that your, your problems are solved by X, then you're taking a very sort of paint by numbers approach to accessibility. [00:35:57] Right. Which is actually kind of against the spirits of, of, uh, what people really want, which is, um, real audits with like tap through everything. Like the stuff that machines could catch is so little, [00:36:08] Sunil Pai: I agree. The whole point of actual SIS to make sure that all the low hanging fruit is done by default. [00:36:15] It's like TypeScript, like I guess, which is a TypeScript. Doesn't solve all your bugs, but the stupid undefined is not a function once it does. Yeah, exactly. Make sure that your images have. Just by default, like we can have stronger conversations about tab order once you make sure all your images have all tags. [00:36:35] swyx: Uh, okay. Anyway, so, so yeah. So first of all, yeah, I agree with you on the, on this Chrome. And, uh, I think this is opensource winning, right? Like, uh, there's a, there's a commons. Vercel built the most successful react framework, Nate. They went the investor really hard at it. They had the right abstraction level, you know, not too much, not too little, just the right one. [00:36:55] Uh, and now everyone is finding them as like the Schelling point, which is a word I'm coming to use a lot, uh, because you know, that is the most impact that you reach. Uh, so no hate on any of them. It's just like it happens that a venture backed startup benefits from all of this. [00:37:11] Sunil Pai: Can you imagine how hard it makes my job? [00:37:13] We don't run, not on CloudFlare workers, which means Next.js doesn't run on it. It's annoying. [00:37:19] swyx: Oh, is there any attempt to make it run? [00:37:22] Sunil Pai: There are a couple of ways where we can get it to work, but it like, it's a lot of polyfill and, uh, we'll get that. Like, I expect it to be fixed within the next three to six months, but out of the box, it doesn't run on it. [00:37:35] And for me in my head, it doesn't, it's not even about CloudFlare workers. I'm like, oh shit. That's what makes Bezos like even richer because everyone's got, has, if you want to use Nadia using AWS or Lambda. And that just means more folks are using AWS. I'm just like, okay, I guess. Sure. I know you work there as well, but it's just very annoying to me where I'm like, shit. [00:37:56] What's even more interesting is that node is now moving to implementing web standard APIs inside of it. So they already have the streams implementations. They will have fetch fetch will be a node API. Like it will be implemented based on standards, which means the request response objects. And once that happens and people, if people build frameworks on that, then you can say that it will run on CloudFlare workers because the cloud fed worker's API is also like a standards based thing. [00:38:21] So it's an interesting shift of like what's happening in the, in the runtime world. Also conveniently the person who implemented the web stream implementation at node just started at CloudFlare like last month, like James. Oh, James [00:38:38] swyx: now. Okay. Yeah. I recognize [00:38:39] Sunil Pai: a great guy by the way. Uh, very, I just love these people who have like clarity of thought when they talk James as well. [00:38:46] The Third Age of JavaScript [00:38:46] swyx: We're kind of moving into the other topic of like JavaScript in 2021. Right. So first of all, I have a meta question of how do you keep informed of all this stuff? Like I ha I had no idea before you told me about this Node stuff. How do you know? [00:38:57] Sunil Pai: I have an internet information junkie problem. [00:39:00] I replaced the weed smoking habit with a Twitter habit. This is what it is. [00:39:05] swyx: You're not unlike some magic mailing lists that like tells you all this stuff. Okay. [00:39:09] Sunil Pai: Like reading the tea leaves is what it is. Like. I keep trying to find out what's going on. The problem [00:39:14] swyx: is I, I, I feel like I'm ready. I'm relatively plugged in, but you're like, you're way more plugged in than me. [00:39:22] and then this development with node adopting web standard APIs, um, is this a response to Deno? [00:39:28] Sunil Pai: I don't know if it's a response to Deno because I know Mikeal Rogers wrote about this. Like your. That we made a mistake by trying to polyfill note APS and browser code with like modules and stuff. [00:39:41] Right? Like that's what the whole browser, if I, during those days, when we started actually using the same module system and the word isomorphic came up, what ended up happening was naughty APIs were polyfill in web land, but what should have happened is we should have gone the other way. And it would have kept like bundle this bundle size problem would have been a web smaller pro problem right now, just because of that. [00:40:07] So I know that the folks at not have been thinking about it for awhile, maybe Deno finally pushed them to do it, but I don't, I don't, I don't, I don't think it's like that reductive. I don't think it's just, it's just dental. It's very much a, this is the right time to do it and we actually can do it now. [00:40:22] So let's like flesh it out and do it the right way. Uh, and it's hard to do it in, in no, right. It's not just that you can just implement this thing. Like, what does making an HTTP server mean now? Because the request response objects are slightly different in shape. So you have to make sure that you don't break existing code. [00:40:39] So it's not as simple as saying, oh, we're just implementing the APS. That being said, having fetch inside node proper is going to be great. I think. Excellent. [00:40:47] swyx: Yeah. Yeah, no more node fetch. Um, yeah. You know, my other thoughts on I've been, I've been doing this talk called the third age of JavaScript. Right. [00:40:55] Which is a blog post that I wrote last year that, um, honestly I feel quite a bit of imposter syndrome around it because all I did was name a thing and like it was already happening. It was, you already saw, like, I think basically when, when COVID hit, a lot of people were. I have a lot of time on my hands, I'm going to make new projects or something. [00:41:14] Um, uh, and then, yeah, so I just, I named it and I just called it a few trends. So the, the trends I I'm talking about are the rise of IES modules first, you know, in, in development and in production, uh, concurrently the death of 11, which I'm also tracking. [00:41:30] Sunil Pai: Yes, those are, those are both come to fruition. [00:41:34] swyx: Which, by the way, I think the us government will have to drop by 11, uh, sometime in the next six months or so because, uh, the, the use, the usage levels have plummeted. [00:41:43] 3.6% of all visits to the U S government website in November, 2020 was I 11 and now that has dropped to 1.6, um, all [00:41:51] Sunil Pai: accelerating the drop is actually accelerating. [00:41:53] swyx: Uh, I don't know if it's accelerated it's everything, but it's under the 2% mark that the us government sets for itself. [00:41:59] They have an opportunity to essentially say like once it's stable, you know, there's no chance that it'll ever go back up again. Uh, they could just deprecate 11 for all government websites and then that, that will be the signal for all enterprises. And that's it. Yeah. So, um, and then the second. [00:42:15] Oh, I was going to move on the second bit. But what was your calling? [00:42:19] Sunil Pai: Oh, just saying that this happened, like, while I was working in JP Morgan over the last year, they did the same shift, but they're like, yeah, we are now a Chrome company. Literally none of our clients are asking for this and you know, it, it was just in rules somewhere, or we need to target, I 11, some people looked at it and said, okay, fine. [00:42:35] What happened is people are spending money on something that wasn't giving them the returns. And that's when a bank is like, yeah, we don't need [00:42:41] swyx: to do this anymore. Like you, you can deprecate free support. Right. And, and just make, just charge for 11 support, stop spreading it out among all the other users who are bearing the cost of development and maintenance. [00:42:54] The other one was collapsing layers, which is the death of Unix philosophy. Like , we used to have one tool does one thing, but now we want to combine everything. So, uh, Deno and Rome both have ambitions of linter format or test runner, all of that into a single binary, because the idea of what we want out of a default runtime has changed, uh, from a, for a very minimalist thing. And I always made the comparison to what word processors used to be like. [00:43:18] So, are you aware of Benedict Evans? He has a blog post, which is amazing about what a job of a platform should be. And he talks about like in 1980s word processors used to only let you type words. And if you wanted a horizontal layout, if you wanted word counts, if you wanted footnotes, these are all plugins that you buy and install separately. [00:43:38] Right. Okay. So, but as we evolve, as we just use all these things, we realize that these are just like the same tool that we want out of a word processor. So then they absorb all these features instead of plugins. They're just part of the platform now. They're there now in the new table stakes. [00:43:53] So I make that analogy to the runtimes that already doing, right. Like, Node used to be this like much more minimal thing. And, uh, but now we are expecting more and more out of our default setup with all these tools . Um, it's also very wasteful because when each of these tools don't know each other, they're all parsing their own ASTs running, running their own code. And then yeah, that's the whole [00:44:12] Sunil Pai: proposition, but yeah. [00:44:14] swyx: Any, any tool that collapses layers will, we will meet this, like, ESBuild, um, collapsed. Like a standard web pack would do like five or six AST runs. ESBuild collapsed it to two to three. That's a source of its speed as well. [00:44:27] Sunil Pai: One of my favorite facts about ESBuild is that it is faster to minify the code than to not modify the code when you run. Yes. And the reason for that is because when you try, when it tries to do the full AST, keep comment notes, everything else, it has to do a lot more bookkeeping, but the moment it just ditches all those things, because ESBuild doesn't do like full magnification, like something like a torso, but it does do like a smaller symbol substitution, white space, uh, uh, removes all white spaces. [00:44:59] And it does like some dead code elimination. Uh, and it's a lot more work to keep the bookkeeping for everything and all the white space notes than to not do it. So he has built is actually faster when you have a modification turned on, love it. [00:45:14] swyx: It's amazing. It's amazing. [00:45:16] [00:45:16] ESbuild vs SWC vs Zig [00:45:16] swyx: Do you have opinions on ESBuild versus SWC? [00:45:18] Sunil Pai: Okay. So I like ESBuild. Uh, because I was very strongly looking for something a lot more opinionated. I've noticed that the reason that code basis Surat usually boiled down to the acute decisions that you make. Like in the very beginning of the project, you can do anything. I mean, whichever dumbass came up with the idea of baby plugin, macros has like ruined a lot of lives. [00:45:41] It was me. I came up today, but that is like, then you're like tight. So the thing that ESBuild does is very like its creator, Evan Wallace, which is that it's, it's one of a kind like, he's not really interested so much in having community, uh, uh, PRS or like having suggestions on how it should be built. He has a very strong vision of what it should be like, which is why there are no AST level plugins and all that jazz. [00:46:08] And because of that, because of, like I said, because he's collapsed the lyrics and collapse, the size of the development team to just himself, he has like such a clear vision on what it should be. So it w is good. It would be great for, I want to say 95% of projects that fall under the things he has designed at four. [00:46:28] Okay. Uh, and that's a lot of applications. That's a shit ton of applications. That's like everything, but your host, if you need anything, uh, unique, I'll give you one. That's like a very good use case that is bill will never use. Do you know what, um, uh, really has this idea of persistent queries. Okay. So like for whoever's hearing who doesn't know it, right? [00:46:52] Like you can write a query inside Java. And when it compiles it out, it takes out the query and replaces it just with an identifier, like, like a little eight character identifier. And it hosts that query instead of like on the service side. And it says, oh, that eight, eight character query, you can just hit it as a restaurant point now. [00:47:11] So you can write the code internally in JavaScript where it belongs, but it doesn't add like to your bundle or whatever it is. So ESBuild will never support this, which means if you want to do really optimizations on your react code base, you won't be able to do it all. You have to like add on to yours, which you could do. [00:47:29] I guess like you can still use Babel would, uh, SWC is meant to be a platform and which is why next years will use it because next gen is the meta framework, not just for react, but also for like some programming opinions, extracting get server props, get started, props, which one you want to be that this thing after server components comes into play, but a number of things like there will be people who always want to do. [00:47:54] The emotion macro now is like fairly, uh, popular that they will want to use it. So I assume they will implement it in, uh, interest. I know. Do you know what bun is by the way? Do you mean, do you know, how are you following Jared Sumner? Some [00:48:10] swyx: summers, no, wait, so [00:48:13] Sunil Pai: key is reimplementing ESB, but in a language called Zig it's another systems programming language. [00:48:20] And he's his claim is that it's about three times faster than you spell it right now, which is already some 200 times faster than Babel loader. It is just our web pack, but it's a language you said it? No. So the language is called Zig lines at AIG, but the thing he's building is called a, B U N. He hasn't shared it in public yet. [00:48:41] I think he's actually planning on sharing it like next week. Like I think it's that imminent. He's been sharing numbers right now. Yeah. That's the guy, Jared. Uh, I love, I should've followed him like a while ago, create great feed, uh, excellent content. And like, he's, he he's thinking that he's going to like implement. [00:48:57] He might actually implement an AST level, uh, uh, plugin, micro API, possibly just implement the emotion one. I think he was just, yeah. See, oh, that's like literally the tweet would write under the main one right there where he's like, Hey, what if we actually just did this in? Uh, oh, [00:49:14] swyx: he's right. He's he's right with you. [00:49:17] Yeah. Like he's [00:49:17] Sunil Pai: just talking about it, like right there. So, uh, so SWC versus ESBuild, I don't think is the conversation. I think ESBuild will have a rise. A bunch of people will use it. The nice thing, the best feature about ESBuild is because there are aren't any like cute decisions. You will be able to move away from it to whatever succeeds. [00:49:39] Th there's nothing customer [00:49:40] swyx: that I believe that was Evan's original idea. That IES build was a proof of existence that day there's a better way. And that he stuck to it for way longer than I thought he would. [00:49:51] Sunil Pai: People are using it in production and everything know everything about the designers that it's replaceable. [00:49:56] That it's just a, [00:49:59] swyx: that's wonderful. Isn't that amazing when people design their stuff? W. You know, it [00:50:04] Sunil Pai: isn't kind of pressure that he would have had the best. Thank goodness. It was the successful CTO of Figma with money in the bank who is implementing this and didn't have anyone to impress. You know what I mean? [00:50:16] It was like, yeah, let's put a macro API and what else do you want? Like, whatever. No, he doesn't [00:50:21] swyx: go. Yeah. But he just needs to police himself and no one else. Right. If you don't like it, [00:50:26] Sunil Pai: this is during his downtime from Figma that he's working on this. [00:50:30] swyx: Um, my, my secret theory is that he's doing this as an, as a Figma ad. [00:50:33] Like, you know, if he, if the CTO of Figma does this for fun, imagine what it's like to work inside of Figma, you know, like of, I've heard it's pretty great, [00:50:42] Sunil Pai: pretty great working inside of Figma too. Well, the code is like, it's really cool. [00:50:46] Let Non-X Do X: Figma vs Canva, Webflow vs Wix/Squarespace [00:50:46] Sunil Pai: Did you actually point out. Uh, Ken was like six times bigger than Figma. [00:50:51] Now [00:50:52] swyx: you wanna talk about that? [00:50:53] Sunil Pai: Oh God. That's. I didn't realize until you pointed it out. [00:50:58] swyx: Incredible. Imagine all the geniuses working in Figma and go looking at Canada and like, yo, like I, I have like a thousand times your features and your six times in my size as a business. [00:51:10] Sunil Pai: Uh, but I hope every one of those engineers understands the value of sales and like reaching out to your actual customers because [00:51:17] swyx: I don't think it's just sales. [00:51:18] It's more like, uh, they're always going to be more non, like, this is a category of software called let Nanex do X, right? Let non-designers do design. Whereas Figma is clearly for designers doing design. Um, and there's always going to be like a tool, three orders of magnitude more non-experts uh, who just want to do basic shit. [00:51:37] Sunil Pai: Oh man. I hope that flow has a multi-billion dollar buyout and at some point, [00:51:42] swyx: uh, I mean, I, yeah, I mean there's clearly something that w the problem with flow is that. They're too close to code. Right? You have to learn CSS the box model. [00:51:56] Sunil Pai: Yeah. I mean, they do say there's no code, but really they're a visual, [00:52:00] swyx: if you don't know CSS when using Webflow you're screwed. [00:52:03] Like [00:52:04] Sunil Pai: that's right. It's uh, they have, they have the best grid editor on the market too. I have to say that. I [00:52:10] swyx: mean, the UI is just amazing, right? It's just like, um, yeah, I mean, you know, there's a reason why like the Wix is, and the Squarespaces are actually worth more than the workflow and it's not just cause they were around earlier. [00:52:22] Like, um, they're, they're just easier to use for non-technical people. [00:52:26] Sunil Pai: That's a good, you you're talking about why did we even start talking about this? What did you want to talk about? Uh, we were talking [00:52:33] swyx: about like, uh, 32 JavaScript. Um, so I think we kind of like dealt with those, those, uh, those topics. [00:52:39] Was there anything else that you want to talk about? [00:52:40] Didn't JavaScript land, [00:52:42] JavaScript Twitter and Notion's 9mb Marketing Site [00:52:42] Sunil Pai: I don't know if you have noticed, but I've kind of actually stopped engaging in the JavaScript discourse on Twitter specifically, which actually hurts me like a little bit, because that's where all my jobs could friends are. And that's kind of like, I've seen it all. I've seen JavaScript router now for the last 11 years, I would think 10, 11 years that I've seen it. [00:53:02] And I used to like participate very heavily. And back to the thing that you, uh, that we were just discussing about the conversations that happened too, about like SBA versus MPA and about like the whole notion blow up about how they made them thing into like 800 KB. Yep. Uh, the easiest kind of discourse to have is to have like one absolutist opinion, uh, that I saw a number of people in like those threads and the surrounding threads have, which is a, well, this is bad or this is good. [00:53:35] And, uh, that's, that's all I got to say about it. Now give me like 40 likes on this reply industry. Uh, whereas like there's real opportunity here to understand how and yeah, that's the one, that's the one with treat by the way. Clearly it got like attention. No, [00:53:51] swyx: by the way I phrased it very neutrally. I actually was pretty careful. [00:53:54] Cause I knew that it's going to attract some buzz. I had no idea what's going to be this much, but [00:54:00] Sunil Pai: no, no, no. But like I'm so interested in talking about, uh, so this is what I was talking to you about, which is like, it's not just about a website at one point of time. It's about the system that generates these kinds of like artifacts, uh, of, so for example, with what, what did they say? [00:54:24] They're there 8 47 KB right now. They're not 8 47 KV today. They were 8 47 KB. When you, uh, Uh, tweeted this, uh, on the 11th, they are not in 47 KB. Now they might be 852, or they might be 841. Are you about to check? [00:54:43] swyx: No, no, no, no, I'm not. I'm not, it doesn't matter. The exact number. Doesn't matter. I'm going to give you another example, which also came up, which is Netflix. [00:54:49] Remember they ripped out react and he said they have react back [00:54:54] Sunil Pai: on Netflix. I use, are you serious on that? Wait, did they have like both Netflix, they have both react and jQuery, jQuery and react on that page right now. It's just, but like, for me, it's interesting that, which is like, I think the most insightful tweet in this was very pointed out that nobody noticed this until they told it to us. [00:55:16] Nobody saw it. It bothered. Yeah. That's the one, like nobody bothered about it. It was still making the money. They were happy about it. And they wanted to share that. And we need more of them. We need more people to be like sharing the process because if we react very badly to these things, then fewer people will want to actually share the numbers. [00:55:34] And you won't learn from the industry, but I don't know whether it's a good thing or a bad thing. It does mean that you can make a multi-billion dollar company with a marketing site. That's nine MB of Charles' script. And I think, I think people who have very strong opinions about how much jealous should be on a page to take a step back and wonder how do you make it? [00:55:55] So like, how do you, from the very beginning of like running your company, how do you make it so that it doesn't go up beyond that? Also, what opportunities are you abandoning by focusing on making sure your marketing page, uh, has like 100 KB of JavaScript instead of like nine MB [00:56:17] swyx: shipping velocity, right? [00:56:19] Sunil Pai: You are somewhere, you are spending effort on it somewhere. Just so we're clear because somebody will look at it and say, fuck you, are you suggesting that we all put in that's not what I'm saying. I'm just saying that the resources, that word, but resources at these companies are limited and they are, they they're prioritized and sequenced and you should ask yourself in what order you want to do it and who you're trying to please, are you trying to please your customers and your users or the peanut gallery on Twitter? [00:56:48] And I think that's something that like, I, it's why I don't engage so much anymore because it's so hard to communicate in once and somebody will come in with a, well, fuck you, you work for Facebook or used to work for Facebook. What would you know? I'm like, you got me that kind of ends the conversation that, right. [00:57:04] Like I'm studying contributed to babies being burned alive or whatever it is like, this is what it is. [00:57:12] swyx: Um, it's a nuanced debate, like, uh, because they also did some like notion clearly did some stupid stuff here. Right? Like it, it, they could have spent a day. Uh, so do you know why it was 9.9 megabytes? [00:57:25] Sunil Pai: If I understand it was the whole notion that that was being used, the [00:57:27] swyx: whole app. [00:57:28] Yeah. They were shipping the whole, there was actually someone from notion, uh, answering me. Uh, it's here. Yeah. This guy's, this guy works at notion before the marketing site was another route in our, at the time 9.1 NBME and app, we load the whole app just to show the sign up button. [00:57:44] So what, [00:57:45] Sunil Pai: what it's worth Facebook sign up page does start prefetching actual Facebook code so that once you log in it loads instantaneously. So there's a reason to do it. It's just that it shouldn't be nine and B of course. That's [00:58:00] swyx: yeah, they could have like took a day every, every six months or something like perfect day, you know, and do that. [00:58:06] So that's why I'm hesitant, uh, giving them a pass for like, okay, so what your multi-billion dollar company? This is embarrassing. This is just an unprofessional. Um, so yes,
Amal, KBall, and Nick welcome David Khourshid to the show to talk about his project, XState. XState brings state management to a new level using finite state machines and is compatible with your stack. We talk about how the idea came to fruition, its practical uses, and where it's going.
Amal, KBall, and Nick welcome David Khourshid to the show to talk about his project, XState. XState brings state management to a new level using finite state machines and is compatible with your stack. We talk about how the idea came to fruition, its practical uses, and where it's going.
This week's episode was focused on learning what state machines are, and who better to drive us through this path than the creator of XState David Kourshid, or maybe better known as David K. Piano.David answer questions about concepts and ideas around why state management can be a difficult business and how XState can help to simplify the situation.Found David on Twitter and definitely check his new adventure with stately.ai and signup for the newsletter there.David also does streams that you can check in Keyframes site. And if you want to learn more about state machines and xstate check discord.gg/xstateMusic CreditsOpening and Outro Music by DanoSongs https://danosongs.com/Background Music Music:Cool Rock by Kevin MacLeod Link: https://incompetech.filmmusic.io/song/3925-iron-bacon License: https://filmmusic.io/standard-licenseSupport the show (https://www.buymeacoffee.com/matiasfha)
In this Hasty Treat, Scott and Wes launch a new series called Git the Latest — New Things In Tech. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what's happening with your code, track errors and monitor performance with Sentry. Sentry's Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:47 - GitHub CoPilot AI-powered autocompletion Not going to take your job 07:18 - Next.js 11 Image updates Multiplayer 08:20 - Astro Build faster websites with less client-side JavaScript 09:50 - Notion API Get database Query database Pages Block children 11:27 - Petite Vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Similar to Alpine.js Without a build step 13:58 - Stackblitz Node in the browser Not in the cloud Rolled 15:22 - Solid.js Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs. 16:37 - Stately From the company that made xState 18:05 - Web3 Let us know if you want a show about it Ethereum JavaScript API Apps that run on the Blockchain Links https://alpinejs.dev/ https://svelte.dev/ https://xstate.js.org/ Tweet us your tasty treats! Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets
זהו פרק 413 של רברס עם פלטפורמה, הוקלט ב-8 ביולי 2021, וזה הטייק השני - הטייק הראשון היה מוצלח במיוחד, אבל הוא לא הוקלט . . .אז הנה אתם פה, בטייק 2, יחד איתנו - כן, אני יודע שבשבילכם זה הטייק הראשון, בסדר - אז היום אנחנו נמצאים באולפן שלנו ביוקנעם עילית (!), אורי נמצא בחופש ומחליף את אורי יונתן מ-Outbrain - היי יונתן, מה נשמע?(יונתן) היי, מה העניינים?(רן) מצויין, ברוך הבא - ואיתנו נמצא גם ירון מחברת Soluto - היי ירון!(ירון) היי, מה העניינים? נעים מאוד . . . .(רן) טוב שבאת - היום אנחנו הולכים לדבר על GitOps, בפעם הראשונה.ולפני שנדבר על GitOps, נעשה סבב היכרות קצר - יונתן, היית כאן הרבה פעמים בפודקאסט לפני זה [הקדמה והיכרות - בפרק הקודם], אבל בוא ספר לנו בכל זאת עוד קצת על עצמך - (יונתן) אז אני הגעתי ל-Outbrain לפני 10 שנים, כמהנדס Backend, ובחמש השנים האחרונות אני מנהל את הפיתוח.ומאזין ותיק של רברסים [וגם אורח - 328 The tension between Agility and Ownership או Final Class 23: IDEs או 131 uijet או 088 Final Class 2, וכמובן 412 Serverless at Via](רן) מצויין - טוב שאתה פה.ירון - שני משפטים עליך?(ירון) אז אני ירון עידן, אני מוביל את צוות ה-DevOps ב-Solutoאני משחק עם מחשבים כבר יותר מ-20 שנה - התחלתי בצבא בתור DBA ואחרי זה עברתי להיות מפתח.לפני כמה שנים כבר גיליתי את עולם ה-DevOps ועברתי אליו לחלוטין - ומאז אני מאוד נהנה מהעולם הזה.ב-Soluto אני עושה את זה כבר משהו כמו חמש שנים.אני אספר גם קצת על Soluto, החברה שבה אני עובד - Soluto היא חברה שרוצה להפוך את הטכנולוגיה לדבר יותר ידידותי, בעיקר עבור אנשים שעבורם טכנולוגיה “זו לא השפה הראשונה שלהם”.אז המשתמשים שלנו יכולים לגשת לממשקים ב-Web או ב-Mobile ובעצם לקבל את המיטב מהמנויים הדיגיטליים שלהםלוודא שכל המידע שלהם מאובטח ושמוראם יש להם איזושהי מכונת כביסה חכמה בבית אז הם יכולים לוודא שהמכונה מתפקדת כמו שצריך ושהם מצליחים להשתמש בה . . .ובצד השני - יש להם גם את היכולת לפתוח איזשהו צ'אט, איזשהו Session של Chat עם Expert-ים - וגם הם משתמשים בפלטפורמה שאנחנו מפתחים בתל אביב, שנקראית Anywhere Expert, והיא מאפשרת לתומכים טכניים להיות מסוגלים לעשות את הסשנים האלה מהבית שלהם, מתוך איזושהי אפליקציה, כמו ב-Uberכבר לא צריכים לשבת בתוך איזה Cubical עם אוזניית מדונה ב-Setting קצת אפרורי - אלא ממש להשתחרר ולעשות את זה בתנאים שלהם.זה מייצר Disruption ענק לכל התעשייה הזאת של Tech-support בארה”ב - שם נמצאים רוב הלקוחות שלנו.(רן) אז זה, למעשה, Marketplace של תומכים ונתמכים - מצד אחד יש את הנתמכים, שאלו אנשים שיש להם, לצורך העניין, בעיה עם הטלפון או עם מכונת הכביסה או כל מכשיר אחרומצד שני התומכים, שבזמנם . . . אולי בנוסף על עבודתם, כמו שאמרת כמו ב-Uber, עושים השלמת הכנסה בזמנם החופשי.(ירון) כן - אנחנו אוהבים לחשוב על זה שאנחנו מצליחים לתרום לשני הצדדים הרבה מאודגם לגרום לאנשים להרגיש שהם מוציאים את המיטב ממה שהם שילמו עליו כסףוגם לגרום לאנשים לעשות את העבודה שלהם בתנאים יותר משחררים [אה . . . ](רן) אז הנה שאלה מפתיעה, שהרבה זמן לא שאלו אותך - אמרת שאתה כבר מתכנת הרבה זמן, אז תהיתי מה היה המעבד הראשון שסבל את נחת זרועך?(ירון) אז יש לי Deja Vu . . . אני חושב שזה היה 386 לדעתי? אבל נראה לי שעברתי על כל הסדרה, ואיפשהו בילדות מצאתי מצאתי איזושהי חוברת כזאת בעברית שמלמדת לתכנת ב-Basic, התחלתי לפתוח אותה - ומאז לא הפסקתי.(רן) עדיין ב-Basic?(ירון) התקדמתי מאז - עכשיו אני ב-Pascal . . . [אין יותר טוב מזה](רן) יפה . . . Turbo Pascal [אוקיי, יש יותר טוב…], Object Pascal . . . נחמד - הכחול והתכלת הזה, מקסים, הנדסת אנוש למופת.[אתה לא ציני, נכון? זה היה נפלא]בסדר - אז אנחנו התכנסנו היום כדי לדבר על GitOps.כולם, פחות או יותר, יודעים מה זה Git, וכולם, פחות או יותר, יודעים מה זה Ops - החלק המעניין של DevOps, להזכירכם . . . אבל מה זה GitOps? מה זה השילוב הזה ביניהם?(ירון) אז כן - דבר ראשון, הטרנד היום זה באמת לשים סיומת של Ops על הכל . . . יש DataOps ויש MLOps, אז עכשיו יש גם Buzzword חדש שהוא GitOps.אנחנו ב-Soluto עושים את זה כבר הרבה שנים, בלי לתת לזה את השם הזה, אבל אני כן אתן את ההרחבה של “מה זה בעצם אומר?”אז GitOps היא איזושהי מכניקה של CD, איזושהי אימפלמנטציה (Implementation), שמאפשרת למפתח לדלבר (Deliver) את המוצר שלו ל-Production בצורה שבה Git, או הקוד שיושב בתוך Git, ייצג את המצב של Production.אז אם ב-Continuous Delivery רגיל, יש איזושהו מבוך רציני, שהקוד צריך לעבור מהרגע שהוא Committed ל-Branch הראשי, ועד שבאמת אפשר לראות אותו ב-Production - אז GitOps מנסה לחסל כמה שיותר מהמחסומים האלהובאמצעות איזשהו רכיב שעושה פעולה שנקראת Reconciliation, לבדוק מה המצב של הקוד ב-Git, ולראות האם Production עונה על אותן הגדרות - ואם יש צורך אז לסנכרן בין שני הרכיבים האלה.(רן) כשאתה אומר “מבוך” ,אתה מתייחס, נגיד, לפרישה בהתחלה כ-Canary, ואחר כך אולי פרישה של 25% ב-Data Center אחד ואחר כך ב-Data Center אחר? זה המבוך שאליו אתה מתייחס?(ירון) אז האמת שהמבוך הזה יכול להיות קיים גם ב-GitOps, אבל אנחנו, ספציפית ב-Soluto כן משתמשים ב-Canaryהוא אפילו ניהיה הרבה יותר נגיש עבורנו בזכות השימוש שלנו ב-GitOpsשני הדברים האלו הם לא Mutually-exclusiveהמבוך שאני מתאר זה בעיקר להיכנס לתשתית של ה-CI, ללחוץ על “Deploy”, לראות שמשהו נתקע, להיזכר שהיה צריך לשדרג את ה-Script שעושה את זה . . .(רן) כן . . . בעצם אתה מדבר על ההתערבות האנושית שנדרשת אחרי שהקוד כבר נמצא ב-Master . . .(ירון) נכון - וגם זיהוי של טעויות שמתרחשות בזמן ה-Deployment - נניח, אצלנו ראינו הרבה פעמים שבגלל התאימות היחסית של Pipelines של Deployment, הרבה פעמים יש שגיאה ב-Production, והיא לא משתקפת חזרה ל-Pipeline של ה-Continuous Delivery - ואז המפתח פשוט יושב ואומר “טוב, זה כנראה לוקח לו הרבה זמן . . . זה כנראה הגמדים שלוקחים את הקופסאות ל-AWS התעכבו בדרך . . . “ורק אחרי 20 דקות או 30 דקות יש איזושהי הבנה שמשהו השתבש בצורה נוראית . . . (רן) זאת אומרת - ברגע שאני עושה Merge של Branch ל-Master - אני אף פעם לא אעשה הרי Commit ל-Master, זה אסור . . . - ברגע שאני עושה עושה Merge ל-Master, אני צריך להניח שהכל, כאילו, ב-Production, נכון?(ירון) לאו דווקאיש כלים של GitOps שלוקחים את זה בתור ה-First Class Citizen, הם באמת בונים על זה שתיהיה סדרה של הגנותבין אם זה טסטים ו-Smoke Tests או Canary ו-Gradual releases, כמו שהזכרתוהם פשוט מניחים שהמשתמש עושה בהם שימוש.אנחנו מעדיפים Deployments יותר קונטקסטואליים, ובגלל זה בהתחלה התחלנו להשתמש ב-Flux, שהוא כלי של WeaveWorks שלוקח את המתודלוגיה הזאת קדימה, ומנסה באמת “לאסור על ה-user” ליצור שינויים . . . ליצור הבדלים בין Production לקוד.ועברנו ל-Argo - כלי של Intuit - שחולק איתו הרבה מהקוד, אבל משנה הרבה מהדינמיקה והמכניקה.הוא מאפשר באמת קודם כל להכניס את הקוד לתוך ה-Master - ורק אחר כך להגיד למפתח “תעשה את הסנכרון שלך בצורה מודעת”.יש גם אופציה ליצור Sync אוטומטי, ואז ברגע שההגנות האלו נמצאות ובאמת יש את הבטחון לדעת שמה שנכנס ל-Master יכול להגיע ל-Production, ניתן להדליק את ה-Flag הזה ולהינות מחיים עם הרבה פחות Toil, הרבה פחות עבודה ידנית.(רן) אז דיברת על Reconciliation ועל זה שיש הפרשים בין מה שקיים ב-Master, שאמור לתאר את סביבת ה-Production, לבין סביבת ה-Production האמיתית, וההפרשים האלה יכולים לנבוע מכמה דברים - קוד שנכנס ל-Master, אבל עדיין לא עבר Deployment, אבל זה יכול גם להיות לנבוע מזה שהלך איזשהו איש Ops ושינה את ה-Production . . . נכנס ל-AWS או עשה SSH לאיזשהו שרת ושינה שם משהוואולי יש Drift-ים מכל מיני סוגים, ואני בטוח שכל מי שנמצא בעולם האופרציה נתקל בדברים האלה.אבל איך . . . מתי זה הגיע לנקודה שבה זה ממש הפריע לכם, ואמרתם “עד כאן! פה אנחנו חייבים לקום ולעשות איזשהו מעשה! אצלנו לא יהיה הבדל בין Master ל-Production!” . . . היה איזשהו אירוע מכונן שגרם לכם לעשות את זה?(ירון) אז היה . . . לפני שאני אסביר את האירוע הזה, אני גם אסביר איך הגענו למקום שבו אפשר לחשוב בכלל על הקונספט הזה.כמו שאמרתי - עשינו את זה עוד הרבה לפני שקראו לזה GitOps, והתחלנו במקומות הרבה יותר Low-stakes מסביבת ה-Production, שמגישה תוכן לקרוב למאה מיליון משתמשים היום . . .איפה שהתחלנו זה בתשתית הניטור שלנו - זה היה כבר לפני יותר מחמש שנים.רצינו לעשות דמוקרטיזציה של הניטור, לא רצינו שזה יהיה משהו שמפתח אומר “אני רוצה לנטר בבקשה . . . קח את השליפה הזו ושים אותה בבקשה על הכלי”וכדי שזה יקרה, יצרנו איזשהו Repository, שמנו בו קובץ JSON ענק ואמרנו למפתחים: “פשוט תכתבו פה את כל מה שאתם רוצים לנטר, וזה יגיע “בדרך קסם” אל התשתית”.אז זה היה ה-Production הראשון אצלנו שבעצם כל Commit ל-Master הסתנכרן עם הקוד, והיופי של זה היה שבאמת יכולנו לשחק פה ב-Stakes יותר נמוכים.שבירה של תשתית ניטור זו בעיה מסדר שני - משהו שיכול לקרות לדקה-שתיים בלי שהמשתמשים ירגישוזה בדרך כלל קורה בצורה מבוקרת, כשהמפתחים במשרדולכן זה היה משהו שנתן לנו להתנסות עם זה בצורה בטוחה.(רן) אז למעשה, המוטיבציה הראשונית שלכם הייתה לספק חווייית-מפתח יותר טובה - במקום שהוא ילך ויפנה אליכם ויבקש “תוסיפו לי בבקשה Monitoring” או שבמקום שיצטרך להכיר את כל החוכמות של כלי הניטור, הוא יכול לערוך איזשהו קובץ JSON ולעשות Commit - ומבחינתו זה ממשק העריכה - ועכשיו הוא מבין שברגע שהוא עשה Commit, יש איזשהו Hook שלוקח את הקובץ הזה ועושה לו Apply ל-Production.אז מבחינתך זה איזושהי חוויית מפתח יותר טובה - אבל זה עדיין . . . זאת אומרת, אני לא רואה עדיין איך זה בא ומטפל בתקלות Production . . . (יונתן) לכאורה, יכולת לממש את זה גם, נניח, עם CI/CD רגיל, נכון? בלי “הקונץ” הזה של הסנכרון או לבדוק את הפערים?(ירון) נכון - ואני אפילו אגיד שבאיזשהו שלב עברנו לזה: היה לנו Repository אחד מרכזי ואז הכנסנו איזושהי תשתית “כמו CD”, שלוקחת Commit-ים מ-Repository אחד ומזריקה אותם ל-Repo המרכזי הזה.ושם כבר התחילו להרגיש את החסרונות שאמרתי - הכלי היה נשבר הרבה פעמיםהיו נוצרים מצבים שבהם ה-Pipeline הקלאסי הזה, שמנסה להגיע למקום ה-GitOps-י, נתקע בגלל כל מיני טעיות שלא חזינו מראש, והיה קשה לקבל Visibility על דבר כזה.זה דורש יצירה של המון כלים, רק כדי שהדבר הזה יעבוד בצורה שהיא Flowless.(יונתן) עוד משהו שרציתי לשאול - איך ה-GitOps אל מול Infra-as-a-Code - זה משלים את זה? זה השלב הבא של זה?(ירון) זאת שאלה מעולה, כי באמת הרבה פעמים, את ה-Infra-as-a-Code אנחנו עדיין עושים עם כלים שהם יותר “Push-יים” כאלהאנחנו עבדנו קצת עם Terraform, נטינו יותר לכלי שנקרא Pulumi, שהוא סוג-של-כזה-Wrapper סביב Terraform, עם שפות תכנות יותר נפוצות.ושם מרגישים בדיוק את העניין הזה - שכדי עכשיו לשנות את ה-Infrastructure שלי, אני צריך לעשות Apply . . .ולפני שאני צריך לעשות Apply, אני ארצה לעשות איזשהו Preview, ולהציג אותו למפתחים, כדי שהם יבינו איזה שינוי הולך לקרות.ואז המנגנון הכמעט-אימפרטיבי (Imperative) הזה הוא נורא מורגש - נורא מורגש שהולך להיות איזשהו שינוי, וצריך לעשות איזושהי פעולה כדי שזה יקרה.ואחד הכלים שאנחנו מסתכלים עליהם יותר ויותר נקרא Xstate, וזה כלי שבאמת שם את ה-Infrastructure שרוצים ליצור כ-Custom resources בתוך Cluster של Kubernetes, ואז יש איזשהו Reconciliator, שבמקום לעבור עם ה-API של Kubernetes, הוא עובד עם ה-API של AWS או Azure או GCP - יוצר שם את אובייקטים.וזה שוב - שינוי תפיסה יחסית מאסיבי, כי זה אומר שברגע שמפתח עשה commit ל-Master, אז Xstate תופס אותו ומסנכרן אותו לענן אין איזשהו שלב באמצע של Apply, של Preview . . . כל הדברים האלה חייבים לקרות ב-PR, לפני שהקוד משתנה.(רן) מצד אחד - זה נשמע נורא אלגנטי . . . כאילו פיהם וליבם של Production ו-Master שווים. מגניב, נורא סימטרי כזה, נורא פשוט . . .מצד שני - גם נשמע נורא מסוכן: עשיתי Commit . . . סליחה - עשיתי Merge ל-Master, לא עשיתי Commit ל-Master. . . עשיתי Merge ל-Master, ואולי אני לא כל כך יודע מה זה הולך לייצר, זאת אומרת - אני לא יודע שזה עכשיו אולי הולך לייצר בלגאן לא נורמלי בתוך Production. . . אין לי איזשהו מקום קטן שבו אני יכול ככה להתנסות, בקטנה, לפני שאני עושה את ה-Commit? איך מטפלים? איך עושים מיטיגציה (Mitigation) למוטת הכנף הענקית שפתאום כל אחד מקבל?(ירון) זו שאלה נהדרת, כי היא מחזירה לשאלה הקודמת ששאלת - של בעצם “איזו בעיה ניסינו לפתור?”כי דווקא בניגוד או בהיפוך כזה של התמונה הזאת, החוסר ביטחון הגיע לפני שהיה לנו את ה-GitOpsהייתה לנו בעיה שהתשתית… פשוט כשעובדים עם תשתיות כמו Kubernetes אז התשתית נהיית מאוד מאוד מורכבתהיא גם נהיית במצב שכדי להרים Cluster חדש, במקרה של איזושהי בעית Production, בנאדם צריך לעשות פעולה ידנית, שיכול להיות שיכולה לארוך כמה שעות - וזה היה מצב מאוד לא נוח.קשה היה לדעת, כשיש לי מספר מוגבל של Cluster-ים - במקרה שלנו שניים - ואם עכשיו אחד מהם נופל אז אני צריך להיכנס למרוץ נגד השעון כדי ש-Cluster חדש יעלה.וזה גם עיכב אותנו מלייצר, אולי, את מה שרמזת אליו - שזה איזשהו מקום, איזשהו “מגרש משחקים” או ארגז חול בצד, שבו אפשר לעשות את כל השינויים בצורה בטוחה, ולדעת שלא משנה מה אני אשבור - Production לא ידע מזה.וזאת בעיה אחת שבאמת נאבקנו בה הרבה לפני שהגענו לעולם ה-GitOps המובטח.בעיה נוספת, שגם אותה אני אסביר איך GitOps פתר עבורנו, זה הארגונומיה של המפתחים מול Kubernetesכי מפתחים אצלנו היו רגילים לעבוד מול אילו-שהם Self-contained Services, שרצים על PaaS, כמו Herokuבמקרה שלנו זה היה Azure, אבל זו הייתה איזושהי סביבה סגורה, מכונות וירטואליות שכל מפתח קיבל, שמריצות את ה-Services שלו.ופתאום לעבור ל-Cluster שהוא Multi-tenant, שכולם עובדים ביחד, שצריך לדעת לא “לדרוך אחד לשני על הבהונות” . . . שיש בהם הרבה-הרבה אובייקטים חדשים שהמפתחים לא מכירים - יצר שינוי פרספקטיבה, שלא היה קל להנחיל לצוותי הפיתוח.אנחנו בצוות עבדנו עם Kubernetes הרבה, אבל המפתחים לא תמיד רצו להבין את המורכבות הזאת, והיה קשה לחשוף אותם לזה בצורה שתפגע איפשהו באיזון הזה . . .(רן) אז גם בהקשר הזה, זה נשמע כאילו אתה בעצם מייצר ממשק למפתחים עבור Kubernetes . . . זאת אומרת: “אתם לא צריכים ללכת ולהשתמש ב-Kubectl או בכלים אחרים” אלא אתם צריכים, לצורך העניין, “לעשות Commit לאיזשהו קובץ JSON ומשם אנחנו כבר נטפל בזה”.(ירון) נכון . . . אז היום הכל YAML, אבל כן - זה השינוי המרכזי שעשינו . . .(רן) . . . השתדרגנו . . . (ירון) . . . עכשיו יש מקפים במקום סוגריים מסולסלים . . .(יונתן) תזהיר את אבישי - יש לו איזה משהו נגד YAML-ים . . (רן) מאזיננו אבישי - תסתום רגע את האוזניים . . . כל העולם YAML כבר, אין מה לעשות . . .(ירון) בהרבה מקומות ראיתי שכבר מגייסים מפתחי YAML . . . (רן) כן - אולי המפתחי XML בפנסיה יהפכו למפתחי YAML . . . נחזור רגע אחורה - דיברת קודם על המוצר שלכם, ואמרת שהמוצר הזה יודע לתת תמיכה למכונות כביסה למחשבים אישיים וכו'. אז כל פעם שאני עושה Commit ל-Master, נגיד לאפלקיציה ה . . .(יונתן) אתה לא עושה Commit ל-Master, רן . . . . תזכור - עוד פעם, אני אעשה לך Reject . . . (רן) איך נפלתי . . . זה הפרוידיאני בי שמדבר . . . אז כל פעם שאני עושה Commit ל-Branch, ו-Merge ל-Master, אחרי Code review, כמובן, ומתקן את כל ההערות, ועובר CI - אז לאפליקציה האחרונה המגניבה שכתבתי למכונת הכביסה של סבתי - אז זה מיד הולך לכל מכונות הכביסה בעולם? לכל הטלפונים בעולם? זאת אומרת - זה באמת מה שאנחנו רוצים?(ירון) אז התשובה היא “לא” . . . כמו שאמרתי, יש לנו מידה מאוד חזקה של Control, כי ככה רצינו לבצע את השינוי הזהלא רצינו להפחיד אנשים ולהגיד לכל מי שעובד על הקוד אצלנו “תזהרו מאוד מה-Master!”הרעיון היה באמת לאפשר לאנשים יותר Visibility, יותר שקיפות - ולאט-לאט להגיע למודל הבגרות הזה, שבו אנחנו מרגישים בנוח לסנכרן דברים בצורה אוטומטית.זה אומר שהיום, רב שירותי ה-Backend שלנו נפרשים באמצעות כלי GitOpsבאמצעות Argo, שציינתי קודםמה שהמפתחים מקבלים מזה זה להחליף את ה-Pipeline המסועף והקשה להבנה באיזשהו Commit ל-Masterעכשיו, במקום לעשות את ה-Deployment בשלב הזה של ה-Pipeline, יש רק Commit אחד, שמשנה את ה-Version ש-Argo מסתכל עליו.ברגע שנעשה שינוי ה-Version הזה, המפתח הולך ל-UI אחר, של Argo - הוא רואה בצורה מאוד מאוד ברורה שהשתנה שדה מסויים ב-YAML של ה-Deployment שלו, עם ה-Tag.וזה מייצר הרבה דברים מאוד טובים עבורנו - כי גם אם עכשיו מבצעים סנכרון של הדבר הזה, אז זה כבר לא איזשהו Context-switch של לעבור עכשיו ולהסתכל מה המצב - Argo ממש מראה יפה, עם לבבות ירוקים או לבבות אדומים-שבורים , מה הסטטוס של הגרסא הישנה והגרסא החדשה.וזה נותן פידבק מאוד מהיר - האם השינוי הזה כרגע עובד? האם השינוי הזה נכשל? האם צריך לחזור רגע לשולחן השרטוטים ולתקן אותו?במצב הנוכחי, זה דווקא הגביר מאוד את ה-Control ואת השליטה שלנו ב-Production, ולא יצר אי-יציבות וחסר ודאות.(יונתן) ה-State הזה, נניח של שינוי הגרסא - נניח שאני מהנדס, ויש לי גרסא חדשה - אתה אומר, בעצם, שדבר ראשון אני צריך לעשות Branch ו-Commit ו-Merge, בגלל שאני רוצה גרסא חדשה, עם איזשהו Tag - זה ב-Repository של האפליקציה שלי או שזה ב-Repository של האפליקציה שמנהלת את ה-GitOps?(ירון) זו שאלה נהדרת, כי באמת אנחנו עושים משהו לא מסורתי שם - אנחנו כן עושים את כל השינויים האלו ב-Repository של הקוד, ובדרך כלל - אני מקשיב בכנסים, קראתי פוסט יפה של מישהי מ-Riskified שכותבת איך הם עובדים עם Argo - וראיתי שהקונצנזוס, פחות או יותר, הוא להפריד את ה-Repository שהמכונות קוראות וה-Repository שבני האדם קוראים . . . אז בדרך כלל, מה שמקובל זה ליצור, נגיד, את “Yaron-API”, להגיד שזה הולך להיות ה-Service שלי, ופה אני, כבן אדם, כותב קוד - ואז לתת למכונה לעשות את ה-Commit לאיזשהו Repository אחר, שיקרה “Yaron-API-Deployment”, ומשם לקחת את ה-State שה-Argo מסתכל עליו.אנחנו, פשוט בגלל שרצינו את הנושא הזה שאמרתי קודם - רצינו לשפר ארגונומיה של מפתחים - לא רצינו שיהיה להם את ה-Context-Switch הזה, את המעבר כל הזמן בין ה-Repo שבו הקוד כתוב לבין ה-Repo שבו ה-Deployment קורה . . .(יונתן) גם יש עוד יתרון - אתה תעשה git-log ותראה את ה-Deployments ולא . . . הרבה אנשים אומרים הפוך . . . הם אומרים “אני לא רוצה לראות Commit-ים של מכונה” [אחלה שם לפודקאסט, אגב], זה לא קדוש.אבל אנחנו מאמינים שה-Commit-ים האלה באמת, כמו שאתה אומר, מייצגים את השינוי של ה-State.(רן) אני מניח שהויכוח הזה, או הדילמה הזו, במצב של Mono-Repo היא פחות רלוונטית - עדיין יש התלבטות, נניח שאנחנו בעולם של Mono-Repo, ואני מבין שאתם לא - יש את ההתלבטות של האם לשים את הקונפיגורציה קרוב לקוד, או את כל הקונפיגורציה במקום אחד, לצורך העניין באיזשהו Branch או תת-עץ של ה-Mono-Repo.גם אני הייתי בהתלבטות הזאת הרבה פעמים, ואני חושב שיש פה Trade-off - מצד אחד זה נחמד שהקונפיגורציה קרובה לקוד, ולפעמים ממש בתוך הקוד; ומצד שני, זה גם נחמד לקבל איזשהו מבט על כל הקונפיגורציה של כל ה-Service-ים השונים, וככה להבין איך הדברים קורים.אז אני מבין שאתם יותר נוטים לשים את הקונפיגורציה קרוב לקוד, אם אפשר לקרוא לזה “קונפיגורציה”, בוא נקרא לזה . . .?(ירון) אז גם פה יש כמה תשובות . . . דבר ראשון - אנחנו לא נגד Mono-Repo, אנחנו מאוד-מאוד בגישה של “לתת למפתחים ולמפתחות פשוט להחליט מה הכי טוב ב-Context של המשימה הנוכחית” ולכן יש אצלנו קבוצה שלמה שעובדת בתוך Mono-Repo אחד, שמחזיק את כל ה-Service-ים, בלי שום קונטקסטויש לנו קבוצה שעובדת עם Repo-per-Serviceויש קבוצה שלישית, שעובדת עם Mono-Repos קונטקסטואליים . . . (יונתן) אתם לא נגד Mono-Repo - פשוט יש לכם הרבה כאלה, זה מה שאתה אומר . . . [“רבים מידידי הטובים ביותר” וכו'…](ירון) בדיוק . . . אנחנו אוליגו-Repo . . .(רן) לא, יש לזה גם שם - Multi-Mono-Repo . . . כתבו את זה לפנינו . . .(ירון) כן . . . אז לא הגענו למצב שבאמת אנחנו יכולים להגיע לרמות של Facebook, והקסמים שהם עשו עם Mono-Repos שם.בסוף, Mono-Repo ענק שמחזיק את כל הקוד זו לדעתי משימה הנדסית כבירה, וצריך לעשות אותה בצורה מאוד מחושבת.ושוב - בגלל הצורה ה-Distributed והלא-פרספקטיבית שאנחנו עובדים בה, שאנחנו לא רוצים להגיד לאנשים איך לעבוד, אז כמעט בלתי אפשרי לחשוב על “כל המפתחים ב-Soluto כותבים ל-Repository אחד”,כי דברים קמים, אנשים רוצים לשנות דברים, להתנסות עם משהו חדשוברגע שאנחנו מאפשרים את זה, אז לא נקבל אף פעם את השליטה של להגיד לאנשים “כל ה-Commit-ים שלכם עכשיו יהיו רק ב-Soluto-Code” [וגם אז - רק אם הם טובים]וזה נחמד, כי זה כן גורם לנו להתקדם קדימה . . .(רן) כן . . . אני חייב להעיר שאם כל זה שאני מכבד את שיקול דעתם של המפתחים, ואני הרבה פעמים גם לא רוצה להגיד למפתחים אחרים מה לעשות - אני חייב להגיד שלפעמים יש הרבה חוכמה בכן להגיד למפתחים מה לעשות, כי אני חושב שהרבה פעמים ההחלטות הן שרירותיות, והחלטה אחת טובה כהחלטה אחרת - הבעיה שכששתי החלטות, ששתיהן שקולות, אבל כששתי החלטות נלקחות, אז אתה בבלגן . . . אז דווקא בקטע הזה אני נוטה להיות קצת יותר הדוק, ולבוא ולהגיד “חבר'ה, נכון - יש פה שתי דעות, אבל אני בוחר את זאת, “כי ככה” - ובואו נתגלגל עם זה הלאה”כי אחרת פשוט נוצר בלגאן - וראיתי את זה קורה בחברות גדולות . . . ראיתי את זה קורה ב-Google,אני מבין ממה שאתה אומר שזה קורה גם ב-Facebook . . . מתקבלות החלטות שרירותיות, וכל המפתחים לפעמים אולי מקטרים - אבל הולכים לפיהןוזה עושה הרבה טוב, בסופו של דבר - “המסר שלי לאומה” הוא של “לא לפחד לקבל החלטות בשביל המפתחים”, ובסופו של דבר, בשורה התחתונה, אני חושב שזה עושה טובה, כי זה יותר קל כשדברים הם אחידים.(ירון) זה מעניין מאוד - ואני חושב שמה שאתה מציין הוא גם פונקציה של גדילה.אני חושב שיש שלב מסויים שבו חברה יכולה להרשות לעצמה להתפזר יותר ולנסות יותר דברים, ויש שלב מסויים שבו צריך להתכנס ולהגיד “אוקיי, ה-Business הגיע ל-SLA מאוד גבוה שהוא צריך לספק, החברה גדולה מספיק כדי שלא נוכל לתת ל-15 Frankenstein-ים לרוץ במקביל, המפלצות של . . .(רן) כל מפלצת טובה . . . כל מפלצת לכשלעצמה היא בסדר . . . אני לא אומר שההחלטות הן לא נכונות, הבעיה שיש החלטות אחרות, והחלטות סותרות לפעמים, החלטות שלא עובדות טוב אחת עם השנייהאו אפילו אם לא סותרות - לייצר Infrastructure שמתאים גם . . . לצורך העניין אפשר לקחת שפות תכנות - Infrastructure שמתאים גם ל-Python וגם ל-Ruby וגם ל-Java זה אפשרי, אני בטוח שזה אפשרי - זה רק יותר קשה.אז אתה יודע - שפות תכנות אפשר בדרך כלל, רוב החברות מתקבעות, זו לא הבעיה - אבל עדיין יש עוד הרבה בחירות אחרות:איך עושים Messaging, איך שומרים, באיזה Database משתמשים וכו'.(יונתן) אני חושב שאני מסכים - מבחינתי, המדד של מתי צריך לקחת כזאת החלטה או “דיקטטורה נאורה” שכזאת זה כשאתה צריך “לעבוד לרוחב”דיברת על תשתיות - ברגע שאתה צריך להתחיל . . . כשתשתיות נהייה “עניין”, אז קשה לתמוך בוריאנטים השונים . . . [כן . . .](רן) בוא נחזור רגע אחורה ל-GitOps . . . אז נלך, שנייה, Back-to-Basics: הבנו את הקונספט של “Mater ו-Production צריכים להיות שווים”. אז אני, אתה יודע, מתחיל ככה ב-Back-to-Basics ואני רוצה לעשות GitOps, אוקיי? אז מה אני עושה? אני מייצר Git-Hook, ובעצם אני צריך לדאוג לשני דברים . . .אחד זה שיהיה לי קוד שיודע לתאר את סביבת ה-Production, נגיד - כמה Server-ים, כמה Services, מה ה-Multiplicity שלהם, כל מיני דברים . . . מה שיודע. . . לצורך העניין קובץ YAML שיודע לתאר את סביבת ה-Production, ובטח יש שפות למכביר שיודעות לעשות את זה.אז אני צריך קוד שיודע לתאר את סביבת ה-Productionושתיים - אני צריך לדעת לעשות איזשהו Git-Hook, נגיד, שכל פעם שעושים Commit אז Production מתעדכן לפי מה השינוי האחרון.אז זה אולי GitOps בממש-ככה-30,000 רגל - ואתה הזכרת שיש כמה כלים שיודעים לעשות את זה - הזכרת קודם את Flux של WeaveWorks והזכרת את Argo של Intuit - ואני מניח שיש עוד כלים אחרים בשכונה.אז אם קם הבנאדם בבוקר ואומר “יאללה - בא לי GitOps!” [חמור מאוד] או “אני חייב GitOps!” [תופעת לוואי חדשה?] או “המנהלים שלי אומרים לי שאני צריך GitOps . . . “ [המקרה היותר נפוץ?] - איך אתה ממליץ לו להתחיל?(ירון) אז אני אזכיר פה את Kelsey Hightower, שהוא מן בחור כזה שאוהב לדבר על Kubernetes, מ-Google [בדיוק זז שם קצת], ואני מאוד אוהב גם את הצורה שבה הוא מנגיש ידע מורכבנגיד, לפני הרבה שנים הוא כתב את Kubernetes-the-hard-way [אבל כבר קישרתי לזה…], שזה מעיין מדריך על איך להרים את Kubernetes מ-Scratch, לעשות את כל הפעולות שעשויות, עבורנו, בצורה ידנית - וכשעברתי דרכו הרגשתי היכרות הרבה יותר טובה עם התשתית הזו, שהיום מעירה אותי בלילה אם יש לה בעיה . . .והוא עושה הרצאה מדהימה - יש כבר כנסים שנקראים GitOps Days מרוב שהדבר הזה טרנדי - הוא עשה הרצאה ממש מעניינת בכנס שהיה בשנה שעברה, שבה הוא מראה איך עושים Reconciliation Loop מ-Scratch . . . הוא ממש כזה . . . מראים קוד שהוא כותב ב-Go תוך כדי על המסך, תוך כדי הכנס - והדבר הזה מייצר, במקרה שלו, פונקציות של Cloud Run, שזה איזשהו Serverless כזה של Google.אני חושב שההרצאה הזאת היא פתיח מדהים בשביל לעשות דימיסטיפיקציה (Demystify) למשהו שבאמת, כמו שאמרת, יכול להישמע מורכב ויכול להישמע אפילו די מפחיד, כי זה מראה שהדבר הזה יכול להיות מאוד נשלט.אחרי שעוברים את המשוכה הזאת, של להבין את הקונספט, הייתי כן ממליץ לבחור את אחד מהכלים הגדולים - בין אם זה Argo או Flux, כי הם כרגע הכלים ששולטים בשוקאבל גם חשוב מאוד, כנראה, להבין את הבעיה - אם Argo ו-Flux מתאימים מאוד לתחזוקה של Kubernetes, אז אם רוצים לתחזק משהו שהוא מחוץ ל-Kubernetes, צריך לבחור משהו שהוא כלי שיודע לעשות את זה גם בלי הכוח הזה.וכמו שאמרתי - גם Puppet ו-Chef יודעים לעשות את זה עבור מכונות Linux, ויש כלי שנקרא Atlantis, שיודע לעשות את זה עבור Terraformואז בעצם כל אחד מהכלים האלה יכול להיות Entry-point ל-GitOps, לא משנה מה האתגר שכרגע עומד מולכם.(רן) נזכיר, אני חושב ששווה אולי לבוא ולמצוא את המקבילות בין הכלים השונים - אז גם מי שמכיר את Puppet ואת Chef - הם כולם עובדים באיזשהו Mode של Reconciliation Loopזאת אומרת - מסתכלים מה המצב הרצוי ועושים Apply, וכל פעם עושים Reconciliationזאת אומרת שאם משהו שהגדרת, לצורך העניין, שצריך להיות קובץ במערכת על מחשב והוא לא שם - אז הוא בכל פעם ייצר אותו מחדש אם הוא ימחק.גם Puppet וגם Chef עובדים באותה צורה - וגם Kubernetes הרבה פעמים עובד באותה צורה, זאת אומרת שגם ל Kubernetes יש Reconciliation Loop שמסתכל על ה-Resource-ים ועושה Apply ל-Resource מחדש בכל פעם שצריךכמובן שלא סתם . . . אז בהקשר הזה, המוטיב הזה של ה-Reconciliation Loop עובר, כנראה, בהרבה מאוד מהכלים שהזכרת.(יונתן) לפי מה שירון . . . לפי מה שתיארת, יש יכולת גם לעדכון מהצד השני - יכול להיות שזה לא שב-Production, לא רק שחסר קובץ, אלא שמישהו, לא יודע, שינה אותו, או שמישהו נכנס ל-UI של ה- Management של Kubernetes ושינה את ה-State Loader - איך ה-Flow המרכזי . . . מה יקרה אז?(ירון) זה בעיני הדבר . . . זה ממש ה-Added-Value, אולי אפילו ה-Killer-Feature של GitOps, כי אלו הפתעות שתמיד היו תופסות אותנו במקום הכי לא מוכן, ואני מאמין שזה קרה להרבה צוותי Production [מה?! מה פתאום?]שפשוט איזשהו שינוי נעשה בזמן של מקרה חירום, או אולי כלאחר-יד מתוך איזשהו חוסר הבנה, ולא הייתה לדבר הזה שום נוטיפיקציה (Notification)ואז בדרך כלל מגלים את זה חודשים, אם לא שנים, אחר כך, כשהידע כבר נשכח . . . יש את הפתגם הזה - שקוד שכתבת אחרי חצי שנה הוא כמו קוד שנכתב על ידי מישהו אחר [יש לזה אפילו שם - Eagleson's law] . . . אז גם עבור שינויים ב-Production הדבר הזה תקף - מה גם שהם הרבה פחות מתועדים . . .ב-GitOps, בצורה שאנחנו עובדים, Argo מחובר ל-Slack - וכל פעם שמישהו עושה Deployment יש הודעה חמודה כזו עם שאומרת “הקוד שלך שינה בהצלחה את ה-Production”אם במקרה, נגיד, הקוד שלי מסתמך על איזשהו Redis חיצוני, וה-Redis הזה פתאום נפל, אז אני אקבל “לב שבור ועצוב ” שאומר לי “רוץ מהר! משהו השתנה, זה כבר לא נראה כמו ה-Production, אני שבור וקשה לי” . . . (יונתן) אוקיי . . .(רן) מה ה-Hack החביב עליך? נגיד, מסוג הדברים שהתעוררת בשתיים-שלוש בלילה, וגילית “מי לעזאזל עשה את זה?!”? . . . אני אתחיל עם שלי - נניח שאתה נכנס ואתה מגלה שמישהו, לפני חצי שנה, כמו שאתה אומר, ערך את קובץ ה-Host והוסיף שם איזשהו Entry, כי כנראה פעם זה תיקן לו איזשהו משהו . . . עכשיו את מגלה ש Name Resolution מחוץ ל-Host עובד שונה לחלוטין ממה ש-Name Resolution עושה בתוך ה-Host - וזה מסביר הרבה דברים, בדרך כלל . . . (יונתן) סתם, פתאום התחלתי לחשוב האם זה יכול לעזור באילו-שהן בעיות של Security? או של מישהו ששינה משהו עקיף ב-Production, והוא לא עשה Git-Merge וכל הסיפור הזה . . . .(ירון) אז בהחלט . . . אני רק אגיד על ה-Hack-ים - שזה תמיד יהיה נס, אין ספק . . .ה-Hack החביב עלי זה שכשעובדים ב-High Availability, שולחים גרסא אחת של Production ל-Site אחד וגרסא שנייה ל-Site אחר - ועכשיו לך תבין למה חצי מה-Traffic מחזיר תשובה אחת וחצי מחזיר משהו אחר . . .(רן) יש את הסיפור המפורסם על ה-Trading. . . (ירון) כן, Knight - מסכנים . . .(רן) . . . שהם עדכנו גרסא, אבל כנראה נשאר שרת אחד או שניים, שאולי היו Offline בזמן עדכון הגרסא - וזה גרם לחברה לפשוט את הרגל, חברה של שווי, בגדול, של מיליארד דולר, שהפסידו ב-Algo-Trading את כל הכסף שלהם בגלל איזה Deployment שלא עלה נכון . . .(ירון) כן, זה סיפור נורא כשקוראים אותו, ופרקי הידיים מלבינים כי אתה חושב שאולי זה קורה לך עכשיו . . . (רן) ממש עכשיו . . . אבל ממש ממש עכשיו . . .(יונתן) . . תן לי רגע רק לבדוק את ה-Inspection . . .אז בנוגע ל-Security - יש כאן באמת יתרון אדיר, כי גם - ב-Continuous Delivery מסורתי, אני חייב לתת לתשתית שלי את היכולת לגשת ל-Production, ונגיד, אם זה Jenkins שיושב אצלך בשרת, אז לא אכפת לך כנראה לשים שם איזושהי גישת-כתיבה ל-Productionאנחנו עובדים עם SaaS, עם codefresh - חברה ישראלית שעושה CI ממש נחמד לדברים שהם Docker ו-Kubernetesועדיין, עם כל האהבה והרצון הטוב - אנחנו מעדיפים שהם לא יוכלו לגשת ל-Production . . . ברגע שאנחנו עושים את ההפרדה הזאת, הם יכולים לגשת רק עד הקוד - והמוצר היחיד שיכול לגשת ל-Production הוא ה-Reconciler של GitOps, שבמקרה שלנו זה שרת של Argo שיושב על ה-Clusterואז ה-Attack surface הוא הרבה יותר נמוך - כי הוא מלכתחילה יושב שם ומלכתחילה עושה שינויים, וזה טבעי שאצלו ישבו המפתחות [חביתוש?].ואני אעשה גם איזה Shout-out לפרויקט Open-Source שכתבנו ב-Soluto ושנקרא kamus - והוא גם מתבסס על GitOpsהרעיון שעשינו שם הוא שהראינו שה-Secret-ים ב-Kubernetes הם עוד לא בשלים, פחות או יותר - Secrets ב-Kubernetes הוא פשוט איזשהו אובייקט מקודד ב-Base 64, וזה אומר שכל מי שניגש ל-UI ב-Kubernetes ולוחץ על הכפתור של העין פשוט רואה את ה-Secret, פשוט רואה את ה-Plain-text, ולא הרגשנו עם זה בנוח . . .אז כתבנו Controller, שאפשר להתקין על כל Cluster, ומה שה-Controller הזה עושה הוא לאפשר למפתחים להצפין את הערכים מקומית אצלם על המחשב, לעשות להם Commit ל-Gitואז לכל Container נוסף איזשהו Init-Container, שעושה Encryption על ה-Cluster.זה גם מאוד מחזק את ה-Security, כי ה-Decryption יכול לקרות מעכשיו רק בסביבת ה-Productionזה דומה, נגיד, ל-Vault, אבל מגיע עם Operation overhead הרבה יותר נמוך.(רן) הזכרת מקודם - ואולי בזה, ככה, נסיים את הערב - הזכרת מקודם שעם המעבר ל-Kubernetes, מפתחים הרגישו איזושהי עלייה ברמת המורכבות, שהם פתאום צריכים להבין יותר Production, ואז יצרתם ממשק משתמש, או לפחות אני תיארתי את זה ככה - יצרתם ממשק משתמש, ממשק מפתח, באמצעות GitOps.האבחנה שרציתי להגיד זהש-Kubernetes מאפשר GitOps, נכון? אולי זה לא הכלי היחיד שמאפשר GitOps, אבל בהחלט אחד הכלים שמאפשרים GitOps.כי הוא נותן לך לתאר את סביבת ה-Production ולעשות לה Apply יחסית בקלותאז Kubernetes אמנם מאפשר GitOpsמצד שני, לפני Kubernetes אולי לא היה צריך GitOps, כי הדברים היו יותר פשוטים . . .אז אני סתם תוהה האם זו אבחנה שנראית לך מוצדקת, נכונה?(ירון) אני חושב שכולם מכירים את ה-Death-Star של Netflix, שמראה פשוט מיליארד שירותי microService שמדברים אחד עם השניוהם כתבו את Spinnaker, שזה כלי שהוא מזכיר . . . הוא מאוד מאפשר את הסיבוכיות שיכולה להגיע בדברים של Continuous Deliveryעם כל היופי והאלגנטיות של הכלי הזה, אני חושב שהוא בא לשרת משהו שאם לא צריך אותו, אז זה יהיה נחמד להיפטר ממנו.ושוב אני אצטט את Kelsey Hightower שאומר שהקסם והחידוש ב-Kubernetes זה שהתשתית מתוארת כדאטה, לא כקונפיגורציה (Configuration)זו לא סדרה ל צעדים אימפרטיביים (Imperative) שדרושים כדי שמכונת Linux תוכל להגיש קוד ב-Ruby - זה תמיד יהיה דאטה - זה תמיד יהיה קבצים ב-YAML שנשמרים ב-Database, והם אלה שמאפשרים את העלייה של Production.(רן) כן - וזה אולי אחד מהדברים שמאפשרים לעשות GitOps בצורה יחסית פשוטה, כי כל מה שצריך לעשות זה Commit לקובץ YAML - ולעשות Apply . . .(ירון) בהחלט(רן) טוב - אז תודה רבה, ירון, היה סופר-סופר מרתק. יש משהו שהיית רוצה עוד להגיד לפני שנסיים?(ירון) אז אני אשמח להגיד שאנחנו מגייסים - גם לצוות שלי וגם למגוון תפקידים ב-Solutoאם כל מה ששמעתם פה נשמע לכם מעניין, מבחינת החזון של החברה או מבחינת הדברים היותר Geek-יים - בואו, תתראיינו, תתקבלו . . . (רן) מעולה . . .(יונתן) אה, אפשר למסור ד”ש, רן?(רן) קדימה, נו . . . עם איזה שיר? רגע, שאני אכין את התקליטייה . . .(יונתן) שנכין בתקליטייה . . . אז למאזין אורי להב, ששט לו בדוגית בחופי הים התיכון . . . (רן) אורי - מתגעגעים אליך, חזור הביתה!טוב - אז תודה רבה לשניכם, ויאללה, נשתמע . . . להתראות.ובהצלחה ל-Reversim Summit 2021 . . . הקובץ נמצא כאן, האזנה נעימה ותודה רבה לעופר פורר על התמלול
Lindsay and Steve talk with Maya Shavin about XState, a library for building finite state machines. We talk about what XState is, how it compares to global state management tools like Vuex, and how to integrates it with Vue. We also discuss XState's visualizer, which helps developers see how their state machines work. Panel Lindsay Wardell Steve Edwards Guest Maya Shavin Sponsors Dev Influencers Accelerator Links VoV 113: CSS and Components with Maya Shavin | Devchat.tv Image and Video Upload, Storage, Optimization and CDN Maya Shavin - Web developer | Speaker | Blogger | Organizer | Bookworm XState - JavaScript State Machines and Statecharts GitHub | davidkpiano/xstate Usage with Vue | XState Docs GitHub | mayashavin/vue3-xstate-demo XState Visualizer Twitter: David K. ( @DavidKPiano ) Damian Dulisz on Twitter Twitter: Maya Shavin ( @MayaShavin ) Picks Lindsay- The Initial Preview of GUI app support is now available for the Windows Subsystem for Linux Maya- Mac - Apple Steve - Why You’re Christian - David Perell Steve- Daniel 5 NIV - The Writing on the Wall Steve- Leviticus 16:6-10 NIV - "Aaron is to offer the bull for his own sin" Contact Lindsay Twitter: Lindsay Wardell ( @lindsaykwardell ) Contact Steve Twitter: Steve Edwards ( @wonder95 )
Lindsay and Steve talk with Maya Shavin about XState, a library for building finite state machines. We talk about what XState is, how it compares to global state management tools like Vuex, and how to integrates it with Vue. We also discuss XState's visualizer, which helps developers see how their state machines work. Panel Lindsay Wardell Steve Edwards Guest Maya Shavin Sponsors Dev Influencers Accelerator Links VoV 113: CSS and Components with Maya Shavin | Devchat.tv Image and Video Upload, Storage, Optimization and CDN Maya Shavin - Web developer | Speaker | Blogger | Organizer | Bookworm XState - JavaScript State Machines and Statecharts GitHub | davidkpiano/xstate Usage with Vue | XState Docs GitHub | mayashavin/vue3-xstate-demo XState Visualizer Twitter: David K. ( @DavidKPiano ) Damian Dulisz on Twitter Twitter: Maya Shavin ( @MayaShavin ) Picks Lindsay- The Initial Preview of GUI app support is now available for the Windows Subsystem for Linux Maya- Mac - Apple Steve - Why You’re Christian - David Perell Steve- Daniel 5 NIV - The Writing on the Wall Steve- Leviticus 16:6-10 NIV - "Aaron is to offer the bull for his own sin" Contact Lindsay Twitter: Lindsay Wardell ( @lindsaykwardell ) Contact Steve Twitter: Steve Edwards ( @wonder95 )
David Khourshid, the creator of XState, a pianist, and a software developer, joins Ari Koponen on the Frontend Greatness podcast to talk about "From Redux to XState." In this episode: - Which parts of Redux you can replace with XState? - Can/should you manage all your state with state machines? - How to persuade your colleagues to use state machines? --- Episode Notes Social - David's Twitter: https://twitter.com/DavidKPiano - Ari's Twitter: https://twitter.com/apkoponen Show Notes - XState: https://xstate.js.org/ - XState Visualizer: https://xstate.js.org/viz/ - XState Catalogue: https://xstate-catalogue.com - "Video with Rainbow colored shirts": https://youtu.be/7erJ1DV_Tlo - Emmet: https://emmet.io/ David's Recommendations - Statecharts.dev: https://statecharts.dev/ - Matt Pocock: https://twitter.com/mpocock1 - XState Discord: https://discord.gg/xstate - Keyframers Youtube: https://youtube.com/keyframers - Constructing the User Interface with Statecharts: https://www.goodreads.com/book/show/4589003
In this podcast episode, Rob Ocel (@robocell) chats with David Khourshid (@DavidKPiano), software engineer at Microsoft and creator of XState! Topics discussed: What are state machines and why was XState created? Is XState a replacement for Redux or any other state management libraries? How to get started with state machines When to adopt libraries such as XState What are the advanced features of state charts and how do you learn about them Guest: David Khourshid (@DavidKPiano) - Software Engineer, Microsoft & Creator of XState Hosts: Rob Ocel (@robocell) - Architect, This Dot Labs This episode is sponsored by Syncfusion & This Dot Labs.
In this episode of Syntax, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Magic Bell - Sponsor MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 04:17 - All I Want for Christmas in React is: Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping 09:45 - JS or Nay-s (or Both) Shout out to Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces? Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines? Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri? Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger? Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors? Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte? Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine? 18:44 - Overrated / Underrated Deno ESM import from URL (no npm) Remix.run Xstate 27:49 - Hot Take Tweets https://twitter.com/wesbos/status/1336367385683636225 34:34 - Listener Questions Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance? Q: TypeScript all the things? Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.? Q: Can you share some exclusive BBQ tips? Q: What do you expect of Blitz.js in the next few years? Q: What’s the first node module you install in a brand new React project besides React itself? Q: Thoughts on using languages other than JS and TS with React like Kotlin? Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website? Links Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ Formik Mux Syntax Ep 206: State Machines, CSS and Animations with David K Piano Check My Hair - Wes Bos Houdini.How Rust Cloudinary LockPickingLawyer YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: VS Code color conversion extensions Wes: Acrylic lock picking kit Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
タイムライン 02:50 モバイル検索UXに関するAlgoliaのブログ記事 07:35 Bagisto - Laravelで出来ているeコマース用のオープンソースなプラットフォーム 09:30 Algolia for Bagistoで商品検索 11:40 Laravel 8に対応したAlgolia Scout Extendedのリリース 13:35 今週のAlgolia社内PodcastはCustomer Solutions EngineerのBobby Groves 15:20 Algoliaの Personalizationの導入と新機能のImplementation Help 17:50 EyeBuyDirectのAlgolia事例 19:30 AlgoliaのSarah Dayanが出演した4エピソード目のDreamStacks PodcastのトピックはState Machine 23:25 AlgoliaとGraphCMS共催のLive Codingセッションの様子は開催がこのPodcastの収録に間に合わなかったため次回にご紹介します 24:10 半田さんが来週から育児休暇で6週間お休みになります 関連リンク Mobile search UX: Best practices for in app search design Bagisto E Commerce Platform Bagisto - Get Set Bagisto Algolia for Bagisto Laravel Scout PHPのフレームワークLaravelとAlgoliaで開発 その5 - ヨシダレッド Live Coding Session - Advanced Search with Laravel and Algolia by Nuno Maduro Bobby Grovesのスケートボーディングのビデオ - City Cutts, Usual Suspect “Bobby Groves…” How EyeBuyDirect uses personalized search and browse experiences to increase revenue DreamStacks Podcast by Contentful and Algolia VueConf Toronto 2020 XState
It’s another potluck! In this episode, Scott and Wes answer your questions about libraries vs frameworks, Firefox, who would win a thumb war, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:37 - Q: Why does React bill itself as a library instead of a framework? 03:14 - Q: Are y’all still using Firefox now that it has been six months? 06:30 - Q: Is it possible to do a hasty treat regarding the Brave browser? Would love to hear your opinion on the tech, view on the approach and why we could need another browser in 2020. Peace! 09:34 - Q: Who would win in a thumb war, Wes or Scott? 10:56 - Q: What are your thoughts on XState and state machines for managing state in apps? I’ve been super interested in trying to use it, eager to hear what you both think. Also, wondering if you’d have any recommendations on how to use it with Apollo, whether to use XState’s internal context to store app state, or use the Apollo cache. 14:53 - Q: Should I start a new project with jQuery or React? 17:21 - Q: I’m a young teen (60 different pages? How do you organize the REST-ful API? How do you resolve dependencies between API endpoint 1 and API endpoint 2? How do you share information between multiple components in VUE-State-Management? 42:44 - Q: I’ve done Wes’ NextJS course and he uses Styled Components instead of Next’s own styled-jsx. What are your opinions on styled-jsx, and why you do (or do not) use it? Links React Firefox Brave CodeSandbox VS Code in the browser CodePen Source Making Design Patterns Figma Auto Layout ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Myths and Legends Podcast 2: Fictional Podcast Wes: Parchment Paper Baking Sheets Shameless Plugs Scott: Sapper For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
Sponsored By: Show Notes [00:01:28] David explains about XState and the concept of State machines. [00:02:42] In a lot of his talks, David references a paper from 1987, so Tessa wonders how David got into State machines and Statecharts. [00:06:01] Sarah ask David how does it feel to be at the root of this pattern rediscovery in the front-end world and how do you feel about seeing those tried and true patterns slowly emerging front end? [00:08:44] Ari asks David to give an example of a common scenario that we probably have all dealt with where a state machine might be better than Boolean state management? [00:14:12] Tessa wonders how does David recommend somebody goes from, I don’t know what a state machine is to oh, here’s how I can start using them today? [00:14:28] Sarah mentions about David having a visualizer on the XState website. She wonders if he’s considered pushing it into something that could maybe be a tool and has he considered building something like that to help with collaborative work? [00:16:44] David talks about testing, especially end to end testing, and how tedious it is. [00:18:33] Tessa is curious if David ever tries to represent piano playing with state machine? Piano was his major in college! [00:21:50] Sarah wonders what were David’s big turning points, the big realizations that he made as a library author, since he’s at the fourth major version in three years of XState now. She also asks him when he decided to port XState to Vue, did he encounter major challenges or different challenges that were imported into react? [00:29:35] Ari talks about having to address this past week, an ongoing problem caused by use of a Boolean state. Sarah asks David what are some of the most creative applications that he’s seen of XState? [00:33:30] Tessa is curious to hear more about how the state machines work with scoping of events? [00:36:55] David talks about moving from Vuex to XState. [00:42:46} David explains why he would like to see more examples of people using state machines in creative ways. [00:45:27] Tessa wonders if David has any thoughts or has he seen any interesting examples on state machines, potentially opening up a lot more interesting avenues to create dynamic or intuitive or accessible user interfaces? Picks of the week: [00:49:10] Tessa’s pick is a game, “Phoenix Wright: Ace Attorney- Dual Destinies.” (3DS, IOS, Android) [00:50:16] Sarah has two picks: “Ten Second Songs” on YouTube and a book called, “So You Want to Talk About Race,” by Ijeoma Oluo. [00:51:39] Ari has three picks: she seconds Sarah’s “Ten Second Songs” pick. Also, a song called, Disintegration Anxiety,” by Explosions in the Sky, and a Netflix show called, “Dead to Me.” [00:52:42] David has two picks: A tutorial by Sarah Dayan called, “Using State Machines in Vue.js with XState.” Also, midi.city which is an online synthesizer. [00:53:33] Ben’s pick is a gaming laptop Acer Predator Triton 500. Sponsor: Linode (https://promo.linode.com/vue/) Resources mentioned: David Khourshid Twitter (https://twitter.com/DavidKPiano?ref_src=twsrc%255Egoogle%257Ctwcamp%255Eserp%257Ctwgr%255Eauthor) David Khourshid GitHub (https://github.com/davidkpiano) David Khourshid-CodePen (https://codepen.io/davidkpiano?__cf_chl_jschl_tk__=d9660a1d62fa6c2e32de33fec46b5bf44ae50acb-1590537654-0-ARZfgByyedKwLNEHq3PjUtIiIYzTDmxdd2ofmN0GHO721VSK5VQxixvVB9Sk_Q4I3q8x8q6ri5U7PrInGcs9t23afSy1o2YLl2vdPEl4ARL6Y5ZFn3sW0RNORy0HqvCUpFK1tW13S-sNsjub0CCJ9yeqU5GbFbkxJtr84mQh-KdiH2Y_MJvF_yfN7BYCAqwGsUtYYU3JouXE87J_cSqlE7XENp3xg6qvYCtGZl24rDzN1QxxQV0J0NJNcHJAJIk3Nyykpg3tF0NBzqEwH7Krs74prQyZNaEwfQwewIisplrl49Be4if6MX5YZxRm1DKYBO5Lhdai9CwUGipePSE29gC4CuIwpS1m8kIuf4DI0SA_) Enjoy the Vue-Episode 11, Test Driven Development (feat. Sarah Dayan) (https://enjoythevue.io/episodes/11) Erik Mogensen (https://github.com/mogsie) Statecharts (https://statecharts.github.io/) State Chart XML (SCXML) W3 Spec (https://www.w3.org/TR/scxml/) Figma Plugin to XState (https://github.com/ddanielbee/figma-fsm) XState-Usage with Vue (https://xstate.js.org/docs/recipes/vue.html) DefinitelyTyped Repo (https://github.com/DefinitelyTyped/DefinitelyTyped) The Keyframers (https://keyframe.rs/) “Phoenix Wright: Ace Attorney- Dual Destinies (3DS, IOS, Android) (https://en.wikipedia.org/wiki/Phoenix_Wright:_Ace_Attorney_%25E2%2580%2593_Dual_Destinies) “Ten Second Songs”-YouTube (https://www.youtube.com/user/TenSecondSongs/about) “So You Want to Talk About Race” (https://bookshop.org/books/so-you-want-to-talk-about-race/9781580058827) “Explosions In the Sky” by Disintegration Anxiety (https://www.youtube.com/watch?v=xT2UmlUmDQI) “Dead to Me”-Netflix (https://www.netflix.com/title/80219707) “Using State Machines in Vue.js with XState” by Sarah Dayan (https://frontstuff.io/using-state-machines-in-vuejs-with-xstate) midi.city (https://midi.city/) Acer Predator Triton 500 (https://www.acer.com/ac/en/US/content/predator-series/predatortriton500) Special Guests: David Khourshid and Sarah Dayan.
Sponsored By: Show Notes [00:02:37] Sarah was on the docket to speak at VueConfUS. Since it got cancelled, she shares those of us Stateside all about testing in Vue and why TDD is great. [00:05:25] Ari asks Sarah about what a contract in a component and what it means. Sarah breaks this down with a very simple example, a button. [00:09:50] Ben gets Sarah’s thoughts on end to end testing. She makes a case for Test Driven Development applying to more than just unit tests. [00:15:51] Tessa who saw one of Sarah’s presentations on TDD, asks her about her “tip” on when to test and when not to test. Sarah puts it simply, the question to ask is: “Do I care about it if it changes?”. [00:21:40] Sarah give us some good practices that you may want to implement when testing. Whether you are doing unit or end to end testing. [00:24:51] After Tessa asks Sarah about Snapshot Tests and whether a link text fits in a Unit Test. Sarah believes Snapshot Tests are better when you want to test logs or code. She feels they should not be used in place of Unit Tests, since they cannot test behaviour. [00:28:33] Ben talks about how some Dev’s have an obsession with getting 100’s on Code Coverage Reports. Sarah goes into how not to get caught up in the “vanity metrics”. The group joke around how it that obsession may originate from gaming and how we have to collect every coin and badge. [00:34:23] Tessa enquires about testing for accessibility. [00:39:34] Ari gives an example of working at a fast paced start-up, and whether or not TDD can reconcile when you don’t have clear cut requirements. Is it even possible? Sarah shows how it can save money since everything won’t need to be retested by hand. About our guest: Sarah Dyan - Twitter @frontstuff_io (https://twitter.com/frontstuff_io) - Website (https://sarahdayan.dev/) Sarah's picks - XState (state machines/statecharts library) (https://xstate.js.org/) - Vuex ORM (object-relational mapping access to the Vuex store) (https://github.com/vuex-orm/vuex-orm) - The 100 on Netflix (https://www.netflix.com/title/70283264) - Master of None on Netflix (https://www.netflix.com/title/80049714) Tessa's picks - The Good Place - NBC/Netflix (https://www.nbc.com/the-good-place) - Anne with an E - Netflix (https://www.netflix.com/title/80136311) - Dispatches from Elsewhere - AMC (https://www.amc.com/shows/dispatches-from-elsewhere) - We Should Get Together (Kat Vellos) - Book (DRM-free via her website and her preferred method to purchase iirc https://weshouldgettogether.com/products/epub-we-should-get-together-the-secret-to-cultivating-better-friendships (https://weshouldgettogether.com/products/epub-we-should-get-together-the-secret-to-cultivating-better-friendships)) - Animal Crossing - Switch (https://www.animal-crossing.com/new-horizons/) - Vue DC remote meetup (https://www.meetup.com/Vue-DC/) Other resources mentioned - Pro Plan Algolia - Help Coronavirus (https://blog.algolia.com/supporting-our-communities-during-this-time-of-need/) - Testing Library by Kent C Dodds (https://kentcdodds.com/blog/introducing-the-react-testing-library) - Dinero.js - Sarah Dayan (https://dinerojs.com/) Sponsor: Linode (https://promo.linode.com/vue/) Special Guest: Sarah Dayan.
David Khourshid is the man bringing statecharts to the frontend. We talk about XState, model-based testing with xstate-test, and the future designer/coder integration For the month of february, we're chatting exclusively with Reactathon speakers. You can hear more from David on the topic state-charts for UI development this march. Reactathon is a top React conference in the heart of San Francisco. David and I will be there, chewing people's ears off about better designer tooling. Get a ticket at reactathon.com.
Upgrading FreeBSD from 11.3 to 12.1, Distrowatch switching to FreeBSD, Torvalds says don’t run ZFS, iked(8) removed automatic IPv6 blocking, working towards LLDB on i386, and memory-hard Argon2 hashing scheme in NetBSD. Headlines Upgrading FreeBSD from 11.3 to 12.1 (https://blog.bimajority.org/2020/01/13/upgrading-freebsd-from-11-3-to-12-1/) Now here’s something more like what I was originally expecting the content on this blog to look like. I’m in the process of moving all of our FreeBSD servers (about 30 in total) from 11.3 to 12.1. We have our own local build of the OS, and until “packaged base” gets to a state where it’s reliably usable, we’re stuck doing upgrades the old-fashioned way. I created a set of notes for myself while cranking through these upgrades and I wanted to share them since they are not really work-specific and this process isn’t very well documented for people who haven’t been doing this sort of upgrade process for 25 years. Our source and object trees are read-only exported from the build server over NFS, which causes things to be slow. /etc/make.conf and /etc/src.conf are symbolic links on all of our servers to the master copies in /usr/src so that make installworld can find the configuration parameters the system was built with. Switching Distrowatch over to BSD (https://www.reddit.com/r/freebsd/comments/eodhit/switching_distrowatch_over_to_freebsd_ama/) This may be a little off-topic for this board (forgive me if it is, please). However, I wanted to say that I'm one of the people who works on DistroWatch (distrowatch.com) and this past week we had to deal with a server facing hardware failure. We had a discussion about whether to continue running Debian or switch to something else. The primary "something else" option turned out to be FreeBSD and it is what we eventually went with. It took a while to convert everything over from working with Debian GNU/Linux to FreeBSD 12 (some script incompatibilities, different paths, some changes to web server configuration, networking IPv6 troubles). But in the end we ended up with a good, FreeBSD-based experience. Since the transition was successful, though certainly not seamless, I thought people might want to do a Q&A on the migration process. Especially for those thinking of making the same switch. News Roundup iked(8) automatic IPv6 blocking removed (https://www.openbsd.org/faq/current.html#r20200114) iked(8) no longer automatically blocks unencrypted outbound IPv6 packets. This feature was intended to avoid accidental leakage, but in practice was found to mostly be a cause of misconfiguration. If you previously used iked(8)'s -6 flag to disable this feature, it is no longer needed and should be removed from /etc/rc.conf.local if used. Linus says dont run ZFS (https://itsfoss.com/linus-torvalds-zfs/) “Don’t use ZFS. It’s that simple. It was always more of a buzzword than anything else, I feel, and the licensing issues just make it a non-starter for me.” This is what Linus Torvalds said in a mailing list to once again express his disliking for ZFS filesystem specially over its licensing. To avoid unnecessary confusion, this is more intended for Linux distributions, kernel developers and maintainers rather than individual Linux users. GSoC 2019 Final Report: Incorporating the memory-hard Argon2 hashing scheme into NetBSD (https://blog.netbsd.org/tnf/entry/gsoc_2019_final_report_incorporating) We successfully incorporated the Argon2 reference implementation into NetBSD/amd64 for our 2019 Google Summer of Coding project. We introduced our project here and provided some hints on how to select parameters here. For our final report, we will provide an overview of what changes were made to complete the project. The Argon2 reference implementation, available here, is available under both the Creative Commons CC0 1.0 and the Apache Public License 2.0. To import the reference implementation into src/external, we chose to use the Apache 2.0 license for this project. Working towards LLDB on i386 NetBSD (https://blog.netbsd.org/tnf/entry/working_towards_lldb_on_i386) Upstream describes LLDB as a next generation, high-performance debugger. It is built on top of LLVM/Clang toolchain, and features great integration with it. At the moment, it primarily supports debugging C, C++ and ObjC code, and there is interest in extending it to more languages. In February 2019, I have started working on LLDB, as contracted by the NetBSD Foundation. So far I've been working on reenabling continuous integration, squashing bugs, improving NetBSD core file support, extending NetBSD's ptrace interface to cover more register types and fix compat32 issues, fixing watchpoint and threading support. Throughout December I've continued working on our build bot maintenance, in particular enabling compiler-rt tests. I've revived and finished my old patch for extended register state (XState) in core dumps. I've started working on bringing proper i386 support to LLDB. Beastie Bits An open source Civilization V (https://github.com/yairm210/UnCiv) BSD Groups in Italy (https://bsdnotizie.blogspot.com/2020/01/gruppi-bsd-in-italia.html) Why is Wednesday, November 17, 1858 the base time for OpenVMS? (https://www.slac.stanford.edu/~rkj/crazytime.txt) Benchmarking shell pipelines and the Unix “tools” philosophy (https://blog.plover.com/Unix/tools.html) LPI and BSD working together (https://youtu.be/QItb5aoj7Oc) Feedback/Questions Pat - March Meeting (http://dpaste.com/2BMGZVV#wrap) Madhukar - Overheating Laptop (http://dpaste.com/17WNVM8#wrap) Warren - R vs S (http://dpaste.com/3AZYFB1#wrap) Send questions, comments, show ideas/topics, or stories you want mentioned on the show to feedback@bsdnow.tv (mailto:feedback@bsdnow.tv) Your browser does not support the HTML5 video tag.
Loma on kiistatta ihmisen parasta koodausaikaa. Tässä jaksossa Riku ja Antti höpöttävät loman koodausprojekteista. Aiheina mm. FeathersJS, XState, React Spring, Tailwind ja Next.js.Elvis operatorSpotify brings streaming ad insertion technology to podcastsFeathersJSXStateWSLReact SpringNext.jsTailwindNow.shJakson valinnatRiku: Maangchi: Spicy fire chicken with cheese (Cheese Buldak: 치즈불닭)Antti: Idobo75
In this episode of Syntax, Scott and Wes talk with David K Piano about state machines, CSS, animations and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 2:30 - Who is David K Piano? 4:00 - Did you have a background in animation prior to web development? 5:45 - How did you build the CSS Responsive House on Codepen? 8:36 - What are state machines? 14:47 - How does it relate to programming? 17:20 - How do you go about changing states? 20:20 - Is this similar to how RxJS works? 21:40 - How would state machine work in CSS? 29:07 - Perspective in CSS 34:47 - How do you like Twitch vs YouTube? 35:48 - How do you add XState to a current project? 41:42 - Visualizing sate machines 46:15 - Do you have a day job as well? Links @davidkpiano David’s Codepen CSS Responsive House InVision Framer Figma XState RxJS React Apollo Vue.js Javascript30 Tailwind CSS GROQ.dev Keyframe.rs Babel Twitch Keygrame.rs Patreon ××× SIIIIICK ××× PIIIICKS ××× David: Lynn Fisher Scott: The Big One Wes: American Factory Shameless Plugs David: XState and Keyframe.rs Scott: React and Typescript for Everyone - Sign up for the year and save 25%! Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets
In this episode, Adam talks to David Khourshid about using state machines to build UI components that are simpler and more resilient to bugs. Topics include: What exactly is a finite state machine? Why trying to keep track of a component's status using boolean flags is leads to bugs and complex code Why it makes so much more sense to keep track of a component's state using some sort of label How simple it can actually be to implement UI component logic with a state machine and why you shouldn't think of it as complex or over-engineering How you can think of using state machines in UI programming to be like an inversion of the typical approach you may have taken in the past, where actions become scoped to certain states instead of actions needing to inspect the current state What events might look like in your state machine and where you're actually sending them from and to Advice for naming your events What it means to "transition" between states How using a state machine makes it easy to provide slightly different behavior for the same action based on the current state The benefits of visualizing your state machines Using the XState library to build state machines in JavaScript Sponsors: Tuple, try the best pair programming app out there for free for two weeks DigitalOcean, get your free $50 credit at do.co/fullstack Links: "No, disabling a button is not app logic.", David's recent article on state machines XState Docs
Dean Radcliffe has been web developing since the table tag was the new hotness. His interests include his wife and two kids, music, sports, and he likes to say he helps people make whatever they can dream of. Since starting to move towards the frontend, React has been his weapon of choice, which he got started with in 2014. Dean works at G2.com, a software review site. They are developing a review form, which requires the code to react to events. For example, a person’s position in the company would affect what questions they see, so the form needs to react to which box is checked. Dean talks about the use cases for building a reactive form and what kind of things are going to happen when you fill in an input. For his form, the input will be remembered, and they want to increase the user’s involvement with the form through incentives. To accomplish this, Dean uses component driven development with Storybook. Storybook is a tool available for React and other frameworks, which lets you jump directly to each state you want to view instead of having to go through them all one by one. Basically, it gives you shortcuts directly to the visual states of your components. These states facilitate development and the feedback cycle going back to the designers, allowing them to see more than just the finished application and enabling them to circumvent mistakes. Storybook relates to reactive programming because component driven development lets you discover the API and what sets of props are necessary to put this component into each possible state that can be displayed. Dean does not use it as a test environment on his team, but it does help them write unit tests. It has an addon that lets you write unit tests in Storybook, but he hasn’t used it. Dean compares where reactivity and Storybook come together by comparing it to a thermometer.A thermometer will get readings over time of discrete values, and that timing is how people experience your components. You can create an observable of those states, and Storybook Animate ties them together. Your components, however, are still your responsibility. Dean talks about how he creates the observables. The observables are hardcoded, but the great thing is you don’t need to know where it came from. Dean describes how the observables are connected to the components. Dean feels that having this dynamic feed cycle makes it kind of fun to write tests. There is also a function called After which creates a set time out, which creates an observable of that value over time. Dean talks about his other tool, RX Helper. RX Helper provides an ‘after’ abstraction, and an event oriented layer in React. RX helper allows you to listen for custom events raised from the individual components of a form, and you respond to those events with observables, and the observables produce values over time.The goal of RX Helper provides some transparency and makes it easier to try out concurrency designs. The show concludes with Dean talking about some of the changes he’s made to his tools and how he came up with the idea. Panelists Charles Max Wood With special guest: Dean Radcliffe Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundup Sentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links Knockout.js G2.com Storybook StorybookAnimate RX Helper Meteor JS Follow DevChatTV on Facebook and Twitter Picks Dean Radcliffe: Follow him on Github and Twitter Kent C. Dodds @davidkpiano XState Gangstagrass Charles Max Wood: St. George Marathon The 360 Degree Leader
Dean Radcliffe has been web developing since the table tag was the new hotness. His interests include his wife and two kids, music, sports, and he likes to say he helps people make whatever they can dream of. Since starting to move towards the frontend, React has been his weapon of choice, which he got started with in 2014. Dean works at G2.com, a software review site. They are developing a review form, which requires the code to react to events. For example, a person’s position in the company would affect what questions they see, so the form needs to react to which box is checked. Dean talks about the use cases for building a reactive form and what kind of things are going to happen when you fill in an input. For his form, the input will be remembered, and they want to increase the user’s involvement with the form through incentives. To accomplish this, Dean uses component driven development with Storybook. Storybook is a tool available for React and other frameworks, which lets you jump directly to each state you want to view instead of having to go through them all one by one. Basically, it gives you shortcuts directly to the visual states of your components. These states facilitate development and the feedback cycle going back to the designers, allowing them to see more than just the finished application and enabling them to circumvent mistakes. Storybook relates to reactive programming because component driven development lets you discover the API and what sets of props are necessary to put this component into each possible state that can be displayed. Dean does not use it as a test environment on his team, but it does help them write unit tests. It has an addon that lets you write unit tests in Storybook, but he hasn’t used it. Dean compares where reactivity and Storybook come together by comparing it to a thermometer.A thermometer will get readings over time of discrete values, and that timing is how people experience your components. You can create an observable of those states, and Storybook Animate ties them together. Your components, however, are still your responsibility. Dean talks about how he creates the observables. The observables are hardcoded, but the great thing is you don’t need to know where it came from. Dean describes how the observables are connected to the components. Dean feels that having this dynamic feed cycle makes it kind of fun to write tests. There is also a function called After which creates a set time out, which creates an observable of that value over time. Dean talks about his other tool, RX Helper. RX Helper provides an ‘after’ abstraction, and an event oriented layer in React. RX helper allows you to listen for custom events raised from the individual components of a form, and you respond to those events with observables, and the observables produce values over time.The goal of RX Helper provides some transparency and makes it easier to try out concurrency designs. The show concludes with Dean talking about some of the changes he’s made to his tools and how he came up with the idea. Panelists Charles Max Wood With special guest: Dean Radcliffe Sponsors Progress KendoReact | Try now for FREE: kendoreact.com/reactroundup Sentry use the code “devchat” for 2 months free on Sentry’s small plan My JavaScript Story Links Knockout.js G2.com Storybook StorybookAnimate RX Helper Meteor JS Follow DevChatTV on Facebook and Twitter Picks Dean Radcliffe: Follow him on Github and Twitter Kent C. Dodds @davidkpiano XState Gangstagrass Charles Max Wood: St. George Marathon The 360 Degree Leader
Replacing a (silently) failing disk in a ZFS pool, OPNsense 19.7 RC1 released, implementing DRM ioctl support for NetBSD, High quality/low latency VOIP server with umurmur/Mumble on OpenBSD, the PDP-7 where Unix began, LLDB watchpoints, and more. Headlines Replacing a (silently) failing disk in a ZFS pool (https://imil.net/blog/2019/07/02/Replacing-a-silently-failing-disk-in-a-ZFS-pool/) Maybe I can’t read, but I have the feeling that official documentations explain every single corner case for a given tool, except the one you will actually need. My today’s struggle: replacing a disk within a FreeBSD ZFS pool. What? there’s a shitton of docs on this topic! Are you stupid? I don’t know, maybe. Yet none covered the process in a simple, straight and complete manner. OPNsense 19.7 RC1 released (https://opnsense.org/opnsense-19-7-rc1-released/) Hi there, For four and a half years now, OPNsense is driving innovation through modularising and hardening the open source firewall, with simple and reliable firmware upgrades, multi-language support, HardenedBSD security, fast adoption of upstream software updates as well as clear and stable 2-Clause BSD licensing. We thank all of you for helping test, shape and contribute to the project! We know it would not be the same without you. Download links, an installation guide[1] and the checksums for the images can be found below as well. News Roundup Implementation of DRM ioctl Support for NetBSD kernel (https://blog.netbsd.org/tnf/entry/implementation_of_drm_ioctl_support) What is DRM ioctl ? Ioctls are input/output control system calls and DRM stands for direct rendering manager The DRM layer provides several services to graphics drivers, many of them driven by the application interfaces it provides through libdrm, the library that wraps most of the DRM ioctls. These include vblank event handling, memory management, output management, framebuffer management, command submission & fencing, suspend/resume support, and DMA services. Native DRM ioctl calls NetBSD was able to make native DRM ioctl calls with hardware rendering once xorg and proper mesa packages where installed. We used the glxinfo and glxgears applications to test this out. High quality / low latency VOIP server with umurmur/Mumble on OpenBSD (https://dataswamp.org/~solene/2019-07-04-umurmur.html) Discord users keep telling about their so called discord server, which is not dedicated to them at all. And Discord has a very bad quality and a lot of voice distorsion. Why not run your very own mumble server with high voice quality and low latency and privacy respect? This is very easy to setup on OpenBSD! Mumble is an open source voip client, it has a client named Mumble (available on various operating system) and at least Android, the server part is murmur but there is a lightweight server named umurmur. People authentication is done through certificate generated locally and automatically accepted on a server, and the certificate get associated with a nickname. Nobody can pick the same nickname as another person if it’s not the same certificate. TMWL June’19 — JS Fetch API, scheduling in Spring, thoughts on Unix (https://blog.softwaremill.com/tmwl-june19-js-fetch-api-scheduling-in-spring-thoughts-on-unix-fd54f50ecd64) Unix — going back to the roots From time to time, I like to review my knowledge in a certain area, even when I feel like I know a lot about it already. I go back to the basics and read tutorials, manuals, books or watch interesting videos. I’ve been using macOS for a couple of years now, previously being a linux user for some (relatively short) time. Both these operating systems have a common ancestor — Unix. While I’m definitely not an expert, I feel quite comfortable using linux & macOS — I understand the concepts behind the system architecture, know a lot of command line tools & navigate through the shell without a hassle. So-called unix philosophy is also close to my heart. I always feel like there’s more I could squeeze out of it. Recently, I found that book titled “Unix for dummies, 5th edition” which was published back in… 2004. Feels literally like AGES in the computer-related world. However, it was a great shot — the book starts with the basics, providing some brief history of Unix and how it came to life. It talks a lot about the structure of the system and where certain pieces fit (eg. “standard” set of tools), and how to understand permissions and work with files & directories. There’s even a whole chapter about shell-based text editors like Vi and Emacs! Despite the fact that I am familiar with most of these, I could still find some interesting pieces & tools that I either knew existed (but never had a chance to use), or even haven’t ever heard of. And almost all of these are still valid in the modern “incarnations” of Unix’s descendants: Linux and macOS. The book also talks about networking, surfing the web & working with email. It’s cute to see pictures of those old browsers rendering “ancient” Internet websites, but hey — this is how it looked like no more than fifteen years ago! I can really recommend this book to anyone working on modern macOS or Linux — you will certainly find some interesting pieces. Especially if you like to go back to the roots from time to time as I do! ThePDP-7 Where Unix Began (https://bsdimp.blogspot.com/2019/07/the-pdp-7-where-unix-began.html) In preparation for a talk on Seventh Edition Unix this fall, I stumbled upon a service list from DEC for all known PDP-7 machines. From that list, and other sources, I believe that PDP-7 serial number 34 was the original Unix machine. V0 Unix could run on only one of the PDP-7s. Of the 99 PDP-7s produced, only two had disks. Serial number 14 had an RA01 listed, presumably a disk, though of a different type. In addition to the PDP-7 being obsolete in 1970, no other PDP-7 could run Unix, limiting its appeal outside of Bell Labs. By porting Unix to the PDP-11 in 1970, the group ensured Unix would live on into the future. The PDP-9 and PDP-15 were both upgrades of the PDP-7, so to be fair, PDP-7 Unix did have a natural upgrade path (the PDP-11 out sold the 18 bit systems though ~600,000 to ~1000). Ken Thompson reports in a private email that there were 2 PDP-9s and 1 PDP-15 at Bell Labs that could run a version of the PDP-7 Unix, though those machines were viewed as born obsolete. LLDB: watchpoints, XSTATE in ptrace() and core dumps (https://blog.netbsd.org/tnf/entry/lldb_watchpoints_xstate_in_ptrace) Upstream describes LLDB as a next generation, high-performance debugger. It is built on top of LLVM/Clang toolchain, and features great integration with it. At the moment, it primarily supports debugging C, C++ and ObjC code, and there is interest in extending it to more languages. In February, I have started working on LLDB, as contracted by the NetBSD Foundation. So far I've been working on reenabling continuous integration, squashing bugs, improving NetBSD core file support and lately extending NetBSD's ptrace interface to cover more register types and fix compat32 issues. You can read more about that in my May 2019 report. In June, I have finally finished the remaining ptrace() work for xstate and got it merged both on NetBSD and LLDB end (meaning it's going to make it into NetBSD 9). I have also worked on debug register support in LLDB, effectively fixing watchpoint support. Once again I had to fight some upstream regressions. Beastie Bits Project Trident 19.07 Available (https://project-trident.org/post/2019-07-12_19.07_available/) A list of names from "Cold Blood" -- Any familiar? (https://www.montanalinux.org/cold-blood-list-of-numbers-201907.html) fern: a curses-based mastodon client modeled off usenet news readers & pine, with an emphasis on getting to 'timeline zero' (https://github.com/enkiv2/fern) OpenBSD Community goes Platinum for 2019! (https://undeadly.org/cgi?action=article;sid=20190707065226) tcp keepalive and dports on DragonFly (https://www.dragonflydigest.com/2019/07/15/23199.html) Feedback/Questions Patrick - OpenZFS/ZoL Module from Ports (http://dpaste.com/1W2HJ04) Brad - Services not starting (http://dpaste.com/345VM9Y#wrap) Simon - Feedback (http://dpaste.com/1B4ZKC8#wrap) Send questions, comments, show ideas/topics, or stories you want mentioned on the show to feedback@bsdnow.tv (mailto:feedback@bsdnow.tv) Your browser does not support the HTML5 video tag.
Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel David Ceddia Lucas Reis Thomas Aylott With special guest: David Khourshid Episode Summary David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it. The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset. They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards. Links Xstate Keyframers Bootstrap David’s husky animation The Checklist Manifesto Sion SCXML QT Elm Thunk Observable NoFlo Sketch Systems State Charts Follow DevChat on Facebook and Twitter Picks David Ceddia: Atomic Habits by James Clear Bullet Journal Thomas Aylott: The Checklist Manifesto Thomas’ Youtube Channel David Khourshid: Constructing The User Interface with State Charts (check the library first) Follow David @davidkpiano
Sponsors Netlify Sentry use the code “devchat” for 2 months free on Sentry’s small plan Triplebyte offers a $1000 signing bonus Panel David Ceddia Lucas Reis Thomas Aylott With special guest: David Khourshid Episode Summary David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it. The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset. They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards. Links Xstate Keyframers Bootstrap David’s husky animation The Checklist Manifesto Sion SCXML QT Elm Thunk Observable NoFlo Sketch Systems State Charts Follow DevChat on Facebook and Twitter Picks David Ceddia: Atomic Habits by James Clear Bullet Journal Thomas Aylott: The Checklist Manifesto Thomas’ Youtube Channel David Khourshid: Constructing The User Interface with State Charts (check the library first) Follow David @davidkpiano
Sponsors KendoUI Sentry use the code "devchat" for $100 credit TripleByte CacheFly Panel Chris Fritz Divya Sasidharan Joe Eames Charles Max Wood Joined by Special Guest: Darren Jennings Summary Darren Jennings talks about his open source component vue-autosuggest and his experience open sourcing it. He talks about support, use cases, and feature implementation. The panel shares support request stories. Darren gives tips for open sourcing and making components more reusable. He shares his favorite tools for composing components. He explains the benefits he has seen open sourcing this component. Links https://openresty.org/en/ https://konghq.com/ https://github.com/Educents/vue-autosuggest https://vuejsdevelopers.com/2018/01/15/vue-js-render-props https://medium.com/@darrenjennings/open-sourcing-your-first-vue-component-5ef015e1f66c https://twitter.com/darrenjennings https://www.facebook.com/ViewsonVue https://twitter.com/viewsonvue Picks Charles Max Wood: http://entreprogrammers.com/ The Pomodoro Technique: The Acclaimed Time-Management System That Has Transformed How We Work https://kanbanflow.com/ https://www.11ty.io/ https://www.netlify.com/ Darren Jennings: Xstate library Hollow Knight - Nintendo Switch vue-autosuggest Chris Fritz http://www.matthewbrowngames.com/hexcellsinfinite.html Be vulnerable with people in your life. The Power of Vulnerability: Teachings of Authenticity, Connection, and Courage Divya Sasidharan: https://24ways.org/ https://calendar.perfplanet.com http://shortdiv.com/ Joe Eames: Framework Summit ng-conf minified Give
Sponsors KendoUI Sentry use the code "devchat" for $100 credit TripleByte CacheFly Panel Chris Fritz Divya Sasidharan Joe Eames Charles Max Wood Joined by Special Guest: Darren Jennings Summary Darren Jennings talks about his open source component vue-autosuggest and his experience open sourcing it. He talks about support, use cases, and feature implementation. The panel shares support request stories. Darren gives tips for open sourcing and making components more reusable. He shares his favorite tools for composing components. He explains the benefits he has seen open sourcing this component. Links https://openresty.org/en/ https://konghq.com/ https://github.com/Educents/vue-autosuggest https://vuejsdevelopers.com/2018/01/15/vue-js-render-props https://medium.com/@darrenjennings/open-sourcing-your-first-vue-component-5ef015e1f66c https://twitter.com/darrenjennings https://www.facebook.com/ViewsonVue https://twitter.com/viewsonvue Picks Charles Max Wood: http://entreprogrammers.com/ The Pomodoro Technique: The Acclaimed Time-Management System That Has Transformed How We Work https://kanbanflow.com/ https://www.11ty.io/ https://www.netlify.com/ Darren Jennings: Xstate library Hollow Knight - Nintendo Switch vue-autosuggest Chris Fritz http://www.matthewbrowngames.com/hexcellsinfinite.html Be vulnerable with people in your life. The Power of Vulnerability: Teachings of Authenticity, Connection, and Courage Divya Sasidharan: https://24ways.org/ https://calendar.perfplanet.com http://shortdiv.com/ Joe Eames: Framework Summit ng-conf minified Give
Jake and Michael return for 2019, sharing their personal and technical goals for the year, talk about refactoring legacy code and introducing tests, and Jake shares more of his adventures with Laravel Nova.
Panel: Charles Max Wood Lucas Reis Justin Bennett (guest host) Special Guests: Gant Laborde In this episode, the panel talks with Gant who has been programming for twenty years. In the past, he has been an adjunct professor and loves to teach. Finally, he talks at conferences and enjoys sharing his ideas. The panel talks about the React State Museum, among many other topics, such as: React Native, Flux, Redux, Agile, and XState. Show Topics: 1:24 – Chuck: What do you do? 2:02 – Chuck and Gant: We met at React Rally at 2016. 2:17 – Gant: I have my own sticker branding with a friend in Japan who is genius. She draws all these characters. They are my business card now. 2:41 – Chuck: React State Museum- talk about its brief history and what it is? 2:54 – Gant: React is this beautiful thing of passing these functional capsules around and managing them. Once you start creating another component, the question is how do you actually manage all of these components? We are all so happy to be on the cutting edge, but state management systems come up and die so fast. For like Facebook, there are 2 people who understand Flux. What happens is Redux is the one thing that shows up and... 6:34 – Chuck: I want to say...I think we need to change the topic. You said that JavaScript USED to be bad at classes, but it’s still bad at classes! 6:52 – Gant: Yep. 7:21 – Chuck: Typescript gets us close-ish. 7:31 – Chuck: Do you get feedback on the library? 8:12 – Gant: The requests that I’ve got - it’s from people who are better at (that0 than me. I wanted to test the lines of code. But that’s unfair because there are a lot of things to do. It really was a plan but what happens is – components that are used in this example is that in this node module... 9:41 – Panel: This is an interesting topic. When you assess any technology...if you are not a technology expert than you really can’t say. That’s interesting that you are doing this an open-source way. 10:25 – Gant: I am a huge fan of this vs. that. I am okay with say “this” one wins and “that” one looses. I don’t declare a winner cause it’s more like a Rosetta Stone. I had to find pitfalls and I respect that for the different perspectives. At the end of the day I do have opinions. But there is no winner. They are all the same and they are all extremely different. Are you trying to teach someone in one day? I learned Redux in 2 different days. 12:00 – Panel: Is there a library that helps with X, Y, Z, etc. 12:16 – Gant: I love for teaching and giving people a great start. I just set state and live life. I had to show what X is like. 13:59 – Chuck: Like this conversation about frameworks and which framework to use. Everyone was using Redux, because it was more or less what we wanted it to do. But at the time it cleaned up a bunch of code. Now we have all these other options. We are figuring out... How to write JavaScript if web assembly really took off? Do I write React with X or with Y. And how does this affect all of this? We had all of these conversations but we haven’t settled on the absolute best way to do this. 15:50 – Panel: This is great, and I think this is from the community as a whole. 17:20 – Chuck: I need to ask a question. Is this because the requirements on the frontend has changed? Or... I think we are talking about these state management systems, and this is what Lucas is talking about. 17:45 – Gant: I think it’s both. 18:43 – Panel: Websites have gotten bigger. We have always been pushing CSS. Panelist mentions Facebook Blue, among other things. What does your state look like? What does your validation look like? We are on so many different devices, and so on. 20:00 – Gant: I agree to echo everything that you all have said. I think the expectations are tighter now; that we have less drift. People are being more cognoscente and asking what is our brand. And it’s about brand consistency. And we are expecting more out of our technology, too. We keep pushing the envelope. What about these features? We want to be feature rich, and pushing these envelopes – how can we build more faster with less complexity while building it. You have to put that complexity somewhere. It’s interesting to watch. 22:00 – Chuck: How do we use this React State Museum...where are we going next? 22:19 – Gant: It’s a loaded question. Being able to ID new and interesting concepts. If you had a terrible version and Redux comes along, Redux is great for some companies but not all. You won’t see bugs that are crazy, there is a middle-wear, and maybe for your team going into Redux will make things more manageable. 25:25 – Advertisement – Digital Ocean 26:05 – Panel: Understanding your problem is the first thing to do. Talking about evolutionary architecture – to build your software to evolve. What does tha fit really well? So if you have to pick something new you are in a good position. What are my needs? Don’t look too much forward or 27:38 – Chuck: Advice on looking at your problem-sets? 27:52 – Panel: We have gone from planning too much to not planning at all. I don’t need to plan for too much or else it will “hurt” me. 28:42 – Chuck comments and mentions Agile. 29:29 – Panel and Guest chime in. 29:39 – Panel: I worked on a project (3 months) we needed to do a big change. I asked them why didn’t we take that into consideration. And their answer was... 30:30 – Gant: You might get away with... 30:55 – Chuck: What are some of the knobs on this? If I turn this know Redux is looking good, but if I do this... 31:12 – Gant: There are a lot of attractive knobs. Using app sync, not using app sync. 32:33 – Gant: Is your app really effective? That’s your first important question. How much state do I need on the frontend. And vice versa. 34:02 – Gant: How easy will this be to test? Can I teach someone how to do this? If I cannot teach it then it won’t do my team any good. 34:35 – Panel adds in comments. 35:08 – Gant: Looking at tests. 37:25 – Panel: If you have a great backend team then you can move the work across the team. You have a strong team to move that work along that line – normally you can’t cross that sort of thing. 38:03 – Chuck: There are so many options, too. I see Apollo getting reach here. I don’t see it as a statement tool instead I see it as... 38:31 – Panel: Apollo State – seems like they are pushing the envelope. It’s interesting to watch. 38:54 – Chuck. 39:12 – Gant: I am going to go ahead and use this tool – I am not going to worry about it. But now you are being held accountable. 39:29 – Panel: Question for folks: React not having a blessed ecosystem can hold people back in some ways? You have the freedom to use what you want. Here are the tools that you can use. Do you tink it be better if the Facebook team could do... 40:20 – Gant: I find that I don’t like (being told) this is what you will be using. I am a person with idea. We’d all be using Flux and all be very upset. 41:00 –Then there would be 3 people who don’t understand it. 41:17 – Gant: I loved Google Wave. Fool on my once and shame on me twice... Google Video! Google comes out and says here is BLESSED and you don’t have any choice. But it’s any author for themselves. It’s a little bit silly 0 I would like a beacon from Facebook saying: Here is a guide. It seems that they can’t focus. They are running a large company; I would like to keep it open – friendly energy. 42:24 – Chuck: I am mixed feelings about this. It only plays as far as people play into it. IN a React community there are so many voices. They all have opinions on what you should/shouldn’t use. The one thing that I like about a blessed / recommended stack – brand new person – it’s a good place to art. After that if they realize that Flux is hard then they can go and try other options. There are other things out there; there is a good balance there. 43:36 – Panel: That is the Angular way right? 43:38 – Chuck: Yes but Angular is more opinionated. It’s a different feel. 44:38 - Panel + Guest continue this conversation. 45:00 – The book DRIVE is mentioned. 45:21 – Gant: ... we need more recommendations. 45:43 – Chuck: Let’s talk about Repot and how to use this? If you go and get Repot – Google React State Museum it’s really easy. How should people come to this and pick it up? 46:18 – Gant: The table that comes in there – it links to the main Repot. A lot of people showed up and contributed. First of all show up. Gant mentions a sandbox link – and he talks about getting your hands dirty. React Native is mentioned, too. 48:10 – Gant: There are many opportunities for contributors. I could use my links. Typos, documentations, etc. - anything friendly is accepted here. 49:20 – Gant continues this conversation. 50:33 – Chuck: Anything else to dive into? 50:41 – Panel: I think there could be other things you can bubble up 51:26 – Gant: I would love some help with that. I did have some contributors write some tests. I wrote a test – 4 hours later – and it tells me if it passed or not. It has to go into a new directory, and work in Android, etc. It’s insane testing library. Then there are some checks to see if there is a link in the README. Animation if there is anyone who wants to do some cool stuff – like modules. Maybe it’s apple to oranges comparisons there. I would like to identify that for people. We would like some outside feedback out there. The more the merrier to help with the data is out there. Sanity check complete – yes! 53:24 – How to do that? 53:31 – File a ticket to help contribute. So you can say: I will do this. If you do it in a reasonable amount of time, then heck yes. If you do some open source...Do 10 (I think) and you get a free t-shirt? 54:28 – Advertisement. Links: Kendo UI Ruby on Rails Angular Get A Coder Job Redux Agile A Philosophy of Software Design – book XState Book: Spellmonger Did Someone Steal the Declaration of Independence Again? Book: The Culture Code Gant Laborde’s Twitter Lucas Reis’ Email: lucasmreis@gmail.com Charles Max Wood’s Twitter Sponsors: Kendo UI Digital Ocean Get A Coder Job Picks: Charles My journey – it’s been a rough year – with my dad passing. Willing to think it and process it, and it’s a healthy thing. Book: The Traveler’s Gift by Andy Andrews Book: The Shack by William Paul Young Gant Book: Harry Potter - Methods of Rationality Magicians XState is amazing! Culture Code - especially if you work remote. The pains that can happen by working remotely. Helps you identify those issues. Talk in Poland – Secret project. Lose the Declaration of Independence. “Where’s Waldo?” I am going to find Nicholas Cage in the audience and he will have the Declaration of Independence in backpack. Fake government website. Justin XState – Not Reactive specific Spellmonger: Book One of the... by Terry Mancour Book: Building Evolutionary Architectures Lucas Book: A Philosophy of Software Design by John Ousterhout
Panel: Charles Max Wood Lucas Reis Justin Bennett (guest host) Special Guests: Gant Laborde In this episode, the panel talks with Gant who has been programming for twenty years. In the past, he has been an adjunct professor and loves to teach. Finally, he talks at conferences and enjoys sharing his ideas. The panel talks about the React State Museum, among many other topics, such as: React Native, Flux, Redux, Agile, and XState. Show Topics: 1:24 – Chuck: What do you do? 2:02 – Chuck and Gant: We met at React Rally at 2016. 2:17 – Gant: I have my own sticker branding with a friend in Japan who is genius. She draws all these characters. They are my business card now. 2:41 – Chuck: React State Museum- talk about its brief history and what it is? 2:54 – Gant: React is this beautiful thing of passing these functional capsules around and managing them. Once you start creating another component, the question is how do you actually manage all of these components? We are all so happy to be on the cutting edge, but state management systems come up and die so fast. For like Facebook, there are 2 people who understand Flux. What happens is Redux is the one thing that shows up and... 6:34 – Chuck: I want to say...I think we need to change the topic. You said that JavaScript USED to be bad at classes, but it’s still bad at classes! 6:52 – Gant: Yep. 7:21 – Chuck: Typescript gets us close-ish. 7:31 – Chuck: Do you get feedback on the library? 8:12 – Gant: The requests that I’ve got - it’s from people who are better at (that0 than me. I wanted to test the lines of code. But that’s unfair because there are a lot of things to do. It really was a plan but what happens is – components that are used in this example is that in this node module... 9:41 – Panel: This is an interesting topic. When you assess any technology...if you are not a technology expert than you really can’t say. That’s interesting that you are doing this an open-source way. 10:25 – Gant: I am a huge fan of this vs. that. I am okay with say “this” one wins and “that” one looses. I don’t declare a winner cause it’s more like a Rosetta Stone. I had to find pitfalls and I respect that for the different perspectives. At the end of the day I do have opinions. But there is no winner. They are all the same and they are all extremely different. Are you trying to teach someone in one day? I learned Redux in 2 different days. 12:00 – Panel: Is there a library that helps with X, Y, Z, etc. 12:16 – Gant: I love for teaching and giving people a great start. I just set state and live life. I had to show what X is like. 13:59 – Chuck: Like this conversation about frameworks and which framework to use. Everyone was using Redux, because it was more or less what we wanted it to do. But at the time it cleaned up a bunch of code. Now we have all these other options. We are figuring out... How to write JavaScript if web assembly really took off? Do I write React with X or with Y. And how does this affect all of this? We had all of these conversations but we haven’t settled on the absolute best way to do this. 15:50 – Panel: This is great, and I think this is from the community as a whole. 17:20 – Chuck: I need to ask a question. Is this because the requirements on the frontend has changed? Or... I think we are talking about these state management systems, and this is what Lucas is talking about. 17:45 – Gant: I think it’s both. 18:43 – Panel: Websites have gotten bigger. We have always been pushing CSS. Panelist mentions Facebook Blue, among other things. What does your state look like? What does your validation look like? We are on so many different devices, and so on. 20:00 – Gant: I agree to echo everything that you all have said. I think the expectations are tighter now; that we have less drift. People are being more cognoscente and asking what is our brand. And it’s about brand consistency. And we are expecting more out of our technology, too. We keep pushing the envelope. What about these features? We want to be feature rich, and pushing these envelopes – how can we build more faster with less complexity while building it. You have to put that complexity somewhere. It’s interesting to watch. 22:00 – Chuck: How do we use this React State Museum...where are we going next? 22:19 – Gant: It’s a loaded question. Being able to ID new and interesting concepts. If you had a terrible version and Redux comes along, Redux is great for some companies but not all. You won’t see bugs that are crazy, there is a middle-wear, and maybe for your team going into Redux will make things more manageable. 25:25 – Advertisement – Digital Ocean 26:05 – Panel: Understanding your problem is the first thing to do. Talking about evolutionary architecture – to build your software to evolve. What does tha fit really well? So if you have to pick something new you are in a good position. What are my needs? Don’t look too much forward or 27:38 – Chuck: Advice on looking at your problem-sets? 27:52 – Panel: We have gone from planning too much to not planning at all. I don’t need to plan for too much or else it will “hurt” me. 28:42 – Chuck comments and mentions Agile. 29:29 – Panel and Guest chime in. 29:39 – Panel: I worked on a project (3 months) we needed to do a big change. I asked them why didn’t we take that into consideration. And their answer was... 30:30 – Gant: You might get away with... 30:55 – Chuck: What are some of the knobs on this? If I turn this know Redux is looking good, but if I do this... 31:12 – Gant: There are a lot of attractive knobs. Using app sync, not using app sync. 32:33 – Gant: Is your app really effective? That’s your first important question. How much state do I need on the frontend. And vice versa. 34:02 – Gant: How easy will this be to test? Can I teach someone how to do this? If I cannot teach it then it won’t do my team any good. 34:35 – Panel adds in comments. 35:08 – Gant: Looking at tests. 37:25 – Panel: If you have a great backend team then you can move the work across the team. You have a strong team to move that work along that line – normally you can’t cross that sort of thing. 38:03 – Chuck: There are so many options, too. I see Apollo getting reach here. I don’t see it as a statement tool instead I see it as... 38:31 – Panel: Apollo State – seems like they are pushing the envelope. It’s interesting to watch. 38:54 – Chuck. 39:12 – Gant: I am going to go ahead and use this tool – I am not going to worry about it. But now you are being held accountable. 39:29 – Panel: Question for folks: React not having a blessed ecosystem can hold people back in some ways? You have the freedom to use what you want. Here are the tools that you can use. Do you tink it be better if the Facebook team could do... 40:20 – Gant: I find that I don’t like (being told) this is what you will be using. I am a person with idea. We’d all be using Flux and all be very upset. 41:00 –Then there would be 3 people who don’t understand it. 41:17 – Gant: I loved Google Wave. Fool on my once and shame on me twice... Google Video! Google comes out and says here is BLESSED and you don’t have any choice. But it’s any author for themselves. It’s a little bit silly 0 I would like a beacon from Facebook saying: Here is a guide. It seems that they can’t focus. They are running a large company; I would like to keep it open – friendly energy. 42:24 – Chuck: I am mixed feelings about this. It only plays as far as people play into it. IN a React community there are so many voices. They all have opinions on what you should/shouldn’t use. The one thing that I like about a blessed / recommended stack – brand new person – it’s a good place to art. After that if they realize that Flux is hard then they can go and try other options. There are other things out there; there is a good balance there. 43:36 – Panel: That is the Angular way right? 43:38 – Chuck: Yes but Angular is more opinionated. It’s a different feel. 44:38 - Panel + Guest continue this conversation. 45:00 – The book DRIVE is mentioned. 45:21 – Gant: ... we need more recommendations. 45:43 – Chuck: Let’s talk about Repot and how to use this? If you go and get Repot – Google React State Museum it’s really easy. How should people come to this and pick it up? 46:18 – Gant: The table that comes in there – it links to the main Repot. A lot of people showed up and contributed. First of all show up. Gant mentions a sandbox link – and he talks about getting your hands dirty. React Native is mentioned, too. 48:10 – Gant: There are many opportunities for contributors. I could use my links. Typos, documentations, etc. - anything friendly is accepted here. 49:20 – Gant continues this conversation. 50:33 – Chuck: Anything else to dive into? 50:41 – Panel: I think there could be other things you can bubble up 51:26 – Gant: I would love some help with that. I did have some contributors write some tests. I wrote a test – 4 hours later – and it tells me if it passed or not. It has to go into a new directory, and work in Android, etc. It’s insane testing library. Then there are some checks to see if there is a link in the README. Animation if there is anyone who wants to do some cool stuff – like modules. Maybe it’s apple to oranges comparisons there. I would like to identify that for people. We would like some outside feedback out there. The more the merrier to help with the data is out there. Sanity check complete – yes! 53:24 – How to do that? 53:31 – File a ticket to help contribute. So you can say: I will do this. If you do it in a reasonable amount of time, then heck yes. If you do some open source...Do 10 (I think) and you get a free t-shirt? 54:28 – Advertisement. Links: Kendo UI Ruby on Rails Angular Get A Coder Job Redux Agile A Philosophy of Software Design – book XState Book: Spellmonger Did Someone Steal the Declaration of Independence Again? Book: The Culture Code Gant Laborde’s Twitter Lucas Reis’ Email: lucasmreis@gmail.com Charles Max Wood’s Twitter Sponsors: Kendo UI Digital Ocean Get A Coder Job Picks: Charles My journey – it’s been a rough year – with my dad passing. Willing to think it and process it, and it’s a healthy thing. Book: The Traveler’s Gift by Andy Andrews Book: The Shack by William Paul Young Gant Book: Harry Potter - Methods of Rationality Magicians XState is amazing! Culture Code - especially if you work remote. The pains that can happen by working remotely. Helps you identify those issues. Talk in Poland – Secret project. Lose the Declaration of Independence. “Where’s Waldo?” I am going to find Nicholas Cage in the audience and he will have the Declaration of Independence in backpack. Fake government website. Justin XState – Not Reactive specific Spellmonger: Book One of the... by Terry Mancour Book: Building Evolutionary Architectures Lucas Book: A Philosophy of Software Design by John Ousterhout
© 2020-2025 Ivy Podcast Discovery LLC
