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)

167 JSJ TypeScript and Angular with Jonathan Turner and Alex Eagle

167 JSJ TypeScript and Angular with Jonathan Turner and Alex Eagle

02:27 - Alex Eagle IntroductionTwitter GitHubGoogle02:54 - Jonathan Turner IntroductionTwitter GitHubMicrosoft[Talk] Jonathan Turner: TypeScript and Angular 2 @ ng-conf 2015 [Talk] Jonathan Turner: TypeScript and Angular 2 @ Angular U 2015 03:30 - What is TypeScript?04:40 - Google + Microsoft = <3 (Angular Adopting TypeScript)Rob EisenbergAtScriptJonathan Turner: Angular 2: Built on TypeScript07:18 - TypeScript Accommodating AngularTC39Yehuda KatzAurelia 09:28 - Surge of Interest in Adopting a Typechecker, Type System 14:21 - Angular: Creating a New LanguageKilling Off Wasabi - Part 1 (FogBugz Article)traceur16:46 - The Angular 2 Component System and How it Uses New Annotations for Classes18:01 - Annotations and Decorators22:06 - TypeScript and Babel?; Adding New Features25:25 - Non-Angular Users Adopting TypeScriptVisual Studio Code34:55 - Tooling and Setting Modes for Linting and Static Analysis36:58 - Using Libraries Outside the TypeScript Ecosystem38:11 - Type Definition Files40:15 - Content of the Type System43:19 - Duck Typing 45:12 - Getting People to Care about TypeScript 49:16 - The Angular and TypeScript RelationshipPicks f.lux (Aimee) Jafar Husain: Functional Programming in Javascript (learnrx) (Aimee) Startup Timelines (Jamison) Friday Night Lights (Jamison) React Rally (Jamison) Evan Farrer: Unit testing isn't enough. You need static typing too. (Dave) AngularConnect (Joe) ng-click.com (Joe) mdn.io (Joe) Sonic Pi (Chuck) Error Prone (Alex) AudioScope-ng2 (Jonathan) The Nintendo World Championships (Jonathan)Special Guests: Alex Eagle and Jonathan 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.

8 Heinä 20151h 1min

166 JSJ New Relic with Wraithan and Ben Weintraub

166 JSJ New Relic with Wraithan and Ben Weintraub

02:27 - Coding House Scholarship Winners with AJ and AimeeEmily Dreisbach (50% scholarship winner)Blake Gilmore (50% scholarship winner)Berlin Sohn (100% scholarship winner)Congratulations from the panelists of JavaScript Jabber! 09:48 - Ben Weintraub IntroductionTwitter GitHub10:40 - Wraithan IntroductionTwitter GitHub Blog11:01 - Why Care About Monitoring?Insights13:08 - Mixedpanel 13:57 - How it Works on the BackendTime-series DataMySQLstatsdTracesS3CassandraInsights17:26 - New Relic’s CEO: Lew Cirne 18:37 - How the Node Agent WorksExpress.js Specifics    Transactions and Controller NamesDatabase MonitoringMongoDBOracle Support23:27 - Deciding Which Databases to SupportPostgres26:41 - Browser Monitoring32:54 - Using Zombie.js?34:11 - Tree of Causality Track.js 39:37 - Monetizing Aspect, Viewable Source/Source Available Code47:28 - PerformanceCodeGenmraleph Blog v8-perfBenchmarkingjsPerf01:00:53 - New Relic@newrelicNew Relic Blog New Relic Community ForumPicks mraleph Blog (Wraithan) v8-perf (Wraithan) The Dear Hunter: A Night on the Town (Jamison) React Rally (Jamison) caddy (AJ) Windows 10: Setup your Raspberry Pi 2 (AJ) Remote debugging protocol (Ben) Chrome Dev Tools Filmstrip View (Ben)Special Guests: Ben Weintraub and Wraithan . 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 Heinä 20151h 4min

165 JSJ ShopTalk with Chris Coyier and Dave Rupert

