RRU 037: Make Backend Devs Jealous of Your Test Suite with Carly Litchfield
React Round Up13 Marras 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.

Jaksot(310)

RRU 006: Setting Up and Getting Used to Gatsby with Aman Mittal

RRU 006: Setting Up and Getting Used to Gatsby with Aman Mittal

Panel: Charles Max WoodCory HouseTara ManicsicKent C Dodds Special Guests: Aman Mittal In this episode of React Round Up, the panel discuss setting up and getting used to Gatsby with Aman Mittal. Aman is a computer science graduate, has been working in web development for the past two years, and has worked with companies such as freeCodeCamp. He has been working with React for the past 6 months and started working with Gatsby in January of 2018. They talk about what Gatsby is, why you would want to use it, and what a simple Gatsby site would look like. In particular, we dive pretty deep on: Aman introductionWhat is your experience with React?Working with Gatsby because of a clientWhat is Gatsby?Gatsby uses ReactHas become quite matureWhy Choose Gatsby?Good with small and medium business clientsGatsby and PWAsDoes it rely heavily on GraphQL?GraphQL is useful with Gatsby but it is not necessaryWhat would a simple Gatsby site look like?Index componentHas support for CSS and JSThe distinction between a static site generator and a normal web appIs Gatsby interactive on the front-end?More mature than other static site generatorsGenerate HTML files for all of your routesGatsby gives you the best of both worldsGatsby’s own websiteWorkshop.meHow would you suggest people get started with Gatsby?And much, much more! Links: freeCodeCampReact GatsbyGraphQLJavaScriptWorkshop.meAman’s GitHubAman’s Medium@AmanhimselfReadingbooks.blog Picks: Charles Get involved in your local governmentOvercast Cory The Reusable JavaScript Revolution - talk by Cory HouseConsole Log ArticleBuilding large scale react applications in a monorepo by Luis Vieira Tara React Videos on YouTube ChannelCoco Kent CocoThe Greatest ShowmanReact Testing LibraryNetlify Aman Gatsby ThemesThe Southern Reach Trilogy by Jeff VanderMeerSpecial Guest: Aman Mittal. 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.

10 Huhti 201845min

RRU 005: Prisma and GraphCool with Nikolas Burk

RRU 005: Prisma and GraphCool with Nikolas Burk

Panel: Charles Max WoodTara ManicsicKent C DoddsNader Dabit Special Guests: Nikolas Burk In this episode of React Round Up, the panel discusses Prisma and GraphCool with Nikolas Burk. Nikolas works as a developer at GraphCool, which is a small startup based in Berlin. Their latest product is Prisma, which is a GraphQL database proxy that turns your database into a GraphQL API. They talk about why you would want to use Prisma and the pros to utilizing GraphQL. They also touch on why they made GraphCool and Prisma open source so that more people could use it. In particular, we dive pretty deep on: Nikolas introductionWhat is GraphCool?PrismaPrisma is the core technology that is powering GraphCoolSequel databasesHow do you communicate differences to Prisma?Using GraphQL as the interface to the databaseGraphQL is much simplerGraphQL Schema Definition LanguageWhy use Prisma?Prisma as the database layerPrisma is working on supporting more databasesWhat are the steps from database to messing with GraphCool and Prisma?MongoDBSchema driven or Schema first development2 GraphQL APIsPrisma services3 types of clustersPrisma CloudBoilerplate projectsWhy open source?And much, much more! Links: GraphCoolPrismaGraphQL Schema Definition LanguageGraphQLMongoDBPrisma CloudReact@NikolasBurkNikolasBurk.com Picks: Charles Code SponsorReactDevSummitGet a Coder Job CourseSimpleProgrammer.com@CMaxWT-Shirts to come Tara The Eccentricities of Hammer and Nail by Suz HintonMad Mattr Kent Polyfill.ioWorkshop.me Nader Workshop.meReact Native Training React Native Radio Episode 90 Nikolas GraphQL EuropeGraphQL DayThe Beginner's Guide to ReactJS by Kent C DoddsSpecial Guest: Nikolas Burk. 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.

