JSJ 269 Reusable React and JavaScript Components with Cory House
JavaScript Jabber11 Heinä 2017

JSJ 269 Reusable React and JavaScript Components with Cory House

JSJ 269 Reusable React and JavaScript Components with Cory HouseOn today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in![00:01:35] – OverviewWe can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done.Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue. [00:04:50] – Browser support issueThe story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load different components.Whether you’re in Angular or React, you have this model of putting your data in your curly braces. That setup is non-existent in standardized web components. You have to play the game of putting and pulling data into and out the DOM using DOM selectors. You actually take a step backward in developer ergonomics when you choose to leverage the platform instead. [00:07:50] – Polymer The reason that Polymer is useful is it adds some goodness on top of web components. One of those things is that it makes it easier to bind in data and not having to do things like writing a DOM query to be able to get your hands on this div and put this text inside of it. With Polymer, you can do something that feels more like Angular, where you can put in your curly braces and just bind in some data into that place. Polymer ends up adding some nice syntactic sugar on top of the web components standard just to make it easier to create web components. Polymer is also used to bundle in Polyfill for the features across browser. [00:14:20] – Standards are deadNo. The standard itself has been embraced at different levels by different libraries. What you can see for the near future is popular libraries leveraging pieces of the web components platform to do things in a standard-spaced way. Effectively, Angular, Vue, Aurelia, are going to be abstractions over the web components standard. Arguably the most popular way to do components today is React. But React completely ignores the web components standard. When you look at React, you can’t see what piece of the web components standard would fundamentally make React a better component library.Cory can’t seem to run to anybody that is actually using the standard in production to build real applications. People continue to reach for the popular JavaScript libraries that we so often hear about.[00:17:05] – Libraries making reusable componentsThere is a risk that it would have been a waste for people writing components on Angular, for React, for Vue. But it’s not necessarily safer writing on the web component standard when you have so few people leveraging that standard. There’s always the risk that that standard may shift as well.As an example, Cory’s team created approximately 100 reusable components in React. If they end up moving to a hot new library, the components are really just functions that take parameters and contain HTML. There is little there[00:21:20] – Why opt for reusable componentsReusable components are inherently useful in a situation where you’re going to be doing something more than once. If you think about any work that you do as a software developer, we’d like to think that we’re coming in and creating new things but often it is groundhogs day. There are all sorts of opportunities for reuse.As a company, we want to encapsulate our forms in reusable components so it’s literally impossible for our software developers to do something that goes against our standard. That’s the power of reusable components. [00:31:20] – Rigid component vs. flexible component As component developers, if we try to create a reusable component in a vacuum, bad things happen. If you’re going to do a reusable component, start by solving a specific problem on a given application. If we think that a component’s going to be useful in multiple places, we put it in a folder called reusable right there in our application source folder.We try to follow that rule of three as well. If we’ve taken that component and used it in 3 places, that’s a good sign that we should extract it out, put it in our NPM package, that way, everybody has this centralized component to utilize. At that point, it has been tested. It’s been through the fire. People have used it in the real world in a few places so we can be confident that the API is truly flexible enough.Be as rigid as you can upfront. Once you add features, it’s really hard to take features away. But it’s quite easy to add features later. If you start with something rigid, it’s easier to understand. It’s easier to maintain and you can always add a few more switches later.[00:36:00] – Reusable componentsThe reason that we can’t reuse code is every time a new project comes up, people are spending up their own ideas rather than leveraging standards that should have been put in place previously.We’ve had the technical ability to do this for a long time. We just haven’t been around long enough for consolidation to happen, for standardization to happen. You look at how quickly things are changing in our industry. For instance, a couple of years ago, everybody had pretty much decided that two-way binding was the way to build web applications. And then, React came along and shook that up. So today, you have different ways of thinking about that issue.[00:42:45] – Component development on teamsAimee’s team has component development and they’re using Angular 1.6. All of our base components are sitting in a seed application. We just go in when we want to create a new property and we just extend all of those components with specific functionalities that we need.[00:47:45] – Mobile to web crossoverCory’s team is creating React components but it’s not leveraged on a mobile application. But people use React Native components on the web. And in fact, if you use create-react-app today, you can do that right now. It’s wired up to work in React Native components. In that way, you can literally have these same components running on your Native mobile apps as you do on your web application.[00:50:00] – ChallengeCory’s challenge for everybody listening is sit down with your team and have a quick conversation about whether you think components make sense. Look back at the last few months of development and say, "if we have a reusable component library, what would be in it? How often have we found ourselves copying and pasting code between different projects? How much benefit would we get out of this story?"Once you’ve realized the benefits of the component model, both in the way that makes you think about your application, in a way that it helps you move faster and faster over time, I really think you won’t go back to the old model. I’d encourage people to investigate reusable components, whether that’d be React, Angular, Vue or Ember.PicksCory HouseJoe EamesAimee KnightCharles Max WoodJSJ 269 Reusable React and JavaScript Components with Cory HouseOn today’s episode of JavaScript Jabber, we have panelists Joe Eames, Aimee Knight, Charles Max Wood, and playing the part of both host and guest, Cory House. Encourage your team to investigate reusable components, whether that’d be React, Angular, Vue, or Ember. Tune in![00:01:35] – OverviewWe can finally write reusable components that it is really lightweight. It doesn’t take much framework-specific code to get things done.Around 3 years ago, the idea of web component standard was all front-end developers could share our components with each other whether someone is in Angular or React. Web components continue to be an interesting standard but people continue to reach for JavaScript libraries instead – React, Angular, Vue. [00:04:50] – Browser support issueThe story in JavaScript libraries is easier. You have more power, more flexibility, more choices, and get superior performance, in certain cases, by choosing a JavaScript library over the standard right now. If you try to use the web components standard, you have to Polyfill-in some features so you can run things across browser. You also won’t get JavaScript features like intelligently splitting bundles and lazy load differ

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

