RRU 037: Make Backend Devs Jealous of Your Test Suite with Carly Litchfield
React Round Up13 Nov 2018

RRU 037: Make Backend Devs Jealous of Your Test Suite with Carly Litchfield

Panel:
  • Nader Dabit
  • Lucas Reis
  • Justin Bennett
Special Guests: Carly Litchfield In this episode, the panelists talk with Carly Litchfield who is a Full-stack engineer of React and React Native. The panel and Carly talk about frontend and backend developing and the issues that teams could face day-in and day-out. Listen to today’s episode to hear about that and much more! Show Topics: 0:00 – Kendo UI 0:30 – Nader: Welcome! Our panel is Justin, Lucas, myself, and our guest is Carly. Welcome to the show! Thanks for joining us. Introduce yourself please. 0:56 – Carly: I am a fullstack engineer at a company called Zocdoc. I have been there for 4 years, and we use C# framework. 1:17 – Nader: C# interesting! 1:26 – Nader: You can do game development and other stuff. 1:33- Carly: I haven’t gotten into game development at all, just using C# for web development. 1:50 – Nader. 1:55 – Carly. 2:08 – Nader: The topic for today is: being a frontend developer and a team that is mostly focused on backend. Also, other topics with testing if we have time. How did you get into web development? 2:32 – Carly goes into detail about how she got into web development. 5:02 – Carly: I have worked with React Native, too. 5:22 – Nader: That is my favorite thing to work with (React Native). 5:27 – Panel: Everyone was learning about this new domain and this frontend domain. How was the knowledge spread? How was it spread throughout the company? 5:50 – Carly: One of the people someone that was on this 3 – person team (Thomas) and he went around to anyone who knew React. He made a lot of tooling. He made a lot of configuration libraries. You’d have your NPM integration like everyone else. It was cool to hook it into our servers. It was crucial to help with adoption. Those libraries aren’t being well maintained and it’s causing some pain. 7:32 – Panel: I remember this one case when I was working with an engineer and he was working on backend stuff. He was like I don’t understand here is JSS and JavaScript. Did you have those cultural differences? 8:27 – Carly: Yeah, definitely. You will see a thousand two-thousand lines that are written by us and it’s impossible to know how it hooks-up, etc. It’s painful to work with and some of the internal tooling nobody is updating. That served a forcing mechanism b/c we built tons of the frontend that it’s so complicated and we are paralyzed. That served us b/c frontend is hard and we just can’t go plopping around wherever we want. That’s how they tried to use Backbone. We never hired a specific frontend engineer. We just kept hiring backend to learn frontend. It’s harder to hire someone to avoid those mistakes. They will have to learn the hard way, where a Senior Developer can help. Even our Backbone apps were heavy and hard to work with. At that time we thought we were going to go to React. We thought we could hire someone with true frontend experience. We started an interview process and hard to get off the ground. We have gotten a lot better b/c we have Senior and Principle engineers to help. 12:12 – Panel: This isn’t easy and this is hard. Building UIs are extremely difficult. 13:06 – Carly: I have an old manager that posted a quote...that just shows how much things are changing. These are advanced strategies. On the backend you have all of these services and go to AWS. However, on the frontend the problems aren’t solved, yet. WE don’t have a perfect answer. A lot of the dynamics are interesting and the right answers are yet to be found. 14:32 – Panel: I think that in some ways, an application we are finding better ways with static websites and blogs through the WordPress model. We are finding practices to enable people to build intricate things. 15:07 – Panel: I used C++ in the beginning of my career. I use a framework called QT. QT is good to building native UIs, but it’s extremely complicated and difficult. And thinking about that from the idea of building not only a UI, but also...we are essentially using tools that aren’t supposed to be used in the way they were designed. 16:46 – Carly: I agree. When I was using style components at the beginning – after you do it for a while it’s not weird anymore. It’s great not to have to reuse things. I hear a lot of people concerned with these separations, but maybe they were 3 separate concerns. Maybe one component is one concern, if you will. 17:59 – Panel: I agree. If you look at the page model vs. the web model...you want a button to look like THAT button. You want them to look the same, it’s a component or an app. Maybe if you have a Wikipedia page where you have headers and sections, the CSS model makes sense on that particular domain, but with application it’s so complicated. I am a fan of cell components, and... Things are getting better. Another topic – we are in this frontend world and one big problem with the old days was reliability. You talked a lot about testing in the frontend. Let’s talk about testing in your professional life. 19:48 – Carly: I moved slowly into backend, and it’s comfortable that you knew you weren’t going to break anything. This testing stuff is great and I actually love it. We need to figure it out on the frontend, too. I built a bunch of tools that doctors use. We started thinking about what can we do to make the frontend more testable. 21:40 – Panel: I call that: Layer Oriented Design. 21:51 – Carly: When we were on Backbone we used this screen-shot testing framework. We obviously should be focusing on how we made this app rather than how do we test frontend code. But we did it. You could have a Backbone view... 22:43 – Advertisement – FRESH BOOKS! 23:47 – Nader: How would you change the pictures – were you running it through what? 24:02 – Carly: An array of pixel colors. 24:10 – Carly: It was cool! We called it Lena. We used it for a year or so and it caught some bugs and it did other things. We built Percy and Storybook. We are ahead of the game with that. In general that is what we have moved to instead. 25:30 – Panel: What is Percy? 25:37 – Carly: It will render your components, then it will grab...and every time you push code it will compare the old/new screenshot. You can do mobile stuff, too, which is awesome. 26:25 – Panel: When I saw the Percy tests – I thought: this makes a difference! 26:48 – Carly: How do you know if this random stuff matters? 27:15 – Panel: It makes a huge impact. Percy can give it to you and easier to review code that has visual changes. If you added a border and you can see all the red sea of change, so let’s use a border box, etc. It’s really mind-blowing! They have a GitHub hook. If there are changes people have to improve. 28:22 – Panel: You mentioned it supporting a bunch of different browsers? What sort of context does Percy run in? Does it have a specific execution...? 28:44 – Carly: Options in Firefox and Chrome so far. People at Percy talk about cross-browsers and it will have a pipeline. It’s really hard to do. Who knows if it will come but we will see. 29:13 – Panel: How do we ensure that things are continuing to work across the browsers? Did we render anything that is completely broke? How do you do testing across browsers? 29:44 – Carly: Yeah, we use Browser Stack. We run Selenium IO. 31:12 – Nader: It sounds like you have great tools on the frontend. Nader asks a question. 31:28 – Carly: We have a fairly broken-up frontend. If someone changes something... Running all of those tests can get crazy. 32:11 – Panel: Cypress... Why did you decide on Cypress – what has been your experience with that? 32:35 – Carly: I have not yet figured out a good debugging experience, and I don’t know how you guys are doing it? It’s impossible to debug and it’s not a pleasant experience. I saw Cypress’ advertisement and you can see the difference. They highlight the target, etc. I had to try it! In just a little app that I have – I tested it there. I thought it was awesome b/c it will show you where it failed, etc. I had to get everyone on board and tried to persuade my team to use it. I used these slides and presented it, and it worked fine. It didn’t flake at all. People had to work with the tests and work with Cypress to get the feel for it. Everyone decided to use it, too. 35:16 – Panel: The spread of knowledge and it goes back to the beginning. What is this secret group: Frontend Guild? 35:33 – Carly answers the question. 37:04 – Panel: How does knowledge spread happen in other companies? Such different companies and different scales – how does that happen? 37:23 – Panel: As your company grows, communication is definitely a hard thing to accomplish. At ARTSY we try to do different things. One of our principles is...we try to document everything that goes on. Document from a process-level, and other levels, too. We have working practice groups