3 Huhti 20181h 1min

RRU 004: Redux-Bundler with Henrik Joreteg

RRU 004: Redux-Bundler with Henrik Joreteg

Panel: Charles Max WoodTara ManicsicKent C Dodds Special Guests: Henrik Joreteg In this episode of React Round Up, the panel discusses redux-bundler with Henrik Joreteg. Henrik spoke at the first Node Conf, leans towards progressive web apps and single-page apps, and recently has gotten into independent consulting. He also has written a book called Human JavaScript and is working on his second book right now. They talk about his redux-bundler on GitHub and the ability to make changes behind the scenes without having to bother the user. He gives a general background on why he created the bundler and how you can use it in your programming to make your life easier. In particular, we dive pretty deep on: Henrik introductionWhat is the redux-bundler?He despises using behavioral componentsIf it can be local, keep it localDon’t bother the user if you don’t need toService Workers vs redux-bundlerMaking changes behind the scenesHe loves to build appsCan you see any case where it would be useful to have a Service Worker in the background?Redux-bundler exampleRedux-bundler worker exampleWhat are the pros and cons to using the redux-bundler?At what point do you need Redux?ReactHow did you get to the point to where you decided to make this bundler?Uses React as a glorified templating languageHe gets nervous when people start writing a lot of application codeSpeedy.giftEasier to use this from the beginningThis bundler is used to show patternsAnd much, much more! Links: React Dev SummitHuman JavaScriptRedux-bundlerRedux-bundler exampleRedux-bundler worker exampleReduxReactSpeedy.GiftHenrik’s blog@HenrikJoretegReduxbook.com coming soon Picks: Charles Black PantherDevChat.tv/15minutesReact Dev SummitDevChat.tvAdventures in AngularViews on Vue Tara Women Who CodeWomen Techmakers Kent International Women’s DayGirl Develop ItApplication State Management blog postTools without config blog postConcerning toolkits blog post Henrik AnkiPartial JSDeviate by Beau LottoSpecial Guest: Henrik Joreteg. 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.

27 Maalis 20181h 8min

RRU 003: Advanced Component Patterns and Downshift with Kent C Dodds

RRU 003: Advanced Component Patterns and Downshift with Kent C Dodds

Panel: Charles Max WoodNader DabitKent C DoddsCory House In this episode of React Round Up, the panel discusses advanced component patterns and Downshift. They talk about different component patterns, especially render prop patters, and the fact that Downshift allows for your components to be much more useful generally for more people. They also note that the render prop patterns can help to separate logic from view, which makes things easier to develop. In particular, we dive pretty deep on: Component patternsDownshiftEgghead courseWhat makes it advanced?Requires taking a step back and think about your components a little differentlyIs there a React Native version?ReactRender prop patternsCode abstraction or code re-useWhy Downshift is powerfulCan use regular HTML and CSS with DownshiftAllows you to be in charge of renderingWhat other places is the render prop pattern useful?What is the benefit of using a react component over a JS component?Awesome React Render Props GitHub RepoDownshift is highly accessiblejQuery UI@MarcySuttonRender props reduce the amount of opinion that component hasChoosing render props gives the consumer more power as well as more responsibilityRender props are best used with open source projectsAnd much, much more! Links: React Dev SummitDownshiftEgghead CourseReact NativeReactAwesome React Render Props GitHub RepojQuery UI@MarcySuttonKent’s GitHubKent’s Website (with links to courses) Picks: Charles Kent’s blogHogwarts Battle Board GameTake time to write leisure codeSign up for React Dev Summit with code KentCDodds for 10% off Cory Manorisms YouTube Videos Kent React Component ComponentWinamp2-jsHis NewsletterBeyond React 16 by Dan AbramovSpecial Guest: Kent C. Dodds. 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 Maalis 20181h 4min

RRU 002: Webpack the Good Parts with Juho Vepsäläinen

RRU 002: Webpack the Good Parts with Juho Vepsäläinen