Jaksot(734)

TanStack: A Deep Dive into Server Functions and Routing with Tanner Linsley - JsJ 667

TanStack: A Deep Dive into Server Functions and Routing with Tanner Linsley - JsJ 667

In this episode of JavaScript Jabber, host Steve Edwards is joined by panelists Dan Shappir and AJ O'Neil, along with special guest Tanner Lindsley, to explore the innovative world of TanStack, a collection of open-source libraries designed to enhance web development. Tanner shares insights into the origins and evolution of TanStack, highlighting its journey from simple libraries like React Table to a comprehensive toolkit including TanStack Query, TanStack Virtual, and more. The discussion delves into the nuances of building framework-agnostic tools, the challenges of server-side rendering, and the rise of remote procedure calls (RPCs) as a modern development approach. With intriguing debates on the future of meta frameworks and the role of server components, this episode provides a deep dive into the cutting-edge technologies shaping the development landscape. Whether you're a fan of React, Solid, or just curious about the direction of web frameworks, this conversation offers valuable insights and expert opinions on the current and future state of web development. Tune in to discover how TanStack is influencing the way we build and manage applications in the ever-evolving JavaScript ecosystem.Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

6 Helmi 1h 29min

What's New in JavaScript: Latest Language Updates and Features - JSJ 666

What's New in JavaScript: Latest Language Updates and Features - JSJ 666

Hey, everyone. Welcome back to another exciting episode of JavaScript Jabber, part of the Top End Devs Network. I'm your host, Charles Max Wood, joined by our amazing panelist, Dan Shappir. In this episode, we dive into the latest developments in the world of JavaScript as we kick off a new year. You might recall we covered this topic about a year and a half ago in episode 590.  Today, we're revisiting the updates to see what's progressed and what's newly introduced in the JavaScript standard.Dan Shappir offers his expertise as we explore features that have recently been added to the language. From promise.allSettled, a feature that's been around for about five years but often underutilized, to array method enhancements like .at and Object.hasOwn, there's a ton to unpack. We'll also delve into exciting new library additions like findLast for arrays, efficient array copying methods and improvements in set operations that make JavaScript more powerful and developer-friendly than ever.The episode isn't just about the features that have already landed; we'll also touch on what's in the pipeline with proposals in various stages of development, including exciting concepts like temporal for better date and time handling. Whether you're a JavaScript pro or just keen to stay updated on the latest trends, this discussion is packed with insights to level up your coding game.So, grab your headphones, stay tuned, and let's explore the exciting world of new JavaScript features together!Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

22 Tammi 1h 26min

