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 House

Joe Eames

UI-Router
Persistence

Aimee Knight

Charles Max Wood

Upwork.com

Kokeile Premiumia

Nauti 14 päivää ilmaiseksi

Tilaa Premium

Jaksot(735)

How To Recession Proof Your Job - BONUS

Get the Black Friday/Cyber Monday "Double Your Productivity by 5pm Today" DealCoupon Code: "THRIVE" for a GIANT discountAre you looking at all the layoffs and uncertainty going on and wondering if your company is the next to cut back? Or, maybe you're a freelancer or entrepreneur who is trying to figure out how to deliver more value to gain or retain customers?Mani Vaya joins Charles Max Wood to discuss the one thing that both of them use to more than double their productivity on a daily basis.Mani has read 1,000's of productivity books over the last several years and has formulated a methodology for getting more done, but found that he lacked the discipline to follow through on his plans.The he found the one thing that kept him on track and made him so productive that he is now getting all of his work done and was able to live the life he wants.Chuck also weighs in on how Mani's technique has worked for him and allows him to spend more time with his wife and kids, run a podcast network, and a nearly full time contract.Join the episode to learn how Chuck and Mani get into a regular flow state with their work and consistently deliver at work. 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.

24 Marras 20221h 12min

Wix Velo with Yoav Abrahami - JSJ 558

We are joined by Yoav Abrahami, Chief Architect and Head of Velo to discuss the transformation of Wix from a Website builder to an application development platform. Wix Velo enables developers to implement code that runs either on the client-side or on Wix hosted Node server, while constructing the UI using a WYSIWYG page editor. In this way, Wix provides an interesting alternative to app development frameworks such as NextJS and Nuxt. Sponsors"Request Metrics, who does performance monitoring and can help with issues like too much cumulative layout shift" Chuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksVeloTwitter: @yoavabrahamiPicks AJ - The Big Short: Inside the Doomsday MachineAJ - Mentour PilotAJ - The Matt Walsh 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.

22 Marras 20221h 30min

What Is Functional Programming and What It's Not With Lane Wagner- JSJ 557

Lane Wagner is the founder of a startup company called Boot.dev. He teaches backend development online in Go, Python, and JavaScript. Lane joins Chuck and Steve as they talk all things Functional Programming. They also talk about its importance and share their thoughts about it. Moreover, Lane also shares his experience with creating boot.dev and the different teaching strategies he uses on his online learning platform. About this Episode The difference between Functional Programming VS Object-oriented ProgrammingReact Hooks & Vue 3 and why are they considered as “not Functional” Boot.dev and how is it created The reason why Go became a popular backend languageSponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipLinksBoot.devwagslane.devTwitter: @wagslanePicksCharles - Chuck's Resume TemplateCharles - Dice Miner Card Board GameCharles - Timpanogos Game ConventionCharles - Top End DevsLane - Life of a ChameleonLane - Boot.devSupport 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.

15 Marras 20221h 7min

Stories From The Trenches - JSJ 556

In this episode the panelists share war stories from their career and the lessons they have learned from them. They discuss things they have done back in their early days in tech, and how they now behave differently given those experiences.SponsorsChuck's Resume TemplateDeveloper Book Club starting with Clean Architecture by Robert C. MartinBecome a Top 1% Dev with a Top End Devs MembershipPicksAJ - Duratech 8mm-22mm COMPLETE wrench setAJ - ATV Body Armor / Adventure JacketsAJ - Project Hail MaryAJ - (Unpick) TwilightDan - The Mote in God's EyeDan - Code Like a Girl. Breaking the Gender StereotypeDan - Women on Stage and in Tech with Moran Weber - JSJ 483Support 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.

8 Marras 20221h 22min

Writing Change-Proof Software with Tests - JSJ 555