Panel: Charles Max WoodNader DabitCory House Special Guests: Juho Vepsäläinen In this episode of React Round Up, the panel discusses Webpack the good parts with Juho Vepsäläinen. He talks a lot about the book he has written on Webpack, which helps people understand Webpack and how to work with it. They also discuss the advantages to using Webpack and discuss how you can use it in your coding to your benefit. In particular, we dive pretty deep on: For 10% off, use “Juho” to sign up for React Dev SummitWhat is Webpack?Juho’s Webpack book: SurviveJSReactHow can someone get into learning about Webpack if they’re not from a React background?It’s all about the contents behind WebpackHow popular is Webpack and how large is it?You don’t need to read all 400 pages of his bookIs there a certain way to write with Webpack?You can learn things as you go with WebpackHow to approach code using WebpackHow new updates with change the philosophy behind WebpackIt’s good for Webpack to have pressure from the outsideThere is no reason to use a newer tool if it already works in an older toolAre there particular plug-ins that you use in Webpack that you really like?HTML plug-inReact NativeInteresting Webpack project usesJuho’s GitHubDecreasing need to be a Webpacker expertAnd much, much more! Links: React Dev SummitWebpackSuviveJSReactReact NativeJuho’s GitHubNGconfReact Finland Conference Picks: Charles React Dev SummitView on Vue PodcastThe Whole-Brain Child by Daniel J. Siegel and Tina Payne BrysonScott Beebe Nader React blogpostReady Player One by Ernest Cline Cory The Knowledge Project Podcast Juho JAMstackSpecial Guest: Juho Vepsäläinen. 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.

13 Maalis 201853min

RRU 001: Getting Started with React

RRU 001: Getting Started with React

Panel:  Charles Max Wood Tara Manicsic Nader Dabit Kent C. Dodds Cory House Special Guests: None In this episode of React Round Up, the panel discusses how they each got into React and they provide some great resources for people who want to learn more about React and what it’s all about. They emphasize the fact that React is a very straightforward language and can be used relatively painlessly with a little bit of learning before jumping in. In particular, we dive pretty deep on: How each of the panelists got into ReactAngular beginningsReact NativeReact Native TrainingReact JS ConsultingNode developer beginningsBackbone to ReactRuby backgroundHow to get into React yourselfLearn things in the right orderReact-HowtoBeginners Guide to ReactJSYou Don’t Know JS, ES6, and Beyond by Kyle SimpsonCodeSandbox.ioES6Get comfortable with JavaScript firstBiggest mistake people make when learning about reactES6 and Beyond WorkshopReact CommunityHow did the panel learn ES6?And much, much more! Links: React Native Training React JS ConsultingReact-HowtoBeginners Guide to ReactJSYou Don’t Know JS, ES6, and Beyond by Kyle SimpsonCodeSandbox.ioES6 and Beyond WorkshopTara’s Twitter and GitHubCory’s Twitter, Medium Blog, and BitNative BlogNader’s Twitter, Medium, GitHub, React Native Training Blog, React Native Training YouTubeKent’s Twitter and GitHubCharles’ Twitter and DevChat.tv Picks: Charles React Course on PluralsiteReact Dev Summit 2018Ready Player One Tara JazzCon#toshmagosh Nader Viro MediaAWS AppSync Kent DogsNitin Tulswani Cory Node TipReact: The Big PictureReact RallyAdvertising 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 Maalis 20181h 8min

Suosittua kategoriassa Liike-elämä ja talous

sijotuskasti
psykopodiaa-podcast
mimmit-sijoittaa
rss-rahapodi
puheenaihe
ostan-asuntoja-podcast
rss-rahamania
hyva-paha-johtaminen
pomojen-suusta
rss-startup-ministerio
rss-seuraava-potilas
rss-paasipodi
taloudellinen-mielenrauha
rss-lahtijat
rss-bisnesta-bebeja
herrasmieshakkerit
oppimisen-psykologia
rss-myyntipodi
rss-doulapodi
rss-markkinointitrippi