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(735)

Marvels Of Using Svelte and SvelteKit - JSJ 566

Marvels Of Using Svelte and SvelteKit - JSJ 566

Tracy Lee is the CEO of This Dot Labs, a JavaScript-focused agency, and Adam L Barrett is a Developer Consultant at This Dot Labs. They join the show to talk about the wonders of Svelte and SvelteKit. It is a tool for creating fast web applications. Additionally, they explain how these allow excellent user and developer experiences.About this EpisodeAll about Svelte and SvelteKitThe internals of SvelteBenefits of Svelte compared to other frameworksDifference between Framework and MetaFrameworkOn YouTubeMarvels Of Using Svelte and SvelteKit - JSJ 566SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksThis Dot LabsTwitter: @adamlbarrettTwitter: @ladyleetTwitter: @ThisDotLabsPicksAdam - Zod Schema ValidationAdam - Frosthaven | Board Game | BoardGameGeekAJ - Silicon Power 1TB MicroSD under $100AJ - MBP M1 Storage ExpansionDan - Svelte Origins: A JavaScript DocumentaryDan -  State of JS 2022 gender gapDan - Sneaky Pete TV show on Amazon PrimeDan - "We Hate Perfect Things" by AJDan - War in UkraineCharles - Karma | BoardGameGeekCharles - 1923 (TV Series 2022–2023)Charles - XeroCharles - This Dot LabsTracy - Women in TechSupport 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.

24 Tammi 20231h 26min

Runtime Security With Gal Weizman - JSJ 565

Runtime Security With Gal Weizman - JSJ 565

Gal Weizman has professionally done Browser JavaScript security research for almost a decade and currently works in MetaMask. He joins the show to explain more about his profession as a "Browser Javascript Internals Expert." Moreover, he then talks about his project, "Snow". It is a JavaScript shim that applies an important defense mechanism in the browser to the web app's runtime to allow them to secure their same origin realms. About this EpisodeUnderstanding more Supply Chain SecurityHow Snow ❄️ functionsHow Snow provides added security to your appsLearning more about Realm and Realm SecurityAll about LavaMoatOn YouTubeRuntime Security With Gal Weizman - JSJ 565SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksawesome javascript realms security ⭐️Snow ❄️Introduction to SnowIntegrating Snow into MetaMaskLive demoMetaMask: The crypto wallet for Defi, Web3 Dapps and NFTsSocket - Secure your JavaScript supply chainLavaMoatGal WeizmanGitHub: weizmanTwitter: @WeizmanGalThe Magic Of Vue Mastery with Adam Jahr -VUE 205Web Testing And Automations With Playwright - VUE 206 PicksAJ - Dream MachineAJ - H1n Audio RecorderDan - AustraliaDan - Web Directions SummitDan - War in UkraineGal - LavaMoatGal - SeveranceSteve - The science of why you have great ideas in the showerSupport 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.

17 Tammi 20231h 28min

How To Plan For Success In 2023 - JSJ 564

How To Plan For Success In 2023 - JSJ 564

Join Charles Wood as he takes on a solo episode this week! He tackles different strategies on how to achieve your goals and aspirations. He motivates the listeners by sharing his personal story of how he was able to climb back up on his feet after getting lost a few years ago. Moreover, Chuck dives into his plans for Top End Devs this year and how he can help developers take control of their careers. On YouTubeHow To Plan For Success In 2023 - JSJ 564SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipPicksCharles - Exit: The Game – Advent Calendar: The Mystery of the Ice CaveCharles - topenddevs.social - mastodonCharles - Yellowstone - TV Series | Paramount NetworkCharles - JS Remote ConfSupport 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.

10 Tammi 202355min

Qwik Part II With Misko Hevery - JSJ 563

Qwik Part II With Misko Hevery - JSJ 563

Misko Hevery is the Chief Technology Officer at Builder.io. He is also the creator of Angular.io, known for zone.js, and helped co-create karma. He returns to the show to discuss "Qwik" in greater detail alongside AJ and Steve. No matter how complex your website is, Qwik provides the fastest possible page load times. In contrast to other frameworks, Qwik has special features that make it more user-friendly.About This EpisodeHow Qwik addresses any issueDifferent Qwik features that make it convenient and efficient to useOverview of precision lazy-loadingIntroduction to MitosisOn YouTubeQwik Part II With Misko Hevery - JSJ 563SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksQwikPapanasi UI LibraryMitosis FiddleBuilder.io and Qwik - JSJ 540Qwik with Misko Hevery - JSJ 549PicksAJ - Vornado heatersAJ - Replacement Parts for Office ChairsMisko - Flux | Where the world builds hardwareSupport 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 Tammi 20231h 27min

WebAuthn With Dan Moore - JSJ 562

WebAuthn With Dan Moore - JSJ 562