Shai Yalin is a freelance software architect and mentor. He specializes in teaching organizations and individuals how to use Test Driven Development (TDD) and other development methodologies and best practices. In this episode Shai joins us to explain how to use these methods in order to create software that is resilient to change, and how to refactor existing brittle code in order to clean out the rot.SponsorsTop End DevsCoaching | Top End DevsLinksChronomatic: my side-project storyYour Software as a KitchenThe Anatomy Of A Rotten CodebaseLinkedIn: Shai YallinTwitter: @shaiyallinPicksAJ - Read The Lost Metal by Brandon Sanderson: Prologue and Chapters One and TwoDan - FargoShai - VitestShai - We Are Legion (We Are Bob) (We Are Bob) (Bobiverse, #1)Shai - Citizen Of Glass, by Agnes ObelSteve- GitHub Copilot investigation · Joseph Saveri Law Firm & Matthew ButterickSupport 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.

1 Marras 20221h 19min

Remix and EpicWeb.dev with Kent C. Dodds - JSJ 554

Kent C. Dodds is a well-known JavaScript developer who has done myriad development courses and training. He's also done outreach for Remix. He's spoken at tons of conferences and his now working on creating EpicWeb.dev which helps developers become epic web developers.The Jabber crew starts out talking about learning, teaching, and EpicWeb.dev before going into the changes in the web platform and progressive enhancement and eventually Remix. Links:TestingJavaScript.comEpicWeb.devEpicReact.devRemixFly.ioLightstreamThe Web's Next Transition blog post by Kent C. DoddstRPCGraphQLPicks:AJExtraordinary Attorney WooWhen fixing a 4-wheeler, look at the larger component and compare prices.FourTrax 300DanWeb Directions SummitWar in UkraineSteveStudy on why you can't tickle yourselfKentEpicWeb.devCall Kent PodcastKent's Travel MapBuild Your House Yourself UniversitySupport 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.

25 Loka 20221h 49min

Being a New Developer with Diego Moura - JSJ 553

Diego Moura is a newer developer who has recently joined the ranks of professional developers. The panel talks to Diego about his career as a fashion designer and how he moved to Canada and go into programming. He initially got into digital marketing and figured out that he could modify and manage pages and picked up development as a function of doing UI work on his marketing pages. From there he fell in love with web development.SponsorsTop End DevsCoaching | Top End DevsArchitect, who provides environments on demandLinksJen SimmonsLinkedIn LearningFront-End MentorWatch and CodeReading Source Code with Carl Mungazi - JSJ 408Twitter: @_DiegoMouraTwitch: diegomouradevPicksChuckTimpConLocal Board Game ConventionsGet Chuck's ResumeCommand Your Coding Career (Coming Soon)Star Trek: PicardAJDIY Soldering StationAudioHijackBoot.devStevehttps://gizmodo.com/eu-officially-demands-big-tech-use-usb-c-end-of-2024-1849613451DanWeb Almanac for 2022Ongoing War in UkraineDiegoHow to be Great at Asking Coding QuestionsWhere Should We Begin PodcastSupport 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.

18 Loka 20221h 33min

Dan Shappir's Failed Predictions - JSJ 552

The panel goes back a few years and reviews some technology predictions that Dan made a few years ago on Quora. These include WASM, Progressive web apps, and others. Most were wrong, but one did end up being sort of accurate. Along the way, they go into some deep rabbit holes but manage to pull themselves out. As always, they end with picks, and Steve's stupendous dad jokes. SponsorsTop End DevsCoaching | Top End DevsLinksApple iOS browser grip loosened under latest draft EU rules- Top End DevsPicksAJ- Search Results for wire wheel at The Home DepotAJ - Rust-oleumAJ- Figma is powered by WebAssemblyAJ- ImageOptim - better Save for WebAJ- SquooshDan - Dev JokeDan- The 2022 Web AlmanacDan - CrUX and Core Web Vitals - What to Measure on the Web with Rick Viscomi - JSJ 486Dan - FargoDan - War in UkraineSteve - Dad JokesSupport 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.

4 Loka 20221h 13min

Kaikki yhdessä sovelluksessa

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi yhdessä paikassa.

Sinulle valikoitua sisältöä

Podme-sovelluksessa kokoat suosikkisi helposti omaan kirjastoosi. Saat meiltä myös kuuntelusuosituksia!

Jatka kuuntelua koska tahansa

Voit jatkaa siitä mihin jäit, myös offline-tilassa.

Premium

9,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa

Aloita 14 päivän kokeilu

Premium

13,99 €/kk

Kaikki premium-podcastit
Ei mainoksia
Ei sitoutumista, peruuta koska tahansa
Yksi lisäkäyttäjä

Kokeile 14 päivää maksutta

Suosittua kategoriassa Liike-elämä ja talous

Tarinat ja äänet, joita rakastat kuunnella

Kuuntele kaikki suosikkipodcastisi ja -äänikirjasi

Lue lisää