Become a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

Avsnitt(310)

Using and Teaching React with Kay Plößer - RRU 235

Using and Teaching React with Kay Plößer - RRU 235

In this episode of React Round Up, the panel talks with Kay Plößer, describing their experiences learning React. Kay is a software developer from Stuttgart, Germany and the author of the book React from Zero. They discuss the best approach to learning React from scratch. Kay describes the process of writing and producing his book 'React from Zero'. Initially he started with tutorials and lessons and then turned those into a book. It is constructed in two sections: basic and advanced and it's purpose is to help developers learn React without being overwhelmed. He has received great feedback from the people who have bought the book.Kay then describes his experiences teaching React to developers and talks about his blog post React Hooks Demystified which became really popular. The panel then about how developers can increase and diversify income through writing books and side projects.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksKay's Book: React from ZeroKay's Blog Post: React Hooks DemystifiedKay’s LinkedInKay’s TwitterKay’s GitHubKay's WebsiteKay's SkillshareKay's Facebookhttps://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupPicksNader - Finite and Infinite Games by James CarseLucas - An Introduction and Guide to the CSS Object ModelLucas - AST ExplorerCharles - Charles' New Devchat.tv Build on Eleventy on GitHubKay - Wardley mapsAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

10 Okt 202352min

The State Machines in React with David Khourshid - RRU 234