Dan Moore is the Head of DevRel at FushionAuth. He joins AJ and Chuck to talk about the new API called, “WebAuthn”. Using biometric, secure authentication techniques, WebAuthn is a new approach for confirming your users' identities. He goes into detail about the usage of this API and how this is a good choice for users to validate web applications with ease and convenience. About this EpisodeFeatures and benefits of WebAuthnRegistration process of WebAuthnWebAuthn With Dan Moore - JSJ 562 | YouTube VideoSponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksWhat is WebAuthn and why should you care?WebAuthn ExplainedYou can add biometric authentication to your webpage. Here's how.Auth. Built for Devs, by Devs - FusionAuthbest buy supported in DecPassword Free Authentication With Intuit And FIDO AuthenticationPassword-less authentication in NextJS application with WebAuthn and NextAuth - DEV Community 👩‍💻👨‍💻Twitter:@FusionAuthTwitter: @mooredsPicksAJ - UmbrelAJ - Dell OptiPlex Micro (better than Raspberry Pi 4)AJ - CBDCs are totalitarianism in an App and a currency (from Livestream #150)AJ - GitHub & NPM Support TouchID via WebAuthn's "This Device"!AJ - The Con Behind The Crypto Blood Bath – Dirty Secrets RevealedAJ - Vornado HeaterCharles - Cheap computers on Walmart.comCharles - Exit: The Game – Advent Calendar: The Mystery of the Ice Cave | Board Game | BoardGameGeekCharles - - Top End DevsCharles - Google Mail Charles - GmeliusDan - Station Eleven (TV Mini Series 2021–2022) - IMDbDan - Dan's Twitter persimmon pollSupport 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.

22 Joulu 20221h 14min

Astro with Fred K. Schott - JSJ 561

Astro with Fred K. Schott - JSJ 561

Steve and A.J. welcome Fred K. Schott to the show to talk about Fred's latest project, Astro. After initially discussing some of Fred's previous projects (Snowpak, Pika) and the joys of esbuild, they dive into Astro, including how it works, its use cases, and the newly finalized dynamic SSR capability. They finish with some picks going back to the very early web, and, as always, Steve's fabulous dad jokes.JSJ 561 - Youtube Sponsors "Wrangle, who helps with Slack approval workflows."Chuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksAstro with Fred K. Schott - VUE 195Introduction - LitAstroArrowJsFred K. SchottTwitter: @FredKSchottPicksAJ - Deku Deals - Nintendo Switch price tracking and wishlist notificationsAJ - NEW! - BonziBUDDY!Fred - Funny eCards - Send Custom Greeting Cards Online w/ JibJab!Support this podcast at — https://redcircle.com/javascript-jabber/donationsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.

13 Joulu 20221h 12min

The State of WASM - JSJ 560

The State of WASM - JSJ 560

WebAssembly (WASM) is a core technology of the Web and supported by all browsers as well as various other runtimes. Yet despite this fact most Web devs don't use it and have little or no familiarity with it. This week we are joined by Istvan Szmozsanszky "Flaki" to discuss some of the significant transformations currently taking place with this tech, which could make it much more mainstream. SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksGitHub: flakiFlakiTwitter: @slsoftworksPicksAJ - Savvi Legal: The Legal Hub for the Startup EcosystemAJ - DashCharles - Topenddevs.socialCharles - Tenpenny ParksCharles - World Cup 2022Dan - MoaDan - SnipdDan -  Ongoing war in UkraineFlaki - SuborbitalFlaki - GrainFlaki - Support local animal shelterFlaki - DaybreakSupport 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.

6 Joulu 20221h 48min

All Things TypeScript with Maina Wycliffe - JSJ 559

All Things TypeScript with Maina Wycliffe - JSJ 559

Maina Wycliffe is a Full-stack Software Engineer, Google Developer Expert, and Mentor who currently works at Flanksource. He is a Typescript Enthusiast and is the author of All things Typescript. He joins Chuck and Steve as he shares the reason behind starting his newsletter. His main goal is to teach developers to learn more about it and its typing system. About this EpisodeHow Maina handles and future plans in his newsletterAll about TypescriptFeatures of TypescriptTransitioning to Typescript SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinkstc39/proposal-type-annotationsWeekly Content Development Strategies with GDE Maina Wycliffe - AiA 357Twitter: @mwycliffe_devMaina WycliffePicksChuck - Betrayal at House on the Hill | Board GameChuck - Developer Book Club starting with Clean Architecture by Robert C. MartinChuck - Gather town - Gather AmbassadorChuck - Neverseen (4) (Keeper of the Lost Cities)Chuck - Sign Up For Your DreamsMaina - Watch The Dragon Prince | Netflix Official SiteSupport 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.

29 Marras 202253min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
mimmit-sijoittaa
psykopodiaa-podcast
rss-rahapodi
ostan-asuntoja-podcast
oppimisen-psykologia
pomojen-suusta
taloudellinen-mielenrauha
rss-lahtijat
sijoituspodi
rss-rahamania
rss-seuraava-potilas
rss-viisas-raha-podi
rss-neuvottelija-sami-miettinen
rahapuhetta
sijoituskaverit
kasvun-kipuja
rss-rikasta-elamaa
rss-turvacast
rss-merja-mahkan-rahat