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

Episoder(735)

159 JSJ Why JavaScript Is Hard

159 JSJ Why JavaScript Is Hard

02:54 - Everyone Gets It But MeMartin Fowler04:06 - Tools You “Need” to Know06:29 - Clojures07:39 - JavaScript as “Object-Oriented” vs “Event-Oriented”Object-Oriented Programming09:30 - Code That Can’t Be Serialized or Deserialized10:49 - Clojures (Cont’d)14:32 - The DOM (Document Object Model)[YouTube] Angular + React = Speed by Dave Smith @ ng-conf 201519:52 - Math Is HardIEEE754 (Floating-Point Arithmetic)22:39 - PrototypesSebastian Porto: A Plain English Guide to JavaScript Prototypes 25:43 - Asynchronous ProgrammingDebuggingGregor Hohpe: Your Coffee Shop Doesn’t Use Two-Phase Commit How Do You Learn It?32:23 - Browser Environments34:48 - Keeping Up with JavaScript35:46 - NodeNestingContext Switching42:48 - UTF-8 Conversion44:56 - Jamison’s StackReactKoa    RethinkDBio.jsWebpackCheck out and sign up to get new on React Rally: A community React conference on August 24th and 25th in Salt Lake City, Utah!Picks Jason Orendorff: ES6 In Depth (Aimee) Cat Strollers (Aimee) Stephano Legacy of the Void (Joe) A Gentleman's Guide to Love and Murder (Joe) Gregor Hohpe: Your Coffee Shop Doesn’t Use Two-Phase Commit  (AJ) Firefox OS (AJ) Flame (AJ) OpenWest 2015 (AJ) 801 Labs Hackerspace (AJ) Stack Overflow Careers (AJ) Dota 2 (Jamison) Beats, Rye & Types Podcast (Jamison) JS Remote Conf Talks (Chuck) Workflowy (Chuck) 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 Mai 201558min

158 JSJ Roots with Jeff Escalante

158 JSJ Roots with Jeff Escalante

02:30 - Jeff Escalante IntroductionTwitter GitHubCarrot Creative03:15 - Roots[GitHub] roots05:20 - Static Sites vs Dynamic SitesResource: Static vs Dynamic WebsitesScaleSEO (Search Engine Optimization)13:47 - Plugins 15:48 - Multipass Compile FunctionalityJSX20:27 - Roots vs Other Static Site GeneratorsTechnical Debt22:31 - Netlify 26:22 - HTTPSMathias Biilmann: Five Reasons you want HTTPS for your Static siteLet's EncryptExtended Validation Certificate (EV Certificate)Picks ECMAScript 6 — New Features: Overview & Comparison (Aimee) Jacob Kaplan-Moss: Keynote at Pycon 2015 (Aimee) Dr. Who (AJ) Power Rangers (AJ) Marvel Digital Comics Unlimited (Joe) GoFundMe (Joe) Netlify (Jeff) accord (Jeff) Contentful (Jeff) Special Guest: Jeff Escalante. 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.

6 Mai 201539min

157 Moving Your Rendering Engine to React with Amit Kaufman and Avi Marcus

157 Moving Your Rendering Engine to React with Amit Kaufman and Avi Marcus