The State Machines in React with David Khourshid - RRU 234

David Khourshid is the author of a library called Xstate, He has been a developer for 7 years, currently works for Microsoft, his passion is frontendTalks a. In college, he actually studied piano performance, and so he talks about how he got into programming and where he started. The panel discusses his unique husky animation and how he came up with the idea for it and went about programming it.The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine. They agree that describing your code as a state machine makes it easier to communicate and connect with non developers. The panel discusses the importance of learning from other industries, such as approaching programming the same way construction workers build a house. They debate the Waterfall versus the Agile mindset. They talk about the advantages of programming in React and focusing on the state machine, especially because it is important to be intentional about dealing with concepts separate from other concepts. They share different ways to switch to state machine thinking, one of which is to look at your event handlers and make sure they are doing anything besides dispatching events. David talks about his library called Xstate and the basics of his library and his inspiration, and who else is working in state machines. The finish by discussing industry standards. SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksXstateKeyframersBootstrapDavid’s husky animationThe Checklist ManifestoSion SCXMLQTElmThunkObservableNoFloSketch SystemsState Charts PicksDavid - Atomic Habits by James Clear David - Bullet JournalThomas - The Checklist ManifestoThomas - Thomas’ Youtube ChannelDavid Khourshid - Constructing The User Interface with State Charts (check the library first)Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

4 Okt 202351min

React Best Practices - RRU 233

React Best Practices - RRU 233

In this week’s episode of React Round Up the panel works their way through a blog post outlining best practices for React. The first is “keeping components small and function-specific”. The panel discusses the pros of using this best practice and how it relates to the single responsibility principle. This best practice also helps with the next, “reusability is important”.The panel considers this second best practice and points out some of its flaws. It recommends avoiding the creation of new components. The panel explains that by avoiding creating new components it saves time but can also cause problems as you adapt components to fit more projects. SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinkshttps://teachablemachine.withgoogle.com/ Practical React Hooks: How to refactor your app to use Hooks 12 React Best Practices You Need to Follow in 2020 https://github.com/nadeesha/saul https://www.facebook.com/React-Round-Uphttps://twitter.com/reactroundupPicksCharles - White Christmas Charles - Holiday Inn Charles - The MaxCoders Guide To Finding Your Dream Developer Job Christopher - https://github.com/microsoft/vscode-eslint Christopher - https://www.playingwithfire.co/ Thomas - test && commit || revertAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

27 Sep 202340min

Game Development in React & Typescript with Maksim Ivanov - RRU 232

Game Development in React & Typescript with Maksim Ivanov - RRU 232

Front-end developer Maksim Ivanov talks about working for Mojang, the company behind the ridiculously popular game Minecraft. As it turns out, Maksim uses React to build different pieces of the game, and runs the code through a custom renderer to make it work in the game world. In addition to his day job, he also found time to write a book about TypeScript after realizing how much easier getting familiar with new code bases could be if TypeScript was used instead of JavaScript. The panel has used TypeScript to varying degrees themselves, but nobody's gone all in, and they talk about the pros and cons of it, including the initial learning curve and how it can help prevent bugs in the code. Maksim's book covers many aspects of TypeScript in great detail, and it sounds like a good read for anyone just picking up the language.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksCustom Rendererreact-game-engine - npmreact-unity-webgl - npmgettextnewline@tjfuller • InstagramReact Hook FormCheatsheets for experienced React developers getting started with TypeScriptThe RSpec BookTypeStrongPicksMaksim - Follow Maksim on YoutubeMaksim -Harry Potter and the Methods of RationalityCharles - Iron druid chroniclesCharles - Percy JacksonPaige - The Name of the WindTJ - OmniDiskSweeper, OmniWeb, and OmniPresence - The Omni GroupTJ - https://rtmccormick.com/2018/01/10/clear-node-modules-folders-recursively-mac-linux/Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

20 Sep 202359min

All Astro with Fred Schott - RRU 231

