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)

175 JSJ Elm with Evan Czaplicki and Richard Feldman

175 JSJ Elm with Evan Czaplicki and Richard Feldman

02:27 - Evan Czaplicki IntroductionTwitter GitHubPrezi 02:32 - Richard Feldman IntroductionTwitter GitHubNoRedInk02:38 - Elm @elmlang04:06 - Academic Ideas05:10 - Functional Programming, Functional Reactive Programming & Immutability16:11 - ConstraintsFaruk AteşModernizrThe Beauty of ConstraintsTypes / Typescript24:24 - Compilation27:05 - Signals start-app36:34 - Shared Concepts & Guarantees at the Language Level43:00 - Elm vs React 47:24 - IntegrationPortslunr.js52:23 - Upcoming Features54:15 - TestingElm-Test elm-check56:38 - Websites/Apps Build in ElmCircuitHub58:37 - Getting Started with ElmThe Elm Architecture Tutorial Elm Examples59:41 - Canonical Uses?01:01:26 - The Elm Community & ContributionsThe Elm Discuss Mailing ListElm user group SFStack Overflow ?The Sublime Text PluginWebStorm Support for Elm?Codagrunt-elm gulp-elmExtras & ResourcesEvan Czaplicki: Let's be mainstream! User focused design in Elm @ Curry On 2015 Evan Czaplicki: Blazing Fast HTML: Virtual DOM in ElmPicks The Pragmatic Studio: What is Elm? Q&A (Aimee) Elm (Joe) Student Bodies (Joe) Mike Clark: Getting Started With Elm (Joe) Angular Remote Conf (Chuck) Stripe (Chuck) Alcatraz versus the Evil Librarians (Alcatraz, No. 1) by Brandon Sanderson (Chuck) Understanding Comics: The Invisible Art by Scott McCloud (Evan) The Glass Bead Game: (Magister Ludi) A Novel by Hermann Hesse (Evan) The Design of Everyday Things: Revised and Expanded Edition by Don Norman (Richard) Rich Hickey: Simple Made Easy (Richard) NoRedInk Tech Blog (Richard)Special Guests: Evan Czaplicki and Richard Feldman. 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.

2 Sep 20151h 9min

174 JSJ npm 3 with Rebecca Turner and Forrest Norvell

174 JSJ npm 3 with Rebecca Turner and Forrest Norvell

Don’t miss out! Sign up for Angular Remote Conf! 02:28 - Forrest Norvell IntroductionTwitter GitHub02:37 - Rebecca Turner IntroductionTwitter GitHub Blog03:05 - Why npm 3 Exists and Changes in npm 2 => 3DebuggingLife Cycle OrderingDeduplication08:36 - Housekeeping09:47 - Peer Dependency ChangesThe Singleton Pattern15:38 - The Rewrite Process and How That Enabled Some of the Changes Coming OutCJ Silverio: Npm registry deep dive @ Oneshot Oslo 22:50 - shrinkwrapping 27:00 - Other Breaking Changes?Permissions30:40 - Tiny Jewels33:24 - Why Rewrite?36:00 - npm’s Focus on the Front EndBower npm Roadmap 42:04 - Transitioning to npm 342:54 - Installing npm 344:11 - Packaging with io.js and Node.js 45:16 - Being in BetaPicks Slack List (Aimee) Perceived Performance Fluent Conf Talks (Aimee) Paul Irish: How Users Perceive the Speed of The Web Keynote @ Fluent 2015 (Aimee) Subsistence Farming (AJ) Developer On Fire Episode 017 - Charles Max Wood - Get Involved and Try New Things (Chuck) Elevator Saga (Chuck) BrazilJS (Forrest) NodeConf Brazil (Forrest) For quick testing: `npm init -y`, configure init (Forrest) Where Can I Put Your Cheese? (Or What to Expect From npm@3) @ Boston Ember, May 2015 (Rebecca) Open Source & Feelings Conference (Rebecca) bugs [npm Documentation] (Rebecca) docs [npm Documentation] (Rebecca) repo [npm Documentation] (Rebecca)Special Guests: Forrest Norvell and Rebecca Turner. 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.

26 Aug 201556min

173 JSJ Online Learning with Gregg Pollack

173 JSJ Online Learning with Gregg Pollack