02:43 - Amit Kaufman IntroductionGitHubWix03:07 - Avi Marcus IntroductionGitHubWix04:35 - Why Move Your Rendering Engine to React?[GitHub] react 07:25 - Using JavaScriptObject-Oriented Programming09:57 - Business Process and Progression (Getting Managerial Approval)Client-Side vs. Server-Side Rendering12:46 - Manipulation15:11 - Layout and PerformanceMeasuring and Patching20:21 - Building Client-Side Applications in GeneralAbstractionMake Code Predictable and ClearHave a Goal26:00 - Events 29:30 - StorageLazy Components31:31 - Immutability 34:36 - Flux and Keeping Code MaintainablePackages38:19 - Two-way Data BindingPicks Notes on the book "Art & Fear" by David Bayles & Ted Orland (Jamison) Papers (Jamison) Dynamo: Amazon’s Highly Available Key-value Store (Jamison) LDS Conference Talks (AJ) Stephen Young: Why your code is so hard to understand (Aimee) Kombucha (Aimee) Pascal Precht: Integrating Web Components with AngularJS (Pascal) Template Syntax Constraints and Reasoning (Design Doc) (Pascal) RUNNING WITH RIFLES (Joe) [Pluralsight Webinar] AngularJS 2.0: What you need to know with Joe (Joe) Whiplash (Amit) Dan Ariely: What makes us feel good about our work? (Amit) React Templates (Amit) Esprima (Avi) Big Hero 6 (Avi) Check out and sign up to get new on React Rally: A community React conference on August 24th and 25th in Salt Lake City, Utah!Special Guests: Amit Kaufman and Avi Marcus. 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.

29 Apr 201552min

156 JSJ Soft Skills and Marketing Yourself as a Software Developer with John Sonmez

156 JSJ Soft Skills and Marketing Yourself as a Software Developer with John Sonmez

Check out ReactRally: A community React conference in Salt Lake City, UT from August 24th-25th!03:36 - John Sonmez IntroductionTwitter GitHub Simple ProgrammerThe Entreprogrammers PodcastSoft Skills: The Software Developer's Life Manual by John SonmezHow to Market Yourself as a Software Developer Course04:29 - Mastermind GroupsThink and Grow Rich: The Landmark Bestseller - Now Revised and Updated for the 21st Century by Napoleon Hill05:53 - “Soft Skills”Why Care About Soft Skills?People Skills FinancesFitness11:53 - Learned vs InnateLifting Limited BeliefsPractice14:14 - Promotion (Managerial) Paths The Peter Principle17:52 - “Marketing” Value: Give Away 90% / Charge For 10%Seeming “Spammy” (Resistance to Sell)Neil Patel's BlogDocumentation for YourselfAJ O'Neal: How to Tweet from NodeJS 29:53 - Get Up and CODE!#086: Figure Skating and Software Development with Aimee Knight#067: Weight Loss Plan for Charles (Max Wood)33:47 - Burnout Do the Work by Steven PressfieldThe War of Art: Break Through the Blocks and Win Your Inner Creative Battles by Steven PressfieldSystems and Habits (Routines)Methods of ExecutionGet John’s How to Market Yourself as a Software Developer Course for $100 off using the code JSJABBER Comment on this episode for your chance to win one of two autographed copies of Soft Skills: The Software Developer's Life Manual by John Sonmez Picks The Recurse Center (Jamison) Code Words Blog (Jamison) DayZ Player Sings (And Plays Guitar) For His Life (Jamison) Demon (Jamison) Mastodon: Leviathan (Jamison) Jan Van Haasteren Puzzles (Joe) Hobbit Tales from the Green Dragon Inn (Joe) AngularJS-Resources (Aimee) Superfeet Insoles (Aimee) Good Mythical Morning (AJ) The Magic of Thinking Big by David J. Schwartz (Chuck) Streak (John) The E-Myth Revisited: Why Most Small Businesses Don't Work and What to Do About It by Michael E. Gerber (John) Influence: The Psychology of Persuasion, Revised Edition by Robert B. Cialdini (John) Do the Work by Steven Pressfield (John) The War of Art: Break Through the Blocks and Win Your Inner Creative Battles by Steven Pressfield (John) Special Guest: John Sonmez. 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.

22 Apr 20151h

155 JSJ Webtorrent with Feross Aboukhadijeh

155 JSJ Webtorrent with Feross Aboukhadijeh