All Astro with Fred Schott - RRU 231

Today we talk with Fred Schott, the co-creator of Astro, a web framework focused on improving performance. Built around island architecture, it leverages HTML over javascript where it’s an option. Astro is a great option for those who focus on content, marketing, or personal blogs, and it is a great option to use with React. In this episode, we talk about when it makes sense to use Astro, and how to implement it.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksastro.new Astro | Build faster websitesAstro LoungeTwitter: @FredKSchottTwitter: @astrodotbuildPicksFred- Over the Garden WallJack- Pizza: The Ultimate Cookbook Featuring More Than 300 Recipes (Italian Cooking, Neapolitan Pizzas, Gifts for Foodies, Cookbook, History of Pizza)TJ- The Vergecast PodcastAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

13 Sep 202346min

React Architecture with Tommy Groshong - RRU 230

React Architecture with Tommy Groshong - RRU 230

In today's episode, we talk about state management, dependency injection, react hooks, API access best practices and more with Tommy Groshong a React UI architect.SponsorsChuck's Resume Template Raygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksReact Context for Dependency Injection Not State ManagementReduce State Management Footprint with React QueryReduce State Management Footprint with React QueryTest DoubleTommyGroshong.comLinkedIn: Thomas Groshong Twitter: Tommy Groshong ( @tgroshon ) PicksJack- Deno DeployPaige- Ted LassoPaige- GitHub | foambubble/foamTJ- Land of the GiantsTommy- The CourierTommy- The Anarchist HandbookAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

6 Sep 202353min

Data Visualization at Scale with Andrey Goncharov - RRU 229

Data Visualization at Scale with Andrey Goncharov - RRU 229

Software Engineer Andrey Goncharov joins the React Round Up crew to discuss how his company Hazelcast has approached visualizing hundreds of data points on potentially hundreds of computers in a way that makes sense to users. Dust off your math skills - it gets a little technical along the way as they discuss graphs, charts, performance optimizations, and bottlenecks, and even handling accessibility of these data-intensive graphs. If you ever have to debug system failures and anomalies, this will be a worthwhile episode to check out.SponsorsChuck's Resume TemplateRaygun - Application Monitoring For Web & Mobile AppsBecome a Top 1% Dev with a Top End Devs MembershipLinksHazelcast | The Leading In-Memory Computing Platform Chart.js | Open Source HTML5 Charts for your WebsitePicksAndrey- Designing Data-Intensive Applications by Martin KleppmannPaige-  Netflix Series | The Queen’s GambitTJ- City of Stairs: A Novel (The Divine Cities) by Robert Jackson BennettSpecial Guest: Andrey Goncharov.Advertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

23 Aug 202343min

How to Organize Your React App ft. Tania Rascia - RRU 228

How to Organize Your React App ft. Tania Rascia - RRU 228

Tania Rascia joins the round up to discuss how to organize your code across files, directories, components, and repos within your React app. The panel chimes in with what they've seen and clarify how these approaches effect the overall application functionality of your app.SponsorsChuck's Resume TemplateDeveloper Book Club Become a Top 1% Dev with a Top End Devs MembershipLinksReact Architecture: How to Structure and Organize a React Application | Tania RasciaBackends for Frontends pattern - Cloud Design Patterns | Microsoft DocsChakra UIFront End Tables: Sorting, Filtering, and Pagination | Tania RasciaPicksJack- react-location - npmPaige - Newline.coPaige- Fullstack React with Typescript courseTania - NetlifyTJ - Edge ImpulseAdvertising Inquiries: https://redcircle.com/brandsPrivacy & Opt-Out: https://redcircle.com/privacyBecome a supporter of this podcast: https://www.spreaker.com/podcast/react-round-up--6102072/support.

16 Aug 202345min

Populärt inom Business & ekonomi

framgangspodden
varvet
badfluence
uppgang-och-fall
rss-borsens-finest
svd-ledarredaktionen
lastbilspodden
avanzapodden
rss-kort-lang-analyspodden-fran-di
rss-dagen-med-di
affarsvarlden
rikatillsammans-om-privatekonomi-rikedom-i-livet
fill-or-kill
borsmorgon
tabberaset
dynastin
kapitalet-en-podd-om-ekonomi
market-makers
rss-inga-dumma-fragor-om-pengar
montrosepodden