Check out Angular Remote Conf! 02:55 - Gregg Pollack IntroductionTwitter GitHubEnvy Labs@envylabsCode School@codeschool  Starter Studio05:19 - Code SchoolRails for ZombiesTry Ruby 06:49 - Course ContentCode School Angular.js CoursesBreaking the Ice with Regular ExpressionsThe Fundamentals of Design09:42 - Plots & Storylines11:40 - Code School vs Pluralsight 14:09 - Structuring CoursesFrontend vs BackendBuilding Blocks of Express.jsReal-Time Web with Node.js  Security & SandboxingabecedaryMocha18:21 - JavaScript.com Try jQuery Contributing to JavaScript.comLet Us KnowTry JavaScriptResources22:47 - Designing Exercises & ChallengesabecedaryChai30:31 - The Future of Online LearningThinkfulBloc.ioAirPairHackHands Smarterer34:01 - Teaching Best PracticesPicks Mr. Robot (Gregg) #ILookLikeAnEngineer (Aimee) Why we Need WebAssembly An Interview with Brendan Eich (Aimee) Raspberry Pi 2 Model B (AJ) Periscope (Chuck)Special Guest: Gregg Pollack. 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.

19 Aug 201533min

172 JSJ NodeSchool with Jason Rhodes

172 JSJ NodeSchool with Jason Rhodes

Check out Angular Remote Conf! 02:22 - Jason Rhodes IntroductionTwitter GitHub BlogSparkPostNodeSchool@nodeschool GitHub: NodeSchoolcharmCityJS@charmcityjs 03:46 - NodeSchoolJason Rhodes: A Story About NodeSchool and Community Building at CascadiaJS 2014Jason Rhodes: NodeSchool Trying Node AND Contributing @ Empire Node 201406:05 - “Workshopper(s)”07:13 - How Meetups Run (Format), Target Audience11:09 - Pair Programming and Peer Learning14:34 - Starting a NodeSchool Chapter15:53 - Implementing Diversity18:07 - Mentoring and Mentorship20:49 - Time Commitment and Effort24:02 - Appealing to All Experience Levels of Attendees26:48 - The NodeSchool Community30:45 - Being a Member of an Open Source CommunityPicks Better Off Ted (Joe) Cat Exercise Wheel (Aimee) That Conference (Joe) primitive.io (Joe) React Rally (Aimee) Falcor YouTube Playlist (Aimee) javascriptjabber.com/15minutes (Chuck) Entreprogrammers Retreat 2015  (Chuck) Love Letter (Jason) charmCityJS (Jason) Mad Max: Fury Road (Jason)Special Guest: Jason Rhodes. 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.

12 Aug 201541min

171 JSJ Babel with Sebastian McKenzie

171 JSJ Babel with Sebastian McKenzie

02:28 - Sebastian McKenzie IntroductionTwitter GitHub Blog02:53 - Babel (Pronunciation Clarification)05:56 - HistoryLearn ES2015 - Babel09:14 - The State of Babel09:59 - Babel and the TC39 Process11:54 - Features That Can’t Be TranspiledWeak Maps and Proxies    13:45 - Readability and Performance OutputTraceur18:12 - Plugin Architecture19:58 - ES6/2015 Feature ImplementationBlockscopingLabelsExceptionsDestructuring25:49 - The Birth of Babel26:45 - Babel vs Traceur28:08 - Future Babel FeaturesCode OptimizationMinificationLinting30:15 - The Status of ES2015 and ES201631:01 - Browser Support35:03 - Marketing 35:59 - TypeScript 37:24 - Babel Development and LaborPicks Primitive.io (Joe) Armada: The Novel by Ernest Cline (Joe) How to Win Friends & Influence People by Dale Carnegie (AJ) Web Security Warriors Podcast (AJ) Nodevember (Aimee) The Hitchhiker's Guide to the Galaxy by Douglas Adams (Dave) Yellowstone National Park (Dave) React Rally (Dave) Iterativ: AngularJS Kurs (Chuck) Hire Thom Parkin! (Chuck) The Martian by Andy Weir (Sebastian) Five Guys Burgers and Fries (Sebastian)Special Guest: Sebastian McKenzie . 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.

5 Aug 201547min

170 JSJ RabbitMQ with Derick Bailey

170 JSJ RabbitMQ with Derick Bailey