165 JSJ ShopTalk with Chris Coyier and Dave Rupert

02:43 - Dave Rupert IntroductionTwitter GitHub BlogParavel03:42 - Chris Coyier IntroductionTwitter GitHub BlogCSS-Tricks CodePen 06:24 - The ShopTalk Show and Podcasting@shoptalkshow“What do I learn next?” => “Just Build Websites!”Question & Answers Aspect23:19 - Tech Is A NichePaul Ford: What is Code? 29:51 - Balancing Technical Content for All Levels of ListenersCommunity Opinion38:42 - Learning New CSS Tricks (Writing Blog Posts)Code Golf41:54 - The Accessibility Project Adventures in Angular Episode #027: Accessibility with Marcy Sutton Anne Gibson: An Alphabet of Accessibility Issues 56:02 - Favorite & Cool EpisodesShowTalk Show Episode #091: with Jamison Dance and Merrick Christensen ShopTalk Show Episode #101: with John ResigShopTalk Show Episode #157: with Alex Russell  ShopTalk Show Episode #147: with Tom Dale ShopTalk Show Episode #123: Special Archive Episode from 2004 ShopTalk Show Episode #166: with Lisa IrishShopTalk Show Episode #161: with Eric Meyer Picks FIFA Women's World Cup (Joe) Winnipeg (Joe) The Martian by Andy Weir (Joe) Zapier (Aimee) SparkPost (Aimee) dev.modern.ie/tools/vms (AJ) remote.modern.ie (AJ) Microsoft Edge (AJ) StarFox Zero for Wii U (AJ) Hot Plate (AJ) untrusted (AJ) Skiplagged (Dave) Judge John Hodgman (Dave) Wayward Pines (Chris) Sturgill Simpson (Chris) The Economic Value of Rapid Response Time (Dave) The Adventure Zone (Dave) React Rally (Jamison) Matsuoka Shuzo: NEVER GIVE UP (Jamison) DESTROY WITH SCIENCE - Quantum Loop (Jamison) Serial Podcast (Chuck) Ruby Remote Conf (Chuck)Special Guests: Chris Coyier and Dave Rupert. 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 Kesä 20151h 15min

164 JSJ Rendr with Spike Brehm

164 JSJ Rendr with Spike Brehm

Get your Ruby Remote Conf tickets and check out the @rubyremoteconf Twitter feed for exciting updates about the conference. 02:22 - Spike Brehm IntroductionTwitter GitHubBlogAirbnb@airbnb@airbnbnerds03:07 - rendr Isomorphic JavaScriptSingle-Page ApplicationRoutes and Controllers06:24 - Why the back and forth between server-side and client-side applications?Rendering Content for SEO (Search Engine Optimization)Spike Brehm: Building Isomorphic Apps @ JSConf.Asia 2014 (Video) Spike Brehm: Building Isomorphic Apps @ JSConf.Asia 2014 (Slides)Spike Brehm: The Evolution of Airbnb's FrontendCaching20:28 - Tools That HelpBrowserifywebpackset-cookie22:21 - Why do this? Who gets statically and dynamically rendered pages?Airbnb Mobile HydrationReactVirtual DOMDiffingDelegation30:26 - DOM and String-based TemplatingHandlebars.jsExpress.jsMounting33:11 - Use CasesMeteorAsana36:08 - Why does Isomorphic JavaScript get so much hate?Charlie Robbins: Scaling Isomorphic Javascript Code Michael Jackson: Universal JavaScriptPicks The Paleolithic Diet (Aimee) Programming Throwdown (Aimee) Listen to other people’s views (Chuck) AJ O'Neal: Access web pages through your home network via SSH (AJ) AJ O'Neal: Reverse VPN: turn any private device into public cloud server (AJ) Alt (Spike) Tame Impala (Spike)Special Guest: Spike Brehm. 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.

17 Kesä 201554min

163 JSJ Flow with Jeff Morrison and Avik Chaudhuri

163 JSJ Flow with Jeff Morrison and Avik Chaudhuri

