JSJ 269 Reusable React and JavaScript Components with Cory House
JavaScript Jabber11 Juli 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.

Avsnitt(725)

Exploring AI Impact on Code Generation and Quality Metrics - JSJ 618

Exploring AI Impact on Code Generation and Quality Metrics - JSJ 618

Conor Bronsdon is the host of the Dev Interrupted Podcast and currently works at LinearB. They dive into the world of generative AI tools in software development, exploring the impact, challenges, and potential benefits they present. They engage in a lively discussion about the use of AI tools like Copilot and the implications for code generation, team efficiency, and happiness. The conversation also touches on the concerns and considerations surrounding AI integration in coding, including compliance, quality, and intellectual property. Join them as they delve into the evolving landscape of AI in software development, the quest for improved developer experiences, and ethical considerations.SponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksDev InterruptedSocialsLinkedIn: Conor BronsdonConor BronsdonPicksAJ - Market Saturation = 98.9% - What Now?AJ - Mentour PilotAJ - Keychain Pin ToolAJ - Open AudibleConor - Feel-Good Productivity: How to Do More of What Matters to YouSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

30 Jan 20241h 6min

Inside the World of React: Server Components, Unidirectional Data Flow, and Frameworks - JSJ 617

Inside the World of React: Server Components, Unidirectional Data Flow, and Frameworks - JSJ 617

Sam Selikoff is the founder of Build UI, Inc. They unpack a myriad of discussions surrounding JavaScript and its applications. They delve into topics such as RPC resurgence, React server components, and the challenges and solutions around integrating design and components. A variety of technical concepts, tools, and frameworks, including Tailwind, Redux, and Remix, are also explored. Additionally, the episode touches upon important mental health conversations, personal experiences, and the pitfalls of fragmented media subscriptions. SponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipSocialsTwitter: @samselikoffPicksAJ - No BackendAJ - Home AssistantAJ - CloudFreeAJ - AmeriDroidAJ - Chaos WalkingDan - Blue Eye SamuraiDan - Samurai JackSam - Lessons in ChemistrySupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

23 Jan 20241h 22min

Streamlining AI Integration - JSJ 616

Streamlining AI Integration - JSJ 616

Ismail Pelaseyed is the co-founder of Superagent. They delve into the world of AI technology, open-source frameworks, and the practical applications of AI assistants. The conversation covers a range of topics, from the technical and philosophical differences between AI frameworks to the importance of user-facing UI components with the power of AI. They also talk about the practical use cases of Superagent, its potential impact on the AI industry, and the challenges and considerations surrounding the deployment and monetization of open-source projects.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksSuperagentSocialsLinkedIn: Ismail PelaseyedPicksAJ - His & Her BidetAJ - Ollama (Installer)AJ - Home AssistantAJ - Chaos Walking (Books)AJ - Market Saturation = 98.9% - What Now?AJ - Keychain Pin ToolCharles - Disney ChronologyCharles - once.comDan - PrometheusDan - Which one is the un-React?Ismail - Fargoismail - outlinesSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

16 Jan 20241h 17min

Iterating on Open Source - JSJ 615

Iterating on Open Source - JSJ 615

Today the panel is discussing iterating on open source projects. Aimee and AJ recall a conversation they had in the past on this subject and AJ talks about some of his experience iterating with open source. AJ believes that we have an obligation to capture the value of what you create so that we can reinvest and create more value, though he admits that making money in open source is a unique challenge because donations only really work if you have a project that gets billions of downloads a month. As your project grows, it has to change in order to survive, and eventually you will need to get financial support from your project. The panel agrees that some of the main issues with iterating in open source are maintaining the code and getting feedback from users, financial backing, and roadmapping and integrations.The panel discusses their methods for getting feedback from their users. This feedback is valuable because it can show you things that you missed. They acknowledge that there can be conflicts of interest between those who only use the project and those who financially support it, and you have to make a choice. Unfortunately, someone is probably going to be inconvenienced no matter what choice you make. When making these decisions, you have to consider who it helps, who it frustrates, and who it may cause problems for. The panelists talk about different ways they’ve handled making these decisions in the past. The JavaScript experts talk about the importance of having data on your user base in order to make good choices for your users. They talk about different methods for notifying your users of upcoming changes and how it will affect compatibility, and some of the challenges with communicating with your users. AJ talks about an iteration he thought was a good idea but that a lot of people hated and how he noticed that the new users liked it but the old users did not. They panel agrees that people in general don’t like change. AJ talks about what he learned from this experience. Another common issue is integrating with other services. Integrating with cloud services, or at least giving people the option to integrate gives you an opportunity to reach more people and maintain the project long term. AJ gives some final thoughts to close the show, namely that most projects never go anywhere, and that’s ok. If you’ve got something that starts going somewhere, think early on about how you can better serve the community and remember that these people are mostly grateful and semi-willing to support you. He believes that if you are helping people create value, you deserve to see the fruits of your labor. He advises listeners to stay true to your open source ideals, think about your users perspective, and that the earlier you can think about this and make these choices, the better it is for your project SponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksHow-npm-am-iReactVue.jsLet’s EncryptAsync/awaitNodePicksAimee - Debug Like a NinjaSteve - Jack Ryan AJ - Why I, as a black man, attend KKK meetingsCharles - It’s a Wonderful LifeCharles - Mr. Kreuger’s ChristmasSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

