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)

183 JSJ Should I go to college?

183 JSJ Should I go to college?

JS Remote Conf 2016 will be from January 14th-16th from noon-4:30PM ET! Get your early bird tickets or submit a CFP now thru December 14th! 02:46 - Panel Consensus and Experience and Career Paths16:00 - The School Doesn’t MatterDavid and Goliath: Underdogs, Misfits, and the Art of Battling Giants by Malcolm Gladwell 19:59 - Panel Experience and Career Paths (Cont’d)38:36 - Practically Helpful Knowledge and Disciplines; Interviewing and Hiring46:38 - Privilege and Navigating Without Opportunity49:54 - Why get a degree if it’s not necessary?Support Structure01:02:13 - Consensus Part 2Picks The More Things Change (Jamison) Allison Kaptur: Effective Learning Strategies for Programmers (Jamison) @Aimee_Knight (Joe) Star Wars Battlefront (Joe) Amazing Grass (Aimee) Daniel Brain: Sane, scalable Angular apps are tricky, but not impossible. Lessons learned from PayPal Checkout. (Aimee) xkcd: Correlation (Dave) Lviv, Ukraine (Dave) CharlesMaxWood.com (Chuck) Every Time Zone (Chuck) The Positioning Manual for Technical Firms by Philip Morgan (Chuck) JS Remote Conf (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.

28 Loka 201543min

182 JSJ RxJS with Matthew Podwysocki

182 JSJ RxJS with Matthew Podwysocki

02:19 - Matthew Podwysocki IntroductionTwitter GitHubMicrosoft04:01 - RxJSReactive JavaScript Interview w/ Jeffrey Van Gogh & Matthew Podwysocki @ JSConf 2010“First-class Events”10:18 - Practical Experience of UseObservables17:28 - observable-spec 21:43 - Observables and Promises 25:06 - Using RxJS in Common FrameworksRxJS Git Book RxJS Gitter Channel27:53 - Are there places where observables might not be better than callbacks/Promises?29:16 - Why would someone use RxJS on the backend in place of Node streams? RabbitMQ32:28 - Are Promises dying?36:13 - Observable GotchasHot vs Cold Observables40:29 - InfluenceElmFunctional Reactive Programming (FRP)47:47 - Will observables in ES2016 replace RxJS?Picks A cartoon guide to Flux (Aimee) Promisees (Aimee) The Dear Hunter - Act IV Rebirth in Reprise (Jamison) Jessie Char: Expert On Nothing @ NSConf7 (Jamison) XHR Breakpoints (Dave) Glove and Boots (Dave) Computer Programming (Joe) Evan Czaplicki’s Thesis for Elm (Joe) The Alchemist by Paulo Coelho (Chuck) thaliproject (Matthew) BBC Micro Bit (Matthew) Minutemen (Matthew)Special Guest: Matthew Podwysocki. 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.

21 Loka 20151h 1min

181 JSJ The Evolution of Flux Libraries with Andrew Clark and Dan Abramov

181 JSJ The Evolution of Flux Libraries with Andrew Clark and Dan Abramov

Sign up for JS Remote Conf! Dan and Andrew's super awesome, helpful document that they made for the show during preparation03:22 - Andrew Clark IntroductionTwitter GitHubOpenGovflummox 03:39 - Dan Abramov IntroductionTwitter GitHubJavaScript Jabber Episode #179: redux and React with Dan Abramov 04:03 - FluxFlux vs MVC09:36 - Data FlowWhy FluxComponent > fluxMixinMixins Are Dead. Long Live Composition.  Higher-order Components Sebastian Markbåge's Tweet22:52 - Conceptualizing React and FluxReact.js Conf 2015 - Flux Panel Does redux limit ambiguity that exists in Flux?27:50 - Documentation 30:38 - The Elm Programming Language 32:34 - Making Patterns Explicit in FrameworksTom Dale @ TXJS 2015Let a 1,000 flowers bloom. Then rip 999 of them out by the roots.Sebastian Markbåge: Minimal API Surface Area @ JSConf EU 201436:31 - Getting Started with React and FluxClasses42:42 - Where Flux Falls Short58:23 - Keeping the Core Small; Making DecisionsPicks Strange Loop 2015 Videos (Jamison) Typeset In The Future (Jamison) Open-source as a project model for internal work (w/ speaker notes) by Kevin Lamping (Jamison) Explanation of Zipf's Law (Dave) Will Conant's talk at UtahJS 2015 on Flux (Dave) The Legend of ZERO (3 Book Series) by Sara King (Joe) Camel Up (Joe) The Elm Programming Language (Joe) Boundaries: A talk by Gary Bernhardt from SCNA 2012 (Aimee) Nodevember (Aimee) TV Fool (Chuck) RCA Outdoor Digital HDTV VHF UHF Yagi Type Antenna (Chuck) The Michael Vey Book Series (Chuck) BusinessTown (Dan) Elon Musk: The World’s Raddest Man (Dan) Professor Frisby's Mostly Adequate Guide to Functional Programming (Dan) Abiogenesis (Dan) react-future (Dan) The Righteous Mind (Andrew) lodash-fp (Andrew) Inside Amy Schumer (Andrew) dataloader (Andrew) Careers at OpenGov (Andrew)Special Guests: Andrew Clark and Dan Abramov . 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.

14 Loka 201550min

180 JSJ Finding a Job

180 JSJ Finding a Job

02:14 - 15 Minute Podcast Listener chat with Charles Wood 03:23 - Amy’s Upcoming Talk at Nodevember 04:45 - Junior, Mid-level, and Senior Developers08:00 - Advice for Devs Straight Out of Boot Camp (How Job Hunts Work)14:28 - Looking For the Right Job For YOU The Passionate Programmer: Creating a Remarkable Career in Software Development by Chad Fowler23:22 - Mentorship & Company Culture 27:16 - Nailing the InterviewSalary ExpectationsGet to Know Potential Team MembersConfidence32:57 - Be Prepared: Coding is HARD Work35:27 - Getting To Know People & NetworkingHackathonsOpen Source ContributionDon’t Be Afraid … APPLY! ApprenticeshipsSaron Yitbarek: CodeNewbieConferences46:45 - Communication and People SkillsConway’s LawGet in touch with Aimee or Chuck!Tweet @cmaxwFork Aimee’s Ask Me Anything! Picks JS Remote Conf (Chuck) Rails Remote Conf (Chuck) Remote Conference Talks (Chuck) Standing Desks (Aimee) We have a problem with promises (Aimee) Interview Cake (Aimee) Nodevember (Aimee) A standing desk for $22 (Chuck) SmartCells Anti-Fatigue Comfort Mat (Chuck) Pebble Time (Chuck) Pebble.js (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.

7 Loka 201558min

179 JSJ redux and React with Dan Abramov

179 JSJ redux and React with Dan Abramov

02:25 - Dan Abramov IntroductionTwitter GitHubDan Abramov: Live React: Hot Reloading with Time Travel @ react-europe 201502:43 - Dan’s Background and Journey Into Building Stuff with React Visual Basic05:48 - redux and React     10:07- The Elm Programming Language 12:19 - Reducers14:04 - Hot Reloading 17:50 - “React makes you a better JavaScript developer.”22:10 - Time Travel28:26 - Storing Data and Managing StateInteracting with the browser on CircleCI's VM34:43 - [Patreon] Support Dan Abramov Creating Redux and React Hot Loader 36:24 - react-transformreact-proxy babel-plugin-react-transformreact-transform-catch-errors41:34 - Using redux outside React43:52 - Editors and Programmer Productivity45:35 - Future PlansPicks The OAuth2 RFC (Aimee) Michael Ries: Hiring Apprentices (Jamison) @sebmck: "Sometimes having email history isn't always a good thing..." (Jamison) Metal Gear Solid 5: The Phantom Pain (Jamison) Firefly (Joe) The Elm Programming Language (Joe) Google Keep (Dave) 15 Minute Podcast Listener chat with Charles Wood (Chuck) Pebble Time (Chuck) 100 Days of Burpees (Chuck) Broad City (Dan) Jamie xx: In Colour (Dan) Cycle.js (Dan)Special Guest: Dan Abramov . 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.

30 Syys 20151h

178 JSJ Tech Education and The Business of Running Front End Masters with Marc Grabanski

178 JSJ Tech Education and The Business of Running Front End Masters with Marc Grabanski

03:01 - Marc Grabanski IntroductionTwitter GitHub Blog03:35 - The jQuery UI Datepicker 04:29 - Frontend Masters@FrontendMasters07:26 - The Live Streaming PhenomenonTwitch.tv09:17 - Scalability11:25 - Value, Feedback Cycle14:43 - Structuring Courses and Workshops16:09 - Online vs In-PersonPrerequisites18:11 - Booking Workshops19:02 - Scaling (Cont’d)20:00 - Online Education (eLearning) in General egghead.ioCodeCombatNodeSchool21:40 - The Business ModelLicensing24:12 - Hot SellersKyle Simpson: Advanced JavaScript25:28 - Technical SetupLivestreamFirebase27:27 - Selecting Topics29:41 - Future Topics / Topics in Production30:38 - Individual / Company Attendeesfrontendmasters.com/workshops31:45 - Upcoming Plans for Frontend Masters32:32 - Advice For Starting Something Like Frontend Masters34:23 - Keeping Content Up-to-date36:14 - eLearning ExperimentsUntrusted exercism.ioNodeSchoolA Better Way to Learn JavaScriptMy Tech High39:30 - Giveawaysmarc@frontendmasters.com 40:07 - Getting Started with Programming43:03 - Marketing45:20 - Teacher CompensationPicks Jessica Kerr: Functional Principles In React @ React Rally 2015 (Jamison) thought-haver (Jamison) [Frontend Masters] Angular Application Development (Aimee) [Frontend Masters] JavaScript the Good Parts (Aimee) LÄRABAR (Aimee) Taking time off (Chuck) The Man from U.N.C.L.E. (Joe) BB-8 by Sphero (Joe) ng-conf (Joe) The Tim Ferriss Show (Marc) CodeCombat (Marc) Untrusted (Marc)Special Guest: Marc Grabanski. 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.

23 Syys 201512min

177 JSJ UI Validation with Oren Rubin

177 JSJ UI Validation with Oren Rubin

02:43 - Oren Rubin IntroductionTwitter GitHubLinkedInTESTIM.IO 05:43 - TestingUnit TestingEnd-to-end TestingAcceptance TestingFunctional TestingPerformance Testing18:18 - Page Object(s)Locators27:10 - Protractor & SeleniumZombie32:06 - Checking UI (Screenshots)37:04 - End-to-end > Full Coverage?40:03 - When should you start testing?42:21 - Cucumber 45:39 - DebuggingPicks Paul Ford: 10 Timeframes (Jamison) Kishi Bashi - “In Fantasia” (Jamison) Matt Zabriskie (Jamison) http-backend-proxy (Aimee) repl.it (Aimee) React.js Training with Michael Jackson and Ryan Florence (Joe) React Rally (Joe) AngularConnect (Joe) ng-conf (Joe) Ruby Remote Conf Videos (Chuck) Angular Remote Conf (Chuck) 15 Minute Podcast Listener chat with Charles Wood (Chuck) Dave Haeffner: Elemental Selenium (Oren) CSS Secrets by Lea Verou (Oren) Cloudinary (Oren)Special Guest: Oren Rubin. 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 Syys 201559min

176 JSJ RethinkDB with Slava Akhmechet

176 JSJ RethinkDB with Slava Akhmechet

02:20 - Slava Akhmechet IntroductionTwitter GitHub Blog02:41 - RethinkDB Overview@rethinkdb rethinkdb repo    04:24 - How It’s UsedCompose.io05:58 - Joins12:50 - Returning DataJSON13:53 - Getting Data to the BrowserQuora ArticleSocket.IO19:35 - ClusteringReliability & Performance IssuesJepsen (Call Me Maybe Series)Consensus Algorithms26:37 - ReQL 30:53 - IndexesB-tree 32:18 - MapReduce 35:44 - The RethinkDB Community & Contributors38:04 - Is it production ready?40:08 - Differences Between Version 2.0 and 2.1 ExtrasJavaScript Jabber Episode #161: Rust with David HermanSteve Klabnik: Systems Programming for the Ruby Developer @ Ruby Remote Conf 2015  Picks Our World War (Dave) Quest Protein Bars (Aimee) You-Dont-Know-JS (Aimee) Angular Remote Conf (Chuck) Orphan Black (Chuck) Mr. Robot (Slava) Rick and Morty (Slava) The Rust Programming Language (Slava)Special Guest: Slava Akhmechet. 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.

9 Syys 201551min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
rss-rahapodi
mimmit-sijoittaa
psykopodiaa-podcast
ostan-asuntoja-podcast
oppimisen-psykologia
pomojen-suusta
rss-rahamania
taloudellinen-mielenrauha
sijoituskaverit
rss-lahtijat
herrasmieshakkerit
kasvun-kipuja
yrittaja
hyva-paha-johtaminen
rss-h-asselmoilanen
rss-turvacast
rss-yrittajan-mielenmatka
rss-merja-mahkan-rahat
mihin-sita-saastais