Reflections on Technology Trends, AI Impact, and Memorable Episodes - JSJ 665

Reflections on Technology Trends, AI Impact, and Memorable Episodes - JSJ 665

Welcome to another riveting episode of Top End Devs! In today's "Year in Review" special, hosts Charles, AJ, Dan, and Steve Edwards take you on a retrospective journey through their most memorable moments and thought-provoking discussions of the year. From the amusing and insightful exchanges with influential guests like Rich Harris and Kyle Simpson to their deep dives into emerging tech trends like Svelte 5 and AI integration in development, this episode has it all.They also explore Charles's experience transitioning from a Mac to a high-performance System76 machine, Dan's favorite and least favorite tech trends, and AJ's admiration for profitable and customer-focused approaches in the industry. Expect a blend of technical expertise, humor with those beloved dad jokes, and personal reflections that make this podcast uniquely engaging.So, get ready as we reflect on the year's highlights, laugh at the dad jokes that have become fan favorites, and look forward to exciting developments in the tech world with your favorite panelists.PicksAJ - 100 Days of Rejection (Therapy)AJ - https://www.youtube.com/playlist?list=PLamouX6QxWIuTHuaArIOzdorWoYaF6cU5AJ - John Sonmez: Eye Contact & SmirkingAJ - John Sonmez: How to Become a ManAJ - EvalPlus LeaderboardAJ - OllamaCharles -HeatCharles - Heat: Pedal to the MetalCharles - Hit Refresh by Satya NadellaCharles -  American Icon by Bryce HoffmanCharles - System76Charles - Wizard's First Rule (Sword of Truth, Book 1) (Sword of Truth, 1)Dan - A Man on the Inside (TV Series 2024Dan - The Best Syria Breakdown You'll Ever Hear - Thomas SmallDan - Master of the Five MagicsBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

7 Tammi 2h 5min

Innovation and Framework Adoption - JSJ 664

Innovation and Framework Adoption - JSJ 664

In this episode, Charles, AJ, and Dan explore the intricacies of team dynamics, technological choices, and the challenges of web development with our distinguished panel. Joining them is a very special guest, the legendary Uncle Bob Martin. They delve into team collaboration and decision-making, with Uncle Bob emphasizing the importance of reasonable debates and team buy-in when it comes to mental models and project directives. Dan discusses how, in startups, the initial developer often ends up making key decisions.They also touch on technological choices, including the complications of inheriting decisions from previous team members and the ever-topical debate on relational databases influenced by marketing pressures. Uncle Bob shares his seasoned insights into React Framework inconsistencies and the philosophy behind state-driven design.They tackle the separation of business logic from frameworks to maintain purity and independence in code. There's also a lively discussion about starting with functional prototypes, and the influence of Apple’s focus on UI on their success.Additionally, they explore Uncle Bob’s controversial stance on web frameworks, the dynamics of framework adoption, and the role of technical decisions in hiring. There are fascinating comparisons between framework popularity and historical tech stories, including the evolution of Apple’s innovations and the contributions from Xerox PARC.Finally, as they wrap up, they have insightful pick recommendations from the panelists, covering everything from the NBA season and engaging TV series to board games and book recommendations—a little something for everyone.Join them for an enlightening journey through the nuances of modern development practices, historical tech anecdotes, and personal insights from some of the industry's top minds. This episode promises to be a treasure trove of knowledge and experience for any developer. Let's get started!SocialsLinkedIn: Robert MartinPicksAJ - How to Start a Startup - A course Y Combinator taught at StanfordCharles - MLEM: Space Agency | Board GameDan - NBA SeasonDan - The Day of the Jackal (TV Series 2024Uncle Bob - 'The Cloud Fugitive' | David Heinemeier Hansson | NTK # 001Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

31 Joulu 20241h 45min

Revolutionizing API Syntax and Schema Management with Jazz Framework - JSJ 663

Revolutionizing API Syntax and Schema Management with Jazz Framework - JSJ 663

In today's episode, Charles and AJ are joined by Anselm Eickhoff, a trailblazing full-stack software engineer. Anselm delves into the world of "Local First" software development and the innovative tool he’s developed, "Jazz." They explore how Jazz leverages schema information for type inference and runtime validation, enabling real-time collaboration and seamless offline functionality. They dive into the simplifications brought by Jazz's API changes, the flexibility offered through open protocols, and the local-first approach using CRDTs.They also tackle Jazz’s impressive backend infrastructure and its shift to direct disk storage, along with insights into the challenges and emerging support structures faced by early adopters. Anselm shares real-world applications, advanced analytics capabilities, and the future outlook for Jazz, emphasizing performance, resilience, and data privacy.Plus, stay tuned for a lighthearted detour into board games and TV recommendations, as well as updates on Charles’ AI Dev Boot Camp and exciting developments on the Top End Devs platform. This episode is packed with cutting-edge insights and practical advice for developers looking to integrate advanced real-time features and streamline their app development processes. SocialsLinkedIn: Anselm EickhoffPicksAJ - Dune 2-Film Collection (Blu-Ray + Digital)Charles - Imperial Miners | Board GameBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

24 Joulu 20241h 25min

Painting Roses, Eating Marshmallows and Network Protocols - JSJ 662

Painting Roses, Eating Marshmallows and Network Protocols - JSJ 662

Welcome to another insightful episode of the JavaScript Jabber podcast, hosted by Charles alongside our expert panelists Dan and AJ. Today, they are thrilled to be joined by Avishai Ish-Shalom a seasoned technologist with an eye for challenging conventions in the tech world. In this episode, Avishai takes us through fascinating discussions comparing industrial food products to technological abstractions, including his unique perspective on the “marshmallow effect” and the evolving complexities of virtualization.They delve into the challenges of backward compatibility in modern tech, using real-world parallels like AWS virtual storage options, and discuss the impact of technologies like Docker and cloud services on our understanding of underlying infrastructures. Charles shares his upgrade journey from an aging Mac laptop to a powerful System76 desktop for AI tasks, reflecting the changing demands on development environments.Listen in as they explore the nuances of binary vs. textual protocols, the importance of future-proofing legacy systems, and Avishai's compelling arguments in his articles "Don't Paint the Roses" and "The Marshmallow Effect." Plus, they discuss Avishai's career evolution and the intellectual challenges faced by today’s engineers in the rapidly advancing tech landscape. Whether you’re a casual listener or a tech enthusiast, this episode promises to offer valuable insights and thought-provoking discussions. Stay tuned!SocialsLinkedIn: Avishai Ish-ShalomPicksAJ - Deku Deals Avishai - marimo | a next-generation Python notebookCharles - Challengers! Beach Cup | Board GameDan - The Penguin (TV Mini Series 2024)Dan - BlueskyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

17 Joulu 20241h 33min

Structuring Node.js Applications Part 2: Dependency Management, Package Managers, Proper API Usage, etc.- JSJ 661

Structuring Node.js Applications Part 2: Dependency Management, Package Managers, Proper API Usage, etc.- JSJ 661

This is the second part of the deep dive into the essential practices and principles for successful Node.js development. Our esteemed guests, Michael Dawson, James Snell, Matteo Collina, and Natalia Venditto, bring their extensive expertise to the table, discussing key topics like how to manage dependencies in a Node.js project.SocialsLinkedIn: James SnellLinkedIn: Michael DawsonLinkedIn: Matteo CollinaLinkedIn: Natalia VendittoPicksCharles - Gnome Hollow | Board GameCharles - Reacher (TV Series 2022Michael - MakerWorld: Download Free 3D Printing Models Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

11 Joulu 20241h 22min

TypeScript Success: Integration, Type Checking, and Generics - JSJ 660

TypeScript Success: Integration, Type Checking, and Generics - JSJ 660

In this episode, Dan 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.Dan 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.

3 Joulu 20241h 20min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
psykopodiaa-podcast
rss-rahapodi
mimmit-sijoittaa
ostan-asuntoja-podcast
pomojen-suusta
rss-lahtijat
rss-bisnesta-bebeja
rss-sisalto-kuntoon
inderespodi
taloudellinen-mielenrauha
yrittaja
rss-startup-ministerio
rss-seuraava-potilas
rss-paasipodi
pari-sanaa-lastensuojelusta
bakkari-tarinoita-tapahtumien-takahuoneista
rss-markkinointiradio
rss-lindholm-savolainen
rss-podcast-podcasteista