Check out RailsClips!   02:38 - Derick Bailey Introduction Twitter GitHub BlogEntreprogrammers RabbitMQ: Patterns for Applications by Derick Bailey 03:36 - RabbitMQrequest-response Messaging Pattern 05:22 - Synchronous/Asynchronous; Chronological/Non-Chronological 10:33 - Why Do JS Devs Care About RabbitMQ? 12:10 - RabbitMQ and Complexity 14:04 - RabbitMQ’s Model Pub/Sub - RedisEnterprise Integration Patterns: Designing, Building, and Deploying Messaging Solutions by Gregor Hohpe Exchanges, Queues, and Bindings 22:15 - Event Emitters, Organizing Your Code Documentation 31:18 - Service Busses & Monitoring Systems NServiceBus 32:58 - How do you decide you need a messaging system? 36:40 - When Applications Crash… 39:24 - Event Sourcing Kafka 44:05 - Fault Tolerance/Failure Cases “Just let it fail” 50:21 - Putting RabbitMQ in Place SchedulingLong Wait vs Short Wait 58:28 - Formatting Your Messages RabbitMQ: Patterns for Applications by Derick Bailey 01:04:13 - “Saga” (Workflow) 01:05:10 - RabbitMQ For DevelopersUse code JSJABBER for 20% off the bundle! Picks W3Schools (AJ)1984 by George Orwell (AJ) The edit button on the MDN page (AJ)[YouTube] W3Schools is just... Better (AJ)The Go Programming Language (AJ)[YouTube] Go Programming: Learn the Go Programming Language in One Video (AJ)hackthe.computer (AJ)Maze Algorithm (AJ)A* Algorithm (AJ)React Rally (Jamison)Web Design: The First 100 Years (Jamison)Evan Czaplicki: Let's be mainstream! User focused design in Elm @ Curry On Prague 2015 (Jamison)Paracord (Chuck)Soto Pocket Torch (Chuck)Exploring ES6: Upgrade to the next version of JavaScript by Dr. Axel Rauschmayer (Derick)Small World (Derick)Star Wars Darth Bane Trilogy (Derick)LEGO Star Wars The Empire Strikes Back Slave I Set #75060 (Derick)Special Guest: Derick Bailey. 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 Jul 20151h 21min

169 JSJ Property-based Testing (QuickCheck) with Zach Kessin

169 JSJ Property-based Testing (QuickCheck) with Zach Kessin

02:20 - Zach Kessin IntroductionTwitter GitHub Zach's BooksParrotJavaScript Jabber: Episode #057: Functional Programming with Zach KessinTesting Erlang With Quickcheck Book04:00 - Mostly Erlang Podcast 05:27 - Property-based Testing (QuickCheck)07:22 - Property-based Testing and Functional Programmingjsverify 09:48 - Pure FunctionsShrinking18:09 - Boundary Cases20:00 - Generating the Data23:23 - Trending Concepts in JavaScript32:33 - How Property-based Testing Fits in with Other Kind of Testing35:57 - Test FailuresPanel Nolan Lawson: Taming the asynchronous beast with ES7 (Aimee) Nodevember (Aimee) Hipster Sound (Jamison) Om Next by David Nolen (Jamison) Gallant - Weight In Gold (Jamison) React Rally (Jamison) Better Off Ted (Joe) Armada: A Novel by Ernest Cline (Joe) Testing Erlang With Quickcheck Book (Zach) Parrot Universal Notification Interface (Zach) The Famine of Men by Richard H. Kessin (Zach)Special Guest: Zach Kessin. 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 Jul 201545min

168 JSJ The Future of JavaScript with Jafar Husain

168 JSJ The Future of JavaScript with Jafar Husain

03:04 - Jafar Husain IntroductionTwitter GitHubNetflixTC3903:29 - The Great Name Debate (ES6, ES7 = ES2015, ES2016!!)05:35 - The Release CycleWhat This Means for Browsers08:37 - Babel and ECMAScript 09:50 - WebAssembly 13:01 - Google’s NACL 13:23 - Performance > Features?ES6 Feature Performance (JavaScript Weekly Article) Features Implemented as Polyfills (Why Bother?)20:12 - TC39 24:22 - New FeaturesDecoratorsPerformance Benefit?28:53 -Transpilers34:48 - Object.observe() 37:51 - Immutable Types 45:32 - Structural Types47:11 - Symbols48:58 - Observables52:31 - Async Functionsasyncawait57:31 - Rapid Fire Round - When New Feature Will Be Released in ES2015 or ES2016let - 15for...of - 15modules - 15destructuring - 15promises - 15default function argument expressions - 15asyncawait - 16Picks ES6 and ES7 on The Web Platform Podcast (AJ) Binding to the Cloud with Falcor Jafar Husain (AJ) Asynchronous JavaScript at Netflix by Jafar Husain @ MountainWest Ruby 2014 (AJ) Let's Encrypt on Raspberry Pi (AJ) adventures in haproxy: tcp, tls, https, ssh, openvpn (AJ) Let's Encrypt through HAProxy (AJ) Mandy's Fiancé's Video Game Fund (AJ) The Murray Gell-Mann Amnesia Effect (Dave) The Majority Illusion (Dave) [Egghead.io] Asynchronous Programming: The End of The Loop (Aimee) Study: You Really Can 'Work Smarter, Not Harder' (Aimee) Elm (Jamison) The Katering Show (Jamison) Sharding Tweet (Jamison) The U.S. Women's National Soccer Team (Joe) mdn.io (Joe) Aftershokz AS500 Bluez 2 Open Ear Wireless Stereo Headphones (Chuck) Autonomy, Mastery, Purpose: The Science of What Motivates Us, Animated (Jafar) Netflix (Jafar) quiescent (Jafar) Clojurescript (Jafar)Special Guest: Jafar Husain. 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.

15 Jul 20151h 17min

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