03:32 - Jeff Morrison IntroductionTwitter GitHubFacebook03:46 - Avik Chaudhuri IntroductionTwitter GitHub LinkedInFacebook04:27 - Flow @flowtype [GitHub] flow05:36 - Static Type CheckingDynamic vs Static Type Languages09:52 - Flow and Unit TestingJest12:39 - Gradual Typing 15:07 - Type Inference 17:50 - Keeping Up with New Features in JavaScriptBabel20:49 - Generators24:46 - Working on Flow28:27 - Flow vs TypeScriptInference SupportTony Hoare: Null References: The Billion Dollar Mistake35:41 - Putting the “Java” Back in JavaScriptServer/Client OverviewPrototyping45:26 - Flow and the JavaScript Community46:43 - React Support48:39 - Documentationgh-pages (link to the docs)IRC Channel for Flow: #flowtype on webchat.freenode.netPicks Nolan Lawson: We have a problem with promises (Aimee) Jim 'N Nick's BBQ Restaurant (Aimee) Frank McSherry: Scalability! But at what COST? (Jamison) Frank McSherry: Bigger data; same laptop (Jamison) Greg Wilson: What We Actually Know About Software Development, and Why We Believe It's True (Jamison) Marron: Time-Travel Debugging for JavaScript/HTML Applications (Jeff) Real World OCaml (Jeff) Muse (Jeff) Shtetl-Optimized (Avik) Chef's Table (Avik)Special Guests: Avik Chaudhuri and Jeff Morrison. 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.

10 Kesä 20151h 2min

162 JSJ ESLint with Jamund Ferguson

162 JSJ ESLint with Jamund Ferguson

02:15 - Jamund Ferguson IntroductionTwitter GitHubBlogPayPalJamund Ferguson: JavaScript Linting for Code Quality & ESLint Overview02:47 - Lint (Background)JSLintDouglas CrockfordJSHintESLint[GitHub] eslintNicholas Zakas[Gitter] eslint04:48 - Keeping ESLint Up-to-date​​Esprima Ariya Hidayatespree Babelbabel-eslintES6 (ECMAScript 6)08:09 - Abstract Syntax Tree (ASTs)Jamund Ferguson: Don’t be scared of abstract syntax trees MinificationUglifyJS13:28 - Using Lint ToolsContext SwitchingAspects to Linting:Code StandardizationCatching Bad MistakesJSCS (JavaScript Code Style)“Extends”20:42 - Are there a downsides to linting?The Social Problem23:40 - Establishing RulesBikesheddingConsistency25:12 - Cool ESLint Featureshandle-callback-errNot Throwing LiteralsNo Restricted ModulesJamund Ferguson: Error Handling in Node.js @ MountainWest JavaScript 2014 30:45 - How ESLint Works Internallyeslint-plugin-angularConfiguration and Defaults40:07 - Getting Started with Linting43:03 - Autofixer 44:41 - Plugins46:47 - Linter Feedback From the PanelPicks Mozilla (AJ) We Will All Be Game Programmers (Aimee) Search Inside Yourself: The Unexpected Path to Achieving Success, Happiness (and World Peace) by Chade-Meng Tan (Aimee) Good Mythical Morning (Dave) Salt Lake City (Dave) BB King Calls This One Of His Best Performances (Jamison) json-server (Jamison) Austenland (Joe) Supergirl (Joe) A Short History of Nearly Everything by Bill Bryson (Jamund) The Book of Mormon (Jamund)     Special Guest: Jamund Ferguson. 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.

3 Kesä 201558min

161 JSJ Rust with David Herman

161 JSJ Rust with David Herman