Support our Teespring campaign! Get your JavaScript Jabber unisex t-shirts, hoodies, ladies’-sized, and long-sleeve tees!02:01 - Feross Aboukhadijeh IntroductionTwitter GitHub Blog02:39 - Peer-to-Peer Background, Content Delivery Networks (CDNs)WebRTCPeerCDNBitTorrent09:43 - The BitTorrent Protocol and Hypertext Transfer Protocol (HTTP)[YouTube] Feross Aboukhadijeh: WebTorrent (JSConf.Asia 2014) Distributed Hash Table (DHT)13:08 - WebTorrent = BitTorrent over WebRTCTransmission Control Protocol (TCP)The User Datagram Protocol (UDP)Session Traversal Utilities for NAT (STUN)17:22 - Where Do Original Files Come From?Tracker ServersBitTorrent Enhancement Proposal (BEP)21:23 - Opposition27:26 - Where is WebTorrent Going? (Use Cases)Instant.io[GitHub] instant.io29:52 - Live Broadcasts31:12 - Progression of BitTorrent Over TimeTechnical Decentralization35:03 - Same-Origin Policy 36:33 - Firefox Hello PicksJanuary 12th, 2016: Goodbye IE8 and IE9! (Dave) js-must-watch (Aimee) Headspace (Aimee) Popcorn Time (AJ) Steelheart (The Reckoners) by Brandon Sanderson (Chuck) Teespring (Chuck) Loop Drop by Matt McKegg (Feross) SceneVR by Ben Nolan (Feross) WebTorrent (Feross) node-nat-upnp (AJ) node-nat-pmp (AJ) simple-peer (Feross)Special Guest: Feross Aboukhadijeh. 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.

16 Apr 201547min

154 JSJ Raygun.io Error Reporting and Workflow with John-Daniel Trask

154 JSJ Raygun.io Error Reporting and Workflow with John-Daniel Trask

02:35 - John-Daniel Trask Introduction and BackgroundTwitter GitHub BlogMindscape@MindscapeHQ04:57 - Raygun.io@raygunio06:23 - Crash Reporting The Right WayError GroupingSuppress Notifications10:06 - Most Common Errors12:05 - Source Maps 19:16 - Managing Error Reporting in Gross Environments22:17 - Determining Where The Issue Is24:45 - Do People Write Their Own Errors?26:23 - Frameworks Support28:28 - Collecting Data: Privacy and Security30:01 - Does working in error reporting make you judgemental of others’ code?“DDOSing Yourself”32:42 - Planning for Rare Exceptions33:36 - Tactics to Cut Down on Messages35:53 - Gathering Basic Debugging Information37:58 - Getting the BEST InformationPromisesStockholm Syndrome42:24 - The Backend: Node.jsThe raygun4node provider43:24 - “Creating an Application”Picks LDS Connect (AJ) LDS I/O (AJ) TED Talk About Nothing (Dave) OlliOlli 2 Soundtrack (Jamison) Jurassic Park (Joe)  ng-vegas (Joe) WASD CODE 87-Key Illuminated Mechanical Keyboard with White LED Backlighting - Cherry MX Clear (Chuck) Grifiti Fat Wrist Pad (Chuck) Thank You Rails Clips Kickstarter Backers! (Chuck) Mastery by Robert Greene (Chuck) Ready Player One by Ernest Cline (Chuck) The Pirates of Silicon Valley (John-Daniel) littleBits (John-Daniel)Special Guest: John-Daniel Trask. 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.

8 Apr 201558min

153 JSJ Careers for Junior Developers with Aimee Knight

153 JSJ Careers for Junior Developers with Aimee Knight