9 Jan 202457min

Dev Dilemmas: TypeScript Triumphs and Quirks of JavaScript Arrays - JSJ 614

Dev Dilemmas: TypeScript Triumphs and Quirks of JavaScript Arrays - JSJ 614

AJ, Charles, Dan, and Steve dive deep into all things JavaScript and TypeScript. In this episode, they discuss the pros and cons of arrow functions and the ongoing debate about using semicolons at the end of JavaScript statements. They also explore the use of different types of quotes for strings and the rise in popularity of TypeScript among developers. Additionally, they cover a wide range of topics, including array manipulation, coding laziness, and the challenges of reading and understanding JavaScript code. Join them as they navigate through these intriguing discussions and gather valuable insights for our development journey.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipPicksAJ - Chaos Walking: The Complete Trilogy: Books 1-Charles - SaltconCharles - MysteriumDan - CatanDan - Documentary about the history of Zionism and the founding of Israel: "Pillar of Fire"Steve - How archaeologists reconstructed the burning of Jerusalem in 586 BCESupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

2 Jan 20241h 33min

The Future of Authentication in JavaScript: An Inside Look into Passport JS with Jared Hanson - JSJ 613

The Future of Authentication in JavaScript: An Inside Look into Passport JS with Jared Hanson - JSJ 613

Jared Hanson is a software engineer at Okta. In this episode, they delve into the world of authentication strategies, troubleshooting touchscreen frustrations, and exploring the evolution of web application technology. They touch on the challenges of secure authentication, the complexity of JavaScript type checking, and the intersection of security and usability in technologies like WebAuthn. Join us as they discuss their experiences with Passport JS, the potential of WebAuthn, the frustration with ongoing changes in browser technology, and much more. Tune in for an insightful discussion on cutting-edge trends in the JavaScript and Node.js ecosystems!SponsorsChuck's Resume Template Developer Book Club Become a Top 1% Dev with a Top End Devs MembershipSocialsLinkedIn: Jared HansonTwitter: @jaredhansonPicksAJ - SQL <---> Types <---> JShttps://github.com/nettofarah/postgres-schema-tshttps://www.npmjs.com/package/ts-to-jsdochttps://jswithtypes.com/AJ - Creative T60 SpeakersAJ - HammerHead Metal Shower HeadAJ - Degrees of Comfort King Dual-Heated BlanketCharles - Risk Legacy | Board GameCharles - Ubiquiti: UniFi - IntroductionSteve - The DriveSteve - FigmaSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

26 Dec 20231h 19min

The Rise of No Code: A Deep Dive into Toddle's Revolutionary Web App Platform - JSJ 612

The Rise of No Code: A Deep Dive into Toddle's Revolutionary Web App Platform - JSJ 612

Andreas Møller is a software engineer and the creator of Toddle, a platform that lets you build web applications without traditional code. They dive into the world of web development and the exciting rise of no-code and low-code approaches. They discuss the power and complexity of Toddle, its unique visual programming language, and how it enables efficient web development. They talk about the nitty-gritty of visual programming and the complexities of version control, so stick around and join us for this deep dive into the ever-evolving world of web development.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsMiroBecome a Top 1% Dev with a Top End Devs MembershipLinksToddle SocialsLinkedIn: Andreas MøllerPicksAJ - A Man Called OttoAJ - Jonathan BlowDan - Dan's tweet about Jesus being a Jew from JudeaDan - Lucky Hank TV showSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

19 Dec 20231h 21min

Monitoring Performance and Core Web Vitals ft. Bianca Grizhar and Sumitra Manga - JSJ 611

Monitoring Performance and Core Web Vitals ft. Bianca Grizhar and Sumitra Manga - JSJ 611

Bianca and Sumitra from Raygun join the panel to talk about Core Web Vitals and how tools like Raygun can help keep tabs on and monitor your performance stats as you change your web application to get you better results on Google.SponsorsChuck's Resume Template MiroBecome a Top 1% Dev with a Top End Devs MembershipLinksCrUX and Core Web Vitals – What to Measure on the Web with Rick Viscomi – JSJ 486JSJ 477: Understanding Search Engines and SEO (for devs) – Part 2Opinionated Core Web Vitals – JSJ 495Twitter: Raygun ( @raygunio )LinkedIn: Bianca GrizharLinkedIn: Sumitra MangaPicksAJ- How to ADHD - YouTubeAJ- The Biggest Myth In Education - YouTubeAJ- Brave SearchAJ- GitHub | go-gitea/giteaBianca- How to monitor and optimize Core Web Vitals - YouTubeCharles- Level Up | Devchat.tvCharles- Rhythm of WarDan- Is our universe the only universe? - Brian Greene - YouTubeSumitra- Formula 1: Drive to SurviveSupport this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

12 Dec 20231h 22min

Populärt inom Business & ekonomi

framgangspodden
varvet
badfluence
svd-ledarredaktionen
rss-borsens-finest
uppgang-och-fall
avanzapodden
lastbilspodden
rss-dagen-med-di
borsmorgon
fill-or-kill
affarsvarlden
rss-kort-lang-analyspodden-fran-di
tabberaset
kapitalet-en-podd-om-ekonomi
dynastin
rikatillsammans-om-privatekonomi-rikedom-i-livet
montrosepodden
rss-inga-dumma-fragor-om-pengar
rss-en-rik-historia