02:52 - David Herman IntroductionTwitter BlogJavaScript Jabber Episode #54: JavaScript Parsing, ASTs, and Language Grammar w/ David Herman and Ariya HidayatJavaScript Jabber Episode #44: Book Club! Effective JavaScript with David HermanEffective JavaScript by David Herman@effectivejsTC39Mozilla03:50 - The Rust Programming Language[GitHub] rust06:31 - “Systems Programming Without Fear”07:38 - High vs Low-level Programming LanguagesGarbage Collection and DeallocationMemory SafetyPerformance and Control Over Performance11:44 - Stack vs Heap Memory Etymology of "Foo" RAII (Resource Acquisition Is Initialization)16:52 - The Core of RustOwnershipType System24:23 - Segmentation Fault (Seg Faults)27:51 - How much should programmers care about programming languages? Andrew Oppenlander: Rust FFI (Embedding Rust in projects for safe, concurrent, and fast code anywhere.)32:43 - Concurrency and Multithreaded Programming35:06 - Rust vs Go 37:58 - servo 40:27 - asm.jsemscripten42:19 - Cool Apps Built with RustSkylightWit.ai45:04 - What hardware architectures does the Rust target?45:46 - Learning RustRust for Rubyists by Steve KlabnikPicks Software Engineering Radio (Dave) How Will You Measure Your Life? by Clayton M. Christensen (Dave) The Presidents of the United States of America (Dave) Design Patterns in C (AJ) Microsoft Edge Dev Blog: Bringing Asm.js to Chakra and Microsoft Edge (AJ) The Web Platform Podcast: Episode 43: Modern JavaScript with ES6 & ES7 (AJ) Firefox Fame Phone (AJ) iTunes U CS106A (Programming Methodology) (Aimee) Valerian Root on Etsy (Aimee) The Dear Hunter - Live (Jamison) Designing Data-Intensive Applications by Martin Kleppmann (Jamison) Fogus: Perlis Languages (Jamison) Galactic Civilizations III (Joe) Visual Studio Code (Joe) Tessel 2 (Dave) Event Driven: How to Run Memorable Tech Conferences by Leah Silber (Dave) Plush Hello Kitty Doll (Dave)Special Guest: David Herman. 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.

27 Touko 20151h 5min

160 JSJ Stormpath with Robert Damphousse

160 JSJ Stormpath with Robert Damphousse

02:24 - Robert Damphousse Introduction02:40 - OAuthOpenIDJWT07:15 - Stormpath@gostormpath[GitHub] StormpathBlog08:38 - Authorization Information Storage11:29 - Stormpath Authentication vs OAuth AuthenticationResource Owner Password Credentials Grant14:43 - Caching 15:41 - Building Backends as a Service?18:21 - Security19:12 - Using CassandraStormpath in Planet Cassandra: 50k Accounts Imported in Under 200ms20:27 - Use Cases22:27 - Authentication as a Service 23:40 - 2FA (Two Factor Authentication)?24:07 - REST APIsLaunch a SaaS – and Battle Your Robot – With Stormpath25:39 - Making Complete AppsFullContactFirebase26:33 - Security (Cont’d)27:34 - In-Between Layer (Authentication API)28:40 - Browser-Based vs Mobile Application Use29:44 - Angular, React, Flux, 32:02 - React Native?33:05 - Stormpath Life Expectancy35:09 - Customers36:12 - Active Directory, LDAP (Lightweight Directory Access Protocol) 37:05 - Support and PricingPicksPutting the "fun" back in "funeral"! Celebrating the death of old IE browsers on January 12! (Dave) Giant Star Wars LEGO Super Star Destroyer Shattered at 1000 fps | Battle Damage (Dave) GitLab (Dave) Allen Pike: JavaScript Framework Fatigue (Aimee) The Cult of Work You Never Meant to Join (Aimee) Serial (AJ) HotPlate (AJ) Design Patterns in C (AJ) OAuth3 (AJ) JS Remote Conf Videos (Chuck) Ruby Remote Conf (Chuck) Traction: Get a Grip on Your Business by Gino Wickman (Chuck) Startups For the Rest of Us (Chuck) The Guest House: A Poem (Robert) The Hiring Post (Robert) Front-end Job Interview Questions (Robert)Special Guest: Robert Damphousse. 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.

20 Touko 201550min

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