02:26 - Aimee Knight IntroductionTwitter GitHub BlogMessage Systems02:48 - Figure Skating => ProgrammingPersistenceBalance Between Mind and Body05:03 - Blogging (Aimee’s Blog)06:02 - Becoming Interested in ProgrammingTreehouse@treehouse Code School@codeschool Rails Girls@railsgirls RailsBridge@railsbridge 08:43 - Why Boot Camps?10:04 - MentorsIdentifying a MentorContinuing a Mentorship13:33 - Picking a Boot Camp16:23 - Self-Teaching Prior to Attending Boot Camps20:33 - Finding Employment After the Boot CampBaltimore NodeSchoolPassionInterview Prep26:27 - Being a “Woman in Tech”30:57 - Better Preparing for Getting Started in ProgrammingBe Patient with Yourself32:07 - InterviewsGetting to Know CandidatesCoding Projects and Tests41:05 - Should you get a four-year degree to be a programmer?Eliza BrockPicks Aarti Shahani: What Cockroaches With Backpacks Can Do. Ah-mazing (Jamison) Event Driven: How to Run Memorable Tech Conferences by Leah Silber (Jamison) The Hiring Post (Jamison) Kate Heddleston: Argument Cultures and Unregulated Aggression (Jamison) Axios AJAX Library (Dave) Unbroken: A World War II Story of Survival, Resilience, and Redemption by Laura Hillenbrand (Dave) [YouTube] Good Mythical Morning: Our Official Apocalypse (AJ) Majora's Mask Live Action: The Skull Kid (AJ) The Westin at Lake Las Vegas Resort & Spa (Joe) Alchemists (Joe) Valerie Kittel (Joe) The Earthsea Trilogy: A Wizard of Earthsea; The Tombs of Atuan; The Farthest Shore by Ursula K. Le Guin (Chuck) Traction: Get a Grip on Your Business by Gino Wickman (Chuck) Freelancers’ Answers (Chuck) Drip (Chuck) Brandon Hays: Letter to an aspiring developer (Aimee) SparkPost (Aimee) Exercise and Physical Activity (Aimee)Special Guest: Aimee Knight. 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.

1 Apr 20151h 6min

152 JSJ GraphQL and Relay with Nick Schrock and Joe Savona

152 JSJ GraphQL and Relay with Nick Schrock and Joe Savona

02:25 - Nick Shrock IntroductionTwitter02:40 - Joe Savona IntroductionTwitter GitHhubBlog02:49 - Facebook and Open Source04:10 - GraphQL and Relay Overview“React for Your Data” / Component-based Data Fetching 06:11 - Unique to React? Passing Down Through the HierarchyXHPRepresentational State Transfer (REST)10:09 - QueriesToolingGraphicalPulling Definitions14:13 - Why Do I Care? (As Someone Not Working at Facebook)15:21 - Building Applications with GraphQL and Relay 19:01 - GraphQL and Building Backends21:42 - Drivers and Client SoftwareSynthesize => Code GenerationFluxContainer Classes30:58 - Reusing Components31:50 - Data Management34:25 - Open Source 36:40 - Reflecting Backend Constraints? (Optimizing the Backend)43:02 - Relationships => Logs46:24 - Security47:16 - Replacing REST (Adopting New Technology)“The Progressive Disclosure of Complexity”52:14 - What You Wouldn’t Use GraphQL or Relay ForGamesPicks Another Eternity by Purity Ring (Jamison) JT Olds: What riding a unicycle can teach us about microaggressions (Jamison) OCReMix (AJ) Duet Display (Chuck) Summoners War (Chuck) Thinking, Fast and Slow by Daniel Kahneman (Joe) Learning a new language (Joe) Other People: What Kind of Man (Nicolas Jaar remix) - Florence & the Machine (Nick) Boosted Boards (Nick) The Onion: Succession Of Terrible Events Fails To Befall 33-Year-Old Riding Longboard To Digital Media Job (Nick)Special Guests: Joe Savona and Nick Schrock. 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.

25 Mar 201539min

Populært innen Business og økonomi

stopp-verden
dine-penger-pengeradet
lydartikler-fra-aftenposten
e24-podden
rss-penger-polser-og-politikk
rss-borsmorgen-okonominyhetene
utbytte
tid-er-penger-en-podcast-med-peter-warren
pengepodden-2
okonomiamatorene
morgenkaffen-med-finansavisen
finansredaksjonen
lederpodden
pengesnakk
rss-finansforum-2
rss-markedspuls-2
livet-pa-veien-med-jan-erik-larssen
rss-impressions-2
rss-andelige-tanker-med-camillo
lederskap-nhhs-podkast-om-ledelse