![\"TypeScript](\"https://user-images.githubusercontent.com/49038/68629145-a2447b00-04da-11ea-95d5-4ca85dc6edc9.png\")
is roughly the regrets# Q: Hey! I have been a huge storybook fan for years and have seen it grow and change, especially in how easy it's become to write stories -- is there an idealized \"final form\" for storybook? in terms of ease to use, set-up, author, integrate, etc. – Mike Bars
\nA: We added args in 6.0 as a stylized way to edit stories with controls and manage story data. i think the current target is \"edit your components with controls\" and then snapshot the stories. that will be a pretty good DX that will also allow non-technical stakeholders to contribute.
\n– shilman
\n# Q: What do you think of open source project who use mailing list as way of communicating such as GCC(Gnu compiler collection). Do you believe it make it harder to have newer contributors and it making it harder communicating with the maintainers to these project? – Vincent's
\nA: Personally I've never understood how those even work to be honest. Email isn't a way of comms I use a lot. I only occasionally stumble upon these when searching for cryptic stuff on Google, but other than that they've always felt very \"closed\" to me. But I grew up using forums (phpbb et al). I continuously find myself wanting to go back to forums as community platform. Even for in-company comms.
\n– ghengeveld
\nI can't imagine doing it over email, although I suppose there is some benefit to that for a more \"formal\" exchange. But we use Discord for Storybook community 🙌 and it's great to keep it casual.
\n– shilman
\n# Q: What are some features you've always wanted to add to storybook, but haven't had the time/bandwidth/priority to implement? – fox
\nA: Biggest two for me are live editing a la playroom and interaction tests built into storybook. We're going to spend a bunch of time on Storybook for app development next year and that will bring a bunch of new stuff. Working in the frontend space is like drinking from the firehose, so I expect there will always be 10 new ideas coming in for every 1 we can actually execute on. I'm sure all the team members have their own laundry lists.
\n– shilman
\n# Q: Thank you for the Q&A. When building a design system, what is the established way to use it across multiple projects without impacting the development process? We used our design system as an npm package and it was not ideal because changes have to be published to npm first before we can use it. – HTlili
\nA: We use NPM for our design systems. It's far from perfect (the more you use it, the more you hate it!) but it gets the job done and is ubiquitous. I think there are a lot of nice packages out there like auto for streamlining the process.
– shilman
\nCheck out relative-deps by Michel Weststrate (author of mobx)
\n– ghengeveld
\n# Q: What is the nicest feature you'd like to ship in Storybook 7? – Yann
\nA: Storybook 7.0 would be a major release. In my experience those x.0 releases are pretty boring from a feature PoV. The interesting stuff should get released in a minor release, because that's the \"new stuff but not breaking\" semver change. Looking at what major new features we'd want to add, I'd say make it more integrated with your IDE. Make it easier to use with low-code/no-code tools. That sort of thing.
\n– ghengeveld
\nI hope we can make Storybook super fast by 7.0. We're focused on performance these days. I guess you could call it a bugfix, but I think it's a feature. 😛
\n– shilman
\n# Q: How hard is it to keep up with the issues? – -Roman-
\n# Q: I see often on big open source repo have a lot of issue(1k+) and lot of PRs. How do you manage that many issue? I know you can have more than 1 maintainer but tthere's no way that 10 maintainer can go through all of these issue and pull request right? – Vincent's
\nA: I spend probably an hour every day reading and responding to issues. It's manageable to keep up to date on them. Actually fixing them is impossible for a project of Storybook's size and adoption. We use stalebot and get a lot of grief for that, but it's the only way we can keep things under control. I'm hoping to organize the community better in 2021 to help scale up our maintenance efforts.
\n– shilman
\n# Q: Hi guys, thanks for the good work. Do you think Storybook is worth the investment for solo projects? Bedankt! – Weijland
\nA: Natuurlijk! Storybook is a tool for local development. It's supposed to make your life easier as individual developer. Sharing your Storybook is of course very helpful for a team as well. Storybook allows you to focus on individual components so you can think more clearly of it's API and various features and edge cases.
\n– ghengeveld
\n# Q: Are there any high level plans to integrate storybook as a tool for designers? Or similarly, plans for integration with common/popular design tools? – Mike Bars
\nA: There are a bunch of addons for connecting Storybook to design tools, and even a few commercial products for this, https://www.contrast.app/ which is really cool. We'll keep doing a lot in this space. Next step here is to make a catalog for all our addons to make them easier to discover and install.
\n– shilman
\nDefinitely. While our target audience is UI engineers / front-end developers, we also focus on team collaboration, the most obvious of which is collaboration with designers.
\n– ghengeveld
\n# Q: What is the biggest challenge that you have to deal with when you have a big open source project such as yours? – Vincent's
\nA: I think we have a quantity vs quality thing. In a very tight, focused project you can make sure everything is beautiful. The biggest challenge in Storybook is the huge surface area and huge contributor base. It's a beautiful mess. We are spending a lot of time trying to get it under control and make it more beautiful and less mess.
\n– shilman
\n# Q: What games do you play? 😄 – -Roman-
\nA: Currently Rise of the Tomb Raider. Previously C&C Red Alert remastered. Also want to get back to VR gaming because my Valve Index is collecting dust after finishing HL Alyx.
\n– ghengeveld
\n\"Merge the PR with dubious tests\" 😅 🔫
\n– shilman
\n# Q: Are you earning money with this? Ff yes, how? – AdrianC
\nA: Not with Storybook. We run Chromatic, a SaaS platform for visual regression testing on top of Storybook. Storybook is 100% open source and not owned by Chromatic. We just happen to employ the top Storybook contributors. Not really a coincidence of course. 😉
\n– ghengeveld
\nYeah. Check out https://www.chromatic.com/ which is a tool for shared storybook collaboration and testing in the cloud. We have a bunch of big customers and are growing fast.
\n– shilman
\n# Q: Suppose you've been working on some community OSS service for a while and you find out that there's another vetted engineer (that's also apart of the same community and is well respected) that actually did your entire work in about about 2 days . My question is, where is the best place to cry?
\n[Seriously though] How can these 2 parties collaborate? We hold very similar values but have a different vision (of what this product could be). I need their support, but I don't know what to do next..., idk why I am stressed lol, but this project is really dear to me. – dilraj
\nA: I try to keep my head down and push forward. In Storybook's case we've reached out to everybody else in the space to try to collaborate. Our attitude is \"open open source\" (the more the merrier) and we think this is the winning strategy.
\nAs for the emotional side of it, life's a roller coaster. Good stress management through exercise, meditation, etc. is something that will pay off dividends in OSS and every other aspect of life.
\n– shilman
\nI've been there. I built React Async (https://react-async.com/). It's kind-of popular. But React Query blew it away. Where do I cry? In a Discord Q&A. Also I contacted some devs that are building similar things, in an effort to collaborate. In the end we had good talks, I made some friends and we went our own ways.
\n– ghengeveld
\n# Q: How to start on big projects like storybook? I mean for a developer like me that nobody knows who am I. – Rouzbeth
\nA: We love new contributors. Fix an issue that's bothering you, or jump on our discord to get involved with the community. We've helped a bunch of people merge their first OSS PR's, and that's actually one of the more rewarding part of working in OSS.
\n– shilman
\n# Q: I’m a designer, what benefits can I get from Storybook? Is it a competitor to Framer? How is the customization ability of component styling? How do I collaborate with the team? – Ray
\nA: Storybook is less of a prototyping tool and more focused on production systems. As a designer there are a few benefits that come to mind:
\n– shilman
\n# Q: What do you think of GraphQL? – -Roman-
\nA: We use it extensively at Chromatic. I enjoy it a lot because it allows me to just think in terms of the domain model and actions/tasks to be done. I don't want to go back to the days of considering PUT vs POST and the best way to design your URLs and how to deal with overfetching. Regardless I do think it's a bit heavy sometimes and would be the first to ditch it if something better comes along. (Although I have better things to do than switching frameworks.)
\n– ghengeveld
\nLove graphql for all the reasons @ghengeveld mentions, but wish it was more built into the language and type system. currently feels like adding N more levels of abstraction to an already complex stack.
\n– shilman
\nI second that @shilman
\n– ghengeveld
\n# Q: Do you have an elevator speech? I have a new project and I'd like to give a try, but I must convince to my boss. – AdrianC
\nA: I'd say the best way to convince your boss is to tell him everyone is using it these days. Which is somewhat true. We have very very big names in the customer base, and we know of a lot more that use Storybook internally.
\nFYI LEGO is using Storybook 😉
\n– ghengeveld
\nIMHO it's a best practice at this point. Many of the UI's you love to use were built in it including the new Twitter UI, Slack, Spotify, Squarespace, etc. To me the strongest argument is the adoption by the best teams in the industry.
\nWhy did they adopt it? It's the best way to manage the complexity of modern component-based UIs, and allows you to build & use components like LEGOs (like they were supposed to be!). Not only that but you get a bunch of testing for free when you use it.
\nThat's a horrible elevator speech. 😂
\n– shilman
\n# Q: How did storybook take off? Did you guys actively advertise it? – Hums
\nA: This was before my time, but I know Storybook almost died when Arunoda abandoned it. Luckily at that point there were plenty of people very happy with it and willing to work on it.
\nThe first version of Storybook was written by some guys in Sri Lanka. I think they got so much stuff right. There were other tools in the space, but the story concept was really simple and the right way to think about components. The main architect, Arunoda, already had a following, so he got it to first base. When Norbert and I took over the project we just kept pushing it forward pretty much in line with the original vision. We released consistently and pushed it into more frameworks (Vue, Angular, Svelte, Ember, etc.). We've only recently started marketing it (content marketing) and up until now our marketing was pretty minimal. Most of the success so far has been product-driven.
\n– shilman
\nI have to add what Norbert did right was not take the lead and \"own\" it, but encourage and help others to get involved. He did that because he actually planned to step away from Storybook after 6 months or so. But he stayed.
\n– ghengeveld
\nYup Norbert did a great job recruiting people early on. I'd still say that the adoption was due more to the product itself. My attitude about Storybook is that it's just the right way to do things, and in 10 years this will be an indispensible part of the UI toolchain. If we don't build it, somebody else will. (And they probably will even if we do build it!)
\n– shilman
\n# Q: Do you read technical books? Which one would you recommend?? – AdrianC
\nA: Not much. The only one that stands out to me is Mythical Man Month, which I think is great because the essays are all from the 1970's and 80's but still mostly apply today.
\n– shilman
\nNot really. Only thing I can recommend (not a book) is Functional Programming Principles in Scala by Martin Odersky on Coursera. I learned a lot.
\n– ghengeveld
\n# Q: What state management library/API do you like most and why? – vakon
\nA: React.useState. It works for most purposes. There's very few things you cannot accomplish with that. But I'm hardcore and I guess I like the pain and suffering it sometimes give you.
\n– ghengeveld
\nHahaha @ghengeveld was going to say the same thing about useState. Great minds.... 🧠
\n– shilman
\n# Q: React supports instant change(s) while development, the hot reload feature which isn't in native Android / iOS dev.. What things make it to achieve hot reload? – Dipak Bari
\nA: LOL that's above my pay grade. @ghengeveld ? BTW we're going to support iOS / Android / Flutter in storybook next year. 🤯
\n– shilman
\nThe trouble is that we don't have anyone with the expertise needed to make native mobile development a first-class citizen. I'm a web dev, always have been, and therefore don't really care about native mobile. We'd love to see that change, but it's a lack of expertise / experience. That's why it's been up to the community to handle this part.
\n– ghengeveld
\n# Q: How do you make the content of your website hard to scrape. – LYC_thedude
\nA: I don't think we do ... 🤔
\nYou can nest your contents in a bunch of iframes whose URLs and structure are randomly generated... 😉 I really don't know
\n– shilman
\nI know of sites that put random letters in between their words but hide those letters visually. So it's spans and spans and spans and spans... Don't do that.
\n– ghengeveld
\n# Q: What's the next feature we can be excited for? – -Roman-
\nA: I know several teams are building playroom-style live editors for Storybook, which I think is pretty exciting. At a high level, we are going to add a bunch of stuff to make Storybook great for app development, so you can organize full pages in Storybook, which will make it easier to collaborate with PMs and Designers .. this is more of a direction, but will manifest itself in a bunch of new features.
\n– shilman
\nI think this will be the addon gallery.
\n– ghengeveld
","frontmatter":{"date":"2020-11-19T00:00:00.000Z","dateGroup":"November 2020","dateString":"Thursday November 19th, 2020","description":"Maintainers of Storybook\n","location":"Q&A Channel Reactiflux","people":"@mshilman & @ghengeveld\n","recording":null,"time":"1PM - 2PM PT","title":"Michael Shilman & Gert Hengeveld"}}},{"name":"nader-dabit-2","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Will React-Native be able to match native performance in the near future? – Joel
\nA: React Native will probably never be able to beat Native performance, and overall it will be somewhat slower than native in the grand scheme of things because it's still an abstraction on top of native. React Native continues to improve, but the native platform also continues to evolve so RN, or any XP platform, will almost always be slightly behind and somewhat slower.
\nThe value is still there though because of all of the other great things you get out of it.
\n# Q: Your Amplify content is awesome, but I'm wary about costs since it seems like an abstraction of multiple AWS services. Any tips on tracking these expenses? – rahsheen
\nA: Amplify (the framework) is actually free, you're just paying for the individual AWS services in the same way you would if you created them with something like SLS framework, cloudformation, or the console.
\nIf you use Amplify hosting, it's the only \"service\" that costs money.
\nYou can track your expenses with billing alerts .
\nThe reason so many people are using Amplify is that it's providing a better UX than was available in the past, and they do not want to pay the additional money that a lot of the serverless service providers out there add on to their abstractions that are actually just built using AWS anyway but at 10x the price.
\n# Q: Do you think knowledge of Data Structures and Algorithms is important as a developer having ~1 year of experience or doing more projects will help? – yhpez
\nA: I have never taken any true Data Structures and Algorithms courses at a university, though I have taken free courses from Stanford, Harvard, MIT, etc.. that are available online.
\nThis lack of knowledge has made me fail various job interviews, but others it has not.
\nI would say it's always better to know more, but not knowing them does not mean you will not land a solid job if you keep improving your skillset everywhere else.
\n# Q: Since you've been heavily invested into Next.js lately, have you thought about adding people from the Amplify team to collaborate as contributors to the Next.js core? – marbiano
\nA: We've started building out more investment into SSR support across all modern web frameworks, including Next but also Nuxt, SSG frameworks, and future tech like Remix (to name a few).
\nI think collaborating / contributing to these projects is something we should / can definitely consider. AWS has recently been investing a lot more into open source contribution. I will definitely see what our team can do to collaborate more individually with these projects going forward.
\n# Q: Can you give the good starting points related to doing open source contribution? Going through new big complex code bases which are different from your current work and complex? (like, you're a developer using those APIs vs actually understanding those APIs)? – mihirs15
\nA: I would say find something that you're already using and spend some time digging through a feature that you're very familiar with.
\nStart small like documenting something that was not documented or not documented well, and then move on to functionality.
\nGo into the issues and try to find something that looks like you can manage and see what you can do. I would even suggest reaching out to OSS maintainers and asking for good first issues if they are not already flagged into their issue tracker.
\n# Q: 👋🏾 When is part 2 of the Next.js Amplify tutorial coming out haha I loved the first one. Happy to see you here! – Sonicrida
\nA: Hey, working on it now! Should be out early next week.
\nAlso working with CSS tricks on a comprehensive Next.js on AWS tutorial, an end to end guide for everything from data to auth to deployment with custom domains and cache control.
\n# Q: What are you most excited about in the React ecosystem? – mihirs15
\nA: I'm still really excited about the innovations around hybrid frameworks like Next, Remix, and what we will probably see a lot more of in the future. I'm also excited about the stability we've seen with React. It's been really nice to have a somewhat stable ecosystem over the past few years after the JS fatigue of the mid 2010's.
\n# Q: In your opinion, will the react-native platform for desktop applications be in a stable version soon? I think it will be used a lot, what do you think? – Alessandro Marra
\nA: I think that for any large project in the React Native ecosystem to be successful, it will take either a considerable effort of the community or a large / capable company adopting it and leading it. Because of the level of abstraction that is React Native combined with the instability that we often see, for a platform to survive and thrive and continue to be stable it just takes a lot of time, money, and effort. So the answer is no, not on it's own or by a slight community effort, only if there is a leader / company willing to take the lead on it long term which from what I can tell right now is maybe no? (though I do see React Native Windows seems to be well maintained)
\n# Q: What is your go-to technique when comparing trade-offs between similar functioning libraries/frameworks? – mihirs15
\nA: I first try not to use any libraries that are maintained by anyone unless absolutely necessary, then I try to find one that has 1. a solid track record of maintenance already or 2. that is maintained by either a trusted community member or a large company. I rarely will use something new in production unless it meets one of those criteria, and almost never will use something that has been around for a while that does not meet those criteria.
\n# Q: Do you think PWA is the future in terms of native apps and will it overcome android/iOS apps in terms of popularity? – yhpez
\nA: It seems that PWA is merging into just \"web\" in the sense that almost all of the capabilities there are often built into modern web apps (with the exception of the app on the device screen). I think that native will continue to serve a purpose, hybrid (RN + Flutter) will continue to serve a purpose, and web will continue to serve a purpose. So basically I don't see any winner take all any time soon, but I do see the success and prosperity of all three platforms continuing for the foreseeable future unless something significant happens with app distribution in App Store / Google Play store.
\n# Q: AWS’ documentation, resources and tutorials from the past 2 years have been amazing. Does AWS have plans to make minor/major changes to the AWS console UI to flatten the learning curve at all? Or make it any more friendly for beginners or is it something that we just have to deal with? – dilraj
\nA: There's a large effort internally going pretty far up to focus on improving the on-boarding process and DX of AWS as well as focusing on lowering the barrier of entry to new developers. Amplify, CDK, and HoneyCode are all playing a pretty large role there. I think these will be the entry-points to help lower the barrier to entry in the future along with a few other services / projects currently in the works. It's a big priority and we have already seen a massive number of devs new to the cloud or interested in serverless / Jamstack development on-boarded through some of these technologies platforms already, and we are doubling down on them now and in the future.
\n# Q: What do you think about the concept of react-native web and technologies like it? – Dreamplay
\nA: I think these are amazing technologies, but like a lot of things in the React Native ecosystem need / require a lot of investment / time / work to keep them up to date with the changes in the React Native framework itself. As long as there is a concerted effort there in one of these projects to maintain and improve over a long period of time they will probably continue to improve and be more of a viable solution for companies looking for those types of solutions.
\n# Q: Do you have any advice for low-income students looking to learn React Native but who don't have access to hardware resources such as physical devices or computers capable of running emulators? Mostly considering the case where students are interested to test their apps on iOS after having it work on Android. – Mike Bars
\nA: Unfortunately not with real devices, but AWS and Google have free tiers for things like \"Device Farm\" that allow you to run tests on real devices in remote facilities.
\n# Q: Regarding the AWS CMS, I am thinking that Amplify is great but it is missing a lot of CMS features, and to turn Amplify into a headless CMS perhaps.
\nIt is one the reasons we are still using at me company and for personal projects other CMS or headless CMS such as Strapi, Contentful to manage content instead of using AWS entirely as I usually use AWS to manage content and database. 🙂 – juancarlosjr97
\nA: Yeah I think most AWS services are lower level and would allow you to build your own CMS (and it would be cheaper), but you would not get the good velocity and DX out of the box like you do with some of the really great options that are out there now (like the ones you mentioned). It's actually something we're considering adding as an offering though in the future as part of Amplify, but not this year.
\n# Q: How do you decide on betting on new technologies? – Yusadolat
\nA: I'm a huge fan of this topic! I spend a ton of my time reading (audio books, physical books). I spend a lot of my time learning tech (books, courses, videos, focused learning time). I think all of this learning goes into how i choose a new tech. The more you understand about the world and how the systems work in the world, combined with your technical expertise and the understanding of the current tech ecosystem and how it fits into your current skillset, the easier it becomes to make these choices.
\nAt the end of the day for me it's about spotting patterns and spotting opportunities for huge upside. To me it's about really well executed abstractions that enable me to do 10x (or so) more that I was able to do before, or to enable me to do something I wasn't able to do before.
\nAdd to that the future growth and demand of that tech + how much money I may be able to make from it (this is why I focused on React, RN, cloud and not some of the other hyped tech that you see some people investing in) and I usually place a bet and go all in. You should treat it kind of like a balance + a gamble, spread your bets and be sure not to go bankrupt, but have a few bets placed that \"if\" they hit, you are set up for massive success.
\n# Q: What kind of changes do you think should be made to interview process when interviewing candidates for Frontend Engineering roles?
\nThe rounds mostly focus on Algorithms and trivia JS knowledge mostly.
\nSo, should it be more live coding oriented stuff and if so, what are some of the topics one can ask so that it is feasible to wrap the pair programming interview in 1 hour or so? – mihirs15
\nA: IMO the big problem here is that many companies do not tailor the interview to the position, so they end up asking the wrong questions. Are data structures and algorithms important to know? it depends. Like you mentioned, many front end developers will never need to know anything about them. If you are working on some really advanced system, you may need them, but if you don't then it should not be part of the interview.
\nThe thing I've learned more regarding interviews / people over the past few years though is to focus on hiring for capability vs current knowledge. If you find someone who is capable of just getting shit done and learning what they need to, that's all that matters. If they can google their way around and find the answer, then who cares what was in their brain the minute before, at the end of the day they solved the problem. Technical interviews should be tailored to finding problem solvers and people who can get shit done vs things they have memorized to pass the interview.
\nUnfortunately, we're not there yet as an industry but there are smart people trying to solve this.
\n# Q: I've always wondered what the key differences are between Azure, GCP, and AWS; Would you be willing to outline some of the quantifiable differences for a end user? – doge
\nA: I would say that they are all similar in certain ways but they do indeed have tradeoffs that are worth considering. I unfortunately am biased since I work at AWS so I would probably recommend finding one solution (maybe a serverless API), and implementing the same service in all 3 clouds. Then go into the consoles and play around with the service. Do this 1 or two more times for other services. This will probably take you a day or 2, but after that you'll have a good idea about which you prefer and which you should focus you time on learning more about.
","frontmatter":{"date":"2020-10-01T00:00:00.000Z","dateGroup":"October 2020","dateString":"Thursday October 1st, 2020","description":"Founder @ React Native Training | Host of React Native Radio | Author of React Native in Action\n","location":"Q&A Channel Reactiflux","people":"@dabit3\n","recording":null,"time":"1PM - 2PM PT","title":"Nader Dabit"}}},{"name":"david-mccabe","relativeDirectory":"","childMarkdownRemark":{"html":"#Q:What would you think it's the best way for someone who's a junior to learn and get better in a certain field (like React or some other framework) – Grincek
\nA: Do lots of projects. If you aren't sure which way is a better approach to doing something, try both quickly.
\n#Q:What is the draw of using recoilJS over redux or similar libraries? – dantalksalot
\nA: Ease of use, makes it easier to create fast apps that have lots of different pieces of state.
\n#Q:When react concurrent mode will be officially released? – ARKA160
\nA: No official release date. The new facebook.com is running on concurrent. Upcoming releases of React will help with making existing code compatible. You can try Concurrent now using the experimental release (not in production).
\n#Q:Is Redux a must for state management? Or is an app better off without it. – koqkito
\nA: Is redux a must: No
\n#Q:What are some good projects for a developer who already feels comfortable with react and needs to advance but doesn't know how? – Ozu
\nA: Try to build more complex projects? I don't know.
\n#Q:What resources did you use to learn react? – antoniodinkins
\nA: I started learning React when it first came out, the only resources was the official docs, which were pretty good. I was trying to build a single-page UI for a company and just had to learn on the job.
\n#Q:State persistence seems very unstable/in flux right now, which is one of the drawbacks. What's your roadmap for this functionality? – Kimmain
\nA: There is a temporary API you can use now. We are experimenting with the permanent API. Soon but not sure exactly when.
\n<aname=\"#not-react-related\" href=\"#not-react-related-but\">#Q:Not react related, but what does it take to work for Facebook? – Raeven
\nA: If you want to know about passing the interview I think there is a lot of information about the process that's published by FB recruiting. When I interviewed the experience was exactly what I was expecting based on the material I was sent.
\n#Q:How frequently do you use useMemo/useCallback in your components and what rules you have for when to use them? Do you automatically use them in most cases? – Josephdo
\nA: I generally only use these after observing that a child component's rendering is causing a performance problem.
\n#Q:Will Recoil have the ability to integrate with a design platform like Storybook? – TylerSnow
\nA: I do not know enough about it to say. I would expect so since it's apparently compatible with multiple different view libraries.
\n#Q:What were your experiences hunting for a job as a junior? – Grincek
\nA: When I was first in the industry I would go to meetups, find people using open-source software who needed some tiny modification done, put in the needed patch, and then they would hire me for contract work. This is probably not the best strategy in a strong job market though.
\n#Q:How are families garbage collected? – frederik.batuna
\nA: I am currently working on this, hope to release it soon. Meanwhile you can manually delete using useResetRecoilValue.
\nOh by the way, I forgot to mention, Recoil 0.0.11 is going to be released very soon. We were planning to release it yesterday but found a significant bug at the last minute. So probably in the next day or two.
\nRecoil 0.0.11 has much better performance, experimental Concurrent Mode support, and some other improvements. Upcoming releases will then address memory, performance, and syncing with external storage and servers.
\n#Q:How well does Recoil pair with Immer? – parichay28
\nA: Haven't tried it, expect it's a great pairing.
\n<aname=\"#if-youre-going\" href=\"#if-youre-going-to\">#Q:If you're going to use Recoil, should you manage your entire state there? Are performance implications if you do? If not, how do you decide what goes into \"pure local\" vs. managed in Recoil? – Thandathere
\nA: Great question. Using recoil vs local state does have some performance overhead. On the other hand, if you're using transaction observation for app-wide facilities such as persistence and URLs, that only applies to Recoil state.
\n#Q:I’ve seen that React is in the front-line, when we talk about SPA development. Could be React the future of web, like HTML is for the browser? What do you think? – D4vi0h4ck3r
\nA: React is a language in many ways, it might make sense to implement that language lower in the stack.
\n#Q:What is the reason behind giving everything a unique key in Recoil? Doesn’t this modularity way more difficult? – yuchimake
\nA: They're used for persistence, logging, debugging, etc. I would like to find a good solution to statically ensure uniqueness, this is a major weakness currently. However, I haven't seen it be a problem in practice even with projects using hundreds of atoms written by many people across different teams.
\n#Q:There are a lot of state management libraries. Each have their own strengths and weaknesses. Can you tell something about the (fundamental) weaknesses of Recoil? When would you not use this? – mees
\nA: Relay has a much more sophisticated approach to server-owned data. By knowing the queries statically it's possible to start executing queries while the client is still downloading the code. And it can handle mutations. Recoil's async stuff is limited to time-invariant data and fetch-as-you-render.
\nA: There is no plan to deprecate classes. However, hooks have huge advantages both for the developer ease of use and implementation. I have not known anyone who's really gotten the hang of hooks to ever look back. They do have a substantial learning curve, though.
\nThat being said, I think if you were learning React from the ground up as hooks-only it would be simpler than learning class components. Hooks more closely model how React actually works, making it easier to write non-buggy code.
\n#Q:In one of the early interviews you did, a question was asked about you speaking with the react team and how receptive they were to possibly introducing concepts from recoil into react. How have those discussions progressed since and are there things that you'd like to see coming from that? – Sonicrida
\nA: React has to work for a much broader class of apps than any specific state library does. Parts of Recoil are not applicable across all apps (e.g. async stuff), while the basic need to share state across components is fairly universal. There has been work to try to make the Context API more flexible which would obviate this need. I don't know when this is going to happen, though.\nThe Concurrent Mode is an area where the React team is doing a lot of work to make it feasible for more apps. I'm really excited about the work there.\nWe'll continue to see some incredible stuff unlocked by that project in the long term.
\n#Q:When you were first started working on Recoil (early), how did you manage tasks/hitting goals when working with 1-2 people? Is a TODO.md file with a to-do list good enough or was there something a bit more sophisticated that helped you manage things in the long run? – dilraj
\nA: Coordinating work: at FB we use Workplace by Facebook, it's a great product http://workplace.com/
\n#Q:What is the best use-case for selectors and would what is the benefit of using over handling that logic in your component? – cagethem
\nA: Advantage of selectors versus handling in component (which I take to mean having a memoized value in the component that you recompute when certain props change): Selector graph can hit different parts of the React tree rather than only whole subtrees. It can also change shape: You can have a conditional dependency. This is hard to do otherwise because of the Rules of Hooks. (Selectors can be less restrictive because they are pure functions)
\n#Q:Is there a suggested naming convention for keys to ensure uniqueness? – Amr
\nA: You can prefix by module or product area. If prefixes are too specific it can make extra work when refactoring, if you need your keys to be stable across time.
\n#Q:Did you build Recoil as part of your work at FB? Is this something you get to for work, or is this purely a side project? – Thandado
\nA: It was an on-the-job project. We created Recoil in order to help with a specific app internal to FB that had major performance problems. We decided to make it a separate library since we thought it might be useful in other situations, which turned out to be true. Would not have created a state management library if I hadn't had to due to the specific requirements of this app.
\n#Q:What can we expect more from recoil in the coming future (short and long term)? – parichay28
\nA: Expect better performance and memory management in apps with large atom families. A more robust implementation of async selectors. APIs for developer tools. APIs for synchronizing state with external storage, URLs, servers, etc.\nA big part of the performance stuff is eliminating places where Recoil copies data structures. Instead we need to share structure.
\n#Q:Is there an ETA for proper React-Native support? The ongoing PR seems to be a dead in the water for a while :frowning: – Kimbit
\nA: We had some back-and-forth with various people about React Native support, but unfortunately I don't think a consensus emerged about the best way to do it. Nobody has expressed a willingness to maintain it and unfortunately none of us has expertise in it. I would be very happy to merge a PR that people with knowledge of the area agree is a good approach.
\n<aname=\"#whats-your-opinion\" href=\"#whats-your-opinion-on\">#Q:What's your opinion on the future of React Native? – Grincek
\nA: I don't have any special knowledge of React Native. I know FB continues to invest in it and build important apps and experiences with it. It seems to me that the work React team is doing generally, such as concurrent and a lot of performance-related research, would benefit RN even more.
\n#Q:There was a lot of interesting discourse in the few months after recoil came out where many users thought that it was an official react state management library which seemed to cause some drama on social media and a bit of trouble in regards to Dan and some of the more active team members on social media having to clarify that it's a separate project a ton. Do you feel as though this is something that could've been managed better with the release of recoil and something that should be taken into consideration whenever facebook releases other possible experimental react packages to cause less confusion within the community? – Sonicrida
\nA: Regarding communication about \"officialness\": I don't know how this could have been managed better. It seems like a certain small number of people are going to jump to wild conclusions no matter what you say.
\n#Q:Since Recoil seems to be a state management library for exclusively for React, has there been any talks about whether it should come in as a default dependency with create-react-app after hitting npx create-react-app my-app in the future? – greenlantern 🪐_
\nA: I think the majority of apps are fine with just React, so I don't personally see a need for that.
\n#Q:What about recoil integration with Relay? – ARKA160
\nA: The typical way to use both together is for Recoil atoms to be passed into Relay query variables.
\nI highly recommend Relay for the types of things it's designed for. They have done a lot of really sophisticated work and it's getting better very quickly. If you haven't used it in a while give it a try.
\n#Q:Will there be work done to reduce Recoil's bundle size in future? – voldemort
\nA: This was not a goal for the specific apps we were designing with Recoil. If somebody wants to make it smaller-bundled there is probably low-hanging fruit for that.
\nawaiting more questions, but I guess I'll say more about bundle size. The original use-case for Recoil was apps that download large blobs of data to the client, so there wasn't any gain from optimizing initial page load since we were just going to have to wait a long time for queries. However as more different apps adopt it it makes more sense to try to reduce it.
\n#Q:Any recommendations for other libraries/patterns to use alongside Recoil for – _Mark Mstate _management use-cases that Recoil is not suited for?
\nA: Use Relay for most server-owned data.
\n#Q:Do you think other front-end libraries are gonna adapt JSX? – Grincek
\nA: I don't know. I think it's pretty simple to make a plugin to compile JSX to whatever your library needs.
\n#Q:How is your current experience working with Facebook? Is the work fast paced or is it more demanding now that many people are working remotely? – Poot
\nA: Cannot recommend FB highly enough as an employer. You get to work with people (not just engineers but also management, ops, facilities, etc.) that are both highly competent and well-aligned. I have not found it to be high stress at all. Rather, the ability to move really quickly feels terrific.
\nIf you're thinking about applying to work at FB, do it. Study hard and then give the interview a shot. I don't think you'll be sorry.
\nBy the way, the interview process at FB is based on the ability to write real practical code, not textbook problems.
\nFor the UIE/front-end recruitinng pipeline, you get questions about building good performant UIs in the browser.
\n#Q:What was the toughest thing or challenge that you faced while building Recoil? – Spark
\nA: The most technically challenging thing with Recoil has been supporting changeable selector dependencies. This has been the cause of most difficult bugs in Recoil and is very hard to think about. I mean that you can do:
\nif (get(a)) {\n return get(b);\n} else {\n return get(c);\n}\nand your selector will be subscribed to only b or only c, according to whether a is true.
\n#Q:Any tip for aspiring state library authors about concurrent mode and useMutableStore — have you had much trouble with the APIs? – jfinity
\nA: useMutableSource is quite easy to use and actually made Recoil a lot simpler versus what we were doing before.
","frontmatter":{"date":"2020-09-03T00:00:00.000Z","dateGroup":"September 2020","dateString":"Thursday September 3rd, 2020","description":"Author of Recoil\n","location":"Q&A Channel Reactiflux","people":"@mcc_abe\n","recording":null,"time":"1PM - 2PM PT","title":"David McCabe"}}},{"name":"tanner-linsley-2","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2020-08-06T00:00:00.000Z","dateGroup":"August 2020","dateString":"Thursday August 6th, 2020","description":"Open Source developer known recently for react-query and react-virtual, and many other open source libraries.\n","location":"Q&A Channel Reactiflux","people":"@tannerlinsley\n","recording":null,"time":"1PM - 2PM PT / 8PM GMT","title":"Tanner Linsley"}}},{"name":"brandon-bayer","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: I'm really excited with the update on 0.16. What is your vision for a 1.0 release? – Thanda
\nA: Definitely authentication and authorization built in and working awesome! That's the main thing. Other things like likely will also be in place are installer recipes (same as Gatsby) and plugins. The current prisma code will be extracted into a plugin and then we'll also have other plugins for things like fauna, etc.
\nAnd of course some sense of stability :D
\n# Q: When is it safe to begin developing my next SASS with Blitz? and/or make a course for it? – jacktheturtle
\nA: Well, we already have several folks building SaaS apps with it and running in production, so I guess it's up to you and your appetite for risk :D
\nThat said, overall it is fairly stable, at least once you deploy it to production because at that point it's mostly Next.js core code running which is already battle tested.
\n# Q: How does blitz.js being a monolithic framework fit into the microservices architecture and how can it be scaled? – nikhil
A: Good question. You can deploy Blitz to a server as a long running process OR to serverless.
\nIf you deploy to a server, then you'll have the same traditional monolith scaling path to walk.
\nBut if you deploy to serverless (AWS, Vercel, etc), then each query and mutation (server code) will run in a serverless function. So your backend will scale seamlessly, automatically, and independently. So most of the monolith scaling issues go away!
\n# Q: What do you think is the downside of your product? – shtan
\nA: It doesn't come out of the box with GraphQL. The whole point of Blitz is to eliminate the API layer from your dev flow. So you don't have REST or GraphQL. Just import server code into your frontend and go!
\nSo if you absolutely want GraphQL in the mix, then you should try Redwood. But you should still give Blitz a try. 😉
\n# Q: What are your suggestions to a non designer front end dev on creating UI? – Piñata
\nA: Buy and read https://refactoringui.com/!
\n# Q: I just learned about Blitz and it looks like my dream framework — Next.js, TypeScript, the goal of recreating a rails-like experience. but i also love GraphQL and the TypeScript types you get from graphql-codegen for end-to-end typed queries and resolvers. are there any plans for Blitz & GraphQL? – statico
\nA: Awesome! See my last answer about GraphQL.
\nAs for end-to-end types, you get that for free in a Blitz app! And one super awesome thing about Blitz is that all the TS types are statically available. You don't need a separate process to compile types on the fly like you need with GraphQL.
\n# Q: What feature have you had to cut that you really wish you could have put in, but is perhaps against the design principles of Blitz? – Thanda
\nA: I would love to have an automatically generated GraphQL API. This is possible, but the work required to do this is huge.
\n# Q: Have you tried phoenix + live view? What do you think about moving state from client side to server side? Do you think it's a pattern that will stick?
\nhttps://github.com/calderajs/caldera-react – searchableguy
\nA: I've never actually tried this. But I think it's great for folks who don't like Javascript. I don't think it's ever something that will come to Javascript and React because.. well, we like client side JS. 😉
\n# Q: Are you looking to have Blitz be fully security audited before releasing auth features? – samsch
\nA: Not before releasing the features, but once they are released we'll definitely try to get this accomplished. Rishabh, the CTO of Supertokens is leading all the auth work. He's super good and does this for a living. So we're off to a good start at least :)
\n# Q: Could you share your motivation behind blitz.js and the vision you hold for it. – nikhil
A: Fullstack React app development today is too hard and too complex! Building fullstack apps with Rails/Laravel is so simple and fast because it's all one thing without many moving parts. I love that DX, but I don't like templates and want to use React.
\nSo Blitz is the DX of Rails/Laravel but with everything we love about React.
\nBlitz will eventually have EVERYTHING you always need for fullstack apps including sweet integrations for background processing, emails, etc
\n# Q: Is it necessary to learn any database language with React or GraphQL will be enough? – Vradhi
\nA: Blitz doesn't use GraphQL, so you don't have to know that. We use Prisma 2 by default for the DB migrations and DB client. Prisma is super easy to use, but you'll still need to know a bit about database modeling. Eventually we'll have nice docs on this.
\n# Q: How do you manage to be a full time OSS contributor (how do you make money)? What was your path like, any tips? Feel free to ignore if this is too personal/off topic. – JackFlapper
\nA: I have a part-time indie consulting gig that pays all my bills (I've been an indie consultant for 3 years). I typically work around 20-25 hours/week on consulting and 30-40 hrs/week on Blitz.
\nI'm working on getting sponsors for Blitz so that I can focus 100% on this and not have to do consulting. I currently have Fauna as a $500/mo sponsor. Eventually we'll have other folks work on Blitz fulltime too!
\nYou can also help sponsor yourself here on Github sponsors :) https://github.com/sponsors/blitz-js
\n# Q: When referring to it, is it blitz, Blitz, Blitzjs, Blitz.js, etc? – Thanda
\nA: Whatever you want haha. Official is \"Blitz.js\". But usually I just use Blitz.
\n# Q: With what blitz.js trying to achieve does it force the developers to do server side rendering and not use the client side rendering? – nikhil
A: Yeah, there are no stupid questions!! Blitz doesn't force SSR. Client-side rendering is the default, but you can choose SSR, client rendered, and static (like Gatsby) on a page-by-page basis. So they can be all mixed in your app however you need.
\n# Q: Can you talk about what it means for Blitz to be inspired by Rails for people who aren't familiar with Rails? – MrLeebo
\nA: Well overall it means being super productive for building fullstack apps. It means having conventions so you don't have to re-invent things like a file-structure on every new app. It means leaning on code scaffolding for rapidly building things without writing all the code from scratch. It means all the code being in the same app and you only have one thing to develop and one thing deploy (monolithic).
\nAnd then also the part I already talked about with getting rid of the whole API part of your architecture. Most people greatly underestimate or simply don't know how much time they waste on data marshaling in a traditional React app.
\n# Q: Share some tips and required knowledge to start a Open Source project the right way (or a way that is less painful and relaxing) – nikhil
\nA: Well, it somewhat depends on what you are building (tiny tool vs a framework like Blitz), but one thing that worked amazing for me was to build the community first and then write the actual code.
\nWhen I first announced Blitz, there was no Github repo and only a couple hundred lines of prototype code on my computer 😂. But it was enough that people got excited and wanted to help (I was explicit about asking people for help).
\n# Q: According to you what are some competitors to Blitz.js and how do you plan to make blitz.js a popular name in the community – nikhil
A: Redwood is the only real alternative to Blitz. Well, Blitz is already quite well known, but I'll keep tweeting about as much as I can! haha. I'm also talking at as many conferences and podcasts as I can. Marketing is essential for an open-source project to be successful.
\n# Q: Recently creator of Redis stepped away from it. Then there is Guido. Maintaining OSS is getting difficult partly due to politics or dealing with contributors, or community. What are your thoughts on that? – Piñata
\nA: We're following the model of Ember where it has full community ownership and isn't a project driven by a single person on team. And we'll take problems as they come :)
\n# Q: Extension to @Piñata's question: Do you think it's ok for oss contributors to be judged by their personal tweets (and other social media accounts)? Where should the boundary between open source work and personal life sit? – Yugiohxlight!
\nA: Yeah this is tricky, especially in this climate of hyper political correctness. I don't have a good answer for this Q&A, but I'd love to have a longer discussion about this on a call or something :)
\n# Q: Could you explain what do you mean by data marshaling? – nikhil
A: That means moving data around, directing it, formatting it, transforming it, fetching it, etc.
\n# Q: Redwood's Cell component really comes in handy during development, does Blitz offer something similar? – zacksparrow
\nA: No, because unless I'm missing something Cells will be obsolete with React Suspense for data fetching. We have Concurrent mode enabled by default for Blitz apps, so you use
# Q: What does Blitz have in mind for React Native? – chadnehemiah
\nA: We want to have first-class integration with RN so that you can import server code into a RN app just like you do in the Blitz frontend. So you can share the same Blitz backend all without having to write your own API.
\n# Q: Can you give more details on how you built the community first? – avpalmeira
\nA: Um, I just tweeted lol. Also, I used my marketing skills. Honestly I am just trying to solve the right problem at the right time. 🤷♂️
\n# Q: Not a technical question, but on a human level - what inspired you to build Blitz (again outside of the technical need) and what motivated you to take on such a large task? I'm particularly interested in the first step where you ostensibly saw the need for Blitz, saw that it didn't exist and then said, I will summon the energy to build this –
\nA: Honestly I feel like this is one of the things God created me to do. It's actually a fulfillment of a prophecy to me 5 years ago :)
\n# Q: Do you think the downward trend of Rails is justified when it can still resolve MANY of the problems people have building modern fullstack apps? – dilraj
\nA: I think yes. Rails is nice, but it's super hard to make great dynamic UIs (jQuery anyone?) and the mobile app story is lacking. Whereas with React you have React Native and can share you code The hurdle is much less here.
\n# Q: I'm a barely proficient js programmer (I hesitate to even say \"developer\") who had a previous life as a barely proficient Rails programmer. What can I do to help Blitz.js? – Thanda
\nA: Great question! :) Best way is to go through this guide: https://blitzjs.com/docs/contributing
\nThen look for issues on the main repo and on the website/docs repo that are labeled good first issue. Usually these are fixed within an hour of being created, so you have to move fast! :D
\n# Q: I saw that there is a Blitz slack. Is that a permanent home, or is it possible to bring that over into a Blitz.js discord server? – 😄
\nA: Will probably move to Discord once they add threads :)
\n# Q: Could you share some key points that one should keep handy to decide whether to choose react.js, next.js or blitz.js for the next project? – nikhil
A: If you have your own database, then use Blitz! If it's more of a content site connecting to another CMS, then use plain Next.js.
\n# Q: Definitely wondering about the React Native story here. Is that already in place or is help needed? – rahsheen
\nA: Hasn't been started yet, but you're welcome to start exploring how to do this! We can connect in the Blitz slack if you want.
\n# Q: Let's say we have a fanfiction.net type website build upon Blitz and have lots of filters options, so will Blitz still be a good option to manage all the complex stuff needed? (I'm a noob sry)
\nLike around 100k stories with lots of genre's and tags and everything filterable possible. – EvilSpark
\nA: I think so! I mean, Blitz doesn't yet have a feature to write all your code for you, but it does do all the boring stuff for you so you can focus on the code that actually makes your app unique. That actually adds features for your users :)
\n# Q: What is the status / plan for using Blitz with Firebase? For any of Deployment, Auth, DB, or metrics? – Thanda
\nA: You can use firebase with Blitz today. Nothing hindering you there, but not sure about deployment.
\nTypically, a Blitz app won't use firebase because it'll have everything you need built in, like auth, DB, etc.
\n# Q: Can we compare blitz.js with django? – nikhil
A: Yeah, basically the same thing, just different languages :) I literally have the django auth docs open right now as I'm working on Blitz auth :)
","frontmatter":{"date":"2020-07-02T00:00:00.000Z","dateGroup":"July 2020","dateString":"Thursday July 2nd, 2020","description":"Creator of Blitz.js, a monolithic React framework built on top of Next.js\n","location":"Q&A Channel Reactiflux","people":"@flybayer\n","recording":null,"time":"9AM - 10AM PT / 4PM GMT","title":"Brandon Bayer"}}},{"name":"shawn-wang","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What do you think about writing on your own Blog vs Writing on a website like dev.to or hashnode? – yashguptaz
\nA: I do both! https://www.swyx.io/writing/devto-cms/.
\n# Q: Most innovative React libraries? – The Benevolent Dictator
\nA: I gotta say I have a soft spot for Immer https://www.reddit.com/r/reactjs/comments/h0npbn/immer_v70_new_current_api/ and react-query and I also think Redwood and Blitz are doing awesome things in the meta-framework side.
\n# Q: What do you love the most about JS development and vice versa (hate)? – seasmurph
\nA: JS tooling! https://www.swyx.io/writing/js-tooling/ can't live without them, and they can be so much better.
\n# Q: How do you see the React library in the next 5 years? is it going to be replaced by other libs like Svelte or others ? Do you still recommend people using this? – Masoud
\nA: No, not replaced. React is extremely successful and has a huge community. I think it has different goals from Svelte. Currently, I recommend React for xplatform apps, Svelte for interactive sites.
\n# Q: Do you have any suggested tutorials for React beginners? – riz
\nA: Tes we pin good free tutorials on the /r/reactjs beginners thread. https://www.reddit.com/r/reactjs/comments/gukkex/beginners_thread_easy_questions_june_2020/
\n# Q: Is now a good time to learn React and start learning it with hooks only (and forgot class-based components)? – TotomInc
\nA: Now is a VERY good time to learn React. Unfortunately, you cannot omit class based components, unless you never intend to work with anyone else's React code ever. Legacy is a powerful thing. We are in a weird transitional time where in an effort to make React simpler in the long term, we made React more complicated in the short term. Deal with it.
\n# Q: Do you think adding subtyping to TypeScript was a mistake? – Yugiohxlight
\nA: No idea. I think we should be happy to admit when we don't know things 🙂. By the way I think it is a good pitch for reasonml.
\n# Q: When should components be memoized? – esfox
\nA: When they are expensive to render.
\n# Q: Is it just me or does a lot of the AWS UX seem really unintuitive and a pain to work with? – rixcy
\nA: Not just you. We feel it too. Working on it.
\n# Q: Why are webmentions important? – b3u
\nA: They help keep the web \"indie\". I like that it gives credit to people on their own domains. However the implementation leaves much to be desired. For those who want to learn more about webmentions - https://www.swyx.io/writing/clientside-webmentions/.
\n# Q: Welcome. It's so nice to have you here and congrats on joining Amplify!
\nDo you have advice on making the switch from dev to dev rel/advocate type roles? How does an engineer break into that space when so few companies have a need for the role especially if we aren't twitter famous already :P – Sonicrida
\nA: Hey I see you 🙂. Well fwiw when I got my first devrel role at Netlify, I had not even given my first conference talk, I had given only 2 meetup talks (React NYC meetup), and wrote a few crappy blog posts. However, I was very very consistent in learning in public and practicing marketing for others. If you market yourself well, other companies will want you to help market them. https://www.swyx.io/writing/marketing-yourself/
\n# Q: Do you think React native has a future on apple devices, or do you suspect apple will eventually mandate SwiftUI? – Pat
\nA: I want to caveat that I basically don't do any RN. Last time I touched RN was when I interviewed with g2i 🙂. Imo it has a future. The investment in RN is HUGE. Also, compiling to SwiftUI is not out of the question. But Idk.
\n# Q: Where does Amplify need to improve the most? – RossWilliams
\nA: Oooh nice one. Everywhere lol. I have spent the last 2 weeks filing issues internally. As far as \"The Most\" - I think the auth experience needs to get a lot better. Not everyone wants to use Cognito and the interaction between auth and other services is not well documented. That's my job. 🙂
\n# Q: Why is JAMstack getting so much popularity these days? – junaid
\nA: Because of my old team at Netlify! Jk. I have given a bunch of talks about this https://www.swyx.io/speaking/jamstack-rise/ - It is the confluence of 5 different trends all coming at once. we are collapsing layers between CI/CD and CDN. Btw, the static site generator version of JAMstack will be even more popular in future because of Web Vitals prioritizing minimal relayouts. It's faster, cheaper, (comparatively) more secure.
\n# Q: What's the best place for getting online freelance work on React or can you give tips on it? Thanks. – arsalan
\nA: No idea, I only freelanced for 2 months when I was looking for my first job. We have a Who's Hiring and Who's Available thread on r/reactjs https://www.reddit.com/r/reactjs/comments/gudtmn/whos_hiring_june_2020/ you can check out.
\n# Q: Is Blazor) from Microsoft going to overtake React and Angular? – MelvinPhasor
\nA: lol wat no.
\n# Q: Why did you choose to create r/reactjs? Any motivation behind it? – meet_zaveri
\nA: I did not create /r/reactjs! Our top mods disappeared a long time ago. I only became a mod because Dan Abramov wanted my help to clamp down on framework bashing.
\n# Q: What React library (redux, redux saga, context api, etc) would you recommend to start building large scale apps? – iamaul
\nA: We used Redux to build Netlify and it works very well for us. I have never liked redux saga but tbh I never gave it an honest shot. I would be interested in MobX and Recoil for large scale apps too, but unfortunately have not had production exp with them.
\n# Q: Any clue what might come after React or which direction it will evolve towards? – The Benevolent Dictator
\nA: https://www.swyx.io/writing/js-third-age/
\nhttps://www.swyx.io/writing/react-distros/ double answer 🙂.
\n# Q: Where do you see AWS can make a difference when writing frontend applications? I'm not talking about serverless, I'm more interested on the web part. – Mathis
\nA: Ah. Have you seen Amplify Datastore? Basically the idea that the upper limit to how fast we can make apps feel is that we have to write all our operations to a local cache and let it sync to backend with a deterministic contract. We then also get offline-first apps for free. https://gist.github.com/sw-yx/108d90755aa3f34401dcb488c2f0f5aa
\n# Q: Do you know libs, articles or other, that help to handle redux state updates in a canvas context (like PIXI.js) ? More generally, uses of canvas in React-Redux env. – Chnapy
\nA: No, sorry. Ask @acemarke.
\n# Q: Why do algorithms play such a big role in the job hiring process? Are there elements of every coding project that require data structure implementation? – dchavours
\nA: Traditionally we hired engineers to write low level/systems code. Over time, the need for that decreased as we moved higher and higher up the stack. However, interview practices have been slow to evolve. https://www.swyx.io/writing/osi-layers-coding-careers/ However you might like knowing both my technical interviews at AWS and Netlify involved no algorithms.
\n# Q: Didn't realize you had joined AWS, how was your interview experience at AWS? Any blogs coming up about that? Interested especially you come from a non-CS background like me & I would love to join the FAANG gang someday. – _binarynumber
\nA: Thanks! yea it still feels weird to say that I'm part of FAANG now lol. It used to be so unattainable back when I was in bootcamp. Now I am actively saying no to fb 🤷♂️. I don't have plans to blog about it because I think my own journey is quite unique. However, I would advise to take the recruiter's tips very seriously. They REALLY care about the 14 leadership principles at Amazon. If you want to be hired into a senior role you have to have good stories that relate to most of them.
\n# Q: What do you think about Deno? Do you think it'll go mainstream one day? – bellu, Junaid
\nA: Yes. It will be a key part of the Third Age of JS https://www.swyx.io/writing/js-third-age/. However, most platforms will simply support both node and Deno and I don't think node dies.
\n# Q: How do you guys use React at AWS? – rhesa
\nA: React is used HEAVILY at AWS. There are so many engineers using it that we hold our own internal React Conf with a few hundred people. I'm afraid I don't know much more than that. I will be interested to find out more once COVID clears, and I can go visit Seattle.
\n# Q: Thanks for the reply! What is your day to day looking like now (or what will it look like as you settle in?) I'm really curious about how much you interact with the main devs on the team to learn more and become an expert with Amplify so you can teach the rest of us. What is that process like and how much time do you spend learning vs content creation/delivery. – Sonicrida
\nA: Honestly right now im just 100% learning lol. I had my first meetings with PMs yesterday. I normally LOVE to work directly with the dev team, and did that at Netlify, but at AWS my sense is that won't be as possible anymore (because of team structure and size). Sorry I don't have a set % of learning vs content creation, probably in your first year you are mostly learning and you only really get on your content game in your second year. But don't forget the other big part of the job is helping beta test new features, visiting customers and collating product feedback.
\n# Q: What are your thoughts on TypeScript? Is it still worth learning in 2020? – bellu
\nA: Uh, YES!! LEARN IT. look at how many tools have switched https://twitter.com/swyx/status/1260888049958838272?s=20.
\n# Q: For someone who wants to become a better engineer (not just coding and leetcode stuff...) Does your book discuss topics like technical communication, engineering documents and other skills that are sometimes lacked? Can you give an example of one? – dilraj
\nA: We have a whole chapter on writing, and the Senior Dev chapter discusses a lot of the other organizational/metalearning skills needed. Basically the whole book is written to help you discuss the non code part of coding careers 🙂. Table of contents here https://gumroad.com/products/bAZJq/.
\n# Q: Is it good idea to convert legacy React application into TypeScript? – Banu
\nA: If it isn't broken, don't fix it!!!!! However, if you intend to maintain it for the long run, then yes TypeScript is a very good tool for that. It is meant to help you refactor incrementally. Have a look at how millie at TinyMCE and Brie at airbnb did their migrations. HUGE codebases. A lot of benefit. https://react-typescript-cheatsheet.netlify.app/docs/migration/intro/#misc-migration-stories-by-notable-companies-and-open-source
\n# Q: I believe you were doing Georgia Tech's OMS program, how is it going and what is your review of it? Would you recommend it for non Computer Science folks to take it? – Andrei_Calazans
\nA: I dropped it after 3 classes. basically Netlify got super intense, and I had to choose between my class load and real work. I still want to pick it up again someday. I 100% recommend it for non CS folks because its cheap, and it helps fill the gaps you may have. Also, having a Msc in CS helps with hiring in some cases. A lot of people take it and focus on ML; do that if you must, But I was more keen on CS basics like compilers, databases, operating systems.
\n# Q: Do you think social skills play an important role in the success along with technical skills? – junaid
\nA: Yes! Even though I'm not the best at social skills myself. But clearly I think it is important, that's why I wrote a 450 page book on all that stuff. 🙂
\n# Q: How to get SEO to work in React app built using CRA? – MelvinPhaser
\nA: Prerender! https://create-react-app.dev/docs/pre-rendering-into-static-html-files/
\n# Q: How are you swyx? – thetruthseekah
\nA: I'm ok! My fingers are a bit aching from typing so much. Also I'm stressing out about my Svelte Amsterdam talk later haha https://www.meetup.com/Amsterdam-SvelteJS/events/266919637/.
\n# Q: Hey Swyx! What editor theme(s) do you like? 😄 – kpollich
\nA: Lol I default to Ahmad Awais Shades of Purple recently.
\n# Q: Classnames vs clsx which is better? – fgrgec
\nA: I have only used classnames.
\n# Q: What do you think of ssr on golang? – Tee-Sean
\nA: I don't think anything of it haha. I had to write some golang once, and it was a fine experience, but I didn't feel more productive than in JS. Interested in learning rust someday.
\n# Q: Can React JS be the most dominant ever JavaScript library? – Vradhi
\nA: Isn't it?
\n# Q: Is it better to keep using GraphQL or Redux for all projects? OR use both of them? OR other better API like hooks maybe? – akram-001
\nA: Use what you enjoy. I think GraphQL needs a lot more tooling to set up, and you only get the most benefits if you can flow the types down from server to frontend. Redux has less setup as it is mostly just frontend.
\n# Q: How can someone learn and contribute to React internal codebase? – einstein92
\nA: I HAVE THE PERFECT TALK FOR YOU LOL https://www.swyx.io/speaking/contributing-to-react/.
\n# Q: How to get started with sponsorships for projects? – MelvinPhaser
\nA: Sorry, I don't have any experience with that.
\n# Q: Hey Shawn! Do you have any advice on people graduating bootcamps in this economy? – D—
\nA: It's bad timing. A lot of senior engineers are out in the market right now but realize that these are temporary displacements. The overall world demand for software has 2x'ed over this pandemic. We WILL want more software engineers than we have ever had before. You WILL have a job but maybe not right away. I recommend searching for 3-6 months, and if you have no luck, taking a tech-adjacent job like support, docs, technical sales. Once you are inside a company it is usually quite easy to switch to dev after 1-2 years. It's much better to do that than to stay unemployed for the same time period.
\n# Q: What do you think of Recoil for state management? Given there are so many state management options for React devs right now, do you think Recoil has something to offer? – react_guy
\nA: Atomic updates is very interesting. However, it is probably not needed as a general purpose tool because we need a lot more out of our state management tools than just that. Still, it is a good one to know about. 🤷♂️
\n# Q: Best way to prepare for FAANG? – Tee-Sean
\nA: For Google it really is a lot of technical/algorthm interviews. For Facebook see Aaron's post https://twitter.com/aarondjents/status/1266149438554169344. For AWS it is VERY team dependent. I can't comment on the other two.
\n# Q: Do you think that learning React hooks from now is good since it is still under development? – akram-001
\nA: React hooks is production ready, learn it now!
\n# Q: Do you see a future where Rust/WASM dominates client-side business logic, and JS/React are only used in presentation layer? Yes - what is holding it back? No - why will JS or TS hold on? – RossWilliams
\nA: Not either or. Serializing across JS <-> WASM has a cost. Maintaining a polyglot codebase has a cost. Companies that can get by with JS/TS will do only that. You will only want to use WASM when you have an existing codebase in another language or have very heavy compute needs. I do think that build tools and libraries will increasingly have Rust/WASM cores for hot code paths. But app developers will largely not have to mess with that.
\n# Q: How to get started with advanced concepts like microservices in JS? Any source. – MelvinPhaser
\nA: What makes you say it is advanced? Anyway I believe this question is too broad to have a good answer. Please be more specific about why you want to know and what you want to know.
\n# Q: What do you think about Flutter vs React native? – xryn
\nA: Tried Flutter ONCE two years ago. stdlib is very good, maybe better than RN but I have trust issues with anything from Google.
\n# Q: What is your favourite frontend library and why is it React? – Kosai106
\nA: React pays the bills and has a great core team and community.
\n# Q: When will the DOM go away? My hypothesis is AR will be a good time to make the switch to a better foundation. – The Benevolent Dictator
\nA: Good luck with that one... they use the DOM in SpaceX rockets 🙂.
\n# Q: What do you think which blog can helps me to learn mono-repo in the serverless? – Steven James
\nA:
\n# Q: Are there any libraries that opt for widgeting React components for SSR? – I hate Internet Explorer
\nA: Can you please define widgeting? I don't think I understand that.
\nFollow-up: Adobe Experience manager runs React as independent widgets. I wanted to know if any React libraries are also like that.
\nA: I don't know about that, but you can look at this https://selleo.com/blog/how-to-create-embedded-react-widget. It won't automatically work with SSR though.
\n# Q: Do you have any particular system of productivity that helps you get so much done? - D—
\nA: I'm actually very lazy. Idk. I think I could be a lot more productive but as for writing, sure, here is my system https://www.swyx.io/writing/writing-mise-en-place/.
\n# Q: Any advice for people hoping to enter the frontend development world anew? Do they have to learn stuff like React/Angular/Vue to get along now? Is it feasible without something like college? – XxXMLG NoobXxX
\nA: Yes it is feasible without college, however many, many frontend jobs will use JS frameworks. You can learn on the job, but the reality of the job market is many people who will be interviewing alongside you will already know them.
\n# Q: SSR or prerendering? Which one is better? – masoud
\nA: Heh, complicated question. I'd say prerendering, but it is not clear cut, and I will use SSR in some situations.
\n# Q: Is digital garden different from blog? – sridhar02
\nA: Somewhat - basically you commit to publishing before you are finished, and updating even after you published. Blogs are relics of dead tree publishing paradigms.
\n# Q: How much do you work \"after-hours\"? I know that FAANG schedules can be all over the place anyway. (Are you flexible remote?) but do you feel like you're going to be putting in more than 40 a week and do you think that this is an expectation of a dev advocate position? It seems like the responsibilities can often blend with what #LearnInPublic'ers do in their free time anyway but how much freedom do you have to turn that off as needed when it becomes a job in addition to just a hobby haha. – Sonicrida
\nA: I am flexible remote, yes. I don't think we are expected to put in more than 40 a week, but I do definitely put in more than 40 myself because I am ambitious but also I love what I do. Feel free to ask a followup. I feel like I didn't give you a good answer.
\n# Q: What do you think about node on the server side? Do you think it's a good choice? – Dexti
\nA: Yes its non-blocking! lol (there's a parody video that talks about that https://www.youtube.com/watch?v=bzkRVzciAZg&feature=emb_title).
\n# Q: Compared to Vue or Svelte, if there are any improvements you think React needs to have, what would it be? – rhesa
\nA: Yes!!! Great question. We need better styling/animation support, and we also need to normalise using Preact by default before upgrading to React if we really need it. Our tools need to make it EASY to do so. However, I'm very excited by React Flight and Blocks and what that will do for the biggest React apps.
","frontmatter":{"date":"2020-06-11T00:00:00.000Z","dateGroup":"June 2020","dateString":"Thursday June 11th, 2020","description":"Senior Developer Advocate at AWS Mobile and author of Cracking The Coding Career\n","location":"Q&A Channel Reactiflux","people":"@swyx\n","recording":null,"time":"9AM - 10AM PT / 4PM GMT","title":"Shawn Wang"}}},{"name":"typescript-team","relativeDirectory":"","childMarkdownRemark":{"html":"Our roamdap is public BTW, so any questions of the form \"When is X happening?\" where X is not on the roadmap, the answer is always \"When the value proposition justifies putting it next on the schedule\".
\n– SeaRyanC
\nFinal plug - use our discord also! https://discord.gg/typescript - I used Reactiflux to join the JS ecosystem a few years ago, so it's great to give back in these Q&As.
\n– orta
\n# Q: Introduce yourselves – JeffBaumgardt
\nA: I'm orta - I'm new to the team, I've been doing a lot of documentation and web infra - https://orta.io/ - https://github.com/microsoft/TypeScript-Website/issues/130.
\n– orta
\nRyan Cavanaugh, long-time engineer of various sorts and now dev lead for the TypeScript team.
\n– SeaRyanC
\nI'm Nathan, I've been on the TypeScript team for over 4 years and worked on an internal compiler at Microsoft before that. I work mostly on JS support, JSDoc and Definitely Typed.
\n– shivelysanders
\nHi! I joined the TypeScript team in April of this year. My background prior to that was in web, mostly frontend (especially React 😁).
\n– Andrew
\n# Q: Some JS developers of the the Web seek a pathway to many language features some consider to be unnatural. Like pipeline operator and partial application. Since we want them sooner than later, what's the plan of a unified plugin system for TypeScript? – Pokute
\nA: We're designing this very, very slowly with the maximum amount of deliberateness, and I think there's no concrete output yet on this front. The main risk here is that we (the TS team) need to be able to add e.g. new kinds of syntax, new kinds of types, etc, and a plugin written for a prior TS version can't possibly know how to handle these sorts of things. So a system needs to work in a way that is extremely agnostic to how TS works internally, but this is sort of in conflict with what plugins generally want to do. You can think about things in terms of tree transforms, which is a reasonable way to go, but then the question is how refactorings work against a synthetic tree that isn't what you actually wrote.
\nHonestly the fracturing risk is in allowing plugins, not disallowing them! Plugins as imagined by many people would create an infinite number of language variants that lacked interoperability or a shared set of semantics - this is what we really don't want to enable. People can experiment with Babel or other tools if they really want to try adding novel syntax, but we don't feel obligated to provide the capability of typechecking these variants.
\n– SeaRyanC
\nAs an ex-React Native dev, I would love to see those problems fixed - we've been keeping that in mind when thinking about both the upcoming module resolution changes for node/web, and the compiler plugin infrastructure. Doing it right would take quite a lot of work (it would require many different copies of the type system) but doing it good enough (only one level of resolution - e.g. prioritise android for this tsconfig) is hopefully something the compiler plugin api can support.
\n– orta
\n# Q: Is there any talk going on about adding types to the ECMA spec? – mwss1996
\nA: @mwss1996 The TC39 committee has discussed adding types in the past, but didn't want to include one of the competing type systems, so discussed adding a third type system. That didn't go anywhere.
\nThe committee has also discussed ignoring type annotations and letting them just be syntax, but even that requires some standardisation between compilers.
\n– shivelysanders
\n# Q: Where do you see the future of class support going? – mwahahasldjf
\nA: WRT Class support, originally TypeScript had it's own opinion on what classes would look like, but over time that responsibility moved to TC39 - now JS users kinda decide what's going on there.
\n– orta
\n# Q: Why should this type be string? Isn't it something bad about TS? – BatReza
\nconst test = (input: number) => {\n if (input === 0 ){\n return \"\"\n }\n return null;\n }\n}\nA: @BatReza the inferred type is actually \"\" | null not string! This seems correct to me.
– shivelysanders
\n# Q: I always find it hard to figure out some errors on types when you have a really big type signature. A common example I’ve stumbled upon several times is when a type is missing just one attribute, but the error message is huge. What kind of work is being done to improve error messaging on Typescript and keeping to the same subject, what can we do to make sure our types don’t behave with cryptical error messages when used? – dbz
\nA: This is an area of continuous improvement for us, and we're always interested in finding places where we can \"special case\" more things in a way that's useful. The specific example is a good one; it'd be good if TS could just say \"You are missing these one or two properties\" in the case where exactly that happens. I don't think we have concrete guidance on how to write types in a way that's more likely to give better error messages; mostly you just have to try things out.
\n– SeaRyanC
\n# Q: Is there a plan to help the community around TypeScript grow? What type of help from the community you would require to make TypeScript better? – horacio
\nA: There's been quite a lot work on trying to figure out how to improve the visibility of people doing great work in the community ( https://github.com/microsoft/TypeScript-Website/issues/63 ) - I think it's TS's responsibility to highlight that work and try to grow the community. One thing that I think is interesting is how much overlap the TS community has with others, so we've been doing more work to improve TS docs in other JS communities to make that better. How can you help? Do more cool stuff, make sure we know and if you want to contribute to some of the web infra that's always easy contributions which don't require a compiler degree. 😉
\nOther ways to contribute-hang out in our discord too! https://discord.gg/typescript
\n– orta
\n# Q: What's the plan with the unknown type? any timeline on when you might support the in operator with it? more specifically: https://github.com/microsoft/TypeScript/issues/21732 – lifeiscontent
A: We haven't figured a way around a couple of key obstacles:
\nin already narrows, in a different way that the issue you linked proposes. We'd have to integrate the two or deprecate the current behaviour.– shivelysanders
\n# Q: Hi, it's a pleasure having you guys here. Functional Programming is getting popular for us front-end developers. From what I understand, TS uses many OOP concepts. Has there been any talks about whether the TS compiler will adopt concepts from FP? – green_lantern 🪐
\nA: TypeScript's design is largely motivated by existing JS paradigms, and of course JS is a multi-paradigm language. I think you're right that historically TS had more of an OOP slant, but over time we've introduced features that make typing FP patterns way more feasible—tuple types (and being able to represent function rest params as tuples) come immediately to mind. Several of us on the team have experience in and are very sympathetic to FP concepts, and the community in general has had a surge of interest in FP more recently, and I think TS has reflected that shift, and will continue to follow the community on it. (Also, if there are FP patterns you can't express in TS, I'm interested in seeing GH issues on it 😄)
\n– Andrew
\n# Q: Will there be any feature that differs from vanilla JS on Typescript, or is the plan always to be compatible as it is now? – mwss1996
\nA: Nope! This is a hard line for us and we're not going to do anything where pasting JS into a TS file results in different runtime behavior. I think of this as our core value proposition: You don't have to worry now (or ever) that migration will result in new production bugs appearing in your application.
\n– SeaRyanC
\n# Q: Re: soundness, what might be coming, and what is off the table? – Schmulik
\nA: We're always looking at where the current soundness holes actually result in bugs in user code or real user pain (trading off against sacrificing completeness). Just due to how JS works, we're never going to have a --sound mode, but there are tactical places where the type system can be augmented to catch more problems in practice. Things I'm often thinking about are better ways to indicate co- and contra-variance, writeonly (ugh), and whether we could ever make readonly influence assignability. I think in practice, \"real\" unsoundness (observed violations) come up much more often due to incorrect type assertions, so anything that removes a type assertion is a soundness feature in my book -- the lack of super constraints on generics being one that seems to end up with assertions or overwide types too often.
– SeaRyanC
\n# Q: It's been really nice to see the TS team help standardizing features (such as the optional chaining - kudos for stage 4!). What's the next one which excites you (apart maybe type annotations ;))? – arcanis
\nA: This is going to sound like I'm trolling you but honestly I'm excited about stable for-in ordering 😂.
\n(It just reached stage 4 yesterday)
\n– Andrew
\n# Q: The interface system is great for typifying objects transferred over HTTP. However, since interface matching only looks for available properties instead of exactly matching the objects, sometimes it can get verbose to manually destructurize a form values object just to strip a couple of values, or worse, use delete. Is it possible to expect a type mechanic to exactly match an interface, or better yet, turn the current interface functionality to being able to extend interfaces? – robotica
A: We call that feature exact types, and we're thinking about it but haven't figured out anything concrete on it. (We think about it once a year or so and this last time seemed the most promising ... so make of that what you will.)
\nI don't understand what you mean by \"make current interface functionality to being able to extend interfaces\".
\n– shivelysanders
\n# Q: Will it be possible to declare variables as type variablename instead of var/let/const variablename: type? – neoney
A: That will probably never happen - it's an expression level change which changes javascript not the type system - TC39 would need to agree to do it I think.
\n– orta
\n# Q: What are your thoughts about compilation performance? Currently I'm using sucrase to skip the type check on compilation time to decrease the time between each compilation... – José Oliveira
\nA: We know that it's gotten progressively worse over 3.x's lifetime and have one dedicated person looking at it right now, plus another helping from time to time. No amazing progress to report yet, though.
\nAny time you can compile less, do it. So don't feel bad about just emitting without checking if you can get the errors at a different time. And check out the incremental compilation features that might help.
\n– shivelysanders
\n# Q: Any plans for enabling strict mode per file with a special comment? Currently it's quite tough to move over to strict mode if it has not been enabled since the beginning. – Lomant
\nA: It's tricky, because strict mode means a lot of things and some of those things don't make sense to treat on a per-file basis (e.g. strict null checks, which fundamentally changes what values in or aren't in a given type). But there are other modes where it's really easily lexically contained (I'm thinking of strict class field initialization, for example) where we're thinking about some kind of per-file pragmas. So you might see something there eventually.
– SeaRyanC
\n# Q: What are your thoughts about associated values for enum cases (like Swift's enums) with regards to TS? it's an extremely handy feature that helps writing better typed code.
\nI don't completely understand the argument against adding features to TS that do not exist in JS? – bartzy
\nA: Every feature we add to the TypeScript language that isn't erasable is a liability for the team, the JavaScript committee could decide to build something similar but different (like namespaces and what became commonjs/modules, and how TC39 decorators are different, and how private fields are different from how they are in TS).
\nYeah, I would LOVE that, but that involves making a lot of extra runtime behavior and (to my knowledge) we don't want to expand the features of enums because it's quite possible enums get added to JS.
\n– orta
\n# Q: To each of you: what is your favorite compiler flag, and why? – Levy
\nA: --checkJs. Also, are you really Wesley or just somebody who stole his picture?
– shivelysanders
\nMy favorite flag is -p.
– SeaRyanC
\nMy favorite flag is easily --noErrorTruncation, because, uh, sometimes I write horrifying types and use them wrong and it gives me really long errors that I actually need to read.
– Andrew
\nMy favourite compiler flag is the one I am still struggling to document noErrorTruncation - https://typescript-v2-121.ortam.now.sh/tsconfig#noErrorTruncation
– orta
\n# Q: Any plans to allow type spreading as opposed to intersection? e.g. type Foo = {...Bar, ...Baz} – aaronjensen
A: I actually wrote that feature long ago, but we decided not to ship it. We have a saying that features start with -1000 points and have to justify their existence, because we'll have to support them forever and make them work with all new features.
\nSpread types never made it past 0 points:
\n– shivelysanders
\n# Q: How to I keep a string from widening in this case? https://gist.github.com/lifeiscontent/4fb148c1c4aee9ca50552f0670c5b49f if this is not possible currently, do you have plans to support this kind of use case? – lifeiscontent
\nA: Not sure if I understand enough of the context for what you're looking for, but you can call the function with \"X\" as const to prevent widening in just that case. Also, if the constraint on AreEqual is <T extends string> it won't widen in the calls you have, but of course that may not be compatible with the actual API you're trying to design/use.
– Andrew
\n# Q: Do you have any ideas on what a migration path from the old decorator spec that TS currently uses to the new one might look like? – snowei ❄
\nA: Realistically, I would not recommend upgrading your decorators. We'll have to keep supporting the old syntax anyway.
\n– shivelysanders
\n# Q: Did you like working with Joe? – neoney
\nA: You mean JS Joe? He hangs out in the compiler channel in the TypeScript discord, it's cool to see him learning in public.
\n– orta
\n# Q: Currently, if you have multiple dependencies that define the same type it fails to compile. For instance both React native and react define the FormData type and if a dependency (like @types/styled-components) depends on both it breaks the whole project. Is there some plan to account for situations like this? – HelveticaScenario
\nA: So that's tricky, there are a few ways to handle it today - but all of them are a bit sucky. Some of our recent design meetings, we've been discussing ways to make 'type environements' of some sort like 'these files are node' - 'these files are browser' and have different globals. We'll be thinking about it and do something cautiously.
\n– orta
\n# Q: Are there plans for a low jargon intro to design decisions and limitations in TS, or maybe recommended alternatives to common JS parents? For instance: in TS, you can't create an object literal, then conditionally assign properties to it, if those properties are required. – threehams
\nA: We've tried to address there either in the massssssive FAQ https://github.com/microsoft/TypeScript/wiki/FAQ or by building playgrounds which show off these kind of cases.
\n– orta
\n# Q: Will the spec ever be updated? The last time it was updated was 2016 for TypeScript version 1.8 – brain
\nA: 😢 We feel bad but it's just a resource problem -- the number of people who can accurately and precisely update the spec is barely above 1, and those people are the ones delivering high-value features and bug fixes that they can do 10x faster than anyone else. The upside of a formal spec compared to just reading the code of checker.ts isn't great -- the amount of conceptual complexity you'd need to understand either is approximately the same, and keeping a textual spec up to date with the actual behavior is just asking us to write the same thing twice in two different languages, which is widely understood to be a bad plan.
\n– SeaRyanC
\n# Q: What influence has the TypeScript team had on other languages shepherded by Microsoft? – mooman
\nA: As the C#'s team implemented non-nullable types, I know that there were a lot of conversations on the best approach to apply that. Part of that was also leveraging that with some ideas of from our definite assignment logic too. I think that the idea that non-nullable analysis isn't always perfect, and was an opt-in behavior, gave the C# team some confidence to say it was feasible. But I wasn't personally involved in most of those conversations, so take this one with a grain of salt. 🙂
\n– DanielR
\n# Q: What kind of changes would result in a TypeScript 4.0? – Jeremy
\nA: You mean \"Typescript 3000\", a breaking change to Typescript, right? For the Typescript team, basically nothing would make us do that. Any fresh start would have to be a complete fresh start probably with a different name. And with Typescript filling the typed-javascript niche, it's unlikely that Microsoft will fund something like that in the next few years.
\n– shivelysanders
\nFollow up: I literally meant 4.0 - just curious what would cause a major version bump.
\nTwo more minor versions. We don't follow semver.
\n– shivelysanders
\n# Q: Where do you feel you derive the most inspiration from, type-system-wise? – Levy
\nA: Futurama and Simon PJ.
\n– shivelysanders
\n# Q: Do you use Javascript Standard in your applications? – José Oliveira
\nA: We do not use Javascript Standard, if you're talking about the formatting standard.
\n– shivelysanders
\n# Q: Are there any good (potentially unpublished) resources for people wanting to learn the compiler? – nonara
\nA: Here's some great resources for the compiler:
\nand the TypeScript wiki
\n– orta
\nAfter you peruse those, you can always look at the Good First Issue / Help Wanted list: https://github.com/microsoft/TypeScript/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22+label%3A%22help+wanted%22
\n– Andrew
\n# Q: Will there be support for covariance/contravariance soon? – lifeiscontent
\nA: This already happens implicitly. In generic types this is measured through a trial instantation of the type parameter in question; for a non-generic type, co and contravariance already happens automatically as you move through input/output positions.
\nThings get added when we feel their use cases merit the complexity and it's a very complex feature. I think we're waiting for a killer use case to justify it.
\n– SeaRyanC
\n# Q: Are there any TC39 proposals which TypeScript delegates are currently opposing? – brain
\nA: Not on the record!
\n– shivelysanders
\nFollow up: Off the record though. 🙂
\nI personally hate classes.
\n– shivelysanders
\n# Q: How long until variadic types (...T)? – Syntax
A: https://github.com/Microsoft/TypeScript/issues/1213
\n– NickServ
\n# Q: Can you help TC39 get decorators to stage 3 faster so we can revisit them in TS? 😄 – spion
\nA: Ron is working on this all the time.
\n– SeaRyanC
\nI'm at TC39 and I've had at least 3 people ask me about decorators 😅. We all want a stable solution for users, but it will take some time to nail down the details while addressing everyone's constraints.
\n– DanielR
\n# Q: I guess I was more interested in seeing the bivariance hacks in React typedefs disappear, any thoughts on how something like that will get resolved? https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L89 – lifeiscontent
A: We need writeonly to get rid of the bivariance hacks, since without it the event invocation is unsound.
– SeaRyanC
\n# Q: Is there a plan to add friend classes anytime soon? – elderapo
\nA: No, not really. JS doesn't have the same kind of notion of assembly boundaries as Java/C# so 'friend' is a much more nebulous concept.
\n– SeaRyanC
\n# Q: Will TypeScript get Haskell-style typeclasses? – trepidacious
\nA: It's not likely. The design space is too cluttered with classes and interfaces. And they don't capture any existing JS pattern like discriminated unions did. Maybe when people start passing a bundle of methods as the first argument of each function ...
\n– shivelysanders
\nSee fp-ts for examples of typeclasses in TS.
\n– pgrizzay
\nThere is a protocols proposal in TC39 which solves similar problems to type-classes, but I'm personally unsure if it currently has the right ergonomics. Languages like Haskell can import automatically resolve which protocol/type-class instances to use based on the types given, but JavaScript doesn't have that luxury. It means you might end up with a lot of manual typing, and issues with prototype pollution.
\n– DanielR
\nFollow up: Wouldn't compile-time resolution of typeclasses work where types are known though? Seems like TypeScript can have functionality that only works in TypeScript, as well as functioning as a better JavaScript?
\nWe don't do type-driven emit for reasons listed above. Check out our design goals
\n– DanielR
\n# Q: Been out of the loop for a awhile, but I remember a time when Babel announced support for TS. Any guidance on when to use Babel vs tsc? – antmdvs
\nA: Babel has support for transpiling TS to JS, but doesn't do type checking. Babel may be useful if you're in a scenario where you need to transpile on a file-by-file basis (babel-loader with webpack is a good example, although ts-loader can also work in a transpile-only mode), or if you already have a build chain that uses Babel (particularly with other custom transforms). But if you need type checking, you'll need to use the TS compiler in some way.
\n– Andrew
\n# Q: Are there any plans to add tooling to TypeScript to help with library versioning? The TypeScript lib is constantly being expanded/changed, and it’s tricky to keep in mind when your generated d.ts simply won’t type check or even compile in an older version of TypeScript. – brain
\nA: api-extractor can help with versioning, although I've not used it. Also right now I'm looking at the simpler problem of generating old-TS-compatible d.ts files from d.ts files generated from new TS, eg 3.7 -> 3.5.
\n– shivelysanders
\n# Q: You’ve done some interesting things for JSX support. Anything new in the works for JSX/React? – antmdvs
\nA: We don't check the type of children right now but haven't figured out a way to do it efficiently. I believe @Levy is still thinking about it though...
\n– shivelysanders
\n# Q: Will we ever get curried functions support where the first parameter's type depends on the type of the second one? – RogerC
\nA: Short answer is \"not until we completely rewrite generic inference\", which is as unlikely to happen as it sounds like. Without relying on parameter ordering, TS would have to do an unbounded number of inference rounds to produce a result (i.e. unification) and this is expensive in time, space, and complexity.
\n– SeaRyanC
\n# Q: Are there plans for linting tools for disabling/favouring certain TS features over other ones? For example, I feel like interfaces vs. types distinction is weird since I can do almost everything with types. Would you dare endorse such tools or even lint rules some day to try to fix some \"mistakes\"? – Pokute
\nA: No, we're not in the business of taking sides on style arguments. Plus, this sort of thing causes problems for when people have legitimate use-cases for one over another. Cargo culting opinions like \"don't use interfaces\" confuses people who actually need to use interfaces for their needs.
\n– DanielR
\nI can't see is officially endorsing specific lint rules—we usually don't endorse third party things, especially when they center around style/opinion. (Also, declaration merging is a pretty important distinction between types and interfaces, especially when we're talking about globally scoped things.) I think you should use whatever lint rules make you happy.
\n– Andrew
\n# Q: Are there still plans to deprecate ts-lint and if so when? – Joseph
\nA: https://medium.com/palantir/tslint-in-2019-1a144c2317a9
\n– NickServ
\nYeah, it's officially deprecated ^ - I think of it as TypeScript getting closer to JS semantics, so your JS tools like babel eslint prettier etc all work with TS, so less need for a unique TS environment.
\n– orta
\n# Q: Are there language features outside of TC39 proposals that the TS team has an interest in adding? – Chem
\nA: We're looking at community feedback and the committee progress to see which proposals need additional support from us. We try to let the community lead in terms of what needs our help in advancement.
\n– SeaRyanC
\n# Q: Will we someday get nice proper higher kinded polymorphism in TypeScript? https://github.com/Microsoft/TypeScript/issues/1213 – mooman
\nA: That's just HKT again!
\n– shivelysanders
\nNot clear - higher kinded polymorphism sort of requires types to be compared by type parameter arity - but TypeScript doesn't do that. It only compares against structure, so it seems pretty removed from the type system's philosophy.
\n– DanielR
\n# Q: What feature in the upcoming year do you look forward to the most?
\nRE: @shivelysanders https://github.com/microsoft/TypeScript/pull/29818 - performance is real bad. – Levy
\nA: I'm super pumped for the new site and new docs. Then I'd like to see compiler plugins. Honestly though, I tend to find myself surprised by things in the language which I ended up falling for: assertion functions and as const just really floated my boat
– orta
\n# Q: What about TypeScript do you regret the most? – Pokute
\nA: Cross-file namespace reopening! Easy one.
– SeaRyanC
\n is roughly the regrets
– orta
\n# Q: Any TS design decision you wish you could change? – captain_radical
\nA: We reused the declare module \"foo\" syntax for module augmentations. That's been super confusing for users and it was clearly the easiest thing not to do which makes it incredibly silly in retrospect.
– DanielR
\n# Q: If you could take one feature out of TypeScript, which one would it be? – johnnyreilly
\nA: Classes! It's always classes!
\n– shivelysanders
\nTwitterverse: \"Ugh TS is all OOP class stuff\"\nTS team: \"We hate classes.\"
\n– SeaRyanC
\nIn a world where I am a benevolent dictator, I would remove the TypeScript formatter and everyone would use prettier instead. (But in the real world, I like that people have a choice for what tooling they do and don't want to install 🙂)
\n– Andrew
\n# Q: For C# backends, what are your thoughts on generating TS from C# models or vice versa to keep the two in sync? – antmdvs
\nA: It's a good opportunity for community tooling. We're not staffed to take on that kind of thing ourselves.
\n– SeaRyanC
\n# Q: You guys have meetups with the Angular folk. Has there been any design decisions you made from those meetups that you regret? – mooman
\nA: Is this a decorators subtweet? 😛
\n– SeaRyanC
\n# Q:
\n\n\n(meta) Our roamdap is public BTW, so any questions of the form \"When is X happening?\" where X is not on the roadmap, the answer is always \"When the value proposition justifies putting it next on the schedule\"
\n
Assuming you refer to this https://github.com/Microsoft/TypeScript/wiki/Roadmap it's still not updated with 3.8 goals. 😞 - Okku
\nA: We can update the wiki for that, good point, but 3.8 is in https://github.com/microsoft/TypeScript/issues/34898.
\n– orta
\n# Q: Does TypeScript have any way to be used as a general purpose interpreter? – José Oliveira
\nA: Are you talking about ts-node or implementing the lambda calculus via conditional types?
\n– shivelysanders
\nYou might want to look into static TypeScript https://www.microsoft.com/en-us/research/publication/static-typescript/.
\n– orta
\nFollow up: I mean: is TS just used to be transpiled to JS, or is it planned to be used as an independent script language?
\nNo plans, but you can easily use APIs to eval(require(\"typescript\").transpileModule(...)).
– DanielR
\nWe don't have any plans to do anything special. deno is \"natively\" supporting TS (whatever that means) and ts-node exists
– SeaRyanC
\n# Q: What is your favourite advantage of using TypeScript over vanilla JS? – Celes
\nA: JS with good d.ts for your libraries is pretty good already. Mostly just better type annotation syntax.
\n– shivelysanders
\nJS with the d.ts ecosystem from types is really good - the good bits form TypeScript are then a better way to describe your types mainly. Most of our users are JS users in VS / VSCode and we want their experience to rock, which means that by using TS you get same but better tooling.
\n– orta
\n# Q: Is there (programmatic/cli) a way to find places in my code where TypeScript gives up typechecking and just sticks any? – hasparus
A: noImplicitAny should tell you.
– orta
\nany, noImplicitAny is one thing of course, but TS will never \"give up\" and fall back to any without an accompanying error
– SeaRyanC
\n# Q: What percentage of contributions are committed by non Microsoft team? – sohelahmed
\nA: It's hard to measure right now - I'd love to see more contributions, and we do mark issues as \"good first issue\". But we have some really prolific contributors. User-defined type guards, our entire control flow analysis model, bigint, nullish coalescing, our migration to ESLint, and much more were external experiments or contributions.
\n– DanielR
\n# Q: What typings can quickly affect compiler performance? – Schmulik
\nA: type RecM<T> = { [K in keyof T]: RecM<Wrapper<T[K]>> }
– shivelysanders
\nT[U] types are sometimes very expensive due to generating large unions, as are distributive conditional types instantiated with large unions; the mix of the two is what most often results in large type computations
– SeaRyanC
\nSee also https://blog.andrewbran.ch/polymorphic-react-components/ for examples.
\n– Andrew
\n# Q: There are n+1 number of different parsers for JS. Any chance of having one that TypeScript could use? – Pokute
\nA: TS is zero dependencies, so it probably won't be sharing one with others - different parsers have different goals too and it's unlikely that everyone could consolidate on one in the ecosystem.
\n– orta
","frontmatter":{"date":"2019-12-05T00:00:00.000Z","dateGroup":"December 2019","dateString":"Thursday December 5th, 2019","description":"The team from Microsoft working on TypeScript will be on to answer all your TS related questions! TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.\n","location":"Q&A Channel Reactiflux","people":"Daniel Rosenwasser (Program Manager), Ryan Cavanaugh (Engineering Lead), Nathan Shively-Sanders (Compiler Engineer), Andrew Branch (Compiler Engineer), Orta Therox (Compiler Engineer)\n","recording":null,"time":"1-2pm PT / 8-9pm GMT","title":"TypeScript Team @ Microsoft"}}},{"name":"microsoft-react-native-windows-team","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How do you plan to pitch the idea of React Native to existing Windows developers? – orta
\nA: Great question. I don't know that we're planning to 'pitch' RN to existing Windows developers per se, so much as ensure it's a really terrific and first-class way to develop apps for Windows, and let developers pick what works best for them where they're coming from.
\n– pag3
\n# Q: Hi guys! What's the masterplan for RNW? Merge it into react-native itself, so RNW comes out of the box with the react-native-cli? Or every time I would want to support Windows, I'll need to bring in RNW manually? – Hantar
\nA: The master plan is to be part of React Native in the same way iOS/Android are. Yes, we want to become part of react-native-cli out of the box etc., in the long term.
\n– harinik
\n# Q: Do you guys use only TypeScript or plain old JavaScript for complete projects? – JustEscaped
\nA: Internally we use mostly TypeScript.
\n– rozele
\n# Q: Why not use Silverlight? Why move to React? – Ahmed
\nA: We have a lot of .NET/C# offerings for cross-platform like Xamarin. We are trying to go where developers are and participating in the React world helps us bring our native Windows stack to the web development community in addition.
\n– harinik
\n# Q: Does Hermes seem like a good fit for RNW? – Jeremy
\nA: Yes we have it running internally and hope to have it available in the public builds as an option soon.
\n– acoates
\n# Q: Why is Microsoft using React Native (Windows) for their applications? Hasn't Microsoft invested in Universal Windows Platform for a long time as a cross platform application framework? Microsoft also has Xamarin, right? What has been special about React Native vs these others? Also, hi! 😄 – EliWhite
\nA: As you can imagine, a large company like Microsoft (and Facebook I'm sure, too) uses many different technologies to build our apps and experiences. React Native has taken on a lot of momentum lately because it hits a real sweet spot for teams that have a lot of JavaScript experience and want to enjoy the benefits of agile, web-like development model yet be able to achieve highly polished native experiences for their customers, especially as Microsoft focuses on bringing our experiences across the entire \"Intelligent Edge\" (as Satya calls it).
\n– pag3
\n# Q: What other tools and frameworks do you guys use? – JustEscaped
\nA: Microsoft is a big place, across all of our teams, probably all of them 🙂.
\n– rozele
\n# Q: Will you be supporting react-native-navigation by Wix. They're the only one with native navigation. And how is Microsoft planning to catch up/integrate with other current existing libraries for RN? – Hantar
\nA: We would like to, hearing a lot of chatter about this module. We have it in our backlog (https://github.com/microsoft/react-native-windows/issues/2546) to add support for.
\n– harinik
\n# Q: Could you tell me what advantages could RNW have over Electron? – humarkx
\nA: RNW uses much less memory than Electron, and should generally be more performant. And the UI is fully native so you can take full advantage of the native platform including the acrylic effect that you see in a lot of Windows UI. It can be embedded in existing native apps. And it can use existing native controls.
\n– acoates
\n# Q: What possibilities for RNWindows are you most excited about React Native \"Fabric\" opening up? – empyrical
\nA: Component libraries, theming and other high value controls/utilities. React Native \"Fabric\" really helps us round out offerings in this space not limited to the core.
\n– harinik
\n# Q: Hi, do you guys have some plans for doing such thing for other desktop platforms? Or you will leave this for other guys not from Microsoft? 🙂 – Alexandrit_T
\nA: We have the beginnings of a react-native-macOS started. We are focusing on Windows for now. Would love to hear if supporting macOS would be interesting to the community as a broader \"desktop\" target.
\n– harinik
\n# Q: When can we expect parity with iOS. We have a RN application, and some big customers are not willing to buy iPads in their stores, its too big of an investment. We need to port the application quickly to desktop/Windows. What do you recommend? – Christian Mokbel
\nA: We're very close to \"lean core\" parity in React Native for Windows and expect to be there this quarter! In terms of the ecosystem of community modules that people use we're starting to engage in ensuring more and more of those have React Native for Windows built-in by default. We welcome feedback or asks on specific community ecosystem modules you'd like to see us prioritize.
\n– pag3
\n# Q: What are the limitations of React Native Windows? When it is not recommended for Windows development? Do we need to use Visual Studio for it or is VS Code enough? – gamingumar
\nA: -- We are building some full enterprise level apps with RNW, so there are not too many limitations. One of the great things about React Native is that you can always add additional nativemodule and native controls. -- So there are not many limitations. As far as the base platform is concerned we are filling out the core functionality as required for our needs, so it should get filled in pretty quick.
\n– acoates
\nAt this time you will need VS as well. We are trying to improve the developer experience to see if we can enable just VS Code.
\n– harinik
\n# Q: Which products are using React Native Windows at Microsoft? – EliWhite
\nA: Several apps and experiences in Office (Outlook, Mail, Calendar, Word, Excel, Powerpoint) are using React Native for Windows. There are a lot more coming up soon. 🤐 😉
\n– harinik
\n# Q: Will RNWindows continue to support WPF? – empyrical
\nA: Our teams in Microsoft have always depended on community contributors for WPF support, and we had some tremendous partners at BlueJeans to create and maintain that offering in the solution. Moving forward, we hope that XAML Islands will address the needs of WPF users.
\n– rozele
\n# Q: Are the Microsoft apps you mentioned are fully(or mostly) using React Native Windows or is it part of it? – Alireza Ghamkhar
\nA: Some of both. We have some apps which we are looking at complete UI rewrites, but we also have embedded scenarios within some apps. -- That's the beauty of the flexibility of RN.
\n– acoates
\n# Q: How are you guys able to keep up with the in terms of release cycles? It seems that you guys are pretty fast to catch up! How many people are working on this project? – Hantar
\nA: It's an effort - and does take a lot of work. But its important both for the community, and so that we are up to date enough to be able to contribute back to RN. We have a dedicated team working on RNW, and also since we have so many teams using the platform we also get some help from app teams too. There are probably around 30 people who work on RNW.
\n– acoates
\n# Q: I am using React Native Windows for WPF app currently. With new vnext changes, WPF will not be supported, then what options I have? – godpranay
\nA: There is an example in the vnext repo that shows how to consume react-native-windows@vnext in WPF through XAML Islands. Check it out! https://github.com/microsoft/react-native-windows-samples/tree/master/samples/TodosFeed
\n– rozele
\n# Q: Why do you rewrite your apps with RNW? Isn't it less performant? – Дикийборщ
\nA: React Native for Windows layers on top of the modern, hardware-accelerated Windows UI (\"WinUI\") stack and in many cases it's runtime performance and experience is superior to that of how apps were previously written using older generation UI technologies. In addition, using React Native for Windows makes it more sustainable to deliver coherent experiences across native client platforms and the web as code can be shared and updated with greater agility.
\n– pag3
\n# Q: Where can we share all the dependencies that we would want ported to RNW? – Christian Mokbel
\nA: Great question! We are tracking several that we know of in our repo (see Extensions project- https://github.com/microsoft/react-native-windows/projects/6) If you can file new issues for dependencies you would like to see supported, that would be great!
\n– harinik
\n# Q: When will vnext become the \"current\" version? It seems like it is significantly better and faster! – EliWhite
\nA: 😃 Very soon. We plan to have most API parity with react-native and native modules/view manager authoring stories at par with the \"current\" version before the end of the year at which time vnext will replace current. You can see our prospective roadmap here - https://github.com/microsoft/react-native-windows/blob/master/blog/Roadmap2019.md.
\n– harinik
\n# Q: We've heard before with WPF, Silverlight, WinRT, and UWP, that support would continue, how can we trust this time Microsoft is fully invested in RNW? – Mark \"Elsewhere\" Lynch
\nA: You missed WinJS. 😉 All kidding aside, I think a general rule of thumb in trusting whether any given technology company is going to support a technology long term and how durable it is for you to build on: are they eating their own dogfood and using it themselves? If so, it makes it harder for them to abandon it without incurring the cost of rewriting their own experiences. So instead of listening to what companies and their marketing say, see what they do.
\nI think you can look at the list of technologies you mentioned and think about which ones has Microsoft actually used to build their own key experiences and which ones were primarily marketed to third party developers but not really used by Microsoft itself. WinRT/UWP are good examples of technologies that Microsoft has deeply invested in building the Windows, Xbox, and tons of app experiences on top of so it'd be quite an expensive and complex undertaking for Microsoft not to continue to invest in those. React Native for Windows layers on top of that whole technology stack and you can see some of the experiences we've already talked about building using that.
\n– pag3
\n# Q: With vnext RNW, to customize UI Component or write my own native UI component, I will have to know C++. Is it correct? – godpranay
\nA: No; We wrote the core of RNW in C++ for the best performance, but we plan to fully support writing native modules or native views in C# or C++. -- Community modules will likely want to be in C++ so that you dont require other apps to load the CLR. We are just starting to get examples of custom native modules and view managers in the repo.
\n– acoates
\n# Q: What changes in React Native are you most excited about and why? – EliWhite
\nA: Hermes is a big one - we all like better perf. Turbo modules is probably next, and we hope that will allow our native modules story to better align with the rest of the platforms in the future (as well as the obvious perf improvements). And then finally fabric is exciting, for basically the same reasons as people want it for the other platforms.
\n– acoates
\n# Q: How does this project relate to ReactXP? – metamarcdw
\nA: ReactXP is a layer on top of ReactNative to try to get a more write once experience when targeting multiple platforms. ReactXP should work on top of react-native-windows.
\n– acoates
\nReactXP is an abstraction layer over react-native and react-dom to enable you to write common UI code for either Web clients or React Native clients, including react-native-windows!
\n– rozele
\n# Q: What's the debugging story like between managed .NET code and Javascript code? Assuming there is some interop layer, does a developer have to have two debugger instances attached to see how data is flowing between the two? – dustinsoftware
\nA: You would indeed need two debugger instances, my typical debugging work flow is to launch the app from Visual Studio in debug mode to debug native behaviors and spin up VS Code to attach to the JS runtime. Often I'm debugging either one or the other, so it's rare that I'm actually debugging both, but nothing would stop me from doing that.
\n– rozele
\n# Q: Are there any community uses of RNW you'd like to give a shoutout? – empyrical
\nA: BlueJeans was a tremendous partner and early adopter, and even though they only originally targeted WPF, they always tried to ensure their contributions moved the needle for both UWP and WPF.
\nWe've also received some great issues and feedback from teams at Axsy, apparel21, and I'm sure a number of other companies and individual contributors that I'm forgetting (and I'm so sorry 🙂).
\nIn terms of react-native community members that helped us along the way that we'd love to call out: our friends at Facebook have been tremendously supportive, and community members like @grabbou and his work to enable third-party integrations in the CLI (as well as rapidly shipping bug fixes when we needed them) have been invaluable as well.
\n– rozele
\n# Q: Any plans to rebuild Skype for Windows using RNW (instead of Electron)? – shergin
\nA: Don't know the answer to this, sorry.
\n– harinik
\n# Q: Do you think VSCode, or even full VS itself might see some pieces of RNWindows in it in the future? – empyrical
\nA: Unfortunately one of the issues with Atom/Electron is that its hard to mix in native UI. So it would be hard for VSCode to start using RNWindows. I dont know of any current plans for full VS to use RNW, but I can think of some shared experiences that are starting to use RNW which might eventually make it there.
\n– acoates
\n# Q: My Windows app is WPF app and supports Windows 7, and we are using RNW 0.57. Will we be able to upgrade to 0.60 and beyond as RNW is re-written? – godpranay
\nA: We are not investing in the WPF implementation at this time. As @rozele mentioned earlier, the way forward would be to use RNW vNext + XamlIslands for WPF apps. Here is an example of how to do this - https://github.com/microsoft/react-native-windows-samples/tree/master/samples/TodosFeed.
\n– harinik
\n# Q: Is there a feature you would like to see in RN core that might make things easier for RNWindows? – empyrical
\nA: Lean core helps, long term I'd love if we could get more of the RN core code to be in CxxCommon, as shared C++ code rather than having separate code for android, ios and windows (and other platforms). Fabric probably helps with this. I'd like it if more of the instance management stuff could get there too.
\n– acoates
\nWe have several proposals our team members have put up on https://github.com/react-native-community/discussions-and-proposals for features we've brought to React Native Windows that we think would make sense to bring to RN core including around accessibility, keyboarding, light/dark theme, etc. Our intention is to work with the community to bring our knowledge/expertise to RN core and make it better for everyone.
\nFor examples see https://github.com/react-native-community/discussions-and-proposals/pull/146 and https://github.com/microsoft/react-native-windows-specs/blob/harinikmsft-keyboardapis/proposals/0000-keyboard-apis.md.
\n– pag3
\n# Q: Hey guys will we have any native file system API? – Reacted Boy
\nA: There is a popular community module for fs (https://github.com/itinance/react-native-fs) and also an Expo module (https://docs.expo.io/versions/latest/sdk/filesystem/). We would love to have these supported for Windows as well. May not be able to get to everything ourselves, would love the community's help!
\n– harinik
\n# Q: What are the best RNW example apps to take a look at? – humarkx
\nA: Check out https://github.com/microsoft/react-native-windows-samples!
\n– rozele
\n# Q: Is React Native coming on Windows 10 also? Didn't know. – Reacted Boy
\nA: 😃 Now you know!
\n– harinik
\n# Q: What's the security model like? As in, can JavaScript dependencies be run in some sort of hardened context so that a third party dependency could not overwrite things like String.prototype? Are there any restrictions on the JS context (the thread that runs v8 or whatever) so that it can't access private native or managed APIs (such as spawning a process or writing to an arbitrary file...)? – dustinsoftware
\nA: The JS code can generally only call APIs that are exposed through native modules. The native modules run as part of your apps process, so generally the security model is the same as any other app. Third party JS code runs in the same JS engine instance as the rest of your code, so in that respect its trusted as much as the rest of your app. -- Which is generally the case with any OSS / 3rd party code you use in an app. -- This the same as RN on Android and iOS.
\n– acoates
\n# Q: What technology is used for Microsoft Teams implementation? – godpranay
\nA: Teams uses several technologies including React Native in some scenarios.
\n– harinik
\n# Q: So can all of the React Native apps be converted into Windows 10 apps? – Reacted Boy
\nA: It depends - if you're using a lot of third-party modules with platform-specific code, then you might need to do a bit of work to get things up and running on Windows 10. If you're mostly just using lean core modules, you shouldn't have any problems!
\n– rozele
\n# Q: Does React Native for Windows only let you reach desktop computers? What about Xbox and HoloLens? – EliWhite
\nA: Really good question. Since React Native for Windows layers on top of UWP/WinUI it actually lets you reach not just Windows PCs but also XBox, HoloLens, Surface Hubs, the (newly announced) Surface Neo etc. Since the native platform has built in support for using things like game controller (on Xbox) and gaze (on HoloLens) and so forth, you get those behaviors and capabilities for free using React Native for Windows.
\n– pag3
\n# Q: This is so cool. Is there even a platform where you can't use React Native now after this? – KremBanan
\nA: There is a Mac and a Linux version as well 😉. Anywhere you can run JS, you should be able to run RN.
\n– harinik
\n# Q: Are there any apps made which we can test? – Reacted Boy
\nA: We have published a couple of samples here - https://github.com/microsoft/react-native-windows-samples/tree/master/samples with more to come.
\n– harinik
\n# Q: How do you guys at Microsoft handle performance? Is there any kind of specific steps you do? – KnivesQ
\nA: That's a big question. Much of the answer is going to be similar to RN on other platforms. there was a good talk by Ram at chain react for some basic steps. On the platform we are looking at how to make the primitive components as fast as possible, as well as working with the Hermes team to optimize Hermes for windows. We also have the advantage of the fact that the primary team owning RNW also owns the native UI platform, so we are looking at what changes can be made in the native UI platform to make RNW even faster.
\n– acoates
","frontmatter":{"date":"2019-10-17T00:00:00.000Z","dateGroup":"October 2019","dateString":"Thursday October 17th, 2019","description":"Eric, Harini, and Paul are engineers @ Microsoft. They will be on to discuss their work on React Native for Windows\n","location":"Q&A Channel Reactiflux","people":"@EricRozell & @Harini_Kannan & @pag3rd\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Microsoft React Native Windows Team"}}},{"name":"frank-von-hoven_gant-laborde","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How do you upgrade RN app to new versions? – acreddy
\nA: I can speak on how I do upgrades. A big part for me is reading changelogs between where I am and where I need to be. Lots of clients come in and every so often their upgrade story crosses a MAJOR casm. I've found the FB team to be excellent at changelogs on GitHub and with a little research I do what I can. But I always OVER DEDICATE time to upgrades with React Native. It's cutting edge, so that means you slow down.
\n– GantMan
\n# Q: What are your favorite react native libraries? – HopesFlyHigh
\nA: I don't have any in particular off the top of my head that I can think of, but if you subscribe to the React Native Newsletter at reactnativenewsletter.com you can get updated with some cool libs that I come across, I'm the Editor of that newsletter, and I'm thinking of adding a quick video with \"Frank's Picks\" to it as a quickly digestible update for RN devs.
\n– fvonhoven
\n# Q: When planning a conference, how do you decide what the talks at the conference should be about? Or just nothing off the table? – Sharkfac3
\nA: For our Chain React conference, I was only in the blind round of the submission review, but I try to select talks that were specific to React Native, some submissions just happened to use React Native for the app and their talk was about something else.
\n– fvonhoven
\nSo when planning a conf, we have to go through first - Making sure we're approachable by a diverse crowd. Then we do blind scoring. It's important to do blind scoring to make sure you're getting quality for the people paying to see your conference. Once you're in the final stages, it's good to take the last round and make a well balanced conference experience. That means beginner/advanced, topic coverage, and opening/closing.
\n– fvonhoven
\n# Q: What do you use along with React and React native? – JustEscaped
\nA: Generally we try to get everything into JavaScript. We use Reactotron (which is amazing) to help us in the dev experience. We use crash software that has a JS connection, and if we ever dip into native, we always try to wrap that native code in a friendly JS way so we can keep the project maintainable. Big wins are Reactotron, BugSnag, and amazing community driven libraries. Like testing in Detox etc Sometimes... we have to leave JS... like to use Appium... which hurts a lot.
\n– GantMan
\nReactotron https://github.com/infinitered/reactotron.
\n– fvonhoven
\n# Q: Sorry for this boring question but how do you see the future of flutter? – Alireza Ghamkhar
\nA: Flutter is something I'm very interested in.. but at the same time it has NOT won me over. Google is fantastic at developer centric marketing. But Google can't seem to keep things straight. They use dart/go/javascript/angular it's all over the place. In my opinion, Flutter has a LOT of real growing up to do before I can feel it's safe from the Google insta-death that they love to do to their popular projects. I'm stearing clear of flutter but keeping an eye on it to see if it ever levels up.
\n– GantMan
\n# Q: We're building an app which requires live data and noticing that the battery usage is quite high compared to apps which fetch data based on a user interaction. What's the recommended way of optimizing for battery usage when constantly fetching data? We've tried websockets to the same effect. – paulxuca
\nA: Constantly fetching data apps are battery burners. If I were in your shoes, I'd do 4 or 5 MVPs on devices and find which works best. Sounds like websockets failed for you, but there has to be some states where you can drop down into polling with an exponential backoff. We worked on a project that had 3 APIs once, where 1 of them was polled, but the other two were socket driven, and this was to help performance.... it might work for you, too.
\n– GantMan
\n# Q: What is the recommended way of preventing extra re-renders when using context api. (I am using hooks!) – gamingumar
\nA: Just off the top of my head you'll probably want to look into the useEffect hook https://reactjs.org/docs/hooks-effect.html.
– fvonhoven
\n# Q: What is the best way to create a splash screen in a react-native app? – HopesFlyHigh
\nA: I like doing it in Xcode or Android Studio, for iOS I've used: https://medium.com/@kelleyannerose/react-native-ios-splash-screen-in-xcode-bd53b84430ec which prob needs updating, but it's a good ref.
\n– fvonhoven
\n# Q: How could you overcome flatlist's poor performance? – Doko
\nA: I've struggled with this, because ListView used to give you a peek into data management, and somewhat gave you a better ability to manage memory. FlatList is significantly easier and simpler to implement, but I feel it has some strange gotchas. For me, I've found initialNumToRender and legacyImplementation tend to be key props in tuning performance. Beyond that, you can always switch libs, chop up data, and dive into native.
– GantMan
\n# Q: What factors do you consider for accepting a post to be added in react native newsletter? – Alireza Ghamkhar
\nA: Great question! Mostly if it's a well written and React Native focused article, it's a good contender... if you have a great photo with it and save me time having to hunt one down then ➕ 😉.
\n– fvonhoven
\n# Q: How do you handle form validation in your react/react/native apps? – HopesFlyHigh
\nA: We use custom logic mixed with: https://validatejs.org/.
\n– fvonhoven
\nForms are a simple term for a complex concept. Sometimes validation is server side, and sometimes client. and sometimes simple, and sometimes complex state. To be honest, we engineer each solution depending on the task at hand. Our normal MO is to use what's out there if we can, and otherwise, write our own. It's a simple problem with a thousand custom solutions... I wish I could wrap it all up, but that's never proven to work. The best is our ValidateJS code... but Frank can speak more to that.
\n– GantMan
\n# Q: I am using reactotron with react native, Async Storage operations doesn't automatically show up – gamingumar
\nA: Are you configured correctly like the docs ask you? https://github.com/infinitered/reactotron/blob/master/docs/plugin-async-storage.md If you ignite a project, can you see async storage? This might be a setup in your project. If not please create a small project and file a ticket!
\n– GantMan
\nin your Reactotron-Config.js
\nReactotronConfig = {\n clearOnLoad: true,\n host: 'localhost',\n useAsyncStorage: true,\n state: {\n initial: true,\n snapshots: false,\n },\n};\n– fvonhoven
\n# Q: In the projects where you have Stripe or Braintree payments, did you have any difficulty changing your code to be according with the SCA? – LMestre14
\nA: I don't think we've had any issues with SCA. Payments are always more complex that expected, but our team generally gets a godo amount of time to break the problems down. We've even done crypto in apps. It's about respecting the difficulty of the process. I can't say that anyone has ever hit wall that they haven't beaten in payments.
\n– GantMan
\nI haven't personally worked on a project with that technology...yet 🙁.
\n– fvonhoven
\n# Q: Does ignite prefer Mobx over Redux? Why? And what about Context? – gamingumar
\nA: There are 2 current boilerplates for Ignite - Andross(Redux) & Bowser(Mobx) -- Context will more than likely be in the next iteration of the Ignite Boilerplate - codenamed: CyberDemon.
\n– fvonhoven
\nJamon is giving a talk at React Native EU about how we're using MobX-State-Tree (not MobX) over redux and why. I believe we'll continue to lean more and more on Context as it grows in performance, and leave a few things to MobXStateTree - BUT... there's a nice MobX-State-Tree + GraphQL connection we have a talk coming up in Florida soon.
\n– GantMan
\n# Q: I've been trying to contribute to open source but no able to can you please give some tips on how to get started – mkamranhamid
\nA: Update people's readme's with DocToc... https://github.com/thlorenz/doctoc it's quick and easy... i'm working on a blog post that gives guidance for creating a good readme for your libraries, some pointers that help a lib to stand out and get noticed by people, like me, who publish a newsletter 😉.
\n– fvonhoven
\nI'd be VERY happy to help you get started. We have lots of tickets and items and we'd help you get started. A second thing, is you should definitely join Hacktoberfest next month! Get a free shirt, and get help getting directed to thousands of open source projects! https://hacktoberfest.digitalocean.com/
\n– GantMan
\n# Q: @fvonhoven thanks for your answer, where can we request you to add the post? – Alireza Ghamkhar
\nA: https://docs.google.com/forms/d/e/1FAIpQLSeEZCF6-cNoPBrw8-FkAD2r6Gslr5b2pykKRn5-lMLDlt6Xiw/viewform
\n– fvonhoven
\n# Q: Do you have any near plan for apollo in reactotron just like redux? – Alireza Ghamkhar
\nA: Unfortunately, I don't think at this time, none of our clients have used or requested it as of yet.
\n– fvonhoven
\nI think it's only a matter of time.
\n– GantMan
\n# Q: Are there any react native organizations that I can apply for gsoc 2020? I know that the org list is not yet released, but if you could tell me a reputed org which has been coming in recent years, or ones which are new, I would love to apply for them. TIA – secc_mama
\nA: Don't know on this one. Google Summer of Code is a cool initiative, but I rarely hear anything about it or the orgs.
\n– GantMan
\n# Q: Are there certain guidelines to follow when developing a react native app? Like guidelines from apple on human interface? – HopesFlyHigh
\nA: Those should be followed, especially if you're developing for iOS... when you dev for iPhone using Xcode, I think they sort of guide you in the right direction by default, but we don't have that in RN, so those should be paid particular attention, especially if you want your app in the App Store.
\n– fvonhoven
\nI think the guidelines are getting less and less useful, and people don't like me saying it. Look at the best apps, do they look like \"iPhone\" apps? or do they look like \"Google Material Design\" apps? No.
\nI think having a good design department means you get a brand that fits your application, and React Native empowers you to utilize that.
\n– GantMan
\n# Q: I've been always wondering how you will hire new developers. I haven't seen anywhere you request for one. when do you decide to add someone and how? – Alireza Ghamkhar
\nA: For hiring at Infinite Red - If you're a contractor/consultant and you're looking for work. Message our CEO todd@infinite.red and also message him in our community slack community.infinite.red - We do a lot of vetting. We currently only hire USA timezones, too. After working with us for a while, people become core members. That means they become W2 or similar. We are actively working on junior dev pipeline, it's not ready yet. For now we hire excellent experienced devs.
\n– GantMan
\n# Q: Do you offer native ios and android development for clients? If so, in what scenarios would you do native vs react native? – cmcaboy
\nA: We do, but most of our clients tend to come to us because of React Native, and it's an efficient way to develop on iOS and Android simultaneously.
\n– fvonhoven
\nYes. We almost always push to React Native. Because we can do native and wrap it in React Native, so it's maintainable. It's a lot nicer to touch JS and RN for cross platform, and just wrap the ugly parts in JS so it all plays nicely.
\n– GantMan
\n# Q: As React Native developers, is there any appeal to progressive web apps? – Sharkfac3
\nA: I think so. We're all about the merging of web and mobile. I think as long as a lifespan of something is small or hackathon, a PWA is perfect. PWA's hit a ceiling though, so if you think it's got wings, you should either start RN or plan a rewrite. PWA's def have their place and they are useful.
\n– GantMan
\n# Q: What CI/CD platform do you use at Infinite Red? – cmcaboy
\nA:
\n– We have tried them ALL! Right now @jamonholmgren has been adding some cool new stuff from GitHub. But it really depends on the project. For instance, do you need to support windows? Do you need to support on-device testing? Are we using a beta process? I can recommend a lot depending on the project. I think CI/CD is custom per project goals.
\n# Q: What do you think of NextJs? – HopesFlyHigh
\nA: Haven't used it but looks interesting... hmmm, weekend project 😉.
\n– fvonhoven
\n# Q: Which is the best backend for a ReactJS application? – Juubi
\nA: We use Elixir Phoenix a bit here at IR. There's a long line of awesome backends out there, but few have had the performance credit that Phoenix has (20x faster than Rails). Personally, I'm very attracted to AWS services like Amplify and Firebase. Giving up control for time.
\n– GantMan
\n# Q: How often do you get to choose the backends on your projects? When choosing your own, what do you prefer? node/graphql? node/rest? php/rest? Thank you for answering our questions! – cmcaboy
\nA: Lol, usually never for me... a lot of our clients already have a web app and want to add a mobile app, we wind up making their backend (which was written for web) work with the mobile app, which IMO and experience can be problematic... ideally your backend should return data configured for the mobile user... we tend to work with majority rest backends.
\n– fvonhoven
\nWe generally don't get to choose backends. Lots and lots of people show up with a backend in hand. I'd choose AWS, but that's a very personal decision.
\n– GantMan
\n# Q: React native docs for animation sucks. How do you do animation in RN apps? – acreddy
\nA: I've used the React Native Animated API, but one that we like that's pretty easy to integrate is React Native Animatable: https://github.com/oblador/react-native-animatable.
\n– fvonhoven
\nJason Brown has an AMAZING animation course, I highly recommend. His website is https://codedaily.io/.
\n– GantMan
\n# Q: What do you use to communicate with the server? Do you use fetch, xmlhttprequest, or do you use a library like Axios for example? – LMestre14
\nA: Ahhh, we use an Axios wrapper library written by one of our senior devs called ApiSauce https://github.com/infinitered/apisauce.
\n– fvonhoven
\nWe have a library that wraps Axios. This is one of my favs for dealing with server commands: https://github.com/infinitered/apisauce.
\n– GantMan
\n# Q: Maybe not the right question for this q/a so feel free to skip it if you think it does not belong here. Could you tell us something about recruitment process at your company? I still see quite a few job applications (both for frontend and backend) which require you to pass some kind of algorithm questions. In the 3 years that I have worked professionally I do not think that I once used any of them and neither did most of the people I know. Yet those questions are still prevalent, even on some strictly frontend oriented jobs. – Tokiko
\nA: I can tell you we're not a rigid company, but we also expect you to bring your whole self to work. Check this podcast to get a deeper intuition on what we look for and what we care about: https://building.infinite.red/.
\n– GantMan
\n# Q: Are there any sort of apps that make sense to develop natively, instead of using React Native? (I want to make a geolocation app, and was told I should absolutely make this native instead of using something like React Native) – jakepaulies
\nA: This is going to sound silly and cliche but, honestly, whatever you most comfortable working in... I've used navigation in a RN app before and it works, it's a pain, but I think that's the nature of working with navigation, I know Uber Eats is written in RN, so if they can make it work I think it's prob pretty good (idk if the navigation element of that app is native tho 🤷♀️).
\n– fvonhoven
\n# Q: I think I asked my question bad that there were no answer for it so I ask it differently. how do you accept a react native developer to your team. What characteristics & abilities etc usually that person should have? – Alireza Ghamkhar
\nA: Usually by becoming a contractor initially, we can usually tell if people are a good fit culturally and technically from that, fun fact: I started out as an apprentice at Infinite Red back in the day, but we don't do that anymore, but we may have some kind of program like that in the future, definitely ping Todd Werth in community.infinite.red.
\n– fvonhoven
\n# Q: With Mobx state tree, do you ever run into performance problems? In such scenarios, do you remove persistence or move any content to volatile state? – cmcaboy
\nA: I haven't seen any performance probs directly related to MST, usually you can wind up with circular references to models and stores, and that can be a pain, and it's a prob that we deal with and are working on a solution, but I haven't seen any lagging because of MST.
\n– fvonhoven
\n# Q: For navigation purposes in a RN app, what navigation component have you used (React-Navigation or React-Native-Navigation)? And if you used both, were there any pros and cons on which to use depending on the project? – LMestre14
\nA: Ah yes, the old \"chicken or the egg\" question... we use react-navigation in all of our projects now, we've used others during the \"Great Navigation Wars of 2015-2017\", both API's a similar, although I haven't used RN navigation in some time.
\n– fvonhoven
\n# Q: Do you use Saga, Redux Saga or async await? – gamingumar
\nA: We use async await, but (thanks for catching this Jamon) We use MST flows with generator functions more to your point. We did use Redux Sagas when we did Redux.
\n– GantMan
\n# Q: Thank you for answering questions. how do you manage state in RN? Do you usually use any other tools like Redux to manage states? if so, how often do you use them in developemnt? – Utiliy
\nA: We use mobx-state-tree in development.
\n– fvonhoven
\nWe use MobX-State-Tree. Definitely watch Jamon's talk at React Native EU. I'm going to mess this up, but \"Solving the great state debate with MST\" or something like that. It's going to be the best answer by far to this question.
\n– GantMan
\n# Q: I believe SAGA provide this ability to cancel an async request, let say if I move to other screen. How it can be done with async await? or any other approach? – gamingumar
\nA: I particularly found this article useful when working with async/awaits: ;) https://dev.to/chromiumdev/cancellable-async-functions-in-javascript-5gp7.
\n– fvonhoven
","frontmatter":{"date":"2019-09-05T00:00:00.000Z","dateGroup":"September 2019","dateString":"Thursday September 5th, 2019","description":"Frank is a Senior Software Engineer at Infinite Red, Organizer at Chain React Conference, and Editor-in-Chief of The React Native Newsletter. Gant is CTS of Infinite Red, Organizer @ChainReactConf, Open Sourcerer (Ignite, Reactotron, etc).\n","location":"Q&A Channel Reactiflux","people":"@infinite_frank & @GantLaborde\n","recording":null,"time":"1-2pm PT / 8-9pm GMT","title":"Frank von Hoven & Gant Laborde"}}},{"name":"react-rally-2019","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2019-08-22T00:00:00.000Z","dateGroup":"August 2019","dateString":"Thursday August 22nd, 2019","description":"React Rally is a two day single track conference for developers of all backgrounds using Facebook's React.js, React Native, and related tools. Speakers will cover topics such as React Native, Flux, ES6, isomorphic universal JavaScript, and so much more. Whether you're a seasoned developer who has been using React since before it was cool, or a newcomer to the scene, React Rally has something for everyone!\n","location":"Salt Lake City, UT","people":null,"recording":null,"time":null,"title":"React Rally"}}},{"name":"bob-scarano_craig-blagg","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Hey, if you have a deeply nested object in state which represents a folder hierarchy, and you need to create a file explorer GUI. How would you approach this and how would you manage state in that case? – HopesFlyHigh
\nA: For the file explorer GUI, we would typically separate out entities from the object that represents the shape of nesting.
\n– cblagg
\n# Q: Squarespace === non discriminatory company to work for? I’ve seen things in the news about this – pixelcure
\nA: We believe very strongly in diversity and have a very wide breadth of people who collaborate here. We have a dedicated D&I team that spends a lot of time coaching and teaching and creating a safe, open environment so we can have a wide variety of opinions.
\n– bobscarano
\n# Q: Which other technologies do you use alongside React and which do you plan on using in the future? – JustEscaped
\nA: Technologies we use alongside React, we also have legacy codebase in our frontend that is built on YUI, that pre-dates React.
\nWe don’t actively write any additional YUI, and migrate off of it as we can. Avoiding a large rewrite in one go.
\n– cblagg
\nOur apps are really very \"super hybrid\" meaning that we have native, combined with react-native, combined with webapps, that all intercommunicate. We feel this stack has enabled us to do what we want when we want it without feeling like we have to go \"all-in\" in any particular technology while leveraging tons of code re-use across platforms
\n– bobscarano
\n# Q: Hi guys! I’m curious about the process you go through at a large established company for deciding to use React Native, which is in such an active development state. Was it a hard sell? Were there any interesting tradeoffs you weren’t expecting to have to overcome when the idea first came up? – Sylnir
\nA: It was definitely a hard sell on the mobile team because there are a spectrum of emotions about JS among native mobile devs. We were able to focus on specific use cases where we could say to ourselves, \"does it provide some definite re-use and lift for choosing this technology.\" Also, we were looking to share tons of code between existing web-app and with ios/android so that we could move fast. I’ve noticed that many of those were at first nervous about trying RN are now choosing RN first for some features. We’ve seen a huge boost in productivity and code-sharing that we’ve not been able to realize before.
\n– bobscarano
\n# Q: How can I deal with bulk of images loading and caching in React Native, what is the best approach? – Krish
\nA: With loading a bulk of images, the focus we would have there is primarily on limiting data over the wire. We would look at this in 2 ways primarily, firstly ensuring images are cached locally across sessions (and then flushing following long durations of non-access), and using virtualized lists to not render images that are in cells out of view.
\n– cblagg
\n# Q: What is the most frequent obstacle you come across in RN side of things? – Rintsi
\nA: So there’s a few answers to this. One was that we didn’t want to write everything multiple times, once for mobile, ios, then android. We needed to find a way of developing components that shared a large amount of business logic so we could move fast but without compromising on the platform. Our solution is something highlighted in the chain-React talk, which was to organize our code in a way that allowed for re-use of business logic across platforms while still allowing you to use CSS on web or StyleSheets on RN. The other was generally crossing the native/RN boundary. We’ve built some toolkits that ease with some of this so we don’t have to write so much boilerplate to do so. And if you’ve read any of my tweets, I’ve also been playing with some mad scientist experiments so you can write native-modules completely in JS.
\n– bobscarano
\n# Q: What is the most challenging thing right now in front end development? – HopesFlyHigh
\nA: On the design systems team here at Squarespace, a number of challenges we often face are: (1) level of offering of flexibility of component systems, with consistency across the product (balancing theming solutions, render props, or encapsulated appearance and logic), (2) delivering our component library, and major version increments to it across a multitude of different repos with layered dependency/peerDependencies, and getting the correct sequencing in doing so.
\n– cblagg
\n# Q: Hey! Hope you’re doing well! :smiley: With the addition of React Hooks within functional components recently, what factors do you take into consideration when choosing between a functional component vs. class component? Do you always start with a functional component? What is your process in this regard? – mostlymat
\nA: Typically will always start with a functional component (even prior to hooks)—for ease of testing—really considering where statefulness and/or lifecycle needs to be added—often higher up the hierarchy.
\n– cblagg
\n# Q: Is that okay to learn React and JS related libraries even companies are focused on PHP? – SirHesham
\nA: I think it’s a fantastic investment of your effort to go deep on JS. It’s only getting more popular and more prevalent, at least for front end development. If you’re talking about back-end, it’s kind of a mix. We here use Java for our server backend primarily but there’s no shortage of nodejs servers in the world!
\n– bobscarano
\n# Q: What makes React Native better than Flutter? – Tee
\nA: For us it was an easy decision because we have a lot of people who already know JS and React. We are able to leverage this expertise to build things faster, but to also share code between web and mobile. And that’s really the big advantage for us. Expertise and re-use. We are seeing something along the lines of 70% reuse between web and mobile without compromise on experience for the user and for developers being able to use tools they are familiar with. Also there’s something to be said about the maturity of RN.
\n– bobscarano
\n# Q: Have you come across any RN packages/tools that helped improve performance/experience? – whiz4rd
\nA: We use many of the common packages and tools that are in the ecosystem. The likes of Redux for our stores, memoize-one is a library we’ve used for a while for expensive operations, we’ve contributed some PRs back to react-native-wkwebview-reborn which we use for our webviews (generally and also in things like our native RichText input).
– cblagg
\n# Q: What are the libraries you use in your React Native app? – HopesFlyHigh
\nA: I love react-native-restart it was so handy when we caught exceptions and react-native-exception-handler along those same lines. react-native-fast-image is fantastic for image caching, and react-native-gesture-handler is fantastic for gesture handling. these are just a few examples but those jump to mind immediately.
– bobscarano
\n# Q: In regards to state management. What are you highest priorities when dealing with state? – mostlymat
\nA: One of our highest priorities was dealing with state when using native navigation. We had rolled our own navigation, we had tried other navigation libs, and wound up going back to writing one that is a variant of how Dialogs work in RN so that we can have a single state. So TLDR one of our biggest challenges was maintaining state across native + React.
\n– bobscarano
\n# Q: What are your processes in regards to technical writing/documentation? – mostlymat
\nA: Engineers on my time write a good volume of documentation as we create components and libraries. We use React-docgen for extracting prop docs across our components, use React-live in our documentation of components, and also additionally have a dedicated technical writer on my team—who is continually pushing us forward along with standardizing the documentation that is written.
\n– cblagg
\n# Q: What is the average timeline for having a feature sketched on a napkin to implementing it in production? – tank
\nIt’s actually pretty fast, mostly because design, engineering, and product all work very closely together. Also, because we have a design system and DSLs that help us build things like forms, we don’t spend a lot of time thinking about exotic UIs because we kind of understand what our capabilities are.
\n– bobscarano
\n# Q: How do you handle forms and their validation in React and React Native? – HopesFlyHigh
\nA: We have an internal form library that renders to web, and then iOS and Android (via React Native). It is backed by our internal component library (that has ~100 components with normalized APIs across each platform) for rendering inputs and fields. The library accepts a config object for describing the form and data mappings, which are also then used to validate the data against a corresponding JsonSchema for each form.
\n– cblagg
\n# Q: Which navigation library are you using and why? – levani
\nA: We rolled our own. the main reason was that we needed to be able to mix native views with react-native views and we needed to be able to maintain a single state across all of the views in the navstack. what we wanted to do was to use the history-stack as what we store into state and when that changes, we re-render. this allowed us ton of flexibility to \"go native when we want to\" and also to build navigation using more React-patterns but still use actual native navigation-controllers. It is based on the way that dialogs work—which is a way of rendering a view into a different portal.
\n– bobscarano
\n# Q: For select and multi-select input fields in React/React Native, do you use a library (React-select), roll your own, or use the native browser/device UI? – cmcaboy
\nA: We rolled our own for this.
\n– cblagg
\n# Q: Can I integrate a react-native app with a websockets webapp? – elmawardy
\nA: I believe to do so you’ll need to use native as the broker between the 2 domains. We have a similar thing where we have a very robust webapp that intercommunicates with react-native and have built interfaces between all the domains to do so. If you are doing the same I very much recommend to build your interfaces as an async/promise-based protocol.
\n– bobscarano
\n# Q: What’s your take on micro-frontends? The industry seems slightly divided on the idea. Have you considered/tried it out? – deadlock
\nA: I think micro-frontends are a response to issues medium/large companies may have around the duration of delivering product, and the autonomy of separate teams to do so. Personally, I think there are a lot of opportunities for micro-frontends to be dangerous to overall user and application experience. The possibility of very quickly delivering large amounts more code than one would through a unified build pipeline, the potential for side-effects or pollution of namespaces colliding (whether in your code, or libraries that may exist in your project), stale data across a view in your application where 2 \"micro frontends\" edit data in session without having shared stores—or convoluted sharing of data across applications.
\n– cblagg
\n# Q: What do you think of hooks?? Do you prefer classes? – HopesFlyHigh
\nA: I think hooks are the prescribed path forward from the React team, who have discussed the benefits of them, and I typically don’t try and fight the tide. The benefits and possibilities of composing business logic however, are very appealing.
\n– cblagg
\n# Q: What DevOps pipeline tools are you using? And what kind of threat mitigation methods have you implemented? – Rintsi
\nA: For our Javascript libraries, we use Drone for CI. Docker based, it gives teams flexibility to configure their own pipeline, dependencies and tasks as needed. We have testing baked into our build pipeline for libraries on this. And continually publish to our internal npm on each merge to master—much in the way product is continually delivered
\n– cblagg
\n# Q: I work on a Squarespace website from time to time, and as a developer I can’t stand it because it prevents me from sometimes executing on business tasks/requirements. For instance, there is no way to customize the checkout page. What are you thoughts/feelings about the limitations Squarespace puts on developers? – Sean22
\nA: Some things are certainly more customizable than others. I think for the most part our users are the DIY type who prefer that everything is integrated without having to pull lots of external software. That said, I’m happy to send your request for better customization of the checkout form to our Commerce team. They’re always super interested in user experience and making people happy!
\n– bobscarano
\n# Q: Do you use Redux? Why? – tie87
\nA: Even though there is frequently discussion in the industry around how ContextAPI may make Redux redundant. We do use Redux, the tooling that is built around Redux to form an ecosystem is highly valuable—to developer experience through redux-devtools, along with easily extended for the likes of history stacks.
\n– cblagg
\n# Q: What testing framework and setup you guys use? – Aman
\nA: Jest, Cypress, and some home-built snapshot testing. Also for hybrid apps, we use EarlGray and serialize the entire UI from native down to react-native and webapps for snapshot testing.
\n– bobscarano
\n# Q: I’m starting with React Native and there are lots of things to take in. What suggestions do you have about what path to follow? – ashish_feels
\nA: First I should say the documentation for RN is amazing. I would spend the time to read it top to bottom just to familiarize yourself with what’s even available. Then, I’d give yourself a project that you intend to ship. That, and read tons of other peoples’ code. At least for me, that’s the best way to learn!
\n– bobscarano
\n# Q: Do y’all have any favorite JS libraries that y’all make frequent use of? – chasethat
\nA: We listed some of the React Native specific ones we use further up the thread (some from both Bob and I). We are also users of common libraries such as lodash for utilities, while having a lot of our own internal utility libraries for various things such as DOM interaction to color conversions and selection.
\n– cblagg
\n# Q: Can you explain your home build snapshot testing? I’d be interested in learning more about how to build something like that. I currently use backstopJS but would find it interesting to learn how to build snapshot testing myself. – Sean22
\nA: We have a hybrid app, so we want to be able to snapshot test everything from native on down. What we do is serialize the UI into JSON that captures the view-hierarchy from native, serializes the contents of the DOM for webapps, and serializes the react-native UI. We write that all out to JS and strip out some of the more dynamic attributes (specially in the webapp) and use that for comparison. We are using more \"greybox\" testing for that than \"blackbox\" simply because it allows us to setup preconditions more easily.
\n– bobscarano
\n# Q: Would you recommend building an app through React Native doc or through some course being pretty new to RN? – Tee
\nIt all depends on how you learn. everybody is different. I’m the type of person who learns by reading other peoples’ code and by doing. I’d start with a project and try to ship it. I simply cannot learn by videos or online courses—I have to do. But maybe you’re different and that works for you.
\n– bobscarano
\n# Q: It’s more of an opinion but still I wanna know from you guys, As a new graduate for a job if I have to choose between a role for React web and React Native, what do you think I should choose (considering the future growth) in your opinion and why? – Aman
\nA: I would not be one to speculate on a specific technology and effecting/selecting a career path based upon it. The industry is continually moving, and will continue to do so, I would recommend focusing your time on learning and understanding patterns and architecture design fundamentals, that continue to be transferrable as technology choices evolve.
\n– cblagg
\nI would add to craig’s answer by saying it’s best to \"learn how to learn and adapt\" as technologies come and go but being a curious person can last a lifetime!
\n– bobscarano
\n# Q: Would you consider using flutter in future and where do you see it in future as compared to RN? – Aman
\nA: The answer is similar to a previous question. We’ve got tons of talented JS developers under this roof. making the leap from web/React to RN is one we’ve seen many people be successful in. For that reason, and the reason of being able to share code between web and mobile, we really think JS and RN are the way to go.
\n– bobscarano
\n# Q: Is it a good idea to have importing components/ librarires for stuffs like animations and other things. does this makes the app heavy ? So how do you maintain the size of the app what you use in your development process to keep a check on appsize? – ashish_feels
\nA: In our internal libraries and applications we use a number of mechanisms for measuring overall library sizes, typically similar to webpack-bundle-analyzer and reporting bundle sizes on each build to our internal graphing service, to measure trends. Some of our libraries also maintain the output of this in the repo, so it’s visible in PRs as to how the specific change effects payload sizes.
\n– cblagg
","frontmatter":{"date":"2019-08-15T00:00:00.000Z","dateGroup":"August 2019","dateString":"Thursday August 15th, 2019","description":"Bob is the team lead of the Mobile Content-Editing team at Squarespace. Craig is the team lead of the Design Platform team.\n","location":"Q&A Channel Reactiflux","people":"@scarano & @iwillreply\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Bob Scarano & Craig Blagg"}}},{"name":"react-native-team-3","relativeDirectory":"","childMarkdownRemark":{"html":"Hi everyone! Thanks for having us back. We are so happy to be here! There are lots of things to talk about today!
\n-We recently open sourced a new JavaScript engine optimized for React Native on Android\n-Ram gave an amazing talk on the performance lessons we’ve learned:\n-0.60 supports auto linking native modules:\n-A new hot reload experience called Fast Refresh will be coming soon: https://twitter.com/dan_abramov/status/1144630845103362048\n-We recently shipped a redesign to the documentation and we are working to improve the documentation and guides to be more helpful\n-And so much more!
\nWe’d love to talk about these things, and we want to hear what you’d like to know about. Let’s get started!!
\n— EliWhite
\n# Q: Do you agree about ComponentWillMount() being deprecated in ReactJS? And will React Native show a warning about it at some point? – edo
\nA: React Native shows the same warnings as React, so on the next version of RN that includes that version of React, you'll be able to see that warning and improve your code the same as you can with React DOM.
\n– EliWhite
\n# Q: Hey! I have a question regarding the animated module, will there ever will be native driver support for layout properties? – Xam
\nA: This is something we are investigating for Fabric but not sure yet if we can commit to this working yet. We definitely need to have some way to animate layout properties though and won't be removing functionality that currently exists.
\n– EliWhite
\n# Q: Would you recommend using Hermes right away on Android? Or is there any gotchas to be aware of? – fiznool
\nA: Yes, we recommend trying it out on your app, and feel free to file an issue if you encounter a specific problem.
\n– fkgozali
\n# Q: Do you feel like you've fallen over yourself with releasing 0.60 as stable? – Kim
\nA: I'm not sure what you mean by this, can you elaborate. 0.60 is an awesome release with improved upgrade tools, autolinking, and hermes among other things. We are super excited that it shipped!
\n– EliWhite
\n# Q: Do you recommend using React Native Web? – metamarcdw
\nA: We don't have an official stance on this, but we do think that support for web could be done in a much better way. That said, it's a great project and we hired Nicolas (the author), so we must think it's alright 😉.
\n– Zack Argyle
\n# Q: I realise this isn't directly relevant but I've yet to establish a better way to ask - who could I get in touch with about setting up react.js.org ? – v4
\nA: I believe you can email opensource@fb.com for that. Thanks!
\n– EliWhite
\n# Q: When hooks? – metamarcdw
\nA: Now! The version of React that added Hooks is part of the React Native 0.59 release from March 2019.
\n– hector
\nHooks shipped with React Native in 0.59!
\n– EliWhite
\n# Q: I really want to contribute to react native project. but I really don't know from where I can start. Do I have to have the native knowledge first? From where do you suggest? – Alireza Ghamkhar
\nA: We have a new guide for creating your first React Native pull request, check it out and hit us up with any questions you have https://github.com/facebook/react-native/wiki/Pull-Requests#getting-ready-to-submit-your-first-pull-request.
\n– Rick
\n# Q: Hello, what will be the case when componentWillReceiveProps gets deprecated? – ritviz
\nA: As you may know, componentWillReceiveProps will be warned to be renamed to UNSAFE_componentWillReceiveProps starting in the next release. This is so that developers understand that it's not a safe method to use for some features in a future release, but the UNSAFE_ methods will be supported through React 17.
To migrate your repo you can run npx react-codemod rename-unsafe-lifecycles.
– Rick
\n# Q: Will Hermes arrive to the default React Native at some point in the future? (Instead of an optional option like it currently is) – edo
\nA: We see this being the default eventually. We worked to make the opt-in as easy as possible, and we don't have a timeline for when it will get switched over.
\n– Rick
\nHere's a recent comment from Marc about how we're thinking about making Hermes the default: https://github.com/facebook/hermes/issues/79#issuecomment-519309648
\n\"For open source React Native, Hermes is still opt-in. We recognize that it’s a big change, and we want to work with the community to determine if and when it’s right to make Hermes the default. We welcome any issues and PRs around engine inconsistencies. For developers who strongly value compatibility, they will be able to continue using JSC on Android as long as the community keeps maintaining it.\"
\n– janzer
\n# Q: Couple of things. Firstly, is it possible to somehow use Hermes on iOS? Or just some other JS engine. It should be allowed. Secondly, auto-linking is nice and all, but Turbo Modules with lazy loading of modules looks much better, any insight on when will that be available? – Udon Soup
\nA: We're actively testing this in FB production. In fact, RNTester iOS app in github enables this by default. What's left is that we need to migrate some nativemodules in react-native repo to fully enable it. The earliest for full rollout is probably early 2020, but you can already play around with it on iOS today.
\n– fkgozali
\n# Q: React-Native-Interactable a gesture library would you recommend using it to mock screens like map or Instagram slide up message pane? If not what would be the best approach to make such a sliding pane/container for an app? – Heavenly_Entity
\nA: We haven't used it internally at least, so I think it depends on the need for your app. There are multiple ways to implement the sliding pane. E.g. at FB we actually bridge over native implementation of \"bottom sheet\" by exposing tiny JS wrapper for it. This approach works well if you already have other screens built natively that use the same pattern, hence you can achieve UX consistency.
\n– fkgozali
\nFollow-up: Do you have a API reference link?
\n\n– fkgozali
\nimport { useWindowDimensions } from 'react-native';\nwas added in this commit: https://github.com/facebook/react-native/commit/5ec382d1be781ff941316168a0657f163c1d2dac
\n– EliWhite
\n# Q: Any ideas on how to unify Jetpack Compose, SwiftUI and RN? – x0s3
\nA: Are you interested in using all these libraries in the same app, or are you thinking more about the direction of the projects?
\n– janzer
\nFollow up: If are there any ideas in how to compile react-native to them and go full native (JSX to dsl or something like that).
\nAh, I see. I don't think we're thinking about that right now, but we're definitely interested in those projects and will be following along to see the direction they take.
\n– janzer
\n# Q: Will Hermes eventually work on iOS, is it even possible to do that? – Free Elk
\nA: Right now Hermes is only available on Android and we're not sure if or when that will change.
\n– Rick
\n# Q: Does React Native contain support for interactions with the “back to app” button within the StatusBar on iOS? Specifically, I’m trying to execute a function when returning to an app after pressing that button. – Foobarking
\nA: I'm not sure about this specific functionality but it seems like if you can run some native code at this point in native code, then someone in the community should be able to write a module to add support for that to RN. That's one of the beautiful things about React Native!
\n– EliWhite
\n# Q: We all have custom requirements in one or the other way and the new upgrades will always help us achieve it in the best way possible. Considering the way react-native is portrayed in the market currently(\"Less learning curve for a web dev\") - Is react-native's one of the aim to reduce the amount of native modules created? – SanTy
\nA: I don't really see us getting rid of the need to create native modules (like you said, every app has custom requirements), but we do want to make it as easy as possible to build native modules without too steep a learning curve for people without native Android or iOS expertise.
\n– janzer
\n# Q: Foldable phones seem that become a standard in the future. What strategies would you propose for achieving such responsive designs out of the box? – muneneevans
\nA: One of the great things about React Native is that people use Flexbox to write their apps which is responsive by default! That gets apps most of the way there and for really complex situations there are other APIs like Dimension and onLayout.
\n– EliWhite
\n# Q: What would a 1.0 for React Native look like? – axemclion
\nA: We recently talked about this on the panel at Chain React. I'd recommend checking out the answer from there! Here is a link to that part of the panel: https://www.youtube.com/watch?v=Jm19JlVukak&feature=youtu.be&t=1140
\n– EliWhite
\n# Q: Are there updates to React Native docs? Can you share more about it? – axemclion
\nA: Yes! We just revamped the React Native website (see https://twitter.com/reactnative/status/1158320695937556480), and are now focusing on refreshing the whole suite of React Native docs. We'd like to hear what people want to get out of the docs, please tag @reactnative or @rachelnabors / @hectorramos on Twitter with your feedback!
\n– hector
\n# Q: Are you taking any new actions for improving the performance of FlatList (I know the best practices for current one). If yes, can you explain a bit about it? – Alireza Ghamkhar
\nA: We use FlatList for all of our React Native lists internally, including really complicated lists such as the Marketplace feed in the Facebook app. We haven't run into many performance issues with FlatList. I know that this is a common question and it is clear that getting FlatList to work great for people's use cases can be difficult and daunting. It would be really helpful to have small reproducible cases that hit the FlatList performance issues. We would also love to hear recommendations on how we can improve our documentation and APIs to help people fall into the pit of success more often!
\n– EliWhite
\n# Q: Need insight on random react-native run-android command failure. – SanTy
A: Can you tell us more?
\n– hector
\nFollow up: Let's say I'm running my project and had to stop and re-run it. react-native run-android fails the first time and when I run the same command again, it works. Sounds silly but I've not been able to find and answer to this on the internet.
It sounds like you may need to run react-native start. That said, run-android by itself should ideally work the first time, so please do submit an issue to the https://github.com/react-native-community/cli repository after checking if it hasn't been raised there yet.
– hector
\n# Q: Is the RN team allowed to make decisions independent of the React team? – Sandi K - サンディ
\nA: The two teams are actually working pretty closely together, so usually we make sure that React design is compatible across platforms.
\n– fkgozali
\n# Q: Given the uncertainty of Hermes making it to iOS, what kind of performance enhancements can we expect for there if any? – Free Elk
\nA: There are still lots of opportunities to improve performance for RN apps on iOS. Ram talked about some of them in his talk at Chain React: https://www.youtube.com/watch?v=nphKGWjhg2M.
\n– janzer
\n# Q: Given how Expo has evolved, would you recommend it for more complex apps? Are there common requirements an app could have that would immediately rule out Expo? – luis-agm
\nA: I think Expo is actively expanding its capabilities for more use cases, so I would say it would depends on your requirements for what complex apps mean. I'm going to defer to Expo folks though. cc @brentvatne.
\n– fkgozali
\n# Q: ] I think I couldn't make my point in my last question so I'm gonna ask it differently. For those who are interested to have any kind of contribution to the react-native project, are there any starter issues so that they can start contribution. Are all the PRs somehow related to native side or on some of them or is React/JS knowledge enough? – Alireza Ghamkhar
\nA: We have all sorts of issues! You don't need native experience for a great chunk of them. I suggest going through the issues tagged with the \"Help Wanted\" / \"Good first issue\" labels as a good place to get started. You can also help out with the docs by submitting PRs to https://github.com/facebook/react-native-website, no iOS/Android/JavaScript coding required!
\n– hector
\n# Q: Will there ever be a way to sign and test iOS apps on Windows? – efu
\nA: Unfortunately, not something I think we can answer for you.
\n– Zack Argyle
\n# Q: Do you think React Native will die to Flutter? – efu
\nA: We're not worried about it 😉. I'm more curious to see what Jetpack Compose does to Flutter.
\n– Zack Argyle
\n# Q: How are things around fast refresh/hot reloading going? I saw the great video of it in the revamped docs, but am unsure what I have to do to enable it/when it's out? I'm especially looking forward to not needing to restart if I forget an import and red screen! – bondparkerbond
\nA: We are super excited about Fast Refresh. It is an amazing change to the developer experience. We are expecting it to ship in 0.61! Can't wait!!
\n– EliWhite
\n# Q: What possibilities are you the most excited about Fabric opening up? – empyrical
\nA: I think rolling out Fabric to the world is only the first step. What's most exciting is that Fabric enables much more sophisticated capabilities that were previously not possible to achieve with just asynchronous rendering.
\n– fkgozali
\nTo add on to Kevin's answer, I think we're excited about Suspense and concurrent mode, which Fabric is a prerequisite for. I'm also excited for some of the subtle UX issues it'll fix, like the \"jump\" you see when embedding a RN component in a native screen.
\n– janzer
\n# Q: Will there be a code review and fixes for all TODOs in code base. Or is it better to create PRs? – Udon Soup
\nA: It's on our todo list!
\n– hector
\n# Q: How do you think Flutter will effect RN? – SirHesham
\nA: Design-wise, we chat with them and share inspiration. In fact, the React Core team working on their new Flare event system has taken inspiration from many other event systems (Flutter being one of them). https://github.com/facebook/react/issues/15257)
\n– Zack Argyle
\n# Q: Will there soon be media query support for stylesheets w/o having to use a library? Dimensions is what I have to use then make multiple if statements based off the dp with var and pass it into the stylesheet. – Heavenly_Entity
A: We don't have any plan in the short term for media query support. We did land a new API to access Dimensions via hooks though: useDimensions(), it may help with your component styling.
\n– fkgozali
\n# Q: Hello there, amazing work with RN. Is it overwhelming with React and React Native? Do you feel fatigue hearing this a lot all the time? – Brihas
\nA: It's exhilarating! There is so much to do! And so much responsibility to do the right things by all of you.
\n– EliWhite
\n# Q: Adding icons and splash screen to a React Native app is time consuming if you are not using Expo. Any plans on making this easier by default? – gamingumar
\nA: Welcome to the life as an iOS developer! I wonder if we can help out here by improving the base React Native app template provided by the RN CLI. Thoughts?
\n– hector
\nFollow-up: I think there should be a base template like Expo does, that just asks for an icon and background color to generate splash screen. If user wants to customize more they can do it later.
\n# Q: I have a question regarding two things. First, will there be a ready to use navigation system that implements native modules or will the community have to use third party tools in the long run? Second, are there any plans to make integrating packages that are not using Android X simpler? – needforbleed
\nA: We don't have any plans to provide something like this. I'm not as familiar with the Android X question, so I'll leave that for someone else...
\n– janzer
\n# Q: Any recommendations on automated performance testing. We've tried doing this with Appium in our team with little success (timeouts made those test unreliable) and are having a hard time setting up Detox as an alternative. Any tools we might be missing? I assume the RN team uses automated performance regression testing tools of some sort? – Tijs
\nA: Check out @axemclion's talk from Chain React. I believe he talked a bit about how you can wire up performance monitoring from production. This is the technique we use at Facebook. https://www.youtube.com/watch?v=nphKGWjhg2M
\n@axemclion also has a great blog series on this, hopefully he can link to some more resources 😃.
\n– EliWhite
\n# Q: Are there any plans to improve issue triaging on GitHub? I get that the mass of issues can be pretty overwhelming, but it’s not always clear which ones are higher/lower priority for the core team to work on. – Jeremy
\nA: We published a Guide to Contributing to React Native earlier this year. Triaging issues is covered! See https://github.com/facebook/react-native/wiki/Issues#triaging-issues to learn how you can help triage issues. We could use more folks that partake in this process in order to make sure the most pressing issues are seen by the core team.
\n– hector
\n# Q: I am sure you get into the JS engine details while working on React Native, what did you uncover which could benefit everyone else? This could have led to Hermes if I am right. – Brihas
\nA: A few things stood out. We're mainly focused on startup time, as people seem happy with the interactivity of our RN apps. As we started investigating, we learned just how much time is spent doing I/O on android devices. Even a few kb of I/O savings can be observable on older phones. That drove a lot of the design of Hermes. But this lesson can apply to app code, too. Be lazy about loading code and minimize your dependencies. Another lesson is to parallelize network and on-device work, and make your app appear responsive even before you have network data.
\n– React Native core team member
\n# Q: Any recommendations for a local DB in combination with RN for large data sets? – Hantar
\nA: Our team doesn't use many open source libraries for this so we aren't the best people to answer this. We also don't like picking favorites in the ecosystem! 😃
\n– EliWhite
\n# Q: For example, on my Mac, the web version of Discord is using nearly 200+ mb of memory of the heap, how do you measure such things for RN? – unknown
\nA: For iOS, i have been able to use Safari to connect to JSC and get JS sampling profiles and memory usage. For Android, there is Hermes. Hermes has a sampling profiler and a memoryDumper.
\n– axemclion
\n# Q: What advice would you give to your past self a couple years after you graduated uni if applicable? – Udon Soup
\nA: I'm sure everyone has their own answers, but here's mine: This industry changes at an amazing speed. Keep current, and don't let a bad company or manager keep you from doing what you want to do. There are plenty of great opportunities out there.
\n– React Native core team member
\nHere's the advice I would have given myself:
\n– Zack Argyle
\nBuy Bitcoin, sell in december 2017, bet on javascript
\n– Rick
\nIt's been a long, long time since I graduated, and my answer to this would be different, as you might expect, depending on when you asked me. Sitting here today, it's clear that this industry moves fast and that the things you might end up working on have not been invented yet. Do not sweat the details, develop a love for learning, and do not be afraid to jump into new experiences. Also, find a great team of folks to be inspired by and learn from ❤️.
\n– hector
\n# Q: Will there be a review of a view management on Android, because removeSubclippedViews currently is buggy. Also how does Detox working for FB with Hermes? – Udon Soup
\nA: For Android, we're improving the view rendering pipeline as part of Fabric project as well. So there will be improvements coming in the future. For Detox, we aren't using it internally at the moment because we have our own FB specific test infra. But I don't think using Hermes will impact Detox behavior.
\n– fkgozali
\n# Q: When will 0.61 pre-changelog be available? – x0s3
\nA: The 0.61 pre-release branch has not been cut yet, so taking a look at the commits that have landed on master after 0.60.4 was cut might give a glimpse into what a 0.61 release might include: https://github.com/facebook/react-native/compare/v0.60.4...master (we cut releases from master, and let them soak for a month or so before promoting them to stable). This list is incomplete as it lacks commits that landed after the 0.60.0 pre-release cut which have not been cherry picked into any of the .1, .2, .3, or .4 patches.
\n– hector
\n# Q: Is there any work in progress for showing the errors better. I mean like reactotron? – Alireza Ghamkhar
\nA: @Rick is working on building an awesome error and logging experience for React Native and it will be exciting.
\n– christoph
\nYes! I'm working on this now. We want to consolidate the yellowbox and redbox screens, update the design, give you more information, and improve the experience for infra errors (like syntax errors and not connecting to Metro).
\n– Rick
","frontmatter":{"date":"2019-08-08T00:00:00.000Z","dateGroup":"August 2019","dateString":"Thursday August 8th, 2019","description":null,"location":"Q&A Channel Reactiflux","people":"@reactnative\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"React Native core team (August 2019)"}}},{"name":"clubhouse","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How important is product documentation to your team? Do you have an example of documentation you think is amazing? – mostlymat
\nA: Product documentation is important for us, especially with a growing product, a good documentation helps a lot to guide customers. A good documentation for packages we use is always appreciated too. 😃 https://help.clubhouse.io/hc/en-us
\n– charpeni
\n# Q: How do you prioritize introducing of new features versus keeping your codebase clean? – Flint
\nA: Hii!! It usually depends on the feature. Though time lines are very important, writing clean code is also important and if a feature takes a bit longer to implement because we want to maintain our clean code, then that's okay 😃.
\n– Jenel
\n# Q: Did you start using GraphQL from the beginning or did you migrate from Redux? – sregg
\nA: We started out using only Redux, but quickly realized that our data model would lend itself well to using GraphQL.
\nWe built the first couple features in Redux, and have been moving most of the app over to using GraphQL now.
\n– eliperkins
\n# Q: Can you describe the directory structure of your React Native project? – Foobarking
\nA: Our structure isn't anything revolutionary: js, ios and android dirs like most RN projects. then inside of js we have components which are \"dumb\" presentational components, containers which connect to data sources. we also have a screens dir which is all full screen components that we use for navigation.
– eliperkins
\n# Q: I've been working on performance improvements for a client React Native app. What's your number one tip in this regard, to fixing perf? – agmcleod
\nA: Profiling! profile all the things. Ram had some really good tips on this at Chain React but tl;dr: place timers to track perf at a given path and optimize it don't try to optimize all the things at once!
\n– eliperkins
\n# Q: Which version of React Native version do you use? I think 0.60 is not a stable version. – RockStar0107
\nA: 0.59.10 😃
\n– Jenel
\n# Q: Thank you for doing this Q&A, I am interested in knowing your opinion in Relay vs Apollo? – HTlili
\nA: We chose Relay for a number of reasons:
\n– eliperkins
\n# Q: Have you ever coded Java? – TheOriginalAse
\nA: Yes! We're using Java & Kotlin in our code base. Looking forward to play with Jetpack Compose.
\n– charpeni
\n# Q: Where do you see React Native in 4-5 years? – Tee-Sean
\nA: Interesting question! one direction that I'd love to see is a way for React to be used in other languages. I think we've seen this already with ReasonML, but I'm very optimistic about things like SwiftUI and JetPack Compose playing a nice role in this future.
\n– eliperkins
\nGood question! RN is changing so fast now that's hard to give a \"right\" answer here. With recent hooks, Fabric, and all changes related to the bridge. I'm sure React Native will still be there, an evolve one for sure. I'm hoping to see a better integration with native modules, and maybe a seamless cohabitation, with more native integrations/packages.
\n– charpeni
\n# Q: What is the most important part when doing React Native apps and performance is a must, even when running on bad devices? – matheusmarrane
\nA: By running on bad devices, do you mean low-end devices? On mobile, performance is a must. We have to make sure to not re-render too much for nothing, especially on huge components layouts. Network requests are also a significant factor, a low-end device on a low connection would probably not react the same way you'd expected. Having some loading components (React Suspense), doing network requests at a good time (when needed, maybe a bit ahead), and well decoupling your components is a good way to start by only passing essential props/values (ex: don't pass the whole user object, pass only the fields you need). Also, the bridge could be a bottle neck, do not pass everything to it, because it would be serialized!
\n– carpeni
\n# Q: What’s the biggest challenge for you to develop an app that built using React Native? And also what navigation library do you use? – adrianhartanto
\nA: We use react-native-navigation by Wix. I come from an iOS background so the hardest part has definitely been grasping graphQL, but I think for each person it's different. The React native community has been great and it's been growing which is super nice. So, a lot of the issues and problems I've had have definitely been brought up before and almost always there's a solution somewhere on GitHub. 😃
\n– Jenel
\n# Q: Regarding the nature of React Native being community based, how have you managed dependency issues (breaking changes are a real problem). Trying to code as much as of the features from scratch, just being carefull about bumping libraries versions or something else? – essenin
\nA: We're using Renovate Bot to throw pull requests at us when an update is available. We have a bunch of tests running on CircleCI to assert that everything is working as expected (thanks to them). React Native packages with native code are usually the one we have to be careful with, we'll QA them before merging them. I'd say that most of RN libraries are using well written release notes, so they're really helpful 😃.
\n– charpeni
\n# Q: Do you use 2 or 4 space tab indentation? – Reyals
\nA: Prettier 😍
\n– charpeni
\n# Q: What CI/CD tools do you use for both front and backend development? – esimba
\nA: We use CircleCI for CI builds. along those lines, we run only JS tests in CI (since they're fast and native tests are slow). We also run the metro bundler for both iOS and Android to make sure our bundles can always be built.
\nWe also rely on fastlane for helping us to deploy often! we deploy new apps to the App Store every couple of weeks, but we crank out builds to our team and beta testers whenever we need to, in a matter of minutes.
\n– eliperkins
\n# Q: I find it easy to follow React / React Native tutorials but when I move on to start a project of my own I find it very hard finding a flow and how to do things. Do you have any recommendations on how to move on from tutorials? – kanerva
\nA: I think the best way I've found to learn is to just try to build something! Even if it's an idea that's already been built before.
\nAnother great way to play around is to build intermediate things that aren't full apps (like a library or command line tool) to scratch some itch, and then integrate it into an open source app.
\n– eliperkins
\n# Q: What level of proficiency(if any) in Java/Kotlin/Swift is needed for React Native apps? – mahaveer
\nA: Some! I think almost none is required to get started, but you'll quickly find that there is some understanding of how iOS and Android apps are built to be proficient.
\nExpo will get you a long way to start, but at some point, you'll likely find that you'll need to understand how an Xcode project builds an app or how Gradle constructs an Android app, etc.
\n– eliperkins
\n# Q: Regarding React Native development, what is your opinion about Expo, if any? – Rintsi
\nA: I think Expo is great to learn and get started! But I think you'll find that you'll want to eject at some point. The Expo team is a team of stellar amazing individuals who really push React Native forward every day. I can't wait to see what they come up with next!
\n– eliperkins
\n# Q: How do you define a good React Native developer? I mean what should a React Native developer know to be considered bro in your company? How can these subjects learnt? – Alireza Ghamkhar
\nA: A good bro? I'm not too sure I understand your question.
\n– Jenel
\nFollow up: I mean what concepts a good React Native developer should know that be considered a qualified or “senior React Native developer”. What usually you expect from your React Native developer? Do you want him/her to be good at native both Android and iOS or what?
\nA good React developer should definitely know React, but should also have some general knowledge of native stuff too. But it also really depends on your team! The great thing about Clubhouse is that Eli, Nicolas and I all came from different backgrounds. Nicolas came from an Android background and Eli and I came from an iOS background. So we all compliment each other quite well. When hiring a React Native developer, I look for someone who is willing to learn and collaborate. I don't think there is one set path on what makes a great React developer, I think the best way is just to continue learning and growing. Having a good portfolio with a range of different projects helps too 😉.
\n– Jenel
\n# Q: Estimating project scope and timeline is quite challenging task (under estimating or overestimating). Any pointers/tips or resources that can enable project managers become better? – esimba
\nA: Hii!! That is definitely a hard task. I suggest working closely with a developer and asking a bunch of questions based on the feature. There have been times where certain bugs take a lot longer than expected, but what's been helpful for us is ALOT of communication and looking at the feature from all points of view. Also break the stories down into smaller stories/tasks because smaller stories are alot easier to estimate. For a feature where I was updating the UI, we broke it down into multiple stories. 1. add icon 2. update/remove text 2. update layout... from there estimate those smaller stories.
\n– Jenel
\n# Q: Is it a good idea to combine PWA inside a WebView with other React Native features like when you need native modules? – Deleted User
\nA: Clubhouse isn't currently a PWA, so we don't really have that exact use case. We do lean towards bouncing users out to Safari/Chrome instead of embedding web views. Embedded web views within apps can be a bit limiting, and there's no benefit we gain from keeping a user within the app (vs using our app in Safari).
\n– eliperkins
\n# Q: If you follow agile methodology, what is the usual agenda of your retrospectives? – Rintsi
\nA: We don't follow \"agile\" strictly (everyone seems to have their own flavor 😆) but we do have occasional retros after projects complete. We usually use the format of:
\nAnd then we gather action items from here.
\n– eliperkins
\n# Q: What is your favorite React Native stack? – Tee-Sean
\nA: React Native, a static type checker (Flow or TS), and GraphQL (Relay 😉)
\nFrom here, just have fun!
\n– eliperkins
\n# Q: Do you like the Airbnb React/JSX style guide and if so, do you apply it to your React Native project? (https://github.com/airbnb/javascript/tree/master/react) – Foobarking
\nA: We do use eslint-airbnb-config, but we have started stripping out a number of rules that don't fit our team. Additionally, we have started to share some linting rules with our other teams at Clubhouse as well: https://github.com/clubhouse/eslint-config.
\n– eliperkins
\n# Q: Do y'all do any end to end testing for your RN apps and if so, what tools do you use? – ativ
\nA: We have fastlane to take automated screenshots for us. On Android, we have a configured Pre-Launch Report (on Google Play Store) with a custom Robo script to assert that the app can sign-in and navigate on all devices. (Firebase test lab is also useful!)
\nWe're looking into Detox for better E2E testing! https://github.com/wix/Detox
\n– charpeni
\n# Q: There are multiple threat mitigation services available nowadays regarding vulnerable dependencies, do you take these into consideration in your CI/CD pipelines? – Rintsi
\nA: We use https://renovatebot.com/ to keep our reps up to date. We also use GitHub's security alerts to inform us of high priority updates.
\n– eliperkins
\n# Q: What was your most recent \"Aha\" moment while developing a new feature, or learning about something you just didn't know before? – mostlymat
\nA: I think working through building our Android app was one of those for me! I come from primarily an iOS background, so I got to learn a lot of new things there. We built Clubhouse for iOS first using React Native, but cut out shipping an Android app at the same time to help reduce scope. We learned that using GraphQL (and specifically Relay) really helped us share things across iOS and Android because of how we approached data fetching and composition!
\n– eliperkins
\n# Q: How do you divide the workload? Do you have feature teams or iOS/Android teams or how does it work? – Rintsi
\nA: Company wise we're into squads based on goals, for the mobile team all developers are in the same bucket and we're sharing our knowledge and learning from that every day 😃. We're also working closing with design, product, backend, and frontend folks :).
\nWe're also trying to keep a good cadence between bug fixes and shipping new features that would bring joy!
\n– charpeni
\n# Q: Approximately how much of your React Native app is created using Native Modules? – Foobarking
\nA: That's a good question! I'm not too sure. Our navigation, webview, and our iOS drag and drop. So maybe about 5-6%?
\n– Jenel
\n# Q: How often are the \"Can this even be done in RN\" moments? Is it just me being a scrub or you often have to invent a solution from 0 compared to building native apps? – essenin
\nA: Great question! I think my opinion on this changes every day. But generally, I think almost anything can \"be done in React Native\" depending on how you approach it. it may require bumping out to native modules to get it done, or building your own abstraction, but really anything can be done with RN :)
\nAlso, I love watching \"Can it be Done with React Native\" by William Candillon on YouTube: https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA.
\n– eliperkins
\n# Q: What do you recommend people to develop with, Expo or React Native CLI or is there anything else which we are not aware of? – Tee-Sean
\nA: We're satisfied with React Native CLI 😃. The new RN CLI is 🔥. The auto linking feature is time saving!
\n– charpeni
\n# Q: What's the best way to store global data for usage through multiple components. Say when a user logs in to the app, a request is made once to a REST API and retrieves some data which can be used multiple times at different points instead of making new requests each time. – kanerva
\nA: As little \"global\" data as possible 😉. Heh, but seriously, building great abstractions around this is key! approaching this as building out a \"data store\" or controller that's really good at doing That One Thing™ first, and then figuring out if it can be shared is more a good first step. just because it's \"expensive\" to get something doesn't mean it should be cached forever! sometimes refetching data is just fine 😃. But software is about tradeoffs, so approach each decision with context in mind.
\n– eliperkins
\n# Q: Going back to documentation haha. Is there an internal documentation application/pattern you like to use? For onboarding, common gotchas, shared knowledge. If so, what does that look like? – mostlymat
\nA: Everything is documented in Slack, you just have to scroll way back up. (joking) 👎
\nWe love to use markdown files within GitHub, could be in a specific projects or into a docs repository. Also, pull requests description and commit messages are well written to help documentation things we do while being linked to their respective stories. If we're looking to know why something is that way, we can blame that line and find the PR that changed that, otherwise for general questions, we may want to take a look at our markdown files.
\nDoes that answer your question correctly? 😃
\n– charpeni
\n# Q: Do you use story books in your projects? Do you approve the approach of “developing on story book first”? – Alireza Ghamkhar
\nA: We don't currently use storybooks, but we're definitely taking a look at an approach like this! One of the folks on our design team has used them in the past with great success, so we're trying to figure out how to fit them in with our workflow.
\n– eliperkins
\n# Q: What is your take on relying RN components that you can install from npm? – Rintsi
\nA: We don't currently do it. 😃 it's a tradeoff you have to take! I think using pre-designed components from npm can lead your UI to have a design or branding that isn't quite unique to your company's brand. that said, there are some handy components out there! (like https://github.com/jeremybarbet/react-native-modalize 😃)
\n– eliperkins
\n# Q: How do you guys get \"staging\" versions of the app to your stakeholders/testers's devices so they can test and approve changes you are working on? Just use the built in Google Play/iTunes (TestFlight) for Android/IOS or some other tools? – ativ
\nA: Yup! We use TestFlight for iOS and GooglePlay for Android. 😃 😄
\n– Jenel
\n# Q: If you get to pick the next Android version name, what would you name it? – mostlymat
\nA: The next version after Q would be R, so I'd say Android Red Velvet. For Q, I can't answer.. 🤔
\n– charpeni
\n# Q: Do you use (living) style guide or have a concept of shared styles between iOS/Android? – Rintsi
\nA: We have a common set of components that we share across iOS and Android, but there are some places we customize per platform. one example of this is how we handle search-style components and their filters. on iOS, we want a segmented control, while on Android, we want tabs. to handle this across our app, we build out components that allow us to render those platform-specific implementations, either by using Platform.select and friends, or by creating a more abstract component with render props, inversion of control, etc.
– eliperkins
\n# Q: How is React Native better than Flutter? – Tee-Sean
\nA: Because JavaScript ;)
\nSeriously, the JS tooling ecosystem is fantastic! also, flutter recreates platform-specific components, rather than adopting them (like UINavigationController and friends). this leads to poor handling of things like accessibility and platform updates. RN totally wins out here if you Use The Platform™ 😃.
– eliperkins
\n# Q: Where do you pull the line on \"this component is getting too big, we should move xy out to a new one\"? – essenin
\nA: I think the amount of responsibilities of the component is a big one. Does it do one or two specific things, or does it do 231940812 things? If it's too many, consider breaking it down. Are you duplicating logic from one component into another? maybe create an abstract component that can be used across both components instead. there's no right or wrong answer to this, but in general, small well-scoped components are pretty great. 😄
\n– eliperkins
\n# Q: Regarding React hooks, what do you think is the best, saving the values on useState or create a reducer only to store values before sending them to your endpoints? – humarkx
\nA: We just upgraded to RN 0.59 and we barely touch React Hooks for now, we'll need more time playing with hooks before having a strong opinion on this 😃.
\n– charpeni
\n# Q: How to share some data like authentication token outside React components where context or Redux is not accessible. I am currently using global.apiToken for that in my api client. What do you recommend? – gamingumar
\nA: Creating an abstraction over this allows for you to move this around easily too! Consider creating something like UserController.getAuthToken() as an abstraction over global.apiToken. then, if you want to move it in the future to something that isn't global (like AsyncStorage or a cookie manager or user defaults or even just in memory), your callsites don't need to change 😃 this will be important as your codebase grows (and as you start doing things like external security audits and pentesting 😛)
– eliperkins
\n# Q: Do you ever have components connected to store? (Even if only some) And how you avoid and fight this when that is about to happen? – humarkx
\nA: We connect components to both Redux and Relay! we only really fight this if the component is just for display. we generally connect the outer most components and then pass data down, but we don't have a specific rule around it.
\n– eliperkins
\n# Q: What has been the biggest mistake you’ve made? – Rintsi
\nA: Stellar question! I think rewriting things is a terrible idea, after doing a rewrite myself. Rewrites mean that you stop building and shipping new features while you rewrite the ones that your users currently have. I think if I was asked if I'd ever consider a full rewrite again, I would ask if we could rewrite in smaller increments over time, rather than all at once. Slack's blog about doing this with their desktop client was fantastic: https://slack.engineering/rebuilding-slack-on-the-desktop-308d6fe94ae4.
\n– eliperkins
\nIn general - \"cutting it short\". lollll. There was one time (recently 😂) where I was so excited that I fixed a bug, but found out later it wasn't the correct fix. I was so excited and just wanted to throw a PR up just to fix this annoying bug I've been working on for a couple days. If I pushed the changes to master it would have guaranteed caused some major issues.... So, my biggest mistake is probably going to fast when I really need to slow down and look at things from all perspectives.
\n– Jenel
\nMy biggest mistake is probably forgetting about tests, having too much confidence in my code and third-party libs, it may works now, but it could potentially be changed later. Breaking stuff in production should be avoidable.
\nAlso, even we can use JavaScript in React Native, that doesn't mean we have to replace all the native look and feel by JavaScript implementations. 🙃
\n– charpeni
\n# Q: We are about to use GraphQL subscriptions, however, SocketIO for real time data seems also good, considering we are using GraphQL on the project, on React Native, what would be your choice, GraphQL subscriptions or SocketIO? – humarkx
\nA: As far as I understand it, GraphQL subscriptions are just a spec, so you might end up using something like SocketIO with websockets in the end! I think GraphQL subscriptions are awesome 😃.
\n– eliperkins
","frontmatter":{"date":"2019-07-25T00:00:00.000Z","dateGroup":"July 2019","dateString":"Thursday July 25th, 2019","description":"Clubhouse is a project management platform for software development that brings everyone together to build better products. Clubhouse is built using tools like React Native, React, Relay, GraphQL, Gatsby and more.\n","location":"Q&A Channel Reactiflux","people":"@clubhouse - Eli Perkins, Jenel Myers, Nicolas Charpentier from the mobile team @ Clubhouse.io.\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Clubhouse Team"}}},{"name":"vladimir-novick","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Where do you see Hasura in five years time? – anotherdeadhero
\nA: In 5 years time there are so many features planned to be added to Hasura. Have you seen our new Remote Joins feature? It already gives you an ability to basically connect your GraphQL API to anything you want - third party microservices, other dbs, your custom servers etc.
\n# Q: Is there any timeline for Hasura potentially supporting other major DBMS besides PostgreSQL? Many huge enterprises still seem to use things like MS SQL Server. – Shaikat\n# Q: Any plans to support MySQL? – krvajal
\nA: There is a plan to support MySQL, but I don't know about the exact timeline. Right now we are focused more on Remote Joins, so you can join your GE with literally anything. MySQL joins is also possible btw.
\n# Q: How would you make an offline first application with Hasura GE as the backend? – thangngoc89
\nA: It can be long answer. We actually discussed exactly that at our podcast 3factorRadio with Maxim Salnikov PWA advocate. feel free to check it out here: https://hasura.io/3factor-radio.
\n# Q: Do you imagine the world without GraphQL, if not, why? Any specific example... – web2.0opensource
\nA: Well it's easy to imagine a word without this or that tech. After all we all saw how tech has evolved. But with modern application demands GraphQL and serverless is absolutely must.
\n# Q: Are there any ETA on an official stable version of HGE? I've been using alpha 13 in production for a year without any bugs. Make an official release would help me selling HGE easier to my customers. – thangngoc89
\nA: For v1 release ETA is 4-6 weeks. hopefully 😉.
\n# Q: Hey we are starting to use prisma.io for our company, can you explain the difference between the capabilities of hasura.io vs prisma.io? – Sylenth1
\nA: Prisma and Hasura are in the same ecosystem but way different. Prisma is basically an ORM when Hasura is an API engine that your apps can use directly and an event engine for your backend code. Also it has granular access control, authentication support and recently remote joins that will give you an ability to connect any of your microservices/third party apis or databases. We wrote a blog post a while ago about the differences: https://blog.hasura.io/hasura-vs-prisma-9ffc7271eda8/.
\n# Q: How can Machine Learning use GraphQL to assist people on daily activities... Any specific example? – web2.0opensource
\nA: Machine learning can use GraphQL for anything on data layer. So basically your Machine learning will use let's say something like TensorFlow, but you will still need to get and store the data, interact with your backend and so on.
\n# Q: Is there any recommendation from your experience to people working on the newspaper platforms? These are very dynamic and need to represent information from a wide domains. – web2.0opensource
\nA: Yeah, there is actually a blog post from David Eads from ProPublica about newspaper platform which is built in Gatsby, Hasura and PostgreSQL. https://www.propublica.org/nerds/the-ticket-trap-news-app-front-to-back-david-eads-propublica-illinois
\n# Q: How would you handle files upload in Hasura? AWS AppSync makes it extremely easier to do so. Currently, my workflow would be hitting an endpoint to get a signed url for uploading to AWS S3. and then use a different code path to upload the file. I wish I could do everything via Hasura and GraphQL. – thangngoc89
\nA: Since you cannot send binary files with GraphQL, you will still need to upload them somewhere using regular REST endpoint, but what you can do is fire a lambda once S3 upload is done. Lambda will execute a mutation into Hasura and you will get subscription on file uploaded.
\nFollow up: Ah hah, that is something I don't need to do. because I upload the files directly to S3 on the client. but using lambda to notify the database about the uploaded file is an interesting idea. Thank you @vladnovick.
\n# Q: Currently using Prisma for a multi-tenant application. I am using the tenant_id approach. Since Prisma 2.0 is now using Rust; do you still think that Hasura has a competitive edge over performance? Lastly how easy is it to migrate from Prisma to Hasura (keeping in mind I have multiple Prisma resolvers). – kc
\nA: Well as for performance I haven't checked Prisma 2 performance yet, but you can check our performance benchmarks here: https://github.com/hasura/graphql-engine/blob/master/architecture/live-queries.md. As for if you can use any Prisma resolvers or migrate, you can basically can use any GraphQL endpoint to add remote joins to Hasura, so you can just reuse your existing resolvers with Hasura adding them as remote joins and connecting them to database. Moreover if you are running on PostgreSQL, engine will auto generate everything for you so you will need to focus only on business logic. I don’t think the difference is the language as much as it is the approach. If you can create a single SQL query from a complex GraphQL query you will see Hasura like performance. Hasura can do this because Hasura can mix access control and auth rules into the single SQL query directly. If you have resolvers that call an ORM, it would be hard to construct that one query I think.
\n# Q: What are the best package choices in the React Native ecosystem? – Niz
\nA: For interaction with GraphQL you can use an Apollo client. Actually we created tutorial series how to do that, so you can check them out on learn.hasura.io. And if you are asking generally about React Native packages not related to GraphQL, then I would go with ignite cli tool by the infinite.red team for best practices.
\n# Q: I have seen many developers start to move away from NoSQL/MongoDB when implementing a GraphQL backend. What are your opinions on SQL / PostgreSQL taking over the GraphQL world? – Sylenth1
\nA: As we move into GraphQL ecosystem people tend to migrate to SQL/PostgreSQL because it has so much to offer in various things. First of all SQL is really mature language, second Postgres and it's extensions are just amazing and really performant. You can check the following benchmarks for example: https://www.enterprisedb.com/news/new-benchmarks-show-postgres-dominating-mongodb-varied-workloads.
\n# Q: Are there plans to document setting up an instance without using Docker? – samsch
\nA: What would you be interested into? We have integrations with cloud vendors, but all of them use Docker under the hood so you don't use it directly. Also soon we will provide a binary version to run locally.
\n# Q: What’s your number one tip for GraphQL schema design? – Oli
\nA: Auto generate schema 😉. Powerful APIs are hard to build and especially manage by hand. Also make sure you solve n+1 problem. BTW we don't have this problem in Hasura because Hasura is basically a compiler and we compile to one single SQL statement and execute it using PostgreSQL native features.
\n# Q: Hi! do you think in a world leaning towards NoSQL databases, what is in your opinion the future of Relational RDBMs? – nicandro
\nA: I would argue on the fact that a world leaning towards NoSQL databases. While they have their own use cases, recently there is a major switch towards relation RDBMS such as PostgreSQL and its extensions such as PostGis or TimescaleDB. MySQL is also evolving to support multiple types of workloads.
\n# Q: Can you expand on Hasura's compilation step? – Sylenth1
\nA: I would better share a blog post about that, since it's a pretty broad topic to write about in chat. https://blog.hasura.io/architecture-of-a-high-performance-graphql-to-sql-server-58d9944b8a87/
\n# Q: It is known that Browser DOM is slower then Virtual DOM (IDK exactly why but I assume rendering stuff), but there is one thing I don't understand: When there is a state update React is diffing the old VDOM with the new VDOM (which is created completeley from scratch with the updated state right? (side question)). In the and React calculates a \"patch\" to update the browsers DOM. So in the end you still have to update the browser DOM. Why is it so much more expensive (performance wise) to update the browsers DOM directly? You wouldn't even need the diffing and so on.. – Flaneder
\nA: React has its specific mechanism called React Fiber. You can read more about it here: https://github.com/acdlite/react-fiber-architecture.
\n# Q: What would be the best way to get started with React, after learning basics of Javascript? And what is the best way to keep up with the React updates? – Brouski
\nA: I would suggest learning React on egghead.io. Amazing platform with amazing courses. And the best way to keep up with React updates is to follow people on twitter, go to confs / watch conf talks.
\n# Q: I recently saw your video with Jason on GatsbyJS, what are your thoughts about Hasura with GatsbyJS? – Sylenth1
\nA: Hasura with Gatsby is amazing. Gatsby gives you server rendered static site and Hasura gives you real time GraphQL API that connects with Gatsby so smooth. Recently we also did a stream about Authentication with Hasura and Gatsby.
\n# Q: What's the possibility of Hasura as a library that could be integrated into other apps without having to be a wholly separate service? – samsch
\nA: We haven't thought about it yet actually.
\n# Q: Any suggestions on implementing two-factor authentication with Hasura? Using apps like google authenticator for example. – Sonicrida
\nA: You can implement two-factor using various services. Let's continue discussion on discord.gg/hasura about that.
","frontmatter":{"date":"2019-06-27T00:00:00.000Z","dateGroup":"June 2019","dateString":"Thursday June 27th, 2019","description":"Developer Relations @ Hasura.io\n","location":"Q&A Channel Reactiflux","people":"@VladimirNovick\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Vladimir Novick"}}},{"name":"conrad-irwin","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Probably a basic question – what made you choose to use Electron instead of other desktop options? – yeehaw
\nA: Good question. We actually started with node-webkit, but found that we were one of the largest consumers of it, and ran into many issues.
\nElectron had a much larger community, and so we switched over — everyone else has fixed most of the problems already.
\n(We also had a very early v0.1 in Swift, but I'm a JavaScript person so it was faster to build in js)
\n– cirwin
\n# Q: How did you build your team? Finding lots of talented React+UI people is difficult, especially in the bay area. – burtonator
\nA: Various ways — team-building is definitely a slow process. We've hired people I met at conferences, through AngelList/Hired etc. and through a bunch of meetups we've run at the Superhuman office.
\n– cirwin
\n# Q: What are some of your favorite chrome extensions? – dpalazz
\nA: I used a few, I have a love-hate relationship with BetterGithub and Vimium so would recommend you try them but they're quite opinionated.
\n– cirwin
\nJumping in as well (engineer at Superhuman). Favorite Chrome extension for me is probably Vimium.
\n– Timothee
\n# Q: What would you offer as a suggestion to people when learning electron? – Fiery Raven
\nA: I think they have a create-electron-app. When we were starting out we already had a web-app so getting the web-app to load was the first thing; then after that it was a lot of googling to try and find how to do all the native stuff.
\nOne of my favourite things you can do is fully transparent windows so Superhuman looks amazing on inbox zero:
\n![\"Transparent](\"https://media.discordapp.net/attachments/193117606629081089/586285272468291587/Screen_Shot_2019-06-06_at_1.07.55_PM.png?\")
– cirwin
\n# Q: Mobile apps must be important for an email app company (or if not now will be soon). Is there any commonality between the desktop and mobile code base? Did that factor into your decision? – Just Lurking
\nA: Mobile apps are very important. Email is read mostly on the phone (but written mostly on desktop, which is why we started there) — we have some shared code in js, and some shared logic that we hand-recoded in C++ for email parsing; but otherwise the clients are distinct. The UI for phones and desktops is very different, so there's very little common UI code.
\n– cirwin
\n# Q: What are you going to do about native mobile apps? Are you going to do a PWA or implement native Android/iOS?– burtonator
\nA: We're still deciding for Android, it may be react-native, Swift or Kotlin — we're about to start building out that team, so it will depend a lot on the strengths of who we hire.
\n– cirwin
\n# Q: – Given your Swift comment, does that imply the app is built with React Native? If so – how do you go about leveraging React Native versus native code to ensure that all of your actions (screen changes, animations, et al) are below that 100ms threshold? (If this question even makes sense 😄) – yeehaw
\nA: The iOS app is actually Swift, though we run a bunch of javascript as part of displaying HTML emails and a little core logic. We have a phenomenal team of native (Swift) people building it, and we wanted it to feel amazing, so that was the right choice for us.
\n– cirwin
\n# Q: Do you offer any trial period for Superhuman? Thinking of buying the subscription but without testing I can't know if this is worth it! Or maybe to rephrase what are the killer features of Superhuman i won't be able to be without once i get used to it! – oorestisime
\nA: There's no trial period yet. We've designed Superhuman to work well for some users, but the switching costs are high; so we invite people to a screenshare as part of the onboarding. We haven't yet found a way to scale the hands-on approach to trials, but it's something we want to explore.
\n– cirwin
\n# Q: As someone who has looked up to the little guys in programming history what would you say is a way to start a company based on an idea? – Fiery Raven
\nA: My favourite book on this is \"the art of game design\", you should prototype, talk to people, and repeat with ever more detailed prototypes until you have a product 😃.
\n– cirwin
\n# Q: Did you ever face scalability issues? If yes how did you solve it? Also suggest best way to Deploy react apps. – Cypher
\nA: Scalability, yes — for now we just pay Google Cloud more, but we're hiring to work on that specifically. Deployment is pretty simple — we use a CI server to run the tests, and then upload to Google Cloud Storage with versioned urls. The harder part is doing app updates and making the app work offline, but service workers get a lot of the way there.
\n– cirwin
\n# Q: How do you do the screensharing as part of the onboarding? – burtonator
\nA: Mostly using Zoom, as that has support for iPhone screenshare too.
\n– cirwin
\n# Q: As a woman in tech, I try to always ask about what companies are doing to attract more women in the field. I would love to hear about what Superhuman is doing and what women in tech can do to be more attractive candidates for your type of company. – dpalazz
\nA: We do several things to try and make us more attractive to candidates; from promoting the awesome women we have internally, and running job specs through gendered language detectors, to internal discussion on how to keep improving.
\n(re awesome women internally, Emuye Reynolds runs mobile engineering: https://women2.com/2018/08/02/she-helped-invent-apple-tv-now-shes-reinventing-email-at-superhuman/ )
\nTo the second half of your question, I'm not sure. It's hard to speak for all companies, but we try and look for people with potential regardless of gender (that said, we deliberately bias to meeting more women, because that seems like one way we can help avoid any issues with how profiles come across).
\n– cirwin
\n# Q: Are you open to discussing non-technical questions on this chat? Curious about your prioritization process for new subscribers, specifically AFTER the referral. On social media some folks seem to get scheduled right away and some languish for weeks or months.
\nSome enthusiastic users on Twitter seem to offer to refer anyone, do you depriorititize those referrals because they aren't personal connections? Or is it simply a bizdev decision, focusing on users with most revenue or positive press potential? – Just Lurking
\nA: I can answer that part: at this point, we prioritize people for whom we know the product will be a good fit due to their existing workflows and tools. E.g., Superhuman is not great on Windows and we don't have an Android app yet, so it doesn't make sense for us to onboard these people yet.
\n– Timothee
\n# Q: As an addendum to dpalazz' question – I've just read about the accomplishments of people on your team, the profile of your investors, and overall – the refreshingly inclusive approach it seems you take to hiring!
\nAs a junior developer – how do I make sure I'm one of the first to know about relevant positions with you all 😛. – yeehaw
\nA: You can always email me 😃 conrad@superhuman.com. For companies like us we advertize across AngelList, LinkedIn, etc. and most of the active platforms; even if you're not actively looking being around there may give you a sense of what's available
\n– cirwin
\n# Q: Could you give us a brief history of your steps so far with Superhuman? From when did you realize about the problem to today. – pierre
\nA: It's a long story, but to summarize, Rahul and I have been working on and off since I graduated; the first company we collaborated on was Rapportive — a tool to make Gmail better by replacing the ads with contextual information. Rapportive was acquired by LinkedIn where we built a similar tool for the iPhone email client.
\nWe went our separate ways for a few years, and then in 2015 we realized that two things were still true: 1. people spend too much time in email, 2. Gmail was not serving the email power-users. So we started Superhuman on the premise of \"make people brilliant at what they do\" and for the first problem to tackle, chose email. : (based partly on our experience in the space, partly on the total number of people who email ~3Bn, and partly on the frequency with which people we knew complained about email).
\n– cirwin
\nIt all started in 1971 when the first email was sent 😄
\n– Timothee
\n# Q: @Timothee Do you consider onboarding Android users who don't do much email on mobile? I'm guessing some folks would be fine with desktop and then falling back occasionally to the GMail mobile app. – Just Lurking
\nA: We do to some extent if they're insistent that they'll be fine. But it's tricky when you need both platform to really leverage the value. Not many people only use one platform (cross-platform features like read receipts, snippets, drafts, etc.).
\n– Timothee
\nFollow-up: Makes sense, thank you. Android ETA 2020 at this point or could it be earlier?
\nYeah likely 2020.
\n– Timothee
\n# Q: So if I am correct you only can connect it to Gmail, there is no option like in Rainloop to connect to an manual SMTP server? – MrHpower
\nA: Not yet — we made that decision to reduce build time, as Gmail has everything in JSON over HTTP.
\nAt LinkedIn I did a lot of work with IMAP and SMTP, and they're fine, but awkward (from the days before JSON/XML, so each command has its own parser rules, and sometimes even character encoding can change on the fly).
\nWith the Gmail API we can connect from the web client with no proxy required which is also nice.
\n– cirwin
\n# Q: What information from your customers email do you store on your servers? How do you guys tackle privacy concerns? – pierre
\nA: Good question. The short answer is incoming emails are not stored, outgoing emails you send through Superhuman are stored until they are sent and then deleted. We have a send queue to provide features that are not available over the Gmail API.
\nWe work with a good law firm to ensure we're up to snuff on privacy, and a good security auditor for the security side of things 😃.
\nEverything potentially sensitive is stored encrypted of course.
\n– cirwin
\n# Q: Following up on the no proxy required, can you discuss your security / privacy architecture? How much access to a user's email do you have by design? Email obviously very sensitive. Via password reset access to a user's email often can provide \"keys to the kingdom\" for other sensitive apps (setting aside 2FA). Sorry somewhat of a repeat. – Just Lurking
\nA: No worries — it's a question we get a lot
\nTo make Superhuman work we have to store encrypted refresh tokens on our servers, which as you say are the keys to the kingdom.
\nA lot of our security and risk analysis focuses on protecting both the database and the encryption keys for those.
\n(We don't have passwords, luckily!)
\n– cirwin
\n# Q: What kind of iteration did you have to do before you got a product that fit well for users? – vcarl
\nA: Great question — as a company we're relatively intentional about the things we build, and quite metrics driven.
\nSo we wanted to find a way of measuring how well Superhuman was working for users.
\nMy co-founder actually wrote up the approach here: https://firstround.com/review/how-superhuman-built-an-engine-to-find-product-market-fit/
\nThe biggest surprise to me was how long it takes to build something truly amazing.
\n– cirwin
\n# Q: Thanks. Have you had time to build in internal controls and monitoring so e.g. a rogue employee couldn't get away with murder in addition to the obvious focus on external threats? – Just Lurking
\nA: Yup — any employee access to potentially sensitive data is cross-posted to slack (in addition to Google cloud audit logs).
\n– cirwin
\n# Q: What do your dev teams look like (designer/devs/prod mgr)? What are you super proud of about your development process? – dpalazz
\nA: Right now we have two teams, desktop (5 people, incl me) and mobile (4 people, incl Emuye), and one designer — we're actively hiring our first PM (Rahul the CEO has historically done that).
\nThe process is mostly weekly sprints pushing ideas through a cycle of \"product design -> product review -> architecture design -> architecture review -> code -> code review\".
\nDepending on how big the feature is how quickly that happens and some phases might be skipped.
\nI think the bit of our development process I love the most right now is CI and deploys.
\nGrant who's on the team just built a parallelization framework so we can run the tests in about 15 seconds (down from about 15 minutes) using lambda; and once the tests pass master is auto-deployed to canary for 24 hours and then to production.
\n– cirwin
\nOne thing I've really enjoyed in terms of our dev process recently is Zen, a test runner that a coworker wrote that made writing and fixing tests quite nice and enjoyable (ah, Conrad beat me to it, because my n key doesn't work 😃).
\n– Timothee
\n# Q: Have you ever been scammed? – TheOriginalAse
\nA: In small ways, yes — people sneak into the product through friends without telling us, nothing major yet.
\n– cirwin
\n# Q: Do you think that electron is going to work long term? I've worked a lot with electron, really like it from the development side but the RAM usage and a few other things have made me hesitant. – Hum4n01d
\nA: It's a good question. I know the chrome team is pushing on PWAs as an alternative, and I'm excited about that; I also love how easy it is to ship new javascript to devices so app updates can be frequent. I can't see us switching to Swift for a desktop-only app, but maybe we'll use Catalyst to bring the iPad app to MacOS.
\nRAM usage is an issue though, we have a bug in Github about it (and CPU usage too...).
\nI think it's that + DOM + JS — the trade-off for us is that we can re-use a codebase that's been improved for a few years, and anything we do to make it fast on the web makes it faster on native.
\nSo until we're a much larger team, that advantage is likely key.
\n– cirwin
\nWe have customers who want Superhuman in Chrome, because that's where they spend the rest of their time, others prefer not to to separate tasks. Having that Electron layer is really great to update both platform at once.
\n– Timothee
\n# Q: Not sure if it's been asked but do you guys use any UI toolkits like bootstrap or evergreen or material UI? – burtonator
\nA: Not been asked yet. Mostly we built from scratch, we use something similar to BEM for CSS syntax; but all of the UI paradigms are hand-tweaked. We really wanted Superhuman to look and feel premium, and have high information density; most current style frameworks don't push those directions super well.
\n– cirwin
\nAFAI'm concerned, I've found CSS frameworks like Bootstrap fantastic to start fast but cumbersome to maintain in the long run.
\nAt a previous job we use React-bootstrap for our component library, and it was a pain to align updating React, with React-bootstrap, and so on.
\n– Timothee
\n# Q: Not sure if you can discuss, but are there plans to go more mass-market? Maybe a lower price for fewer features and you don't get the personal onboarding, things like that? – Just Lurking
\nA: The real answer is \"we'll find out as we go\", but the current plan is to keep scaling based on onboardings for a bit — it works extremely well for the metrics we care about (Net promoter score, friends referred, perceived product quality).
\nWe'd rather build a sustainable company that focuses on building out things that people value than \"growth at all costs\".
\n– cirwin
\n# Q: Do you guys have any designer on site? How does the process goes at this early on your startup, from idea to production? – pierre
\nA: We do!
\nWe currently use figma for designs, and then do a design review.
\nOne of the fun things we do as a company is friday wins where everyone demos what they did that week.
\nTeresa normally walks us through the designs.
\nOnce we have everything pixel perfect in Figma we'll build it out in the product — and measure it down to the half-pixel to be sure 😄.
\nA lot of it is integrated with the product process I described above.
\nThe ideas come from lots of places, what we want to do, what users are telling us (we have a great dashboard with all user feedback we've received).
\n– cirwin
\n# Q: UI is interesting. What approach have you taken with fonts and text legibility? Oh and is your app multi monitor friendly? – Just Lurking
\nA: To be honest the approach has been \"start with not enough contrast, and bump it up and up and up\".
\nWe also try and detect what monitor you're using, and we bump up the contrast on non-retina displays as they tend to have worse contrast.
\nWe also have a dark theme for people who struggle with reading on a light background.
\nMulti-monitor works, not sure if you were driving at something specific?
\n– cirwin
\nOne thing that's very apparent in the product is our trying hard to not show things that aren't necessary. That helps with clarifying what's important and thus legibility.
\n– Timothee
\nFollow up: No I've just found some non native apps don't work as well on multi monitors. Alerts pop up on wrong screen, app won't stay on designated monitor, stuff like that.
\nWe should get you on a free trial so you can help us find the bugs 😄.
\n– cirwin
\n# Q: Interesting. Do you standardize incoming emails into the same font? – Just Lurking
\nA: To some extent — one of the few things that's shared between the two clients is the heuristics around \"should we render this email as a person-to-person conversation and strip out formatting that looks unintentional\".
\nFor some emails that seem like marketing we leave them alone.
\nBut usually when you send an email with one line slightly the wrong font size, or color, that was a mistake.
\nAnd we want emails to look good in Superhuman.
\n– cirwin
\n# Q: Do you guys have a design system internally? If yes, how far down the process did you guys decide that would be worth to invest on it. – pierre
\nA: We don't yet, but it's something we've talked about. We have a few guidelines and a lot of bespoke UI.
\nAs we build out more and more of the product, things begin to get more similar, e.g. we have a standard way of doing dialogs now which we never used to do.
\nBut a lot of the UI is single-purpose, rendering an email is not going to be reused in a different part of the app 😃.
\n# Q: How is React Native is going? – christoph
\nA: It's going better than ever, I can tell from being around for over 3 years. (you may or may not have something to do with it).
\n# Q: Hey Janic thanks for being here. I have been here for quite a while and been looking for a payment solution in react native. Like any payment APIs related solution in react native? Like react-native-payments. – rizwan_atta
\nA: I'm currently using https://tipsi.github.io/tipsi-stripe/ for payments. I did try react-native-payment but it wasn't as well maintained.
\nFollow up: I have been using this https://tipsi.github.io/tipsi-stripe/ for quite a while but it always snaps back like its real version is crashing a lot! 7.5.0. It is failing on CIRCLE CI too. Build is failing.
\nI haven't seen production crashes with it, we can discuss your issues later if you'd like!
\n# Q: Hello @janic, I'm trying to create something like Instagram in react native , but I stuck on stories screen. Given a screenshot of what I'm trying to achieve. I'm trying to implement Instagram story in my app but how can I add left right tap clicks. The second problem is that how can I display dynamic story count (with stories seen as progress) as shown in top side of the image. Please help if have any idea about it. ![\"help\"](\"https://media.discordapp.net/attachments/193117606629081089/578673414093406228/20190516_183309.jpg\")
\n– JayTailor45
A: You probably want to take a look at the great react-native-gesture-handler library to handle gesture based interactions like stories. I haven't done something exactly like this before but had success implementing a tinder like swipe UI.
\n# Q: What are your thoughts on having official Web platform support in React Native? Is it something you'd support/like to see, or would having one codebase for mobile and web be a detriment in your opinion? – hodgef
\nA: I don't think official support for other RN platforms is necessary. Unless facebook uses it there's no point in having the code live in the React Native repo as it just slows things down.
\nRNW is actually pretty well maintained as an unofficial platform and I'm currently using it to build the web version of Th3rd Wave.
\n# Q: Hi, I have a question, I don't know if you can answer it but I would like your thinking on it, Airbnb is one of the company that try to do a full React Native, but they dropped it for performance issue and others, do you have any thinking on this? – Rose Grenth (Thyrande.7103)
\nA: I think Airbnb is a special case. They already have a large native app and probably were not willing to invest enough resource into their integration between their native and react-native code. If you're starting with a greenfield react-native app you should not have to worry too much about perf and the problems encountered by Airbnb.
\n# Q: GraphQL, imagine you are going to build an app mobile and dashboard and you'll create everything with GraphQL, are you going to create different \"namespaces\", one for mobile and another for dashboard (/mobile/graphql & /dashboad/graphql) ??? ... and how you will manage roles-permissions per query or mutation? (nodejs, php) – klmus
\nA: I'm currently using a single GraphQL endpoint for everything including admin dashboards. My permissions system is not handled at the GraphQL layer but at the service layer so multiple endpoints wouldn't really change much.
\nHowever I can see having a separate API for things like admin dashboard useful but I would split it too much.
\n# Q: Hi Janic, you've been with RN for quite a while. Do you think it's a benefit that a person knows given tool / library for such a long time and so well and one should deepen that knowledge, or do you think it's better to get a broader perspective and be eg. a full-stack developer rather than just doing frontend? Do you think one may get tired of RN after working in the environment / ecosystem for a long time? – vonovak
\nA: I think it does help if you are looking to lead a project. RN has such a huge surface area that you end up interacting with many technologies which is something I really like. I've worked on native iOS, Android, JS, babel transforms, JS packaging, polyfilling web apis and more recently C++ stuff so I never really get bored :).
\nAt my company I also do full stack so I do enjoy backend work a bit (not as much as frontend).
\n# Q: Hey @janic! What are your opinions on React Native in the web? Do you think it still has some to grow and form or is it ready to be used out in production? You'll probably answer \"of course it is!\", but I'm a bit curious about what you have to say. Thank you! 😄 – Martinnord
\nA: React Native for the web is great (using it in production)! I'm working on a component library that works on both RN and web using it. The goal is not to reuse the code as is but to use the same abstractions to build on mobile and web so engineers feel comfortable switching between the 2 platforms.
\nThe api is based on styled-system and I'm looking forward to open sourcing it when I get a bit of free time 😃.
\n# Q: Hello! Me and a friend are very keen to contribute to the React Native project. We have had a lot of problem building from source though. I have tried to follow the 'Building from source'-guide in the docs (before it disappeared a few days ago) and the guide provided by Cpojer, but both guides has led to an error. On Windows you get an error earlier (with seemingly no solution) which is avoided on Mac OS. My question is if there is a thorough guide which specifies the exact requirements, settings and packages needed to get a working build environment going? Otherwise, how do you recommend going forward? And is it even possible to build from source on Windows? – Dalbino
\nA: Developing on Windows is more or less supported sadly. It gets broken quite a bit so you have to be ready to dig in issues. If you're starting to contribute to react-native I really recommend using a mac (not sure about Linux). I did use windows for a while to do work in the RN repo so it is possible but I ended up spending most of my time fixing windows specific issues -_-.
\n# Q: How do you see web development in a few years? Is JS good enough for performance ? Do you think it's the language of the future? – SwiTool
\nA: I think we'll see more different languages used in the coming year because of compilation to web assembly.
\nI think JS is here to stay though, I do enjoy working with a typed version (Flow/TS) the most though. I've also experimented with ReasonML a bit which I find the type system fascinating.
\n# Q: Hey, do you think native iOS/Android development is still important for developers to learn or it's too \"low level\" nowadays like assembly, when you can accomplish most things with RN or similar? Or are we still a ways to go for that? – zpr
\nA: I think this is similar to \"is knowing HTML / CSS / vanilla JS important or can I just learn React\". You can get around fine with knowing just React Native (hello Expo!!) but if you want to be an \"expert\" you need minimal knowledge of iOS/Android.
\nEven for things not related to code it is important to know the design guidelines / UX expectations of the native platforms.
\n# Q: Hello, I can't choose between PHP and MERN stack, I love JS but PHP is very public in my country!! – SirHesham
\nA: I'm pretty sure JS devs are common everywhere now so I'd definitely choose MERN.
\n# Q: What's the best way to jump into graphQL for a node/express/mongo/react developer? – zpr
\nA: I think this depends on how you learn the best. I usually just read through the doc a bit to give me an idea about how a new technology works then apply it in a real project. I'll keep the doc around as a reference and google whatever else issue I face. I also like looking at example projects.
\n# Q: Hi @janic, I'm a finance pentester about to start working with RN defining test approach and collaborating with dev teams on best practice. what are your top 3 tips for product security? – m0ogz
\nA: I'm not a security expert but RN is similar to native Android / iOS so you should use the same security best practices. In practice it's a bit easier to get access to the JS bundle of an app than decompiling an APK/IPA so you should assume your client code is public (you should on native iOS/Android too anyway!).
\n# Q: To continue on the contributing issue. I have tried building from source on a mac as well, following the official guide, as well as, Cpojer's, and I haven't managed to get it working there either. That's why I'm curious if there is a thorough guide which specifies the exact requirements, settings and packages needed to get a working build environment going? And are there any issues you are aware of? – Dalbino
\nA: I think @hector / @christoph are working on updating our contributing guides, you can hit me up with your issue later and I can check if I know about it.
\n# Q: Thanks @janic can you recommend security research resources I can investigate – m0ogz
\nA: I don't know any but if you look for security resources around iOS / Android they probably apply to react-native as well.
\n# Q: Have you messed with using the apollo cache for local state? If so, how was that experience? – timmywil
\nA: I haven't used Apollo much so I can't tell. I've been using mostly Redux + redux persist to handle local state and Relay for backend data. Now that Relay also supports local state I'm looking forward to experimenting with that and maybe get rid of Redux once for all!!
\n# Q: Hi, I'm interested to hear your opinions on the Flask microframework, personally I love coding in python but it seems all the cool kids use NodeJS. – Conviley
\nA: I haven't used Flask before, I'm one of the cool kids that use NodeJS. 😆
\nI found that working with the same language across the full stack makes it easier for engineers to develop a feature completely instead of having to rely on splitting the work between backend and frontend engineers.
\n# Q: What's something you're excited about in the react native ecosystem? – vcarl
\nA: It has to be Fabric. Especially the ability to have code update the UI synchronously.
\n# Q: Any thoughts on ReasonML? Have you used it? – Gabe
\nA: I really like reason, I'm currently using it in some small parts of the th3rdwave backend. I actually wrote a small library to write a type safe GraphQL schema in reason that compiles to GraphQL JS. It interops fully with the rest of the schema defined in JS. https://github.com/janicduplessis/bs-graphql-js.
\nHowever I did take a step back from using it more as I'm onboarding new team members and prefer to keep the full stack in the same language.
\n# Q: Did you have experience integrating in react native with crypto wallet? How and which libraries did you use? – GuyL
\nA: Sadly I don't, I've never worked with any crypto libraries but you can probably either use bindings to native ones or use a browser one if RN supports all browser APIs used by the lib.
\n# Q: For a video calling algorithm like doing it WebRTC and react native, do you have some thoughts on that? I tried it by using an open source npm pkg aka Jitsi Meet! But I was still not able to get a hang of it totally. – rizwan_atta
\nA: Kind of similar to my previous answer, if you can't get the browser library working you can look at bridging a native library instead.
\n# Q: Regarding security, for example Cordova have unique security considerations (was presented in some conference), so I would imagine react native also? Usually related to the layer which connects to the native side and the react developers writing on top of react native not being aware of implications on the native side of what happens. In iOS systems maybe even buffer overflows are a concern!? – GuyL
\nA: React Native doesn't allow arbitrary code execution and all communication is currently done through serialized JSON payloads (this will change soon) so it gets rid of a lot of potential security issues around things like buffer overflows.
\nThe code also runs in the same sandbox as regular native apps so you get all this security layer too. I don't think you need additional security measures as you would in the browser or regular native apps.
","frontmatter":{"date":"2019-05-16T00:00:00.000Z","dateGroup":"May 2019","dateString":"Thursday May 16th, 2019","description":"React Native core contributor. Co-founder @ th3rdwave.\n","location":"Q&A Channel Reactiflux","people":"@janicduplessis\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Janic Duplessis"}}},{"name":"react-native-team-2","relativeDirectory":"","childMarkdownRemark":{"html":"![\"The](\"https://media.discordapp.net/attachments/193117606629081089/576135096860672025/image0.jpg?width=1239&height=931\")
\nThe team hard at work answering questions!!
Hello everyone! Thanks for joining us! We are the React Native team at Facebook and excited to hear what is on your mind!
\nI recently gave a talk at F8 (Facebook's developer conference) that talks about what we've been working on for the last two years and where we are taking the framework in the future. Check that out as well as the React Radio podcast Christoph was on to talk about all the improvements we've been making in the community. You can find the links to both of those here: https://facebook.github.io/react-native/blog/2019/05/01/react-native-at-f8-and-podcast (https://facebook.github.io/react-native/blog/2019/05/01/react-native-at-f8-and-podcast)
\nWe have some new people on our team so they'll introduce themselves once they get set up!
\nLet’s jump in! Excited to answer your questions.
\n— EliWhite
\n# Q: What is the current status of the rearchitecture? – Foyarash\n# Q: Fabric status? – edo
\nA: This work is still under heavy active development. We are doing production testing at Facebook right now for the architecture improvements. There is still lots to do here before we can ship it to all of you and have you rely on it. 😃 We are also answering questions as we go in this github issue as well: https://github.com/react-native-community/discussions-and-proposals/issues/4. It has been really awesome to see some people in the community start getting stuff running in open source and testing with it.
\n– EliWhite
\n# Q: What do you think is the best way to do debugging? I use chrome/react native debugger, and find it hard to trust the breakpoints I set, because they don't always work at the place I set them (they jump around). This is specially hard with template literals and async function). Is this a react native problem, or a chromium problem, and do you experience this yourself? – jarry
\nA: The best way to do JS debugging would be to use the Google Chrome debugger. It's strange that you're running into those problems debugging JavaScript because all the JS should be running in Google Chrome. (We're not doing anything special here). So the debugging problems may likely be unrelated to RN.
\nThat said, we're re-implementing the Google Chrome debugger (to work with the new architecture of RN). This debugger is currently internal-only, but once we're confident, you'll likely see it in open source.
\n– Ramanpreet
\nThe Chrome debugger is great, if your break points aren't working it's probably related to source maps. If you filed an issue we could take a look!
\nWe also use Flipper for debugging native https://fbflipper.com/.
\n– Rick
\n# Q: Are there any plans to support Web as a platform in React Native? – hodgef
\nA: Great question! As you probably know, there are a few experimental projects out there like react-native-web and react-native-dom. The authors of both of those projects have recently joined Facebook and the React org. Also with official support for things like VR and windows, we are very interested in the web. Unfortunately, we have nothing to announce at this time.
\n– Zack Argyle
\n# Q: Flutter seems to be up and coming, and will likely have incredible support for Android. What do you guys see that is lacking in Flutter that RN has advantage over? I personally dislike Flutter's styling and find CSS a lot more comfortable, but other than that, is there good reason why RN is still a better choice than Flutter? – fc373745
\nA: Another thing is the whole Dart versus JS also the community of existing support and adoption of React practices.
\n– luna
\nI am not sure that the premise is true. Flutter is on the same playing field as React Native as far as developing for Android is concerned. That said, the advantage the React Native has is leveraging the hard work that the Android UI team is investing into the Android OS platform. For example, we try our best to expose Android's TalkBack capabilities instead of inventing our own. The other advantage is that as far as language familiarity is concerned, more people in the world are familiar with and contribute using JavaScript than with Dart.
\n– yungsters
\nFlutter. I don't know what this fact means for Flutter and RN, but it's interesting that building RN-renderer that renders in Flutter seems really easy to do, whereas opposite it's practically impossible. 🤔
\n– Valentin Shergin
\nLooks like there are lots of questions about Flutter, I don't think there has been any questions about Jetpack Compose though! That's a cool project too!
\n– EliWhite
\n# Q: Fabric status? – edo
\nA: The core features of React Native are already implemented in Fabric and we are doing production testing at Facebook. All the code of Fabric is open source and you can take a look at it in the github repo. Although, there are still some things to do before we can enable Fabric for Open Source projects.
\n– David Vacca
\n# Q: Brand new trying to learn mobile development -> What would you suggest for them to learn to get started with RN? – espionage
\nA: Try building something with Expo. like a sudoku app or something you can share to friends and get feedback from them on. I find it’s easiest to learn when you have a goal in mind and know what the next thing blocking you is
\n– mehdi
\nThis applies to anyone getting started with mobile dev in general. I recommend reading the Apple Human Interface Guidelines and Android's Material Design guide. Get familiarized with what a good experience looks and feels like on each platform. This will help you craft a higher quality app, regardless of what framework you use.
\n– hector
\n# Q: Detox seems to be the go-to solution for e2e testing RN apps, but occasionally the integration breaks. What does fb use internally for e2e tests? Is there a plan for fb and wix to communicate and cooperate more so that RN and Detox are kept compatible? I'm aware of some Detox tests in the RN repo - is there a plan to extend them, do you accept community contributions? – vonovak
\nA: At Facebook we use a bunch of different testing strategies for products using RN. One of the cool ones is we make it really easy to render React Native screens with mock data, and just assert that no yellow or redboxes show up. It is pretty interesting how valuable that has been.
\nOn the detox side, we have actually spent a bunch of time working with Wix. I spent a week in their office last year to talk about this. 😃 We have added Detox to our CI config for the React Native repo. We have a couple of components with tests for detox, but would love more! These tests even caught a regression in TextInput this morning which is awesome!
\n– EliWhite
\n# Q: How does the process of adding PR's to a release go. If we're currently on 59.8 and a PR gets merged into master today, would it be included in a 59.X, 60.X, or 61.X release? – bondparkerbond
\nA: If a PR is merged right now, it will go to 0.61 because we already cut the 0.60 branch that is going to be published as an RC and stable later. We are now making sure that we only make \"major\" releases when we have exciting new features to share and are also working on making upgrading easier. 0.60 will come with a new autolinking feature that makes it easy to add native dependencies without messing with your project files!
\nIn general, we will backport important security, performance or behavior fixes. Release management takes a ton of time from our contributors, including @grabbou @oldman.Logan and @turnrye among others. If you'd like to start contributing to React Native, helping with releases is a great way to help! Let me know if you are interested (@cpojer on Twitter or cpojer@fb.com via email).
\n– christoph
\nIn general, a PR merged today will not be included in a current release (0.59.9 as of this writing). The changes in that patch should get picked up when the next release is cut from master. There is, however, a process for nominating a patch to be backported into an existing release. This is all managed through the https://github.com/react-native-community/releases repository. In this particular case, if there's any PR that was recently merged but did not make the 0.59.8 release, you can comment on https://github.com/react-native-community/releases/issues/124 and make your argument for getting it cherry-picked. I would also point out that the PR must have been merged, we cannot cherry-pick changes into a release if it's still part of an unmerged PR.
\n– hector
\n# Q: Hi, I'm currently a college student majoring in Computer Science, so I have a general question for the members of the team. What do you wish you knew before you began working in the industry? What path led you to work at Facebook and on React Native? – josm
\nA: How to use source control, what it’s like running a service 24/7. In college I experimented with Haskell and loved it but it was not great at running my website 24/7. I also think it’s good to try building something in college, just to help with confidence etc.
\nMy path: interned at tech companies in my city, then interned at Mozilla, eventually interned at Facebook, graduated and started working here full time.
\n– mehdi
\n# Q: A lot of people are obsessing about react (and react native) performance and trying to optimize everything - how much of this is just paranoia? Do you think there's any overoptimizing going on? And what are legitimate concerns? Sorry for the long question. – Kognise
\nA: I think the reason we see a lot of talk about performance is because React has taken other conversations off the table. There may be some paranoia and over-optimizing, but I like to think most people are just really interested in the topic and want to write the best code possible. Legit concerns are things that you measure and find an issue with!
\n– Rick
\nThere does seem to be some overoptimizing happening around the performance of React. I think that instead of focusing on benchmarks, people should focus on production instrumentation to identify bottlenecks affecting users and opportunities for optimization.
\nFor React Native, we have learned a lot about the performance characteristics of mobile devices over the past year. I'm sure there is some scrutiny over parts that we do not think are problematic (e.g. bridge traffic serialization), but we've definitely identified others that are real concerns. A side effect of the Fabric and TurboModule projects is mitigating unnecessary runtime costs and avoiding operations that scale with the size of your app.
\n– yungsters
\n# Q: What navigation framework would you suggest? – dbar
\nA: I personally suggest the native navigation like wix/react-native-navigation. But there is react-navigation (pure JS solution) that works as well.
\nIf your app eventually will become hybrid (mixed of native screens and RN screens), the react-native-navigation may be an easier path for you, since it would be more compatible.
\n– fkgozali
\n# Q: Do you think the hiring process could be improved/refined? If so, what would you say needs to be changed? – Benzy
\nA: Do you mean hiring for teams at facebook?
\n– luna
\nFollow up: Yes
\nRe: hiring at facebook - I'm sure there's always room for improvement and it isn't like Facebook hiring is an isolated effort; the industry and expectations shift. From what I've seen the culture for hiring at fb is extremely thoughtful and considerate of candidates backgrounds. I'm sure you could reach out to recruiting as well to get their stance.
\n– luna
\n# Q: Should we use useRef to store Animation Value inside, like that: React.useRef(new Animated.Value(0))? – minhtcx
A: Yeah that's totally reasonable.
\n– sahrens
\nIf you want to avoid calling Animated.Value on each render, you could try a lazy initial value with const [value] = useState(() => new Animated.Value(0))
– Zack Argyle
\nAnother alternative is to useRef and only initialize ref.current if it's null.
– yungsters
\n# Q: Performance has been a huge issues for our app in production, what is being done to address the responsiveness of animations? – dbar
\nA: For many many users and products, the RN performance is already more than good enough, but some products push the perf and quality bar even further.\nWe do recognize this issue and we are working hard to drastically improve all aspects of mobile app performance including general responsiveness, load time, and animations. The Fabric and TM efforts are all about that.
\nWe do believe that RN apps can be even more performant than apps written in idiomatic style and using a vendor-provided framework (e.g. UIKit) even if RN uses the same framework under the hood; our data clearly suggest that reaching this crazy-ambitious goal is absolutely possible.
\nThe practical solutions are vary; we are working hard to ship them as soon as possible. If you are interested in details, I would suggest watching commits in the repository marked with \"TM\" and \"Fabric\".
\n– Valentin Shergin
\n# Q: Can you please comment about relay graphql support in react native? – reetkr
\nA: Can you explain a little more what you mean by this? Relay is supported in React Native today, and we use it pretty broadly in our RN apps here at FB. Is there something in particular you're looking for?
\n– janzer
\n# Q: With Turbomodules eventually allowing interacting directly with native views, would it be possible to have a new navigation library that uses native navigation like react-native-navigation but have each view still be part of One react native app(vs each view technically being its own react native app)? – bondparkerbond
\nA: TurboModule interacts with native functions/classes, not native views specifically. You might be referring to Fabric (the UI re-architecture).
\nAnyway, I don't think Fabric changes the navigation concept. Fabric manages individual React Views, outside of UINavigationController/Android Activity/Fragment. So I think the current navigation solutions today will continue to exist. One future direction here is to allow React Suspense concept per React RootView (i.e. preparing react root component before navigating). We'll revisit this when Fabric fully rolls out.
\n– fkgozali
\n# Q: Can react native for windows become a serious alternative to electron? – edo
\nA: I'm super excited about React Native Windows. I love that we've been seeing companies and teams see the value of the React model and bringing it to more frameworks. I know that we are talking about Windows, but it is super awesome that Twitter's website is written with React Native (for web). They don't use React Native on mobile, so it isn't about code sharing for them, they just found that the mental model, primitives, and APIs in React Native is just a better way to build.
\nI'm excited for React Native Windows because Microsoft is seeing this too, they are using React Native Windows for a bunch of their apps and sharing code with other React Native platforms, but even when building for just Windows they are seeing that React Native helps make this much easier.
\nSo in regards to it replacing Electron, I think that is an exciting potential future, but it is definitely not required for React Native Windows to be extremely successful.
\n– EliWhite
\n# Q: Is there any plan to migrate the Facebook App to RN as they are doing the whole frontend with React ,Reason, GQL etc.? – umair170
\nA: Nope. Right now RN screens co-exist alongside native screens in the Facebook app. In general, Facebook is an iterative company, so we try using RN for new things. It also makes more sense for us to build new products instead of rewriting the whole app.
\n– mehdi
\nTo add to @mehdi's answer about RN in the FB app: The new Dating product is partially written using React Native. Exciting!
\n– christoph
\n# Q: TextInput (now talking about iOS but Android is likely similar) is a fairly difficult component (JS <-> native communication) and uses some hacks to get around various problems, while other problems are still present (auto correct changes do not get propagated to JS, some CJK problems). Is the component going to benefit from the synchronous communication made possible and do you plan to revisit the current implementation? – vonovak
\nA: Yes! One of the things I'm excited about for the new architecture is exactly this. Being able to selectively handle some JS callbacks synchronously will enable really clean interop with TextInput, so we will be able to do things like complex input validation without flicker, and generally clean up the whole component. It's not a silver bullet though - TextInputs are generally very complex components with lots of platform differences and bugs but we will definitely be on better footing.
\n– sahrens
\n# Q: Is there any way to use React code in React-Native directly? It’s taking time to change code from React to React-Native. – fgrgec
\nA: There isn't an out-of-the-box solution for this because React Native operates on different primitives (i.e. not div, span, etc.). There are at least several conference talks from the community that share how they do it. There's also react-native-web if you are willing to change how you write web apps using React.
\n– yungsters
\n# Q: How to optimize the performance of Flatlist if I have a huge list and I want to start from the middle or any index far away? – gamingumar
\nA: It depends quite a bit on the details of your app and where your data is coming from and how it's rendered. Ideally implement getItemLayout - then you can make use of initialScrollIndex: https://facebook.github.io/react-native/docs/flatlist#initialscrollindex. You also might want to try using VirtualizedList directly. If you have more specific issues especially with things not working as documented, please file a github issue.
\n– sahrens
\n# Q: With auto adding native modules and making cocoapods the officially recommended method to add libraries on iOS, will we still be able to manually add libraries if we wish? What release will force use of cocoapods for native modules(if any)? – bondparkerbond
\nA: Cocoapods is the recommend way of managing native modules on iOS going forward from 0.60 but it won't be forced on people. You can still manually link your dependencies or use another package manager if that is what you prefer. That means you won't get any of the benefits of the new autolinking system. With autolinking, for example, upgrading will be easier because it doesn't change your project files when you add a native dependency. Instead, native modules are linked into your project during build time.
\n– christoph
\n# Q: Many rn packages break with newer versions of react-native and some require react-native to be downgraded to an older version, is there any better way to manage these dependencies? – AyushAco
\nA: Something I would love to see in the ecosystem is a way for pre-release versions of packages to trigger CI in the projects that rely on them, and for that to report back build status to the upstream project. I think this would radically change the ecosystem of packages and reducing unintentional breaking changes. I actually proposed this feature to greenkeeper back in 2017 but it didn't seem to get much traction. 😃 https://github.com/greenkeeperio/greenkeeper/issues/241
\n– EliWhite
\nTo add to what Eli said: we are hoping to build an \"RNTester\" app (our manual testing app in the repo) in the React Native Community repo that features the top 20 or so native modules so we have something that we can test new releases against. This work hasn't started yet, let me know if you are interested in helping build this!
\n– christoph
\n# Q: What is the difference between being a Contributor and a Collaborator on the React Native repo? What is the best way to help? – bondparkerbond
\nA: We recently published a document that describes the React Native ecosystem, which you can find in the root of the repo at https://github.com/facebook/react-native/blob/master/ECOSYSTEM.md. There's three types of collaborators that we call out in that doc: companies that have been long-time contributors to React Native such as Expo and Microsoft, core contributors that are actively helping move React Native forward, as well as library maintainers in the community.
\nCollaborators are not just limited to those three types, of course. Every day, we have people helping out by filing issues, sending PRs, writing blog posts, and teaching others about React Native. I am currently in the middle of revamping our contribution guidelines to help call out these types of contributions, as well as help people get started on their path as a contributor to React Native. You can see https://github.com/facebook/react-native/pull/24705 for a sneak peek at this rewrite.
\n– hector
\n# Q: I am currently facing some keyboard covering the textinput in RN, are they some tricks when coding to avoid that? – lewatt23
\nA: his can be a tricky issue, unfortunately. I'd start with using KeyboardAvoidingView: https://facebook.github.io/react-native/docs/keyboardavoidingview and see if that does what you need. When I was working on the Oculus app we ended up using a combination of KeyboardAvoidingView and android:windowSoftInputMode on Android to get the behavior we wanted: https://developer.android.com/training/keyboard-input/visibility.
– janzer
\n# Q: Are there plans to add a guide regarding the app submission process? Currently working on my first App Store / Play Store submission, and it's been a little bit of a headache trying to follow along with guides that may have spotty or outdated information. – yeehaw
\nA: We are currently collecting feedback about how to improve our documentation here: https://github.com/facebook/react-native-website/issues/917
\n– christoph
\n# Q: Does any of facebook projects use pure js react-navigation library? – Radical
\nA: Facebook has its own native navigation solution, specific to FB, so nope.
\n– fkgozali
\nFollow up: Any chance it goes open source?
\nNope, it's very FB specific and it's not practical to be used widely.
\nTo clarify: the FB navigation solution is a pure native solution that supports pure native screens/VC/Activities/Fragment. RN screens internally plug into that system, so we treat each screen separately.
\n– fkgozali
\n# Q: Is it possible to use Rust WebAssembly with React Native? – KaGacz
\nA: Maybe? People are doing all sorts of things with React Native, so maybe? I don't think we've heard about anything specific to Rust and RN though.
\n– EliWhite
\n# Q: I see flutter has deep integration with c++ such that it has advantages on animations and some core functionalities. Is react native get such an overhaul to be deeply rooted with the OS so developers can get advantage of performance and native functionalities? –
\nA: In the rearchitecture of RN, Fabric, the core is written in C++ and has sync APIs and we can share the same implementation across all platforms. We expect animation to eventually benefit from the rewrite. See this thread for more details: https://github.com/react-native-community/discussions-and-proposals/issues/4.
\n– Joshua Gross
\n# Q: Can anyone contribute to the react Native project ? Or you need a certain number of years in development? – lewatt23
\nA: Yeah, anyone can contribute! We're working on a new guide for first time contributors, you can preview it here: https://github.com/facebook/react-native/pull/24705.
\n– Rick
\n# Q: What are your thoughts on the recent push by Microsoft to React Native for PC/Xbox/etc. Do you see any cool opportunities to collaborate with them in the near future? – bondparkerbond
\nA: Yeah, there are lots of opportunities to collaborate! We have been for a while actually. We have an open channel with a bunch of folks at Microsoft where we've been talking about the changes to the architecture, some of the stuff they've been working on, and exciting future stuff. Having Microsoft as a partner is really awesome for React Native.
\n– EliWhite
\nWe are already collaborating a lot! We are frequently meeting with people from Microsoft and they are one of our partners who are significantly invested in pushing React Native forward. Even out talk at F8 and their talk at Microsoft Build about React Native Windows were connected. If you wanna learn more about our partners who collaborate with us on React Native, check out this document: https://github.com/facebook/react-native/blob/master/ECOSYSTEM.md.
\n– christoph
\n# Q: Is the new RN going to come with Swift/Kotlin ? – Riba
\nA: We already support integration between React Native and Swift, Kotlin, C# and other languages.
\nIn particular for Kotlin, we are planning to write part of the core of RN for Android using Kotlin in the near future.
\n– David Vacca
\n(From iOS side of the world:) I can clarify why RN iOS does NOT use Swift inside the core.
\nWe do love Swift but seems there is no reason to use swift inside RN because UIKit is written in Objective-C. So using Swift will not improve performance or safety. AFAIK, even Apple does not use Swift much yet, which is really sad.
\nMy personal hope is that Apple is working on a new generation, general purpose UI framework fully based on Swift (and rewritten Swift-powered foundation). After (and if) they release that and after it gets some significant adoption, we can create a fully Swift-powered mounting layer.
\nAnyway, even today Swift apps can use RN as easy as UIKit (because, again, both are written in Objective-C).
\n– Valentin Shergin
\n# Q: How do you feel about OTA update libraries like Microsoft CodePush? Is it worth the extra effort to gain the ability to update without going through the app store for small updates or urgent bugfixes? – BakedBeans
\nA: The OTA capabilities in React Native is an amazing feature you can take advantage of. There are definitely tradeoffs that you need to weigh. There is definitely additional complexity in using it and setting it up. If you are a small group and can just ship new releases whenever, it might not be as worth it. If you are part of a bigger organization with a fixed release schedule of something like every couple of weeks, then having the ability to ship something between releases can feel like a super power.
\n– EliWhite
\n# Q: Where do you see RN in the next 5 years? – espionage
\nA: I provided an answer to a similar question (4 years though, not 5): https://www.reddit.com/r/reactnative/comments/azuy4v/were_the_react_native_team_aua/eib22gs/?context=3
\nI'll reproduce it here:
\nI see the future of React Native in two phases.
\nAt the end of the first phase, I see React Native as a native framework for bridging the React paradigm to any native platform. We're seeing the beginning of this with Fabric and TurboModules by changing React Native to be less opinionated, more interoperable, and more general purpose. I expect React Native to be able to support any native mobile, desktop, or AR/VR platform. We already see a desire for this this from companies wanting React Native for platforms beyond Android and iOS.
\nBefore I move onto the second phase, it's important to understand what we're trying to accomplish with React Native. We are trying to bring React to native user interface development. We think React strikes a very good balance between an expressive and intuitive developer experience and flexibility for framework authors to provide good performance and interfaces.
\nAt the end of the second phase, I see React Native returning back to \"React\". This means a lot of things, and it's definitely more fuzzy. But it will mean converging lessons and abstractions between React Native and React for web. It will probably mean raising the level of abstraction above what developers are currently familiar with on web. Fun fact, Twitter's entire website is already built using React Native (react-native-web). While this might look like some holy grail of \"code sharing\", it is not necessary. I believe it can actually lead to higher quality experiences on all platforms.
\n– yungsters
\n# Q: What does the RN team think about Jetpack Compose? – axemclion
\nA: I am very excited to see Google taking a first party stance on a declarative component model for Android UI development. I think that more players in this space afford more opportunities to share good ideas. Since this project seems to be developed in close proximity with the Android team, I'm excited for any new primitives that they create for Compose that we'll also be able to leverage from React Native for Android.
\n– yungsters
\n# Q: Is there a go-to solution for maps? We need maps for showing places and routes but we've been having dependency problems with react-native-places. – AyushAco
\nA: I believe https://github.com/react-native-community/react-native-maps is the best supported and most used Maps solution.
\n– sahrens
\n# Q: Can context replace redux completely? – gamingumar
\nA: It can if you want it to 😃. There are a lot of similarities. You could even rewrite react-redux using context to simplify a lot of it. That said, the functional reducer approach used by redux is a nice way to compose global state, so I don't think it will disappear.
\n– Zack Argyle
\n# Q: I know that FB team as every team has limits. Do you see any area where RN community should focus more, but you observe it's not? – rostislav.simonik\n# Q: What is the biggest issue on open source right now? – axemclion
\nA: I think we've focused a lot on the technical open source aspects of React Native from our perspectives. We need to do a better job as a team, and as a community, to be more inclusive. For contributors, for speakers, and for thought leaders. I cannot even imagine how many good ideas, opinions and code we are missing out on because we haven't built a group of external core contributors with ideas different from ours. If you'd like to support this effort, please reach out to me (@cpojer on Twitter or cpojer@fb.com).
\n– christoph
\nMetro issue #1 - symlink support.
\n– Rick
\n# Q: Is FB still testing DS/Algos in interviews? – fc373745
\nA: The amount of DS/Algos in interviews depends on the role. For front-end engineers we focus on javascript and browser expertise, not so much on data structures (other than trees since the DOM is a tree).
\n– Rick
\n# Q: Does RN have plans for more officially supporting RNW? RNW seems to be stagnating somewhat. In my company, having Web as a supported 3rd target platform (besides Windows 4th after Microsoft showing ever more commitment to it) would be a great boon for adoption of RN as a whole, in addition to our “traditional” native iOS/Android app development. – Aryan
\nA: We've been watching this work pretty closely. As @yungsters mentioned, we see the future of RN being supported on more platforms. Specifically, we see web support improving by taking a lot of the lessons learned separately in React and React Native and moving them closer together. In fact, Nicolas (creator of RN-web) has joined Facebook and is now on the React core team working on some of these improvements. Something to keep an eye on 😃.
\n– EliWhite
\nTo add to @EliWhite's answer, check out @Rick's talk about touch handling on web here: https://www.youtube.com/watch?v=LhKglxQT4sU
\n– christoph
\n# Q: Is there a way for a component to tell if it's running on react-native vs react web? I wanted to create a component that renders differently depending on which it's running in. – rahsheen
\nA: I'm not sure if this directly answers your question, but you can feature detect the environment?
\nFor example: https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/ExecutionEnvironment.js#L12.
\n– yungsters
\n# Q: Will RN support CSS grid ? – lewatt23
\nA: Don't believe there's any plan to right now. We use Yoga for our flexbox layout engine so I'm guessing we'd need to have a layout engine that's cross platform for CSS grid specs.
\n– luna
\n# Q: This may be more of a support question. Right now it seems that I have built a 32-bit version of my app, and this doesn't seem to play well with Play Store submission, or iOS devices. How can I configure my app for 64-bit? – yeehaw
\nA: Upgrade to RN 0.59+.
\n– christoph
\n# Q: Do any of you develop from Linux? – edo
\nA: Yeah Sebastian uses linux 👨💻.
\n– Rick
\n# Q: I have a huge list without fixed height. What can I do to optimize performance? I use react-navigation and don't want to stagger animations, so I used initialNumToRender={1}, but my users complained about the loading indicator even when offline. – Diego Mello
A: I have a huge list without fixed height. What can I do to optimize performance? I use react-navigation and don't want to stagger animations, so I used initialNumToRender={1}, but my users complained about the loading indicator even when offline.
\n@Diego Mello
\ninitialNumToRender={1} is probably excessive - you should make sure to cover the entire viewport in your initial render. If that's too slow, then you probably have some performance issues with the components you're rendering in your rows that you should investigate. There are a lot of tutorials and tools for performance in React that are applicable to React Native as well. The RN docs are a good place to start: https://facebook.github.io/react-native/docs/performance but there are also posts like https://itnext.io/how-we-boosted-the-performance-of-our-react-native-app-191b8d338347.
Generally, make sure you're not rendering a bunch of stuff you don't need, not doing unnecessary re-renders, make sure you're running with DEV false, use performance tracing tools to find problems, and enable out the inlineRequires performance optimization.
\n– sahrens
\n# Q: Not sure if this was missed, but I'm curious how the RN team suggests handling NPM vulnerability warnings for dependencies of React Native. Is there a better approach than \"wait for a new release of React Native where the dependency version is bumped in the package.json\" or \"fork React Native and update the dependency yourself\"? It's been a significant blocker for our team. – BakedBeans
\nA: Many vulnerabilities are specific to the usage of a package on web or when user input is accepted. Most of these security vulnerabilities, while legitimate, may not necessarily impact React Native. Whenever one does impact products built with React Native, our own internal security team usually escalates it with our team.
\nBut if your concern is resolving these dependencies for the sake of checking an item off a list, I do not have a great response besides upgrading React Native or contributing an upgrade yourself.
\n– yungsters
\n# Q: We have heard that the RN team has grown. Who are the new folks on the team ? @EliWhite said that they would introduce, but not sure if that happened. – axemclion
\nA: I'm one of the new team-members on the RN team - I just joined in September. Previously Yahoo, Apple, and a couple startups. Very happy to be on such an awesome team and cool project 😃.
\n– Joshua Gross
\n# Q: Thanks for all your hard work, will we see any of you speaking at upcoming conferences like Chain React Conf or React Rally? – bondparkerbond
\nA: A bunch of people on our team go to a bunch of conferences. @Rick has been speaking at a couple recently and I just spoke about React Native at F8 (https://facebook.github.io/react-native/blog/2019/05/01/react-native-at-f8-and-podcast).
\nI'll be on the panel at Chain React and React Native EU and we will be bringing people from our team to both of those! We love the opportunity to get to hang out with people in the community in person and hear what is on your mind. Conferences are a great way to do this!
\n– EliWhite
\n# Q: For apps built with Expo, the highest React Native version in use is 0.57.1. Does this mean that it is not currently possible to build 64-bit apps with Expo? (Or is this a more appropriate question for an Expo support forum?) – yeehaw
\nA: Expo is working on upgrading to 0.59, it'll hopefully come soon. cc @brentvatne.
\n– christoph
\n# Q: After all rearchitecture, will RN be \"as fast as native\"? – Diego Mello
\nA: No, of course not. It will be faster. As I said we do believe in that and we have data that supports that.
\nThe core idea behind that is: With RN product developers have a better way to express their idea (the desired behavior), so the framework has more opportunities to optimize that using sometimes very complex and tricky approaches. That includes smaller (faster to load) bytecode, view flattening (drawing optimizations), layout memoization, \"free\" (React-powered) concurrency and so much more.
\n– Valentin Shergin
\n# Q: We're planning a RN workshop/hackathon for our city's JS community, do you provide any resources for community events? What about events in colleges? (Resources don't need to be financial/monetary only, things like content and slides work too!) – AyushAco
\nA: We do not currently have any resources like that. But that is a great idea. We'll consider creating or sharing some resources for this.
\n– yungsters
\n# Q: Next steps after the reachitecture? – Diego Mello
\nA: For us, the next steps would be migrating everything to Fabric, which will take some time; and then implementing all the features and optimizations that will become possible in a post-Fabric world.
\nFor example, building/integrating React Concurrent Mode in RN is one thing we're excited about.
\n– Joshua Gross
\n# Q: What guidelines would you recommend for tree shaking code and bulky RN libraries? – muneneevans
\nA: We don't have a good solution for this right now. At Facebook we use \"inline-requires\" to reduce the impact a large bundle might have on startup. It delays executing code up until it is needed which can speed up startup by double-digit percentage points. If you are on RN 0.59+, check out the metro.config.js file in your project and flip the two boolean switches to true to give it a try: https://github.com/facebook/react-native/blob/master/template/metro.config.js#L13
\nWhile this doesn't reduce the bundle size, it makes it so that the startup time of your app isn't affected as much by the size of your code.
\n– christoph
\n# Q: What distro of Linux does Sebastian use? – optimus_sime
\nA: I'm not sure, and Sebastian is not here right now. But @luna thinks he uses Arch.
\n– yungsters
\nFedora! It's the official supported distro internally.
\n– sebmck
\n# Q: How does Sebastian run iOS? – dbar
\nA: I think he just uses an iPhone.
\n– hector
\nI don't think Sebastian is working on iOS ... or he might be requesting a Mac. We are becoming experts on Sebastian's workflow 😛.
\n– luna
\n# Q: Biometric support is lacking via comm modules how should we overcome this obstacle? – dbar
\nA: Build a module!
\n– christoph
\n# Q: What do you suggest to use as a E2E for RN as Cypress is for web? – Riba
\nA: Laura Medalia had a great talk about this at ReactJSGirls last week using Percy with React Native.
\n– Rick
\n# Q: We see huge companies using RN only partially in their apps. What do you think is the biggest reason for not doing a complete switch to RN? – muneneevans
\nA: I think the biggest reason is that big companies have likely been around for a while and have been building up teams of native engineers. They have apps they've been working on for a long time and significant investment in their infra and teams.
\nI think the next generation of big companies are small companies now, growing up with React Native and getting a lot of value from it. The next couple of years will be interesting to see. 😃
\n– EliWhite
\n# Q: How does mark zuckerberg feel about RN? – wяod
\nA: He's looking forward to upgrading to 0.59. 😄
\n– yungsters
\n# Q: Do you recommend any specific testing libraries? We currently use Enzyme, but are curious about alternatives. – BakedBeans
\nA: I'd recommend against enzyme because it encourages testing implementation details. I typically prefer the react test utils or the react-testing-library https://testing-library.com/docs/react-testing-library/intro.
\n– Rick
\n# Q: Top 3 places to follow / read on whats happening in th RN community... What happening next? – DanSen
\nA: Follow us on Twitter at https://twitter.com/reactnative! The RN community at large also has an account at https://twitter.com/reactnativecomm. I think those are good starting places, aside from the obvious ones (the RN blog, stalking our commits...).
\n– hector
\n# Q: Do you think the job demand for RN will increase as more companies adopt in the next 5 years? – Benzy
\nA: I think so. But if we do our job right, that job description should overlap significantly with any engineer who knows how to use React. I should re-emphasize some of what the team has been tweeting, though. Which is that any good React Native mobile app will require engineers who have the mobile domain expertise of the platform (and who understand the expectations of the users of that platform).
\n– yungsters
","frontmatter":{"date":"2019-05-09T00:00:00.000Z","dateGroup":"May 2019","dateString":"Thursday May 9th, 2019","description":null,"location":"Q&A Channel Reactiflux","people":"@reactnative\n","recording":null,"time":"12:30-1:30pm PT / 7:30-8:30PM GMT","title":"React Native core team (May 2019)"}}},{"name":"kristijan-ristovski","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: With JSUI App, I was wondering if you had to deal with NPM package management or if its offloaded by some other task, I'm building an app in the browser that works a bit like CodeSandbox and needs to download npm packages how would you go about doing something like this safely within a browser? – lifeiscontent
\nA: Nope, JSUI it's just executing node and npm scripts under the hood, so it's not really similar to CodeSandbox. I know Ives has built some crazy stuff to deal with this (you can check out his article) https://hackernoon.com/how-we-make-npm-packages-work-in-the-browser-announcing-the-new-packager-6ce16aa4cee6.
\n# Q: What made you choose Google's Assistant instead of Alexa for the vast array of skills on ok-google. Alexa had a vastly superior app ecosystem already? – sprinting
A: I was using Android so I needed it for me. Honestly I make most of my projects because I personally need them and I think more people should do that because that's the only way you can be authentic when building something.
\n# Q: Redux or apollo or context api for state management? your personal choice! – rezaavoor
\nA: Context and hooks will take you far enough nowadays, so you don't need redux. Apollo state management requires tons of boilerplate and honestly it's a PITA to even change a single variable. I'm using mobx-state-tree for more complex parts of my apps. Observables ftw.
\n# Q: What was your inspiration for creating ok-google? – Kognise
\nA: I was frustrated that I had to look up these lists of commands that were usually posted on Reddit or a forum, and most of the time they were outdated. So I wanted to make a nice and final list .... which ironically is now outdated 😂️.
\n# Q: Is it time I started teaching myself hooks as opposed to using classes? – omgitsgod
\nA: Yes. Especially if you're using tons of lifecycle methods. You can neatly abstract everything away in couple of useEffect(s) and the code becomes way easier to read/write.
\n# Q: What are some ways JSUI improves a developer's workflow over using the command-line? Do you use it more or less often than the command-line? – Kognise
\nA: I'm rarely using the command line, for some very weird things that JSUI doesn't support (like docker). JSUI makes my DX way better because I can be way faster with it. For example I can easily navigate to a project, open it, copy few files, paste them to my current project, etc. Also JSUI's terminal is not as powerful as iTerm etc. but IMO it does some things better. One day I'll push a new version ... one day.
\nOh god did I tap myself on the back with that one \"MY APPS ARE GOOD GUISE TRUST ME\".
\n# Q: Did you get the Google t-shirt/ Home combo for the skills? 😮 – sprinting
\nA: I got shit. I talked to Google for some sponsorship but they were just telling me to email this different person which told me to email another person which told me to email another person and I was like fuck it I'll just use Siri.
\n# Q: What's the thing that you're most hyped about now? React or not! – BTM
\nA: Code wise: I'm waiting for some magical mobx + graphql state management solution for the client, there's some discussion going on here: https://github.com/mobxjs/mobx-state-tree/issues/1148#issuecomment-465538450
\nNon code: THE OCULUS QUEST. I can't wait.
\n# Q: If you've heard of it, what are your opinions on Svelte and how do you think it compares to React? If not, please ignore. 😛 – Kognise
\nA: I've heard of it but I'm not interested because I cannot switch my mindset from JSX to HTML. No matter what the benefits are it's gonna be a huge backwards step in DX for me.
\n# Q: I recon you been praising mobx-state-tree on twitter earlier as well. For someone who finds the docs lacking of more \"complex\" examples in, let's say, a real world app - do you have any good pointers for read / OSS? – Beazt
\nA: Ah to be honest I haven't even read the full docs. Have you watched Michel's course on egghead? I'm just writing my apps and peeking at the docs (or spamming Michel in his DMs) when I stumble upon a roadblock. I'm not using any super-advanced features from MST so maybe I'm even missing something.
\n# Q: Love your videos. Is your hotel room door closed now? – Gabbo
\nA: Thanks! 😄 I'm just working on the new vlog and there's a scene where I'm checking the door twice 😂️.
\n# Q: You mentioned earlier how “context and hooks will take you far enough nowadays”, what use case(s) would you use Redux for? – Brady.
\nA: As I said, I'm not using Redux anymore. When you get used to the observable model in MobX and mobx-state-tree, writing Redux feels like writing jQuery... I'm using MST when I have some complex models, for example I have a \"CalendarPlanner\" component that has ~600 lines of mobx-state-tree code. If I wanted to write that with hooks and context it would be a major PITA.
\n# Q: When will we see a kitze vs kenwheeler arm wrestle? – ecmaplasm
\nA: Why would you watch a video that lasts 0.2 seconds.
\n# Q: Just tried your Sizzy app for my localhost project. It's not SSL enabled. The moment I entered http://localhost:3007/ , it went into infinite loading. Means its loading again and again. – puspen
\nA: Stay tuned, an interesting release is coming soon (DM me if you want to test).
\nFollow-up: Thanks. DM you where? Discord?
\nTwitter is better, my DMs are open https://twitter.com/thekitze.
\n# Q: There are multiple ways to make money as a software engineer: employment, freelancing, contracting, consulting, workshops, selling things online, building a business, etc. How's your thought process on the subject to choose which one of these to do? – Bruno Lemos
\nA: I just rolled with the flow. I started with a normal dev job, then saw that freelancing can bring you 10x more money, then worked as a freelancer for ~1 year, then saw that doing workshops is super-interesting and can also bring you more money, and now I'm just jumping to the next thing that's exciting, challenging, and can bring more money: which is SaaS products. I love teaching people, and I'll keep doing it, but sometimes it gets repetitive and boring, and the business doesn't scale as well as a SaaS. Also building actual apps is way more challenging than just teaching the same material over and over again.
\nHopefully this answers the question?
\n# Q: What's the coolest tech thing you've done recently? (or coolest thing period!) – Iggytoad
\nA: Uhm I guess https://twizzy.app/.
\n# Q: Do you plan sharing some $tats of your Twizzy app? 😛 – Bruno Lemos
\nA: Lol people think I made a fortune out of this app, but it made less than 600 euros overall.
\n# Q: Considering you not being by birth genius, how much time, efforts did it take to become who you are today? – puspen
\n# Q: What is the roadmap to become you? – FastCoding000
\nA: As I said before, all of the apps I have released were just a solution to my own problem. I think more people should just sit down and think what problems do they have, and try to solve them with software. Even if an app seems like a stupid idea at first, you'll soon figure out that other people have that problem and you can sell it to them, and improve it together.
\n# Q: Do you have any recommendations for coming up with interesting ideas for OSS? I know you previously mentioned it should be software that you would personally use, but I’m still having a hard time coming up with useful software that other people will actually use. – Brady.
\nA: Same like with my apps, the things that I have open sourced are just solutions for my problems. I cannot come up with an interesting OSS idea out of the blue. Just solve one of your problems and open source the solution 😃.
\n# Q: You mentioned you bring in 10x more money doing freelancing. Could you be more specific? I know if varies per client/project etc, but how much do you charge for things like that? And for the teaching of courses, do you charge a flat fee or per seat? – foo
\nA: Nah, the first job that I had paid very bad. So jumping to freelancing and working from some European clients was a big shift from me (hence 10x). When I got used to it I was just increasing my rate every few weeks or so. About charging, it really depends. Sometimes it's per seat, and sometimes a flat fee, it really depends on the company/conference we're organising the workshop with.
\n# Q: Please from your answer to @Bruno Lemos question, are there any free learning resources from you one can make use of? – shinyuy
\nA: The workshops that I'm doing (https://reactacademy.io/) are in-person only, for companies and conferences, but I'm gonna release an online version of them soon.
\nBut I started documenting my journey on https://youtube.com/kitze (conferences, traveling, speaking, ideas etc.) so you can expect more content there.
\n👆 the description of the channel is a lie 😂️.
\n# Q: You have a great number of followers on twitter. Is that something you do on purpose (building an audience)? Which opportunities has this bring to you? – Bruno Lemos
\nA: Most of them are fake I bought them from Russia.
\nLol on a serious note I have no idea how to get followers. I just tweet a mix of helpful and funny things I guess it works 🤷♂️.
\n# Q: When do you reach for mobx-state-tree vs plain mobx? 😄 – spion
\nA: Good question, I'm only using MST nowadays because it gives me structure for the store and it allows me to access the parent/root state without any hacks. How about you? 😄
\nFollow-up: Plain mobx, state-tree still feels too opinionated 😃.
\nThat's also true. I'm keeping my eye on https://overmindjs.org/ and I want to try it for a project.
\n# Q: Possibly unrelated, but are there any plans for a React Academy in Dallas any time soon? 😛 – yeehaw
\nA: I haven't done a workshop in the USA yet (too far tbh) there's a bigger chance that I'll release the online version first.
\n# Q: What's the most powerful thing in react, in your opinion? 😃 – James J
\nA: Currently: the useEffect hook, it's amazing.
\n# Q: What do you think of Ken's React in Canvas thingy he did some time back? – sprinting
\nA: I can't wait for him to save us from the hell that's the DOM.
\n# Q: Do you think ReactN or a similar approach will replace Redux in the near future? – zeferinix
\nA: What the hell is ReactN. I've never heard of ReactN but I'll check it out after this ama.
\n# Q: You seem to workout regularly. How's your work-life balance? – Bruno Lemos
\nA: I'm trying to work out 6/7 days of the week. It's just a habit by now. I was using this challenge 2 years ago: https://medium.com/@kitze/how-i-tricked-my-brain-into-working-out-24-times-in-30-days-64010244dd14.
\nI'm using https://www.dejal.com/timeout/ to force me to take breaks from the computer every 40 minutes because otherwise I can sit down for hours which is terrible both for the back and for the mind/concentration.
\nIf you're a dev trying to get in shape, join our slack: https://bit.ly/twitter-workouts.
\n# Q: Which podcasts have you been listening to? Which ones you recommend? – Bruno Lemos
\nA: I'm completely hooked to Bill Burr's \"Monday Morning Podcast\" which is a comedy but I've listened to every single episode and I'm laughing my ass off. The dude's bananas. I also like JRE and Kevin Rose (and have 12 other ones that everyone listens to but I just ignore).
\nKevin Rose's podcast is underrated IMO. I like it way more than Tim Ferris. It's just a shame he doesn't post that often https://www.kevinrose.com/.
\n# Q: How did you get such a cool name? I want one please 😃. – Gabe
\nA: ebay.de
\n# Q: Can i be on the vlog. Just kidding 😄 maybe when I go to Europe. – Bruno Lemos
\nA: Waiting for you to come to Europe 😄.
\n# Q: Best Sushi in Gdansk, where? – BTM
\nA: Koko Sushi 🤷♀️.
","frontmatter":{"date":"2019-04-18T00:00:00.000Z","dateGroup":"April 2019","dateString":"Thursday April 18th, 2019","description":"Founder of React Academy. Working on @twizzyapp, @sizzyapp, @jsui_app, and http://ok-google.io.\n","location":"Q&A Channel Reactiflux","people":"thekitze\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Kristijan Ristovki"}}},{"name":"ryan-florence-2","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What does Ryan do? – Zach James
\nA: I write OSS like React Router, Reach UI, and I teach React at workshops and online with reacttraining.com.
\n# Q: What is your preferred way to unit test with react? – jmager
\nA: I actually don't write very many unit tests for my components, but I use Jest. If I've got some sort of algorithm that I want to \"get right\" and I know the end from the beginning, I use tests to help me. And I'll pull that code out into a separate function so I can unit test it separately.
\nBut in general, I test the public interface of things only: what the programmer consuming my lib is going to do with it, and what hte user is going to do with it.
\n# Q: Is react ideal for learning alone as react-native or use a MERN stack? I've been meaning to learn it for a while. – root
\nA: I don't know what MERN stack is.
\nI think learning React Native only is fine, don't have any strong opinion there though.
\n# Q: If you had to choose something other than react, what will you choose and why? – Deleted User
\nA: Hmm ... I mean, all the popular things are appealing for different reasons.
\nVue: super easy to get started, friendly to less JS heavy folks, .vue files are appealing, lots of out-of-the-box functionality.
\nEmber: focused on the entire experience from the CLI, to the bundler, to the code you write, makes for a great experience.
\nAngular: TypeScript is first class, concerned about the whole experience too.
\nSo I guess ... anything! Haha, but I'd probably go with Vue.
\n# Q: Hey Ryan. We're about to embark on a huge project that requires WCAG AAA compliance. Do you think its worth it to start using Reach UI now as a starting point and have our QA team contribute back to the project as we go? – doodirock
\nA: Yes, please do! It's not 1.0, but it'll be a great starting point, and if there are problems you run into, let me know and we can merge in PRs, or I can fix it, or you can copy/paste the code into your app if I'm too slow 😃.
\n# Q: Hi Ryan! What do you think about coding bootcamps such as LambdaSchool? Do you have any particular thoughts or regards to them, specifically LambdaSchool? Thanks. – okla
\nA: I love bootcamp grads. Not only are they often more mature co-workers, but they bring so much enthusiasm it's awesome.
\nThey also bring a lot of diversity that our industry needs.
\nAs for specific bootcamps, I dunno, I don't know much about them, I really just know the people they've helped 😃.
\n# Q: Are there any things in the area of accessibility you feel React Native could improve? – empyrical
\nA: I actually don't do anything in React Native, so I dunno. But I know that iOS is a whole lot easier to make accessible than the web, so whatever RN needs to do, it's probably just handing off props to the native views.
\n# Q: Thoughts on redux vs hooks? – Dan
\nA:
\nimport React, { createContext, useReducer, useContext } from 'react';\n\nconst Context = createContext();\n\nexport function AppStateProvider({ reducer, initialState = {}, children }) {\n const value = useReducer(reducer, initialState);\n return <Context.Provider value={value} children={children} />;\n}\n\nexport function useAppState() {\n return useContext(Context);\n}\n^ Redux as hooks.
\n<AppStateProvider reducer={fn} initialState={...}>\n <App/>\n</AppStateProvider>\nconst [state, dispatch] = useAppState();\nand then middle where is just useEffect
\nuseEffect(() => {\n localforage.setItem('state', state);\n});\nAND IT SSO COOOOOOOOOOOOL
\n# Q: Best way to learn react for a beginner? – DanSen
\nA: Come to a workshop, ofc!
\nI dunno. I really like Tyler McGinnis, he's got some good online courses for beginners. We plan on having some more online material for beginners this year once our workshop tour is over.
\n# Q: Who makes the best fast food cheeseburger? – aweary
\nA: If I want to be friends with somebody from california I will say In-n-out.
\nBut smashburger, by a long shot.
\n# Q: What motivated you to start doing training as career and where do you think it will take you in 5 years time? – orta
\nA: I was actually a TA in college for economics and really loved teaching. I was a missionary for the church of jesus christ of latter day saints and loved teaching my beliefs there as well.
\nOut of college I was a financial advisor/planner, and it was fun to teach people about interest and opportunity cost and stuff.
\nIn HS/college I had a punk rock band and loved performing.
\nSo I guess I've just kind of always been up in front of people either entertaining or teaching them.
\nBut specifically, I was training the teams at work on React and had a little repo on github with the material, I started getting email from people to train their teams, I said no thanks, then Brian Leroux told me how much he used to charge for phone gap training, so I quit my job immediately and started React Training 😂.
\nIn 5 years ... I'd like it to not be \"The Ryan and Michael show\". So the company has value besides our faces, so we've hired some employees, instructors, and gonna try to make this into a company that really supports the community by providing top notch training for development teams.
\n# Q: Will be starting my first fulltime software developer job out of college, what are some of the main points of react that I should touch? The stack that I will be dealing with is React + C# backend. – espionage
\nA: React is small, so all of them 😆. Rendering elements, components, state, effects, that's really all there is to it.
\nI still really like the official tutorial and docs for beginners.
\nThe most important thing to be successful with React is JavaScript.
\n# Q: Hi Ryan. First of all, thanks for this Q&A. The only issue I've noticed so far with hooks is when you use useState and try to use the set function that it returns, you cannot set a callback function like you can with setState in non-hooked react. Is there any easy way around this besides trying to use useEffect? Because one issue I ran into was trying to set the state in a function but not being able to utilize that new state within the same function due to asynchronicity. – Kyruski
\nA: Hmmm.
\nI miss that callback too for \"transactional interactions\" managing focus is usually not something I want to be \"reactive\", but rather something to be done after an action.
\nBut trying to access the the \"new state\" after setstate isn't ever necessary.
\nlet newStuff = 'blah';\nsetStuff(newStuff);\ndoWhateverWithStuff(newStuff);\n# Q: When working with react-native is there any way to force a user to update the app, or at least warn them that there is a new app on store, and disable the current one? Thanks. – humarkx
\nA: I don't really know RN.
\n# Q: What are some ways to optimize a react app? – Dan
\nA: I'm working on a workshop lesson on that right now. You have 3 tools:
\nuseMemo helps you optimize expensive app calculations.
\nuseCallback helps you make other hooks and React.memo happy.
\nReact.memo helps React avoid diffing your elements if you don't need to.
\nAfter that, it's all the same as optimizing any JS, or code for that matter.
\n# Q: Where was your mission call? – joestrouth1
\nA: Boston May 2000-June 2002.
\n# Q: What is one thing that you would like to add to the react? – Deleted User
\nA: react-call-return https://www.npmjs.com/package/react-call-return
\n# Q: What are some of your favorite tools to use with React? – Erik
\nA: FIREBASE!
\nWe even have a course on it: https://reacttraining.com/courses
\n# Q: Thank you for doing this Q&A session! What tips do you have for developers working at their first development jobs? What did you do personally to level up professionally in your development career? What would you do differently looking back? – MichaelJamie
\nA: Read a lot of code. Realize your'e probably better than you think, and your heroes are worse than you think.
\nDon't get upset at code reviews, don't worry too much about what blog posts are saying, trust your gut.
\nPersonally I leveled up by publishing the tools that scratched my itches, I regret a lot of arrogance and getting angry at other people's \"crappy code\".
\nFew people like other people's code right away and nobody likes their code in 6 months from now. So just get over that a lot of code is not how you would have written it today, and just work on making it do what it supposed to do and if its a little hard to read or understand, try to improve it incrementally.
\nDang, only one thumbs up.
\nSeriously, get over it everybody, your code is crap, just like mine and everybody elses 😛.
\nHahaha, okay.
\n# Q: What does the roadmap for Reach UI look like? Do you know how many components it will eventually have? – harryhedger
\nA: If there is an aria role, there will be a reach component.
\nSo pretty much all of these: https://www.w3.org/TR/wai-aria-practices-1.1/.
\n# Q: What's the future of Reach Router? – TreTuna
\nA: Been to busy prepping our workshop tour (PLUG! https://reacttraining.com/workshops) but the plan is to merge with React Router because hooks are the perfect excuse to introduce new, and simpler APIS.
\nBoth projects will be 100% backwards compatible in the next release that introduces some awesome stuff.
\nIt's really a solid merge of React Router's API, Reach Router's API, and then all new APIs built on hooks, and it removes a lot of the sticky parts from before now that we have a better state/behavior composition model with hooks.
\nMost of the code is already written, we just need to polish it up and double check the compatibility with the current APIs.
\nThe surviving project will be React Router, but the new API isn't more similar to one or the other, so both are still a great choice.
\n# Q: How do you test your Reach UI components with screen readers? Do you know if you can automate these? – Weyert
\nA: I test manually in the screenreaders myself, I also have friends who have disabilities (liek blindness) who I reach out to. Before the 1.0 release though I'm going to hire web aim to do a professional audit to make sure it's all WCAG compliant, etc.
\n# Q: Hey Ryan! Thanks for the Q+A session. Do you have any preference over form handling libraries in React? Redux forms always felt heavy, and a few people have recommended Formik. Do you side with any in particular? – Phunk
\nA: Forms are funny. They are soooo tempting to abstract over. I usually just one-off any form I have, but I've looked at formik and it looks great if you want an abstraction, but I wouldn't be in a hurry to abstract over forms:
\nForms are inherently about state and elements, turns out that's exactly what react helps you manage.
\n# Q: So should I learn hooks? It's something I haven't really looked into deeply yet. Also should I learn how to use typescript with react and is it good practice to be using typescript with react. – Dan
\nA: YES! In a two years react code w/ classes is gonna look like that \"weird old stuff\". Also, hooks are not that hard to learn, and we've got tooling now (eslint \"react-hooks/rules-of-hooks\", \"react-hooks/exhaustive-deps\") that prevents you from hitting the hard parts ... you don't even have to know why you should do something the rule says if you don't want to!
\n# Q: Will the new router be dropping the cloneElement usage that Reach Router and RR's Switch use? cloneElement is one of those things I am very frequently recommending people avoid because of how much it breaks the React flow. – samsch
\nA: It doesn't break react flow, but it does prevent some forms of composition (or just makes it trickier and frighteningly implicit).
\nBUT YES!
\nInstead of cloning, you'll have a hook to access routing data:
\nconst params = useParams();\nconst { location, navigate } = useLocation();\nI'm really excited about it.
\n# Q: What is your favorite kinda music? – pixelcure
\nA: Late 90's (pop) punk: Sum 41, Lagwagon, Blink, Suicide Machines.
\nAnd bob marley.
\nLATELY THOUGH I've been listening to our own Brian Vaughn's album on spotify and it is legitimately good. Look up \"Pinwurm\".
\nHe's on the react team at FB, and authors react-window/react-virtualized.
\n# Q: Have you heard that buttons shouldn't have cursor: pointer? According to W3C user interface guidelines, pointer should only be used on links. It's interesting because it's so ubiquitous, and I haven't seen anyone actually do it yet. Thoughts? – harryhedger
A: I have opinions here. I don't like that web designers have pushed us that direction, cause native buttons don't have cursor: pointer either.
\nHowever ... the web interfaces are often more content heavy than an OS UI, so maybe it's a good thing to call out interactive elements more clearly? Maybe on native you don't need to because most elements are interactive? I dunno, would love to see research.
\n# Q: What would you be doing if you weren't programming (and/or you weren't working on react). – the coder
\nA: I was doing software sales before software development, so probably that.
\nMight have more money too if I had stuck with it 🤔.
\n# Q: What is the key to success? – the coder
\nA: Success breeds success.
\n(stack overflow? ... get it?!)
\nSeriously though, I think to have success you have to define what it means, and for me it's not a destination, it's just working toward helping others and having fun.
\n# Q: Do you ever go to React NYC meetups? I'm not sure where you are based but I watched Michael Jackson speak at Stash on React Router and some intro React stuff and it was awesome listening to him talk! – pixelcure
\nA: Yep, I've spoken there, the meetup didn't line up with our tour schedule this time around though.
\n# Q: Tips on how to get your first job as a react developer? – Dan
\nA: Sorry, it's been too long since I've looked for a job, so I have no idea what it's like anymore. As a hiring manager though I loved reviewing people's personal projects, but I realize now that's not always possible to do for everybody.
\n# Q: Should software developers work exclusively at software shops? (as opposed to some other kind of business who may have one or two devs). – the coder
\nA: I'd love to be a single dev at like ... a local carpet business, that'd be a dream job, use whatever stack you want, set your own pace, have a HUGE impact on the business, that'd be awesome.
\n# Q: Besides react 😉, what should devs be learning right now? – the coder
\nA: I dunno, seems like your next job will probably be using Typescript.
\n# Q: Any tips for getting a job with you at React Training? 😏 – Alex 🚀
\nA: I have recused myself! I'm not really in charge of that, but I will be interviewing people that make it far enough.
\n# Q: Speaking of TypeScript, any chance you'll use TypeScript directly in reach-ui? I have a typedef PR sitting in the issues still, but typedefs are kinda weird 😛. – harryhedger
\nA: I was going to, but just didn't have the time or mental space to do it, maybe in the future though. And really, you can't type the element hierarchy, which is 80% of the API, so it's not that beneficial until TS gets some new tricks.
\n# Q: How come your focus shifted to accessibility with Reach router? did something happen or is that how you've always thought? – A Red Herring
\nA: I've always focused on accessibility but kinda fell out of it after I quit my job and started react training, it just hit me one day to get back into it.
","frontmatter":{"date":"2019-04-15T00:00:00.000Z","dateGroup":"April 2019","dateString":"Monday April 15th, 2019","description":"React Router Co-Author | reacttraining.com\n","location":"Q&A Channel Reactiflux","people":"@ryanflorence\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Ryan Florence (April 2019)"}}},{"name":"kent-dodds","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Hooks all day or still using some Classes? — joel
\nHooks all day. I leave the classes that work as-is unless I have a good reason to change the component. I know some teams want to have consistency in the codebase and that’s up for you to decide. But for me I think it’s probably best to keep moving forward and refactor as you go/feel the need.
\n# Q: What’s your go-to toolchain for creating React Component libraries? — Rangu
\nMy go-to toolchain is kcd-scripts. I use it for all my open source projects and it’s fine-tuned to the way I like to build libraries.
I write about this here and here.
\nOne thing you may consider is micro-bundle which I hear is really great.
# Q: What open source are you working on right now? — alexanderson1993
\nI’m working all the -testing-library stuff (react-testing-library, dom-testing-library, etc.) pretty heavily. Looking forward to doing a minor but needed breaking release for them WRT how getBy queries work.
Also, my website is open source and I’m spending a lot of time there (please don’t look at the code as I haven’t had time to clean it up yet).
\nAnd all my teaching material is open source as well so I work on that a lot. I’m really excited about the remote workshops I have lined up!!
\nMost of my ~150 npm packages are either \"finished,\" deprecated, or I’ve handed them off to other people who are actually using them. Pretty happy with how things are going in the OSS stuff I’ve been doing 😀 Thanks for the question!
\n# Q: Hey Kent, I’ve read you have 4 children. How do you balance being full-time creator and family life? — latviancoder
\nThat’s a good question. I’ve been asked about that a lot. I think you’ll probably appreciate this blog post which pretty much addresses it directly.
\n\nI hope that helps!
\n# Q: How to migrate a jquery based multi-page website to react gradually? There is currently webpack bundle per page and a common bundle. The server return server rendered html and the jquery sets up all the events. How would you start and which steps would you take to migrate this? — guylando
\nThat’s a great question! I think that one of React’s strengths is the ability to work within an existing framework (or \"frameworkless\" app). I would recommend the most impactful thing you could do is add it for a very small feature.
\nAnd as always with migrations/refactors, try to do as little as possible. If you do too much it becomes hard for reviewers to give the code a reasonable look to make sure you’re not breaking things. Also, if you go off for a long time on a branch you’re making refactorings to and have to stop then the merge conflicts you experience when you get back to it are… ridiculous.
\nOn this subject, I recommend giving this talk by my friend and old co-worker Jamis Charles a watch.
\nGood luck!
\n# Q: What part of the toolchain do you feel like is most lacking? — Іggytoad
\nThat’s a good question. Hmmm… I’d have to give that one more thought, I honestly don’t know. There are definitely things that I’m not happy about with the toolchains and I’m excited to hear about \"Rome\" which Sebastian McKenzie is working on. The biggest limitation of tools of today I think is that they all operate separately so there are lots of optimizations we just can’t make. Seb’s tool comes with everything out of the box and because of that he can optimize it to make it crazy fast and give a great experience. We’ll see though. All I’ve seen are a few screen recordings 😀
\n# Q: I find you’re techniques for writing reusable components very helpful but I’m having a hard time trying to find situations in my code where I can apply those code reuse techniques, everything I write seems very un-reusable due to having to talk with the server, etc… any advice? — cashlesscactus
\nInteracting with the backend always complicates things. I think that Suspense will allow us to do a lot of cool reusable things in our components despite the need to communicate with the server. But typically I find that components that need to request their data or make updates on the server aren’t great candidates for reusability and should just be coded as needed.
\nRemember though that the patterns I talk about (like here) aren’t only about reusability but also about simplifying the APIs of components. You can also split a component up from the part that does the server interaction stuff and the part that does the fancy UI stuff.
\nI hope that helps!
\n# Q: Do you think that in the future Context can evolve to the point that it can handle high frequency re-renders? — hambaga
\nI believe that the React team is super great at what they do and they always seem to solve the biggest problems in React (even when the solution is totally non-obvious… I mean really, who saw Hooks coming!?). So yeah, I think that the React team can solve the context high-frequency re-render issues. I’ve not personally experienced this issue much though. It’s possible that’s because I limit how much state I share globally and prefer to keep state as close to where it’s relevant as possible. So I think there are some code design-time things we can do to reduce the impact of these problems. Also, I’ve found that splitting your data into multiple contexts can sometimes help with this problem as well because then the consumers only consume the data they need and will only be re-rendered when that data changes, not when any data changes. I hope that helps!
\n# Q: Where do you get motivation to create some project? — mishaor
\nMotivation for me is typically driven by pain. I have a pain and want to solve that problem. You have to be a little self-aware to know when what you’re experiencing is pain that you can reasonably solve. If the deploy takes too long, don’t just accept that as a given, but recognize it for what it is: pain. And it’s probably pain that you can solve. But be reasonable about it too. For example, I have tons of pain points with twitter as a platform. I could solve those by building my own social media platform, but that’s just not reasonable with my constraints 🤷♂️
\nWhatever it is, the pain gives me the motivation to work on something. Also the fun of coding 😀
\n# Q: What else are you good at? How does writing software / problem solving impact this other skill and vice versa? — fcalise
\nThanks for the question! I’m actually working on a fantasy novel. You can read the whole manuscript.
\nWriting software has helped me develop a problem-solving mind where I can recognize problems with my book and think methodically about how I can solve those problems. I’ve also been able to train my brain to listen to podcasts at 3x speed thanks to years of listening to dev podcasts, so when I decided to start writing, I was able to consume vast amounts of podcasts and videos about it really quickly 😀
\n# Q: How much more or less work do you feel like teaching is compared to \"regular\" development? — samsch
\nInteresting question. When I was working full-time as an employee doing \"regular\" development, I always spent ~40 hours a week working and then did the teaching stuff after hours.
\nNow that I’m a full-time teacher, I spend ~40 hours a week on the teaching stuff and enjoy my life and family after hours 🤷♂️
\nSo it’s hard to compare them, but you’d probably be surprised how much time and effort goes into getting material prepared for teaching (in any format) 😀
\n# Q: What’s your overall impression of React Apollo? — hambaga
\nI’ve never used React Apollo actually. I had a graphql project at PayPal and we only had a handful of queries/manipulations we needed to run so I made the decision to save on bytes (the graphql package is HUGE) and we used graphql-request instead.
That said, if I were building an application today that made heavy use of GraphQL on the client then I would start with React Apollo, though I’d probably investigate urql as well.
# Q: Do you think that we as senior devs or team leads should aim to teach useEffect to satisfy asynchronous calls, or should we continue to teach componentDidMount in favor of waiting for the async render API? — ColonialSpew
\nI strongly recommend teaching hooks over anything else personally. Some people like the class APIs, but that’s totally not me. I wouldn’t recommend waiting for features (like Suspense). Just take what we have today and write the best code you can think of with the APIs we have today. Don’t ignore the future, definitely keep it in mind (as you always should), but focus on the here and now.
\n# Q: Do hooks offer the same functionality as the Component API, or does it take a different mindset when working with them? (i.e. this hook can be used in place of componentDidMount, and this hook should be used as a replacement to componentDidUpdate, etc) — munsterberg
\nHooks allow you to do (almost) everything you could do with the Component API. It definitely takes a bit of a different mindset. You think less in lifecycles and more in changes of state over time. useEffect is sorta the replacement for cDM and cDU, but it’s slightly different. I strongly recommend anyone wanting to get into Hooks look at these resources:
\n😀
\n# Q: While working at Paypal you were still doing talks, creating courses and contributing to personal open source projects. Did you have to negotiate it with your employer? If yes, how did you convince them that it is worth it? — latviancoder
\nI’ve been doing side-stuff since before I even graduated college. So before starting with every employer I’ve had, I communicated clearly the things that I’m involved with and it was understood that I would continue to do those things insofar as it didn’t interfere with my job.
\nAt PayPal, I was able to do a lot of stuff on the job actually (like blog posts and livestreams). I talk about that a bit in this post.
\nI hope that’s helpful!
\n# Q: What would you recommend to someone who would like to get a job in the US but does not have a degree? In other words: Do you take degrees into account when hiring foreign applications that require visas? — github
\nI’m probably not a great person to ask that question to I’m afraid because I have pretty much no experience with that. I have been asked this a lot and I responded on my GitHub AMA.
\nMaybe that’ll help, but I honestly don’t have too much feedback there because I’ve never even interviewed someone in that situation 😬 Sorry.
\n# Q: Is react-testing-library easier to test components with hooks than enzyme? Would you make a quick comparison with current React testing tools? — Henry_Z
I’ve spoken and blogged about this extensively. The best summary that I can give you of why react-testing-library is better for your tests than enzyme is here.
\nI’ve also given a talk about this.
\nBasically it comes down to the fact that enzyme exposes APIs that allow you to test implementation details which makes your tests provide little-to-no value and a lot of friction. react-testing-library is founded on the philosophy that \"The more your tests resemble the way your software is used, the more confidence they can give you.\" It works out really nicely that this also means that it doesn’t matter how you build your app, your tests with react-testing-library will still work! Many people have told me that they’ve refactored their apps to hooks and their tests continued to pass thanks to react-testing-library 😀 React is an implementation detail.
\nI hope that’s insightful/helpful!
\n# Q: Regarding the migration from jQuery to React. You responded to start with writing a small new feature using React. The question is what to do with the currently server rendered asp.net html returned to the client side? To gradually take off blocks of the html and turn those blocks into react components? Also: I saw suggestions to wrap the whole existing page initialization code into a react component and then refactor that component, any thoughts on that? — guylando
\nThose are both ways you could do the migration and I’ll be honest most migrations I’ve done have been a mix of both. The big day is when you swap the client-side router from framework Old to framework New. Typically that’s a big day because it results in a lot of bugs and it’s really hard to do. This is why I suggest starting small at first, then slowly letting it take over. A lot of places will also say: \"Everything old stays as-is and everything new React.\" This is often a bit of a problem because if you require that all new stuff is React it typically means that you need to re-implement a TON of reusable components before you can get anything done.
\nSo I’d suggest instead that you have some time allocated every sprint to rewrite some reusable component to React instead. Try to do as few changes as possible and make it happen over time. I hope that’s helpful.
\n# Q: What is your preferred way to imitate componentDidUpdate with useEffect? How do you usually bypass the first execution on mount? — hambaga
\nIf you really want to imitate componentDidUpdate then you’ll need to use useLayoutEffect, but often useEffect works fine. Read more here about the difference.
\nAlso, I wrote this hook yesterday:
\nfunction useEffectPostMount(cb, inputs) {\n const postMount = React.useRef(false);\n React.useEffect(() => {\n if (postMount.current) {\n return cb();\n } else {\n postMount.current = true;\n }\n }, inputs);\n}\nPretty simple and works well.
\n# Q: What was your experience with TDD before creating react-testing-library? — davidmfoley
So TDD with UI was a total joke. I tried it and it never worked. TDD with pure functions is and has always been a joy.
\nNow with react-testing-library I can actually do it and it’s pretty great.
# Q: Any tips on improving as an on-the-job teacher? So not as a course instructor or anything, but as a senior working with juniors, people new to React and JavaScript, or even other seniors who may have developed bad habits. — jonjongrim
\nI think the best thing to do as an on-the-job teacher is to develop a habit of doing it regularly. Teaching is a practiced skill and also developing a reputation as someone who knows what they’re talking about and should be listened to is something that comes over time. So schedule regular times to teach in one form or another. Force yourself into teaching situations often.
\n# Q: Do you use Redux or MobX and why? Also: Now that hooks are out together with useReducer and useContext and others, do you still use Redux/MobX? For which use cases do you still use Redux/MobX and when do you use hooks capabilities? — guylando
\nI used Redux at PayPal and it was ok, but I got tired of jumping around dozens of files trying to track the code path and trying to figure out why some bit of state had to be in Redux. I’m fine with Redux, but I’m not fine with how most people use it (putting all application state in the store is a really bad idea).
\nI’ve never used MobX, but I’m not huge on mutation as an API for state updates and I’m not huge on decorators either. I much prefer sticking as close to React as possible.
\nThis needs to be updated a bit with a hooks world, but I mostly still feel this way about application state management.
\n# Q: Hey Kent, what do you think about TS in 2019? Is it must-know technology? Or can it be neglected? — czechue
\nI wouldn’t say that TS is a must-know technology, but there’s a reason that Static Typing is included in the testing trophy! 🏆
\n\n\nI’m a big fan of TS on teams and think that almost every team doing lots of JavaScript could benefit by using TS.
\nOne warning/tip: Your types DO NOT HAVE TO BE PERFECT. Feel free to throw any or unknown around here and there. Types are really important, but where people get angry at TS is when they try to make their types perfect and it stops them from shipping. So feel free to throw in an unknown there today as you’re learning TS, and come back later when you know TS better to fix it.
","frontmatter":{"date":"2019-03-28T00:00:00.000Z","dateGroup":"March 2019","dateString":"Thursday March 28th, 2019","description":"Engineer @ Paypal, Teaching via Egghead & Frontendmasters, and Author of react-testing-library, downshift, glamorous, & an all around good dude.\n","location":"Q&A Channel Reactiflux","people":"@kentcdodds\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Kent C Dodds"}}},{"name":"jamon-holmgren","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How do you balance community needs and Infinte Red’s needs? — orta
\nA: Hey, nice to see you! I met you for the first time at the RubyMotion conference in 2014.
\nWe do a ton of open source and pour a lot of time into both building open source tools as well as answering questions in our Infinite Red community Slack. The best way we’ve found to balance those is to make sure they align; if people know about our open source and like it, they hopefully will get in touch with us when they need actual consulting work. This makes our time investment worth it.
\nDespite that, it’s always a tough balance to get right.
\nMy job as CTO has allowed me to spend more time doing open source lately and that’s been great.
\n# Q: Why choose React Native over other iOS/Android platforms? — Iggytoad
\nA: We started out doing native mobile app development. Back in those days we had a lot of clients who wanted iOS first and then Android maybe at some future date if their startup took off. But that changed about three years ago—clients wanted both platforms. So we started looking around for the best way to build apps using cross-platform technologies and React Native ended up being the most promising, so we switched over in the fall of 2015.
\n# Q: What the best place to start learning React Native and native languages? — MoustacheDesign
\nA: There are a lot of resources online—Egghead, for example. We also put on an Intro to React Native workshop at Chain React—not updated with workshop info yet because the designers are waiting on me… haha). I’m one of the instructors there and it’s a really solid intro. We also do on-site training for teams. I think the official documentation is pretty good, although as a member of the RN open source core team we’ve been talking a lot about how to make it better and my team will be working on that.
\n# Q: In this highly competitive sector you’re in, what do you feel makes Infinite Red stand out? — hodgef
\nA: That’s a great question! I think what makes Infinite Red stand out are a few things:
\n# Q: New React Native boilerplate seem to abandon redux-saga, do you have thoughts on why? — rostislavsimonik
\nA: When we created our newest Ignite-powered boilerplate (Bowser), just like all other boilerplate decisions we’ve made, we trial-ballooned the stack on a couple client projects first. What we discovered was that moving to mobx-state-tree reduced a lot of boilerplate code over Redux+Redux-Sagas, and our software engineers were satisfied enough to move that into our publicly recommended boilerplate. We’ve been building projects with it for over a year now and have had a good experience, so we intend to stay with it for a while yet. (Keeping an eye on GraphQL / Apollo while we’re doing it though!)
\n# Q: You said you switched to React Native in 2015, have you or do you plan to do a reevaluation with current technologies e.g. Vue Native — NZchill
\nA: That’s one of my jobs and I’m constantly evaluating other technologies. Vue Native, Flutter, even going back to Swift + Kotlin. But the benefit has to be there to justify disrupting my team’s built-up knowledge base and our deep investment into the community. We’ve done it before (in 2015) but it’s not easy. Plus, the React Native core team has been pouring a ton of engineering time into RN and we’re optimistic about its future!
\n# Q: In a native only tickets booking app, a large monolithic one with 1M downloads/month. Would you advice RN adoption? Testing the waters with a new RN app section, without disturbing the rest of the app’s development? For higher dev velocity with RN, and RNW adding Web as a 3rd target platform and further maximizing code reuse. — Garon
\nA: I would need to deep-dive a bit more into your specifics to be able to give a recommendation. Brownfield RN adoption isn’t as straightforward as greenfield, and there are some companies (like Airbnb) that have decided the pain wasn’t worth it. There are others like Squarespace that have had such a great experience that they even remodeled their office to change from separate web, ios, and android teams to one React + React Native team!
\nSo I’d need more context, but it’s definitely worth considering for sure. I’m happy to chat more if you want to shoot me an email (jamon@infinite.red).
\n# Q: Hello Jamon! Thank you for doing this. (And Chain React! I loved the first edition :smiley: ) I listened to Building Infinite Red which is amazing, and my question to you would be: With such an important team size, how do you deal with the “Feast and Famine” cycles that most Freelancers or Agencies have to deal with? What would you say is your biggest strength when it comes to acquiring new clients? — Charles
\nA: Thanks for being here, for being at Chain React 2017, and for listening to Building Infinite Red! It’s an honor!
\nFeast and Famine ... whew ... you really need to listen to season 2 (currently being recorded). We talk a lot about that! But just to give you something—we have found that it’s really important to take marketing seriously. And not just rely on word of mouth, which can be fickle and cyclical. We have an awesome marketing consultant (hey Robin C!) who has done a great job building a marketing strategy for us that doesn’t just involve open source.
\nOnce you have a sales pipeline that is fatter than your ability to service it, you no longer deal with feast or famine. Instead, you have abundance and the ability to pick and choose who you work with.
\nSo, my advice is to put more time into marketing than your team size might indicate. You want to oversize your input pipeline!
\nThat was an intense 25 minutes—grabbing coffee, so feel free to shoot over some more questions when you’re ready!
\n# Q: I’m in the process of learning about entrepreneurs and their ventures, specifically the founding team formation. How did you find/recruit the founding team of Infinite Red? You seem to have a pretty diverse group of people working for you, it looks great. — Iggytoad
\nA: I started my business in 2005, just me. In 2014-2015 I was almost ready to shut it down because it was so stressful, but I met Todd Werth and Ken Miller at a conference in San Francisco (the same one I met @orta at!) and we hit it off. They had a very similar business and were facing different stresses. Over the next 6-9 months we chatted a lot, worked on open source together, and eventually decided to merge. We even ran our businesses as if we were merged for a few months to see if it would work out. Then, in Paris (yay) we met and decided to pull the trigger. It’s been an amazing partnership and I’ve learned a lot from those guys. You can learn a lot more by listening to building.infinite.red!
\n# Q: For someone who has been developing a lot in React, but has no experience in App development, would you suggest jumping into React Native or first getting my feet wet with Native App development — lewisedc
\nA: I’m a fan of incremental adoption whenever you can. I think going from React to React Native is a pretty natural step, and would recommend that. You can do a ton without touching native code. When you’re ready, it’s best to follow some tutorials and sort of ease into it. Native code is fun! But it’s also a lot to learn all at once. Trust me—I did that (web to native code). It took a lot of study and trial and error.
\n# Q: Starting team is always struggling how to balance costs. Do you have some recommendation how to setup initial team roles, How much should they and when invest into marketing. What are some lesson learned, Or what would you do differently if you had to do it again. — rostislavsimonik
\nA: I think more importantly than team roles is to have a constant conversation and be willing to be adaptable. I started out as Chief Operating Officer but moved to CTO recently. It’s more about establishing trust, working together to find agreement and consensus and understanding, and eventually the roles will become more apparent. Don’t get too married to any particular role because things may change. You’ll find that if you do this, everyone will end up in the role they’re best suited for.
\n# Q: Working out: when did it “click” for you..The balance between physical fitness, family life, and work. It seems most people with “classically sedentary” jobs say they don’t have the time. How do you make the time/ what steps did you take? How did you see that prioritizing fitness also improved other areas of your life? — Anon
\nA: I think it really clicked for me when I realized my body was starting to ache and have pains where I never used to have pains. I realized just how damaging my sedentary lifestyle was to my body. So I started working out with Ryan Linton (who works for me). He was really amazing—knew a lot, was patiently encouraging, etc. After about a year, maybe 18 months, we stopped working out together due to different schedules, but I had the tools I needed to continue. I also built a home gym (https://jamonholmgren.com/gym) that makes it so I really don’t have any excuses!
\nAfter getting in shape, my body no longer hurts, I can dunk a basketball again (at 37 years old I think that’s pretty cool), and I can play with my kids without getting exhausted. I now look at weightlifting as a vital part of my week.
\n# Q: How do you feel about the ecosystem of third party libraries out there for what are essentially core features of most modern mobile apps, e.g., navigation, image caching, video capture, and so on? Our team sometimes struggles with the immaturity of these libraries, and it occasionally makes me wonder if we’d be better off building our own native extensions. Additionally, the more diverse our application becomes, the more fragile it seems to be during RN upgrades. Is that something you’ve encountered? — Joe Lafiosca
\nA: Someone asked me recently what the biggest pain points of React Native were, and I said \"Third party libraries—wildly inconsistent quality.\" This is definitely something we deal with on a regular basis at Infinite Red.
\nThe second is React Native upgrade fragility. We also deal with that.
\nThe core team (facebook + open source) is very aware of this, and there are steps being taken to improve the developer experience.
\nOn the Infinite Red side, we get around this with Ignite. We have a shared set of \"blessed\" libraries that we know work (and if they don’t, we know how to work around them). Every RN release, we all share the burdens equally in getting things updated.
\nI will be speaking more about this at React Finland in April!
\n# Q: Hi Jamon! Hope you’re well. Awesome that you’re doing a Q&A.
\nI’m going to finish my Bachelor’s degree in software development, and I’ve got most of my knowledge (about a year and a half) in Javascript / React.
\nI would really like to contribute to open-source projects, because I think there’s a ton I can learn from reading other people their code as well as making my GitHub profile more lively which, I imagine, would help when I apply for my first job in July. However, I find it extremely daunting to start contributing to open-source projects because I don’t feel like my skills are developed enough.
\nDo you have any advice for someone, like me, that wants to contribute but is afraid to? — Floris
\nA: I totally understand where you’re at and am very glad you asked this question. I think the best advice would be to figure out an issue or library you’d like to work on, and then see if you can get a more experienced person to pair with you on the fix. This will help you understand what all is involved. There are lots of developers on Twitter who are willing to help new people integrate into open source.
\nIf you want, just message me (on Twitter, probably) and I can help \"signal boost\" to get you an experienced pair programmer.
\nWe could use some help testing pull requests with React Native WebView if that’s interesting, so take a look at that! I’d be happy to pair with you on that.
\n# Q: Hi! How do you test apps on mobile devices? do you have your own farm or do you use a service? — nico
\nA: It really depends on the client. We have done a variety of services. We have a new client starting in the next couple weeks that wants us to implement Appium on a device farm, and I’d like to see how that goes before I answer more fully. Hopefully it goes well and we can write about it at our Medium publication, shift.infinite.red!
\n# Q: How do you approach regression testing on mobile apps for long term projects? — rostislavsimonik
\nA: We generally do end-to-end tests with Detox and snapshot tests using Storybook. In fact, I just met with Zol, one of the maintainers of Storybook, and there’s a lot of interesting work being done there. But I think this part of the developer experience is really underserved for React Native developers.
\n# Q: Where do you think Android performance ranks in pain points as it relates to RN as a whole? How does this affect the clients/users satisfaction in terms of the end product you deliver? — Gabe
\nGabe: Also... Discord has chosen not to use RN on Android because of perf issues but loves it on the iOS side. Have you seen this happen with any other organization? Clients? etc
\nAndroid performance does tend to raise its ugly head regularly. We have had clients who aren’t happy with Android performance and have had to put extra work into that. However, you tweeted recently about how the RN team internally at Facebook has been working really hard on Android performance ( @EliWhite I think wrote about it?) and I’m excited to see how that goes. I suspect at this point next year it’ll be a very different story.
\n# Q: What can you say for us \"young\" developers out here who are working on their own startups and dont have any kind of mentors. What is the best way to keep up and improve? — mickeyb
\nA: Find a close-knit community! Reactiflux, the Infinite Red Slack (http://community.infinite.red/), or others, and share the burdens there. Ask questions, be vulnerable.
\nAlso find people you admire or find interesting and follow them on Twitter (ahem https://twitter.com/jamonholmgren). And don’t be afraid to reach out via Twitter DMs too.
\nFinding a community is really amazing and something that will help you a lot.
\n# Q: What is the biggest risk you see and somehow you are trying to address within react-native platform ? — rostislavsimonik
\nA: There are a number of big risks.
\nOne is the risk of Facebook losing interest. The counter to that is Microsoft and Amazon have been investing very heavily in React Native, so they could easily pick up the torch. Also, it doesn’t seem like FB is losing interest at all—if anything they’re doubling down on React Native.
\nAnother risk is something better coming along. I think that’s a possibility, but remote at this point. The amount of work that would need to be done to build the community, third party ecosystem, user base, and more is nontrivial. But of course that’s something we keep our eye on.
\nAnother risk is the Apple-Facebook war turning ugly and Apple banning all React Native apps. I think if they did this they would face a big backlash from Microsoft and Amazon, so I’m not too worried about that.
\n# Q: You have probably been involved since the v0.10 - 0.15 releases I’m guessing? How far as RN come since you’ve been there since nearly the beginning?! — Gabe
\nA: React Native has come a very long way, but honestly the core concepts have stayed pretty consistent throughout. Which is impressive! I think it just keeps getting more stable and sophisticated. I do think TurboModules and hooks will have major impacts on React Native and am really interested to see how much it evolves before 1.0. (More on the roadmap)
","frontmatter":{"date":"2019-02-07T00:00:00.000Z","dateGroup":"February 2019","dateString":"Thursday February 7th, 2019","description":"Co-Founder & CTO @ Infinite Red, React Native Core, Chain React: The React Native Conference Organizer\n","location":"Q&A Channel Reactiflux","people":"@jamonholmgren\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Jamon Holmgren"}}},{"name":"react-native-team","relativeDirectory":"","childMarkdownRemark":{"html":"![\"The](\"https://user-images.githubusercontent.com/11687622/51948653-59ae4c00-23f7-11e9-866b-4e381380b82e.jpg\")
\nThe entire React Native Core Team in one room answering questions!
Hi everyone! We are the React Native team at Facebook and are super excited to be here and answer questions.
\nWe’ve been hard at work re-architecting some of the fundamentals of React Native as well as trying to learn and improve some of the biggest pain points we hear from people in the community.
\nOne other link I want to plug is our discussions and proposals repo. I recommend watching this repo, we’ve been using it to discuss bigger changes to React Native and getting feedback from the community.
\nLet’s jump in! Excited to answer your questions.
\n— EliWhite
\n# Q: Jest and Yarn are going to TypeScript. Can we do react-native next? — brentvatne
\nA: We don’t have plans right now to move to TypeScript but recognize that it is super popular in the community. Right now we are working on improving the typing of our core components. I think this will also help the community improve the bindings for TypeScript.
\n— EliWhite
\nAnd to add to @EliWhite, Flow is important to FB and works well for us, so as long as React Native is tied to FB internals it’s not on the roadmap to switch.
\n— Rick
\n# Q: How different is React Native from React and how difficult would the transition be from React to React Native? — Nine
\nA: React is pretty amazing in that it can be used on so many platforms. It has been really awesome to see the communities around React Native come up. Things like VR, Windows, TV. Super awesome that people are finding so much value in the Platform that React Native provides and the pattern of building components from React. I think we are starting to see that people find the patterns in RN to be a great way to build web apps too. Twitter’s website (desktop and mobile-web) is built using React Native Web without using React Native on mobile at all. This multi platform approach is part of the reason React was invented in the first place so we are of course very excited about exploring this area more.
\n— EliWhite
\n# Q: React Native or Flutter? — Valar
\nA: RN vs Flutter, I guess it depends on your use case. Obviously since we’re working on React Native we would recommend RN, and we’re actively working on the architecture projects to address concerns about async nature of RN. But your company/app may have a different use case in mind :smiley:
\n— fkgozali
\nI think React Native and Flutter have slightly different goals, so which one you use depends on what you are trying to accomplish. React Native skews toward leveraging each of the platform's native capabilities.
\n— yungsters
\n# Q: When’s the next release and what’s the big buzz about new engine? — pushpendra
\nA: The latest React Native release, 0.58, is being propagated at the moment! You can follow the status for any upcoming release by joining the releases repository. After this release, we plan on going back to a more frequent release schedule, so 0.59 should not be long after that.
\n— hector
\n# Q: Will you fix react-native to have friendlier error message outputs? — Origin
\nA: If you ever encounter any bad error messages, please let us know by filing issues on the repository. Even better, send pull requests to improve the error messages.
\n— yungsters
\nRelated to this, today’s release, 0.58, includes a redesigned RedBox screen which was entirely driven by the community.
\n— hector
\n# Q: I know there has been a discussion on GitHub already, but when can we expect Hooks in React Native? (: — tobi92
\nA: We’ll enable Hooks on React Native as soon as there is a public release of React with them enabled.
\n— yungsters
\nHooks landed on React stable yesterday, so based on the RN release schedule, you can probably expect Hooks to land on React Native somewhere around the 0.60 release.
\n— hector
\n# Q: RN has currently 646 open issues. Should RN core team focus more on resolving these issue rather than implementing new features, or RN will be mostly redesigned? — LytraX
\nA: Some amount of open issues is to be expected, but we’d certainly like for the number to be much lower than ~600. I am currently preparing a proposal for handling issues and PRs in a more timely manner, which I'll be posting to the community proposals repository—hopefully we’ll get some good feedback from that, and get more people from the community involved in triaging issues and PRs. We’ll probably focus on getting the number of open PRs down, first.
\n— hector
\n# Q: Do you plan increase support for github repository? There are some critical PR on hold, and at least some kind of messages would appreciated like what’s missing, or is rejected due different approach, etc. Thanks. — effeKtSVK
\nA: Yeah we hear you—community support is a key focus for us the first half of this year, @hector and @cpojer are all over it.
\n— Rick
\n# Q: What are the specific reasons facebook is leaving react native after spending so much time invested into it? — inland
\nA: Facebook is not leaving React Native—we are investing more in it every half and have big plans for the future, like Fabric!
\nSophie's post about the future of RN is here: https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
\nIt’s been a while since we last published a status update about React Native.
\n— sahrens
\nFacebook is not leaving RN. We’ve been heads down working on it for… years now. Check out Sophie’s post on the open source blog.
\n— mehdi
\n# Q: I remember a plan for rearchitecting Animated—specifically, the native driver. What are the plans for that? — prodigynelson
\nA: There was a while back but we’re waiting for Fabric before working on Animated. Our overall plan is that Fabric’s API will allow better gesture handling along with better animations.
\n— mehdi
\nre: Animated—@kmagiera has a couple awesome projects we are excited about and might pull into the core (react-native-gesture-handler, react-native-reanimated). We also need to get Animated working with Fabric which might require additional changes. Other than that, I’m not aware of any significant refactors planned for Animated.
\n— sahrens
\nWith Fabric we are thinking about some completely new animation API, but it’s unlikely that this work will be finished soon. For now Fabric will support the exiting animation APIs.
\n— Valentin Shergin
\n# Q: If you could start over with RN, what would you do differently? — Rayd
\nA: We’d build what we’re building for Fabric.
\n— fkgozali
\n# Q: What’s the best feature of Fabric? — Lautarø
\nA: The best feature of Fabric is the ability for your application to be multi-threaded without application developers knowing about mutex, etc. Also, Fabric makes React Native more like React for the DOM in terms of interoperability.
\n— yungsters
\n# Q: Will be there a public API in the RN core, that allows the developer to choose between Async or non-Async updates? — Lautarø
\nA: Yes, there will be asynchronous variants of most synchronous methods. But I think that synchronous by default will make the most sense in the long term, especially when people start making use of Suspense to provide instantaneous user feedback.
\nTo clarify, I’m referring to initial mount. I think that we’ll probably recommend applications use most asynchronous versions of most events (e.g. scroll, touches, etc).
\n— yungsters
\n# Q: Navigation is a pain point a lot of people tend to speak to. Is the FB team looking at integrating native navigation? — agmcleod
\nA: The Facebook app integrates into native navigation system that was built for the FB app as a whole, so yeah we do have internal native navigation abstraction for RN. It is quite specific to FB though.
\n— fkgozali
\n# Q: What would you suggest for the server side (backend) of react-native; (database and rest api), for example react, django, nodejs? And for dbs: neo4j, etc… — Origin
\nA: For small projects, you can spin up a node API connected to Firebase (can be REST or GraphQL) in a few hours, complete with auth and basic collections which is great for hacking on prototypes. There was a talk at React Conf on this that's really good.
\n— Rick
\n# Q: Are the any plans to improve lists like FlatList and SectionList? There are still some rough edges and perf problems, especially on Android. — Checkmatez
\nA: With Fabric it will be easier to do deeper integrations with native APIs, and we’ll also have more oportunities to build deeper recycling, hittesting, and clipping optimizations built into the core. Once Fabric is out, we’ll probably revisit lists.
\n— sahrens
\n# Q: Hi guys! I’m a budding web developer and was wondering what things I can do to start to familiarize myself with the ReactJS Stack. Thanks! — Slipped
\nA: I think the best way to learn is to build!
\n— Rick
\nThere is a lot of great content regarding the React ecosystem but I found the best is to try and build something and then when you get stuck, finding a tutorial or example to work off from. I guess not React specific but generally good approach. For React specifically, I’ve found the docs really helpful and clear when I get confused about behaviour.
\n— luna
\nTo build on other’s answers, don’t feel like you need to learn the entire stack at once. Choose small pieces and gradually build up context.
\n— PeteTheHeat
\n# Q: Youi-tv Engine One currently binds OpenGL to React Native, doing something similar to Flutter however with React Native. Has this ever been talked about internally, possibly binding React Native to a rendering engine? — AndreiCalazans_
\nA: Actually ReactVR is basically that—React Native rendering to OpenGL. We’ve also thought about it from the context of 2D apps like Flutter, but it has never seemed like the right approach for many reasons, the main being that we want to build apps that look and feel like the native platform and we didn't want to reimplement everything provided by the platform—it takes a ton of work and is very hard to keep up to date as platforms update their look and feel, including supporting multiple OS looks simultaneously so we can deploy to both new and old devices. Flutter has thrown a ton of resources at the problem and it’s unclear if the results will be worth the investment vs. the RN approach.
\n— sahrens
\n# Q: If your team had double/triple the resources, what sort of projects would you look at? — orta
\nA: Wow… double or triple team size, huh? Each of our major architectural projects could probably have slightly more aggressive timelines with 1 or 2 more people (mythical man month and all that). As I mentioned earlier about Flutter having really amazing tooling and documentation, I’d really want to invest in improving the developer experience and tooling for React Native. And last but not least, I’d invest in more aggressively growing adoption internally at Facebook.
\n— yungsters
\n# Q: How are you feeling about the RFC process so far? — orta
\nA: The RFC process is awesome. It really feels like we are empowering the community in new ways, as well as we have a space for longer form discussions about both technical and social aspects of the project. I’m happy to hear about your ideas on how we can improve the process.
\n— cpojer
\n# Q: Is the debugging experience different with fabric? — Paul Stockley
\nthe main difference is that Fabric will have a bunch of synchronous calls to native land, and the existing Chrome debugger integration will need some adjustment. See https://github.com/react-native-community/discussions-and-proposals/issues/7 for some background
\n— fkgozali
\n# Q: Will JSI/Fabric/TurboModules all release around the same time, or will the rollout be more gradual? And at what point in that rollout do you expect there to be concurrent React support? (Assuming it’s out by then)— Jeremy
\nA: JSI is already out there in the repo. Fabric and TurboModules will release separately because their surface areas are vastly different. Concurrent React will need to wait until Fabric impl is complete.
\n— fkgozali
\n# Q: What’s the future of Metro and what do you think about Haul? — tido
\nA: Metro is being optimized for React Native both in terms of build time and reload time. It’s a lot faster than anything else with the DeltaBundler, which is exciting. There is also a fairly large web app at Facebook that just converted to Metro, you may wanna hit \"View Source\" on some to find out which one it is
\n— cpojer
\n# Q: Our biggest gripe with Metro is issue #1, support for symlinks. But we also gained a few other benefits such as tree shaking and getting access to the whole ecosystem with plugins that detect duplicates. Are these things considered? — tido
\nA: The right person to ping about Metro would be @rafeca
\n— cpojer
\n# Q: By when can we expect a 1.0.0 of RN — Bluebird
\nre: RN 1.0.0, right now we’re focusing on finishing the big architecture projects (Fabric/TurboModule/Codegen). Once they are all done/solid, we’ll evaluate the path for 1.0
\n— fkgozali
\n# Q: Anybody in Seattle location working on RN? Headed to boot camp in a couple weeks — brandon.arnold
\nWelcome to FB! Marketplace is a huge user of React Native and they have a significant presence in our Seattle office.
\n— yungsters
\n# Q: I’m excited to hear the development (and I’ve checked a few fb html files, but don’t know what to look for). Are you doing SSR yet? Any idea if/when Metro will help build and reload a node app? — ericvicenti
\nyou can already use Metro that way, it’s a JavaScript bundler for anything. You can set it up any way you want. We probably won't be able to provide guides for that anytime soon, but if you are using Metro for RN, also using it for web and node shouldn't be a big jump.
\n— cpojer
\n# Q: Haul/Webpack is slow, and it is a pain to support multiple packagers in a shared codebase. Will Metro eventually support web browser and node.js bundling? — ericvicenti
\nA: See @cpojer 's comment about using Metro for web….see if you can find where it’s used!
\n— sahrens
\n@ericvicenti see my answer above. It is already used on a fairly large Facebook property on the web. Find it!
\n— cpojer
\n# Q: How’s Turbo Modules and codegen coming along, and how can I contribute from the TypeScript side? — tido
\nA: we’re actively working on these projects, expect something stable to come along later this half.
\n— fkgozali
\n# Q: How is the support for 64 bit apps on Android? — DCM
\nA: support for 64-bit architectures landed in master recently - it is not quite in the latest release of RN yet, due to the way releases are cut, but I think it’s scheduled to go out in 0.59
\n— hector
\n# Q: How long do you think it’s realistic for a very small team to successfully maintain and grow a commercial RN mobile app without expertise in iOS or Android development/building? — Joe
\nA: I think it depends on what you're trying to do with your app - if you have a pretty simple use case that doesn't require a lot of custom native modules, then you don’t necessarily need a lot of iOS/Android expertise
\nI used to work on the companion app for Oculus Go before joining the RN team, and there we wanted to hire some iOS/Android devs for all the custom stuff we wanted to do. But we made it for about 6-8 months before we did that.
\n— janzer
\n# Q: Not directly related to React Native but rather the internal environment, has anything been said about react-native-web, given its success? Would Facebook be interested in supporting this project? — AndreiCalazans_
\nA: react-native-web is awesome, and we hired the author @necolas who is now also working on Instagram Web. We’re excited to make better use of it and continue supporting it.
\n— sahrens
\n# Q: You mentioned Fabric/TurboModule/Codegen. Where can I read more about these projects? — Checkmatez
\nA: there are github issues for each of the big parts of the rearchitecture in our discussions and proposals repo.
\nFabric: https://github.com/react-native-community/discussions-and-proposals/issues/4\nTurboModules: https://github.com/react-native-community/discussions-and-proposals/issues/40\nCodegen: https://github.com/react-native-community/discussions-and-proposals/issues/92\nJSI: https://github.com/react-native-community/discussions-and-proposals/issues/91
\nThanks @kelset for organizing these links for us!
\n— EliWhite
\n# Q: The Twitch video about CodeGen was awesome. Is React Native team planning to do more such sessions ? — axemclion
\nA: we’ve tried a bunch of new ways to engage with the community over the last few months, from getting a bunch of contributions to Flow type our components (https://github.com/facebook/react-native/issues/22990) to deep dives like the twitch stream. I think we’ve fundamentally underestimated the interest people have in contributing and learning about the internals of React Native. This is super awesome to us and encourages us to do more of these things for sure.
\n— EliWhite
\n# Q: How are React native products tested - internally in FB and externally ? — axemclion
\nA: We have a few types of tests running internally: snapshot tests running continuously, unit and redbox tests running at diff time, Jest tests running at diff time, e2e tests…. The main issues we plan on addressing this half is improving the reliability of these tests, and bringing the internal and external testing frameworks closer together. This way, internal commits don’t silently break OSS tests and vise versa.
\n— PeteTheHeat
\n# Q: Is the RN core team going to be expanding within the year? How many pull request I need merged to join y'all? — dayhaysoos
\nA: we’re always hiring!
\n— mehdi
\nthere's no minimum number of PRs you'd need to get merged in order to join the team, but I’d happily take any PRs you want to send our way! In any case, FB is always hiring :smile:
\n— hector
\nI had never used React Native before joining the team at Facebook :smiley:
\n— EliWhite
\n# Q: Good to know FB is always hiring for RN core team! How do you all prioritize the issues? — dayhaysoos
\nA: We recently asked the community what their main problems with React Native are, see \"What do you dislike about React Native\" here: https://github.com/react-native-community/discussions-and-proposals/issues/64
\n— cpojer
\nAbout how we prioritize issues… it’s a delicate balance between issues raised by teams using React Native at Facebook, issues raised by the community, and investing in the future architecture for React and React Native.
\n— yungsters
\n# Q: Will Fabric also enable a way to reduce App load up time if not any plans to improve this — AndreiCalazans_
\nA: Fabric itself probably won't help much with app load time unless you have a lot of custom native view managers, but we have a bunch of other stuff in the pipe that will help with startup time so stay tuned!
\n— sahrens
\n# Q: What is your current feeling for community support of the Lean Core effort? Do you think you have enough people to oversee all of the various modules you want to remove from the RN core? — ChrisSeverns
\nA: yeah I think so. We moved WebView out from the repo and it got tons of improvements almost immediately
\n— mehdi
\n# Q: if I’ve built a react web app with state management by redux, how hard will it be to create a react native mobile app for it? is there any way to use the web app code when working on the RN app? thank you! — sidx64
\nA: My previous team encountered a similar problem when attempting to build a RN app. We ended up using react-native-web and slowly introduced new base components using View, Text. It still felt quite disjointed due to tooling and deploy but it was a great first step to build components that both web and mobile could share.
\n— luna
\n# Q: An issue I’ve seen a lot with RN is performance working fine on iOS but really dragging on Android, especially older devices. Does the new architecture significantly change this? — ChrisSeverns
\nA: yes, the new architecture will improve performance for older android devices
\n— David Vacca
\nA: At Facebook a significant amount of our users use Android and that is where we’ve actually spent almost all of our time over the last 6 months. On Android one of the things that matters a lot more than on iOS is disk access. Reading from the disk is way slower on Android and you pay a penalty for every single java class you load. We’ve spent a bunch of time investigating and optimizing the React Native startup path specifically on 2014 android devices in order to make Marketplace fast for those users. This investigation is actually what led to the design of the TurboModules project and some of the features of Fabric. While these features were designed with Android in mind, they will be implemented in shared c++ so that iOS will have the same behavior and improved performance as well. (Note: This was a follow up answer after Q&A ended)
\n— Eli White
\n# Q: What’s your favorite part about working on a huge, actively changing project? — Iggytoad
\nA: there’s always interested problems. Honestly, working on an unchanging project gets boring very fast, it’s much easier to get motivated when there’s real problems to solve rather than just doing refactors for the hell of it
\n— mehdi
\nI love the community. The fact that there are so many people interested enough to spend an hour of their day chatting with us on discord is what I love about working on such a popular project
\n— EliWhite
\n# Q: Hi folks, i was looking for some info on how native modules would work for with JSI? Will older modules be backwards compatible? — mk
\nA: re: JSI/nativemodule, are you referring to the new TurboModule system? If so, here are some info: https://github.com/react-native-community/discussions-and-proposals/issues/40
\nif you'd like to use JSI directly, there's not much hooks to it, but see https://github.com/react-native-community/discussions-and-proposals/issues/40#issuecomment-454138232 for some inspiration
\npieces of turbomodules are already in master, check them out! Not all of them are there though, almost.
\n— fkgozali
\n# Q: Any suggestions on profiling performance in production? Or not a good idea? - motivation is that depending on device, perf can be wildly different — paulxuca
\nA: profiling in production is important, we do it here at FB. There's no way to simulate all the different devices and network connections that your app experiences in the wild. Some keys: be careful how much data you're sending back, and how often a particular user is profiled.
\n— PeteTheHeat
\n# Q: What are some of your favorite OSS tools used while working on/debugging RN? — Iggytoad
\nA: I use Expo + Atom but I want to out VS Code soon. I know it’s pretty boring answer. what other tooling were you thinking about?
\noh I actually love using mitmproxy. Really helpful for analyzing server problems. I also use the React Dev tools a bunch to understand what the hierarchy looks like and understand why stuff isn’t being re-rendered etc
\n— mehdi
\n# Q: Is there any work being done around testing React Native applications? How is it done internally at Facebook? — Kyle Thompson
\nA: There's a bunch of work around testing. I’ve been focussed on shoring up our internal snapshot tests. In OSS there's been work around Detox, an e2e framework.
\n— PeteTheHeat
\n# Q: How big is React Native inside facebook ? What are some of the major apps inside facebook using React Native? — axemclion
\nThis tweet thread has our most publicly comprehensive list of usages of React Native at Facebook: https://twitter.com/sophiebits/status/1003101478427357184
\n— yungsters
\n# Q: Do you think it makes sense to periodically (every few RN releases) reconstruct our mobile app in a fresh new project rather than continually upgrading in place? (With an eye toward reducing cruft and having iOS/Android builds that work properly with the latest tools.) — Joe
\nA: I don’t know of anyone doing that in their projects. I wouldn't feel great if that's the solution people arrive at, I’d rather make sure the tooling is improved to make upgrades smoother. The CLI was recently forked to its own repository, https://github.com/react-native-community/react-native-cli, so now's the time to send your contributions to improve the upgrade experience!
\n— hector
\n# Q: have any of you built react-native apps outside of your work at fb? if so, what are they? :smile: — brentvatne
\nA: does the F8 app count?
\n— hector
\nI built a crossfit wod app and am working on another side project using RN :thumbsup:
\n— Rick
\nyes, I’ve developed RN apps for a couple of years before joining Facebook
\n— David Vacca
\nI made one to help me learn Japanese. Was really just for me so never ended up releasing it though. Shoutout to react-native-navigation which let me do some crazy bizarre but cool looking navigation stuff (honestly it looked more like a sci fi movie than a real app)
\n— mehdi
\nI’ve never built an app outside of my work at Facebook, but I’ve definitely reported some bugs to the Delta app (very high quality crypto app, btw) with some more debug information than your average user. :stuckouttongue:
\n— yungsters
\nI’ve built an app for myself that I use to track the TV shows I watch and when new episodes are coming. It lets me deep link into the show apps I have on my phone directly to the correct episode. It also includes a roku remote to control the tv. Pretty neat and useful for me.
\n— EliWhite
\n# Q: where can I read more about react native internals? Any guides that would help me understand and contribute to RN core? — Omar Khaled
\nA: Definitely not a comprehensive answer but there are some videos where we talked about the architecture: https://www.youtube.com/watch?v=83ffAY-CmL4\nChain React 2018: The State of React Native by Ram N
\n— luna
\n# Q: What the future of relation between react-native-core team and react-native-community? Is it still discussing? — sasurau4
\nA: We are still ironing things out in terms of how we can best collaborate but we have really solid relationships with each other and everyone both at Facebook and in the open source community genuinely want to work together to build the best possible version of React Native we can. I think we need to work a bit on the structure and guidelines for communication and collaboration. Ideally we’ll end up with a simple process for discussions, encourage contributions to React Native or the ecosystem, and finally become more inclusive so more people will join us :smiley:
\n— cpojer
\nwe plan on getting the community more involved with discussions regarding the future direction of React Native. For example, the discussions-and-proposals repository is a joint effort we first initiated last year, which has led to some very interesting discussions. So far it has helped us focus on what are the top issues affecting our most active contributors. I’d like to hear any feedback you might have about it and what we can do better
\n— hector
\n# Q: are you all working full-time on RN or are you also working on Facebook products using RN? — sregg
\nA: Everyone answering questions here is full-time on the React Native team.
\n— yungsters
\n# Q: Who do y'all main in Smash bros? — dayhaysoos
\nA: Lucas
\n— EliWhite
\nBowser
\n— Rick
\nFox
\n— fkgozali
\nThe real questions. Pikachu. But Wii Fit Trainer is starting to become my main.
\n— yungsters
\nwii fit trainer
\n— mehdi
\nI have a whole Twitter thread about this: https://twitter.com/cpojer/status/1077896781034409984
\n— cpojer
","frontmatter":{"date":"2019-01-24T00:00:00.000Z","dateGroup":"January 2019","dateString":"Thursday January 24th, 2019","description":null,"location":"Q&A Channel Reactiflux","people":"@reactnative\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"React Native core team (January 2019)"}}},{"name":"gatsby-team","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How do you see the future of Browser-apps/PWA in comparison to \"old2 executables\" on windows? — spYro
\nA: I think the future of browser apps is bright :smiley: more and more software (particularly business software) is delivered over the web (or Electron for desktop apps). Web developer tooling and browsers get an incredible amounts of investment and most people find building with html/css/js much nicer than the equivalent native UI toolkits. So I expect the strong trend to deliver applications over the internet or through Electron-like solutions to continue.
\n— kylemathews
\n# Q: Any progress in making react hooks work in v2? — Sylenth1
\nA: React hooks was broken by React Hot Loader. They've been working hard on fixing the incompatibility and their recent 4.6.0 release looks like things are working! There's a WIP PR to upgrade Gatsby to this release so we should be solid very soon.
\n— kylemathews
\n# Q: Any plans for custom hooks in Gatsby? — alexanderson1993
\nA: No plans just yet for custom hooks — most of our efforts with Gatsby are making integrations with custom data services (CMSs, ecommerce, etc.) really smooth along with making builds super scalable and fast — React hooks are an amazing improvement for client-side React code but not sure yet if there's any hooks we'd want to build ourselves.
\n— kylemathews
\n# Q: When would I choose gatsby over next js — f_youngblood
\nA: Gatsby and Next are similar in many respects, but Gatsby is hyper-focused on baking performance in by default and in the ecosystem with approaches like the offline-plugin, etc. Personally I'd default to starting with gatsby and move to next only if I couldn't find a way to prerender my SEO critical applications.
\n— biscarch
\n# Q: What is the future of Gatsby beyond v2? — kdichev
\nA: Improving integrations with hosted services (CMSs etc) often used with Gatsby + improving Gatsby build speeds — we're working to support very large sites in new year e.g. 1 million+ pages.
\nWe're also working on adding Gatsby Theme support which @biscarch is leading.
\n— kylemathews
\n# Q: Is Gatsby ready to be used with dynamic Apps and an equivalent alternative to CRA by now? For example, a couple of months ago it was not possible yet to use Apollo Client (as in post-build to make dynamic requests to a GQL server from the client-side). Is this available now and are there any other limitations? In general, it has been confusing for me to understand why to use Gatsby for dynamic apps in the first place. It has been clearly advertised as a static site generator after all. Could you shed some light on that? Thanks! — tiny
\nA: Yes. You can see how to approach using apollo-client in examples like the gatsby store repo. \"Static site generator\" is a bit of a misnomer, since Gatsby melds pre-rendering with a fully bootstrapable performant application like you'd get with something like CRA.
\n— biscarch
\n# Q: When should we not choose Gatsby to start a React project? — alexluong
\nA: Hmmm probably the main time you wouldn't want to use Gatsby is if you're building a purely client-side React app that needs to fit within an existing site/app — Gatsby wants to control the site/app (at least its section). We like to describe Gatsby as CRA++ — you have a very similar setup to CRA but you also get built-in plugin support (e.g. for tweaks to webpack), SSR, data layer for pulling in data from services, plus really optimized performance and client-side preloading.
\n— kylemathews
\n# Q: Is there any specific place for documented or known issues with the react component lifecycle/prerendering in v2? I have a website that renders images correctly using gastby build and serve, but when deployed to a CDN it seems my component never starts its animation and images are stuck with 0 opacity. (no asset optimization or configured prerendering selected on the CDN) — Tyler Churchill
\nA: Yes, (this is github issues)[https://github.com/gatsbyjs/gatsby/issues] which you should definitely file an issue for so we can investigate your issue in depth.
\n— biscarch
\n# Q: How far down the roadmap are incremental builds? — ghardin137
\nA: Pretty close! We're working on creating a hosted Gatsby build service which will include incremental build support. We should be able to launch that in first half of next year. We're focused right now on launching Gatsby Preview and then this will be the next thing we'll tackle.
\n— kylemathews
\n# Q: Do you hope or believe that gatsby (and JAM-stack in general), headless CMS's and microservices will overcome rigid and outrdated wordpress sites and architechture? — max
\nA: Yup! That's why I started the Gatsby OSS project and company! CMSs we're designed in the late 1990s and are very outdated for today's cloud/serverless computing environment. We want Gatsby to be able to replace CMSs.
\n— kylemathews
\n# Q: What's the roadmap for Gatsby themes? When would it graduate from \"experimental\" feature? — alexluong
\nA: It will graduate from experimental when we're confident in supporting the API for the lifecycle of gatsby 2. Currently I'm reaching out to people who have built starters and talking them through converting starters to themes. I anticipate that this is when we'll find any breaking changes that need to happen, with future feedback loops being smaller ease of use type fixes.
\n— biscarch
\n# Q: Will we be able to use incremental builds outside of the gatsby.com service? — ghardin137
\nA: Not yet clear — shipping fast incremental builds requires tight control over the build server to ensure caching + build execution is optimal. That + our top priority as a project & company is ensuring its long-term sustainability so finding premium commercial features that companies are happy to pay for — incremental builds will be a transformational feature that'll let many web projects move to take advantage of Gatsby's performance and low operational costs — so as incremental builds is a natural fit for a specialized cloud service and a premium feature that most smaller sites don't need — our plan is to ship it first to the gatsbyjs.com service and then evaluate later shipping it in OSS.
\n— kylemathews
\n# Q: Where would you like to see gatsby in a few years, what is your vision / long-term goal with it? — mo
\nA: We want to create a wonderful inclusive community where people and companies build their livelihoods around Gatsby. We're investing heavily in the OSS community and learning resources. If we're successful, there'll be millions of sites built with Gatsby and 100s of thousands of developers and designers using Gatsby every day.
\n— kylemathews
\n# Q: As a jaded javascripter who is getting tired of the whole 'new framework of the week', why should I care about Gatsby over other projects? Why would it be worth my time to help build the Gatsby community and contribute my time to creating plugins and troubleshooting the inevitable bugs that it will bring? What makes you special? — PenguinMan98
\nA: From a technical perspective, Gatsby has a powerful approach to managing data and a performance sensitive mindset. This means that you get to spend less time \"making sure the site is performant\" and more time building your product.
\nWhile it's inevitable that bugs come with any platform you choose to build on, Gatsby has been around for a few years now and hopefully during that time (which you can go check us on) we've proven that your contributions will be accepted and appreciated.
\n— biscarch
\n# Q: Is there some sort of change list or changelog? I have had problems finding one in the past, for gatsby and it's packages. — Everspace
\nA: There are per-package changelogs maintained in each package, for example Gatsby's.
\n— biscarch
\n# Q: Is there any plan to make Gatsby GraphQL-schema first, so is more \"robust\", instead of Gatsby building a schema out of the data-source. The main problem I'm facing is that data can change dynamically, GraphQL schema changes accordingly.. and this breaks GraphQL queries. I see others with the same problem. No easy solution. — monotono
\nA: Yeah — this is a top priority — we've been a bit overwhelmed post v2 launch handling issues/PRs but our we've thought a lot about this problem and next steps are a) make it possible to export your schema and directly control it.
\nWe're also very excited that more and more services are offering native GraphQL APIs which gets us out of having to dynamically create the schema. We added support for stitching in graphql schemas earlier this year and have a lot more plans to make schema stitching more powerful e.g. add support for transforming data from 3rd party schemas.
\n— kylemathews
\n# Q: Any info on contributing to the codebase or documentation greatly appreciated. Any tips that might not be in the official How To, or a contact if applicable/available. Thank you for your time — seanmoore1976
\nA: Definitely! So I'd recommend starting with the How to Contribute guide.
\nIt's a great place to get started. That said, I'd also encourage to check out a Pairing session, where a Gatsby employee and you will pair 1:1 for about an hour or so to work on a problem or challenge you've run into. We've had some really good stuff come out of pairing sessions, and I think people really like them as a way to get started contributing!
\n— dustin
\n# Q: How is authenication handled in gatsby? — Reinhard
\nA: Great question! So in general, and I probably say it far too often, but a Gatsby app is just a React application.
\nSo--however you implement authentication into a React application can be followed similarly with a Gatsby application, because a Gatsby app is a React application.
\nWe do have a guide/tutorial written here which many have found helpful. Shameless shout out to my little side-project (just a demo, not a real product!) gatsby-mail which has user authentication (via React context) as well.
\nCheck it out, and hope it's helpful!
\n— dustin
\n# Q: What is the most exciting feature you are working right now? — Checkmatez
\nA: I'm very excited about themes right now. With the core functionality (composable gatsby configs and Component Shadowing) merged in as experimental, we can start to build very powerful abstractions for complete documentation sites, marketing sites, ecommerce sites, etc. I'm happy to talk to anyone in more depth about themes at any time either in the community spectrum (https://spectrum.chat/gatsby-themes) or on twitter (https://twitter.com/chrisbiscardi)
\nA Gatsby email application. Contribute to DSchau/gatsby-mail development by creating an account on GitHub.
\n— biscarch
\n# Q: What support will Gatsby team provide to .com clients and the idea behind it? — kdichev
\nA: Many of the largest OSS projects have commercial companies backing them. Complicated software is well... complicated :smiley: and requires a lot of investment to build and maintain. I founded Gatsby Inc to be an excellent steward of the project and ecosystem & provide support and services for commercial users of Gatsby. Most large companies that adopt open source want to pay for commercial support — we provide that. Also there's many cloud services we're building that'll add a lot of value to companies using Gatsby like the before mentioned Gatsby Preview.
\n— kylemathews
\n# Q: I have found developing plugins that create nodes or interact with the gatsby-api to be a big hassle in comparison to how pages and other content is developed. Is there any plans on making something like \"hot-reload\" nodes or generation during development without having to stop and start gatsby? — Everspace
\nA: Source and transformer plugins can \"hot reload\" data during development. Support for this is baked into Gatsby's data layer. It's a bit complicated to explain in a Q&A but basically a source plugin can watch for data to change and re-emit nodes. Gatsby will then notice this and automatically re-run graphql queries for pages affected by the changing data. gatsby-source-filesystem is the most prominent example of this. It watches for file changes and re-emits File nodes as the data changes. This is what drives Ludicrous Mode™️ You can see the code for this here.
\n— kylemathews
\n# Q: Would be interested in the Gatsby team's take on this: What are currently the best and/or most up-and-coming tech locations in the world besides Silicon Valley? — tiny
\nA: The best up-and-coming tech locations are wherever you currently are. Distributed teams (like gatsby) are the future, especially when Open Source is already built largely by people who may have never even met in person
\nP.S. Gatsby is hiring worldwide for OSS Maintainers
\n— biscarch
\n# Q: As a company do you have any plan in pursuing global partnerships? — yuchi
\nA: Yup! Gatsby works by creating tight integrations with great companies like contentful.com, datocms.com, sanity.io, shopify.com, etc. We're actively chatting with these folks and more about how to make our services work better together.
\n— kylemathews
\n# Q: What about non-product partnership? — yuchi
\nA: We've started with an agency partner program which we'll be talking about more soon — if interested, please sign up!
\n— kylemathews
\n# Q: What is one thing that Gatsby is capable of doing that might surprise some people? — ctlee
\nA: Gatsby can be used to build fully dynamic sites, which surprises some people because of it's label as a \"static site generator\". It's fully equipped to be a powerful alternative to create-react-app and other similar solutions with the addition of easy pre-rendering and perf baked in.
\n— biscarch
\n# Q: Where can we find Gatsby job postings? — Rshig
\nA: Here's two!
\nhttps://www.gatsbyjs.com/careers/open-source-maintainer/
\nhttps://www.gatsbyjs.com/careers/cloud-services-engineer/
\n— kylemathews
","frontmatter":{"date":"2018-12-13T00:00:00.000Z","dateGroup":"December 2018","dateString":"Thursday December 13th, 2018","description":"Founder of Gatsby.js\n","location":"Q&A Channel Reactiflux","people":"@kylemathews\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Gatsby Team"}}},{"name":"jeroen-ransijn","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Hi Jay, do you have any plans to roll out typescript support for evergreen, secondly is there any kind of timeline in place for theming? – Owenage
\nA: Let's start with the TypeScript part since this will be a more recurring question I imagine. When we started building Evergreen I and the team had no TypeScript experience, and it was not something we were using anywhere in our app. Over time TypeScript/Flow, and lately TypeScript has really taken the lead within the community.
\nI think somewhere within 12 months the team might add TypeScript bindings to Evergreen, since some new greenfield projects are being build with TypeScript—so it is an internal pain as well, gaining prioritization on the roadmap.
\nI am still unsure if it makes sense to completely rewrite Evergreen in TypeScript or Flow, but there are some upsides for documentation generation. Prop type definitions in the docs could be way better with TypeScript/Flow.
\nOur team has to do more research on this, and figure out where it fits in our roadmap. In the short term I think there are some more important things to work on that more directly align with business value.
\nDuring a hack week project I actually partly build a theme builder inside of the Evergreen docs. While doing that I had to work on many internals as well. We tabled theming in the v4 (Kauri) release, but it's something to consider down the road for sure.
\nCurrently we have a good branch that have more powerful concepts for theming build in—building on top of the really low level APIs from v4.
\nTheming is really hard, and it might mean breaking changes to what we currently have, and in some ways changing some of the visual styling in order to be more easily themed.
\nSegment is dedicated making Evergreen an ongoing success in the community, and I imagine will we revisit it at some point. When that is, unsure.
\n# Q: How does the component library/design system fits with legacy projects and priorities from the business perspective? – wilder
\nA: I am interpreting this as how well Evergreen works inside of legacy projects from the community as well as possibly our own internal legacy projects.
\nEvergreen works well within a lot of different environments, and is easy to adopt because we fully embrace CSS-in-JS, simply import a component and it works without any other setup.
\nAlso, because of this same approach there is no bleeding global styles that you have to think about from Evergreen.
\nThe only thing that might give you some issues is current global styles within your app. For the most part we unset/reset CSS properties as much as possible within components, but there might be some cases where this becomes a problem. We will continue to make tweaks here where reasonable, but we can't fully know what global styles are being used within your environment—this is true for every framework however.
\nFinally, the business perspective. Evergreen is Segment's Design System and is meant to solve our growing set of problems. The Segment web application faces many interaction design and UI challenges. We have audience segmentation tools, plenty of virtualized tables and even a editable spreadsheet like interface! If you are doing somewhat similar things to us in terms of UI, I bet we have some component for it.
\nThe second part of that question might also be how can we continue to prioritize Evergreen as part of our larger business goals. Segment exists because of a open-source library that turned into Segment (analytics.js), we continue to believe in the importance of open-source for our business and try to maintain a leadership position in this space—to improve our software and attract world-class software engineers and designers. I see Evergreen as a tribute to that on the design and design systems side that already gave back to Segment in big ways.
\n# Q: Hi Jay! There are many UI frameworks out there—Material, Ant, Bootstrap—why create a new one, and what sets Evergreen apart? – statico
\nA: I have answered a similar question before on Spectrum and will post pretty much the same answer here.
\nI build Evergreen to solve my own problems for prototyping products quickly. Most components are build with ui-box, a React primitive that allows you to pass CSS properties as React prope straight on your component. This solves a lot of layout and spacing questions, and in most cases the height prop governs the size of a element. For example, <Button height={40} /> will work.
Evergreen is still relatively young and there are still many things to work on. There are more mature systems out there. I have heard multiple people mention they might switch from Ant Design to Evergreen.
\nI see Evergreen currently as unapologetically accepting non-responsive desktop UI, CSS-in-JS and finally component abstractions all the way through, at no point are you dealing with class names. Some of those things might change in the future.
\nOn a more high-level note, Evergreen takes developer experience really seriously. If it's easier for a developer to build something better, the customer experience will become better as well.
\nFinally, Evergreen is very much a remix of all the great work out there of Ant Design, AtlasKit, BlueprintJS and many others. I have dug around the source code of many of these libraries to find well designed abstractions—and learned a ton!
\n# Q: Hello Jeroen, I am designing a very busy form and have a few readonly fields (Created by, date, Modified by, date) Does Evergreen provide any components that will work well for readonly portions of a form? – cpope117
\nA: I think you are asking if Evergreen contains form controls such as text inputs and possible some date controls that? In this context I am not sure what you mean with \"readonly\", but all our controls pass through native props such as the readonly attribute.
\nWe export plenty of components for form controls but are still missing a dedicated date widget/control. Internally we have some version of this, so I imagine we will try to figure out how to get this in Evergreen at one point. Not sure when that will be.
\n# Q: What would you say to a young person like me trying to make it in the sea of programming as a software engineer? – Rough_Sapphire
\nA: Hey Rough, I don't know how young you are, or you experience, but I can give you some context on my own experience and maybe some insights.
\nI started young while in high school with really basic stuff. Doing a bit of design and learning about development. I started working at a agency during and right after high-school when I was about 17–18 years old, and skipped college altogether. Soon after I went to San Francisco, and joined a bootcamp for a year. Right after I joined Segment—and have been there for over 2 years.
\nFirst, I have grown up with absolute privilege in my live, a good childhood, access to good education, computers, internet—everything. This is a big part.
\nSecond, learning how to learn is one of the biggest skills you can acquire. Make friends, find a community of people to do it together. It's a much about the journey as getting anywhere.
\nFinally, I have always intentionally designed my career. Being really good at something can take you really far by accident, but being intentional about what you do can take you even further than you think. I don't consider myself a very good software engineer or designer —and there are many things for me to learn still. But I have made very intentional decisions in my career that have propelled me forward. Often the choices that involves risk are the ones that pay off. Just my 2c.
\nI worked at an agency for about 3–4 years—2 years full-time
\n# Q: I am curious, how long did it take you to build the first version of Evergreen? It looks amazing. – MihailZverev
\nA: Thanks for the kind words Mihail! Evergreen started when I was the product design lead on our Personas product about 1–1.5 years back. You can read a more in-depth overview of that process here and here.
\nIn short, I started building the foundation about ±1.5 years ago, and everything started within the current repo. You can actually go back in time, and see the first commit with maybe 1 package at that time (typography I think).
\nThat being said, internally I authored a library called @segment/react-ui-library and after we build 1 more internal library called @segment/elements. After all those learnings, I wanted to create a single library to rule them all and that was open-source.
# Q: Do you think that \"hijacking a project\" can work on a non-opensource friendly company? – wilder
\nA: Wilder is referring to my blog post \"Hijack a project to convince your company it's ready for a design system\".
\nI will explain what \"Hijack\" means first. Design systems don't always align with business value, and can be hard to prioritize in especially smaller organizations. There is always a project \"more important\" to work on that is actually making the organization revenue or hitting some goal. Hijacking means in this context, to work on the project that is \"more important\", but make small steps towards a design system—or a project that doesn't directly align with business goals.
\nAnd can this \"hijacking\" work for non open-source friendly companies? Yes, absolutely! I would see this separately from a open-source project however. You can hijack projects within your organization to tackle different projects such as internal design systems, tools, rewrites or processes.
\n# Q: Our team is currently trying to build a component library and we are using Storybook as means of prototyping and using it as a static website to sell the idea of a living documentation/reference. Which tools or strategies did you use to get people onboard besides \"hijacking a project\"? – wilder
\nA: Honestly, I can't say it any better than Matt Bond who build design systems at Atlassian and Dropbox.
\nTo summarize:
\nAlso, an article in which I describe my journey might be useful.
\nGist: Build something small and useful first, don't set out to do everything. Your internal team members are your users.
\nAs a more direct answer to your question: do whatever works. Use tools that get the job done, the tools are just tools, they might not actually drive value in the organization. For instance, you can spend building a documentation website for 6 months. Or you can help teams adopt a couple of components across the organization. I would recommend providing value to others as soon as possible.
\n# Q: Which React or Javascript patterns were critical and important in building Evergreen and how did you learn them—resources you used etc? – MihailZverev
\nA: This is a great question, and I am coming back to a previous answer. The most important patterns and conventions come straight out of other design systems. That is by far the best way to do something, learn and remix other similar products or tools. They are literally facing the same problems as you are. A tutorial or course is only going to take you so far, and often is very surface level.
\n# Q: What do you think about Storybook, can you tell us how you use it, and how we could make it better for you and your team? – Norbert
\nA: I have quite some opinions on this at this point! But first of all, Storybook is amazing, and is a great tool to start building design systems or UI tools. It really started a new way of thinking about building tools in isolation.
\nAt Segment, I have primarily used Storybook, and later coworkers started using docz.site.
\nMy biggest pain points with storybook are:
\nDon't get me wrong, I absolutely love storybook—but since you asked for feedback that is my main pain points!
","frontmatter":{"date":"2018-11-15T00:00:00.000Z","dateGroup":"November 2018","dateString":"Thursday November 15th, 2018","description":"Design Systems Lead @ Segment, spearheading the design, development and adoption of Segment's open-source design system, Evergreen\n","location":"Q&A Channel Reactiflux","people":"@Jeroen_Ransijn\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Jeroen Ransijn"}}},{"name":"react-conf-2018","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-10-25T00:00:00.000Z","dateGroup":"October 2018","dateString":"Thursday October 25th, 2018","description":null,"location":"Henderson, Nevada","people":"Visit conference website\n","recording":null,"time":null,"title":"React Conf"}}},{"name":"orta-therox","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-09-06T00:00:00.000Z","dateGroup":"September 2018","dateString":"Thursday September 6th, 2018","description":"Engineering Janitor at Artsy | Created Danger: which helps codify PR culture, co-runs an iOS dependency manager, Re-designer - Two Years of React Native by Orta Therox\n","location":"Q&A Channel Reactiflux","people":"@orta\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Orta Therox"}}},{"name":"sophie-alpert-2","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: I wonder if you can talk a bit about the future of suspense, and specifically how simple-cache-provider is evolving? I saw a recent commit adding support for event emitters which is exciting — CelloG
\nSuspense: we're eagerly working on getting it ready for public release! we've been testing it out in a few places at Facebook and are trying to make sure that it's solid before shipping it to everyone.
\nAs for simple-cache-provider (not the final name) – it's a library designed to work with suspense for managing data, and we're trying to make sure that it is easy to use suspense without pitfalls, even if the core primitives built into React are a little lower level.
\nNext steps for us are to continue testing it, to try building some apps ourselves to make sure we're happy with all the features, and then to release it sometime later this year :smiley:
\n# Q: Maybe a somewhat unrelated question, but do you have a lot of contact between the React and Relay teams? Roughly, how widely used is Relay at Facebook? Sorry if it's a bit off topic — zth
\nWe sit about 5 feet from the Relay team so we see them quite a bit :smiley: we always want React and Relay to work hand-in-hand, which means things like figuring out how to make Relay play nice with suspense. At the same time, Relay is pretty opinionated and makes assumptions about the structure of your data and of your apps that might not be right for everyone (starting with the need for a graphql server), so we'll always support using React without Relay and expect that to continue to be a pretty common way of using React.
\nWe're using Relay more and more at facebook though! we recently rewrote one of the most popular React surfaces to use Relay and we're in the process of rolling it out as well as recommending it for more new development at FB going forward.
\n# Q: Hi Sophie! what efforts are being made from the React community in general to promote and help an d support diversity? — superdiana
\nDiversity: we don't have as many efforts here as I'd like, but one thing I'm pretty proud of is our norm of having diversity scholarships at React conferences, one we started with React Conf 2015 and that many other React conferences have followed us on. We know that these sorts of opportunities really make a difference (here's one woman who got her first tech job as a result!)
\nIn general we can all be mindful of trying to be inclusive of newcomers and of different opinions, I know that some people have been turned off from the React community in the past by discourse on twitter with people saying things like \"if you don't believe that <X> is better than <Y> in React apps, you must be out of your mind\" and I think it's important to try to avoid that kind of language, because everyone is coming from a different place and is coming with a different perspective that might not match yours.
# Q: Someone on the React team mentioned somewhere that async rendering will prioritise rendering of visible components, and defer rendering of items not currently visible on the screen. Is this true, and if so do you have a rough idea of when it might be implemented? Sounds like a better alternative to virtualization for some of our use cases, so hoping it's true! — Raptori
\nDeprioritizing offscreen rendering: that's the hope and different rendering priorities is one of the major parts of async rendering! hopefully someday we'll be able to do it fully automatically (we haven't tried to work on that yet), but the current development version of React treats elements with a hidden attribute differently (ex: <div hidden={true}>{...}</div>) and deprioritizes that render but does it in the background so that by the time you remove the hidden attribute, it's hopefully already rendered.
# Q: We often have issues with hot-reloading feature for React native (especially for Android) are there plans to fix some of the nasty bugs? Hot Reloading basically doesn't work :stuckouttongue: What commitment does FB have on fixing these quality of life issues? How big is the React native team at FB working on RN? — Brian
\nHot reloading: it has always been and continues to be a bit of a hacky feature so it doesn't always work right, but we have some ideas to improve this that might get put into motion this year.
\n# Q: What's with the bugs in React-native module, 1-2 years ago people were facing the same problem that I'm facing now. These bugs will be cleared out our not?:thinking: It only works on downgrading the version of React-native and babel-preset-react-native modules. — Germa Vinsmoke
\nReact native support: the React Native team is pretty small relative to the size of the project they are trying to pull off, which means that they can't get to everything. That's not to say that we don't care about React Native – more people work on RN than on React itself and we're investing more and more in React Native (see State of React Native for more info) – but we can't guarantee that every bug you hit will be fixed. That said: (1) since React Native is open source you can generally work around issues yourself if you're willing to dive into the code, unlike with the native platforms where that's often not possible, and (2) we're actively working on improving our contribution process so that more people outside Facebook can make improvements more easily and hopefully fix some more of the bugs that you are seeing.
\n# Q: In the reconciliation docs it talks about how React makes assumptions about the structure of the vdom and that helps it achieve O(n) complexity vs O(n^3) for similar algorithms. Are you able to go into some detail about what those assumptions are? — jahans3
\nReconciliation assumptions: that sentence refers to things like the fact that switching between component types, like from <Foo /> to <Bar />, always throws away Foo completely and creates Bar from scratch, even if they happen to render some components in common. Though I'd say this isn't just a performance optimization: it's more predictable, too! So that you can tell from looking at the code what is going to happen in the DOM, rather than needing to guess based on what each component might render internally.
# Q: Any plans for React native maps or alternatives when AirBNB stopped supporting it altogether? Our small group is relying on the map developed by AirBNB because it's the plugin that is stable and is the best option. — ladybugph
\nReact-native-maps: I'm not sure on the plans for this specific package but I imagine that since it is popular someone else will pick it up (and maybe we will move it into the React-native-community group on GitHub).
\n# Q: What are your biggest challenges in terms of managing React's design? Do Facebook's needs for React conflict with third party users, or do they tend to be more in sync? If there are conflicting needs, how are they resolved? — NickServ
\nDeciding what to build: we look at three things when trying to decide what to build: (1) what people in the broader community are asking for, (2) what people inside Facebook are asking for, and (3) what we as a core team think we should add :smiley:
\nThe good news is that (1) and (2) tend to match up very well – even when they diverge a little bit it's usually just because one group is a little ahead of the other in certain ways (for example, we tend to hit large-scale problems sooner at FB but we've historically used SSR less so relied on OSS users to let us know about problems there).
\nAs for (3), we do weigh our own ideas pretty heavily, and then it's on us to convince all of y'all that our ideas are good :smiley: you see this with features, like suspense, that are a little different than what people were asking for, but we had an idea and tried to explain it and now I think most people in the community are really excited for it.
\n# Q: With major companies moving away from React Native and the release of Flutter from the Google team, will there be any slowdown in development of the platform that you can see at this moment? — Van
\nSlowdown in React Native development: no, we're using React Native more than ever at Facebook and we know lots and lots of other people doing the same; I wrote about this here
\n(flutter is a cool project but I don't think it's at odds with RN! friendly competition pushes us both to be better)
\n# Q: What is your favourite non-standard use of React? — Everspace
\nFavourite non-standard use of React: I don't know if I have a favorite, but I think it's pretty cool that the Oculus products we sell (especially the Oculus Go) use React a ton for rendering inside VR – that's maybe not as wild as some of the things people have built, but it's in production and a ton of people are using it!
\n# Q: Hi Sophie - since you have worked on both the React and React Native teams, do you see projects such as React Native Web to be viable? Do you view React Native as one day being available on more platforms, perhaps even consoles? The approach of abstracting native platform APIs behind unified JavaScript APIs seems repeatable and valuable. — Uncloaked
\nReact native web: yes, I'd love to see some sort of unifying platform and that might be something that we'd built as an official product in the future. Imagine your ideal three apps for the same product on iOS, Android, and web: there will be some platform differences (especially around navigation and some of the low level components like buttons), but the vast majority of the apps will behave in exactly the same way. My ideal is that it's easy to share the things that are the same but also easy to split out when you want to!
\n# Q: Good morning, in your last article on React native blog, you talked about a rework of the RN architecture (fabric, am I right ?). What is the current state of this rework, can we expect it for the end of the year as you mentionned ? is this going well ? — Foyarash
\nReact native architecture changes: yes, our big refactor to RN's internals (codenamed Fabric) is going well and testing in production already, so still hoping it will be fully completed by the end of the year
\n# Q: What kind of ideas, if any, do you like/borrow from other frameworks/languages such as ClojureScript's Om (which heavily borrows from React) or Elm? — jshah
\nBorrowing ideas: I don't have any specific ideas that we've used to call out, but I'll just point out that React in general is really us applying functional programming ideas to UI development – rather than managing UI imperatively, convincing everyone to describe their UIs as a function of the input props/state. I think we've been pretty successful with this trojan horse and getting more people to think in a functional way :smiley:
\n# Q: What are plans for React and React Native in the near future? — izzyzizou
\nReact and RN near plans:
\nhttps://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
\nhttps://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
\nBoth do a better job of explaining what we're up to than I could in a message here!
\n# Q: Hi Sophie would you like to visit Mexico?? , I lead the biggest JS community here, and we have an sponsor that gave us the possibility of bringing international speakers — roderik
\nMe visiting Mexico: it's a possibility! send me the details about what you're looking for (my username at fb.com) and I'll see who on our team would be interested
\n# Q: Hi Sophie, I was wondering how does the React team decide which person works on what part of the codebase? It’s obviously quite a large codebase and a single person probably isn’t that well versed in for e.g the reconciliation process and React DOM at once. Does such a specialization happen in your team where certain people are focusing on specific parts of React? Thanks — Rauno
\nWho works on what: yes, naturally folks on the team develop specialities within the codebase over time and tend to know some parts better than others. This ends up so that there's usually one person who is the most natural choice for any particular new improvement but it all depends on who's available when and who's interested in what; we try to have chances for people to learn new things too instead of staying only in one part of the code
\n# Q: For beginners, what is the best form to start with React? What do I really have to know? Thanks! — GerardoTeixeira
\n\"best form to start with React\": not sure if I understand your question right, but if you mean how to get started with React then I'd recommend the tutorial and docs on our official website Reactjs.org; we've put a lot of work into them (and I personally wrote the tutorial). If there are things that are unclear, send us a pull request and hopefully we can make it better!
\n(if you meant for <form> tags and inputs, I don't have a specific recommendation but I know there are a lot of good ways out there)
# Q: Is Discord the only React Native success story as a startup who started with RN from the beginning, or not ? can you name others ? — Discord
\nCompanies who started with RN: I'm not sure offhand, though I'll note that most companies you've heard of have been around a while (just because it takes a while to build up a brand and a business) so even if startups are building in RN and it's working great for them, you don't necessarily hear about that as much as the higher-profile companies.
\n# Q: How widespread is the use of Flow inside of Facebook? — zth
\nFlow use at FB: basically all of our JS is typed with Flow and we're always working to reduce the places where it is unsound (ex: because of using any or $FlowFixMe), both to prevent bugs and with the hope of doing some optimizations based on that in the future (not sure how well that will work, we'll see!)
\n# Q: Can you provide any info on what to expect around VR/AR for React and React-native? — jstansbe
\nReact VR/AR future plans: I don't know, sorry!
\n# Q: How much does the React core team rely on external contributions (bug fixes etc)? — Rauno
\nReliance on external contributions: we used to have a little more and have had fewer over time, which is I think for two reasons: (1) React is less buggy so there is less to improve, and (2) React has gotten a little more complicated over time (like now including our async scheduler) which can make it harder to contribute. It's also often hard to change things if you don't have all the context, so unfortunately we typically see that significant external contributions usually don't make it in. But there are exceptions to every rule, and we recently added PhilippSpiess as a committer because of his consistent good contributions. :slight_smile: when we do have things that can be done by someone without as much context, we try to file them as issues on GitHub with the label \"good first issue\" so that they're easy to find.
\n# Q: Now that Suspense is right on the horizon, what plans and/or ideas does the team have for React in the far(-ish) future? — arianon
\nFar future plans: still probably too early to think about that! I have my own wishlist but I'm sure everyone else does too. There's a lot of related work to do even once we ship our current work (like the earlier question about automatically rendering only things that are onscreen) but maybe one day we'll look at rendering to WebGL directly or something cool like that :p
\n# Q: What possibilities are you most excited about that the Fabric architecture might bring? (one possibility that comes to mind is stuff like preventDefault on events being possible) — empyrical
\nPossibilities from Fabric: Fabric is the RN internal rewrite I mentioned above; I'm hopeful that it will make it a lot easier to integrate with native components – like UICollectionView on iOS is the foundation of most apps and right now you can't use it at all from React Native. In many cases that's totally OK but there are also times when you really do want that built-in behavior and I'd like us to be able to provide it!
\n# Q: Is it planned that React Native will support Kotlin bridging officially? — Discord
\nKotlin bridging on RN: I don't think there are current plans (to my knowledge, we don't use Kotlin at FB currently) but I suppose it's a possibility and it sounds like an improvement that an external contributor could potentially do.
\n# Q: Are you able to comment on the status of a possible API for registering custom React Native platforms with Metro? I've seen a few recent commits that hint at something like this being worked on — empyrical
\nRecent changes to metro: I don't know anything about these, sorry!
\n# Q: Will there be an integration feature that's built into React/RN where we can easily deploy microservices onto our existent applications? — izzyzizou
\nMicroservices: I'm not sure exactly what your question is asking, but we've always wanted to make it really easy to drop in React to an existing app and we've recently tried to make that more obvious in the docs
\n# Q: What are your thoughts on Reason? Have you been involved anything with that? — zth
\nI think Reason is cool in a lot of ways but there are also a lot of things that would need to be improved before I would feel comfortable recommending it to the React community at large, and I'm not sure if it has enough momentum to get there. But I also think that JavaScript isn't well-loved enough to remain dominant in the frontend space forever, so I do think we'll end some language similar to Reason/Kotlin/Swift become very popular in frontend in the future
\n# Q: What does Facebook use for their crash reporting for their React native apps? Bugsnag seems to be the current leader in this space but open to hear what FB does? (Fabric/Crashlytics doesn't include JS stack traces leading up to a native crash.) — Brian
\nCrash reporting at fb: I think it's all custom, sorry! I don't know what the state of the art techniques are and if there's something we could make better – if Fabric/Crashlytics are having a hard time grabbing the JS stack and there's something RN could do better, then let us know and maybe we can make an improvement!
\n# Q: From what I understand looking at current published Fabric code like FabricUIManager, it looks like the JS engine might be more tightly integrated with Native than it is right now. Will running the code in Chrome over websockets still be possible after Fabric is out? — empyrical
\nDebugging RN Fabric over Chrome websockets: no, this likely won't be possible any more; that's one thing that we want to figure out because we don't want to release it until we have a good way to support debugging that can replace it.
\n# Q: Any suggestions as to how we can speed up loading of our bundles? Should we look into building lazy loading bundles? — Brian
\nBundle load speed: generally if you split things into smaller bundles so you're not downloading things you don't need, it'll be faster! you can already do this with tools like create-react-app and webpack by hand but we're hoping to make it even easier in the future (see this tweet from Andrew Clark for an idea of what we're thinking).
\n# Q: How does one get a job in your team without a CS degree — BruceWayne
\nI think only 1 or 2 people on our team has a CS degree (I don't have a degree at all!) – for React and at Facebook more generally we try to look more at your past work than what school you went to, and we try to focus our frontend interview questions on things you would actually use when building apps, not super-theoretical algorithms.
\n# Q: If you could have a magic wand and change whatever you wanted in the software development industry in a flick of the wrist, what would you change first? — Van
\nOne thing I'd change: this is an easy one :p I'd fix all of the things that are pushing minorities, including women and people of color, out of the industry and find ways for everyone to have a little more empathy :)
\nI don't have any technical changes that I'm dying to make though.
\n# Q: So.....how do I even get my resume to you:kappa: — BruceWayne
\nhttps://www.facebook.com/careers/jobs/a0I1H00000LBgrYUAT/
\nFacebook Careers
\nFront End Engineer
\nFacebook's mission is to give people the power to build community and bring the world closer together. Together, we can help people build stronger communities - join us.
","frontmatter":{"date":"2018-08-16T00:00:00.000Z","dateGroup":"August 2018","dateString":"Thursday August 16th, 2018","description":"Engineering Manager for React.js Team @ Facebook | The React Podcast – Episode #11 - Inside React with Sophie Alpert\n","location":"Q&A Channel Reactiflux","people":"@sophiebits\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Sophie Alpert (August 2018)"}}},{"name":"benjie-gillam","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-08-09T00:00:00.000Z","dateGroup":"August 2018","dateString":"Thursday August 9th, 2018","description":"Maintainer of PostGraphile - fast and secure GraphQL API for your PostgreSQL database (formerly known as PostGraphQL)\n","location":"Q&A Channel Reactiflux","people":"@benjie\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Benjie Gillam"}}},{"name":"vincent-riemer","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-07-19T00:00:00.000Z","dateGroup":"July 2018","dateString":"Thursday July 19th, 2018","description":"Software Engineer @ Symantec | Author of React Native DOM, iO-808, and Amateur Music Producer\n","location":"Q&A Channel Reactiflux","people":"@vincentriemer\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Vincent Riemer"}}},{"name":"norbert-de-langen","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-07-05T00:00:00.000Z","dateGroup":"July 2018","dateString":"Thursday July 5th, 2018","description":"Senior Frontend Consultant @ Xebia | Maintainer of Storybook\n","location":"Q&A Channel Reactiflux","people":"@norbertdelangen\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Norbert de Langen"}}},{"name":"tanner-linsley","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-06-21T00:00:00.000Z","dateGroup":"June 2018","dateString":"Thursday June 21st, 2018","description":"VP of UI/UX @ Nozzle.io | Author of React-Static, React-Table, React-Charts, Chart.js, React-Form, Swimmer\n","location":"Q&A Channel Reactiflux","people":"@tannerlinsley\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Tanner Linsley"}}},{"name":"richard-threlkeld","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-06-14T00:00:00.000Z","dateGroup":"June 2018","dateString":"Thursday June 14th, 2018","description":"Senior Technical Product Manager @ Amazon Web Services (AWS) | Focusing on developer experience in AWS Mobile (JavaScript, React, React Native, Ionic, GraphQL, Offline and Realtime development). Working on AWS AppSync, a GraphQL BaaS. | GraphQL at scale with AWS @ React Amsterdam\n","location":"Q&A Channel Reactiflux","people":"@undef_obj\n","recording":"Recorded Webinar\n","time":"1-2pm PT / 8-9PM GMT","title":"Richard Threlkeld"}}},{"name":"peggy-rayzis_james-baxley","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Last week (ish) you and Peggy talked a little bit about the new improvements that have gone into the new apollo-server, especially with new features like the long-awaited defer directive. Is there any timetable or issues about this, and how can people help out with this? - NLincoln
\nA: Yes! We are hoping to have a roadmap out soon, but we are shooting for an active beta process with a lot of new features (including integrated caching :heart_eyes: ) Our timeline for launch is aligned with Peggy speaking at GraphQL Europe! You can get involved by giving a :wave: and mentioning us in the apollo-server channel in slack! - jbaxleyiii
\n# Q: Do you have a resource site that holds the basic use cases for GraphQL that you could share? - Jesse
\nA: Hey Jesse! Great question. Right now, we have a Learn microsite planned to launch in a couple months that will cover best practices, fullstack tutorials, and more! We will be incrementally rolling out the site soon in a couple of weeks. For now, I would recommend going through the getting started guides in the Apollo Client & Server docs or checking out howtographql.com by Graphcool 😃 - peggy
\n# Q: What would be good to learn before learning GraphQL and Apollo? - Dale
\nA: I would say a solid understanding of JavaScript is probably the only requirement. Experience with React and calling REST endpoints/other data sources would also be helpful too. - peggy
\n# Q: When will apollo offer a BaaS :sunglasses: I need this from y'all haha - Sonicrida
\nA: We think GraphQL works amazing with all databases and over current REST products! Graphcool has a great way to spin up a database quickly, and I'm a fan of a good ol SQL build myself. - jbaxleyiii
\n# Q: So can I take that as a \"apollo isn't interested in doing their own BaaS right now\" (I think you all would do a wonderful job in this space) or more of a \"stay tuned\" :stuckouttongue: - Sonicrida
\nA: Yep! We don't have any plans for a BaaS, but rather want to make it incredibly easy to make GraphQL work with whatever backend you want - jbaxleyiii
\n# Q: Are there any good resources on \"good\" schema design? - Chris_
\nA: Right now, there aren't many great resources that cover this topic. But, we're planning to fix this soon with the launch of our new Learn microsite. A general tip would be to practice schema driven development when designing your schema. It should reflect the UI that is planning to consume it. Hope that helps! - peggy
\n# Q: Can you tell us when the microsite will be released? - Awni
\nA: I can't tell you an exact date yet but expect the first version of our best practices guide to be launched around Apollo Day on May 31. If you're in SF and interested in attending, you can use my code PEGGYVIP for 25% all tickets https://www.universe.com/events/apollo-day-tickets-san-francisco-CBJ6X9 - peggy
\n# Q: Hey, thanks for the work, it's freaking cool, I wanted to ask about a few updates. 1. Are you going to add delete fragment support to client, all solutions I have checked look like hacks. 2. Will batching requests work with persisted requests? - Djinnes
\nA: We are! We have some exciting full stack caching improvements coming soon starting with a large performance win that should be landing soon. Cache eviction, staleness, and more are coming too. As for batching with persisted requests, there are still some questions in how / why that is beneficial when using GET, but happy to chat about it in a feature request! - jbaxleyiii
\n# Q: Is there any way to update the store with a
A: Subscriptions should update the cache when data comes back. Aside from that you should be able to access the client from the function as child but I'm not positive if it includes it. If not, thats a great first PR :wink: - jbaxleyiii
\n# Q: What measures are being taken to help out with testing, both frontend and backend? Testing a graphql backend is a little complicated and there aren't any docs for it. Additionally, testing
A: You'll be happy pretty soon I think :wink: We have been working on documenting the super secret react-apollo test-utils and Wes Bos's upcoming course teaches how to do it.
\nFor the backend, I've always been a fan of exporting my schema and running graphql execution against it with a mocked context. - jbaxleyiii
\n# Q: Hi, do you see many usecases where apollo-link-state wouldn't be the preferred choice (in comparison to redux, etc)? - Isomorpheus
\nA: If you're using Apollo Client to manage your remote data, I would say that apollo-link-state would be the preferred choice for pretty much any use case. If there is a use case that Redux satisfies that apollo-link-state doesn't, please let me know so we can work on adding support! 😃 - peggy
\n# Q: Hi, are there any resources on how to Authenticate/Authorize when using GraphQL? Authentication on REST layer would make all the Types private. Is there a better way? - sidoshi
\nA: Great question! We have a blog post on authentication coming out soon. Additionally, there are guides in both the client and server docs. The tl;dr is that you should use GraphQL context to authenticate the user. In your resolvers, you can read the user from the context to determine whether or not they are authorized to view the data. - peggy
\n# Q: There are multiple Apollo clients (Angular, Android, ...). How do you ensure that they have the same feature set? Code sharing isn't an option = is there some kind of \"Spec of Apollo\" so that another platform can be added easily? And would Apollo for .NET make sense? - Chris_
\nA: We have an amazing community that helps build all of the view layer integrations in ways that it makes sense. The core library does much of the heavy lifting, but each view layer has their own feature set that make it easier to use in your current area. I'm a big .NET fan and the graphql-dotnet is a great project if you are looking for backend support. For a client, I'd love to see an Apollo-dotnet :wink: - jbaxleyiii
\n# Q: There are a lot of tools you building and we are getting a bit confused :shrug: is there kind of diagrams show which tools needed for frontend and which for backend? - Stepper
\nA: You are absolutely correct! One of our current focuses is on documenting and making the overall Apollo experience easy from day one to day 1,000. So stay tuned... - jbaxleyiii
\nThe three most important tools you have to worry about are Apollo Client, Server, and Engine. Apollo Server is a Node GraphQL server that implements your schema. Apollo Client allows you to query your schema on the front end. Apollo Engine sits in between the client and the server and enables GraphQL specific tracing, caching, and advanced features such as automatic persisted queries. Hope that helps! 😃 - peggy
\n# Q: I work in a \"old school\", \"legacy\" env. - what's your \"elevator pitch\" for GraphQL / Apollo for both business and architects? - BTM
\nA: Is the best way to empower teams to ship products and features fast on top of their existing applications. Instead of rewriting your entire app, you can expose client focused data endpoints with powerful tools and efficient data transports to make their features fast for end users and developers alike! - jbaxleyiii
\n# Q: Is there a detailed document or blog post comparing GraphQL with OData (and JsonAPI)? It's a question I get a lot when I talk to people about GraphQL. - Chris_
\nA: There isn't but we would love to feature that on the Apollo blog if anyone wants to write it. - jbaxleyiii
\n# Q: Hello, Im using apollo-client with apollo-boost, Is apollo-boost can upload file. using HttpLink ? what is the best approach or config with upload file. - dyesiboy
\nA: File uploads are an advanced feature that Apollo Boost doesn't support because it requires a custom link configuration. To set up file uploads, please read our guide on manually creating a client and use the file upload link: 1) https://www.apollographql.com/docs/react/advanced/boost-migration.html 2) https://github.com/jaydenseric/apollo-upload-client - peggy
\n# Q: When React Context will be supported by apollo-react? - Jorge
\nA: We currently have a 3.0 alpha out for react-apollo and will be shipping it soon with full context support including SSR! - jbaxleyiii
\n# Q: It looks like a lot of resources are being dedicated to creating learning interfaces! :raised_hands: I don't mean to keep your word on it, but do you mind listing them out? So far I've seen - kylemh
\nA: 1) Supporting Wes Bos' upcoming GraphQL course
\nkylemh: Are there any I'm missing and will the edusite feature every tutorial-esque blog post?
\nAll of those learning resources are correct! Another one I'd like to shoutout is Eve Porcello & Alex Banks' new O'Reilly book coming out soon entitled Learning GraphQL. I'm a technical reviewer for the book and have read it already - it's a super awesome resource for learning GraphQL and Apollo 😃 - peggy
\n# Q: Regarding schema design: modelling value objects or relations to objects without an id (just because the api is cleaner than) - how does apollo client handle caching then ... is this bad practice to model types without Ids? - Chris_
\nA: I like returning a global ID! type for id which lets me refetch that specific data schema wide. I try to not put my actual databaseId as fields if thats helpful. - jbaxleyiii
\n# Q: Tell me about schema stitching for subscriptions. I see this issue is closed: https://github.com/apollographql/graphql-tools/issues/420 but it doesn't seem like a good solution was produced. Does the Apollo team have any suggestions on this front? - alexanderson1993
\nA: I think that closing was probably an accident! I think a good starting point would be to open a new issue an revive discussion of it. - jbaxleyiii
\n# Q: Are there any plans on writing apollo-server on other languages as well or is node the one and only target? - Lyrrad
\nA: Right now, we're focusing on Node with other JavaScript targets in the works. We think the GraphQL layer should be owned by the product teams and therefore should write their server in JavaScript because they're already familiar with it. We'd love to support more languages in the future if community members wanted to get involved. Check out our recent demo of Apollo Server on Cloudflare workers for an example of Apollo Server run on a JS target other than Node: https://twitter.com/apollographql/status/991499774984507393 - peggy
\n# Q: I wanted to ask about using apollo on cloudflare workers, I read all that is available about it, is there any more information about it? it's so cool - Djinnes
\nA: Its still early (but exciting) and two other members of our team have also given talks at SFJS and GraphQLNYC about running graphql at the edge! We would love to talk to anyone interested in this idea and expect a number of articles coming soon :wink: - jbaxleyiii
\n# Q: I'm working on helping my org adopt GraphQL and Apollo for our web data layer right now, but we've been having a difficult time figuring out good testing practices with React-Apollo and the render prop components. Any tips or resources you can point towards? - TreTuna
\nA: Great question! Right now, we have a react-apollo/test-utils library that's currently undocumented but we're working on adding a comprehensive guide soon. Also, Wes is covering testing in depth with the new test-utils package in his course 😃 - peggy
\n# Q: My team is planning on implementing GraphQL with Apollo in concurrent adjacency with a REST API. Essentially, we have plans to sell our API as b2b and they demand REST, but the developers have decided that the best dev experience can be found via GraphQL. - kylemh
\nA: kylemh: I don't think this use-case is isolated to just my company, so I ask: Do you have any strategies and/or tools to help avoid boilerplate in maintaining the same models/controllers in two places at all times?
\nA couple of options! Often times we see teams in that situation create a REST service that calls into their GraphQL service with predefined queries. If they are on the same server, you can often share the fetching and even model your api params (/:userId/:limit) after arguments in the query. So address will be stored with the person in the cache. - jbaxleyiii
\n# Q: In working on selling my org on using GraphQL (server written in Elixir) and Apollo Engine as our aggregate API layer and Apollo for our front end data needs, what would you say are the most exciting things coming up from the Apollo team? P.S. You have all been pumping out some amazing things already this year! - TreTuna
\nA: We're definitely excited about Apollo Server 2.0 and bringing Engine features like caching and persisted queries to Apollo Server core. We're also excited about fullstack caching (with invalidation!) and new tooling involving schema versioning. On the front end, we're super pumped about Apollo Link State 1.0 which should include dynamically adding resolvers for code splitting and some API usability improvements. :rocket: - peggy
\n# Q: Is there anything similar to MySQL Check Statement in GraphQL? To check if for example the user the is calling for the data has the permission to ask that data. - Spoderman
\nAuthorization is best done with either schemaDirectives or custom logic in resolvers to see if a user can ask or return that data. - jbaxleyiii
\n# Q: The book you mentioned, Learning GraphQL, is there a link we can bookmark for updates/release info on the book, would be very interested in the read 😃 - Brentontw
\nA: Follow Eve Porcello on Twitter for updates regarding the book 😃 - peggy
\n# Q: Say that I have 5 pieces of UI that depend on a logged in user, and all 5 could be displayed at once. All 5 have some fields in common and all have several distinct fields. Generally, should all 5 use one \"mega query / render prop\" that describes all of the data and wrap all 5 elements. Or should each be individualized? Or is there another pattern? - LawJolla
\nA: It depends on your data fetching on your server level, but I like to create a
# Q: What qualities does the Apollo team look for in someone to join their ranks? Such a distributed team that's on top of the entire GraphQL game! - TreTuna
\nA: Two of our company values are kindness and transparency, so we look for candidates with those qualities 😃 - peggy
\n# Q: Any update towards a live query spec? I'm curious how this could be done without reactive data storage, if at all. - LawJolla
\nA: No update on the spec, but if you are interested in it we would love to work with you to build it! - jbaxleyiii
\n# Q: Any suggestion of good resources about graphQL? - leandrorr
\nA: @peggy has put a lot of resources as answers to other questions above, maybe take a look at those responses? - jbaxleyiii
\n# Q: Hi, I have watched youtube videos on javascript, I also practice puzzles on code wars. But, I have been told to really excel in javascript I have to learn a framework such as react. Where do I begin? Need help please. - adroit_machine
\nA: I think what you're doing right now is great! Try building a couple small apps with vanilla JS and then progress to some introductory React tutorials. Good luck in your coding journey!
\nKent Dodds has an awesome free intro to React tutorial on egghead: https://egghead.io/courses/the-beginner-s-guide-to-react - peggy
\n# Q: First of all thank you for amazing job with all yout tools. The question i have is regarding the new coming server. Are the new features going to be plug in adition like Link in Client ? Are there any breaking changes planed? Currently i am in the middle of implementing glq backend using Apollo server so although its super straight forward, should i be aware of something with the new coming version? Cant wait btw ! - farmas
\nA: Nothing breaking! We are planning a pluggable Cache API :heart_eyes: and some opt in schema opinions like error handling practices and schema directives that make building a production ready schema incredibly easy! - jbaxleyiii
\n# Q: We are using Apollo client & server right now in our apps and they quite frankly make GraphQL a breeze to use! However I avoid the React components and instead we use the client directly to preload data during the routing phase because I don't like handling loading states everywhere. So I am very interested in the suspense API and any plans you might have for this once it lands! - Paisley
\nA: We're coming out with a new defer/load API soon for Query components that should make prefetching wayyy easier. As for suspense, we have a 3.0 alpha with an early POC working, which you can read about in this post: https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e. I'm previewing another suspense demo in my React Europe talk next week :wink: - peggy
","frontmatter":{"date":"2018-05-10T00:00:00.000Z","dateGroup":"May 2018","dateString":"Thursday May 10th, 2018","description":"Open Source Engineers @ Apollo | Building Apollo Client, Engine, Server, and other tools to help you incrementally adopt GraphQL.\n","location":"Q&A Channel Reactiflux","people":"@jbaxleyiii & @peggyrayzis\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Peggy Rayzis & James Baxley"}}},{"name":"jared-palmer","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What is your opinion on using context api? – zend
\nA: Start with props and local state. Lift state when you need to. Use context for session related things like the current user and any top-down configuration/flags. That got me pretty far. Otherwise, my heuristic is to use context when the developer consuming the component should NOT need to know about the magic happening in the background. But also generally avoid magic hehe!
\n# Q: How did you get started with with development? – Gabe
\nA: I had taught myself Framer.js and that's how I learned javascript. I got started with development after I got rejected from a Product Design job at FB in summer of 2015. The recruiter told me to get more experience and follow up in around 6 months
\n![\"Chart](\"https://cdn.discordapp.com/attachments/193117606629081089/441691709357948938/contributions.png\")
I got hooked on React pretty quickly after and you can see where things kinda \"clicked\" in my contribution graph. Since then I'd say I just kept at it for 6-10 hrs every day for 2 years.
\n# Q: What is that cool UI you posted of GitHub history? – devsnek
\nA: https://GitHub-contributions.now.sh/
\n# Q: Where in the priority list is async SSR for after.js once React implements it? – lokiiarora
\nA: Very very high.
\n# Q: How would you recommend someone move from intermediate/advanced React developer into expert? Learning strategy or path ? – jhorwitz
\nA: Keep on working. Keep on building. Don't be afraid to try out new stuff.
\nIt's a numbers game. Just keep on publishing stuff.
\n# Q: Do have any caching strategies for Razzle? Any code splitting for Razzle? – Nima_arf
\nA: After.js has codesplitting, there is also an Razzle example with react-loadable. We should probably add one with streaming rendering. As for caching, you could use an LRU cache with the result of your ReactDOMServer.renderToString() and maybe use routes for keys.
\n# Q: What is your favourite project and why? – AdrianC
\nA: I don't if I have a favorite! Probably Formik or Razzle because I find them so useful in my day job.
\n# Q: You really have a lot of React projects in your account, but how do you keep doing more and more projects by yourself and still doing your daily job? – leandrorr
\nA: I just keep having ideas and publishing them. My trick is to make projects that align with what I'm doing during my day job, so by fixing a bug in one of them I am ultimately just improving the app / project I'm working on. Additionally, at The Palmer Group, we spend all of Friday on open source.
\n# Q: What are some of the areas React can learn from the competition? – lokiiarora
\nA: TBH, I've only played around with Vue for a few hours. I don't care for template string magic. However, I think it's pretty cool that the entire Vue ecosystem has basically agreed upon state management and styling. Imagine if the React community agreed on styles! Components would be much much more reusable across projects.
\n# Q: What do you think about the future of native apps? Do you think it will be defeated by the web with tech like webassembly? – lasagnelennart
\nA: Native apps aren't going anywhere. IMHO Web Assembly will need to be extremely easy to add to existing apps for it to succeed (i.e. a webpack loader).
\n# Q: Best advice for student developers to \"get out there\" and make connections? And hello from NJ :stuckouttongue: – Andrew
\nA: I used to never go to meetups. I went one of the early React ones in NYC at LittleBits and thought is was meh, and then didn't go to another one for over a year. I was so wrong. Not only do I suggest going to local meetups, the best thing you can do is to give a talk. It's scary but so worth it. If there isn't a local meetup nearby, host one yourself. You'll be surprised who shows up
\n# Q: What's your favorite source of React learning? – leandrorr
\nA: Twitter nowadays. Also my secret way to learn stuff is to use GitHub Search > Code > Javascript. Just type in the package names of the thing you are trying to use and open every result in a new tab. Usually someone else has tried whatever it is you're doing before. The neat learning hack I use is I have a bookmarklet that jumps me to the very first commit of a GitHub project. I then can get a better sense of how a project started and the code is usually much less intimidating. You can learn a lot this way. Lastly, follow people on GitHub and check out their gists every once in a while, tons of useful stuff.
\n# Q: Talking about magic... What do you think about Relay?? – AdrianC
\nA: I've tried to learn Relay approximately 3 times and failed each time. lol. However, 2 of my coworkers Jack Cross and Nathan Force both used it at Amex when they were there. We don't use GraphQL at the moment actually. Instead, we have a special codegeneration tool that spits out all of our data fetches and perfect TypeScript types. However, we are looking at experimenting with GQL in the next few months.
\n# Q: Do you think it's good idea to migrate from Razzle to After.js? – Nima_arf
\nA: Newest versions of After.js no longer come with a build setup. You can use After with your own thing or use Razzle. There's an example in the project of this exact setup.
\n# Q: What kind of stuff do you do at The Palmer Group? – Andrew
\nA: We are a strategy and solutions company that focuses on digitial transformation. Unlike traditional agencies, we do digital strategy and full stack overhauls. So we'll take a company with outdated tech and bring them into this decade--moving everything to the cloud, setting up best practices deployment and development workflows, and automating the crap out of every single aspect of their business. My team (solutions) builds apps and services to do just that.
\n# Q: What is your favorite technical book?? – AdrianC
\nA: https://www.amazon.com/Economics-Banking-Financial-Markets-Pearson/dp/0133836797
\nI used to be an Econ wonk.
\n# Q: Any tips for React, Redux beginners? – Arun
\nA: Code every single day. Honestly. I don't know many people that have been successful just doing it a few times a week. I recognize that not everyone is fortunate enough to be able to do that. The other thing is just get comfortable not knowing how things work....ever. Most people get turned off by this feeling because our education system basically teaches us to feel bad about not knowing stuff. If you get comfortable in this zone, and then learn how to teach yourself new things, nothing can stop you.
\n# Q: What frustrates you the most about React applications? What best practice do you wish existed for everyone? – EvHaus
\nA: I wish everyone could use the codegen tool that we have. Testing data fetching used to be such a pain. Now it's not.
\n# Q: What codegen tool? – jk
\nA: The codegen tool generates all our teams data fetches and typescript types whenever we make changes to our backend API's. Since we have nearly 100% typescript type coverage, making sweeping changes is a breeze. We just do a new codegen and fix the TS errors.
\n# Q: What is the most exciting thing you would learn now if you had time? – PeterM
\nA: Good question. Hmmmm. I want to get into ML and apply it to developer tools. Even though I was an econ major, I never took calc 3, so need to first learn more math.
\n# Q: What is your favorite technical stack?? – AdrianC
\nA: Fav tech stack. React x TypeScript with Razzle or react-scripts-ts.
On the backend, I use Node and a custom data layer I have yet to publish for MongoDB on my sideprojects. In our client apps/projects, we use Dropwizard.io (Java) and Mongo. We have an awesome relationship with the team at Mongo and have experienced team members that have scaled it successfully.
\n# Q: What's the engineering culture like at Palmer that other companies can learn from? Having Fridays to work on Open Source is awesome. – hehexd
\nA: I am actually working on a \"Principles\" repo right now so other companies can learn from us. So stay tuned for that. The big things for me are radical enthusiasm and communication. I used to play lacrosse in college, and had the pleasure once of playing against one of the best goalies in the world, John Galloway, in a summer league once. He was unreal. What really surprised me is how much and how well he communicated to his defensemen. That stuck with me a lot. Have a lot more to say about this, hopefully will be able to get this down on paper.
\n# Q: If you need to make a back end for your React project, what would be your back end framework and your plan, how would you go about making a back end? – Nola1222
\nA: It depends on the project. I would stick with whatever is easiest for you. That being said, avoid ORMs/ODMs. I will hopefully soon publish the Node.js port of our Java Data Access Layer, but the gist is you want to be in total control of your database writes/reads but fully encapsulate / abstract them into a single place. This way you don't need to rewrite your app when you inevitable change or add new databases.
\n# Q: What non technical skill/thing you think is the most important in tech? – PeterM
\nA: Be a mensch (a person of integrity and honor).
\n# Q: It seems like Mongo is a crime to use these days if you mention it. What are some things for people who are skeptical to know and consider before using it? – Sonicrida
\nA: One of our engineers has literally scaled mongo to send 8 billion emails a day IIRC.
\nThere are definitely lots of ways to abuse mongo. There are best practices for sure. It got a bad rep back in the Parse days, but the latest stuff is so rad.
\n# Q: When will you open source your codegen tool? – zend
\nA: https://github.com/palmerhq/swagger-codegen/tree/typescript-axios
\nIt requires that you have a well typed swagger api, which we get for free because we use Dropwizard.
\nWe forked the main swagger-codegen and ours spits out a axios-based fetches instead of window.fetch or whatevs the default one was.
","frontmatter":{"date":"2018-05-03T00:00:00.000Z","dateGroup":"May 2018","dateString":"Thursday May 3rd, 2018","description":"Engineering Lead @ The Palmer Group | Author of Formik, Razzle, Backpack, react-fns, After.js, etc.\n","location":"Q&A Channel Reactiflux","people":"@jaredpalmer\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Jared Palmer"}}},{"name":"tanmai-gopal_vamshi-surabhi-rao","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-04-19T00:00:00.000Z","dateGroup":"April 2018","dateString":"Thursday April 19th, 2018","description":"Founder & Tech Lead @ hasura.io - Postgres-backed GraphQL backend as a service | Topic: Building a high-performance GraphQL engine for Postgres\n","location":"Q&A Channel Reactiflux","people":"@tanmaigo\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Tanmai Gopal & Vamshi Surabhi Rao"}}},{"name":"jordan-eldredge","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Winamp2.js is really awesome! It really brings me back <3. Do you have any plans of maybe turning it in to an electron app so it can run natively? :smiley: - Gabe
\nA: Yes! It's actually being worked on right now. I'm a little nervous though that it will hit some kind of \"uncanny valley\" where it's just close enough to \"right\" that it feels really gross. You can follow along here: https://github.com/durasj/winamp2-js-desktop
\n# Q: Maybe this is a dumb question, but why do you choose winamp? - AdrianC
\nA: I was sitting in my room and the parallel between Winamp skins' implementation, which is just a zip filled with .bmp sprite sheets, struck me as being similar to CSS sprite sheets, which I was working on at work. I thought it would be interesting to see if I could recreated the Winamp UI with CSS using the original assets. Once I got it working, it was fun enough that I continued playing with it.
\n# Q: What is nuclide? - cmcaboy
\nA: Nuclide (https://nuclide.io/) is an IDE built on top of Atom which is built specifically to integrate the many internal tools at Facebook. It's intended to make writing code at Facebook efficient and enjoyable.
\n# Q: Do you expect Nuclide and Atom IDE to exist side-by-side or do you think one will supercede the other? - ckknight
\nA: I think that Atom IDE is probably a better fit for most non-Facebook developers. For now, I think they will exist side by side, but more functionality which is generally valuable we be getting moved into Atom IDE.
\n# Q: What was the major challenge you faced while working on winamp2? - Karma7
\nA: Getting skin parsing working was probably the biggest challenge. I wrote a post about how it works, if you are interested. Beyond that, the Web Audio API is still really fickle across browsers. I wrote a tweet thread about that.
\n# Q: Any plans to have nuclide support for VSCode? I understand that could take significant efforts including rewrite. - dhruvdutt
\nA: We've embraced the Language Server Protocol that VSCode defined (this is what enables Atom IDE to make use of LSP servers) so much of our language level work can theoretically be shared. That said, there are other core challenges that we would face: remote development and a much more locked down UI API. Basically, I don't think the rich UI experience we offer in Nuclide would be possible in VSCode.
\n# Q: I would like to write a blog and articles too, but I don't know how to start. Do you have any advice for me? - AdrianC
\nA: My blog has generally taken the form of things I've learned. Don't worry to much about if the things you're learning are \"original research\" or solving problems that haven't been solved before. If it was challenging for you, there are likely others out there who face the same challenge and your perspective can probably help. In general, look for interesting things to work on, contribute to, and you will probably find interesting problems to write about.
\n# Q: Will there be more documentation in the future on how to write plugins for Nuclide? I tried writing a plugin once and never got really far with it because I found myself diving more into the source than being able to read docs on how architecture is built for it. - lifeiscontent
\nA: Plugins are just Atom plugins. The documentation for Atom plugins should be the same. The remote code can be somewhat Nuclide specific. If you have any specific questions, feel free to file an issue and we can look into either answering it, or improving the docs.
\n# Q: Can you talk about your typical day at work? What's the work/life balance at? What self-development opportunities does FB offer? - BTM
\nA: I work a pretty early schedule because it works well with my life schedule (I have a 2.5 year old). So I'm in the office at 7:40, grab lunch, work in a pretty quiet office until most other folks get in around 10. I have a few meetings throughout the day, but am mainly left to work on the things that I think are most important. When I get home, I put my daughter to bed, and try to find some time (maybe an hour or so) to hack on a side project. This works pretty well for me, in terms of work/life balance. I don't feel pressured to work outside of work hours.
\nFacebook is great in terms of career advancement. Mostly just getting to work with smart people, and read great code.
\n# Q: I am new to React, been trying to learn and to get a job related to it, recently I am finding it hard to implement while learning, any suggestions? - Arun
\nA: It's a totally different paradigm, I sympathize. Understanding the fundamental ideas behind React (there is a virtual dom, your DOM is a function of your state etc) is very important, and will inform everything you write. I think finding a project that you are passionate about is a great way to learn. When really want to solve a real problem, figuring out how to use a library is a means to an end, not a means in and of itself.
\n# Q: How did you manage your free time to work on this impressive side project? - cluk3
\nA: If you'll notice, I've been working on this particular side project for over three years. I like to have lots of side projects going on at any one time. That way I can walk away from one when I get stuck, and only resume when I feel like I have a good solution. I don't worry too much about moving fast. There's enough of that at work. Instead I just work on what's interesting that evening. That said, I find the projects interesting enough that I do tend to find time most evenings to make some small progress.
\n# Q: Facebook obviously highly values modern libraries and web technologies but we all know the tech industry changes incredibly quickly. What do you expect will be the next major shift in in tech industry? - Llaver
\nA: I actually think, at least within JavaScript UI code, that we've reached a leveling off point. I think we're going to continue to see an evolution of the declarative style that React introduced. There will likely be tools on top of that to optimize it. Other kinds of build tools, or languages/constructs that make static analysis more powerful and let our build tools do more heavy lifting.
\n# Q: What tips would you give to a student going into college to study computer science and applying to internships? - Ron
\nA: For me, having a side project (or 10) was very beneficial. I never went to school for CS, so I don't have much context on your exact situation, but I would say, walking into an interview with a problem that you are passionate about, and have thought about and tried to solve makes for a great conversation topic.
\n# Q: Could you share us some good habit what do you have?? - AdrianC
\nA: Lol, I dunno. I'm pretty good at staying in touch with people. The more I work in this industry, the more I realize how important relationships are. You will learn much more from a friendship with another developer who is interesting than from any book or tutorial.
\n# Q: What are suggestion for beginners to make their career to Facebook specially for those who are not living in USA? - Shoaib
\nA: Great question, and one I'm probably not very well equipped to answer. I would say contributing to open source is a great way to meet people and to learn what great code looks like. I wish you the best!
\n# Q: What do you study at school? Where? - AdrianC
\nA: I studied classical voice at a local \"state\" school: San Francisco State University. I studied classical voice and still sing with local opera companies when I find the time. Although that time has been much less since I've had a kid.
\n# Q: One thing you wish you knew before starting winamp2-js project - cluk3
\nA: Hmm. I learned a lot from all the roadblocks I hit. I learned about the failures of jQuery and migrated to vanilla JS and then learned about the failures of that approach and migrated to React. I don't think I would change anything. Sorry for the non-answer!
\n# Q: How did you go from classical voice to a career in programming? - Juanus
\nA: I was writing software in my spare time to manage my opera recording collection, and my roommate at the time was doing contract engineering work. One day he was behind on a deadline and asked me if I wanted to do some work for him. I was just out of college and didn't have a job yet, so I said why not. I worked for him for several years doing Wordpress sites and the like until I eventually pulled the plug and applied for a full time job as an engineer.
\n# Q: What are some of the new WebBrowser APIs you are looking forward to? - lokiiarora
\nA: I really want to look into Web RTC and see what can be done there. Other than that Web Assembly is looking really promising. In fact, there is some effort going into trying to compile AVS (one of the Winamp visualizers) to web assembly. Which would enable us to get that working inside https://webamp.org/
\n# Q: What was your first program language and are you learning a new language? if yes which one? - AdrianC
\nA: My first programming language was PHP, and I regret waiting so long to look elsewhere. I was self taught and didn't realize how much of my experience would transfer to a new language. I've played a bit with Elm, and it's reallllly amazing. Especially from a developer experience perspective. I'm actively searching for a side project for which Elm would be a good fit. I'm also excited about Reason, but haven't had the time to try it yet.
\n# Q: You mentioned you didn’t go to school for CS, why did you make that decision? I’m 17 yrs old, 3 yrs of frontend exp, and the question of going to college or maybe doing a boot camp instead has been on my mind. Do you have any tips or suggestions? :smiley: - Jett
\nA: I don't have much to compare to my experience. I went to school with the aim of getting an general education rather than with a specific career goal in mind. I realize this is a huge privilege to be able to make that choice, but I chose a very inexpensive school partially for this reason. I don't know many engineers who credit their formal education with much that transferred to their real job. One notable example is the amazing Vjeux who wrote a great post on the topic. I would say, if you are already writing code, you can probably get hired without a degree or a bootcamp, and there's no education like industry.
\n# Q: What do you believe would be the best path to finding a career at a high valued company as a 16 year old with no industry experience but many side projects? - reallypan
\nA: Meet people. Don't be afraid to reach out on Twitter or on GitHub. Knowing people can really help you know what to look at next and find problems that interest you. Since every tech company has a large reward to referring people, if that person gets hired, you are more than likely going to eventually get a request to at least apply to their place of work.
\n# Q: When you started the winamp-js project, did you know that there was still a large community out there using Winamp? Or did that come as a surprise? - Juanus
\nA: No! It came as a rather large surprise to me how big the cult following that Winamp still has. I do wish I had found that community sooner. Darren Owen (who is a former Winamp developer who is now working on a community driven version of Winamp) was a huge asset in my work, and I wish I had found him sooner.
\nYou should all check out https://getwacup.com/ and the work that he is doing. Winamp lives!
\n# Q: What is your favourite IDE and tech stack right now?? - AdrianC
\nA: For work at Facebook, Nuclide is honestly really great. For side projects, I often enjoy the out-of-the-box experience that VSCode offers. Often I find myself just opening up Vim (sometimes inside Atom's editor!) I'm also excited about xray. For other tech stack stuff, I think React+Redux solves most of the problems I want to solve these days.
\n# Q: There are a few people I follow, look up to for inspiration/motivation, and just generally enjoy everything they do. Who is your hero? Who would you suggest I follow? Developer or non-developer :smiley: - g33kidd
\nA: I think Cory Doctorow has had a huge influence on me and how I think about technology. For inspiration, Darius Kazemi and his many amazingly silly side projects is a great one: https://twitter.com/tinysubversions
\n# Q: I recently got my first job as a developer. The other devs have worked here for years and are amazing at what they do. The complicated part is that I'm not used to their non-modern and non-structured code. I've told my boss that if I were to actually learn and improve anything, I'd have to rewrite it all from scratch to better understand the current code. Now the issue is that I don't wanna insult the other developers because I want a clearer, extensible and more structured code. Any advice on what to do? - Sentinel
\nA: It's slow going, but finding a corner of the code base that you can understand, no matter how small, is huge. Tech stacks change, but the core problems remain the same. Try to understand not just how the code works, but how it got that way. What lead to it ending up in this state? What were the people issues that caused this technical choice to be made. Git blame is your friend, and go as deep into the history as you need. Again, choose a small module to start with so you can go deep.
\n# Q: What do you feel like is the most underrated/underutilized ES6 feature? - Aetheryx
\nA: Hmm, not sure about ES6, but in modern JS, async/await was life changing in terms of my understanding of async code. That and the object spread which makes immutable changes clean and thus easier to justify. Not sure if either of those are underused though :smile:
\n# Q: What advice will you to give to someone starting a company? - lewatt23
\nA: Don't. Lol. That's just my personality showing through. I am by no means a business person so the idea of starting a company sounds like a recipe for disaster for me :smile: I wish I had better advice. Maybe one valid piece of advice, would be to try to tap into the nostalgia of nerds. I've learned there's a huge market in that :wink:
\n# Q: What’s one piece of advice you’ve been given that has stuck with you? - chelseahollow
\nA: Hi! :wink: I guess it would be the general advice from my parents that there are many things that you can make for yourself rather than buy.
\n# Q: Do you sing yet? where can we hear you? :p - AdrianC
\nA: There are a few small recordings in various blog posts on my blog. Mostly silly barbershop snippets (I'm fascinated by harmony) https://jordaneldredge.com/blog/
\nYou might enjoy this little number written for @chelseahollow https://jordaneldredge.com/blog/original-song-our-love-will-last-as-long/
\n# Q: What's your opinion on the HHVM vs Zephir vs Swoole articles/benchmarks currently around at the moment? - Sentinel
\nA: I'm afraid I'm not in the know. I only recognize one of those things :stuckouttongue:
","frontmatter":{"date":"2018-04-12T00:00:00.000Z","dateGroup":"April 2018","dateString":"Thursday April 12th, 2018","description":"Engineer @ Facebook working on Nuclide | Author of Winamp2-js\n","location":"Q&A Channel Reactiflux","people":"@captbaritone\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Jordan Eldredge"}}},{"name":"zack-argyle","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Obviously the incoming iOS support of PWAs is welcome, but I’ve had coworkers state that the proposed implementation is less than ideal. Do you have any reservations or can you speak to the efficacy of PWAs with the incoming iOS support? - kylemh
\nA: Great question. I have an iPhone X and have been running the beta preview for a few months now. I have the Pinterest PWA installed to my homescreen. There are definitely some \"not-ideal\" implementation details like leaving the PWA in any way resets the whole session, swipe to go back is disabled by default, and having to deal with the \"notch\" in fullscreen mode. Overall I'm very excited for it and glad they've chosen to invest in the web.
\n# Q: Huge fan of gestalt. Not sure how much you were involved in that, but do you have any advice for someone who's interested in bUIlding a similar UI component library for their team? - mplis
\nA: I was a part of the team that developed gestalt and have contributed a fair amount, though I focused on other web platform areas. One of my biggest suggestions is to use your UI library to enforce good practices (consistency, accessibility, performance).
\nWe actually have a set of components we bUIlt specifically for mobile web that have not been upstreamed into gestalt that enforce these same things. A <TapArea> component for consistent press states and accessibility around touch, etc.
# Q: Have you evaluated the cost/benefit of using Redux compared to barebone React components or something else like unstated? - MarcusNielsen
\nA: Definitely. We have had a lot of conversations around Redux. In fact we have Redux devtools enabled for our mobile web version in production if you'd like to see how we use it. In general, our approach has been
\n# Q: How attainable is it to have both server side rendering AND code splitting? Should a PWA implementation even worry about it? - Xuxu_blz
\nA: It is very attainable. Regardless of what google says, server rendering is still an important part of SEO (Pinterest is scary good at SEO so trust me!). Our mobile PWA does not server render, but is also not served from google referred traffic. Code splitting is incredibly important and should always be a priority. If you don't care about SEO, my opinion is that server rendering is not worth the cost of maintenance.
\n# Q: What are the main reasons that prevent you using/migrating to React 16? - k2rks
\nA: The first thing that prevented us from migrating to React 16 was our <Masonry> component in Gestalt. It is a very optimized virtualized masonry layout that we had to essentially rewrite from scratch in order to support both 15 and 16. Now that that is done, we just have to finish auditing the thousands of components in the Pinterest codebase :sweat_smile:
# Q: Can you explain your bUIldchain / tooling used for React development? - stackola
\nA: We use webpack, babel, prettier, docker, and more. Happy to answer a follow up.
\n# Q: What is the best way to normalize your data structures, and what are the best tools? - gboyd_1978
\nA: We've been fairly happy using https://github.com/paularmstrong/normalizr and a reducer wrapper we called createEntitiesReducer
# Q: What are your thoughts on using react-native to have cross-platform compatible state? Or is it still too immature? - electron
\nA: We've talked about it and had many discussion with both Leland (react-primitives) and Nicolas (react-native-web). In general we find it too new still, but plan on investigating again in the future.
\n# Q: Is it a good idea to bUIld UI separately for mobile and for larger screens if the experience we are trying to deliver for PWA is drastically different from the experience of the larger devices and how would you go about it? - lokiiarora
\nA: My suggestion to companies is: if you have more than 20 web engineers and you have a native app, then you should also have a separate mobile web PWA.
\n# Q: Perchance have you considered Next.js and if so what are your takeaways? - kinetifex
\nA: Love Next.js and what they're doing, but not for a company at our scale.
\n# Q: Do you foresee the PWA architecture / 'prpl pattern' making much headway on desktop in the coming year(s)? - joestrouth1
\nA: I think there definitely some PWA features that will be useful in a desktop environment, but the CPU and network connection on a desktop computer have little of the limitations of a mobile phone that most PWA features are trying to solve.
\n# Q: Did you think about using styled-components at any point? Do you think it could be great in your stack? What is your file structure? Are you using atomic design or anything like that? - RoseGrenth
\nA: styled-components did not exist when we originally bUIlt gestalt. Additionally all of our new code (like the entire mweb codebase) has no additional CSS other than the gestalt CSS. which we inline into the
. This has been great for performance. Were we to start from scratch today, styled-components could be a great option.\n# Q: What about a smaller team? - lokiiarora
\nA: For smaller teams its a tradeoff that you have to make. Having a separate mweb doubles your maintenance cost but improves the user and developer experience drastically. If you're willing to accept the maintenance I say go for it!
\n# Q: How fast/slow is your webpack bUIld to compile when developing and when running a full bUIld? And can you talk about anything you've done to speed it up? - danbovey
\nA: Running it now and I'll let you know :wink:
\n(a few minutes later)
\n# Q: What are your favorite ways to control async data entering your state via api/websockets? Do you use react-redux-sagas or some other library? - electron
\nA: I have LOVED having a normalized Redux store in the PWA, and we actually enforce it. There is an HOC called withResource() that is used to specify the API dependencies of a component/page. That HOC does not pass through the response data, but provides a hook into Redux withResource({ url: ..., mapState: (state, props) => ({ ... }) }). The actual fetching of data is a simple redux-thunk that fetches, normalizes, and passes through that data to the reducers that look for normalized entities. redux-thunk is simple and I like simple :smiley:
# Q: what tools do you use for Localisation within components? - mcfarland
\nA: We have our own localization tooling and so it is just an internal library called i18n. An example using gestalt would be <Text bold>{i18n._('Hello world!')}</Text>
# Q:Could you give some idea in code reusability? - TheRNGuy
\nA: That's a pretty vague question! But my short answer is to not worry about reusability prematurely. It's very easy to abstract everything which gets very hairy. Don't feel bad forking things sometimes rather than making things awkwardly abstracted.
\n# Q: Are you using atomic design or anything like that to structure your project, in order to scale your codebase? - RoseGrenth
\nA: We do have an internal UI spec called PDS (Pinterest Design System) that our design team uses for all of their designs. It includes things like colors, margins/paddings (4px, 8px, ...), fonts, etc. In general that's what we use for designs.
\n# Q: Hi Zack. With browsing becoming more and more mobile ...would you recommend going for a PWA from start as an MVP, even before doing a RN app? Do you see this happening in the future as a means of experiencing an app without actually installing it? - Rodrigo
\nA: Depends on what engineers you have! In general it's easier to find web engineers, making the case for a PWA as your MVP much more intrigUIng. I imagine when mobile safari gets better support for service worker features and homescreen installation that this will be even more intrigUIng. For a reference, Pinterest has millions of users that open our PWA from the homescreen every week. Super interesting.
\n# Q: Are you using workbox for offline support? Or any other notable modules for bUIlding out PWA support? - kinetifex
\nA: Yes we are using Workbox. We have a great working friendship with the folks at Google, and have monthly conversations about PWA features and requests we have. Additionally, workbox now uses our open source service-worker-mock for the unit tests in Workbox so we chat with them a lot.
\n# Q: Did you move over to webpack from a task runner like gulp or grunt? What was that experience like? Do you recommend using only either webpack OR gulp/grunt, or is combining them okay? - stackola
\nA: yes we did. About 5 years ago we used Grunt. 4 years ago added some Gulp streams. And 3 years ago moved towards Webpack. In an ideal world you'd be all-in on one, but I don't see it as a big issue to have multiple runners.
\n# Q: How do you think about server-side rendering at Pinterest? - oyeAnuj
\nA: We think a lot about it! In fact we usually run an experiment every 6 months to see if it is still important for SEO (it is). Our main server is in python, and so when we switched to React we had to spin up a sidecar Node server specifically to handle server rendering.
\n# Q: What did you use in order to follow and improve your performance? Did you use a tool like Calibre or someting? Or maybe something in your CI? - RoseGrenth
\nA: Great question. Lighthouse was a great tool for monitoring our performance and regressions as we bUIlt out the PWA. Additionally, we have a web performance team (they just spoke at Perf Matters) that bUIlt out a sUIte of performance monitoring tools around what we consider a full page load. We call it \"Pinner Wait Time\". Not sure if they recorded the Perf Matters talk but it goes into more details about that.
\n# Q: What do you guys use to serve the static data used for localization, like descriptions, field names, etc? My app serves a lot of static data, and I don't want to bUIld the app every time I change a field name or a description. - Ton
\nA: We don't have anything for this use case. We deploy twice a day and have dozens of engineers in each commit, so its not a problem we've had to deal with!
\n# Q: I've been recently offered to lead a newly formed small team. Are there any books of resources you recommend about the not-so-technical side of being a lead dev? Also what kind of preperation can I do to best get ready for that role? - stackola
\nA: The best leads I know are people who
\nAlso congrats!
\n# Q: What's one feature that is (or might be) coming to the web platform that you're most ready for? - joestrouth1
\nA: One random thing I'm excited about is changes coming to Chrome around add to homescreen. It's an awkward experience right now where you meet some arbitrary engagement heuristic which enables add to homescreen, but the prompt will pop up randomly unless you catch the event and prevent it manually. Changes are in flight to provide more control around that which I think will make adding to homescreen more seamless.
\n# Q: you said you are using HOC like withResource(), is there a library you can recommend to use it? - Ton
\nA: No libraries. Just a 150 line file (with Flow types) we have internally.
\n# Q: Do you guys use Flow or anything like that? Typescript? and Why? (depending of your choice) - RoseGrenth
\nA: Oh hey I just answered that unintentionally. Haha. We do use Flow because it's great for gradually rolling it out into a codebase. Since we have so many engineers (all with their own opinions) it was optimal for showing people the value over time without forcing it upon them.
\n# Q: Mostly unrelated to JS, but is anyone at Pinterest considering CSS grids seriously yet? - noddy
\nA: not currently. Like I mentioned above, gestalt (our UI component library) is our primary source of css and its flex based for now!
","frontmatter":{"date":"2018-04-05T00:00:00.000Z","dateGroup":"April 2018","dateString":"Thursday April 5th, 2018","description":"Tech Lead @ Pinterest | Pinterest PWA built w/ React - Performance Case Study\n","location":"Q&A Channel Reactiflux","people":"@ZackArgyle\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Zack Argyle"}}},{"name":"reactiflux-meetup-2018-03","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2018-03-19T00:00:00.000Z","dateGroup":"March 2018","dateString":"Monday March 19th, 2018","description":"We have space for 200 people! This will be a networking/hangout event, no speakers.\n","location":"144 Townsend St · San Francisco, CA - Ring the doorbell at our front entrance and we'll come let you in.","people":"Meetup event\n","recording":null,"time":"5-8:30pm PT","title":"Official Reactiflux.com Meetup @ Docker HQ"}}},{"name":"sacha-greif","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How does VulcunJS make my job easier as a developer? – dardub
\nA: Vulcan's philosophy is to take the tasks you have to do for every project and make them easier. So that includes things like data loading, pagination, form generation, user accounts, etc. Those all work out of the box.
\nIn practice it does that by bundling together Meteor as a build layer, Apollo as data layer, and a set of pre-made React components as the front-end layer.
\nOf course you can still write your own GraphQL code, React components, etc. in addition if you need more customization. But the idea is that you get a solid foundation to start from.
\n# Q: What are your thoughts on Sapper/Svelte? – batkin
\nA: I've heard of Svelte but not of Sapper. I haven't tried it myself so I don't have much thoughts apart from the fact it's always cool seeing people push the envelope and try new approaches. As far as Vulcan is concerned though we made the choice from the beginning to be React-only. This makes development and maintenance a lot easier.
\n# Q: What's the outlook for VulcunJS? – mangodb
\nA: I think in recent months the framework has been picking up a lot of new community members, so I'm pretty positive about the outlook :smiley: It's still small in terms of total users but that's on purpose, I don't want to repeat my past mistakes where I tried promoting things before they were ready for the primetime.
\n# Q: How is it like living in Japan? – tomyfalgui
\nA: I really like living in Japan. In fact that's probably the main downside living here, it's a bit too comfortable. You're not challenged or pushed out of your comfort zone often, like I imagine you would be living in places like New York or San Francisco.
\n# Q: I'm currently using Meteor on an old tool at work and right now we feel a little stuck on it since Kadira shut down and atmosphere packages are getting abandoned. My question is: what exactly is Meteor adding to Vulcan, and why? – 4ever
\nA: To be honest a big reason why Vulcan runs on Meteor is because the whole thing started as Telescope (http://telescopeapp.org/), a Meteor project. But Meteor today is vastly different from the Meteor most people know, I would say a better comparison is Webpack. At least that's how Vulcan uses it.
\nWe don't use the Meteor data layer at all except for user accounts, and we plan to migrate this as well eventually.
\nSo today I'd say the main things Meteor is adding are a zero-config build tool, super easy MongoDB integration, user accounts, easy deployment through Mup, and generally good patterns for handling client/server code sharing.
\n# Q: Why did you chose GraphQL, React and Meteor as the fundamental stones for VulcanJS? – fermuch
\nA: see my previous answer for Meteor. For React, it seemed like a natural progression as it was embraced by much of the community as an alternative to Blaze, Meteor's original UI framework. And same thing with GraphQL, it just seemed like the direction things were moving. Since Vulcan's goal is to make people's lives easier I thought it was important to adopt widespread technologies and not ask devs to learn some new esoteric libraries.
\n# Q: Hi Sacha!! What are some of your favorite links from Sidebar recently? – swyx
\nA: I love this one, never thought about it this way: https://uxdesign.cc/visual-indicators-c3e0e5ce90f7
\nAlso love Hexatope, I made a necklace for my wife and it turned out great (I think :wink: ) https://blog.producthunt.com/when-tech-and-jewelry-collide-the-maker-of-hexatope-shares-her-story-a9f2819f49a5
\n# Q: Hi! Was there any particular moment that made you realise Vulcan (Telescope at the time) was needed? (Like an 'aha' moment perhaps?) Thanks for the Q&A! – S3B4S
\nA: I originally built Telescope (a Hacker News clone app) because I wanted to build my own Hacker News for designers. I was jealous of how much traffic HN was bringing to development-related sites and wanted the same thing for design… Vulcan today is basically the result of not knowing when to quit and just hacking away on the same project for 5 years. I can only hope there's a need for it, because if not I'll have some soul searching to do!
\nAs a follow-up, I think one \"aha\" moment I had was realizing most modern web dev technologies out there were optimized for tailor-made, highly-specific apps. Which didn't really fit my needs as someone who likes to launch a lot of small side projects. I suppose that's why people still use WordPress for so many different use cases, it just saves time compared to rebuilding the whole stack from scratch every time. So I wanted something similar, but for the modern JS stack :smiley:
\n# Q: What are some pieces of advice you’d give to a developer who aspires to be a great designer? – tomyfalgui
\nA: Practice a lot, copy a lot, take the time to care about small details. It's hard to give advice about this since virtually every great designer I know has years and years of practice behind them. There's no shortcut to get there without putting in the time…
\n# Q: What problem is Vulcan solving for you? Do you use it personally? What's your motivation for working on Vulcan? Do you use it for every project, no matter the requirements? – fermuch
\nA: I'm currently using Vulcan for http://sidebar.io/, as well as for an AirBnB-type app I'm building for a company here in Japan. I also always have 2-3 other ideas of things I'd like to build with Vulcan :smiley: I don't use it for every project (http://stateofjs.com/ is built with Gatsby for example) but I'd probably use it for anything that needs user accounts, a db, etc. as opposed to just a more streamlined static site.
\n# Q: Have you tried Next (or Gatsby for build time rendering) and if so, how do you think Vulcan compares to them or other isomorphic React frameworks now?(edited) – NickServ
\nA: I love Next and Gatsby. If I were starting Vulcan from scratch today I'd probably build it on top of Next to be honest. And I'm a long-time Gatsby user (in fact I designed the Gatsby logo). They both do something pretty different from what Vulcan does though. But if Next or Gatsby alone meet your requirements then I'd say go ahead and use them.
\n# Q: What's the outlook for VulcunJS? Would anything be added/adopted to the stack in the future? How will compete with others - JAMstack, CRA? What's the best/ideal future for VulcunJS? – mangodb
\nA: Apart for migrating to Apollo Client 2, React Router 4, etc. no big changes to the stack are planned. The problem with stack changes is that they take up a ton of time and effort (both the React and GraphQL rewrite took about a year of work each) and the end result is that everything (hopefully) works just the same as before…
\nI really don't see that much competition there. For example I'm currently building a room rental service with Vulcan and I don't see how you'd easily build something like this with Gatsby. And even if you did, you would still be missing out on all of Vulcan's premade utilities and components. So to me they just serve different purposes.
\nI would like Vulcan to become the WordPress/Drupal/Rails of the React+GraphQL stack. I know these are all different things, but to me they often address the same use case: quickly getting a project off the ground so you can focus on actually improving the product.
\n# Q: What's your 2018 call to action for everyone here? :smiley: – swyx
\nA: Apart from trying out Vulcan's getting started tutorial? :wink: I'd say probably learn how to use GraphQL.
\n# Q: Have you seen Hasura.io? Curious to get your thoughts on it, seems to have some overlap. – vcarl
\nA: I hadn't seen that. But if I'm not wrong it focuses on the back-end mainly? I think there are a ton of awesome solutions for the back-end, like Prisma, AppSync, etc.
\nBut as far as I know not many people are tackling the front-end part of the equation. For example Vulcan will actually generate working forms for you from your models, along with the back-end layer required to submit them. I think that front-back-end synergy is what makes Vulcan pretty powerful.
\n# Q: If I were to start web development today, should I go with Vulcan? Is it noob friendly? What others tools/frameworks/technologies do you think I should learn? – fermuch
\nA: I think you can definitely start with Vulcan, as it will serve as a nice intro to React, GraphQL, etc. At some point if you want to be a professional developer you should also learn the \"manual\" way of doing things though. But at least by starting with Vulcan you'll already know where each building block fits.
\n# Q: In terms of design, is there anything that stands out in Japan for you? Whether it is product advertisement, architecture, graphic design or anything(edited) – S3B4S
\nA: Print design and packaging are really outstanding in Japan. Web design not so much…
\n# Q: One of my favorite features of Vulcan is it is essentially a group of packages, any of which can be overridden. Can you describe why you set it up this way (what you intended) and how it's beneficial? – Jonny
\nA: It's just an architecture that evolved naturally, in part due to the fact that \"normal\" Meteor apps used to just declare everything globally. So putting stuff in packages was a way to avoid this and have a cleaner codebase.
\n# Q: Any plans to add react-native support? – Vicente
\nA: I mean you can use Vulcan with React Native currently, but you'd have to use it as a regular GraphQL API and then build your RN client as you usually would. I'm not sure yet what deeper integration would look like, maybe it's just a matter of having a starter RN project?
\n# Q: have you climbed outside in japan any? – impaulhi
\nA: I've climbed in France, US, and UK, but only in gyms… although I did do Via Ferata in the Canary Islands, I don't know if that counts?
\n(I'm still a very amateur climber…)
\n# Q: Do you think that atmosphere should be closed and migrated to npm? – frpz
\nA: I think that would be very hard to do in practice, and would break a ton of Meteor apps, so no.
\nI do think developers individually should migrate their packages to NPM though.
","frontmatter":{"date":"2018-03-08T00:00:00.000Z","dateGroup":"March 2018","dateString":"Thursday March 8th, 2018","description":"Sacha Greif is a designer/developer living in Japan. Author of VulcanJS, the React + GraphQL framework. | Vulcan Docs | What is Vulcan? | An app in 15 days with VulcanJS\n","location":"Q&A Channel Reactiflux","people":"@SachaGreif\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Sacha Greif"}}},{"name":"johannes-shickling_soren-bramer-schmidt","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Big fan of Prisma – what's your business model, and how do you plan to grow the business? – hoodsy
\nA: Thanks a lot! We will be launching Prisma cloud in a month or two that brings global auto-scaling GraphQL api to your databases. – sorenbs
\n# Q: In one sentence, how does your solution provide value to GraphQL? – MomsSpaghetti
\nA: Prisma unlocks your data and makes it available to the broad ecosystem of GraphQL tooling. – sorenbs
\n# Q: Is it somehow possible to use Prisma in conjunction with React without a client middleware like Relay/Apollo? – kylemh
\nA: Great question! Prisma can be used with GraphQL Bindings to build a GraphQL server or directly from frontend apps for simpler use cases. Security is based on JWT tokens. Over time we will expand the capabilities to include fine grained grants to limit access from client side apps. – sorenbs
\n# Q: How has creating a popular service in the modern JavaScript ecosystem boosted your careers; have you gained many connections or seen any tangible benefit beyond contributing to the community? – connor
\nA: Thanks for your great question @connor! Running your own company, you're very much \"in control\" of your own career and it's rather a matter of making the entire company successful.
\nBeing part of today's thriving JavaScript ecosystem has been absolutely essential for us. We're very fortunate to have built up a great open-source community which resulted in many great projects such as the GraphQL playground or GraphQL-config. Projects like these were a great opportunity to work together with companies like Facebook. So to answer your question, the benefits have been very tangible for us! – schickling
\n# Q: Do you think a consensus will happen around Oauth like permissions in GraphQL? I feel like everybody hack around with middleware a right now. – Xavier
\nA: Thanks for that great question! I think it is inevitable that the community will standardise around a few common solutions to permissions. GraphQL is still maturing and new use cases are being explored. While this is going on I think it is very natural that more ad-hoc solutions are being used. – sorenbs
\n# Q: I love your educational platforms. Do you plan on adding any quick tutorials or blog posts on thinking about unit testing any of your products or any of the products you already advocate for? – kylemh
\nA: Thanks a lot @kylemh and great point! We're currently working on some more in-depth content which will also cover unit/integration testing. Keep an eye out on our blog + our twitter account: https://twitter.com/Graphcool. – schickling
\n# Q: Regarding Subscriptions. Our backend team got the impression that the spec is not official or at least not finalised, and because of this have decided to go a different route for notifications. This isn’t Graphcool in prod, but we’ll still be using Graphcool in development and we need to stay in parity with prod for obvious reasons. Can you give some information on what is the status of this feature and what is likely to be happening in the future, so I can maybe allay their concerns and we can switch to Subscriptions instead? – Paisley
\nA: Subscriptions has traveled a longwinded road, but they are in the official spec now. You can find the RFC that let to the final spec at https://github.com/facebook/GraphQL/blob/master/rfcs/Subscriptions.md Most of the work leading up to the inclusion in the spec was lead by Apollo. It is important to realise that the GraphQL spec does not concern itself with the transport, so In addition to GraphQL subscriptions you need to also use Apollo-transport-ws which is what Prisma implements. My suggestion would be to seriously consider using GraphQL subscriptions in production :smiley: – sorenbs
\nThanks for the great information. Will be sure to pass this on and push for using Subscriptions, it'll certainly make out frontend lives much easier! Graphcool so far made it really easy for us to get prototypes up and running without needing to wait for backend services. – Paisley
\nThanks Paisley. Using Graphcool to quickly build out prototypes and then handing it over to \"engineering\" when the real deal has to be implemented is a common theme we hear when talking to our customers. Prisma is our step towards making the core technology in Graphcool more stable so that it can be used for both prototypes and real applications. If you are interested, I'd be happy to get on a call with you or your team later to talk about adopting Prisma in your production infrastructure. – sorenbs
\n# Q: There seems to be a decent amount of branding confusion around Prisma and where/how it fits in with the Graphcool framework. What are your plans for solving this? – Sonicrida
\nA: Thanks for bringing this up @Sonicrida as this is a question that we've seen a lot over the last few days. The short answer to your question is, that we've now identified the biggest points of confusion and are currently working on content + product adjustments to minimize the confusion. – schickling
\nI think it's helpful to understand some more background here: We were actually about to release (what's now Prisma) under the name Graphcool 1.0 – this however would have had one huge implication: Every piece of content (blog posts, tutorials, videos) that made use of npm install -g Graphcool would have been outdated over night. To prevent this, we've decided to release this under a new name. – schickling
\nThere is quite a bit more to this topic, I think this forum post wraps it up quite well: https://www.graph.cool/forum/t/Graphcool-framework-and-Prisma/2237 – schickling
\nHappy to take more detailed questions about this topic! :raised_hands: – schickling
\n# Q: First of all, thanks for amazing platform and tools you are making! I've been following Graphcool since you were BaaS service. In the past few months there were a lot of changes - Graphcool framework, Prisma... I feel somewhat lost where each piece of the puzzle fits. Would be nice to have a blog post perhaps, explaing what you can and can't do with Prisma, GraphQL binding, GraphQL-Yoga and the rest. – Checkmatez
\nA: We need to do better at communicating what we are doing :smile: Johannes linked to a blogpost above that goes into some detail. We will be writing up more concrete material on the difference between Graphcool and Prisma soon. Additionally we have been giving talks introducing Prisma and GraphQL Bindings at meetups in Berlin and London over the past week. Look out for recordings from these events on twitter very soon. – sorenbs
\n# Q: I already kind of asked in a comment on Medium about Prisma working towards implementation with multiple data sources. Graphcool said it was incoming, but I was curious if it’s a large priority or if I’m thinking about implementation from the wrong perspective. It seems paramount for enterprise adoption, from my current frame of mind. – kylemh
\nA: Yet another great question @kylemh! We're currently working out a public roadmap which gives more visibility into this topic. Until this roadmap is available, these Github issues should give you a better feeling in terms of demand + prioritization: https://github.com/Graphcool/Prisma/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Fconnector+sort%3Areactions-%2B1-desc
\nSupporting more databases is one of our highest priorities right now. We've already started working on some API specifications for various kinds of databases (relational, document, search, timeseries, caching...) and would love to get the feedback of the community on it before the implementation work begins! Stay tuned about this in the Github issue comments! – schickling
\n# Q: Actually I am working with Graphcool and I want to migrate my projects to Prisma, but I can't find any guide or tuto to do that. When will be able these tutos availables? do you need help, how can I help you? – AdrianC
\nA: Great point @AdrianC. There are no fully comprehensive tutorials/guides available for this yet but we're working on it. Expect something within the next few weeks. For now you can already take a look at various example projects using Prisma and use the import/export feature to migrate your data: https://www.PrismaGraphQL.com/docs/reference/data-import-and-export/data-import-ol2eoh8xie – schickling
\nAlso - feel free to ask any other questions you might have about the differences between Prisma and Graphcool :smiley: – sorenbs
\n# Q: Last one for me too ! What is your opinion on interfaces and the implements keyword ? I often stumbled upon situations where I basically wanted extends and interfaces were not fit/ clear enough for that – Xavier
\nA: I'd be very curious to hear about these cases! We are currently working on implementing a feature we call polymorphic relations that allow you to create a relation to an interface backed by one or more concrete data types. Interfaces seem to be a great fit for this. Is your concern that the resulting SDL describing the schema is not clear enough or that the queries you have to write using the ... syntax is confusing? – sorenbs
# Q: Thanks for bringing Graphcool/Prisma into the world. Any plans of releasing other products tackling similar problems? – kanalas
\nA: Thanks a lot @kanalas, I really appreciate your support! We're set out to make backend development easier using GraphQL. The biggest concrete problem/opportunity we see right now and for the future is the mapping between your API layer and your database(s). By adding support for different databases we'll get closer and closer to our goal of making GraphQL a universal query language for your data(bases).
\nAlso expect some exciting improvements/projects in our open source community. For example we're planning a bigger re-write of the GraphQL playground which has been anticipated by many developers! See here: https://github.com/Graphcool/ – schickling
\n# Q: I want to convince my team/Company to adopt GraphQL and Graphcool / Prisma. Do you have something like \"how to convince your boss\" for use Graphcool? :smiley: – AdrianC
\nA: I think the simplest answer to that is developer productivity and measurable improvements of your product. For most companies the adoption of GraphQL is driven by frontend teams which has created fantastic success stories in the past. I think it will definitely help your argument to point to all the other companies who already adopted GraphQL such as Airbnb, NYT, Twitter, Producthunt etc.
\nI remember there was also a talk about this topic during the last GraphQL Summit. Check it out here: https://www.youtube.com/watch?v=8hT-PkzpeRM – schickling
\n# Q: Say you have a team of skilled devs that are convinced GraphQL is what they want to implement (just not well versed in it) and they get to choose the stack for a brand new platform/service. What would you say are the main strengths to build their product upon Prisma? – ackzell
\nA: Prisma allows you to use GraphQL at all layers of your stack. To fully appreciate the benefit of this you have to understand GraphQL Bindings and how they allow you to skip an entire layer of mapping code. Companies like IBM and Coursera are already using this approach to combine GraphQL APIs from multiple microservices. Prisma plugs right into that infrastructure and allows you to use the same tooling for interacting with your data. – sorenbs
\nPhoenix Q: What sort of database does Graphcool use? Are there any plans to use an actual graph database such as Neo4j or dgraph? – Down
\nA: Currently Graphcool & Prisma supports MySQL. As answered in a previous question, we're working towards supporting other databases as well. It's important to understand that GraphQL doesn't mean the best database behind the scenes has to be a GraphQL database such as Neo4j or dgraph. It's always a question what kind of data you're planning to store which \"dictates\" the kind of database you're supposed to use. In the most cases, you're making a pretty smart decision to go with a relational database. – schickling
\n# Q: Can we know the Big Clients or Apps who are using Graphcool as BASS in the production environment? – bamne123
\nA: This is a popular question :smiley: We have a good number of large companies who are either using Graphcool in production or in the process of building a new project on Graphcool. One example is a large airline that relied on Graphcool subscriptions to power a global marketing campaign. We have a few testimonials listed on https://www.graph.cool/cloud/ and will update this section when we launch Prisma Cloud. – sorenbs
\n# Q: How does it work the scalability with Graphcool? how many concurrent users / connections do you support right now? – AdrianC
\nA: Great question! This is where I have to dive into the technical details and explain the difference between Graphcool and Prisma. – sorenbs
\nGraphcool is designed to be a cheap massively multi tenant environment that allows developers to get started with a powerful backend without any upfront cost. This means that the entire stack - Database, API and subscriptions run on hardware that is shared between all projects. At peak we are operating high tens of thousands of concurrent connections on this platform. – sorenbs
\nPrisma is designed from the ground up to run on dedicated hardware for each tenant. This means that you will get a dedicated and automatically scalable API + subscriptions layer for your Prisma service allowing you to scale to the combined size of all current Graphcool projects and beyond. Because we are fairly smart about scaling up and down quickly, you only pay for the hardware when you actually need it. – sorenbs
\n# Q: What are the main differences between Graphcool and Prisma?? – AdrianC
\nA: It's important to understand that Prisma is technically a (core) part of the Graphcool framework. Think about Prisma rather as a component in your infrastructure stack and about Graphcool as a \"feature-complete solution\" for your backend.
\nOne of the goals for Prisma was to make it a standalone component that can be used outside of the scope of Graphcool and that it works well with other tools and frameworks in the GraphQL ecosystem. This has been a great success so far as we're hearing of people in the community writing bindings in Go, Python and other languages!
\nSo as a rule of thumb: If you're just getting started and want to build a MVP, Graphcool is a great fit. If you're building more sophisticated backend applications I recommend you looking into Prisma. – schickling
\n# Q: Maybe a bit far fetched, but regarding dbs: Do you see a migration path if we started building with the MySQL support and then for some reason we wanted to switch to a different technology like MongoDB? – ackzell
\nA: Great question! This is certainly an option if you are willing to put in some work to create a script that can shuffle the data around and can accept a bit of downtime while it happens. We are happy to help set this up.
\nFurther down the road we want to support automatic data transformation and synchronisation between databases, so this might become a native feature at some point. – sorenbs
\nPhoenix Q: Using GraphCool, is it possible to restrict access to certain fields? For instance, could you prevent users from accessing personal information of other users (like name and birthday) while still allowing access to some fields (like display name and joined date)? How is this achieved with GraphQL? – Down
\nA: Yes, the scenario is possibly to implement using Graphcool's permission system. You can check out this tutorial over here: https://www.graph.cool/docs/tutorials/auth/authorization-for-a-cms-miesho4goo
\nIf you're using Prisma, you'll need to implement this sort of functionality yourself in your resolvers (which is still quite easy to do). Here is a simple example of how permissions implemented in a GraphQL server can look like: https://github.com/Graphcool/Prisma/tree/master/examples/permissions – schickling
\n# Q: What is that you most love about Graphcool / Prisma? What you wish to improve of Prisma?? – AdrianC
\nA: TLDR: Simplicity and developer experience. We love taking on difficult technical problems and providing a nice and simple abstraction to developers. Similar to how React is handling the DOM for you, our goal for Graphcool/Prisma is to give you a better abstraction for your data(base). – schickling
\n# Q: Speaking as a front-end developer, do you recommend Graphcool or Prisma for people who are new to GraphQL in general? – dentemple
\nA: Great question @dentemple! Depends on whether you ever want to write some backend code, if the answer is no, then use Graphcool, if yes, give Prisma a try.
\nWe've just updated HowToGraphQL a few days ago which should get you started: https://www.howtoGraphQL.com/GraphQL-js/0-introduction/ – schickling
\n# Q: According to your previous answer, Prisma is not a replacement for Graphcool, but a tool to build another type of applications. Is it correct? what these sophisticated BE applications can include? do you mean performance, live data?? – AdrianC
\nA: The way to think about it is that Prisma is a different way to build backends than Graphcool. You can to a large extend build the same kind of applications, but if you miss the more sophisticated control flow you can express when writing your own code, then Prisma is the better option for you. Also, if performance and high stability is really important to you, then Prisma is the better choice because if the dedicated nature of its infrastructure. – sorenbs
\nIf you have any other questions, also please feel free to join our Slack: https://slack.graph.cool/ or ask in our forum: https://www.graph.cool/forum – schickling
","frontmatter":{"date":"2018-01-25T00:00:00.000Z","dateGroup":"January 2018","dateString":"Thursday January 25th, 2018","description":"Co-Founders of Graphcool. A Serverless GraphQL backend for frontend developers. Graphcool also created Learn Relay/Learn Apollo and organizes the GraphQL-Europe conference.\n","location":"Q&A Channel Reactiflux","people":"@sorenbs & @_schickling\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Johannes Schickling & Soren Bramer Schmidt"}}},{"name":"brent-erickson_david-de-regt","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Having the best of react inside a wrapper like ReactXP, what are the real benefits? - kikoseijo
\nA: The benefit is cross-platform app development. This allows you to write your business/UI logic once and have it run anywhere. React-Native only give you mobile platforms, react-dom only gives you web. ReactXP give you the the best of both. - berickson
\n# Q: So what you're saying is i can make an app run on mydomain.com AND have users install it on their phones, all from the same codebase? - kelstena
\nA: That's correct. We've extracted all of the view/rendering logic/styling into a common framework that allow it to be build for multiple targets including web and mobile (via react-native). - berickson
\n# Q: It seems like a library like this has to be very comprehensive before it's worth basing an app on. How much development effort is being put into it in terms of man hours? - gunn
\nA: The base ReactXP platform is designed to be a very basic framework for building apps on top of -- it wraps some of the most commonly used components of react-native and gives web implementations for them such that almost all apps will need almost everything from ReactXP. The more advanced features (notifications, higher level UI components, etc.) are writable as extensions (and we have several published, with more coming soon) -- but the idea is that the core library doesn't provide oodles of functionality to keep it as lean as possible.
\nTo the other half of your question, fairly significant investments are being made on ReactXP right now for things like accessibility, but by and large we improve things either as needed for our internal work on Skype or due to changes in react or react-native. We also accept (lots of) appropriate PRs from the public to improve the package as well. - deregtd
\n# Q: Can I write desktop app using ReactXP? - godpranay
\nA: Yes, there are a couple approaches you can take to this. You can either build an electron based app (which will wrap your web code) or experiment with the other react-native desktop platforms. We're currently working on integrating react-native-windows into ReactXP. We haven't yet experimented with the other react-native platform apps yet, but it should be doable. - berickson
\n# Q: Ok so realistically these are going to be diverging products now that the codebase has split from mainline react? will facebook be developing one codebase and microsoft will be developing another? or will you make efforts to ensure they stay the same? - kelstena
\nA: They're not competing/diverging at all -- in fact, they're highly complementary. ReactXP is not its own framework, it wraps react-dom and react-native into one common API/UI set. So, without those progressing, ReactXP can't either. - deregtd
\n# Q: I hadn't heard of it until today but it will be useful for an upcoming project, do you think ReactXP is ok to use in production? - kelstena
\nA: - Yes, using ReactXP in production is fine. We're currently using ReactXP in production as well. - berickson
\n# Q: Is microsoft writing own apps with the ReactXP? - gokturk
\nA: Yes the new Skype mobile apps (android/iOS) are written using ReactXP as well as the new Skype Linux/Mac client. There are other teams inside inside Microsoft using ReactXP but I'm unable to give any specifics unfortunately - berickson
\n# Q: What the advantages are against PWA in term of development? - sexypanda
\nA: With ReactXP you could style everything to look like a PWA and get distributable native apps instead of only making your app available via the web. This way users could use your site or download your app. From a visual standpoint, everything should look the same - berickson
\n# Q: What are the limitations? can i use libraries like nativebase or any other NPM libraries arround? the extension are like extra libraries being the case i can imagine. - kikoseijo
\nA: \"Limitations\" are somewhat in the eye of the beholder. It's fundamentally just a framework to make it easier for you to develop applications on, so the limitations are mostly that it doesn't provide you a lot of handholding. As such we use dozens of other open source modules in our ReactXP-based projects to provide common functionality (and have released several of them, like nosqlprovider, resub, etc.)
\nExtensions are just a term we're giving to fully cross-platform ReactXP feature projects. We provide a few of them out of the box in the ReactXP repo and more will be coming soon. The idea is that you have to write something that has full implementations on both RN-based platforms as well as one that works on web/electron, so we commonly take an existing RN package and implement a web component either ourselves or by wrapping yet another npm package to provide the common functionality on that platform. In the end you get one module/extension that you can import in your app code and use transparently, not caring about what platform it enacts itself upon. - deregtd
\n# Q: Are you (or will you be) putting together a no config-option for getting start with ReactXP (ala Create React App or CRNA)? - dentemple
\nA: Someone actually made a similar CRNA app for ReactXP. I haven't actually used it, but we've heard good things from other feedback on the issues board. - deregtd
\n# Q: Is there any willing to support windows phone devices in react native ? - elmawardy
\nA: ReactXP also supports react-native-windows as a platform. We're doing some prototyping on this platform, but it still requires a bunch of work before we can consider using it in production. Work is ongoing on that project to add things like accessibility to be able to make production-ready apps on top of it. But that platform does support all UWP platforms, including windows mobile. - deregtd
\n# Q: We see development shifting more and more towards easy cross platform capability. Kotlin for example allows to share common business code and interfaces between backend, web frontend, mobile frontends and desktop frontends so you can stay in a single language, have the benefit of typings, etc. - Nimelrian
\nA: icrosoft have any plans to pursue this idea in the future? We saw .NET \"officially\" arriving on other platforms than Windows via .NET Core. Is there any chance we may be able to write our whole code in CLR languages as we already can with Kotlin?
\nUnfortunately, I'm unable to comment on Microsoft's business plans with respect to .NET and CLR. This isn't something that we're investing in for ReactXP, but it is an interesting idea nonetheless. - berickson
\n# Q: Hi, how the builds are distributed? Once you build you have 3 different outputs to place on your web server, and both stores? Thank you! - edyn
\nA: Build distribution is the same as any other native or web apps. If you want to have something available on a platform's App Store, you'll need to build the binary and distrubute it via that mechanism. For web apps, you'd host/publish it to your favorite web host.
\nReactXP gives you the ability to create apps for multiple targets but there's no additional magic relating to publication of these apps. - berickson
\n# Q: In relation with @edyn What about Typescript, is it a must have in order to avoid problems, I'm not into compatibility with old browsers its more in the aspect of being able to compile well for the cross platforms. - kikoseijo
\nA: ReactXP works in straight javascript as well if you desire. After several years of using Typescript, we're now pretentious and never want to go back to writing a single line of straight javascript ever again, but everyone's welcome to pick the right arrow from their language quiver. :smiley: Typescript compiles down into javascript, and you can pick the ES targets, so you can decide how much compatibility vs. performance you want to trade-off. - deregtd
\n# Q: I probably speak for a lot of people, but if I were doing a cross platform / universal app, what would be the benefit of choosing ReactXP over react-primitives or react-native-web? - blackxored
\nA: that's a great question. several folks I know are doing exactly that approach: primitives + react-native-web, using puppeteer and headless-chrome for very fast, parallelized integration testing
\nThe inevitable question. :smiley: To be perfectly honest, when we first started developing ReactXP, that was far before there was react-native-web, and was actually before RN supported Android (but we knew it was coming at the time). So, at the time that we were making product decisions, we just started with ReactXP and went down that road, and hence know very little about react-native-web since we were already path-dependent on ReactXP by the time it came out and was usable.
\nFrom the little I've seen of react-native-web, we still like the ReactXP approach because even react-native has little inconsistencies here and there between platform implementations that we try to completely eliminate/abstract away with ReactXP. It's also letting us add intermediate helpers to support accessibility in ways that going directly to the core react-native-xyz platforms would have required every app to do.
\nSo, in the end, neither of us are well-versed enough in the \"competition\" to give a particularly compelling answer here, but we by and large like the approach of one abstraction layer that lets you transparently write code vs. having to target different platforms and abstract the differences away in your codebase on a per-platform basis. - matt
\n# Q: Is the platform stable enough for using it in busines projects? - gokturk
\nA: Yes. Most of the current in-market Skype apps (iOS, Android, Mac, Linux) are built using ReactXP. - berickson
\n# Q: How are you keeping your life balanced? What tools do you use to manage everything? - Edouard
\nA: A healthy diet of video games and burgers in my tiny bit of free time? Personally, my wife and I mostly manage our life with a combination of Wunderlist and shared outlook calendars, but there's not a lot of ReactXP in there (yet?) :smiley: - deregtd
\n# Q: For state management of app, can I use any of the state containers like redux, refulx, mobx or Its tightly coupled with ReSub? - godpranay
\nA: You're welcome to use any state containers that you prefer. There are many different state management methodologies that can be used in React-based apps with various pros and cons. If you find a pattern that works, you shold feel free to use it with ReactXP.
\nAt Skype we developed and released ReSub for this purpose. We've found the automatic subscriptions to state (via Typescript annotations) to be incredibly useful for building UI components quickly. - berickson
\n# Q: No more having to shift the menu array on MacOS? What if I want to make a hotkey of Ctrl + F? Will that automatically convert to CMD + F on Mac OS? - PenguinMan98
\nA: Menus are one area that we've found we really need to tailor to per-platform, due to existing historical nuances in what users of those platforms expect, so we still handle those in a custom fashion as part of our electron wrapper/shell. It's not a bad idea to think about maybe trying to add some semblance of commonality there as a ReactXP extension specifically to handle the electron problem, but I'm just not sure how useful you can make limited abstractions like that.
\nKeyboard shortcuts are in a similar camp. Due to previously-mentioned platform histories, the behavior is still a little different. Cmd/ctrl-F is a good example of one that works well, but we find the other ones to not provide a lot of value in a reusable fashion, so we just hae some simple adapters that feed common commands into basically a big switch() statement. It's an interesting idea to think about how to take these two concepts and make them externally reusable, but off the top of my head it's hard to find a ton of value there since much (most?) of that code would be fairly boilerplate with little annoying customizations that make reusable modules hard to write there. - deregtd
\n# Q: Is Outlook.com beta ReactXP or just React? :wink: - blackxored
\nA: Just React. :frowning: Our understanding is that they wanted to go with a very lean website-only approach for now. Converting from react into ReactXP isn't a ton of work if they decide to go native in the future, though. - deregtd
\n# Q: How does React XP handle styling? Is it defined once in a strictly cross platform manner as with RN flexbox? What if I want to use a React (not react XP) component library in my web app? - nickmccurdy
\nA: ReactXP uses flexbox for styling, as that's the only way we can play nicely with React Native and web at the same time. If you want to include a React-only component library in your wewb app, you can create a ReactXP extension that provides an implementation for React Native platforms (or choose to create a no-op implementation) and use the React-only implementation for web.
\nYou can see an example of styling here, and an example of ReactXP extensions here. - berickson
\n# Q: I used Animated module lately in an app that animates header on user scroll and I've noticed many frame drops in the \"js thread\" isn't the Animated module runs on native thread , what can cause that ? - elmawardy
\nA: There are limitations to what types of animationsi that react-native allows to be made fully \"native\" (i.e. that the math is done on another thread in native, not with javascript performing the interpolation). These are mostly limited to large rectangular simple movements, with certain types of easing functions. If you're seeing an issue with something fairly blocky/easily-moving (like what it sounds like you're describing), I encourage you to open an issue on the ReactXP repo (https://github.com/Microsoft/ReactXP/issues) and we can help take a look.
\nIn the days of yore, we had to do a bunch of work on react-native itself to support more of the native animations, and trying to tune your animations to hit the native side instead of stay on the javascript side is still a challenge. React-native is slowly evolving here, but certainly not as quickly as we'd like to implement all of the sorts of animations we'd like to use without getting jank. - deregtd
\n# Q: Is there an option to style for web and mobile (tablet/phone) differently within ReactXP? - Bekael
\nA: You can easily diverge styling where desired (and we do in many places) -- <RX.View style={ iOS ? iosStyle : otherStyle } />. The styling system does cross platform work for you where it's helpful, but if you want to add per-platform flair, it's quite easy to do so.
# Q: The styling you talk about diverse for mobile vs web, but iOS runs on iPads as well, meaning a whole new approach to styling things for bigger screens. - Bekael
\nA: Yup! If you read this blog post it describes how we handle responsive design. So we actually tend to slice and dice based on a few different axes -- OS, responsive dimensions, specific platform (tablet vs. phone vs. desktop), etc. We find that treating tablets similar to desktop works fairly well, and the difficulty really comes in with small tablets (i.e. Note 7), since it's small enough that a wide interface doesn't really work properly, but big enough that a phone-centric interface is difficult. These are all design considerations, though -- ReactXP is happy to accept whatever poorly-conceived styling you throw at it, sliced and diced any way you desire. - deregtd
\n# Q: What is the main difference between ReactXP and electron and can I have the full power like electron on desktop cross-platform app - BeshoyHindy
\nA: ReactXP goes beyond just Electron and let's you build for other platforms supported by React Native. You can put a ReactXP app inside of an electron app, electron is simply the shell and ReactXP is the JS library.
\nYou can create a ReactXP extension that accesses electron specific functionality. If you do this, you need to conditionalize your code to ensure that you're not running on another platform (like web) where this wouldn't work. - berickson
\n# Q: Is ReactXP native boilerplates ejectable like we do with Expo? if its using react naitve i can imagine its same core inside ios and android proyects.. - kikoseijo
\nA: Unfortunately, I don't know what CRXPA uses. :frowning: You'd have to check with the author. That was written fully externally (someone from the OSS community built it) so we don't have any background on it. I assume it's fairly similar to other boilerplates, but don't have any actual knowledge there. - deregtd
\n# Q: Are the samples hosted anywhere so I can view them as live demos? - shanem
\nA: The source for the samples are hosted on github but they're not published anywhere. Publishing the web examples as a live demo is a good idea, I'll look into that. https://github.com/Microsoft/ReactXP/tree/master/samples - berickson
\n# Q: Why on earth did you chose RX as the component prefix when there's RX as in Reactive eXtensions? :smile: - blackxored
\nA: When we began internal development, we initially called it ReactX, hence the RX extension. When we open-sourced it we chose the name ReactXP (XP for cross-platform). The RX prefix still fit the newly chosen name, so we kept it as is. - berickson
\n# Q: Any plans of a different styling user-facing API, createText/ViewStyle seems too imperative IMHO and I would love if you could just pass objects or use things in the ecosystem like styled-system? - blackxored
\nA: There are some performance considerations here -- for react-native, when you create a style object, it actually sends the info over the bridge to the native side, which creates an object representing your style, and you just treat it as a number from then on out. So, if you dynamically create a bunch of styles, it's actually quite slow compared to creating more static styles up front and re-using them. So, while one could easily switch the API to support dynamic generation, we tried to lay a \"pit of success\" for people to do the performant thing and pre-create all their styles where possible.
\nTo expand a bit, managing the bridge is one of the biggest considerations with react-native performance, so we try to do whatever we can to leave it as unused as possible. - deregtd
\n# Q: You said previously that it wouldn't be a ton of work to port normal react for web to ReactXP, could you go more into details what type of work you need to do? - FlayaN
\nA: It partially depends on the complexity of your app and the attached DOM handlers. In short, you can do a global find/replace of divs and turn them into RX.Views, Buttons -> RX.Button, ect. Styles move from inline CSS to RX styles. Assuming you're using flexbox already, it should be mostly copy paste to migrate your styles. You'll likely hit some hurldes if you're directly setting CSS properties, but Animated Styles likely handle this for you - berickson
\n# Q: What is your favorite color? - PenguinMan98
\nA: I'm preferrential to Orange and Blue :smiley: - berickson
\n# Q: Why we still can't use useNativeDrive for backgroundColor in react native using Animated library? - Azz_B
A: The useNativeDriver option only works if react-native actually has support for it on the host side. If not, it tends to either crash on you, or silently ignore you and do it on the javascript side anyway. That said, if they've fully added support for a type of native animation that we aren't passing through properly, by all means let us know on the issues board and we'll address it.
To some extent we're falling a little behind on the animation front because for many of our complex animations we've changed over to using Lottie since it provides a bunch of functionality not available via React (and it has a nice engine for managing/caching those animations), so we're mostly using the animated framework for more coarse-grained animations these days -- the kinds that RN supports natively. :smiley: - deregtd
\n# Q: Is there any example that uses stack and tab and drawer navigaton inside each other in react-navigation? I haven't seen that in the docs - elmawardy
\nA: I don't believe we have examples in place at the moment. I suspect altering any other react-navigation examples to use RX components intead of React-Native components would work. - berickson
\n# Q: Were the ReactXP-based Skype applications released not that long ago when all of the design changed for the iOS and macOS apps? - ddelrio1986
\nA: Correct, that's when the switch to ReactXP happened. - berickson
\n# Q: I'm not sure if this was asked or not, but can we use Expo with ReactXP? - Johnny_Five
\nA: There have been a few issues posted and even a PR attempting to add some Expo support, but we've never used it so we don't know much about it. You can try to dig up some of the history (i.e. https://github.com/Microsoft/ReactXP/pull/236) if it helps. We're happy to bring in support for things that are helpful to the community, especially as long as it doesn't bloat the framework for others. :smiley: - deregtd
","frontmatter":{"date":"2018-01-11T00:00:00.000Z","dateGroup":"January 2018","dateString":"Thursday January 11th, 2018","description":"Engineers @ Microsoft/Skype developing ReactXP (https://github.com/Microsoft/reactxp)\n","location":"Q&A Channel Reactiflux","people":null,"recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Brent Erickson & David de Regt"}}},{"name":"nicolas-gallagher","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How was working at Twitter? - mrcl
\nA: I worked at Twitter for over 5 years, the experience was different at different times.
\n# Q: Great talk about Native Web. What are the gotchas if any? - lrn2prgrm
\nA: Main gotchas are around the API differences between RN and RNW.
\n# Q: What patterns do you use to share your code between apps / web apps? Lerna, seperate git repos, all in one folder? - ericwooley
\nA: I've mainly relied on npm packages. At Twitter I got us to rely on hosting scoped packages on our internal registry, and we published packages there. That works quite well when you don't have infrastructure to coordinate source dependency upgrades across apps.
\n# Q: What's the best challenging task (working for web apps/high traffic) for an FrontEnd engineer in your opinion? - Netto
\nA: I tend to think about what I can do as an engineer to help people making apps realise their ideas as quickly as possible. When iterating on an app is slow and costly, a lot of problematic processes can appear and it gets harder to learn from users. So anything you can do to make it affordable to learn quickly and accurately is where a lot of hard challenges lie IMO.
\n# Q: What technical stack was used 5 years ago when you joined? - sarbull
\nA: When I joined, Twitter for Web was moving to Scala + Mustache + jQuery/Flight.
\n# Q: How would you split your apps up into packages? EG components, redux, common style or packages for a recursive route strategy? - ericwooley
\nA: We mainly published generic modules that could be used by other teams or projects. Here are some example packages that were under the twitter scope: babel-preset, codemods, eslint-config, GraphQL-tools, http-client, react-icons, react-ui, video-player. Nothing as granular as individual styles or redux modules. We had planned to publish redux modules but the move of Twitter's future API away from REST and towards GraphQL made that less of a priority for us.
I should also mention that Twitter has a monorepo, so most development is done there and not in separate git repos.
\n# Q: Is the goal for a codebase that targets mobile and web and uses RNW to be able to be 100% shared code aside from platform-specific styling / native capabilities? If so how close to that is the current state of RNW? - Sylnir
\nA: I think the goal for multi-platform apps should be first to start with multi-platform components. The data layer is relatively easy to author without being coupled to a particular platform. Multi-platform components (ios, android, web) is more of a challenge and a lot of that is due to the issues surrounding CSS on the Web. I think RNW already makes it possible to build a large library of multi-platform components - MLS and others have proven this out in production. Where we as a community still have work to do is figuring out how to bring it all together for make multi-platform app development more accessible. There's still quite a bit to figure out, but I think some of the hard first steps have been taken.
\n# Q: Am I limited when styling my application? I think RN only supports a subset of CSS-like styles? If not, how does it work? - rrhrg
\nA: Yes, there are some style constraints. In practice I don't think this causes any problems. Hover styles require a component wrapper to be applied using JavaScript. I would like to see browser vendors / spec authors providing more style APIs in JS rather than further complicating the CSS language.
\n# Q: Do you find using react init there best way to develop apps or tools like CRNA and Expo are best in the long run? - KJreactor
\nA: I don't know. I've only worked on a couple of React apps that we setup before those tools existed. I think CRA/CRNA/Expo are all great tools to get started. In the future I can imagine we'd want CRA to support multi-platform app development around the React Native API. At the moment, I think there are too many ways to build React components for the web.
\n# Q: How would you compare RNW and ReactXP? - quincy
\nA: ReactXP provides a cross-platform API that is more consistent across the platforms, but at the cost of not being compatible with React Native and it is significantly slower on web than RNW. I haven't really used ReactXP because it doesn't seem to have been designed for mobile web either.
\n# Q: What are you moving on to now? - ericwooley
\nA: I don't know yet :smiley:
\n# Q: How many companies do you technicalk depend on RNW? Does Twitter plan on maintaining the open sourced RNW (even though you're not there)? - quincy
\nA: I don't know how many companies depend on it, but some examples: Twitter, MLS, The Times (UK). Some Twitter engineers might contribute patches to RNW, but I'll still be maintaining it.
\n# Q: What tools did you use to produce the CSS benchmarking results? - zhuo
\nA: The benchmarks in RNW are based on some work Leland Richardson did. I'd like to upgrade at some point. Twitter Lite has a benchmarking screen in development mode that uses this https://github.com/paularmstrong/react-component-benchmark - something like that could be quite helpful in terms of RNW sourcing more perf anecdotes from different mobile devices.
\n# Q: I want to do more tests in my apps. Could you give us some advice or trick in order to get more tests in ours apps and stay motivated? - AdrianC
\nA: If your tests give you confidence to make changes, and save you and your team time, then you might be more motivated to write tests. I'm pretty relaxed about tests though :smiley:
\n# Q: Hello Necolas. I've been meaning to try out RNW, because Cordova is awesome and all - it's a mess. But starting up with RNW is pretty hard, considering the getting started section is not very newb friendly, and the \"starter packs\" all use very outdated versions of RNW. Do you have any plans on introducing your own starter pack that'll be kept up to date with RNW? Or improving the getting started guide. - Rayd
\nA: I think CRA is the way to go to get started. Hopefully the story for getting started will get better over time; I'm mainly focused on getting the core value proposition of the project as strong as possible first. But if other people want to help with the integration and onboarding experiences that would be great.
\n# Q: Was it difficult to tackle the huge code base of Twitter when entering the company? How long did he take you to understand it completely? - popo63301
\nA: I never understood the whole of Twitter's codebase! In terms of Twitter's web apps, one of my motivations behind switching Twitter's web stack to a JS stack was that I found Twitter's Scala-based web apps to be extremely difficult to work with, and quite developer-hostile. Imagine joining Twitter and having to learn Scala just to write some simple View logic? It's also true that I didn't understand the whole of the Twitter Lite codebase either - at some point you have enough people working on an app that you necessarily lose visibility into all of it and instead focus on understanding the properties of the overall system better.
\n# Q: How involved with the GraphQL side at Twitter were you and were there any headaches you ran into using it? - ghardin137
\nA: I was advocating to adopt GraphQL for a couple of years, but was not involved in any of the engineering work once it started.
\n# Q: If you have one million dollars to invest in a new technology, where you'll invest all your money? - AdrianC
\nA: I'm not sure. In my opinion, the biggest problems in the world right now are not technical problems and can't be solved with technology alone - the narrow focus on technology is one of the failings of the current tech industry.
\n# Q: What were the largest challenges you've tackled in building RNW and what do you consider the hardest challenge that you haven't gotten to in implementing RNW. - Vincent
\nA: I think the biggest challenges so far were related to styles and events. Looking ahead, probably async animations and defining a core API to be shared with React Native
\n# Q: How are you keeping your life balanced? What tools do you use to manage everything? - Edouard
\nA: I don't have a good answer to that question! One of the reasons I left Twitter was because I wasn't happy working there, and I was concerned with the impact caring so much about Twitter was having on the rest of my life. So I guess I'm figuring out how to find a better balance in the future.
\n# Q: In terms of browsers, how far do you think they'll go into having lots of things already built in in order to add less libraries in our javascript apps. How much do you think the balance should hold for both sides? - sarbull
\nA: I don't know which direction browsers will go. I think there is room for more APIs being added to browsers to help keep work off the main thread. It also seems like a lot of going to change over the next few years (inc with web assembly) and we'll probably be learning how to build web apps all over again!
\n# Q: What book changed your life? - AdrianC
\nA: I like books that inspire you to read a lot of other books. One book like that which always comes to mind is \"Pandora's Hope\"
","frontmatter":{"date":"2017-12-07T00:00:00.000Z","dateGroup":"December 2017","dateString":"Thursday December 7th, 2017","description":"Engineer @ Twitter | Creator of react-native-web\n","location":"Q&A Channel Reactiflux","people":"@necolas\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Nicolas Gallagher"}}},{"name":"eli-white","relativeDirectory":"","childMarkdownRemark":{"html":"Hey Everyone! I'm super excited to be here and have a chance to talk with you. I've been at Facebook since March and have been focusing on internal JS infra around React Native and helping our product teams improve the reliability of our apps, mostly by improved flow typing!
\n# Q: Will there be native support for vector drawables in the future? - Andrew
\nA: I'm not familiar with vector drawables, is there a github issue you can forward me about this?
\n# Q: Hi Eli. What do you recommend to debug performance of a React-Native app? / What is the preferred way to measure performance of an RN app? - shubh15
\nA: Systrace is a good tool to find bottlenecks in your code from local changes. For production performance, classic perf logging is probably the best way. It all depends on what you are trying to measure.
\n# Q: How is it to work at Facebook on the React Native team - what is your typical day like? - axemclion
\nA: I'm loving my time at Facebook. Getting to work on React Native which is so well used both internally and externally is a really amazing opportunity. Free breakfast doesn't hurt either. :stuckouttongue:
\n# Q: redux-sagas or redux-observables, which you prefer? - ronsuez
\nA: Why not state? :stuckouttongue: I've actually never used redux-sagas or redux-observables. So sorry, no good thoughts there.
\n# Q: Hello! Recently Facebook released React 16, and a complete new shiny web-site. Which is really nice. But React-Native lacks good site, and documentation feels auto-generated, not complete, and pretty meh overall. Can we expect some improvements in this aspect? Would be very nice to have something similar in quality to main React site, with introduction, guides, FAQ, and well documented API. - Checkmatez
\nA: We know that the React Native website is in need of some love. We have some plans to improve the ability for people to contribute. If there are specific things you think we can do better, please link to some github issues so we can track those pieces
\nRegarding React Native Docs: we're removing the autogenerated docs (component and api reference docs, which are generated from source files using react-docgen). The result will be a flat docs/ directory with all the markdown sources for our docs. You can see this in master already! Throughout this process I identified a bunch of apis that fell through the cracks with the old autogen docs. There's still a lot of work to do on the docs, but hopefully this will make it easier for the community to contribute without having to learn how our old autogenerated site worked. :smile:
\n# Q: I’m a non-native dev developing an app that’s going to need to integrate an sdk without a react native port. This is a great learning opportunity for me in the short term but I’m curious if there are plans to make tools for integrating native SDKs easier for people without native experience. - Sylnir
\nA: The best way to help us know what needs to be improved is with github issues that define the problems you've been having and recommendations for how we could improve. We don't use many third party SDKs here at facebook so it is useful to have those pain points surfaced to us.
\n# Q: Do you see React-Native being a viable alternative to Java / Swift for Augmented Reality / 3D applications or what are the anticipated use-case limits? - Murray
\nA: I'm really excited about the React Native work happening as part of React VR. I have yet to use it, so my thoughts are in no way official from the React VR team. The way I think about where it will be great is similar to the tools to create different kinds of mobile apps. 3d games on mobile are written with engines very specifically meant for that use case. But React Native shines on a huge number of apps that have 2d interfaces with lots of interactive pieces. I think React VR is going to be similiar. React VR will make it incredibly easy to develop 2d panels for things like HUDs, menus, flat panel apps, etc. In fact, a lot of the new in 3d stuff coming out from Oculus like the store and home screen are written with React VR.
\n# Q: Do you think React Native will be used a lot more in mobile apps in a few years? - smokyboo
\nA: React Native seems to be growing immensely both internally and externally.
\n# Q: how do you think web assembly will influence react native? What's your opinion about web assembly in general? - Sear.Hamlin5
\nA: Re: web assembly, I haven't thought too deeply about this. I think web assembly could have a huge impact on JS for the web in the long term. I haven't thought much about the RN implications.
\n# Q: is there any plan to add more shadow props for android beside elevation? Cause I think only elevation is not enough - enakenak
\nA: I'm not familiar with the shadow props on android. Knowing the particular use cases would be necessary for the community of contributors to prioritize that
\n# Q: Why is the state of react-navigation so bad? Why Facebook declared it to be the official navigation library and has not received proper attention? There is even an issue questioning the overall state of the library. Please fix. This is has been the worst part of react-native so far. - debug
\nA: Re: Navigation. Sadly, Facebook engineers aren't able to contribute or provide thoughts about navigation approaches. I really wish we could. For general thoughts, native navigation approaches like Wix's and Airbnb's will give the best animation and user experience.
\nI personally think that react-navigation has good API - it also has the potential to support a \"native driver\", just like what happened to animations. I think overall, navigations using native are good for perf - thats what Wix and AirBnB are doing. - axemclion
\n# Q: how does future support for accessing native hardware such as Bluetooth, etc look? It is my understanding that NativeScript for instance has better support for this hardware and hopefully ReactJS will catch up in this area! - Deathstroke5467
\nA: Native functionality can be exposed with NativeModules following the guide that @axemclion linked to above. Exposing that functionality into React Native should be a pretty quick and easy way to get access to that functionality. If there are things missing in the core, feel free to write that native module and put it on github for others to use!
\n# Q: I'll be releasing an animation engine for the react-native to polyfill all the CSS animations and some other core stuff like WebWorkers for RN, just wondering whom I could contact for a code review before making a PR? - Yuriy Yarosh
\nA: Either just open a PR and ask for specific feedback or open an issue for us to talk about the approach and thoughts first. :smiley:
\n# Q: The react native docs, for eg say the FlatList docs aren't showing all the available props https://facebook.github.io/react-native/docs/flatlist.html#props in for new versions. Older docs show all the available props. Is that issue on your radar? - shubh15
\nA: As I mentioned above, we just removed the autogenerated docs on master. You can see the new version at https://github.com/facebook/react-native/blob/master/docs/flatlist.md. Please open an issue and tag me and I'll take a look at what's missing! - hector
\n# Q: on the topic of exposing native modules, are you guys going to improve the documentation to include swift and kotlin? also, are you going to improve the way it works (meaning, expose an auto serialization so we don't need to decompose objects into maps or writablearrays)? - rodrigoelp
\nA: If you have recommendations for how we can improve the documentation, please open a PR. Documentation PRs are amazing. :heart: :heart: :heart: :heart:
\nRe: auto serialization, that isn't something we currently have on our radar afaik, I'd be interested to know more how that would work. Perhaps you could propose something in a github issue?
\n# Q: any ETA on when RN & NPM 5 will get along? - fresh
\nA: I'm not sure how RN and NPM 5 don't get along. We use Yarn at FB so we probably don't run into those issues ourselves. There is no reason that I know of for why they shouldn't. Is there an issue for that?
\nDo you mean npm deleting modules after react-native init happens?
\nI think adding an npmshrinkwrap.json may be a possible fix.
\n# Q: Is metro-bundler supporting symlinks documented anywhere aka stable? - blackxored
\nA: I am not familiar with much around metro-bundler but I know the people who work on it are very communicative on their repo!
\n# Q: Top 2 JS books that come to mind right away? - fresh
\nA: https://www.amazon.com/Patterns-Enterprise-Application-Architecture-Martin/dp/0321127420
\nWhen I was younger I bought that book (textbook) for some fun reading. It opened my eyes to so much of good strategies for organizing and connecting real code.
\n# Q: Hello, as someone new to React are there any resources you recommend? And any tips in terms of progression in programming. Thank you. - Journey
\nA: My absolute favorite intro to React tutorial is this one: https://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/
\n# Q: Hi, my question is about React Fiber internals. Given an old React component, it was possible (I think) to access the component's current instance. How would one do when given a React Fiber? Given that a Fiber has a one-to-one relationship to an instance, and yet is also a \"unit of work\", this seems a bit more complex, and yet still possible? I apologize if this question is rough, but I'm still struggling with the concepts so not sure if my vocab is right. - ezmiller
\nA: ---
\n# Q: What is this experimental feature for? i couldn't wrap my head around what it will improve or anything? https://github.com/facebook/react-native/blob/master/Libraries/Experimental/Incremental.js - shubh15
\nA: I've never seen that before and have no idea. Looks like it hasn't been touched since May 18th 2016. @sahrens was the one who wrote it, also on my team. Perhaps he could give some context.
\n# Q: React Native currently is very focused on iOS and Android, but I see a lot of potential for various other native platforms (like react-native-windows and react-native-ubuntu). The react native core allows platform developers to reuse the most if not all of the JS-side and implement just the native side through a message queue. My question: platform developers are sort of required to disover the correct messages to send across the bridge by reading the source code of an existing platform, implement as much as they can, and then wait until something breaks; are there any plans to document the core module messages/interfaces in order to make it easier to start new platforms? - Vincent
\nA: Enabling people to use React Native for more platforms is definitely something we are thinking about and want to support. It is a really hard technical problem. @axemclion is thinking about it a bunch.
\n# Q: I'm a current college student in the DC area, my ultimate goal is become a web developer, any tips on what you'd recommend for when trying to get into large companies such as Facebook? To make it clearer how would I a person that doesn't go to a top 15 cs school standout and prove that I'm a good fit for the company? - Preethesh
\nA: This is a hard question. If you go to a school where Facebook doesn't recruit it can feel quite challenging to know how to get yourself seen. Sadly, I don't have any magic bullets here, just the typical answers. Contribute to Facebook's open source projects and build a relationship with that team, or get internship experience at some other smaller companies that Facebook might think highly of. I'm sure our recruiting team would have much better answers for this. :confused:
\n# Q: how long until version 1.0? - Sylnir
\nA: We use RN for a bunch of stuff internally and almost every large company is using RN for something or another. It is very stable in that sense. We haven't put too much thought into an actual 1.0 cut but we are starting to try to figure out the implications now. @axemclion is working with some different companies to understand what RN going to a 1.0 would mean for them.
\n# Q: is react-perf-tools or something like it ever coming back, outside of the tooling that Facebook might have it seems like performance analysis for the rest of us it's more complicated than it should be IMHO? - blackxored
\nA: ---
\n# Q: trying to extend the Text component with more native functionality, we've run into issues that some parts of the RN native code base are not designed for extensibility, because of static inner classes and final methods and fields. Similar problems were found by others try to extend the built in WebView. Do you think this is a deliberate choice by the engineers making these parts and if not, are you open for PR's that restructure this code to make extension of core views easier? - bartol121
\nA: I doubt the engineers building those features purposefully meant to lock others out. More likely, they were trying to solve for the requirements they had at the time. Feel free to open a github issues with the problems you are having and how you'd like to see those things change to better support those use cases.
\n# Q: Is it possible to include in the initialization of a new project which language (javascript, flow, typescript) to use as well as updating the template for the projects (as it is using xcode 3.x, several years old)? - rodrigoelp
\nA: I haven't done any of the work in that area of the codebase and I'm not sure what is involved. Is there an issue tracking that problem already?
\n# Q: RN evolves in a rapid pace thanks to all of the (community) contributors and the monthly release cycle. I sometimes miss a clear sense of direction though. Are there any plans for a public RN roadmap and what's the primar - Tim
\nA: This is something we've heard. Better supporting the open source community and making sure that we properly communicate is one of @hector and @axemclion's main goals. Hopefully you can feel more confident in our direction and what is coming soon.
","frontmatter":{"date":"2017-11-09T00:00:00.000Z","dateGroup":"November 2017","dateString":"Thursday November 9th, 2017","description":"React Native Core Team @ Facebook\n","location":"Q&A Channel Reactiflux","people":"@Eli_White\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Eli White"}}},{"name":"kurtis-kemple","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: I'm a lot like you -- a successful developer who is a high school dropout. I'm quite passionate about explaining to those interested in the industry that a college degree is not required, but I receive a lot of pushback. Do you agree that for motivated individuals capable of proving themselves in interview situations, the opportunities for success are out there? Have you faced discrimination stemming from your perceived lack of education? Thanks. - connor
\nA: Great question @connor! I have definitely had situations where it has held me back and it took a long time but I have since realized that if the interview process is very CS heavy and the job does not require that knowledge its a red flag about the company and I move on, it can be tough when you need a job but I like interviews that align with daily work.
\n# Q: How big of a soccer fan / player are you personally? What's your favorite MLS team? - javidjamae
\nA: I get that a lot! Fave team is DC United because I was born there, but I actually don't love soccer! I love delivering amazing experiences to soccer fans :wink:
\n# Q: What did you use before GraphQL and what prompted the switch? - friesfirst
\nA: I used REST and due to working in data heavy environments we ALWAYS ended up doing two things 1) batching queries from client via post (which kills many benefits of REST) and 2) building an API gateway per client to meet the proper data needs and data structure, GraphQL gives both to you.
\n# Q: class_name or className? - kittenswolf
A: StyleSheet.create() for life! :joy:
\n# Q: What is your favorite anti-depressant? Do you think they help? How do you manage? - cj3kim
\nA: Weed :leaves:. I don't like prescription meds. Not advising against them though!! Just for me personally, I found a natural remedy that works, use what works.
\n(editor's note: Kurt is not a doctor, this is not medical advice. If you're feeling depressed, seek professional advice, don't self-medicate.)
\n# Q: Favorite unit testing tools for React? Snapshots or no snapshots? - javidjamae
\nA: Snapshots are amazing for anything serializable! API responses, static component state, GraphQL schemas, etc, but still do some integration and E2E with Jest/Enzyme, etc.
\n# Q: Can you share a specific situation where GraphQL was very useful for MBL? - Wes
\nA: Yeah! We have lots of data from different sources that we next to each other! This article explains it really well https://labs.mlssoccer.com/implementing-GraphQL-at-major-league-soccer-ff0a002b20ca
\n# Q: What are some cases where GraphQL is definitely not appropriate? - friesfirst
\nA: I'm honestly trying to figure that out myself!! So far it's been all that we need, biggest issue is you need to be prepared to build what you need. The community is very young.
\n# Q: What's been the toughest part about organizing a meetup? - mplis
\nA: Just finding time! It's time consuming to line up speakers and hosts so recruiting help was a big win, when I first started didn't know what to expect but with the interest I really want it to be a great meetup so I have gotten some help.
\n# Q: Hi, not sure this does really fit here. I'm a 4th year IT student and I feel like I can't do anything, they're telling us we'll be working in 2 years but... I feel like we learn nothing at school. If I try to start my own project, I kind of drop out because I feel like I can't do it or lack the knowledge or motivation I guess. Any idea how to improve that? - Victor
\nA: I totally get where you are coming from! It can be tough to find the time and or motivation to continue to attempt something you barely have time to do, I would advice to try out something like Free Code Camp that has an amazing community and learn at your own pace tutorials.
\n# Q: Hi Kurt, do you work with Peggy Rayzis? I heard her interviewed on React Native Radio podcast and thought the data visualization stuff being worked on at MLS sounded really interesting. How has the experience been using Victory charts in React native? - ChadMorrow
\nA: I did work with Peggy! We were the first two on the internal UI team, she just left for Apollo and we worked together on the victory stuff, it's been fantastic but the lib is very young so you have to be willing to add/fix what you need but the Formidable crew is great and easy to work with.
\nAndroid has the most issues tbh
\n# Q: Any suggestions for testing GraphQL? Front end only, backend only, actual integration between FE & BE? - stantoncbradley
\nA: Great question! I would test it all! Jest snapshots for client query changes, could actually dif schema too, and then we use jest to test our resolvers. This video has more! Https://www.youtube.com/watch?v=tetUyMqgs6I&list=PLlSGB7S33fmmIVo7SURSssKHXfh3G3ed3
\n# Q: Do you have any kinds of discussions or outreach to other similar industries at different companies? For instance, has the Fantasy Premier League office ever contacted you about utilizing GraphQL to their advantage? - kylemh
\nA: Thanks for the kind words and we haven't exposed any APIs or done any cross league dev work, but we do plan to open some APIs in the future, as well as some data visualization tools for MLS statistics.
\n# Q: Some aspects of GraphQL are non standard implementations (such as query batching from Apollo), do you think that's a good idea or does it mess things up? - Wes
\nA: I think what they are doing is fine, they are making GraphQL easier to use, but they don't break the GraphQL spec as in my application behaves as expected, if we removed Apollo we still have same schema, resolvers, etc.
\n# Q: I keep hearing about GraphQL a lot but never got time to check it out. How will you explain what GraphQL is to a React-native developer. How is it useful to me, where does it fit? I seriously have no idea whether it is for front-end people or back-end people or what the hype it is at all? P.S: Where can I get that cool GraphQL logo sticker, I just love adding them to my laptop whether I use that tech or not, it isn't available in most of the shops here :joy: :laughing: - dino_coder
\nA: Great question! I like to think of GraphQL as a communication tool, in that your front end has needs for data and your backend has needs for how data is requested and GraphQL allows any client to request EXACLTY what data it needs because they speak the exact same language, that may not be a great summary, sorry!
\n# Q: Where does GraphQL have most room for improvement? - friesfirst
\nA: Definitely in the middleware game! Its very lacking in regards to completeness, auth, logging, statsd, all the things that REST has solved need work and to be figured out, and it also needs to be figured out what is a GraphQL problem and what is an app problem.
\nIt will be awhile before the industry lands on best practices.
\n# Q: Can I use GraphQL with an already built server? Or is there anything we need to do at server side? - dino_coder
\nA: We have REST and GraphQL running on same server internally at MLS. No need to do it all over, which means you can build it out incrementally and based on priority, your PMs will love it :wink:
\n# Q: As a follow up to your plans to open up APIs and publish data visualization tools, do you have any plans to make some work open source? - kylemh
\nA: We do have some tools that we want to OS, like a tool that converts Swagger API docs JSON to GraphQL schema and some other stuff. Since a lot is business logic related its hard, but I also OS things like GraphQL Auth and other tools. And I write as much as I can on Medium as well.
\nhttps://github.com/kkemple/GraphQL-auth
\nhttps://medium.com/@kurtiskemple/
\n# Q: So as best practices solidify, do you see GraphQL as eventually replacing REST? Or both running together - friesfirst
\nA: I don't think REST is going anywhere, I mean technically GraphQL is just POST requests, plus there is TONS of infra built around REST.
\n# Q: Would you like seeing Zlatan Ibrahmovic playing in MLS sooner for David Beckham's franchise? https://en.wikipedia.org/wiki/Zlatan_Ibrahimovi%C4%87 - dino_coder
\nA: I actually don't know who that is :disappointed:
\n# Q: Well kind of a follow up on the discussion here, I'm able to create small React apps but every time I face something I don't know, I stop. Like this time is about making http requests to get a json file, I tend to think \"This is too complicated, I'm going to do it later\" then proceed to do nothing for the next 4 weeks. (even though I realize it's not THAT complicated ... I overthink I guess) - Victor
\nA: It sounds like me lol, pure procrastinator, instead of just fetching a file, try to build something you have interest in, otherwise idk, could focus on learning ways to combat that issue.
\nI read A LOT of books to help with communication, depressions, motivation, productivity, etc.
\n# Q: Have you seen new GraphCool? (https://docs-next.graph.cool/concepts/overview/what-is-graphcool-apohpae9ju) What do you think of GraphQL as a backend-service and as a developer platform? - Checkmatez
\nA: I think its great! If you are primarily a front end dev or a startup its a great way to get a backend in no time, not to say Graphcool can't handle scale though, it looks amazing, I also like tools like Apollo's launch pad that let you test and build small GraphQL servers for free.
\n# Q: Have you ever felt like quitting as a developer? Like sometimes it feels like this feild is not for me, event though I really like programming. Because of the problems I need to solve and such. - Martin
\nA: Absolutely, sometimes I think about leaving my current job even though I absolutely love it, and thats my imposter syndrome and depression weighing in, all jobs are hard and we have to work harder to create the environment we want, no one will do it for us.
\n# Q: How do I, as a full stack dev, combat burnout in the shadow of a 25mi commute, a long workday, a breakneck sprint velocity, and anxiety/depression? I wrote a medium article that I haven't released yet and it was cathartic to get everything on paper but in the end it didn't provide any answers on how I can fix my situation or adapt and overcome it. I haven't gotten the chance to read your article on depression yet but is there anything you would say to devs like me? - Redmega
\nA: Amazing question! Sounds like we have similar situations, firstly if you can publish that article it may not have given you answers but maybe someone will once they see it, if nothing else you let other people know they are not alone, secondly you HAVE to get some sort of work life balance, try to get a flexible schedule going so commute can be mitigated or if you work late you come in late the next day, if your job won't budge I suggest finding somewhere that will!
\n# Q: I'm gonna read \"The Productivity Project: Proven Ways to Become More Awesome\" & \"The Power of Habit: Why We Do What We Do in Life and Business\" been under the table for a long time ... maybe it'll trigger something ^^ thanks Kurt for the pep talk - Victor
\nA: Glad to be of any help! HBR's top 10 articles on managing yourself is also a gem!
\n# Q: Would you say it's generally more complex to scale a GraphQL server rather than a REST server? I know with REST u can cache on requests, but with GraphQL I struggle to see how caching can't be anything but hugely complex. This fear holds me back from using it on anything significant. - ctrlplusb
\nA: really good question! Yeah I wouldn't say harder only different, in REST caching is blackbox, as in your server gives response to cache and cache passes on to client, in GraphQL your app is responsible for caching and will serve all requests to all clients, so it becomes important to cache expensive processes like API requests and DB lookups.
\nWe serve a lot of traffic via GraphQL and find it very performant with in-app caching in place, for that we use dataloader from Facebook.
\n# Q: How can I gain enough skills to become a freelancer? I've been trying a lot but whenever I see projects there's always something that I do not know, client's skills requirements are a lot.... - mahaveer
\nA: I haven't done freelance but that rings true of job descriptions for all jobs, when in comes to requirements I apply if I know half, no one knows it all and in fact I don't learn new things anymore unless I need them, I investigate all the time, but learning I reserve for whats in front of me.
\nEveryone has a bubble of knowledge, sometimes they overlap but no one's bubble is bigger than yours, its just full of different stuff.
\n# Q: Are you going to GraphQL Summit? - slightlytyler
\nA: I am not!! I can't make it this year but my lovely co-worker @Jake Dawkins will be there!
\nYou should find him and tell him how bad at GraphQL he is! :joy:
\n# Q: What do you use for backend? Node? Ruby? Elixir? Python? - hisa
\nA: We use node for all of our services and hapijs as the actual web server framework.
\n# Q: What should I prepare the most for ReactJS/React-Native, if you were the interviewer? And would you expect from me that I would have grasp of all the techs mentioned in the job post? - dino_coder
\nA: Great question, for junior roles I look for component lifecycle method understanding, set state understand, and thats about it.
\nFor senior I would expect a deeper understanding of React, React rendering, context, and for native the differences in layouts and APIs available.
\n# Q: Since MLS uses universal components (components that can be used on different platforms like web and native) on different platforms and different projects, how do you test if a change introduced to fill certain need does not break a functionality (logic, UI) in other project? Do you use test automation, or manual testing by project members? - BTM
\nA: That is a great question, generally since we are RN focused and using React native web to replicate it, that is where we see the most issues, so we develop all components on web in storybookjs and we have yet to hit an issue where it worked there and not in native.
\nAs far as testing we use jest for component testing and than a QA engineer User Acceptance Tests it once integrated into app.
\n# Q: I have two questions. 1. What are the hardest technical challenges you & the team will have to solve for the React native app? 2. Whats your fav emoji? - peggy
\nA: Hey @peggy! Thanks for dropping in!! 1. The biggest problem we face currently is some very advanced gestures to navigate the app, its more like snapchat than a utility and managing the UX is difficult from both a design and tech perspective, and my fave emoji is :pear: and I miss :pear:ing with you on the reg!
\n# Q: Since you don't have a degree in computer science (read your article on depression, it was super good!), how did you start learning programming, React and Node in particular? Do you have any good recommendations? - Martin
\nA: I actually used to work a bunch of different jobs like construction, welding, a cook, then I saw a friend writing HTML and refreshing the browser and I saw it update and I was hooked ever since! I started on front end technologies and then added wordpress and other PHP frameworks to my toolbelt, it wasn't until after that I got into node but its a different time now I would recommend starting in JavaScript.
\nSo much going on there and no shortage of jobs. But I like to experiment with other languages because you get good practices and patterns from them.
\n# Q: What's your junior definition? <1, <2 years? I love football and working for MLS would definitely be great and fun. How can I apply to MLS tech team. Will Trump stop me from joining you if I am not from USA and if he does will you confront him to get me in your team? - dino_coder
\nA: I consider junior someone with under 3 months work experience, junior to industry I actually hate the term junior. I also hate people don't hire JRs.
\nWe don't currently support remote but it is on the top of my list, however not sure about visa rules with MLS, my twitter DMs are always open so reach out, we don't have any roles right now but I will post on twitter when we do.
","frontmatter":{"date":"2017-10-12T00:00:00.000Z","dateGroup":"October 2017","dateString":"Thursday October 12th, 2017","description":"Tech lead on the UI team @Major League Soccer. Organizer of @NYCGraphQL.\n","location":"Q&A Channel Reactiflux","people":"@kurtiskemple\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Kurtis Kemple"}}},{"name":"nader-dabit","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What's the best way to learn React Native? In your opinion. For me the best way was finding tutorials that actually built something and then following them along step by step. — pxY.
\nA: I know one of the first ones I did was by Ray Wenderlich, it was good.
\nAlso udemy has some great ones. Just following them along and playing with stuff along the way got me a long way.
\nAlso, being here on Reactiflux already puts you in the know of a lot of stuff!
\nFinally, I think also finding completed apps on github, downloading them and running them, then going into the code and changing things sometimes is a great way to learn.
\n# Q: Assuming I'm a med-weight JS Dev, and I'd like to switch to mobile development, should I go with React Native over Swift and why? — KGB
\nA: I work almost exclusively with developers who are coming from native when I do consulting for a lot of companies, so I get a variant this questions a lot.
\nFirst of all, I don't think that React Native will ever be as performant or of course up to date as the most recent APIs that are available. React Native is, though, as close as we have to being native IMO right now and I have seen and shipped many apps that are indestinguishable from native.
\nAlso it comes down to efficiency. If you already know JavaScript and will be wanting to learn mobile, it is extremely easy to jump into React Native vs going into something like Swift (iOS) or Java / Kotlin (Android). Once you know RN, you can build for not only iOS and Android, but also AppleTV , RN Web, and down the road evem more platforms.
\nMany companies I work with are also moving their teams to React Native, large fortune 500 companies that may surprise you. Seeing this large shift in the industry also tells me there will be demand for it in the future.
\nFinally, you are able to iterate much more quickly using RN vs native, so your dev time may drop to 25 - 50% of that of a traditional native environment.
\nAgain, it kind of comes down to what I'm seeing in the industry as far as what companies are investing in, and I am seeing a lot of companies building their businesses on RN.
\n# Q: What's the best way to implement an ember-concurrency clone without redux? — vFp.LindyHop
\nA: I'm sorry I do not have the answer to your question. If you can dm me more details though, I will do my best to figure out an answer for you after this is finished!
\n# Q: I love RN, but I must ask this question because it's almost always an interesting answer for any technology: What are the worst use cases for RN? (speaking within the mobile app domain, of course) — granmoe
\nA: Definitely I think the worst use cases are anything that pushes the current boundaries of React Native.
\nRight now that would be, IMO, things like games for sure or anything with a combination of
\nAlso, anything that is not supported natively and does not have a high quality abstraction of course would be not a good fit for RN, i.e. AR, VR
\nAlso, if you have a native iOS team and you only need to ship iOS, it may not make sens to use RN or vice versa with a native Android team
\n# Q: What do you mean by a lot of animations? I'm new so it's interesting to know what kind of animations limit React Native — † Van †
\nA: I'm referring really to either a game or something of the like.
\n# Q: What do you find to be the best approach to handling deep linking to nested navigation views where query strings are necessary for the view to render properly (displaying important content immediately instead of waiting for some network request)? — pat
\nA: First of all definitely choosing the right navigation library will get you a long way, and I've found that even with all of the quirks / bugs that React Navigation handles deep linking well for most of my use cases.
\nRegarding nested navigation views where query strings are necessary for the view to render properly (displaying important content immediately instead of waiting for some network request):
\nThis should work similary to how a normal network request would work right, or am I missing something.
\nIdeally you would have something in your query that you could parse and use immediately (i.e. title / description or something like that ) then maybe show a loading indicator?
\nIf I missed something on that question though dm me.
\n# Q: At the end of the last Q&A, in response to @blackxored
\n\n\nThis has been an interesting year for \"React as a platform\" […] react-primitives, haul and also styling libraries supporting the concept but we're not quite there yet. […] what do you think needs to happen as a community to be able to truly develop universal apps regardless of platform?
\n
\n\n[…] Someone needs to artfully implement a lot of polyfills. I think the approach Necolas outlines where you use React Native as the canonical starting point since its cleaner, and then use that to target web, is the right way to go.
\n
\n\nWas happy to see React Native for Web 0.1.0 already supporting React/ReactDOM 16.
\n
What else are you following in this vein Nader? Any other recent news to look into?
\n— ricky
\nA: I'm really interested in this space as well! This is both one of the most exciting things in RN right now and also one of the most complex.
\nRight now as you mentioned there is a lot of awesome stuff going with both React Primitives and React Native Web, but also keep an eye on ReactXP. I feel like a lot of the stuff Microsoft has done lately has been extremely solid / well maintained but without they initial hype we see with other peoples' / companies open source. For instance, TypeScript and VSCode both slowly but competently have grown to become staples and almost dominate. If ReactXP continues to be maintained I think it can also possibly be the winner of this space, but there's definitely still no way to tell what will happen.
\nBut I'm cautiously optimistic regarding all of this right now and here's why. In the real world projects I\"m working on, these solutions rarely fit into many of the projects I'm seeing. Rarely does the web interface and the app store / native interface mimic one another more than just aesthetically (at least in my experience).
\nThis ends up being a circumstance where projects are better off just sharing some componeents across platforms and something like React Primitives makes the most sense, but not sharing the actual codebase.
\n# Q: What's the best way to handle click on push notification when app is killed? I need to open specific scene when user clicks on a notification. — v.blokhin
\nA:.blokhin have you looked into deep linking? I think we've handled this situation before with deep linking, which basically listens for an event that would be passed down by the push notification.
\nBasically, it would open the app, parse the url / link / data or whatever passed by the push notification, then navigate or do whatever with the parsed data.
\n# Q: How do you build your apps? Have you used fastlane? — v.blokhin
\nA:.blokhin Yeah lately I've been working with companies that have been using fastlane for deployment to TestFlight, but as far as general building, it really depends if I'm working alone or on a team.
\nMost of the time on a team we usually have a devops person who handles deployment, and it's not unusual to have a single person working full time on deployment / devops handling stuff like FastLane.
\nA general idea of what I recommend though is to have fastlane integrated as early as possible to ship to TestFlight, then iterate on a version1 until it's ready to ship, then after v1 is shipeed use CodePush to update builds until a native change is needed, then push new version and rinse and repeat.
\nCodePush has become a huge part of my process and saves a lot of time and headache.\n# Q:why don’t we have native ListView in RN? I found FlatList still not good enough for a large and complex list like Facebook or Instagram feed — bduyng
\nA: This is a really important question and one of the two main things I'm seeing as problemns for some of the enterprise customers I work with, the other being a stable / preferred Navigation solution.
\nMany people I talk to seem to have better luck with FlatList than I, but when I get into something that is complex, simply switching back over to ListView seems to fix 90% of the problems, (Unfortunately the ListView may be deprecated though I think it is a little too early to do so)
\nRegarding \"why don't we have native ListView\", I don't know the answer, but if you run into perf issues I suggest checking back into ListView until there is a solution to this issue.
\n# Q: What is your opinion on having to use React for web and react-native for mobile? Why not unite the 2 into one ? Essentially doing something something like Cordova or React-native-web are doing? — Rayd
\nA: not too long ago @brentvatne and Adam Perry were on Software Engineering daily talking about the future of React Native, and they had some interesting insight into this.
\nThe discussion seemed to veer towards what you are talking about, that right now we have \"React Native\", \"React Web\", \"React Native Web\", then we have React VR and React Native for AppleTV and so on and so forth, but in the future (possibly using paradigms / ideas like React Primitives) we can move to just React and then plug into other platforms.
\nI think that right now though the two projects are so distinct that it may not make sense to combine the two until React Primitives or something similar is robust and bug free enough to be seamless between both platforms. For instance, there is no TextInput right now in React Primitives, and other similar examples make it necessary to have the two separate for now (IMO).
\n\nThis is the link to the podcast episode I mentioned :pointup2:
\n# Q: What is advantage of React 16 in React Native? — bduyng
\nA: The advantage I guess would be the same as using React16 on the web, those advantages being things like error boundaries, array rendering without wrapping, rendering text only components, and there are probably a few more (maybe setState can be called with null now)?
\nRegarding ListView, I agree using something deprecated is not ideal but when ListView solves the problem right away, we can then spend our time doing other things than trying to get FlatList to work properly.
\n# Q: Thanks Nader, enjoyed your RN EU talk, people who have not yet seen it should — ricky
\nIs Skype only ReactXP example in the wild? support.md on GH says “ReactXP was initially developed by the Skype team at Microsoft. It has since been adopted by other teams at Microsoft.” Have they said anything more about other teams or usage outside Microsoft or have you heard of anyone else adopting?
\nA: Thanks for sharing the video :) I do not know of any other examples of projects currently using ReactXP other than Microsoft. I think there is still churn in their API right now so I'm not sure I would use it in production without investigating a little more imo, but I think that it will absolutely be viable in the future. The fact that it is an abstraction on top of an abstraction would be the only thing that I would possibly worry about, but I think that as far as targeting also Windows + Web it offers a very appealing API and the team that is working on it is A+
\nI will look into it though as I think I am super interested in the answer as well to the question \"Who is shipping ReactXP\"
\n# Q: What are your thoughts on making a decision when it comes to a new cross-platform project? Seems there are good options, React Native, NativscriptJS, Xamarin, etc. part of the decision would be based on current dev skills, but beyond that, how do you go about making that kind of decision? — DrCJones
\nA: This is a great question and something I could talk about ( and have ) for hours, also it's basiclly what I'm most passionate about and love discussing!
\nI think there are a few things to take into consideration:
\nRight now, I think there is a no brainer answer to this question (based on real world experiences and data) and that is React Native.
\nIt is no secret that Amazon, Microsoft, Facebook, Airbnb, + many others are actually betting on React Native so that says alot.
\nThat being said, things happen fast and change is inevitable, so I'm always keeping an eye out for the next big thing / or something that can fill in the gaps that React Native currently has.
\nRight now, the thing I am pretty bullish on is Flutter. It answers the questions for the clients that have the most gripes about React Native:
\nBottom line though it's kind of a combination of
\nDefinitley RN is on top right now almost without question.
","frontmatter":{"date":"2017-09-29T00:00:00.000Z","dateGroup":"September 2017","dateString":"Friday September 29th, 2017","description":"Founder @ React Native Training | Host of React Native Radio | Author of React Native in Action\n","location":"Q&A Channel Reactiflux","people":"@dabit3\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Nader Dabit"}}},{"name":"charlie-cheever","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Just wanted to know if there's a recommended way on how to share most code between react web and native or if this is even possible / good idea. And what do you think about this library? https://github.com/necolas/react-native-web - datoml
\nA: Re: react-native-web. We have actually thought a lot about this and even talked with necolas about it a little bit. What @brentvatne has been championing as a direction for Expo -- which I agree with -- is that we should have a third target, so it will be iOS and Android and also web, probably based on react-native-web
\n# Q: Hello , welcome and thanks. My questions is about Expo.io. What is your main motivation to found Expo.io and why we use it? - tahaemin
\nA: We don't quite have the bandwidth to tackle this just yet -- we still need to improve Expo on iOS and Android, but I hope we can there soon. Web prob won't be as good as the iOS and Android targets, at least not until some big progress is made by browser vendors. But lots of developers need to make a mobile site too, and react-native-web is an excellent way to do that, so using your native mobile app as a place to start, where you get a mostly functional web app for free is exciting and sounds awesome to me. Hope to get a chance to work on this soon but no ETA or concrete plans yet!
\nre: motivation for working on Expo. After I left my last job, I had a bunch of ideas about what I wanted to work on, and they all basically involved building mobile apps. One example of an app I wanted to play around with was, in my head, called \"Chuber\".
\n![\"Chuber](\"https://cdn.discordapp.com/attachments/193117606629081089/357980567674814465/unknown.png\")
The idea is that its an app like Uber, except free, only my friends are allowed to use it, and I'm the only driver on it. So if I had free time and my car, it would be a good win-win way to catch up with people, instead of scheduling drinks or coffee, etc., I could give someone a ride to the airport. But its also a silly idea.
\nAnd so I would love to be able to spend a weekend building it and try it out and see if its a silly idea thats fun and cool, or at least learn if its just silly. But when I sat down to build it, I realized that making it work on iOS and Android would probably take me months using Obj-C/Swift and Java, and it just wasn't worth it.
\nSo then I started researching, along with James Ide, how we could make it so we could make apps like Chuber in a weekend. We want to make it easier to make mobile apps than it is to make a website
\n# Q: Hi. Thanks for being here. My question is, why doesn't react native community accept one navigation solution? Now there are many many components (some are native, some are JS). What is your suggestion? - fahimian
\nA: That's a great question. I think that this process of things shaking out is a natural one. Navigation within apps is one of those things that seems simple but actually has lots of different ways you can appraoch it that have a lot of depth and complexity to them. I think basically the approaches have narrowed a little bit to native navigation (though maybe there are multiple native navigation solutions, I haven't been following it as closely) and react-navigation. React-navigation is still a work in progress but its getting better and most of the people who do navigation in JS are getting behind it. Skevy and Dave from the Expo team have been working, along with other contributors, to make it better, including work to make it feel as close to native as possible for those who want that (getting the animation curves right, and the masking right, etc. To match iOS, etc. Etc.) I think that that getting better over time is probably where things shake out?
\nThere are also other things I know less about like react router that cut at the same problem, and they also seem to work pretty well at what they do. One reason that there are a lot of solutions out there is that many of them are actually pretty decent, at least for some set of use cases. That's sort of a general problem on the Internet in the age of npm and Github, but I think it mostly nets out well
\n# Q: What is the easiest way to get some sort of logging frmo within react-native in a release build? I am having an error show up in debug mode but not release mode. - kylan
\nA: I don't have a good answer for that off the top of my head. I think using Sentry is your best bet. We use that for getting stacktraces around errors etc and I think they also do logging.
\n# Q: On the lines of the question of react native web, what needs to happen (technology wise) for it to be possible write the same (or close to) code for building react and react-native apps? What do you think about the reactxp project in this regards? More broadly, what would be the right abstraction to get there? - siddharth
\nA: Your question makes me think of something FB said at the keynote when React Native was announced. \"Learn once, write anywhere\". That's how I see app building in general going -- where you learn the React paradigm and then can write it on web or in Electron using kinda web or in react-native, etc.
\nBut the tension here is that you don't want to abstract too much for targets that have meaningful differences. For example, mobile Safari and Chrome mobile let you sort of \"write once, run anywhere\" with desktop websites. They do work, but there are tons of ways that using a website made for desktop web browsers is janky and unpleasant when on a mobile device. I think that you should write once, run anwywhere for iOS and Android because they are both just black rectangles with touch screens and you don't want different apps, but you probably will want to be able to write platform specific code when one adds new peripherals or things like ARKit before the other. And if you are dealing with desktop vs mobile, you'll probably want some meaningful differences as well. That said, some people have made pretty good responsive websites that work decently well -- and change themselves around -- in desktop vs mobile places, so maybe we'll see that.
\nI also think there's an interesting possibility of react-native targeting desktop more and platforms broadly, like @necolas talked about it in his recent talk. Some people have already made stuff for Mac and Apple TV.
\n# Q: Hi, as far as I see, Expo already became a \"more convenient and easy\" way to build RN apps, is there any plans or thoughts to implement some kind of visual UI building tool ontop of Expo? This will allow let's say non-technical designers to make a sketch for Expo app, and then you can continue working on it as a developer. - Nofate
\nA: Re: building a visual UI building tool on top of Expo to make building apps easier. Yes! We have been talking about that. It's yet another thing that I reaaaallly want to do, but we need to make Expo a little more solid and feature complete before we start building stuff on top of it. I really liked Hypercard when I was a kid and there's really good things about how you can visually create a UI and then add in programming as necessary.
\n# Q: What do you think about wasm? Do you think we will see a shift to single programming languages that we will be able to compile for both backend and frontnend (perhaps rust and go)? And what does this mean for expo and its future? - mrcl
\nA: I'm excited about wasm. My hope is that it makes running interpreted languages much faster, and opens up platforms like RN and web so that people can write other languages besides just JS and get really great performance. There are a lot of people who'd love to write Python and be able to make React Native apps that way. I don't know whether people will end up writing the same language on the server and the client in a post-wasm world. They are already moving that way to some extent with JS and the rising popularity of Node. If that happens, will developers coalesce around one thing? Maybe, could be JS or Python or Rust or Go or Reason or Elm. I don't know for sure yet and don't have a fully formed view on this.
\n# Q: Hi. I'm have an idea behind navigation. I hope you saw react-native-interactable, and how they use native side. What if we don't try to use native navigation systems like ViewController, and instead create some primitives with UIView on native side like in interactable, and create navigation solution on it? - savelichalex
\nA: I haven't seen react-native-interactable yet. I'll Google it after this session and look into it.
\n# Q: Are there any plans to integrate multiple environments into Expo? At the moment, everytime I run exp build my app gets published in the background and is instantly rolled out to all users. To prevent this, I have set up a quick workaround with a simple bash script that handles dev / staging / production environments for me while actually managing 3 different expo projects (it changes the slug from production to dev or staging). But this feels a bit hacky :wink: - sadyashica
\nA: Yes. I'm sorry that you have to go to all that trouble. Why do you need to run exp build so often? We are just starting work on supporting different release channels now. This is an issue that affects lots of people, not just you, so we're thinking about it and trying to give everyone a good solution.
\nFeel free to leave comments on Canny or post in our forums describing what your needs are and any thoughts you have about possible solutions. That will help us build the right thing.
\n# Q: We are currently working on a framework that would enable a real-time connection between your database and your front-end, based on a sort of pub-sub manner where you define what publications reactively publish what data to your client. This currently is a React HOC (works both in React & React Native). Do you think this is something the React Community would find useful, or are there existing project that we can learn from? - Neglexis
\nA: Sounds really cool. I was at PennApps -- a big college Hackathon -- last weekend. And lots of students were building things that would have been able to use something like that. I do think that there are many people building different solutions to this, so its hard to say whether people will flock en masse to yours without seeing it live.\nNeglexis: Yeah of course. Currently only works with OrientDB though, but the bridge to other DB's should be easy. We're also looking to open-sourcing it, but it'll be our first open-source projects, so any tips on a first open-source project would be awesome!
\n# Q: How many people are currently employed at Expo? - sadyashica
\nA: 15 now! have added a bunch, trying to build out all the features people are asking for. We'll probably mostly stay close to this size for a while and go heads down until we can nail everything that our users are telling us they need.
\n# Q: Could you give an estimate of the breakdown of degrees-vs-non-degrees w/r/t employees at your workplace? - connor
\nA: I think everyone has a college degree except for Perry who has a high school degree. A couple of people might have masters degrees but I'm not sure. It's not very important to me whether people have degrees or not, as long as they know their stuff. But I also think schools are great places in that they are places where people who want to learn congregate.
\n# Q: Out of curiosity, what is Expo's business model? It seems too good to be true :sweat_smile: - ben.makuh
\nA: We think if we can help developers make money, there will be ways for us to make money along side them. Sort of the way that youtube and twitch do with video creators and streamers. So for now, we're just trying to get expo good enough that almost everyone uses it to build their mobile apps. I don't think that, in general, people will pay for developer tools (though they do often pay for developer services), and we thought it was really important to make expo open source so that people could have confidence in using it.
\n# Q:. If tomorrow a Junior joined your Expo dev team and his first task was to build a simple requested feature. What is the first thing you would explain to him? Assuming he has knowledge of JS, C and Java. - FlamingToast
\nA: Our north star at Expo is that we serve people who want to make awesome stuff, and our job is to help them do that. Everything else flows from there. That's our #1 value and the first thing I would tell anyone. Though I would probably have lots more to say after that too.
\n# Q: Could you give us a breakdown on the ages of the people working at Expo? - CharlesKenney23
\nA: We are happy to have people of any age on the team as long as they are great contributors and I don't know off the top of my head how old everyone is actually. But I think I'm the oldest; I'm 36. I think the youngest person is 23 and we had an intern who was 19 but he went back to school. There are a bunch of people who are ~27.
\n# Q: Will React 16 (aka fiber) break different libraries used in Expo? Do you know how much the performance will be improved? - gusgard
\nA: I don't expect Fiber to break much because I know the team working on it has been very methodical in testing all kinds of cases with it. Http://isfiberreadyyet.com/ I think the performance of certain things will improve a lot, but for lots of other things, you won't notice at all because the things that Fiber improves aren't the bottleneck in many cases. For example, going back and forth over the async bridge is somewhat expensive/slow/unpredictable and Fiber won't fix that. I'm thankful and excited that a big talented team at Facebook puts so much into making React and React Native better and better in ways that would be hard for the OSS community or Expo to tackle alone.
\n# Q: If you had to walk your new dev through one of the simplier features that is already implemented in Expo, which feature would you choose? In which folder of the repo would the core JS of this feature be located? - FlamingToast
\nA: When I wanted to ramp up on this, I had someone walk me through adding a screen brightness API because it was pretty small and straightforward and could mostly just follow along from the code in an open source module on Github.
\nDetaching is basically giving you a personal build so that you can write your own native code while still continuing to use RN JS and the Expo SDK/API.
\nIt is true that there is a lot going on in the Expo client code. It's not super easy for people outside the team to make contributions to it. We'd like to make that easier but some of the complexity is just inherent and we're also focused on just adding the things in that people want, ahead of making it easier for outside people to contribute (since its inherently just pretty hard no matter how easy we make it). Detaching and then adding in features to your detached app and then contacting us through our forums about upstreaming the features is probably the smoothest path to contribution right now;
\n# Q: Is there any plans to add video streaming in Expo? I saw in new release Camera component, but we need a way to capture video and send it to another user onlne, like video-chat. Is it possible or will be possible in Expo? - Checkmatez
\nA: Yes! multimedia in general, and esp. Video is a big focus for us. We're rolling out more video and audio stuff over the next few months. We just rolled out the new camera stuff and are excited about the additional stuff we have planned.
\n# Q: I'm a coding newbie and would like to know if I should start with React Native or React? I'm just interested in making some dumb apps for me and my friends to use. Like an app that keeps track of things in a game of Catan and let's us trade resources with each other. I don't know if it's easier to learn to make this as a web app and then port it to an app or the other way around. Thank you for your time. - AustinPowers
\nA: My own view aligns a lot with Nicolas Gallagher's in the talk that he gave at React Rally that I linked to above. I think React Native embodies the cleanest implementation of React and is free from the cruft of the web being around for 20 years that you get when you use React-DOM. The way I build web stuff now is that I code it very much like I would code React Native -- using JS obejcts for style, using flexbox, etc. I think if you learn React DOM or React Native, you'll find its quite easy to learn the other. I would either start with React Native and Expo -- and then you could use react-native-web to make a website if you wanted one. Or start with NextJS from Zeit if you wanted to just make a website. It's nifty. The most important thing about learning is just doing stuff though! If you make a couple projects you'll be good at both in no time.
\n# Q: Are there any plans for the FS module? It seems at the moment it can only work with text. - K
\nA: Yep. The FileSystem module is something we'll keep working on. We just released our first version of it, but will continue to improve it.
\n# Q: might be quite specific topic, but did anyone requested DRM (e.g. Widevine) support for Expo Video players? Exoplayer supports it, and I think some kind of plugin for iOS video also exists. - Asgvard
\nA: I'm not aware of any specific requests for it but I'd have to check on Canny and in our forums to be sure. We're not against supporting it, but probaly would only prioritize it in response to users asking for it. If you need it and we don't support it, ejecting/detaching is probably the right way to go for now.
\n# Q: This has been an interesting year for \"React as a platform\" with talks by leland and mike and react-primitives, haul and also styling libraries supporting the concept but we're not quite there yet. A super broad question, but what do you think needs to happen as a community to be able to truly develop universal apps regardless of platform? - blackxored
\nA: I think someone needs to make a project that basically combines create-react-app and create-react-native-app. If you see my answer above, we'd like to do this soon, but maybe someone else will do it first. All the pieces are there; someone needs to just put them together to make it easy. There is also a bunch of hard detail work that needs to be done to make it work well. For example, when we look at Expo apps, tons of people use features like native maps and video players and camera views, etc. How do those look in a web context? Some can just work if they are polyfilled, some will degrade, some will have to be left out. Someone needs to artfully implement a lot of polyfills. I think the approach Necolas outlines where you use React Native as the canonical starting point since its cleaner, and then use that to target web, is the right way to go.
","frontmatter":{"date":"2017-09-14T00:00:00.000Z","dateGroup":"September 2017","dateString":"Thursday September 14th, 2017","description":"Founder @ Expo.io | Co-Founder Quora.com | More About Charlie\n","location":"Q&A Channel Reactiflux","people":"@ccheever\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Charlie Cheever"}}},{"name":"henry-zhu","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Just how awesome are your other wonderful and amazing fellow maintainers? :stuckouttongue: — loganfsmyth
\nA: lol! I think Logan is one of the best maintainers I could ask for - does everything I don't want to do, and I do things he probably doesn't want to do :smile:
\n# Q: What are your tips for a happy life? — alexanderson1993
\nA: What a deep question! Need to look into what matters - sometimes you'll find it when you go through hardships (they become blessings). Work, open source, worldly things are all good but they can't always satisfy since we put our time/life into it and they disappoint when we put our worth as a person into it.
\n# Q: can't find any sort of lexing/scanning tool in Babel's source.. Do you guys implement it yourself or is there something that I'm missing? — harrymerzin
\nA: Lexing/scanning? I think you mean the parser: it's currently in another repo (not in the monorepo) at https://github.com/Babel/babylon. It's a fork of acorn and we have plugins for each proposal (anything that is stage 0 at tc39).
\n# Q: You've seen a bunch of the JavaScript Infrastructure changes over the last few years from working on JSCS to all of the awesome Babel ecosystem stuff now. What are the biggest needs in the JS Infra ecosystem that aren't being sufficiently met yet? — EliWhite
\nA: Hm not sure about needs - maybe just more consolidation of tools (this doesn't necessarily have to mean making a new tool but just working together as a community with better integrations). It's easy to make tools that do one thing well (and we do a good job of that) but theres the hard work of getting together and coming up with a better story as a whole. I think talking with different communities and getting together and thinking about the ecosystem as a whole helps with this - for Babel it's been great attending TC39 and getting involved more there. I think we have a lot of awesome stuff being created but maybe we need more education (stuff like Kent is doing), what is Babel and how do you write a plugin, how do ASTs work, etc
\n# Q: I love what you are doing with Babel and can't thank enough for that. I always find it really hard to start when I think if contributing to Babeljs. What do you suggest? — reznord
\nA: I think it's hard to start because you don't have any context into how an open source project works, but it's a lot simpler than you think. Most OSS is just by other people that also didn't know how to get involved and just slowly got started - at the talk I gave at JSConf EU I basically explained how I randomly got involved in Babel. I think just need an attitude of wanting to help and you'll slowly get involved - join our (or any OSS) community (slack, twitter, etc) and know that it can be a long term thing (I can say a lot more about this, and will try to write a blog post later)
\n# Q: @henry what opensource project do you currently appreciate most? (excluding any you've contributed to) — gtfargo
\nA: Hmm in terms of OSS projects I haven't contributed to that I like it would probably be ones that aren't in the js community :smile:. I don't really have specifics - I think projects that have a community behind them that encourage new contributors/maintainers are great: hoodie, etc. I also appreciate projects that are much older - in JS land we focus a lot on the new thing but maintainers do the hard work of caring for a project for years.
\n# Q: What motivates you to keep contributing to javascript community? — 4ever
\nA: It's the language I use at work, and it's what got me interested in development (other than flash/actionscript which is gone now :slight_smile:). I love being able to make something in the browser/console without having to download anything. It's why I care about Babeljs.io/repl (I wish we could import any npm package). Being involved in Babel means I get to learn about the language itself, and at this point even participate in the development via TC39. I think I want to be a part of getting more people involved in programming. I want to make Javascript a better place to start/be to do that, and with Babel get more people involved in the programming language itself (using new syntax, contributing feedback, education).
\n# Q: Tabs or spaces? — koops
\nA: Whatever the project set in the repo (I don't want to care).
\n# Q: @henry to a developer who is still developing in javascript and wants to contribute to Babel/other js projects, you've been working on, what path would you recommend. Any books/website.. — Naveen
\nA: I think you can find a project that you are interested in a get involved - it honestly can take a long time but you need to think about why you want to contribute to things kinds of things in the first place. We spend a lot of time telling people to do open source, etc but think about the why and do stuff that is fun! there's a difference between wanting to do open source to get a contribution for your resume or if you want to be a part of the community for the long term. It's interesting to think about a project like a company - I guess the maintainers goal is to have a vision and to get people to want to take part in that vision? I don't really have any specific recommendations - books/classes/podcasts/videos are good for certain people but I didn't really do any of those specifically to get started. Not sure how helpful but it takes time :slight_smile:, and if you like it you'll continue to learn and do more.
\n# Q: How to make your open source project a huge success? — Norbert
\nA: I don't know how to make a project a huge success? Depends on what you think success means :slight_smile: - is it to be the #1 css-in-js library for 1 day, 1 month, this year? To reach 10k stars, 1 million downloads/month, get retweeted a bunch of times? I think the best things to do is to #1 do stuff that you want that is helpful to you, #2 get other people involved as early as possible because you can't do everything #3 be ok that it's not going to be successful and that you'll continue to do it anyway #4 when you feel like you don't care or don't want to do it anymore be ok with that and move on/ask others to help #5 do it for the long run, not for a measurable level of \"success\".
\n# Q: What do you recommend to use, Webpack or Rollup? — koops
\nA: I think the general advice is use webpack for apps/websites and rollup for libraries (we use it in babylon)
\n# Q: Should an open-source project have a code of conduct? If yes, what code of conduct should it have? — koops
\nA: I think a code of conduct is good to explain what kind of behavior is ok in a community (it's not always explicit) - it's so people that aren't comfortable can know what's expected - however in the end its just a document/paper. You need people/maintainers/community to make it real otherwise it's useless
\n# Q: What staged ES features are you most excited about? — Nick
\nA: It's funny since I don't even use that maybe new features myself - you can check the proposals at https://github.com/tc39/proposals, and Babel's version of that which we created is https://github.com/Babel/proposals. Object rest/spread, class props are all cool which a lot of us are using already. A?.b (optional chaining) can be nice (it's in v7 alpha).
\n# Q: In response to Naveen's answer you mentioned podcasts. Do you have any suggestions for that? I always wanted to have some along with me so, I can listen to them when I'm traveling or something. Can you suggest any? — reznord
\nA: Yeah for podcasts: https://changelog.com/rfc is an amazing podcast about open source and the \"human\" side of it (https://twitter.com/mikeal and https://twitter.com/nayafia host it as part of https://twitter.com/changelog) - I would check the one they did about Evan You (Vue) https://changelog.com/rfc/12. I actually recorded one with them which should be posted soon.
\n# Q: what's the biggest issues/troubles the JavaScript community is facing right now? — Norbert
\nA: Not sure I know the issues we face since I don't keep up with all the new stuff that's going on (maybe since I'm busy causing those issues with Babel myself :slight_smile:). I mentioned before about the collaboration aspect which just means that we could spend more time about how to connect tools but it requires a good amount of time/work to figure that out and to think outside the respective projects you work on. Otherwise I think our community could use more help from companies spending dev time to work on open source project they use (of course I speak for Babel since there's a lot of work to be done but never enough people, and that's only talking about maintenance). I see a lot of people burning out or feeling burnt out (and yes it's a personal issue/concern but we should care about our community not just simply say to stop working on it). How do we deal with this underlying issue of depending on volunteer work for critical production systems, even if the end of the burnout could be a few months ahead? If we know we are headed for something bad we should be taking preventative steps!
\n# Q: What particular knowledge did you get from getting involved in free software that makes you a better engineer? — amz3
\nA: I kind of talk about this in https://github.com/open-source/stories/hzoo, but yeah there's a lot of stuff! Of course there is the technical part: maybe it is mostly psychological but you tend to write better software when working on a larger open source project since you know people are \"looking\" (not really) at it and people are going to review it. Maybe it is also a reason why people don't want to get involved in open source because they may be fearful of the criticism people may give. I think I learned to make work-in-progress PRs and just ask for help rather than caring how much the code looked. I learned a lot about the technical things like using git, github, ASTs, etc.
\nI learned a lot more non-technical things (especially as a maintainer) - it's really not about code, and being a better programming via oss was helpful precisely because you are interacting with people all the time: users (that you don't know), maintainers, people from all around the world. Being a person that can better emphasize with others, learns to delegate/let others do amazing work, developing better communication skills makes you a better engineer (blog posts, issues, prs, comments, etc).
\n# Q: carrying off of Norbert's question... What issues/troubles are you currently struggling with as a developer? Any recent accomplishments you'd like to share? — gtfargo
\nA: Yeah plenty of things that I'm struggling with: learning not to take on too much work (I tend to say ok with x,y,z and then maybe realize I'm overworked but much later), to learn what it means to prioritize (this means you need to learn what the point/vision of the task/project is in the first place), and how to convince people to help you :slight_smile:
\nFor example: it was easier to realize that Babel-generator https://github.com/Babel/Babel/pull/5833, https://github.com/Babel/Babel/issues/5139 should remove the quotes option after realizing that the point of it was to output code that would be consumed in the browser via minification and that users shouldn't care about the tabs/space/quotes of Babel output - it means we can remove options and make better performance. If a user cares about the quotes it would be for the source code not the output code of Babel.
\n# Q: Please allow me to reframe the question. What javascript books/videos would you recommend, before getting involved in huge code base like Babel or to say it, in other words, what are your favorite javascript/react/(web development) books/learning resources. (I know you started contributing through doc changes :sweat_smile: , but still, my heart wanted to ask this question.) — Naveen
\nA: Ah ok so https://github.com/Babel/Babel/blob/7.0/CONTRIBUTING.md#contributing, https://github.com/thejameskyle/Babel-handbook, astexplorer.net, eloquent javascript, newly released is \"Practical Modern JavaScript\".
\n# Q: Could you recommend JavaScript as the first programming language (e.g. For your friend's kid)? If not, which one would you choose? — jimkakain
\nA: I would say yes not because it's a good language (we are adding more and Babel isn't helping to keep it simple), but because you can expose them to newer syntax/features later on. Javascript is ubiquitous, easily accessible, has the largest package ecosystem, most jobs/resources/tools, etc. You pick js for the community/people.
\n# Q: Do you have any recommendations for organizing, documenting, and promoting personal open source projects to allow them to scale more easily? — Nick
\nA: https://opensource.guide/ has some tips - you could ping people but trying to make it big isn't always what you want - you'll find that maybe you have 1000 people asking you for things you would never implement yourself, and then you make a plugin system and then you about to care about the plugin ecosystem when you make a major version (cough Babel :smile:). documentation is really important and even though we ask new contributors to do it since it's just markdown maintainers have the actual knowledge to do it - asking new people to check it out and contribute is a good way to know where your project is lacking. One thing you can do is always think about how a bug/issue that is reported could have been fixed by better documentation, removing a feature, or adding a \"feature\" that does something automatically.
\nA good example of this is Babel-preset-env - people complain about having to use es2015,es2016,es2017, etc and now es2018 but this removes the need to do that at all (and the benefit of less config/bugs, less packages, less need to care about package squatting until we switch to npm scoped packages with @Babel).
\n# Q: since no ones asking, what's the sentiment around the office about flash's deprecation :wink: ? — totaldis
\nA: Nick: @totaldis Pure joy? :stuckouttongue:
\nI believe so :slight_smile:
\nAlthough I'm sure most of us will admit that we might of got our start from flash (I did), I remember a friend in grade school making flash animations and being inspired by that even though I didn't do any programming until way later
\n# Q: Babel 7 is coming up, how do we prevent another community backlash like with Babel 6? Are you weighing potential negative response with releases? With so many people dependent on Babel, huge huge amount of hours and money will be spend upgrading. How do you pick buckets of changes to go into the next major? — Norbert
\nA: Great question! Yeah we are painfully aware of the issues related to a major version - one thing we can do is do scheduled releases which we've never done a good job of doing. Another is doing for frequent/smaller major versions. Yeah there's a lot of breaking changes we could do that all add up to making the upgrade experience worse for someone. The plan is to do a beta release soon and use that time to ask all plugins/presets (and anyone willing) to upgrade, compile the issues in the upgrade guide, and then create codemods for things that are simple enough. Then when we do an rc/final release it should be as simple as some tool we create like Babel-upgrade to do it automatically. Of course this is all on the bucketlist and not done yet. In my perfect world we could do a major release, and then we would have our Babel-bot automatically send a PR to a project update with changes (if someone wants to do this :sunglasses:).
\n[5:03 PM] jimkakain: Q: What future web technology/capability you're most excited about?
\nA: [5:04 PM] henry: jimkakain: the binary ast proposal sounds great from my point of view as a tooling author (https://twitter.com/left_pad/status/887431203548254208) although it may take a well to come to fruition. Being able to have the same AST for all our js tools is great, even if the point of the proposal original was for loading/parse times in the browser.
\n# Q: What is your hosting/CDN solution? Would you recommend it to others? — koops
\nA: I just use github pages for my own site since it's simple, and same with the Babeljs site - I hear netifly is nice though.
\n# Q: Why are property initializers are still at stage 2? Any problems with them? — Ruslan Gunawardana
\nA: Haha its actually stage 3 like literally a few minutes ago. The july tc39 meeting is right now. Also by the way if you want to get involved we have the meeting notes posted at https://github.com/Babel/notes and actually started consistently doing them.
\n# Q: Do you have a vision about the future of languages that are compiled to JS? ClojureScript, TypeScript, etc. Which will remain? Do they worth learning now? — Ruslan Gunawardana
\nA: I don't have one myself, other than that we could be doing work in Babel to help integrate with them better - technically all of them can compile to ES3/5 but instead they can compile to whatever Babel supports - even coffeescript 2 does that.
\n# Q: Do you see any other exciting new features, that are part of a popular library/plugin getting into javascript spec as native API? Years ago Audio and Video APIs became real. For example a Router API would be interesting today. Where do you see the point when adding new APIs to javascript makes sense? How does the decision about it happen? — easwee
\nA: This is a really good question, I believe that's basically the thing that a committee like TC39/etc decides if the community has interest. A few I can think of are things like modules/promises. People are asking for something like JSX in the language but all of these things are a hard sell - there is a complexity budget in the language and you have to look at how each feature interacts with every other. Once something is native/in the platform it can never be removed.
\nThis is why tools like Babel are useful because it gives the community an opportunity to use features before they are \"real\" and if we realize it's a bad idea we can \"remove\" them and it won't get stuck as part of the browsers/platform.
\nI'm not sure we can know when it makes sense - I think the idea of stages in tc39 is pretty cool so that you can test the waters
\n# Q: are there going to be any functional programming improvements in ECMAScript 2018++? — Ruslan Gunawardana
\nA: Yeah, bind proposals (a::b), pattern matching, pipeline operator.
\n# Q: If you don't mind a more career related question: What are your favorite things about your work at Adobe and/or specifically on Behance? — Nick
\nA: Lots of good stuff - our team cares about the product but also gives time to do technical debt because it's part of the product. We care about meeting deadlines but not making people have to stay late, skimp on quality/testing, or making those deadlines immovable. There's a balance needed of having the right amount of resources, time, scope. And personally I appreciate our willingness to contribute to open source - whether it's about allowing me to spend time maintaining Babel (going to TC39, managing the project, getting help from other companies, doing RGSoC/GSoC) or my coworker Mike going in and making everything faster (webpack, npm, uglify).
\n# Q: How to get an idea into a stage 0 proposal? — Norbert
\nA: You basically need to ask for someone at tc39 to be a \"champion\" for it - they have to take on the work to move the proposal through the process. For example: pipeline took a while.
\n# Q: What are you thoughts on on chrome/firefox/edge turning on tail call optimization? — Macdja38
\nA: https://github.com/kangax/compat-table/issues/819 don't have anything specifically about it, other than that it was an ES6 feature and didn't go through the staging process (also not easily transpilable).
\n# Q: Are rest/spread operators for objects still being worked on in the spec? —
\nA: It's stage 3 and implemented in some browsers already. However it's not stage 4 yet since it needs 2 implementations, can use https://github.com/Babel/Babel-preset-env
\n# Q: As a lib author, should I ship source (untranspiled) code? — ZeeCaptein
\nA: It's kind of an open question atm but we still need to figure this out. This was an issue for es6 but it's only going to be more of a problem in the future. Ideally we could use Babel-preset-env to be able to target whatever node/browser version. The baseline will change over time (people ship es5 to npm atm, but some use module/es6/es2015 namespace) so we should come up with a standard.
\n# Q: Actually wanted to ask about Babel-preset-env. Can it be currently used in production? When the version 2 is going out? I don't like its current browserlists integration. All the browsers currently should be specified in the Babelrc config (https://github.com/Babel/Babel-preset-env/issues/149). — Ruslan Gunawardana
\nA: Yeah we should land that :stuckouttongue:, been stalled on a lot of things since not sure about implementation, time, etc.
","frontmatter":{"date":"2017-07-27T00:00:00.000Z","dateGroup":"July 2017","dateString":"Thursday July 27th, 2017","description":"Engineer at Adobe (Behance Team) · Babel Maintainer\n","location":"Q&A Channel Reactiflux","people":"@left_pad\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Henry Zhu"}}},{"name":"christoph-nakazawa","relativeDirectory":"","childMarkdownRemark":{"html":"Christoph Nakazawa: Just to introduce myself, I'm Christoph and I manage the JavaScript Tools team at Facebook London. Currently we work on Yarn, Jest and Metro Bundler which provides the development server and bundling infrastructure for React Native.
\nAlso, @gaearon sits across from me. We stare at each other a lot and joke about React and Jest and how Jest is eventually going to have more downloads one day.
\n![\""Photo](\"https://i.imgur.com/u1FBL2z.jpg\")
# Q: Any chance that React Web and React Native will be merged to one project?
\nA: Whether React Native and React will eventually be merged, I don't think that makes sense. There is react and react-dom and react-native. The latter depend on the former. It might make more sense for people to consider react something like react-component or react-core. It allows you to define components and render them to a pluggable target (dom, native, vr, your programmable toilet seat, …).
\nHowever, if you think about react-primitives by @lelandrichardson or react-native-web by necolas, I think there are exciting times ahead to bring the two stacks, native and web, closer together. I don't see this as projects merging but rather about converging stacks and sharing large parts of front-end codebases across platforms. If we can standardize on primitives, like Text, View, ListViews etc., we can share more code. I guess one way to see this is that if you can build an iOS and an android app with react-native, why not also enable people to add a web target? Referring back to Leland, he was hinting at that in his talk at react-europe, which I recommend you all to watch: https://www.youtube.com/watch?v=hNwQPJy-XZY – to bring this back to how JS Tools at FB London is concerned with this, we are definitely interested in supporting this use-case from the Metro Bundler side of things :)
\n# Q: With NPM 5 bringing improved download speeds and a better lockfile, what would you say is the main reason for choosing one over the other?
\nA: I think it's awesome to see so many improvements in the npm package manager. I don't want to be prescriptive about why people should use one tool over the other. Generally, I think it's way more successful when people make these decisions themselves by weighting the trade-offs for their own (business) use-case themselves.
\nAs much as Yarn is concerned, the team around @bestander, @arcanis, @byk and are working towards Yarn 1.0 and the project's page has become my new homepage for the next couple of weeks: https://github.com/yarnpkg/yarn/projects/3 – if you'd like to contribute, @arcanis just posted an article explaining how to build a package manager yesterday: https://yarnpkg.com/blog/2017/07/11/lets-dev-a-package-manager/
\nAt Facebook we analyze how certain projects and teams do every six months, so now is a good time to look back at Yarn: in the last six months we focused on reliability and performance and have made significant improvements in both areas. For Yarn 1.0 specifically, we want to fix all blockers that prevent people from running yarn install properly. Internally at Facebook, we are using a version of yarn check (which we are hoping to open source) that runs in about 100ms with watchman. This means that any time somebody runs a command using JS, we verify that the installed node_modules folder is consistent. This means that no engineer ever runs into a state where something doesn't work because they forgot to run an install. This is awesome. One of my highlights was also the relationship we built with the npm cli team. Sebastian McKenzie spent a lot of time explaining to them why Yarn matters to us and in the end the Kat from the npm cli team sent us a PR that significantly improved performance of Yarn: https://github.com/yarnpkg/yarn/pull/3539
\nFinally, to explain why we use Yarn at Facebook: it works incredibly well for our use-case. As I said above, we run Yarn for literally any JS command, like when people use Metro Bundler for React Native, when they use Jest or any other tool written in JS. Second, we use the offline mirror feature: we check in every single tgz file into our giant monorepo and can do full offline installs (see https://yarnpkg.com/blog/2016/11/24/offline-mirror/ ). There are a bunch of interesting ways in which we use Yarn and previously we had to write wrapper scripts around npm, which all broke down in different ways. Konstantin actually did a fantastic talk about why we built and why we are using Yarn at f8: https://developers.facebook.com/videos/f8-2017/building-high-quality-javascript-tools/ (skip ahead the first 23 minutes if you don't want to listen to me ;) ).
\n# Q: What are the biggest improvements in JS tooling you think the ecosystem still needs? What tools do you dream about existing?
\nA: I think one thing the ecosystem really needs is empathy. There is so much negativity and people believe there is tons of competition going on, when in reality we are just building tools to serve our own use-cases. The philosophy around open source at Facebook, at least on the team I work with, is to build awesome things that work well for Facebook engineers. If they happen to work well for the open source community, then that's great, and we'll open source as much as we can, but we don't necessarily go out of our way to support external use-cases.
\nThis is why I think it's so important to build healthy communities around our open source projects: not only can the community extend the tools we build and make them work for their own use-cases, but also we at Facebook benefit from it. It's very symbiotic and I'm really happy to see how this is going: look at Yarn ( https://github.com/yarnpkg/yarn/pulse ) and Jest ( https://github.com/facebook/jest/graphs/contributors ) and how many contributions they are receiving every month. It's really amazing to see contributions, especially on Yarn, which are described in-depth, well tested and actually help a large amount of users.
\nSo this was more of a meta-answer of what's bad and what is necessary for successful open source projects. In terms of what I'd like to see from a tooling and code perspective, and I said this a couple of months ago, is: consolidation. It's really great to see many people rally behind a project, like Jest, which many people now use for testing, or webpack, which has become the default bundler for pretty much everything web related. That's awesome, but at the same time we do need more competition. Not competition as in Twitter flame-wars, that's unproductive, but more in terms of pushing each other's project forward. There are a bunch of awesome things happening around Ava, another test runner, with projects like concordanceJS ( https://github.com/concordancejs/concordance ) that does diffing on an object level rather than a string level, which is both awesome for assertions in Jest and for printing differences when tests fail. However, I believe it's not enough. At first, you consolidate infrastructure, then you need as many ideas around it as possible to make the whole ecosystem around one tool progress. I think one area where this has worked really well is actually React, or the component model, for that matter. There are now many offsprings, like Preact, Inferno and many frameworks that are inspired by React's component model. There is a lot of research going on in all these projects that also come back to benefit React. We need this for every tool to really push the ecosystem forward.
\n# Q: Why are we mocking almost everything in Jest, is there any way or pattern to follow, In react-native I often see this problem?
\nA: I'm sorry, I don't fully understand the question there. With Jest, mocking is entirely up to you: at what layer and what module boundaries you want to mock things, I recommend you to decide on your own based on your intuition. If you spend enough time writing tests and mocking modules, you'll eventually get really good at it and realize what kind of tests are effective for you and your organization.
\n# Q: In environment of react-native, many modules (npm) should be mocking so that it can work, is there any pattern to follow with the subject of mock modules?
\nA: I believe I answered that question. As said, it's mostly up to you and highly dependent on the project you work on and what modules you pull in. There is no generic answer on how much mocking you should or shouldn't do :)
\n# Q: I am trying to follow microservices approach for individuals modules: Suppose I have basic skeleton of app which includes header, footer & content area. And in content area multiple different modules could take place irrespective on what tech stack it is built upon.
\nIs there any way to achieve the same?
\nA: I'm not sure! I actually don't know much about microservices and what architecture is best suited for them. From my own experience, I have mostly worked in gigantic monorepos that push everything from master often. That way you have to make sure everything is always on the latest version, which is also awesome: no more versioned dependencies to deal with :) On a more technical level, if you want to build a microservices architecture with different tech stacks, then there isn't anything that should stop you, as long as you define a protocol between them so they can talk to each other (like, with JSON or GraphQL).
\n# Q: We started using Haul instead of Metro in my team. We're using Typescript, and Metro doesn't appear to support pluggable loaders. Can we expect that kind of support in the future? What timeframe?
\nA: Metro Bundler should absolutely support your use-case. In fact, my friend Orta contributed this change to Metro Bundler. He is somehow hiding from this Q&A for some reason but I recommend you to ping him here: https://twitter.com/orta
\nMetro Bundler actually supports customization, although in a non-obvious way: you can specify any transformer you want and it will compile any code (css, TypeScript, JS, etc.). We should probably document this better :)
\n# Q: One of the sore points I’ve had with React Native is managing nested navigation structures and deep linking across different navigation stacks. I’ve been using https://reactnavigation.org/docs but will run into scenarios where I need to think about the structure in order to pass my props around appropriately. Is this something you’ve experimented with and does it even relate to JS bundling? Do you have any tips or insight into how nested navigation plays into performance?
\nA: Navigation is certainly an interesting problem that I didn't have enough time to investigate. My day to day job now is more about people than code, so I'm a little bit behind. However, I do know that it's something that's on top of people's mind and that there is generally no accepted way to do it, which just leads me to believe that it's very very hard and the right solution still has to be found – I encourage you to keep investigating ;)
\nFrom a bundling perspective, this is obviously interesting. On the web, we ship a partial app down and when you go to a new route, we download the rest to render that route. On mobile, we ship the entire JavaScript bundle with the app, to the app store. When you navigate to a new route, you already have all the code and you can render it immediately. However, you could also do bundle splitting on native and dynamically download code for certain routes when navigating to them (assuming that's allowed on the platform). If not, you can ship many bundles with your app and defer loading modules for other routes until you navigate to them. It depends on what you are optimizing for, it's all about trade-offs.
\n# Q: A month after open-sourcing Metro bundler, what are the benefits, pitfalls and plans for future?
\nA: That's certainly interesting, thanks for asking. I really love this project and splitting it out of react-native was more about giving the project an identify besides react-native than about anything else. It was hard for our team to talk about what we do: \"I work on react-native.. packager\" is long and confusing to people. We also couldn't keep up with pull requests or issues on the react-native repo: it's just such a gigantic repo and only a small part owned by the JS Tools team in London that we simply couldn't keep up with community feedback. We'd really like to support the React Native community better and now we have a dedicated place to do so. If you think Metro Bundler could be better, please send us a PR and we'll review it.
\nRegarding it's future, we are currently rolling out a new integration with Buck and Metro Bundler at Facebook that hasn't been open sourced yet, which should help with build speed for production bundles. After that we have a bunch of exciting ideas, like how do we make reload speed scale much better when a single file changes on a large codebase. Metro Bundler is all about building a highly-performant and scalable bundler. Once our plans are more concrete, I'm happy to share more with you on the metro-bundler repo.
\n# Q: Can we build a complex feed with FlatList like Instagram? Any recommendations or example? I need to build a feed that have many GIFs and images and videos later...
\nA: I know FlatList is pretty new still and I haven't gotten a chance to use them, but I do believe it is going to replace ListView. I encourage you to try building a feed, see how it goes, and report back to the react-native team with your success story or the blockers on why you couldn't make it work :)
\n# Q: React-VR's - just to know when it will be more updated. It seems like its been forgotten
\nA: I haven't been up-to-date on the project, but last I heard the team is working on it and adopting it within Oculus. It's a super exciting project!
\n# Q: How much freedom to chose projects to work on do you guys have at FB? Are you guys tied to specific project or is jumping to another one an option?
\nA: Great question! We actually have a lot of freedom at Facebook. Engineers can essentially work on whatever they want, granted that it has potential to impact the business. If an engineer comes up with a sound idea, chances are they'll be able to work on it for a while until it fails or succeeds. The upside is that people are much more motivated to deliver if they pursue their own ideas, which usually means better results. Now, of course there are some limits: if you repeatedly go after things that fail, that's probably not great. And teams always have a mission, so doing work on certain projects should probably stay within that team mission. That being said, if you are successful at Facebook, it's pretty easy to switch teams. We don't do interviews when you switch from one team to another and we have a program called \"hackamonths\" that engineers are actively encouraged to participate in: basically you can join another team for a month, work on a project that excites you and then at the end you can make a decision whether you want to join the new team or stick with your old team. This is a great way to make a career change or get some valuable experience on what it's like to work on another team :)
\n# Q: I'm curious, for using React Native within an existing native mobile project, what approaches do you use to let the native and JS teams continue to work in parallel and still easily integrate their code / build / test / etc. Are there tools you like to use to do that? Are there patterns you follow that you have found useful?
\nA: That question is hard for me to answer, because I don't know what the teams work on. Quip recently published a blog post about how they don't have platform specific teams, which I think works really well with adopting react-native, and incidentally is also the model for teams we have at Facebook: https://quip.com/blog/quip-engineering-team-structure
\nThe idea is that you have teams structured around products like news feed, groups and pages rather than teams structured around platforms: web, android and ios. This makes it so that people who are experts on one product go and implement the same feature on every platform. It has worked really well for us at Facebook over the years, and also works well with adopting React Native: web engineers can freely jump between web and native platforms and implement the same products and features across multiple stacks.
\nA: I would like to ask, earlier this year there was a question on the github repository for Jest about allowing customized names for the mocks folder. You then responded saying that for a purely subjective reason you were not going to work on that. Have your opinions changed since then?
\n# Q: Hah, very pointed question. I do recall that conversation and I haven't changed my mind on it. If the community can send a fully tested PR that just works, I'm happy to merge it, but personally there is no reason for me to invest time into making this customizable. I know people feel really strongly about their folder structure, and I'm trying to be empathetic, but at the end of the day it's not the reason why your business fails or succeeds. I'm generally not interested in bikeshedding over this stuff. I also believe in the value in adopting the same standards across projects. For example with Jest's Multi Project Runner ( http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html ) you can run one instance of Jest across multiple projects. If you merge them all into a single repo and they have wildly different configurations, that will work, but it will be much more confusing in the end. Similarly, when you know Jest and you join a company and they use a completely different set of configuration, it'll take time to get used to it. That's all time spent doing basically nothing.
\n# Q: Is it an eventual goal for react-test-renderer to provide functionality similiar to enzyme?
\nA: react-test-render should absolutely have more features and we have an experimental version of it that we use at Facebook, but I cannot comment on the plans of the React team and don't want to make assumptions about their roadmap. However, we do need a way to control React Native components in tests, whether it is for snapshot tests or not. I recommend reaching out to Alex ( https://twitter.com/alex_frantic?lang=en ) and update you on the state of the react-test-renderer. He's been playing around with an extended version for a while.
\n# Q: Earlier you had said that the tools you've built were to serve your own use cases, but a ton of these tools have been adopted by the community. So, now you have bugs, feature requests, etc. flowing in from the outside and you have to spend time on these. Do you feel like this is going to reach critical mass as the number of FB's open source tools grows? Do you have a strategy for managing this? A good example is Relay, as Relay is a beast and hasn't gotten big traction yet.
\nA: Oh yeah, man, that's absolutely a problem. Especially with people that feel entitled that the open source project you are giving away for free has to be maintained day and night and that you are responsible for fixing issues they run into, not them.
\nFor Jest, we've been running the project more strict recently: I tend to say \"no\" more often and shut people down for PRs or feature requests that shouldn't be part of the project. This is often tough and it feels as if the lines are drawn arbitrarily. For projects like Yarn that are super active, we have started to do \"bug triage\" sessions, which worked really well to reduce the number of issues.
\nGenerally though, even if there is a large number of issues, there is nothing that forces us as maintainers to look at them and quite often we just don't have time to look at everything, even if we want to. I wish there was a way to split GitHub's issue tracker into an approved list of issues vs. a list of issues that come in. Finally, what works the best, is to find ways to align incentives between the business needs and the open source needs. For example, if you need to build a specific API then it makes sense to skim over issues to see how many people could benefit from it and let that influence your design. Sometimes you can solve many use-cases with one very smart technical decision and it requires a lot of creativity to find those.
\n# Q: How fun is working at Facebook? Is it work-hard-play-hard or is it more laid back?
\nA: Oh man, Facebook is a ton of fun. I started an internship here more than six years ago and never left. It's pretty crazy sometimes to think about how long that's been – back then Facebook didn't really have an open source program and our JavaScript stack was very different in the times before React. I remember back then, in my first week, I realized that the unit test framework wasn't great so as an intern I ended up rewriting it. It seems quite logical that through Relay and codemods I eventually landed back on JavaScript testing and now to work on JavaScript tools.
\nIn terms of whether it's tough or laid back: that's entirely up to you. There are all kinds of people at Facebook and generally the only pressure you'll feel is the one you put on yourself. For me personally, that means I'm constantly under pressure because I want to make sure everybody around me is happy :) Especially as an engineering manager, helping people grow is a ton of hard work but is also really rewarding when it works out. To me, nothing is more exciting than that.
\n# Q: Fiber is almost ready (http://isfiberreadyyet.com/), only 4 warnings left to fix. Seems, it's almost ready. When it will be fully finished?
\nA: To answer when Fiber is released, and to tie it back into an answer I gave earlier, it's probably sometime between March 13 2019 and September 18 2037. I don't know anything more than that.
\n# Q: How you are building libraries in FB to be common between different projects?
\nA: At Facebook we have a giganatic monorepo with all the code in it. Everything is always on master. We also don't have strict ownership of components/frameworks/library: anybody can make any change to any code, required the code is reviewed by another employee at Facebook. This leads to code sharing happening naturally!
\nWe also use our own custom module resolution system in JavaScript: instead of relative paths, every single file is part of a global namespace. I can pretty easily require('UFI') (what we call \"Universal Feedback Interface\", the comment system on Facebook) and require('AdsPowerEditor') (what we call our ads platform) and hook the two up together on a new site on facebook.com. You can assume how tightly connected all of our JavaScript modules are but generally results in less duplicated code and more sharing :)
\n# Q: You take a mono repo approach for the facebook app. given the choice, would you design it like that again? do you think it has an effect on how effectively you can onboard new developers?
\nA: Oh, great question! I think if I were to leave Facebook and start over, it's probably the approach I would take. I even chose this for Jest: it now consists of about 30 packages (see https://github.com/facebook/jest ). As far as onboarding is concerned, if you have effective tools to navigate the codebase (like.. a fast version of grep), it's generally much easier to find what you are looking for in a monorepo rather than cloning 30 distinct repos with different tech stacks. Also, with monorepos you end up setting everything up only once rather than for every project. For example, Jest used to be really hard to set up. It sucked and we had no idea about it because at Facebook nobody ever has to go in and set up a tool from scratch. Thankfully we realized this and made Jest a zero-configuration platform. This was a totally shameless plug for Jest and I don't feel bad about it. Next question!
\n# Q: I am working at a local startup and they are doing okay now! Although they are doing okay, I don't think they can afford to have a Senior developer. The problem is that our code right is not being TDD'd BDD'd, reviewed, it's inconsistent and I don't know how this is going to effect me. I mean, I am only 20, with under a year of experience, but sometimes it's like the blind leading the blind. How important is it to have a senior mentor/developer on a team?
\nWhat would you do in my case? Keep programming to the best of my abilities get Stackover/Reactiflux to help until they can afford a senior OR...?
\nA: You are working at a startup so I'm hoping you don't have a lot of structure in your organization. I would recommend you not to focus so much on who is senior and who isn't, but rather on what kind of change you'd like to affect in the startup itself to make everybody more efficient. Keep pushing on the things you believe in, but listen to others and let them convince you when you aren't right. One thing I've heard that many people do is to frequently (weekly?) get together and discuss certain topics in a team setting and make a decision on how to move forward. How about scheduling a meeting and discussing best practices around testing? This will work best if you can point out a number of preventable issues that affected your users, for example. In any way, don't let age hold you back from trying to change the world.
\n# Q: How do you stay on top of your game? What resources or learning techniquest work for you best, and you'd recommend?
\nA: Oh, wow, it's certainly hard to stay up to date. For one, I do a lot of interviewing for Facebook, which actually gives me quite a broad overview of the world and companies out there, so that works well. Technically, there are a number of things: I try to be active in code reviews (probably a bit too active if you ask the team I work with ;) ) so I have enough technical context when I discuss things with the team and other teams. Personally, I've experienced nothing worse than a manager that cannot discuss things on a technical level, so I'm worried I'll end up like that one day, which pushes me even more to stay up to date.
\nRecently I took a look at CSS Grid and was quite amazed at how far CSS has come. I spent days of my life trying to position things perfectly about 10 years ago and now these new standards exist and we can build on top of those. So yeah, I try to stay up to date on what happens in the world around me with new standards, discussions and blog posts.
\nRelated to coding, I try to write code when I get free time. For example, Jest's multi project runner (MPR) was something @aaron.abramov and I had discussed for a year and when Jest was finally in the right place, the perfect architecture for that solution just hit me when I had a stretch of five hours of time in a remote office while I was traveling. I spent those five hours coding intensively and had the basic structure of the MPR running. So yeah, whenever I have time, I try to stay up to date with the Java script. :P
\n# Q: What are some things you wished someone told you when you came on as an Engineering Manager?
\nA: What do I wish somebody told me when switching to engineering manager? Oh man, so much! I was quite naive to be honest, and thought this job is super easy, probably because some of my previous managers made it look so easy. However, it turned out to be harder than I ever imagined. There is so much shit to deal with every day that sometimes it feels like you are drowning.
\nI think one of the best advice came from my current manager, Adam Wolff: after a couple of months of me being an EM, I was still doubting myself a lot. He had a pretty clear conversation with me in which he told me to be more confident. I went on a vacation for a couple of weeks and when I came back I just started to fake more confidence, which really helped me settle into this role.
\nFinally, I think one thing that took me a long time to realize is that engineering management is a completely different job compared to engineering, which requires a ton of new skills. It's not just engineering plus a few other things, it's really completely different. It feels a lot like when I first came into Facebook as a junior engineer, not knowing anything. So, regardless of how much you know as an engineer, and while you can certainly draw from that experience, switching to engineering management definitely forced me to reevaluate my assumptions on a daily basis. It's a great experience though, and I'm lucky to work with the team I work with every day :)
\n# Q: Pick a css-in-js solution - GO!
\nA: As much as css-in-js is concerned, I recommend to just listen to Sunil Pai. I think he's seen the truth.
","frontmatter":{"date":"2017-07-13T00:00:00.000Z","dateGroup":"July 2017","dateString":"Thursday July 13th, 2017","description":"Engineer at Facebook London · Jest · Yarn · RNP\n","location":"Q&A Channel Reactiflux","people":"@cpojer\n","recording":null,"time":"10am-11:30am PDT","title":"Christoph Nakazawa"}}},{"name":"leland-richardson","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What are you (and should we be) most excited about in React Native?
\nA: That's a good question. RN has a lot of value in different ways. CodePush, sharing code across platform, fast iteration cycles etc. I'm really excited about the value that it's already bringing even without those things. Long term I'm pretty interested in sharing code across platforms (see my react europe talk for more on this) and how that could really change front-end development.
\n# Q: Where do you begin development from?
\nA: I began writing code in middle school / high school. I got into it mainly because of gaming, but my 2nd job was also at a machine shop, and I was able to use it back then too and started writing different line-of-business apps for them as well, which was the first time I was able to make money programming. I viewed it mostly as a useful hobby until around college. I didn't get into web development until after college though.
\n# Q: I would like to know about the acceptance level of react-native at airbnb among native developers and how the react-native is codebase growing in airbnb app :)
\nA: I would kind of categorize acceptance at airbnb as \"lukewarm\". I think this is sometimes for very valid reasons, and other times less valid \"FUD\" type reasons. Some native engineers are super excited about it, and others not at all. Overall I think we still have a lot of work ahead of us to prove that RN can make high quality experiences, but I'm pretty confident that we will get there.
\n# Q: For someone that has to go through a similar RN evaluation process that you went through, in a company with strong native teams with different repos. Which would be the best advice that you could give?
\nA: My advice would be to empathize. Most native engineers just want what is best for the company, and have valid concerns about what RN could mean for app quality and even dev experience quality (lack of types, etc.). Do your best to understand their concerns and show them the value of RN in light of those concerns. Also make sure people are operating on facts and not feelings. Educate. Measure. I think I've done a decent job of this at Airbnb, but could always be doing better.
\n# Q: Do you know what the status is of the native-navigation integration with react-navigation?
\nA: For integration with react-navigation specifically, I don't have too much context. I know that Eric Vicenti was working on this but ran into a couple of issues with tabs IIRC. I'm sure he'd be happy to tell you more if you asked him. I'm also happy to do what I can to make it easier if there are reasonable API changes to make.
\n# Q: For you, what is the best way to test unitarily. Use jest + enzyme or use jest alone?
\nA: I would say use both. I love jest - it's CLI is way better than any other test runner out there. Enzyme makes testing react components IMO a lot easier and more isolated, but is not without its quirks. I'm working on an enzyme rewrite which will have a new top level API that I believe will solve a lot of the areas that enzyme doesn't do a great job at currently.
\n# Q: I am a react web developer who is starting to look into RN, so excuse my inexperience -- what is the best way to reuse my components between web and RN? Do you think a solution like react-web-native (https://github.com/necolas/react-native-web) is viable or do you anticipate we will always develop separate versions for web and mobile?
\nA: If you haven't seen my react europe talk you should check it out - it's on this topic. I think RNW is a great implementation. I think sharing code across platforms is possible right now but the ecosystem is still super young, so you will be swimming against the current for a while if you go this route. But that doesn't mean it's not worth it! I'm very interested in working on these types of problems but haven't been able to do anything production-scale just yet. Hopefully soon. I think concepts that RN has pioneered, namely platform file extensions, need to be popularized and standardized for this to really take off.
\n# Q: Do you think the lukewarm response might be because of some very neccessary modules missing from the core RN library like camera, file systems and other system access APIs ?
\nA: Not really. In fact, I wish that RN core had many fewer native modules like this. We will never build them all - so the important part is to make making things like native modules as easy as possible. I think the \"lukewarm\" reception is mostly about performance/quality/stability and organizational realities such as people working with technologies that they're not used to, and increasing the amount of context switching that is necessary.
\n# Q: Why does Airbnb use a lot of !important in their styles?
\nA: Good question. The use of !important is from our usage of aphrodite (a css-in-js library) which we are using in a mode that deopts into !important CSS flags due to our need to be able to use it on a page that also has legacy CSS files that aphrodite doesn't know about, and minimizes the conflicts between the two. Hopefully soon we will be able to remove the CSS files so that we can turn off this mode.
\n# Q: Besides the legacy CSS, is Aphrodite used across the organization or do you use other CSS-in-JS too?
\nA: On web we only use aphrodite for a css-in-js solution, and we are encouraging people to write all new code using it. As we experiment with react primitives / RNW, we may re-evaluate usage, but that would be a long ways off.
\n# Q: What make React Native better than other mobile app development platforms? what is your advice for a new developer for learning React Native, what can I focus on? any reasouces that you can share with us. Thanks
\nA: One of the big things that I think makes RN compelling is just \"react\" itself. I find it to be a very nice way to build and maintain complex UIs. Other benefits of course include things like a fast iteration cycle through things like HMR and live reload, and the ability to write cross platform apps (ios + android at least).
\nFor resources, I am not sure I will be able to spit out a great list in this Q&A, but I think there's a lot out there. For getting used to the platform, check out reactnativeexpress.com and probably some videos on egghead and stuff. For more advanced stuff, I would recommend checking out some conference talks from some of the big contributors, as well as reading through and understanding the source code and familiarizing yourself with the architecture.
\n# Q: RN + graphql (apollo) with or without redux?
\nA: I don't think there's any one-size-fits-all recommendation here. Use what you feel comfortable with. I'm hoping that in the medium to long term all of our \"remote\" state management is done entirely through apollo. Long term I'm interested in building APIs (maybe on top of redux, maybe not) that are built for local state management with a graphql-based interface, so that all state management is thought of in terms of graphql queries & mutations. I haven't gotten very far with that though, so it's still conceptual at this point.
\n# Q: Not sure if you're the right person to ask - how do you feel about react-navigation? Its pace of development is like 1 commit per week, which isn't exactly what I was hoping for. How do you handle navigation in Airbnb?
\nA: I personally haven't used react-navigation for any projects, so don't know how much I can say here. But the maintainers of it are great people and if it's not doing something that you want it to be able to do, I would encourage you to engage and maybe try to help contribute. Help elevate the community. Navigation is still a nightmare for react native -- we need all the help we can get :)
\n# Q: What's the best way to handle global spinners? For example many events can trigger spinner to load, but when it needs to be stopped ? Should I create something like global reducer or middleware can help ?
\nA: I'm not sure I have enough context to answer this question. without knowing more, I would say that a \"global\" spinner perhaps shouldn't exist, and \"loading states\" should be thought of more locally. In mobile apps you want to have as much of the screen \"loaded\" as possible to improve perceived performance at any given time. Having global loading states can prematurely deopt a screen to being useless, when there might be a decent amount of information you could present the user (if even just a \"shell\" UI) ahead of time. Most of the time I think of these states being a pure function of the information that's available, and so not held in redux at all... feel free to ping me if that's not helpful advice :)
\n# Q: Do you use plain JS or Flow? Any plans on looking into Reason or any other compile-to-js lenguajes?
\nA: We currently use plain JS for almost all JS development at airbnb. We have done some investigation of flow very recently for our RN code base, but have since decided that we will probably hold off for a while and reevaluate down the line. Flow and typescript are very compelling to me, but I think in order to introduce them into a code base you have to be very careful to not cause more friction than its worth. When we evaluated flow, we would run into a lot of errors that were really obscure and hard to understand, and didn't want to put the average contributor in that position. Your mileage may vary, and I know lots of people are having great experiences with both flow and typescript. That was just our experience.
\n# Q: ESLint is an amazing tool. The work Airbnb has done at standarding rule configuration is also amazing. Can you touch on the following:
\na) I often find myself curious as to why Airbnb has a specific rule. There is mild documentation in the readme/docs; however, it's usually very \"This is good ... this is bad\". Any thoughts on adding more expanding rational for why certain defaults were chosen.\nb) Thoughts on Prettier?
\nA: For a), I'm not the best person to ask. Jordan Harband is usually pretty responsive about this kind of stuff, and if something isn't well explained in the docs, we should add it. It's important to understand also that sometimes decisions are arbitrary, and the point is to have consistency, not that one is better than the other.
\nFor b), I love prettier, although I haven't been able to convince the rest of Airbnb to adopt it. Perhaps some day. I long for the day of not having to think about code style.
\n# Q: What is Airbnb going to do with Deco IDE, is it going to be the de facto IDE for RN like other Airbnb offerings (RN maps, native navigation)
\nA: We don't currently have any plans to do anything with the Deco IDE. The deco team here is working on really interesting stuff to improve our design and engineering processes. Some of that might be open source at some point (like react-sketch) but too early to tell.
\n# Q: How do you maintain high UI standards in react native? For example, it is very easy to implement a simple photo viewer app, but things like shared element transition makes mobile experience much better. It feels that the RN UI is moving towards web-based standards, and less attention is spent on mobile UI specifics.
\nA: Great question. This is the kind of stuff that keeps me up at night TBH. I think a lot of times RN is used by web developers for hacky prototypy sort of things, which I think builds a negative selection bias against the kind of experiences that RN can produce. I really wish more of the examples out there paid a bit more attention to aesthetics to limit this perception. At Airbnb, it's a lot of work to make sure everything meets a minimum quality bar. There are also places where I don't think we are doing as well as we could be doing. Ultimately, it's just a lot of work, but having a comprehensive design system makes it a lot easier, and I think is a huge part of why we've been able to do as well as we have.
\n# Q: Which part/parts of the RN is being focused most by the core RN team to improve or seen as a challenge to take RN to next level?
\nA: Hmm. Let's see. I know that FB is very very focused on improving RN initialization times, which I think is pretty crucial (and important in many ways for web as well). In addition, two fundamental problems I think RN has is 1) view recycling and 2) gesture recognition systems. I think both areas fall short compared to both iOS and Android, and for some apps can be super important. In addition to that, I know that FB is going to be working on making RN core more modular and have a smaller footprint (by breaking non core things out of it) which I also think is very important long term for RN, as it will make core more stable and easier to maintain.
\n# Q: You earlier said that RN navigation is a mess. I think native-navigation is very promising start to solve this mess, but not lately pushed forward. What's the future of native-navigation? And if it needs much help from community, what would be the concrete next implementation items we should start doing?
\nA: I do think that long term native-navigation has the potential to become \"the\" navigation option. (I'm biased, obviously). I've done a really poor job pushing it forward, which is probably an indication that we released it prematurely. In hindsight, getting the OSS version integrated into the airbnb app first would have been better, but it was a tough call. We have plans to work on this in the 2nd half of this year, which I'm really excited about. Ultimately, I have to prioritize the time that we work on RN infra to maximize impact for RN, and there have been a hand full of \"fires\" so to speak lately, that put integrating native navigation into the airbnb app lower on the list. I'm working on a better list of next steps for NN so that the community can help out. I really appreciate how patient everyone has been on this topic so far :)
\n# Q: Just a lifestyle question. I like programming a lot, I like being a part of these communities but I don't like to work for more than 8 hours. I don't like to make it homework. After work... I wanna workout, I wanna learn how other things and I wanna go and drive Mustangs... But man, ever since I got a job, I haven't been as active in the programming community as much and not as yearning to learn new tools. Have you felt this way before? Or am I just a lazy fart and need to grind more?
\nA: I think to each their own. enjoy life - you only get one of them as far as I can tell. Don't work more than you want to and keep yourself grounded. A lot of the work I do because I enjoy it. Many say I'm a workaholic (which I am I guess), but I would do a lot of the things I do w.r.t. the open source / programming even if I wasn't paid to do them because I enjoy doing it. If you don't, don't do it!
\n# Q: How does one elevate oneself from a software sage to a React Native legend?
\nA: lol. I don't really want to touch this question. I think we have a tendency to put people \"on a pedestal\" so to speak. One of the things I've noticed professionally is just that the people that do these amazing things are just normal people, and often it's just because they were fearless enough to try. Next time there is a problem that seems really hard or ridiculous, consider just saying \"but yeah, why not try?\". I think few things in this world are complex up close, but only seem so from afar.
\n# Q: Which tools/tech/libs etc etc do you use to complement RN development at Airbnb, that makes the experience smooth.
\nA: I don't think there is a ton of custom stuff that we use that I can think of. I mean there's a number of native modules and stuff that helps us integrate into the app infra we already had set up, but in addition to that, there's not that much. I've built a couple of things based on static analysis that provide some really helpful infra for us (for instance we use static analysis for deep links, some prefetching / performance optimizations, and some bundle optimizations), and in general I think static analysis is a powerful tool. We are also building some custom stuff that will work on top of graphql. I've built some \"devtool\" type scripts that do some view hierarchy analysis and try to make some perf related recommendations / warnings to engineers. If you have more specific questions about the stack I might be able to answer better :)
\nAlso, we just spent some time refining import-js (a library for editor plugins) that I think is really exciting and improves some DX.
\n# Q: What message solution do you use? Pusher or something?
\nA: We have an internally built messaging framework that has gone under a lot of different changes and ownership. There is now a separate dedicated messaging team at airbnb, so I think we will start to see some big improvements there on the airbnb platform.
\n# Q: Could you suggest any message solution to use?
\nA: I don't know how much insight I have here. I know that Layer is a very popular choice for iOS. For RN, check out \"gifted chat\". Not sure if it's production ready or not, but might be a good starting point. I started a JS-based messaging framework here internally that I'm not super involved with anymore, but some day we might open source that. I dunno, sorry! :)
\n# Q: How viable do you think react native will be in the future, do you think it's just a little hype thing that will die in a few years, as apps get more complex will it stand the test of time?
\nA: I think RN will only continue to get more viable, not less. But that doesn't mean that something new won't come that matches or beats all of the value props of RN, rendering it obsolete. Only time will tell. I think RN will be popular in ~2 years, but ~5 years out I think it could be anything.
\n# Q: What are your views about reactVR? Would it be as sucessfull as its other React mates?
\nA: I don't really know, to be honest. I have heard some very positive things said about React VR from some game developers and such who are kind of blown away by the development experience, but doubt it is going to be good enough for all VR development. React continues to be a very interesting programming model, and going beyond thinking of react as married to HTML is really interesting to me. One great example of this is the compositional power of things like shaders w/ gl-react and gl-react-native. Super interesting and hardly explored territory!
\n# Q: What are your best habits (/tools) to be such an productive programmer?!
\nA: Hmm. I constantly feel like a complete n00b in productivity compared to other people. For instance I know lots of people that do amazing things with vim and tmux etc and I feel like I missed this train completely and it's too late for me to go learn :P For productivity personally, I think my advice would be to never be afraid of jumping into the source code and learning more and more. There's so many great resources out there to learn how things work. Investigate and dive deep into the things that confuse you. Optimizing your keypresses can only get you so far :)
","frontmatter":{"date":"2017-06-15T00:00:00.000Z","dateGroup":"June 2017","dateString":"Thursday June 15th, 2017","description":"Engineer at Airbnb heavily involved in React Native (Enzyme, React-Native Maps, Lottie, Animated etc.)\n","location":"Q&A Channel Reactiflux","people":"@intelligibabble\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Leland Richardson"}}},{"name":"graphcool","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What kind of companies or developers are your target with graphcool? – Alisamix
\nA: Graphcool targets many different groups of developers. Most of our customers are typically React developers working for startups, agencies or their own projects. However we're also working with bigger enterprise companies which are using Graphcool as a foundation for their development workflow. Happy to give you more background! - Johannes
\n# Q: For a new developer learning React / React Native, what can I focus on so I'm prepared to branching out into other related technologies like GraphQL? – markd
\nA: Great question! GraphQL fits really well with the component model of React and React Native, so just focus on creating small well-composed React components. Then introducing GraphQL will be super easy once you are ready. – Soren
\n# Q: Your service offering adds a layer of abstraction to the underlying technology. Do you feel you are able to keep up with bugs and feature requests, now adaption for this cool platform is catching on? – Kim
\nA: That's a good but tricky question! :slight_smile: The list of newly request features keeps growing faster than we could possibly implement them. The best thing about this open process is this way we can incorporate the feedback of our customers into the roadmap of our product. And like you mentioned, the biggest challenge here is to make sure our system is running reliably and we can address bugs as soon as possible. Over the last few weeks we're seeing a massive increase of traffic and usage which put a lot of focus on scaling our infrastructure. Ultimately it comes down to striking the right balance between shipping new features quickly and guaranteeing stability. - Johannes
\n# Q: As a long time user of REST and never used GraphQL but read about it, if a specific query is being made and it will return all the data, what is the benefit of using GraphQL and not REST? – 4ever
\nA: GraphQL has several advantages over REST and depending on your perspective some of them will resonate more with you. To me the main advantage is that you are able to co-locate your queries with ui components and specify exactly the data you need for your view. This allows for a better software architecture pattern, but also has significant performance advantages in that you can fetch all your data with a single request instead of doing multiple round-trips as is typical when consuming REST APIs. – Soren
\n# Q: Where do you think the future of databases is going? There have been a lot of new technologies with making better APIs and stuff, but are we just thing to hang on to SQL (and a bit of NoSQL) – dilraj
\nA: Great question! I'm super excited about new globally distributed databases released by Google and Microsoft recently (Cosmos and Cloud Spanner). Cloud Spanner in particular uses atomic clocks to perform low-latency global transactions. These are fairly advanced to use correctly, so I see a huge opportunity for APIs like what Graphcool provides to add value on top. In the SQL world most of the action is around reducing operational complexity, and AWS Aurora is doing a really good job there. – Soren
\n# Q: My biggest concern with using graphcool is the changing landscape of servers/db's. How are you guys planning on keeping relevant and up to date with the changing landscapes and how will those that are using the current graphql query language be able to stay up to date when graphql itself is evolving? – ajchan11
\nA: Let's talk about GraphQL first :smiley: GraphQL is an open standard and Facebook has proven to be a competent steward until now. We are now entering a phase where a broader community of stakeholders is involved in shaping the future of the language, and I think this is a great way to ensure that GraphQL evolves in a slow and steady phase, allowing developers to adopt new features when they want to. For Graphcool, we are pioneering a new way to architect backend applications called the Serverless GraphQL Backend architecture. We are very much at the forefront of this development and will keep pushing the industry forward. – Soren
\n# Q: I am new to react/Redux/GraphQL world so What is GraphQL and GraphCool?, Apollo? Why and where do we need it? What Serverless is about? – Ahmed
\nA: That's a very common question for us and we're currently working on some better learning resources to make it easier for people like you to get started. There are many ways to explain what GraphQL is but a good comparison is to think about it as a better alternative to RESTful APIs. The best way to get a good feeling for it is actually to try it out.
\nGraphcool is a platform that helps you to setup a GraphQL backend without the need to manage databases or servers. In case you've used Firebase in the past, you can kinda think about Graphcool like Firebase for GraphQL (however it goes way beyond what's possible with Firebase). Serverless functions are an important building block in the Graphcool platform. It's basically a super easy way to extend your backend and implement business logic by deploying the code without the need to manage your own servers.
\nI'd recommend you to check out this tutorial to get started with GraphQL using React - Johannes
\n# Q: Is GraphQL secured to use for database related API? – vivekpatel369
\nA: GraphQL itself doesn't have a built in security mechanism. There are typical two ways to use GraphQL in your own server – either you are wrapping an existing system, so your GraphQL resolvers will query existing REST endpoints for example. In that case people usually let the existing system handle authorisation. If you are building a new server from scratch, you would typically load data from the database in your resolvers. In that case it is your job as the developer to design your backend in such a way that you can handle authorisation correctly. – Soren
\n# Q: what is the best way to use authentication and authorization in graphql? – Madhav Poudel
\nA: We have an article just on that topic. In general, GraphQL allows you to think about permissions in terms of your data models instead of individual REST endpoints. – Soren
\n# Q: With respect to the javascript community at large, what is one concept you wish we all grasped and one practice that you wish would die out completely? – ada
\nA: Wow, that's a great question @ada! Graphcool is enabling a completely new development workflow compared to traditional backend development. There are a couple of new concepts we're trying to establish as best practises but when picking one, I'd say that there is a shift in how developers create APIs for their applications. With GraphQL SDL you can simply describe how your schema should look like – the API & database will be generated automatically based on that and you can focus on implementing your business logic instead of writing wiring-code between your API endpoints and your database.
\nRegarding your second question: People should stop creating REST APIs :stuckouttonguewinkingeye: - Johannes
\n# Q: Would you consider opening up the actual underlying GraphQL definition that is created through the web console to prevent vendor lock-in issues? And/or extend the system to allow other user-chosen back-end systems (different file storage, different database)? – Kim
\nA: Hi Kim :smiley: The great thing about GraphQL is that it is an open standard. This means that the part that is embedded into your application is an open source client. The Schema definition for a Graphcool based backend is available and you can certainly implement your own GraphQL server that is fully compatible. In terms of extending the system, we have some exciting features in the works that touch some of the points you mentioned. – Soren
\n# Q: I'm using graphcool for my project. Do you have plans on rolling out your own oauth authorization routines instead of relaying on auth0? As a developer I feel a little uncomfortable outsoursing such a crucial component like user management to a 3rd party. It seems that once I go with auth0 for authentication and authorization I won't be able to swtich platforms. – makazone
\nA: We are in fact working on exactly that :smiley: I would love to get you involved in the beta program once we are ready to test this. Please ping me in the Graphcool slack :smiley: – Soren
\n# Q: Do you have plans to allow more open source community (developer) involvement for Graphcool? E.g. custom integrations, webhook marketplace, back-end open sourcing? – Kim
\nA: This is super core to the future of Graphcool. When we announced functions last month we took the first step in this direction. You can take a look at some open source functions the community has already collected
\nIf you take a look at the Serverless GraphQL Backend Architecture article linked previously you will get a hint at what we have planned. In short – this is comming, but we can't commit to a concrete timeframe yet.
\nThis is a common question we get. In that scenario it usually works best to start by convincing the people who will benefit directly from introducing a coherent GraphQL API – frontend developers. When they are sold on the benefit, you can start out in the small by creating a simple GraphQL proxy that forwards requests to the existing backend. Over time, management will come to appreciate the increased productivity. – Soren
\nIn addition to @sorenbs' answer, I'd like to add that we have a large number of open source projects and examples where we're already collaborating with many awesome open source developers :raised_hands: If you feel like getting your hands dirty with something you see there or something completely new, I'd be happy to talk, just shoot me a message :smile: – nilan
\n# Q: Many were burned by the shutdown of Parse. How can Graphicool instill confidence in using a BaaS again? – jpinnix
\nA: Thanks for your question @jpinnix! As you can imagine you're not the first person asking this, that's indeed one of the most common question we get from developers evaluating our service but also investors we're talking to. Based on the shutdown of Parse and the limitations of existing services like Firebase, we knew we had to change the dynamics of backend services. Most importantly, both Parse and Firebase were/are based on proprietary technology, which introduces a massive vendor-lockin into the stack of a developer. With GraphQL the community finally seems to agree on ONE WAY how APIs should work. Based on GraphQL, SDKs etc are no longer needed and since you can easily export your schema & data, it's entirely possible to build your own equivalent GraphQL API in case you're deciding to migrate off Graphcool (you don't even need to change the frontend). So instead of creating vendor-lockin we're rather trying to maximize the developer experience to keep developers using Graphcool.
\nFundamentally, we no longer think of Graphcool as a BaaS but rather as a developer platform/framework to build serverless GraphQL backends. You can read more about this - Johannes
\n# Q: 3 short q's: 1) What database are you guys using? 2) How do you do caching of responses with a serverless GraphQL API? 3) Do you think GraphQL makes sense if your usage is all aggregation and filtering (I'm thinking data dashboard)? – MarkW
\nA:
\n# Q: What's the next biggest thing to expect from Graphcool? – Kim
\nA: The next big (sorry, biggest) thing we're working on is one of the most requested features for us so far: Better support for authentication. We've received requests for dozens of different authentication methods (Facebook, Github, Twitter, Firebase Auth...). We'll soon release a completely new way to integrate with all of these authentication provides and implement your own ones! Stay tuned on our Twitter - Johannes
\n# Q: For any company in a selection process for a GraphQL based BaaS, what would be your single greatest USP as opposed to your (only?) competitor in the market ATM? – Kim
\nA: Compared to other GraphQL based backend services, we're providing a development platform that allows you to build a production-ready backend for real applications (beyond prototypes and MVPs). Based on the feedback we've got from thousands of developers, we're aiming for providing the best possible developer experience while keeping the APIs flexible enough to cover every possible use case and scenario. I think our declarative permission system and functions are a good example for this. - Johannes
","frontmatter":{"date":"2017-06-08T00:00:00.000Z","dateGroup":"June 2017","dateString":"Thursday June 8th, 2017","description":"Co-Founders of Graphcool. A Serverless GraphQL backend for frontend developers. Graphcool also created Learn Relay/Learn Apollo and organizes the GraphQL-Europe conference.\n","location":"Q&A Channel Reactiflux","people":"@sorenbs & @_schickling\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Graphcool"}}},{"name":"brian-vaughn","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Hi Brian! Can you tell us more on how Facebook handles complex forms internally with React
\nA: I haven't worked with forms internally at Facebook, so take what I say with a grain of salt.
\nHowever, I believe our most forms-heavy application would be the Ads Manager app, which uses a Flux architecture. To my knowledge we don't use a forms-abstraction library or anything, just Flux.
\nThe topic of form is a pretty common question. We think this isn't because forms are necessarily harder in React, just that most other things are made significantly easier with React and forms are...still just forms. :)
\n# Q: Maybe to specific, but hoping to get some insights 'Does facebook has a .js with global variables to use..?'
\nA: I'm not sure I completely understand the question about global variables. But no, there is no single globals file that we use. Facebook uses a variety of tools for sharing configuration. Sometimes congiguration is stored in a standalone module and required during build time. Sometimes it's loaded by our configuration framework at runtime (eg passed from PHP to JS).
\n# Q: Where can I read more about this configuration modules?
\nA: I don't know if there's a specific place we describe our module system or make recommendations about how to structure that sort of configuration. My apologies!\nA lot of us (React team) are very accessible on Twitter though\nSo you could always reach out with questions :)
\n# Q: Maybe you have better solution how to pass event handlers to child components instead writing onSomething props.
\nA: , I'm not sure how best to answer it abstractly. We have talked a little in recent time about alternative APIs for event handling but there's nothing concrete or on the roadmap to my knowledge. Maybe you could elaborate on a particular problme you're experiencing with the onSomething approach? :)
\nI guess the parallel to that in FB would be configuration modules which get glued together during the bundle/build step.
\n# Q: What led to the creation of react-virtualized and how did you go about writing the lib?
\nA: When I created react-virtualized, I was working a company called Treasure Data- a data analytics company. My team worked on the Console application, which allowed users to create and manager their data, write queries, etc. Basically it needed to display a lot of data (tens or hundreds of thousands of rows) quickly. We started off using fixed-data-table (by Facebook) but ran into some limitations (eg it didn't allow you to set a prop that would scroll a particular row into view). We also had a use-case that required windowing horizontally (columns) instead of just vertically (rows) Which FDT didn't support. So I decided to take a stab at writing a drop-in replacement that did both. Dan noticed it and tweeted about it which kind of gave it a nice boost of traffic- and it just kind of organically evolved. :)
\n--
\n# Q: My team used react virtualized for a complex form with lots of line items and rendering slow, but she had a hard time figuring out how to implement a custom form to improve render time using react virtualized.
\nI didnt code it, but it seemed that react virtualized can only use supported libraries and not custom rendering. Am I wrong here? Or is there some way in the library to implement custom form templates to draw what we want to \"virtualize\"
\nA: I'm not sure I understand your question fully- so please feel free to add some follow-up clarification.
\nAlmost everything about react-virtualized can be customized, so I don't think that would be a bottleneck. I have heard of perf problems for forms in the past, but they typically turn out to be that the particular form abstraction components are kind of heavy to mount and unmount- and a lib like react-virtualized necessarily does a lot of mounting an unmounting. I'd be happy to take a look at your particular project if you'd like to hop in the RV Slack sometime and point me at a Plnkr or something though.
\n# Q: Classic QA question for you: what's been your biggest challenge since joining Facebook and the React team?
\nA: One of the biggest challenges for me has been getting over imposter syndrome. I was fortunate enough to join an amazing team at FB, and it's pretty easy to get intimidated by the people around you when they're really good at what they do. Everyone has been super friendly and welcoming and helpful though- so I'm getting over it. :D
\nIf you were asking specifically about technical challenges, I'd say... just learning the internals of FB- everything from build tools to internal slang to where to go to look for debug logs, etc. Typical stuff when transitioning to a new job, but maybe a bit more challenging because of the size of FB's engineering team.
\n# Q: I've heard conflicting information about react fiber's performance... can we expect a speed boost or not?
\nA: The team's goal for the initial release of fiber (version 16) was to be more or less performance-netural while also being more or less backwards-compatible. The exciting parts of fiber's smart scheduling- sometimes referred to as \"async\"- won't be enabled for version 16 (at least not by default). Some of us have already begun testing async internally, but it's still in the early days. We tentatively plan to provide a way to opt into testing async in 16 and then to turn it on in 17, once we've satisfied ourselves that the perf is great and that we know what the recommended patterns (and anti-patterns) are for component design.
\nAnyway, to circle back to the initial question- our testing on Facebook and Messenger more or less shows React 16 as perf neutral.
\nThere are some pretty exciting things we'll gain with 16 though- better error messages/stacks, the ability to return arrays from render, a better custom renderer API, Flow type checking, etc.
\n# Q: How does the internal feature development cycle work @ Facebook?
\nA: Typically we would create a new experiment with some criteria for who gets opted in (which could be as vague as \"X% of all traffic\" or it could be as specific as \"only members of this team/group/etc\"). Then we define some key metrics- things we are hoping to accomplish or things that we want to not regress on. We create a feature flag in the code that we use to enable or suppress the feature, based on whether the current user is \"in\" the experiment. Then we just kind of gradually roll it out- and eventually remove the feature flag entirely once the feature is at 100% (assuming no problems).
\n# Q: What build tools using for build facebook apps?
\nA: FB uses a lot of tooling and I've only been here a few months, so I definitely don't know it all. Common tools though would be things like Babel, Flow, Webpack, Haste/require (for modules), etc. (If this is too vague and you were wondering about something more specific - feel free to follow-up)
\n# Q: What are your quick thoughts on dynamic row/cell dimensions in virtualized scrolling? Is there a widely accepted elegant solution for this dilemma?
\nA: Other than CellMeasurer :D So dynamic heights is a difficult problem with windowing libs. I have a few slides from a recent talk I did that relate to this: https://bvaughn.github.io/forward-js-2017/#/20/3
\nIn general I'd say that the key points are:
\nRV currently solves this with CellMeasurer which async-measures content after it's been rendered. I think this is a reasonably elegant solution, though I'd like to improve it so ideas and collaboration are always welcome. I have a branch (kind of long running, at this point) that I'm playing with some refactor ideas for this in particular. If you're interested we could talk more offline about it.
\n(Did this answer your question? Was it too high-level?)
\n# Q: What do you think about the React IDE project ?
\nA: React IDE looks cool. I've never used it. I will download it and try it after this Q&A
\n# Q: What you all preferred to choose between react-thunk or react-saga .?
\nA: Regarding thunk vs saga- unfortunately I'm not able to answer that question. I don't know if we use either internally. I've used thunk externally (before I worked here) and I thought it was pretty handy.
\n# Q: What is the direction of Reason and OCaml within Facebook? Will Reason have an effect on React in the future?
\nA: Regarding Reason and OCaml- good question! FB works on a lot of parallel efforts and it's probably hard to predict the outcome of them in many cases. Reason looks exciting- and some smart people are working on it- so I expect it to be really cool. I don't think we have any definite plans at this point, just a lot of ideas and things to experiment with :)
\n# Q: Brian, tell us about yourself. How long have you been coding? What was your first programming language? Highlights or milestones of your career/life?
\nA: Sure :) I started coding in college. (I went to school for art but I needed money to eat/rent so...) I picked up freelance design and web programming jobs on the side. Realized I really enjoyed it and just kind of stuck with it after graduation. My first programming language was PHP. One of my clients asked if I could do a PHP+MySQL site for them. I knew neither but said I could- then I scrambled to read \"PHP and MysQL Web Development\" by Luke Welling and Laura Thomson.
\nHighlights have mostly been open-source related. I got into OS years back, when Source Forge was the thing. I still have a project or two there, heh. Working on the React team has definitely been the most exciting project I've gotten to work on- in terms of impact and challenges both.
\n# Q: What specifically do you hope to contribute to React based on your past experience and skills?
\nA: Specifically- I hope to contribute some windowing-related things in the future, since that's an area I've become pretty passionate about.
\nI've also recently started workong on react-devtools and I find that super gratifying. I hope to make more time to work on them over the next few months too. :)
\n# Q: I am new in react so I have one question which is best among react-toolbox & material -ui for material design web apps? There was some very tricky to set the theme change in react-toolbox . Is there any suggestions to how I manage if you prefer react-toolbox
\nA: Unfortunately I have not used either react-toolbox or material-ui in React so I can't recommend one over the other. I'd suggest comparing the APIs, look if either offers feature you think are important that the others dont', look to see if one has a more active online community (Slack/Discord/StackOverflow), which one is released most recently/frequently, etc.- and it may be that both are great choices and you'd be happy with either one :)
\n# Q: So... In facebook apps (in new apps) are you using something like CSS Modules? What approach for managing CSS you can advice?
\nA: We use something similar to CSS modules, yes- a build step that generates unique CSS class names based on the base component and the relative class name used in source.
\n# Q: Do you feel pressure from having to maintain such a popular open source library?
\nA: Yes. I think a lot of OSS maintainers feel this. I definitely have been feeling it lately. There are a lot of new things I'm excited about trying, but I feel guilty about not immediately replying/fixing/helping things I've made in the past.
\nEvery morning starts with checking GitHub + Slack + Stack Overflow (tags) and responding to any questions/issues from overnight. Then I usually repeat that sometime mid-afternoon and again in the evening. It's rewarding to help people and see all of the cool things built with projects I started, but it's also pretty tiring. There's also a small fear that if I let myself fall behind, even a little, I'll never catch up.
\n# Q: Was there any talk at Facebook about possibility of 'native' implementation of React (or just JSX) in browsers?
\nA: WRT talk about \"native\" React in a browser- Not to my knowledge.
\n# Q: Is Facebook working on something for the backend ?
\nA: Yes, Facebook has OS projects for...basically everything. From front-end to build tools to backend to data center and server design.\nA lot of them are listed here https://code.facebook.com/projects/
\nWe also have a few GitHub teams with stuff as well - Specifically bakend things would be @ https://code.facebook.com/projects/backend/
\n# Q: What are you most interested in now? And why?
\nA: What am I most interested in is a huge question. :)
\nPersonal life: I'm super excited about going to Paris for React Europe next week. Hopefully I'll meet some of you there!
\nI'm also really excited about React 16 (and getting to delete a lot of old code).
\nIn general, I think the things that excite me most boil down to either improving performance (eg react-virtualized, making things faster, etc) or improving developer experience (eg through tools like devtools, better error messages, etc) It's really easy to get excited about anything in that category. :)
\n# Q: Maybe you know, but it is short question. What about RN for desktops? Any plans to support RN for desktop by fb team?
\nA: I don't know about plans for RN on the desktop. You might be interested in checking out www.nidium.com though! Looks pretty promising!
\n# Q: As someone new to JS and frameworks, the amount of frameworks and the speed of their decline makes choosing absolutely daunting. What do you think of the future for React?
\nA: This is a totally understandable concern and I think it's not uncommon. I can't predict the future of course, but I can try to reassure you by saying that FB is very heavily invested in React. (I think we have over 30,000 React components internally.) So we're dogfooding- we're right there beside you, invested in the framework just as much as an external team using it.
\n# Q: What does Facebook get out of open-sourcing React and React Native?
\nA: Everyone on the React team is super passionate about the idea of open source and helping other devs in the community. So one thing FB gets out of OS projects like React is that it attracts people who are passionate about OS. We also benefit from OS too in that we regularly receive very high-quality contributions from developers outside of Facebook, so it flows both ways.
\nI think the history of OS at FB has also been very pragmatic. We haven't created things that we think may be useful one day. Rather, things are created to solve problems we have now (or at a given time). Of course, it requires more effort to open source something than to just use it internally, but that kind of ties into what I said above I think.
\n# Q: Would React be able to take advantage of web assembly, and if so to your knowledge is there anything in pipeline?
\nA: Yeah, maybe there will be some nice wins for React with Web Assembly. To be honest, I don't know. (I'm not sure if anyone does at the moment.) It's something that the team is considering and keeping an eye out for though. Particularly Sebastian.
\n# Q: What is the most common full stack for React? (Backend, DB) etc. And where is a good free tutorial?
\nA: No idea what the most common full stack for React is. We don't really have a way to collect metrics for things like that, other than word of mouth. React works equally well with pretty much any backend. :)
\n# Q: Where do you go for best practices/etc when using React/Redux/etc? Any particular gems?
\nA: I find the React community on Twitter super helpful. There's also places like this Discord channel and Stack Overflow. Lots of good advice online.
\nI'd say that I usually would start by checking the https://facebook.github.io/react/ and then- if I still have a question, I see if someone else has asked it on Stack Overflow. If not then I check GitHub issues to see if it's been answered there. And if not I may ask on Twitter. :)
\n# Q: What is the biggest challenge/problem you are facing now?
\nA: Right at this moment it would be a slight cramp from typing too much :) hehe
\nBut no, seriously. The biggest ongoing challenge for the past few weeks has been integrating React fiber with ReactNative. Prior to joining the team I didn't have any experience with ReactNative, so it's been a technical challenge to learn a new codebase as well as...kind of an institutional challenge to learn the ins and outs of variou Facebook apps that use ReactNative. :)
\n# Q: What are you interests beyond Javascript? Anything that you would recommend people take a look at?
\nA: Hmm...my interests beyond Javascript? I make music :) https://soundcloud.com/brianvaughn/
\nI also love running. :) If you live in the bay area, we should run together sometime.
\n# Q: The React additional license has lately caused a great deal of distress in the scene where I live. Perhaps it doesn't concern you specifically, but other than what has been said in the FAQ at Facebook ( https://code.facebook.com/pages/850928938376556 ), do we have a reason to worry? Does Facebook have a legal right to dismiss us of our license to use React if we go against it in a patent lawsuit?
\nA: The FAQ covers the most common questions we get about the license.
\nThis is a tricky question for me to answer, because I'm not a lawyer and I don't want to say anything that might come back to bite me later. I will say that many small companies as well as some large companies (eg Google, Apple, and Microsoft) are currently using React.
\nIf you have further/specific questions beyond that, I would have to defer and suggest you ask a lawyer. (Sorry! :) )
\n# Q: Will yarn continue to be maintained if (or when) npm catches up in terms of features? did you notice a drive to unify the ecosystem in that regard at facebook?
\nA: Yes! Yarn is being actively developed both internally and in the community :) We love it!
\n# Q: How do I get a job at facebook (react team) ? and do you also drive a tesla ?
\nA: Email me your resume and I could pass it on to one of our recruiters :)
\nI would love to drive a Tesla. Would you like to give me one? :)
\n# Q: Filler questions yay or nay: semicolons? mechanical keyboards? spaces over tabs?
\nA: Consitency is best, whether you want to use semis or not. Spaces are my preference but again- I think a good linter (or even better- Prettier) is the most important thing.
\nMechanical keyboards? I don't feel strongly. :)
\n# Q: What code conventions are you using for js at FB and will you be publishing that like airbnb has?
\nA: If by \"code conventions\" you mean formatting/syle- we use Prettier in more and more places. I suggest you try it too! It's great :D
\nIf you mean architectural patterns, etc. then check the official docs and follow the core team on Twitter (especially people like Dan) for lots of helpful 1-offs
\n# Q: When hiring, does Facebook emphasize more on education or contributions?
\nA: Neither! :) I think the main thing we're looking for are people who will be effective at Facebook. That doesn't necessarily correlate with education (eg I was an art major) or with a history of contributions (not everyone has the time or interest to do extra-curricular things like that).
\nAs much as possible, our interview questions are pragmatic, covering the types of things you might do in your day-to-day job.
\nThanks for hosting me, and thanks for all of the questions folks. My pleasure!
","frontmatter":{"date":"2017-05-11T00:00:00.000Z","dateGroup":"May 2017","dateString":"Thursday May 11th, 2017","description":"React.js Core Team at Facebook. Creator of react-virtualized\n","location":"Q&A Channel Reactiflux","people":"@brian_d_vaughn\n","recording":null,"time":"1-2:30pm PT / 8-9:30PM GMT","title":"Brian Vaughn"}}},{"name":"vincent-ning_michael-paris","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2017-04-27T00:00:00.000Z","dateGroup":"April 2017","dateString":"Thursday April 27th, 2017","description":"Co-Founders of GraphQL BaaS, Scaphold.io\n","location":"Q&A Channel Reactiflux","people":"@ScapholdDotIO\n","recording":null,"time":"1-2pm PT / 8-9PM GMT","title":"Vincent Ning & Michael Paris"}}},{"name":"andrew-clark","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Do you have any plans to port recompose to typescript? - FlayaN
\nA: So first of all, a bit of a confession: I haven't worked much on Recompose in the last few months since I joined the React team. The primary reason is that some parts of the API will need to change in light of the changes we're making in React Fiber. So I'd like to wait until the Fiber stuff, particularly around async scheduling, is more fleshed out. To answer your actual question: I would love to get TypeScript working with Recompose. (Although I don't have experience with TypeScript so I'd appreciate some help from the community.) I'm also very interested in Flow types, which I've attempted a few times. Turns out it's a bit tricky to type higher-order components in a way that works with both class components and functional components. But once I turn my attention back to Recompose (hopefully this summer) this is near the top of my todo list.
\n# Q: Why was proptypes moved out of react in the latest release of react? - akki1234
\nA: First, to be absolutely clear, what's being deprecated is accessing PropTypes from the main React object: React.PropTypes. Not the PropTypes themselves. They simply live in a separate package now.
\nWe did this for a few reasons. It's not really about code size, since the validators are mostly stripped out in production, anyway.
\nOne, there's really nothing React-specific about PropTypes. They are generic runtime type validators. In fact, there were already many packages on npm that mirrored the PropTypes from React (literally just a copy-paste from the React source). Splitting PropTypes out makes it easier for other projects to depend on them, without taking a dependency on React.
\nAnother reason is that we wanted to communicate that PropTypes are only one possible way to do type checking in React. You can also use static typing via Flow or TypeScript. Internally at Facebook, Flow is preferred for all new components. We use it to type all of our JavaScript code, including React components.
\nFinally, splitting PropTypes into a separate repo helps keep the React issue tracker focused on actual React issues.
\nWe realize this decision has caused some consternation and confusion since we released last Friday. In retrospect, we should have done a release candidate cycle and communicated these changes to library authors much further in advance. We'll take this as a learning experience and do better next time :smiley:
\n# Q: I've had multiple people express their concerns about \"what will happen when React removes context\" - I know there are some plans to change the API, what do you think should / will happen to context? - BTM
\nA: We have no plans to remove context; or rather, we will always have some API for addressing the use case that context fulfills, which is to pass data to deep children without explicit passthrough of props.
\nWhat will happen though is the specific context API and implementation that exists in React today, which has a few problems with both correctness (context updates being blocked by intermediate shouldComponentUpdate->false) and performance. This is why we resisted documenting context until recently. I can't tell you what the new API will look like because we're still not sure. Once we release Fiber, we'll have a better foundation upon which to build cool new features like improved context.
\nIn the meantime, the recommendation is to use an abstraction around context so that when the API changes, you can change the abstraction without changing all your components. E.g. React Redux's connect() HOC.
\n# Q: Since the purpose of fiber is essentially being able to achieve 60fps on the web, will react ever have some helpers built-in for animation (other than and perhaps better than ReactCSSTransitionGroup)? Or should such helpers exist in user-land libraries? - everdimension
\nA: The purpose of Fiber is a bit more nuanced than that (I may be to blame for pushing that line... I wrote that in my React Fiber Architecture doc last summer before I worked for FB and joined the React Team. That doc was my attempt to understand something from the outside with little context by just reading the code. So some of it is outdated. I intend to update it sometime in the next few weeks, now that Fiber is closer to being fully implemented.)
\nTo answer your actual question, the React team feels we're not in the business of providing built-in solutions for animation or state management or other areas that can be solved in userland by our awesome community. ReactCSSTransitionGroup was created at an earlier time when the community was young and it made more sense to bundle ready-made solutions. What we will continue to do instead is investigate how people are using React and how we can improve React's suitability for those use cases. Fiber will have some really cool scheduling capabilities that will enable animation library authors to do exciting things that aren't currently possible. I can't wait to see what y'all build!
\n# Q: Hey Andrew! What’s the most difficult or challenging work left to officially ship v16? - iamdustan
\nA: React 16 is running for 100% of users on facebook and messenger. So it's basically done. The biggest remaining step I believe is to figure out our sever-side renderering story. We don't really use SSR at Facebook, which is why this has come last. And then of course we need to get Fiber rolled on for React Native, too. Hopefully we'll get 16 out sometime this summer!
\nAlso, it's important to note that React 16 is our first Fiber release, but it will be Fiber running in compatibility mode — that is, with synchronous scheduling that mimics how React-of-today works. The more exciting release will be React 17, which will enable async scheduling by default and will help us realize the true promise of the new Fiber architecture. There's still lots of work to be done on this front. We just this week have first round of meetings to discuss how to incrementally adopt async Fiber internally at Facebook.
\nBut React 16 will have improved error boundaries and you'll be able to return arrays and strings from render! So still exciting!
\n# Q: Do you think the React team at Facebook could be doing anything better re: communicating short-term and long-term goals and changes to the community--specifically those outside Facebook involved with core community projects and React itself? - Aweary
\nA: Hi Brandon! Yes, this is absolutely something we need to work on.
\nEveryone on the React team came from the open source world. It's something we're really passionate about. However, we've historically found it difficult to nurture outside contributors for a few reasons. One is that codebase is pretty complex and hard to navigate. I still don't totally understand everything that's going on in React Stack. React Fiber helps this problem a bit, but it's still not the easiest project in the world for first-time contributors. Another reason it's difficult is that the API for React is very small, so other than bug fixes, most changes require lots of coordination with the entire core team. For example, it's unlikely we'll accept an outside PR that reimplements the state API. It's hard make big changes without lots of background and context.
\nBut we recognize the problem and we're actively looking into ways make this better. And we'll work on our overall communication with the community, too. I think we do a pretty good job overall, but incidents like the 15.5 release show that there's always more we can do.
\n# Q: I know there are 2 question queued already but since I will forget it if I wait longer, I'll just ask, sorry for that: you mentioned context earlier. the docs still state that context is an experimental api and it's likely to break in future releases. any plans on making context stable in the medium or long term or will it just remain in an experimental state like ... forever? - manuelbieh
\nA: I'll just quote my previous response from above
\n\n\nI can't tell you what the new API will look like because we're still not sure. Once we release Fiber, we'll have a better foundation upon which to build cool new features like improved context.
\n
It's \"stable\" in the sense that we'll always have some version of context, but it probably won't be the current API.
\nHope that answers your question!
\n# Q: How has your experience been moving to rollup internally and away from webpack? - dmarr
\nA: I'm really excited about our new build setup. Aside from the perf and code size benefits of using flat bundles, it's going to make our release process so much smoother. Right now, releasing React is a lengthy, error-prone, largely manual series of steps that makes it difficult to release new versions. We want to get to the place where we can make frequent patch and minor releases with confidence, so we can iterate more quickly and ship bugfixes much faster.
\nAlso, we never used Webpack to bundle React AFAIK. So it's not quite accurate to say we're moving away from Webpack. Rollup is great for libraries like React, but Webpack is perhaps more suited to applications. It will still work great for your React apps.
\n# Q: Hi Andrew! Is renderToString / server rendering going to change much with Fiber? I know Sebastian mentioned adding / replacing with streaming support but I'm curious what the the plan for that is before v16. (we are heavily dependent on recursive, async renderToString calls in https://github.com/ericclemmons/react-resolver, so curious how fiber will affect). - nathanael
\nA: I can't comment much on this because we haven't really decided. Streaming rendering is definitely an area of interest. But once we make more progress, we'll likely post an issue or PR to GitHub :smiley:
\n# Q: What do you think about reactXP? Is facebook planning to comeup with something similar to reactxp? - shubham
\nA: I don't know much about React XP other than what I got from skimming through the docs a few days ago, but I think it's awesome that a company like Microsoft is investing so many resources into the React ecosystem. Projects like that (and stuff like React VR) make it clear that the scope of React goes way beyond building web apps. Exciting times!
\n# Q: Are function components still slower than class components and if so, will that change? - pluma
\nA: I wouldn't say functional components are slower, but one disadvantage is that they don't have shouldComponentUpdate. It's likely we'll add something like this for Fiber (it's currently implemented in master; not sure if it will make it to the final release) because shouldComponentUpdate will be crucial for dealing with starvation in async Fiber. But if you're just comparing a non-SCU class component to a non-SCU functional component, the functional component is actually slightly more lightweight because there are fewer checks to perform. And there will be additional optimizations we can make in the future.
\n# Q: Fiber has a reputation for being very complex (rightfully), what do you think are the primary sources of complexity in Fiber? - Aweary
\nA: Much of the complexity of Fiber comes from the fact that we don't use the JavaScript stack. We re-implement it using our own data structures (called, tada, fibers). And there's lots of mutation and code that doesn't resemble the type of code you might be used to seeing in JavaScript. I think once you get used to it, the relatively low number of abstractions makes it easy to dive into a specific slice of the code and make changes. But there's definitely a learning curve. It also takes a while to figure out the best way to debug Fiber; infinite loop when are common. I want to update my React Fiber Architecture doc some time soon to make it easier to onboard new contributors. I've given in-person codebase overviews a few times and it reinforced for me just how much stuff there is to take in when you're first getting started.
\n# Q: What are the plans for mixins with class components? - thesbros
\nA: We have no plans to add mixins to class components. Dan wrote a great post about the various problems with mixins that I'll refer you to: https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
\nHigher-order components are one recommended alternative
\n# Q: Any chance for an expanded howto (or a cookbook even) for recompose? It's a pretty powerful stuff but hard to use just by reading API. - rag
\nA: Yes, proper documentation for Recompose has been on my todo list for over a year, haha. I'm slightly ashamed I haven't gotten around to it yet. But as I said in my answer above, I intend devote more time to Recompose once Fiber is a bit more settled. Until then I'm grateful to Ivan Starkov and CT Wu (don't know their handles on here) for keeping the ship afloat while I'm off doing React stuff
\n# Q: What happens if we start working on a low priority update, but are interuptted by a high priority update to the same component? - FlayaN
\nA: In that case, the low priority update will be aborted (but still in the queue). The high priority update will be processed and flushed to the screen. Then we'll go back to the low priority update, but it will be rebased on top of the high pri one. This is why the functional form of setState((state, props) => newState) is important, and why you shouldn't put side-effects in there (because it may be called more than once)
\n# Q: For those of us who are new, how does one contribute to React project(s)? - Testiinnplayin
\nA: I would suggest subscribing to the GitHub issues tracker and keeping your eye out for oppotunities to contribute. We try to label issues that we think are good for beginners. Then submit a PR! Depending on the scope of the issue, it might be wise to reach out to someone on the team before starting on something new. Non-code contributions are also extremely helpful. We always love getting PRs to improve the documentation.
\nAnd of course staying involved here on Reactiflux is a great way to contribute to the React community :smiley:
\n# Q: how do you think we're going to style our react components two years from now? sass? (post)css? js objects? :stuckouttongue: - \\Tobi
\nA: Personally, I hope it's not with stylesheets. I think one of the CSS-in-JS techniques will eventually win out, but seems like we're still in the early stages. If we are writing stylesheets in a few years, at the very least I would hope that it's with something like CSS Modules. The ability to isolate styles to a specific component is such a huge win. Facebook has been doing that for years and I just don't know how we ever survived without it :smile:
\n# Q: what kind of browser APIs would you like to see in the future? requestIdleCallback is a clear win for Fiber since it works well with the scheduler. Are there any specific or general API(s) that you would like to see to make it easier for React to be fast/efficient/smart? - Aweary
\nA: Web Assembly
\n# Q: Do you think facebook can help with adding more integrated UWP support for react-native, so that more third parties support all 3 platforms on their libs? - FlayaN
\nA: Forgive my naivete, but what is UWP? Is that Windows Phone?
\n# Q: Universal Windows Platform, for now poor microsoft is hosting their own version on a separate repo: https://github.com/Microsoft/react-native-*windows*
\nA: I don't know if I'm the right person to answer that. But the way open source usually works at Facebook is that we only open source projects that we're actively using. So it's not that we hate Windows users, we just don't build Windows apps.
\n# Q: In regards to styling react components I noticed react appears to have a 1v1 mapping of styles to css, while React Native takes a couple of liberties since it doesn't interact with a browser. Does react fiber take any such liberties or have built in styling methods e.g. TouchableOpacity. Also speaking from my frustrations with flex (justified flex child when overflowed getting cut off) - JOE
\nA: Styling in React 16's DOM renderer will be exactly the same as it is now. One thing we're interested in for the future is integrated layout. So instead of writing flexbox using CSS, you'd use a set of React components. But this is still in the \"research\" phase :smile:
","frontmatter":{"date":"2017-04-12T00:00:00.000Z","dateGroup":"April 2017","dateString":"Wednesday April 12th, 2017","description":"React.js Core Team at Facebook. Co-creator of Redux. Creator of Recompose\n","location":"Q&A Channel Reactiflux","people":"@acdlite\n","recording":null,"time":"12:30-2pm PT / 7:30-9PM GMT","title":"Andrew Clark"}}},{"name":"react-conf-2017","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2017-03-13T00:00:00.000Z","dateGroup":"March 2017","dateString":"Monday March 13th, 2017","description":null,"location":null,"people":"Watch React Conf 2017 livestreamed on March 13-14.\n","recording":null,"time":null,"title":"React Conf"}}},{"name":"jordan-walke","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What are your thoughts on Elm? - granmoe
\nA: I like what I've seen about Elm, and I often recommend it to people looking for a really great developer experience that opens their minds to functional programming. I don't have any experience with Elm's abstractions for building UIs/apps though. I hope that projects like ReactNative can greatly shorten the amount of time that is required for other languages like Elm to support mobile application development.
\n# Q: Are there plans for bringing React.js and React Native closer to each other? (i.e. for sharing components between mobile and web) - juhasuni
\nA: Thanks for the question, and this is going to be a long answer.
\nI should start by saying that this answer is entirely from the perspective of mobile web development and mobile app development. Desktop is an entirely different matter.
\nI'm going to be a little more blunt, and try to avoid hedging my words about how I feel about the web, and with that carries an increased probability that I say something wrong.
\nI hope that there are plans for further unifying React Native and React for mobile web. At any given time there's a handful of people (either at Facebook, or other companies/startups) exploring ways to bring RN style mobile app development to the web, and ReactNative seems like a great place to start. One of the things that I'm happy to see, is people implementing ReactNative UI interactions in the same language/runtime that React runs in. That means that sharing more of the code with the web is possible (along with there being many other benefits such as push safety, sharing between multiple native platforms, sharing on Exponent).
\nThere are some difficult challenges with bringing true mobile app development to the web and since I consider React Native development to fulfill the spirit of true app development, it will face those same challenges.
\nThat ability to write a custom gesture handler, or a custom animation, and control every frame of movement on the screen is part of what I believe constitutes the spirit of app development - or at least as developers think about it today. React developers get to realize that today with React Native!
\nIt's not good enough to have to wait three years for browsers to implement some canned interaction/animation (such as a swipeable carousel).
\nPeople without experience in platform app development often have the wrong idea - that platforms give you every platform view and interaction and expect you to use it as-is out of the box. It's not the case. Especially on iOS, the platform often gives you the ability to peal back the layers of abstraction and customize views and interactions at a fairly deep level. App platforms give us the ability to implement whatever interactions we need, in user space, with great performance today, not years from now. The web, and key people who are responsible for the advancement of the web as an \"application platform\" stand in opposition to this philosophy of building mobile apps on the web. This description of the landscape might upset some people, but I'm simply reiterating points and adopting terminology from people who actually build the apps that ship, and choose not to use web technologies for the reasons I mentioned.
\nThese challenges shouldn't discourage us from unifying React Native and React for mobile web - if anything, it means we should be trying even harder to unify the two before this endangered category of developers who see the potential of the web as a true customizable application platform, finally give up.
\nThe web doesn't need a new canned native carousel widget. The web needs the ability for us to implement every last pixel of that carousel interaction at the library level, and with great performance. Whatever is standing in the way of that happening - browsers need to fix it or else the web will be even further relegated to static document viewers.
\n# Q: Do you use React day-to-day? - vcarl
\nA: Not much in the last year, since I started diving deeper into language tooling. I am now working my way back up the stack and have resumed using React through that new language tooling. I expect to use it more in the next six months.
\n# Q: How did you come up with the idea on React? Was it directly inspired by other technologies? Did you try other approaches first which never went public? - Panen
\nA: Even as I was first learning how to program, the old MVC style of programming with data binding and mutation just never felt right to me, even when I didn't have the technical terminology to describe things like \"mutation\", or \"functional programming\". I would find myself structuring my code as much as possible in the (now) React pattern, even in my very first UI programs.
\nMy code would usually look really weird to other people that I was working with because it was typically the only code in the codebase that that looked like React does today - it didn't help that there weren't any frameworks available to help build within the React pattern. For the longest time I just assumed \"welp, I guess I'm just a weird programmer\". Then I finally took a course on programming language fundamentals (which used ML (SML) for much of the coursework) and I finally had some basic terminology to be able describe how I wanted to build applications. I also learned that the style of programming that I gravitated towards was neither weird, nor new and actually closer to some of the oldest philosophies of programming languages - philosophies which hadn't ever become mainstream - philosophies that the industry had spent upwards of twenty years undermining (in my opinion, to their disadvantage).
\nSo I continued to explore framework-izing these ideas, and I had implemented several iterations of what eventually became React, in a few languages - one of the first explorations began as a rough implementation of the reconciler and component model in Standard ML (CreateClass was a \"module function\"). This was really great because SML embraces immutability by default which is natural when building React style components. We naturally wanted to deploy UI to web browsers, and at the time, the compile-to-JS landscape was not as mature as it is now - I don't even think source maps existed yet. So it made sense to port that exploration to JavaScript and continue on from there. I also incorporated a lot of the ideas that I really liked about other UI frameworks which we were using at the time. The use case for \"refs\" originated in another framework which we were using called \"Bolt\" for example. I had also put the foundation in place, to ensure that React components could be server rendered - and that feature was more so inspired by demand and constraints at the time than any specific technology.
\nOne thing I noticed that when people were creating point to point bindings in their more traditional \"MVC\" app structure, it would almost always end up requiring \"computable\" bindings which invoke a function anytime a mutable cell had received a \"change event\". All these \"computable bindings\" ended up chaining together and small changes would end up causing large recomputation of the majority of the UI. I realized that functions already do transform inputs into outputs, and if we could just find a way to reinvoke those functions repeatedly, and quickly enough, that we could be much more expressive and concise, at not much more performance cost that the chain reaction that \"computed bindings\" would result in anyways.
\nTo finally answer your question: yes React was inspired by many other technologies including other UI frameworks which we had been using at the time. More than anything, React was inspired by the ML family of languages (including SML/OCaml) which helped me articulate the value (no pun intended) of immutability.
\nCreating and pushing for the first version of something like React definitely takes a certain ability to discern and ignore FUD when you see it, but ultimately ideas are cheap, and creating an initial version of something is definitely the easiest part. The \"idea\" of React by itself, doesn't explain why React has become the phenomenon that it has. I believe the culture and energy of the React community is the reason for React's massive success.
\n# Q: Why is ReasonML the future of web development in general and React specifically?(edited) - kylemathews
\nA: Some context for others who aren't caught up to speed: ReasonML is a new language toolchain that we are working on within a small group of open source community members - many of then being members of the React community. Reason provides a friendlier, more familiar interface to the OCaml compiler, which is a great, statically typed, high-performance compiler. We enjoy compiling to JavaScript via BuckleScript (and sometimes jsoo) and also target native binaries.
\nIt's very difficult to predict the future, and so the best we can do is just identify significantly better ways to build applications, and invest in those approaches. ReasonML addresses the biggest problems that I've observed in building UI applications over the last five years, and opens up a language/compiler toolchain that is incredibly well suited to React's model of rendering UI. Reason allows us to use OCaml's very fast allocator and collector in order to render large trees of UI rapidly, and also provides a canonical type system that all libraries can interop together with. At the language level, it has features that we've previously had to bolt on top of the JavaScript such as allocation-less named arguments, prop types, and more. In short, it is the best way to take React to the next level - unlocking far better user experiences and fast-loading applications, and because it compiles to idiomatic JavaScript (that's important), it allows us to incrementally move towards that goal from where we stand today. We are already running ReasonML on top of ReactJS today, in production.
\n# Q: What do you use for state management in your own projects Redux, mobX or something else? - urbanvikingr
\nA: It depends on the project, but I have a high tolerance for passing props down the hierarchy explicitly, so it takes me a while before I reach for something more involved. I've worked on React apps at Facebook that use Relay to query the server, and I've also built UIs that use immutable data structures as the primary abstraction for storing and sharing data. I understand that these approaches don't work for all applications, and one of things I like most about the React community is that there's always new ideas/proposals for how to structure your app.
\n# Q: How closely have you been involved in React over the past 2 or so years? What do you think of React now vs how you originally envisioned it? - vcarl
\nA: The last React application that I collaborated on was the mobile ads manager, and then after that I began to build a prototype for a frame rationing reconciler (providing framework level concurrency) and incremental renderer, where lists of components can be returned from render. I'm happy to see some of those ideas get reimplemented in the upcoming Fiber core of React, in addition to many other features which I had not prototyped such as portals. To answer your second question, Fiber makes me happy.
\nI still think that there's so many unanswered questions about how we build UI, and we could use React to find many of the answers. For example, how do we integrate layout so that Flexbox can be be implemented in user space and customized at the component level, as part of the reconciliation process? How can we effectively use the increasing number of CPU cores in mobile devices? Do algebraic effects (continuations) radically simplify other abstractions such as \"context\"? Is there a way to unify animations, layout, and React reconciling?
\n# Q: When you designed react what were your thoughts on server side rendering for web apps and do you feel they (server side rendered web apps) have a place in industry today. - Macdja38
\nA: This is a really great question. At the time, JavaScript was not an accepted way to build web applications. The majority of developers were still stuck rendering UI on the server, and JavaScript was actively discouraged as a means of building apps. I felt like I had to build in the ability for React to render server side at the very least, to pacify concerns about client side JavaScript performance. Knowing that we had the ability to render on the server if we ever needed it, was really helpful in selling the idea of React. Some people still use server side rendering and appreciate the performance wins of initial page load on cold caches. I'm sure that some people use server side rendering and don't benefit from it, and I'm sure there's some people that don't use server side rendering, but would benefit from it. It is becoming less important as browsers improve parse time, resource caching, and JS execution speed (we really need a JIT-less path for initial load and Chrome is adding such a thing), but it still might be a while before we should completely throw out the idea of server rendering. It seems to be useful today for many people.
\n# Q: Could you talk about your thoughts on how you see Javascript in the next 1, 5 and 10 years? - quicksnap
\nA: This one is difficult to answer. I'll give a highly speculative reply - which seems better than giving a hedgy non-answer.
\nIt's really hard to say what JavaScript will look like in even five years, but it's useful to break JavaScript into two parts - the language you author code in, and the Virtual Machine you deploy code to.
\nIf anyone is still surprised that those two things would be separate, then I'd say that illustrates what I believe will be the biggest thing to happen in the next five years, or even the next one year.
\nI should also mention that I don't really watch the evolution of JavaScript as an authoring language very closely, aside from a couple of key proposals / technologies that I'm interested in. For my use cases, I'm primarily interested in JavaScript as a compilation / deployment target (still, a very important one). I don't have strong opinions about what happens at the language or VM level, as long as those language features make it easier for ahead of time compiled languages to make full use of compile-time guarantees, while ideally integrating seamlessly with idiomatic JavaScript.
\nMany ask \"why should I write in a statically typed language and compile/deploy it to JavaScript?\" I can come up with many good answers to why you should or shouldn't use a compile-to-JS language, but I like to answer back with another question: \"Why should you use JavaScript to deploy JavaScript?\"
\nWith JavaScript compilation targets improving rapidly, JavaScript as an authoring language is not a prerequisite for JavaScript deployments. Most people likely have good reasons to author in JavaScript, but everyone should definitely ask themselves what those reasons are and ensure that they're actually well-founded.
\nIt's also not as simple as \"either compiling to JS or not compiling to JS\". Not all compile-to-JS approaches are equivalent, and it's not as simple as picking your favorite language and assuming you'll be able to be productive while compiling it to JavaScript, because some languages are just inherently more difficult to compile to JavaScript without sacrificing great runtime performance, and without leaking memory at the boundaries. I am certain that some languages compile to JavaScript rather seamlessly, which is one of the ... reasons ... that I'm working on Reason.
\nAs far as JavaScript, the authoring language is concerned - a total shot in the dark: if I had to guess, I imagine JavaScript will continue the path it has followed in the last several years, towards becoming a loosely typed OCaml (that's a compliment). I imagine it will eventually get something like pattern matching, but to be honest I don't follow closely.
\nAt the VM level, I imagine wasm opening up web deployment to many more languages that cannot easily compile to idiomatic JavaScript. I think this is really good for the health of the web, and good for JavaScript the VM. I don't anticipate that it affects JavaScript developers for the forseeable future, but there are many developers who are not JavaScript developers believe it or not! I hope to see wasm provide more viable deployment options for them within the year, even.
\nIf anyone disagrees that JavaScript is becoming a loosely typed OCaml, you are not allowed to use any of those OCaml-y features that JavaScript gets in the future. I will lurk on your Github diffs to make sure of this.
\n# Q: How does React design relate to previous work on Component and Event based systems, like VisualBasic, which Timers and DataSources were also treated as components? Were they a source of inspiration for concepts? - derekstavis
\nA: Sorry, but I don't have enough context to answer this. I don't know anything about those technologies. Components as timers sounds cool.
\n# Q: What's the better way to learn and write a React Renderer not targeted for the DOM? - derekstavis
\nA: I wish I could answer that question better, but Sebastian M is the right person to ask right now, and the answer is likely changing with the introduction of Fiber!
\n# Q: How do you expect to continue improving performance in the future? Do you feel you've capped out on what is possible within the browser / Javascript? (Or that trueadm has with Inferno, since you guys seem to have hired him)(edited)- Ron Jeremy
\nA: It's a great question. React is only (half?) of the CPU time. Even if we make React faster, application code is still going to have to execute, and the best way to greatly improve load time or execution time, is at the language level - across the board, for React and the apps build on top of React, which is why I'm working on Reason. The same kind of deep, aggressive inlining that we want to do at the component level, could be done across the entire app - using ahead of time compilation.
\nThat being said, there are still some things we can do in React to improve React's portion of that time. Right now we have several redundant trees such as the React component hierarchy, the layout tree, and the platform UI tree. We could get rid of a lot of that redundancy by doing layout on the React hierarchy, and compositing from it (like the mentioned react-canvas). I encourage you all to try out a lot of this stuff.
\n# Q: If React were to be a framework, not just a library how would it look like? - abdellah
\nA: If I had to guess: React would not be nearly as popular and the community would not be as energetic . In a sense, the community fulfills the role of the framework.
","frontmatter":{"date":"2017-01-26T00:00:00.000Z","dateGroup":"January 2017","dateString":"Thursday January 26th, 2017","description":"React.js Creator\n","location":"Q&A Channel Reactiflux","people":"@jordwalke\n","recording":null,"time":"12-1pm PT / 7-8PM GMT","title":"Jordan Walke"}}},{"name":"cheng-lou","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What is \"Reason\"? (I don't have Facebook) - CPT
\nA: Reason is a layer of syntax & tooling on top of OCaml, a language Facebook uses actively. Jordan started the concept of Reason before React, in fact. We're taking it and using it as an actual front-end language (among other uses) because we think that after three and half years, the React experiment has succeeded and people are now ready for Reason, so we unshelved that project and are now actively iterating on it. https://github.com/facebook/reason
\n# Q: Is it okay to modify DOM directly without the changing state in React sometimes? - AbsoluteZero
\nA: Yes, but only as an escape hatch. In the early days of React, when there wasn't such an ecosystem, we'd render once, get a hold of the root (through ref), and in componentDidMount, use some jQuery plugins. I think lifecycles and refs are the escape hatches that are hard to implement but ultimately rewarding enough; For React to interop with existing systems is a hard constraint at facebook, and these hooks allowed React to take off.
\n# Q: What do Facebook use OCaml/Reason for, and why use them over JS/haskell etc? - Limes
\nA: Facebook uses Reason for messenger.com and [censored]. Yes, that means what you think it means with all its implications. If you'd like to see more, come to the Discord reasonml channel =) Same answer, as to why over JS/haskell. You'd have to see it to believe it. I have a talk or two coming up this year that'll go into this topic in depth. It's hard to convey all the nuances over q&a answers for now, sorry! But we're keeping our mouth relatively shut to iterate and polish Reason more. Until then, have faith in the person who delivered you React (Jordan)
\n# Q: Maybe unrelated, are there thoughts about making messenger.com a desktop app? - leblaaanc
\nA: There are currently web page wrappers for messenger.com, but they might or might not have some broken layout. We don't have plans to officially maintain a wrapper ourselves, for now. I personally ping the messenger.com tab.
\n# Q: Would you still use react-tween-state, or is it outdated because of the use of mixins? - ChiefORZ
\nA: I don't personally use react-tween-state. Although apparently some others still do. JavaScript mixins (especially infused with React-specific logic) are a bit troublesome to deal with indeed, so I'd suggest you to avoid them as much as you can.
\n# Q: When do you think mixins will be deprecated in the React ecosystem? - ChiefORZ
\nA: I don't know the time line but I don't think they will ever be \"killed\", as in, \"your code will now error\". Once/if createClass is pulled out, mixins will likely stay in that as well. We care about existing code. While I'm on topic: I've installed a random React example Jordan made three years ago, and it still works today.
\n# Q: Should dumb components have methods? Doesn't it recreate a method each time rendering occurs? - stunaz
\nA: I think dumb & smart components are a tiny bit overhyped. I've personally lost more time helping people understanding this than letting people just write the components and move on to the next one ¯_(ツ)_/¯. So my vague answer is: they're not your bottleneck; fire up the inspector and check where your perf costs are!
\n# Q: Are there plans/ideas for React/Reason integration beyond BuckleScript? - Kjg531
\nA: Come into the reasonml channel. https://discord.gg/reasonml
\n# Q: When Reason comes out is it safe to say Reason Native will as well? - Alon
\nA: lol... come into the reasonml channel. https://discord.gg/reasonml
\n# Q: What Redux middlewares are preferred for which use cases at facebook internally? (caveat: I have no idea to what extent Redux is used at fb) - granmoe
\nA: we don't use Redux on messenger.com
\n(Reactions: 😱[5] 👍[5])
\n# Q: Do you recommend ES6 classes or React.createClass or stateless functions? Many seem to be against ES6 classes. What do you think about it? - AbsoluteZero
\nA: In the spirit of helping React split createClass into a standalone module (aka \"deprecating\"), try using es6 classes. I'm personally ambivalent. As for stateless functions: I feel the conversion to a stateful component from a stateless function is slightly much. They do look elegant though, so it's up to you 😃
\nMy next two talks (React-London and React-Europe) will tackle these in some way. This question is giving me answering paralysis as I'm not sure what to say in such a short amount of time. See you in March 😃
\n# Q: Say you're a large tech company (hundreds of 'products'), but you're not Facebook and don't have a monorepo. How do you go about sharing your React components effectively, independent of state management/frameworks? - Limes
\nA: I think you should start with your end goal, at the end-end of \"sharing your components effectively\". Realistically (and history has proven so), your component, if they're valuable enough to be reshared for years, will always have at least a tiny bit of library-specific logic, in such way that you can't just drop it into a brand new library/framework when the time comes. So I'd advise you, in the typical fashion of my last talk on abstractions, to go to the most concrete level and optimize for what you're currently writing. If you wanna move out of React, copy paste and add/remove the bits. You'd spend half an hour porting your component over rather than spending days wondering if there's an abstraction over all front-end frameworks.
\nGive yourself such thought experiment: can you execute as well as bootstrap & foundation & the rest? Because even if you do, people will still end up wrapping them for the idiomatic React API.
\n# Q: Do you use anything in particular for managing state instead of Redux? Relay? - Trappar
\nA: messenger has a bit of Relay but not much. Currently in Reason we haven't had the need for extra state management tricks (we have some secret recipes... again, more on that in March since I don't want to sell you some under-polished solutions that ends up churning you more than you'd gain from just using straight props, or redux, or whatever).
\n# Q: What are you most looking forward to in Front End / JS in t he next few years? - CPT
\nA: I'm biased, but I'm looking forward to Reason and there are a bajillion things to talk about for another time. Though I work on Reason because I thought it's gonna be the next thing. But I'd also like to look at current things! A stable ecosystem, stable tooling, and people building more great end-products using React rather than more development tools using React.
\n# Q: What's the next big thing in Facebook related to front-end development? - antonsekatski
\nA: See my above answer. I hope it's Reason! And by all means, if you check [censored] you'd see why. The first time I installed [censored] I was pretty much blown away 😛
\n(some chatter followed that answer)
\nvcarl: you tease
\nquicksnap: I'm so dense and can't figure out what [censored] is...
\nchenglou: it's pretty obvious in retrospect actually. It's really just a [censored] over [censored]
\nchenglou: Also, this might get lost in all the answers, but someone please try straight-on graphQL queries + key-value database + no subscriptions (full top-down re-render). I'll remember to thank you in around two years.
\nCPT: I do that for a lite widget application (with Rails and graphql-ruby)
\nchenglou: please tell me how that goes. Somewhere in there resides an obvious idea for state management.
\nCPT: This app has little to no state management so there's just a basic AppContainer which fetches on initial load, handles state at the top of the tree, and triggers a mutation upon form submission
\nCPT: For more intensive state needs I've fallen head over heels for Relay
\n# Q: Any time estimate for relay 2? - proprobe
\nA: No idea; you'd have to ask the Relay team. They're still working on it.
\n# Q: how would you suggest someone get involved in open source if they're not quite confident enough to contribute code? As a self taught developer as way of former poker pro, are there ways to help without getting in the way? - Kjg531
\nA: For once, I do feel qualified to answer this! I'll give you another piece of the puzzle in my next talk (or the next next, depending on what I order I prefer). But first, start with the documentations. A project's docs is one of the few places where you have more potentially more expertise than the project maintainers; they're writing the docs for you, yet you know best what your pain points are. Docs are also low-hanging fruits the maintainers sometimes don't clear out.
\nDon't believe me? For my first PRs to React, I basically pasted the documentation pages into Word, corrected all the red and green squiggly lines, and submitted that back. Then I pointed out I have no idea what a certain passage meant, so I corrected that too. Then it's the fringe features related to those documentations, then it's the core features.
\nFind a project you need (it might not be React), fix its docs, fix its fringe features. Aka, try a few concrete \"examples\" of contribution, then abstract over that when you're ready. Try a few more, abstract over that too. Then abstract over that abstraction. Divide and conquer.
\n# Q: What do you think about functional programming, its state now and in future? - AbsoluteZero
\nA: I think it's great, but I also think the current atmosphere is a bit like e.g. in math where a student insists that his/her way of calculating the area of a circle is the correct one. I personally am afraid of overhyping things and under-delivering. On that point: I've once told someone I was betting my front-end career on React (got me laughed at lol). Right now I'm betting it on Reason and it's still getting me laughed at. Btw, the \"O\" in \"OCaml\" stands for \"Object\".
\n# Q: Is writing React components in Reason a thing? - aitherios
\nA: Come to the reasonml channel (I see I'm getting pinged there already! I'll get to it).
\n# Q: Could you tell us what [censored] is by typing it a different way? - CPT
\nA: Like this? <censored>
Go to reasonml to see the uncensored version.
\n# Q: Functional React component with lifecycle methods? - aakashsigdel
\nA: For ReactJS or <censored>? I don't know for the former one; You'd have to ask the React team, which I'm no longer officially part of. But hey, your app will look the same even with functional React components with lifecycles right? So I woudn't be too worried and you shouldn't either 😃
# Q: Are stateless functions currently slower than classes and if so, will it ever be optimized to be as fast as classes? - AbsoluteZero
\nA: I don't know, sorry. Vague answer: depends on the context. I don't know how fast native JS classes are compared to babel-transformed JS, and I no longer know the optimizations of stateless functions. Seems like they shouldn't be slower though.
\n# Q: Piña Coladas OR Getting caught in the rain? - CPT
\nA: I've lived in Canada for half of my life. Rain is nothing, snow is nothing. Also I don't drink much; I don't have a balmer peak when I drink and code.
\n# Q: What made you chose React over Angular or other popular frameworks? What's the thing that made you say \"this, this is what I love about React\" - BTM
\nA: Aaaaah... It's weird but I've actually never had the \"EWWWW HTML in my JS?!?! Lemme show you exactly why this is wrong through my extended programming knowledge\". I've only noticed people didn't like it in retrospect. JSX was actually forcefully made by jordan after he got the internal feedback that people didn't like looking at trees of regular function calls too much (go figure). The open-source Reaction was a real surprise.
\nI chose React because (personally!) I felt like it \"made sense\". If you talk to me in real life, I have more opinions on this that I'll refrain discussing in a Q&A; some nuances would get lost. But don't forget that we're all in this together. As David Nolen once said to me (paraphrased), \"we all hold shit in our hands. Let's not get too eager comparing how shiny we can polish the turd\".
\nWeb front-end is hard. Some people's goal is to \"defeat native\". If such is your goal (it might not be!), you gotta sort out your internal (aka websphere) struggles first and stop seeing it as \"us vs them\". How do you expect competing against native if they're moving on as a cohesive unit and you're still discussing which car you should ride?
\n# Q: Is there an IDE for Reason? - stunaz
\nA: Reason comes with Atom's Nuclide. We have integration for VSCode (reaaaally legit, check it out), Vim, Emacs, and Sublime Text.
\nYour question makes me wanna go into a philosophical discussion however. But I'll keep it short: write in friggin notepad if you have to. The language and the compiler help you enough that they obliterate the need for some toolings. More on that another time.
\n# Q: Why did you bet your frontend career on React before? Why on ocaml/reasonml now? (disclaimer: I left my previous team after being put on a non-React project for 4 weeks. I left after one week. I understand) 🙂 - iamdustan
\nA: I think I was a bit hardcore and went overboard lol. I was also a bit salty that after promoting React to some famous companies they tell me \"nah, the ship has sailed\". Not important though.
\nReason is the past (and hopefully, the future) of React; The first iteration of React was writte in SML, OCaml's cousin.
\nI'd like to add something, which I don't think I will be talking about publicly any time soon, so I'm putting it here:
\nFirst of all, the obvious dislclaimer: I like JavaScript, blablabla. And I like seeing people build products. But somewhere inside me I'd like to see people \"learn\" also.
\nAfter all these years, the story seems to be that \"if we build and polish our things, then people will be productive\". Yes, that is absolutely true. But I can't recall the last time I've see things \"click\" in a big way for people, aside from that occasional \"oooooh component tree\" click I've seen when onboarding newcomers onto React. Nowadays it's mostly \"I love how this library solves the other problem I've had\". The missing chunk is \"what have I learned after installing this library?\". I don't really learn much anymore, they solve my problem and I move on, which is great (more concrete, immediately valuble, etcetc.), but it's always \"use, use, use\".
\nBut in Reason I've had these \"clicks\" on a monthly basis. It's great being able to use your university degree's knowledge again, and reason through your code the way the teachers taught. I sincerely thought it was gonna be unpractical a few years ago. It re-connected some disconnects. It's great that installing a library actually lets me \"learn\", aside from also solving the problem. I'll move on to the next question. See me in real life and I'll explain the nuances.
\n(my fingers are on fire)
\n# Q: How do you <Match exactly pattern=\"\"> (the parent match only, no sub /foo). The analog to matching pattern=\"foo\"... which could match /bar/baz/foo if the parent match was /bar/baz/:id?. I want to match when :id is blank
A: I don't know, can you visit that url in a browser? Open an issue and we can try to figure it out. @mjackson has been working on the prop and will support \"relative urls\" to the matched location, which might be what you're talking about
\n# Q: More React30 episodes when?
\nA: oh man ... we're so booked lately and have stepped up our OSS game so it's hard to find time for it all. We have a whole list of folks and topics we want to cover. I have no specific dates when we'll do the next one, but ... soon?
\n# Q: React Router v4 looks very cool. What's the idea behind the version 3 beta? Why not jump right into the work being done on version 4?
\nA: Version 3 is just version 2 w/o deprecation warnings. @timdorr is working on getting that shipped so he'd be better to ask
\n# Q: How do you feel about stateless functional components? You used createClass() in your last presentation. Do you prefer that over ES6 classes and SFCs?
\nA: So there are a lot of ways to create a component right? even the old-school 2006 \"module pattern\" works as a component. In our workshops we switched to classes about a year ago. It was a TRAIN WRECK! Bbecause understanding JS context is hard, and so people had a really hard time getting through the exercises. So then it gets us really introspective - if this is a pain in the neck in a workshop, what about in your actual code w/ your team?. I dunno! But anyway, we still use createClass in our workshops but we may be switching to classes because of create-react-app's support of \"class property declarations\", since that's getting a lot of attention...
\n# Q: Are there any actual benefits to SFC besides terseness?
\nA: seems like it's okay to use the \"not-yet-javascript\" that it uses
\n# Q: Does v4 have a solution for passing props to a component besides HoC? It'd be nice to do something like <Match pattern=\"/myprofile\"><Profile type=\"personal\" /></Match><Match pattern=\"/mypubicprofile\"><Profile type=\"public\" /></Match>. Passing component to <Match /> seems like holdover from the old way of doing things instead of rendering it's children. I may be thinking about this wrong. Awesome job to you and the team on this release. It feels a lot better.
A: looks up a gist, struggles to find the gist FOUND IT! :tada: Link. Read that, that's why we don't do the \"children as elements\" in the Match API. So class property declarations aren't JS yet, so we are hesitant to use them in workshops, but in my own code I use them and that's the only way I can bear to use ES classes because they make \"auto binding\" really nice. As for SFC - those are basically just really cool templates, right? So if I don't need the lifecycle hooks, and just need to tuck some \"markup\" away, a SFC is great. So I use classes when I need hooks and state, SFC when I don't.
\n# Q: Is there planned support for param default values?*
\nA: this.props.params.foo || 'foo' seems like enough?
\n# Q: That makes components less reusable
\nA: <Match render={(props) => <Component params={addDefault(props.params)}/>}/> Wrap that up in a MatchWithDefaults component - BOOM bob's your uncle
# Q: Outside of classes what's the most common point of confusion people have in your workshops?
\nA: Hmm ... hard to pick \"one thing\" - people struggle with just JavaScript itself. Like, not knowing there's [].map and [].filter, how to mess around w/ objects in J. React really throws JS back in your face and lots of people haven't done much ... uh ... \"real work\" with JS before. The other thing is probably what a valid JS expression is - we can say \"once you do {} in JSX, any valid expression can go there, because it's really just an argument to React.createElement\", but most of us haven't done very much w/ JS expressions before React. But the questions we get in a workshop are rarely react related, usually they're JS questions :joy:
\n# Q: Why isn't render children it seems more common than what is currently used for children?
\nA: Children in Match will always render if it matches or not - check out the animation demo.
\n# Q: Yes, i know I was just curious as to why the render prop and the children prop aren't reversed since so far the render prop seems to be used more and the children prop is more \"natural\"
\nA: We decided that since one rendred conditionally and the other was always, that children made more sense to \"always render\" since you typically expect that API. |
\n# Q: Scenario : I have login container that does part of login. After login, I want to switch to dashboard container. how do I do this? I have react router. If question is incorrect, suggest a post/gist that looks useful.
\nA: https://react-router.now.sh/auth-workflow
\n# Q: If you could wave a magic wand and fix one thing about the JS/React community, what would it be?
\nA: Aside from normal social justice problems that are just problems w/ the whole world, I guess I don't know what's broken! I love both JS and React communities, so much exploring, so many ideas. It's a blast to be a JS developer today - so I would leave the wand in its case probably.
\n# Q: This may be a sore subject, but I saw a lot of FUD around the RRv4 preview and Relay (lack of static route config?). Can you talk to (or point me to) the latest developments on that discussion? I'm not using Relay right now, but keeping an eye on it.
\nA: First of all, you can use <Relay.Renderer> anywhere in a router v4 app and it just works™. Heh, well, now relay has to solve it instead of us - that was actually really liberating for us to not be int he game of \"knowing what to render before we render\". Here's a repo I hope people who are interested in a static route config analysis will get involved: https://github.com/ReactTraining/react-router-addons-routes |
To introduce myself a bit, I went to EPITA, a French school specialized on computer science where I learned a ton of things. During that time I worked for Curse and MMO-Champion. Right after school (4.5 years ago), I joined FB where I worked a bunch of things including React, React Native, css-layout, css in js, helping open source efforts of our front-end library, organized React.js Conf. Happy to dig into any of those projects in more details 😃
\n# Q: What upcoming React feature are you most excited about?
\nA: Definitely the Fiber work that Sebastian Markbage is working on. One of the big theme we're seeing is that in order to get better performance overall, micro-optimizations can only get you so far. The bigger trend we're seeing is that we need to enable primitives to be able to do scheduling.
\nThe typical example is if you have a listview, when you scroll quickly, what you care most about is what is on the screen. The naive way to do that is to start rendering a bunch of items when you have time in hope that it'll be there on time. Instead, what would be better is to schedule all those items and if some are going out of screen, pause their work to give higher priority to what's actually either visible or going to be very soon.
\nIt's also a full rewrite of the internals of the reconciliation part which has aged a bit with all the updates we've done to React over the years, it's all flowified and pretty 😃
\n# Q: Any thoughts on inline-styles / Radium / Jss / Aphrodite / css-modules conundrum? There will be an efford to drive the community? (like on core notes: 2016-04/april-28.md and 2016-07/july-21.md)
\nA: Yeah, so the story behind css in js is that at the beginning of React Native, I was way too lazy to reimplement a CSS parser and selector engine so I decided to start using styles written in js. At the time I had no doubts that I would need to implement CSS because, let's be serious, if we used CSS on the web there must be a reason. Fast forward a year, it turned out that not only did we not need to implement CSS but it also solved a bunch of issues we had with CSS.
\nAs we were going to announce React Native, I was dead scared that the announcement would follow the same as React where everyone talked about JSX and not React itself. So I spoke at a small conference: NationJS (really good vibe there btw) about writing css in js. I knew it was going to be controversial but I had absolutely no idea that it would generate an entire movement of people building out libraries around it. I mostly remained silent afterwards as I actually don't know what the best thing is. I would love to get to one standard of doing it though and we're going to look into it in the next few months as the react team
\n# Q: Why are you always wearing a hood when you are at work? Who are you hiding from?
\nA: I like looking like a gangster :p
\n# Q: Do you think RN Android will ever be good enough? 😃
\nA: Android has been for a while the primary focus of the React Native team, so it's improved a lot since the last time you tried it. There's one interesting project to take the Virtual DOM and send the draw calls directly to Android framework instead of creating a bunch of nested views. It's still in testing but I hope that we can ship it to the open source version
\n# Q: Do you think React will remove the requirement of wrapper div tags. In other words will there be a future where we can return a list of keyed components from the render method?
\nA: Yes! We do want to. The current status of this is that Fiber lifts this requirement. So we're waiting to see if Fiber is going to work out (it's still very much R&D) and if it does, then we will get support for free
\nIf it doesn't work out, we will implement it on-top of the current implementation |
\n# Q: Is your team in facebook planning to release a \"well-crafted ui widget\" library build on top of react?
\nA: I wish. There are interesting trade-offs in regard to a UI component library. A big reason why our open source libraries are getting traction is because we spend a lot of time and efforts making sure that the API is great and relatively stable and don't break it all the time. Stability is a big concern.
\nWe do have standard UI libraries inside of Facebook but we are way more lax in terms of API guarantees / churning people. The reason we're able to get this is because we have one repo and we can do codebase-wide changes when we change an API / deprecate one. If you hear the term \"codemod\", this is what lets us do that.
\nThe second big concern is around theming. Most of Facebook UI components look like Facebook. In the past we haven't had strong needs to make it theme agnostic since we only had fb, so it would be extra work to decouple the look and feel part from the functionality. Now that we have different ads product (instagram and fb), different websites like oculus, it may make sense to start this effort.
\nThe short answer though is, no anytime soon unfortunately
\n# Q: React Native: when JS is shipped with Native code, there is a weak coupling. nothing guarantees they are on the same version (it might break, at runtime). Is there something we could add in RN to make inconsistent JS<>Native fail by design (w/ Red Screen)? (like a version system? how can it be implicit)
\nA: I would love this to happen. In the past we've thought about where the source of truth should live for the API and went back and forth between js and native. But the truth is, we need both. I hope that we can leverage flow to be able to do that
\n# Q: RN repo now has over 1000 issues open (even though many are just questions). How does the team decide what is being worked on?
\nA: This is a really really tough issue. The react native project is blowing up way past what we expected and we're overwhelmed by all the activity. Our approach has been to create a title \"Core Contributors\" and give it to a handful of people in the open source community to help us with the load and we have a public but invite-only group in order to surface high priority issues: https://www.facebook.com/groups/reactnativeoss/
\nHaving core contributors definitely helped but it's hard to get external people to do triage for a long period of time as it's not a very sexy task. We also heavily rely on https://productpains.com/product/react-native to see the trends of what are the big things we should be working on
\n# Q: Do you have a plans to work on the product (like some facebook.com feature) for a while?
\nA: No concrete plans right now. My current focus is learning how to be a manager of the React team. I've been on the job for a month so it's very recent and I hope i'm going to be useful at this
\n# Q: Any news on React Conf? Venue? Dates?
\nA: We're doing the conf preparation right now, we need to figure out who is going to organize it at Facebook, where do we do it, what size, when, what do we talk about there, budget... Lots of unanswered questions at this time unfortunately
\n# Q: What are your thoughts about Relay with React Native? Would it be your to-go framework of choice?
\nA: When everything has been setup for you, working with Relay is the best thing in the world. You can say I want this, this and this and magically it's there! Now, the setup part is pretty steep, you need to have your data available through graphql, Relay doesn't yet support local data ('Relay 2' will though!), the babel transforms are not trivial to setup...
\nGood thing is that right now, a big focus of all the teams working on open source projects is around unification. I'm super excited to have create-react-app so that we can give a baseline experience where all those projects just work together with no setup
\n# Q: Is it true that the react team uses a klingon promotion policy?
\nA: I didn't know what it was (not a Star Trek fan) \"On the other hand you can get a Klingon Promotion, which means that if you kill a superior (or they die by some other means), you gain their rank\". Tom Occhino is still alive as far as I know :p
\n# Q: As a manager what percentage of your time is spent on programming?
\nA: When you transition to manager at Facebook, there's a lot of training and I need to figure out how to setup a roadmap for the team, get to know individual people... So I haven't coded much but I'm starting to get more coding time. I've been adding flow to the codebase ( https://github.com/facebook/react/pulls?q=is%3Apr+author%3Avjeux ). 77 files out of 222 (around 1/3) are now using flow The fact that you can mouse over variables in nuclide and see what type they are and can do variable. and autocomplete with everything is so great. Especially inside of the React codebase where we updated the naming convention several times so if a variable has the type ReactInstance, it can be called element, instance, component, you know what it really is
\n# Q: What percentage of your time is spent explaining the Facebook Patent Grant to people on the internet?
\nA: Haha, I've learned way too much things around patents than I would have wanted :p I wish I would live in a world where this wouldn't be a thing but unfortunately this is very very very real for Facebook and we're talking about huge amount of money. So this is a cost of doing business. The great thing is that we have lawyers inside of the open source team that are working on our side and we've been able to open source a bunch of stuff mostly pain free
\n# Q: Is React Native today lead by a product design or engineering design approach?
\nA: It's an interesting question. I would say both, but let me explain. React Native is driven by an engineering team inside of the infrastructure org. As such, people in the team have a lot of background around what are the patterns that product engineers struggle with when writing apps (both in React Native, web, iOS, Android...) and the solutions found are engineering solutions.
\nNow, you cannot build APIs in a vacuum, you need to have products using it and iterating on them. So it's essential to have product teams using those in order to design great APIs.
\nBut, I would flip the question around and tell you that the reason React Native exists (and all our open source libraries) is to make the life of product developers easier. Facebook wouldn't throw so many people at it if no one used it. So the way we work is to put the individual needs of product teams first no matter what. If they don't have a good experience using React Native or if it doesn't solve their problems, the project shouldn't exist at all.
\nSo you really need to have both sides to work together
\n# Q: Have you seen any projects with complex web forms built with React web? I know libs like #redux-form are popular for Redux devs, but the I find the choices a bit paralyzing in the scope of the whole ecosystem: https://github.com/markerikson/redux-ecosystem-links/blob/master/forms.md
\nA: The form situation is interesting. At Facebook we don't have a lot of forms in the traditional sense. The things that function as forms are usually heavily customized like the composer (the box at the top of newsfeed) and React works really well for those.
\nFor pure and simple forms, React is actually very verbose and has a lot of boilerplate associated. One thing I've done myself is to use the new html attributes on forms (required, type=\"date\"...) and make all those components uncontrolled and use the normal html form handling to push changes.
\nI'm actually surprised that React took off the way it has given that other libs are way better at handling forms which is a major use case on the web. I haven't used redux-form or any other form library so I can't really comment on them sorry
\n# Q: Is there planned support for react native dev-tools?
\nA: React dev tools do work inside of nuclide. We plan to have a lot of developer tools around react native inside of Nuclide to have a great experience. I haven't followed closely what those are so can't really give more information about it right now sorry :X
\n# Q: How do you feel about functional programming? Has it influenced React?
\nA: At school, I was in the R&D lab and my supervisor, Didier Verna, is a big name in the Lisp community and I learned a lot about functional programming from him. I really enjoyed that he had a very down to earth philosophy around it which is: use it when it makes sense but you don't have to do every single thing using pure functional paradigms.
\nI think this is well reflected inside of React (even though I had very little to do with it) where it makes use of composition, functional ways of iterating over things, works better with immutability but at the same time embraces things about \"imperative\" world like classes, you don't need to have everything immutable...
\nI think the best way to frame it is: does it actually solve a problem? If yes, are the trade-offs it introduces worth it?
\nJordan Walke who \"invented\" React is currently working on Reason https://facebook.github.io/reason/ which is based on ocaml which is a very functional language but also lets you write imperative mutations if you want to. They transpile to js and are working on react bindings fyi
\n# Q: Any plans on changing the current release workflow where FB engineers build/iterate for days/weeks/months, then release it via the public GitHub repo. You lose interesting information and communication for people who want to contribute. I think this discourages contributions to the codebase, but that could also be your goal 😉 I also understand that you don't want to show something too early, but would it possible to expose a \"canary\" type branch to the community so it can prepare for upcoming changes?
\nA: For React, all development happens on Github and we import master to fb every week-ish.
\nFor React Native, we have a folder inside of fb codebase that is synced commit by commit as soon as the commit lands, so we don't really build and iterate for days/weeks/months in closed doors. We are sometimes doing this for experimental and larger changes (like the Android view system I talked about earlier) mostly in order not to churn the community if we decide to drop it down the line. There's a real cost to that.
\nMy big theory on this is that we shouldn't have to chose where the source of truth lives (between fb or github) and we should make both flows work well. We want fb engineers to be able to commit code without being aware that it's a github project and want to have open source people contribute to it without knowing it's mirrored on fb.
\nThe current system with react native where commits are synced all the time and the only thing that changes for github contributors is that the way to get it landed is to have the \"admin\" write @facebook-github-bot shipit instead of clicking the merge button is a good trade-off.
\n# Q: A follow up to @hkjorgensen's (above) question, do you have any insight into why Relay's release process for Relay 2 diverges from React and React Native, in that there is no public tracker for the release?
\nFacebook's approach to Open Source has been touched on already. But one thing i've found difficult to get use to (probably moreso on the GraphQL and Relay side of things) is the tendency to deliver big announcements at conferences/meetups, rather than on the web itself (blog posts, github issues etc). Is this a deliberate approach, or something that's just ended up happening? I think it creates the perception of a lot of things happening behind the scenes (Relay 2's changes are huge) without much community input.
\nA: This is a great question! The way we've always worked so far is to build projects internally and let the internal competition figure out which projects do and don't succeed and then open source them. We haven't in the past taken much community input early on in the process because there was no community around those projects. Now that there are, we should re-evaluate our ways.
\nFor the big announcement-style of releases, this is something that has bothered me a lot and I am not a big fan of them. The issue is that they are actually the biggest driver of conference attendance. If you organize a conference and release something shiny, then people will be excited and want to go there. We've seen this first hand with reactjs conf where we announced react-native and graphql/relay even though no code was available.
\nWhat we're trying to do is to work business as usual and if we are ready to talk about something, find the nearest conference that happens and actually talk about it there. This way it doesn't put too much pressure on the team to have to release on this exact time of the year and it also gives a round of press around the conference.
\nI hope it helps understanding what's going on
\nAlso, at Facebook we're usually really bad at setting hard deadlines to do something. Having the pressure of a conference which the date cannot be changed is a good driver for the team to focus 😃
\n# Q: What happens if developers actually use the DONTUSETHISORYOUWILLBE_FIRED constants?
\nA: Their code will likely not be accepted during diff review 😃 We have many layers of deterrent for apis we don't want used such as normal code reviews, lint rules, making the variable name scary, build errors... We use a combination of them based on how bad it is to have that code exist.
\nI highly recommend reading the bunny theory of code by nzakas: https://www.nczonline.net/blog/2015/05/14/the-bunny-theory-of-code/
\nIt basically says that once you have a line of code written, it's going to be duplicated and altered. So we need to find ways to limit that from spreading too much in different ways 😃
\n# Q: How do the React, Relay and GraphQL teams communicate? How do you all ensure parity with what each other is doing?
\nA: We literally sit next to each others, go to lunch together... We also have shared Facebook groups where we communicate extensively
\nThe managers also all report to the same manager so when doing roadmapping it's easier than when you are spread across organizations
\n# Q: Why does graphql sit with react and relay? it seems quite different
\nA: We are part of an organization called \"Product Infrastructure\" which contains React, Relay, Flow, all our core components on all platforms, GraphQL, Reason, React Native and I'm probably missing others. Our goal is to make sure that product engineers at Facebook can be productive and it turns out that the data layer and ui layers are very tied together
\n(Also, I'm not yet responsible for the org chart so this is mostly a guess :P)
\n# Q: What would be your recommendation if I wanted to leverage sass within JS/React? Best way to provide dynamic styles? Without having to revert to inline styles
\nA: I've never actually used Sass myself so I'm not familiar with the best practices. What I found worked well with React, and which we encourage with create-react-app, is for each component to have its own css file and have a unique name for each class.
\nIf you have a component called Button, then inside you do
If you need a style do be dynamic, you can do className={joinClasses({'Button': true, 'Button-pressed: this.props.isPressed})}
\nIf you need something dynamic, I would recommend using inline styles for those 😃
\n# Q: React Naitve: Is there something plan to improve RN upgrade (when having assets, configs...)? Right now I still have to init a new project and apply manually but it's painful... Other non technical question: why Vjeux as nickname since something like \"vieux jeux\"?
\nA: I'm super excited about this project: https://twitter.com/ncuillery/status/773522806034366464 I hope it'll spread and we can merge the ideas in the main repo. No current plans right now but we know it's a pain point.
\nI was 13 and needed a nick name for counter strike. I said, it's a video game which is \"jeux videos\" in French. I said, let's swap the two words \"videosjeux\" and only keep the first character \"vjeux\". It basically means \"vgames\" if you translate it literally. I kept it since then :p
\nI've never had anyone namesquat it before which is pretty crazy for a 5 characters name!
\nThanks a lot for organizing this, it's was a lot of fun. I hope that I provided insightful answers and it was interesting!
","frontmatter":{"date":"2016-09-08T00:00:00.000Z","dateGroup":"September 2016","dateString":"Thursday September 8th, 2016","description":"Facebook React Core Team\n","location":"Q&A Channel Reactiflux","people":"@Vjeux\n","recording":null,"time":null,"title":"Christopher Chedeau"}}},{"name":"joseph-savona","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2016-08-18T00:00:00.000Z","dateGroup":"August 2016","dateString":"Thursday August 18th, 2016","description":"Engineer @ Facebook, working on Relay & GraphQL\n","location":"Q&A Channel Reactiflux","people":"@en_JS\n","recording":null,"time":null,"title":"Joseph Savona"}}},{"name":"relay-team","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What are some testing strategies for Relay apps?
\nA: Great first question. This is something that we're still exploring. The most straightforward way to test Relay apps is to use mock data. If you pass regular data to a container, Relay will pass that through to the component as-is. So <Component user={{id: '4', name: 'Zuck'}} /> instead of a user that you got from a parent Relay component. Relay itself is well-tested, so we would encourage that products not focus on testing that the framework works, but rather that product code works as expected given sample data sets. This approach is well suited to unit tests.
\nWe've also found it useful to have one or two integration tests that verify the product loads.
\nBut in general this is an area where it would be great to get contributions from the community. If you've found a good way to test Relay components, share it! |
\n# Q: Could you elaborate on the client state story? It wasn't clear to me from Greg's slide deck.
\nA: We're still iterating on the API so details are likely to change - I'll talk more about this in my React Rally talk next week. For now, here's a bit more..
\n... we've found that for the most part, Relay applications have much less client state than apps purely using Flux/Redux. This is because much of the state is handled by Relay - server data is represented in the store, and the loading state, error handling, pending mutations, etc, is managed by Relay itself.
\nSo what we're exploring is the ability to extend the server schema with client fields, and allow developers to modify them locally via an imperative write API. More on this in the React Rally talk
\n# Q: What are the Relay team's plans for improving the developer experience, especially surrounding documentation? GraphQL was extremely easy to grok, but I've been struggling to understand relay for weeks. The current guide isn't a great getting started example.
\nA: We definitely understand that the documentation could be improved. The core team is primarily focused on improving the experience of actually using Relay (performance, APIs, etc). We only have so much time to focus on documentation and tutorials. I think this is a great place for the community to get involved by writing about your experience using Relay, creating guides, etc. We're open to PRs to improve the docs - feel free to send PRs or reach out to us if you're interested in a larger update.
\nHave you found any of the videos linked on the website useful? We found that examples help the most. If you have any specific question, I'm sure some people on #relay can help answer them.
\n# Q: Is relay 2 for web going to launch concurrently with relay 2 for RN, or only afterward?
\nA: We're currently focused on RN as we're excited about optimizations we can bring to phones, but there's nothing specific in the core for the environment. It should probably be directly usable for web as well
\n# Q: Can you explain how/if mutations are going to change in relay 2 or in the future?
\nA: Going forward (Relay 2) we are moving to static mutation queries. Instead of Relay synthesizing a query for you (from fat & tracked queries), the mutation will be basically what you write.
\nThis has its tradeoffs - so you will have to specify more in the mutation query, but the benefit is that
\na) the mutation matches what you expect\nb) it's easier to debug and\nc) we can \"persist\" the mutation query to improve performance
\n...as far as configs, we're planning to allow developers to write a lambda (function) that can modify the store after the server results are received. this means that if you need to manually re-sort an array or perform some complex logic you can. Not via convention. not via configuration. by writing straightforward code.
\n# Q: Currently on React Native, pushing a new scene that renders a Relay component makes the transition animation choppy is some cases. This happens with the 'old' Navigator API. Are there any future plans to address this type of performance issues on mobile, and what solution would you recommend today?
\nA: Two things: First, you can improve this today by integrating Relay and RN's InteractionManager. Use Relay.injectTaskScheduler(InteractionManager.runAfterInteractions) and Relay will delay its work during animations to reduce choppiness.
\nSecond, Relay2 is simply much faster. As @wincent mentioned in his talk, certain units of work may go from taking multiple frames to less than frame, so this should be much better when Relay work is happening in parallel with animations.
\nFor some additional context on the Relay 2 talk last night, I just uploaded the source code of my slides. You can see the speaker notes inline as HTML comments (eg. Github link. I've also pushed it to the gh-pages branch so you can see it at https://wincent.github.io/relay-2-simpler-faster-more-predictable/#2 (at least in Chrome), and the presenter view at https://wincent.github.io/relay-2-simpler-faster-more-predictable/?presenter#2 |
\n# Q: What do you see the respective niches for relay 2 and apollo client being?
\nA: Great question. First, there are some superficial differences between the two projects. As others have commented here, Relay currently has some limitations: the mutation vocabulary is somewhat limited, for example, and Relay requires that you follow certain schema conventions (best practices, really). In contrast, Apollo is a bit more flexible in terms of no schema restrictions and more expressive mutation configuration options.
\nWith Relay2, though, we've addressed many of these concerns. The new mutation API, for example, allows you to arbitrarily modify the store, so that you're not restricted to a limited set of changes. More importantly, the two libraries differ substantially in their philosophy and core use cases.
\nApollo was designed with an emphasis on allowing developers to get started quickly - without configuring any build step (no babel plugin). This means that you can drop a script tag into your html file and go. The tradeoff is that Apollo, by its fundamental design, has to do significantly more work at runtime.
\nIn contrast, our focus with Relay is on helping developers build high-performance production-ready apps. For that use case, a small amount of up-front configuration (the babel plugin) is worth it for the long-term scalability and performance improvements. As @wincent discussed in his talk (slides above), we've created a compiler that runs at build time and can optimize queries (doing work at build time instead of runtime) and we can optimize the runtime work in advance. We're still exploring all the opportunities this will enable. By starting from a focus on performance, we've been able to both simplify the framework and provide a solid basis for future advancements.
\n# Q: We have little visibility into Relay, what are some good debugging techniques around Relay when working with queries and especially mutations?
\nA: We recently added RelayNetworkDebug to make it easier to see all the queries Relay requested and the responses we are receiving. RelayMutationDebugPrinter should print out some of the intermediate mutation logic states for a peek into what Relay is trying to do with the different configs.
\n# Q: Are there any optimization done at fb on the native side for relay with RN?
\nA: Abstractly, we're working at multiple levels to extract as much performance as possible, both inside and outside Relay. No matter how fast things get, we can always be faster, so this is something that is going to continue for the foreseeable future.
\nBoth the Relay code and the React Native JS code that we use in RN internally at FB is the exact same code that gets shipped out in the open source versions of the projects. But at the same time, we have rich ecosystems of native code that we've been using to build apps for years (GraphQL has been powering the native iOS app for many years now, predating both React Native and Relay). As such, that means we have a diverse native + JS toolset that we can draw from in building an app. We can delegate the responsibility for some work from JS to the native side. An example of this that I mentioned in my talk is the ability to do \"native prefetching\" on the native side before the JS context has even initialized. Yuzhi also talked in the Q&A about our use of native disk cache to support offline use cases. This is an avenue that we're going to continue to explore.
\n# Q: Is there a way to initialize the Relay Store from persisted state akin to Redux's initialState?
\nA: Not directly, no. The two main use-cases we've seen for this are offline caching and server rendering - both of which are supported. For caching, Relay supports a disk cache API (semi-public at the moment). Some people in the community were starting to work on an OSS implementation (i'll try to follow up with a link).
\nFor server rendering, check out https://github.com/denvned/isomorphic-relay/ which supports populating the local cache with data fetched on the server.
\n# Q: Any updates on managing subscriptions?
\nA: We updated the GitHub issue yesterday. Copying the description I wrote there:
\nRealtime data in GraphQL is something that we and the community are actively exploring. There are many ways to achieve \"realtime\" or near-realtime updates: polling, \"live\" queries, or event-based approaches (more on these tradeoffs on the GraphQL blog). Furthermore, there are a variety of transport mechanisms to choose from depending on the platform: web sockets, MQTT, etc.\n\nRather than support any one approach directly, we would prefer to allow developers to implement any of these approaches. Therefore, we don't plan to create a RelayMutation-style API for subscriptions. Instead we're working create a \"write\" API that will make it easy for developers to tell Relay about new data (along the lines of store.write(query, data)). See #559 for more information.\n\nFor now, we recommend checking out @edvinerikson's relay-subscriptions module.\n# Q: When I looked into Apollo, the biggest issue I found was that mutations had to \"know\" about the data on the page in order to update everything correctly. Relay's fat queries avoids this problem. With fat queries going away in Relay 2, are we still able to get this magic?
\nA: Great question, there are a couple aspects to this.
\nIn Relay2 developers will have to specify the full mutation query, which means knowing about all the things that may or may not have been queried by the application. That's an intentional tradeoff: having a static mutation query enables more potential optimizations. It's also far more predictable. While the magic of fat/tracked queries is cool when it works, it's hard to debug when it doesn't.
\nSo overall, we think that static mutations queries are a really great compromise. This is how our native GraphQL clients have worked for years, so this approach can scale. |
\nThe other aspect is interpreting a mutation response. If you add or delete an edge, you have to tell the store about it. Apollo's approach is very direct - mutations are responsible for knowing how to update data that may exist in the store.
\nWith Relay2, we're exploring an approach where mutations express intent instead. For example, this means if you intend to \"add\" an item to a connection and that connection doesn't exist, the intent can be ignored. If the connection is fetched, it can interpret that intent and add the item.
\nWe think this a more flexible and scalable solution, as it allows for updating nested connections more efficiently.
\n# Q: The hard part seems like – if i hard-code the mutation response query, but then somewhere else i have a component rendering that connection, that then adds a field that wasn't previously there and thus wasn't in the old mutation response i'd end up trying to render something that's missing. So how does one ensure that these things stay in. I’d end up trying to render something that’s missing. so how does one ensure that these things stay in sync?
\nA: Yup. As I said, its a tradeoff. A mutation query can include a container fragment, so that it stays in sync with the component.
\n# Q: Do you have any rough estimation when Relay2 will be available? Like this year? Next month?
\nA: Our goal is to ship production apps using this during this year. So hopefully roughly on that timeframe, but we'll give more detail as we have a better idea.
\n# Q: Is low internet connectivity supported in Relay? I might have to build our app up to the point when there's next to no internet access, to fetch data only when the client gets access to internet.**
\nA: Supporting low-end mobile devices and/or slower internet connections is definitely a priority. We discuss this in more detail in our recent blog post - https://facebook.github.io/react/blog/2016/08/05/relay-state-of-the-state.html#mobile-perf
\n# Q: Is there planned Java support for Relay/GraphQL?
\nA: Relay is specifically targeted at JavaScript environments. GraphQL, however, is a language agnostic technology and there are Java and Scalar implementations.
\n# Q: How do persisted queries w/relay 2 look from a full-stack perspective? it seems like there's an orchestration requirement for the persisted queries to be released on the graphql server before the front-end release. Given that, is there some fallback or other edge case handling if e.g. that deployment failed?
\nA: The main aspect that requires orchestration is around schema changes. If you add a new field/argument/type/etc and then rely on that in client code, you have to push the schema changes to e.g. staging/prod before shipping the client code that uses it.
\nPersisted queries don't require code deployment. They can be saved in a database (associating an ID with a given query text) and a generic endpoint can retrieve the query text for the input query ID, execute the query, and return the results.
\n# Q: In conjunction with using GraphQL, did facebook move all their data from \"(n) database\" to GraphQL as a mirrored dataset? or is GraphQL sort of like translation layer for document datasets?.. Or other?
\nA: Note that GraphQL is not a database. It's a layer that abstracts access to your existing data store (or stores, or REST endpoints, etc).
\n# Q: Relay even though it appears as a simplified dataset, do you feel this actually improves debugging your existing dataset? It seems like a fairly complex wrapper over your existing dataset. Potentially adding more complexity to an already complex workflow.
\nA: Yes, we've seen that Relay enables developers to focus more on their product, and less on repetitive and error-prone aspects of data-fetching, caching, consistency, etc.
\nFor simpler applications the added complexity may or may not help - use it if its helpful.
\nThere are some really nice high-level videos on GraphQL here: http://graphql.org/docs/videos/
\n# Q: Could you compare GraphQL/Relay to falcor et all? Or point to some good talks/articles/etc...
\nA: GraphQL/Relay and Falcor both aim to solve similar use cases - efficiently fetching data from a server and caching that data on the client.
\nA couple key differences: GraphQL is strongly typed, which makes it possible to build all kinds of great tools (like GraphiQL) or inspect the schema to generate native code or optimized JavaScript.
\nGraphQL & Relay are also designed to allow efficiently fetching data in one round trip, whereas Falcor's use of Observables encourages more round trips. Falcor is therefore more suited to low-latency, fast networks - GraphQL/Relay are more suited to general connectivity.
\n# Q: @wincent, one of your slides entitled \"DataLoader and caching\" depicts a cache b/t DataLoader and the Storage layer.. Would DL have loader objects (for Redis for example) that delegate to loader objects for (for SQL let's say) if there's a cache miss?
\nA: In the simplest case, DataLoader will just cache stuff in memory (in process). That is very helpful within the context of a single request. In a real system, your data-fetching methods probably have an additional layer of caching (for example, memcache in front of MySQL or similar). Your Redis with fallback to SQL would be another fine example of that.
\n# Q: Is there any interest in integrating with the typing information in TypeScript?(similar for flow, but i'd like to be smarter with my flow annotations for props that are relay objects) By using type definitions from TypeScript to generate the GraphQL definitions? Is that how it works? You mentioned that it was strongly typed...
\nA: We have a prototype of integration between Relay and Flow that our amazing intern Sam Pepose built this summer, so hopefully this could also be adapted to work with Typescript. We're still iterating on this though, so no clear timeline.
\nAnd yes, the idea is that it uses the GraphQL type system to understand the shape of the data that Relay containers will receive as props.
\n# Q: Do you plan to add more escape hatch in Relay? Especially around cache and manipulating underlying data store. e.g. to workaround server not (yet) fully compliant like mutation where you can't express the full impact.
\nA: Yes! For Relay2 we are exploring an imperative mutation API that allows developers to make arbitrary changes to the store if necessary. For simple cases the current config is appropriate, but there will be an escape hatch to write arbitrary data if necessary.
\n# Q: I've heard it mentioned on several occasions that authentication flows (login/logout) aren't a good fit for GraphQL. But I have in-progress implementations that seem to work fine. But it feels like i'm in a bit of a limbo as to whether i'm implementing an anti-pattern or not - i've yet to find an explanation as to why it's not a good solution (aside from the nastiness of updating context post-mutation on the server), are you able to clarify this?
\nA: The main issue with using mutations for login/logout is that these actions can effectively invalidate the entire cache - so while yes, you can implement login/logout as mutations, we've found it helpful to model these outside of GraphQL.
\nWe wipe the cache before/after these actions to ensure data is correct for the given authentication state.
\n# Q: True, but i've split my entire graph up into public, private and viewer-specific types, so I know exactly what would be affected
\nA: If that works for you, that's great! Doing auth outside of GraphQL is just a recommendation
\n# Q: Is it feasible for Relay to approach fragment composition in such a way that would eliminate the need for developers to write ${ChildComponent.getFragment('childFragmentName')} ?
\nA: I don't think DataLoader would handle the orchestration; it just wants you to provide a method that delivers a promise of an eventual value, and it's up to you to provide an implementation. It's all going to be implementation-specific of course, but I imagine it would generally easier to wrap the cache and the store together behind some overlaying abstraction. An example of that at FB would be TAO (https://www.facebook.com/notes/facebook-engineering/tao-the-power-of-the-graph/10151525983993920/), which uses memcached and MySQL under the covers.
\nQuestion - What would they write instead? or were you thinking about having Relay infer it?
\ninferring it
\nIt isn't clear how Relay could infer fragment composition.
\nHave you seen the fragment syntax in Relay 2? (ie. ...SomeOtherFragment)
\nSo it doesn't address your point about inference but it does make the syntactic cost of referring to other fragments lower.
\nThe main issue with inferring is, for Relay being able to optimize the queries, it would need to know what the component exactly needs... That is why you are composing the fragments from child components. Otherwise, you would need to define a fragment somewhere and then everywhere use that fragment, fetching everything rather than just what you need...
\n# Q: Is there a realized lift in dev productivity when using GQL/Relay, namely for React comp authoring? I mean, if all the schema/data is already there, it seems like a dream
\nA: It's hard to measure quantitatively. But yes, we've found Relay to help our teams move fast - that's why we keep investing in it 😃
\nWe've heard lots of great feedback from people using it outside of FB See for example, from https://fabric.io/blog/building-fabric-mission-control-with-graphql-and-relay
\nFor a project like mission control, GraphQL and Relay were a near-perfect solution, and the cost of building it any other way justified the investment. Now that we have these pieces in place, we see ourselves using them again and again.
","frontmatter":{"date":"2016-08-18T00:00:00.000Z","dateGroup":"August 2016","dateString":"Thursday August 18th, 2016","description":null,"location":"Q&A Channel Reactiflux","people":null,"recording":null,"time":null,"title":"Relay Team"}}},{"name":"lee-byron","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What’s the status on adding a field like __id to the GraphQL specification?
\nA: That idea has been tossed around a few times, so I think it's worth writing up as an RFC, that's something I'm actively working on. All changes to GraphQL go through a formal process of Idea -> Strawman -> RFC -> Spec change with review along the way. Right now __id is around the idea phase, but it sounds like it's a good one, so I'm excited to see it move forward and help answer more questions
\n# Q: Whats it like working on three of Facebook's biggest externally used software developer projects?
\nA: Busy! But a lot of fun
\n# Q: Do you have any interesting insights on the differences between Falcor and GraphQL?
\nA: I'm a big fan of Falcor. They're solving very related problems as well. Falcor's simplicity is really elegant and leads to some super clever caching strategies. GraphQL's strong types leads to great tools.
\n# Q: Do you think the immutable docs will ever add regular javascript examples for methods on immutable data-structures? Currently lots of the methods just have typescript notation signatures on each method. For people who aren't using typescript you alienate them. I've myself had to go through SoF many times trying to see examples of some of the methods in action because I couldn't/not familiar with the typescript notations.
\nA: I certainly hope so but that's not at the top of my personal priorities. If someone wanted to submit PRs to add that kind of thing to the documentation I'd be really excited
\n# Q: Do you know of any resources available for hooking graphql up with websockets?
\nA: I haven't seen anything like that yet, but that doesn't mean someone hasn't written something up that I haven't seen. I personally haven't been experimenting with that
\n# Q: Is data normalization something you are thinking about for GraphQL considering clients are manually normalizing data (e.g. Relay and Apollo)?
\nA: Yeah - there are some difficult issues normalization brings up that different clients have been solving in different ways (to achieve different things; tradeoffs) so it's seemed like the right decision to allow clients to specify their own normalization strategy - but normalization has been a frequent topic of discussion through the years
\n# Q: What happened to your ecmascript proposals for immutable data-structures? Any chance you'll champion them again?
\nA: Sebastian Markbage has been the champion of those proposals - I support him when I can, but he's still working on them! https://github.com/sebmarkbage/ecmascript-immutable-data-structures
\n# Q: A react+relay+flow project ends up using 3 incompatible type systems – flow, graphql types, and react proptypes; do you have any advice on how to optimally deal with this?
\nA: I prefer flow over proptypes. So I don't use proptypes in my react projects, I use flow instead. GraphQL types describe a different domain, so they're not as easily unified - but our intern on the Relay team has been looking into generating flow types based on the queries you write which is super cool and really similar to what we do in our native apps that use GraphQL at Facebook, hopefully that works out and can be shared in the near future
\n# Q: Is there any application in production (Facebook or not) whose architecture you may describe as an Immutable app architecture?
\nA: My talk on immutable architecture is based in many ways on our primary iOS app, the News Feed portion of it in particular. It uses ComponentKit (which I like to refer to as \"React ObjC\")
\n# Q: Are there any new personal-projects or facebook-projects you are working on that you are excited about?
\nA: yes! I can't help myself. You can stalk my github page for stuff I'm kicking around on the weekends. iterall and flow-remove-types are two recent ones, testcheck-js is an oldie but a goodie that I hope to find time to revive soon
\n# Q: Where do you see React and React Native going?
\nA: The React team's goal is simplifications and optimizations - so simpler React with fewer concepts and faster performance. React Native is focused on performance across all platforms
\n# Q: How far would you go building mobile app using react-native?
\nA: I'm not sure I understand the question but I would go as far as to build mobile apps in react-native 😃
\n# Q: Relay transpiles queries to add an id field, as this is a feature that could be useful to many GraphQL clients, may GraphQL ever auto-inject an id field on supporting composite types?
\nA: No, GraphQL will never auto-inject fields as that would break some of its core guarantees, but I strongly support the query compilation and optimization phases that Relay and Apollo help you perfom
\n# Q: Is camera, gallery, and voice API's for react-native ever going to come? They seem like some of the things that most apps use in some way but react-native doesn't have those features in the API without using 3rd party.
\nA: I have no idea! I'd suggest asking in the react-native github. I believe their plan is to avoid attempting to cover the entirety of native APIs and instead embrace third-party extensions
\n# Q: Is explicit null still on the horizon for graphql? what about map types?
\nA: The null literal is still an open RFC and there are some sticking questions, it hasn't been the highest priority RFC so it's been languishing a bit, but its still in consideration. Map type has come up a few times in RFC and failed each time. Each time seems to be more convinced that it adds more complexity and cost than value
\n# Q: I vagely remember having stumbled upon some github comment that stated you are working on an open source Hack implementation of the GraphQL engine. Is this something you know anything about?
\nA: No explicit plans for open source yet, although that's in our team's aspirations! Jan Jergus on our team has been building a brand new Hack impl of GraphQL that will power all of Facebook's production traffic. Once he's accomplished that goal, he plans to open source it
\n# Q: Speaking to iOS development, can you recommend open source libraries that can be used to apply the same principles used in react, redux to native (swift or ObjC)?
\nA: I don't spend a lot of my time in ObjC lately so I may not have the best answers and not sure about a corollary to redux, but ComponentKit is what you're looking for if you want a corollary to React - http://componentkit.org/
\n# Q: Any good compsci books you recommend reading?
\nA: I don't read a lot of compsci books, but found The Little Prover a lot of fun and enlightening recently - https://mitpress.mit.edu/books/little-prover
\n# Q: For advanced graphql features like @batch and @defer, is the path to get them in open-source graphql for the community to contribute PRs? if so, are there more detailed resources for how they should work, beyond your react europe talk?
\nA: The path is experimentation first (via forks is fine) and then to start an RFC process. I personally find it easier to write code to explore an idea and work out problems and then work backwards to strawman and RFC. My react europe talk was about the beginning of some of that experimentation process - still very early! One of the things I hope to do, but haven't succeed at yet is try some of those experiments in production with Facebook products first to see what real problems fall out
\n# Q: It seems like the Facebook projects you have the most influence on (GraphQL, ImmutableJS) have a very different coding style than codebases like React, React Native, and Relay which are all have similar styles. How does your coding style differ from that of Facebook’s?
\nA: I've been writing code at FB for many years now so I think my style and its style have become one in the same. Immutable was a bit of an experimentation with writing ES6 code before the spec, and GraphQL was the first open source lib to be fully based on babel, so that may have something to do with it
\n# Q: Hack graphql again | Do you know if it will be a completely new kind of API or resemble the graphql-js quite nicely?
\nA: The Hack GraphQL server is based on the graphql-js codebase, but has hack-specific differences. I think it will feel familiar but have some difference
\n# Q: Is there any test case set can be used for validate/certify a graphql implementation?
\nA: There isn't one yet, but that would be an awesome thing to contribute for an emboldened community member!!
\n# Q: I find the documentation for somone getting up to speed with GraphQL and Relay to be some what confusing at times because it doesn't provide the steps. Then I tend to hop from one blog post to the next looking for focused example. However, Steven Luscher presentation, 'Zero to GraphQL in 30 minutes' knocked it out of the park by explaining the steps involved with why he was performing a particular action. Thus, are there any plans on the roadmap for making the onboarding experience for GraphQL and Relay better?
\nA: Totally agree with you. I'd love to see major improvements to the learning experience for graphql/relay. That's something I hope to spend my time on over the coming months
\n# Q: Where do you go (blogs, videos, etc.) to learn new things and get new ideas about programming?
\nA: I stumble upon them like the rest of us, usually via twitter links. I often stalk the talks of some of my fav speakers or conferences as well
\n# Q: I'm curious on the topic of caching GraphQL results, specifically on the server-side or in-between as a proxy. Any thoughts/projects that come to mind, or best practices from FB?
\nA: We don't cache GraphQL results in a proxy at Facebook since each user gets a different result and data is volatile and changes all the time - though we do cache heavily the backing data itself, so often GraphQL is working on data it gets from a very fast cache layer
\n# Q: Are you guys planning to completely rewrite the Facebook mobile app with React Native?
\nA: No we're not planning to do that, but we are looking at targeted areas of the app where a rebuild is already necessary or a new product area is being introduced where RN might be a good fit
\n# Q: Any chance you can add a few simple examples to GraphQL + Data loader? Its kind of hard to follow the SWAPI data-loader usage.
\nA: The Swapi was supposed to be a clear example of using them together, but if there are confusion points please open issues on those GH projects!
\n# Q: So, is data loader more applicable to Relay being that it's used for fetching the data from the server and GraphQL is simply the mechanism for query the data from the GraphQL server?
\nA: DataLoader is a server-side concept for reducing over-fetching and adding per-request caching. Relay is a client-side concept. Each is fully independent of one another
\n# Q: How do you scale the GraphQL API at Facebook?*
\nA: One important aspect is that GraphQL is a \"stateless\" API. That is handing a second GraphQL request knows nothing about the first. That allows us to swiftly scale up machines (as long as our load balancers can keep up). Also GraphQL is a really thin piece of software that sits atop our existing \"monolith\" web and data service (aka facebook.com) which already has tons of people and smarts being scaling it effectively
\n# Q: To what extent is GraphQL used on the \"main\" Facebook app (facebook.com)?
\nA: GraphQL is used in bits and pieces of facebook.com, but most of facebook.com is still server rendered for performance and practical reasons and thus doesnt require a client-to-server data request language
\n# Q: What kind of insights do you provide developers at Facebook when developing GraphQL related code? (e.g. performance of certain types of queries, fields that are never queried, etc.)
\nA: That depends - for those working on building GraphQL types and adding to the API, we have a lot of best practice docs that are the result of an older habit of meeting with every team and reviewing their API and learning from mistakes. On the client the best insight is to keep GraphQL fragments as single-purpose as possible and as close to the code that uses it as possible - we sometimes refer to this as \"colocated fragments\"
\n# Q: How often is the GraphQL API the performance bottleneck at Facebook?
\nA: The GraphQL API is a small part of the whole end to end performance experience, and I don't think it's ever been the bottleneck - though many aspects around it are constantly and continuously tuned for performance - such as the database access patterns the GraphQL executor makes (thus inspiration for DataLoader) and just trying to use the network as efficiently as possible when we're talking about mobile devices. One cool thing that we do - and this is a little nuts - Mobile devices send a UDP packet to our GraphQL API at the very beginning of a query, and that starts queuing up a request, and by the time SSH handshake and a full TCP connection has completed, it's already almost done. We had to configure our load balances to pin incoming IPs to the same machine for a short window of time to make that possibl, but that was a pretty cool network layer optimization
\n# Q: Is that dangerous though, say if the handshake failed?
\nA: It's not dangerous since UDP is one way. If the handshake fails or the query never arrives, then the result of running the query is just lost. UDP packet sets enough info to know which query needs to run (assuming persisted earlier, stored procedures style) and the variables in use
\n# Q: What about from a DDOS perspective?
\nA: FB is pretty resilient to DDOS. You can also DDOS via plain ol TCP 😃. We have many protections in place for DDOS. At this point we're less worried about DDOS and more worried about data scraping hackers, we have protections for that as well - they are overlapping problems
\n# Q: You recently gave a talk about possible solutions for subscriptions or 'live queries' in GraphQL. Could you roughly estimate when one of those possible approaches will be implemented in graphql-js and Relay ?
\nA: Sometime between 6 months from now and never. Honestly it's impossible to know - a lot of those are crazy ideas that might flop
\n# Q: Any chance the data-loader functionality will be embedded into graphql so that we don't have to wire it up manually?
\nA: No, data-loader won't be embedded into graphql directly. GraphQL doesn't have enough information to know how to most efficiently set up your loaders, and I think composing two technologies that work well together is a better long term strategy than making one monolithic technology that makes choices for you
\n# Q: How important is GraphQL parsing speed, or are query documents at Facebook cached?
\nA: Parsing speed is important! query docs at Facebook are cached, but they're cached in the form of query strings, so they're parsed before running
\n# Q: Have you seen implementations of GraphQL servers getting downstream data from another GraphQL-based service? Any concerns you can see with that type of approach? Maybe a lack of transparency of what's happening behind the scenes.
\nA: I haven't actually seen that first hand though I've heard of people talking about doing that. I can see why it would be interesting or valuable, but it also makes me nervous. I don't think GraphQL is likely to be the best choice for service to service communication - in those scenarios the network is cheap/fast and cpu & memory is the bottleneck. GraphQL is a trade in the opposite direction - it optimizes for the network - which is exactly what you want if you have to communicate over the internet, but maybe not if you're communicating over a 50' fiber line. Though - that said, GraphQL gives you some benefits beyond just network optimizations and so I still see the appeal
\n# Q: How do you handle graphql query-to-request batching internally?
\nA: We have a batch API. Actually we have 2. Both have serious flaws. There's a (lower pri) conversation internally about improving those or replacing them with something that solves the issues we're seeing internally - and that conversation should guide a specced batch API as well. In the meantime, I think it's probably cool to roll your own ideas - GraphQL is agnostic to the network protocol on purpose to enable exactly this kind of experimentation. There's no need to wait for express-graphql to add the feature to start making good things, but I do want to make sure whatever we add to express-graphql we're incentivized to maintain by aligning with how things work internally.
\nI know it can be frustrating that our team at FB is a bottleneck to ideas entering upstream, but I hope that it's the right tradeoff in the long term
\n# Q: Do you know anything about the new mutations API the seems to be in the works for Relay? I can find lots of references to it in the meta docs, but not many links to stuff that can tell me in which direction it is heading.
\nA: I know that's something the team is working on right now, Joe Savona in particular (@en_js on most things) so you might ask him
\n# Q: What upcoming or in-development GraphQL change are you most excited about?
\nA: I'm personally most excited about @defer in terms of truly enabling new things in GraphQL - there's still a ton of open questions and uphill implementation challenges ahead, but providing client-defined streaming semantics to data I think will be big value. Though outside the GraphQL spec itself, I'm really excited about the work happening on GraphQL clients. I'm really interested to see how the native app variants of Apollo turn out
\n# Q: Do you think theres room for GraphQL Client with small API surface?
\nA: As opposed to Relay and Apollo? Absolutely! That's a common question I get. I always tell people that if you can send a network request, you should be able to use GraphQL. Consider how much client API you typically use when using a standard REST api. If you've built something that uses a REST API and just uses XMLHTTPRequest() as the whole API, then there's no reason you can't do that with GraphQL as well. https://github.com/kadirahq/lokka is another less cited GraphQL client that's smaller in surface area (and does less things) than Relay/Apollo
\n# Q: I'm building a graphql api with subscription support that uses websocket or equivalent. would you recommend sending normal queries and mutations via normal http, or should those go over the websocket as well?
\nA: I'm not sure! I've never tried that before, so I'm interested to see what works best for you. At Facebook we send subscriptions over a live connection, but we use standard http for queries and mutations, but that's mostly out of network topology and scale purposes I believe. I think it's an open area for exploration
\n# Q: (Not technical) what's the history behind all your bowties?
\nA: bowties are cool! I don't know if there's a history there, I just like them
\n# Q: Thoughts on graphql-compose? https://github.com/nodkz/graphql-compose
\nA: I haven't seen graphql-compose yet! Homework for me, thanks 😃 I really like https://www.knottyco.com/ - It's a one man shop, but they're really nice
\n# Q: You wake up next week and for one reason or another, you no longer work at Facebook... What sort of project(s) would you start working on?
\nA: Great question! I have to think about that. All my projects are motivated by trying to solve real problems - Facebook is an endless source of interesting product, infra and scale problems which has fueled my curiosity and led me to a lot of the projects I work on now. I'd probably get interested in a product area first and find something that I care about, and then ultimately get sucked into the trap of trying to rebuild it and in doing so stumble upon another product that consumes all my time. I'm fascinated by mobile and social products because they're pushing a bunch of questions we've not had to solve before. If all else failed, I'd probably end up designing a new programming language - I think that's the ultimate form of nerd catnip
\n# Q: I noticed you've done some work on errors in graphql-js recently. Do you have a preferred way of formatting errors so that they can be parsed and displayed to users?
\nA: Yeah there have been some quirky bugs in graphql-js errors that I finally got all polished out. I'm philosophically opposed to showing system errors to end users. That's almost always completely unhelpful. Errors are always for developers or for the code they write. So the goal is to include structured metadata that programs can use. For example if you wanted to adjust cache behavior based on errors - that's a worthy goal errors should help with. But if you want to show error messages to users then you should probably find ways to encode that directly into your schema rather than try to use developer errors directly or you'll likely end up with a poor UX
\n# Q: Lee, can you give us a direction on this issue so we can implement the PR that can be accepted in the official express-graphql repository. http://github.com/graphql/express-graphql/issues/101
\nA: I haven't seen that issue yet so I'll have to take a look. Generally the goal is to keep graphql-express as simple and composable as possible, so PRs that make express-graphql more general and composable are priorities and the opposite are given tough scrutiny to see if they can't find a general solution 😉
\n# Q: How do you manage schema duplication between your graphql layer and backing services at FB? i find myself effectively declaring all of my object schemas twice now that i'm using graphql
\nA: Our backing services often have similar forms but different enough that they warrant being declared separately, also our backing services tend to evolve quickly and our GraphQL API needs to be very stable, so it's helpful to have them declared separately to avoid breaking clients. That said, we do have tools to help unify them when it makes sense to do so - we can auto-generate parts of our GraphQL schema and our backing service schemas from one source of truth in some cases.
\n# Q: Can you give some more insights into how the subscriptions set up at facebook works in broad terms? I get that I can more or less implement them in user space at the moment, but I still have a few things I can't wrap my head around. Ie. what does the original request to register a subscription look like (Do I just send the subscription graphQL query - which then does not get the result it specifies in its query body) and what about unregistering?
\nA: You should watch Laney's portion of our React Europe talk from this year she goes into fair detail about what actually happens in a subscription in a couple slides. The basic flow is that at app build time we store all our queries including the subscriptions, and we have a custom service we use for subscription subscribing/unsubscribing. To that service we send the stored query ID we're interested in and the variables for it, and we get a handle that we can unsubscribe from later - the full subscription query is run every time the underlying pubsub system gets triggered. So the actual subscribing and unsubscribing happens outside of graphql, via a custom pubsub service we built at FB
\n# Q: What technology do you use for subscribing outside of graphql for subscriptions?
\nA: We have a custom pubsub service we built at Facebook for that
\n# Q: Are there any interesting projects in use or under development at Facebook that are not currently open sourced?*
\nA: Always! but unfortunately I can't talk about most of them. One I can talk about is our iOS and Android GraphQL SDKs - there's too much about how they're tied to how Facebook works that keeps them from being open sourceable, but we do lots of interesting stuff with code generation to produce fast running code - Apollo team is learning from stories we've told them to help inform great ideas they already had for building their iOS and Android GraphQL SDKs
\n# Q: Do you have any thoughts on how GraphQL would work in a microservices architecture? In particular, I'm curious about having a single GraphQL microservice vs having a GraphQL endpoint per microservice.
\nA: In a microservices architecture GraphQL is a great fit as the \"API gateway\" piece - http://microservices.io/patterns/apigateway.html As discussed before, I think each service having it's own GraphQL API is maybe a questionable choice - though it could work. I usually advocate for Thrift or Protobuf or CapnProto for service to service
\n# Q: What do you think about relay v apollo for web apps/react native apps?
\nA: I'm a big fan of both Relay and Apollo - I firmly believe that a world with many GraphQL clients that make different tradeoff choices is a better world. If you're using JavaScript as your app's language then either could make a great choice for helping you organize and cache your GraphQL queries and data - they make different tradeoffs so you should understand what they do and why before making a choice for your project
","frontmatter":{"date":"2016-07-28T00:00:00.000Z","dateGroup":"July 2016","dateString":"Thursday July 28th, 2016","description":"Facebook Engineer - GraphQL Co-Creator\n","location":"Q&A Channel Reactiflux","people":"@leeb | Codementor AMA\n","recording":null,"time":null,"title":"Lee Byron"}}},{"name":"jonathan-carter_geoffrey-goh","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Oh hey i'm the guys who keeps complaining about CodePush making new releases when I'm building 50 apps simultaneously 😉
\nlostintangent: Hey! We hope to have that issue fixed as of React Native 0.29.0, now that we can reliably determine equivalence between different JS bundles 😃\nLeBlaaanc: yea we are waiting for some android modules to update to get 0.29 going, soon enough!
\n# Q: Can you go into some of the unique ideas of the React Native extension for Visual Studio Code
\nlostintangent: For now, we simply wanted to provide an authoring experience that also allowed easily debugging your code, without needing to switch contexts to another tool (e.g. Chrome)\nlostintangent: Chrome obviously provides a lot of benefits over what is integrated in VS Code today, but over time, we hope to figure out what folks are interested in seeing added 😃
\n# Q: Any plans for typescript support to react native ??(edited)
\ngeof90: I was under the impression you could already use TypeScript with RN, although I have not tried it myself\nlostintangent: There's a community maintained d.ts file, which helps with using TS + React Native. Are there other areas you are interested in?\nsenthilsivanath: techically true u can build but practically RN is changing so rapidly my dts is out of sync\nlostintangent: That is definitely a problem that we could hopefully get some community support from 😃
\n# Q: Is there wizard incoming for facilitating getting started on React Native on Windows OS? Getting started takes most of the time in React Native as developer on Window OS
\nlostintangent: Our team isn't unfortunately involved directly in the React Native on Windows efforts, so I'm not entirely support what they may have planned. That said, I will relay the desire to continue improving the getting started experience
\n# Q: Without having too much experience using Codepush, I'd still like to know: are there any immediate drawbacks of pushing app updates outside of Apple's ecosystem (app store)?
\ngeof90: If you are talking about drawbacks in terms of \"Will Apple reject my update or ban my app\", I think the answer is no because in practice, we have many many apps on our showcase that are using CodePush to ship live updates to their production apps on the app store. If you are talking about technical drawbacks, keep in mind that CodePush only ships updates to JS and assets (images, sound, video), if there are native code changes (e.g. you added a new plugin), you would still have to rely on the app store
\n# Q: Am I alone feeling like React Native Upgrade does not helps as much as I'd like (I mean loosing images assets...)? Upgrade is like init a new project and just keep my js app.
\nlostintangent: That is a great question, that I'll leave up to the React Native team to answer 😃\nMacKentoch: nice I feel like impatient to read\nlostintangent: Read the docs?\nlostintangent: With RNPM being merged into the React Naitve CLI, I look forward to seeing the improvements that are made to the dev experience, including improvements to the upgrade command 😃
\n# Q: any thoughts on integrating something like hot module reload to CodePush so the app doesn't have to be quit for CodePush to update?
\ngeof90: it's something we'd love to explore in the future. Do you think you could leave an enhancement request issue on our GitHub repo? That would make it easier for us to track how many people want a feature added\ngeof90: also I think HMR is only enabled in dev builds? Work might have to be done to enable it in release builds\nlostintangent: In general, supporting HMR-like updates is someting I would really love to see us do in the future. We haven't taken the time to investigate how realistic it would be, but it would be an awesome end-user experience for sure\nLeBlaaanc: All, feel free to \"vote\" on HMR question https://github.com/Microsoft/react-native-code-push/issues/419
\n# Q: any plans to interpret flow metadata to typescript just like closure ??
\nlostintangent: I'm not aware of any immediate plans to add Flow support to the TypeScript compiler, but interop is important to the TypeScript team, so it could make sense if the demand was there. Would that be something you were interested in? Possibly so that you wouldn't need to keep d.ts files up to date?\nsenthilsivanath: yes. That would be very helpful for react watchman and other FB js repos\nlostintangent: Yep that totally makes sense. I'll reach out to the TypeScript team and will ping you directly with more details on what plans there are here
\n# Q: Any plan or thoughts about building a GUI for Codepush or maybe integrating with VSCode in addition to the current CLI?
\nlostintangent: Yep, this is definitely something we plan to address in the near future. We love our CLI, but we definitely recognize that there's an oppurtunity to simply the management experience in a way that doesn't require remembering commands that you aren't likely using on a daily basis (unlike something like Git).\nncnlinh: thank you that's awesome
\n# Q: Is there a way to track a crash that causes automatic rolbacks? For clarity — i generally have at least 1 or 2 rollbacks per update, but all of the others are successful
\nlostintangent: Not currently, but we are planning to add better integration with existing crash reporting services very soon. We added support for identifying rollbacks to help surface this data, but we didn't neccessarily want to introduce yet another crash reporting service into the ecosystem, so we'd like to provide a simple way to use Crashlytics/HockeyApp/etc. along with CodePush\nlostintangent: If you're seeing intermittent rollbacks, on a handful of users, then that is a bug in our plugin, and we should work with you to address it 😃
\n# Q: what are the general causes of rollbacks? failure to replace the jsbundle?
\ngeof90: If you look at our docs, notifyAppReady() its the API that \"rubber stamps\" an update as successful. A rollback happens when after an update is applied, the notifyAppReady() isn't called (due to the app crashing after update, or in some other cases, a misconfiguration in the way sync() or notifyAppReady() is called)
\n# Q: How long you will work in this project? 😄
\nlostintangent: As long as people are using it 😃 We have lots of feature requests, improvements, plans, etc. to keep improving the product, and integrating with other services/plugins/workflows, so we'll be around for a while 😃
\n# Q: Not sure if this was answered before but, what was the motive behind creating CodePush? Is there an internal Microsoft project that needed this system and then decided to open source it?
\nlostintangent: We originally spiked on creating it due to numerous teams within MS building Cordova apps, and had a desire for better release agility. However, we started hearing the same desire from lots of VS customers, and other devs we talked to, so we decided to release it publically and see if anyone would care about it or not. Our team were also huge React Native fans, so we decided to add support to it as well, and its been awesome being able to be a part of this community thus far 😃\ngcrab: that is awesome. Do you guys struggle with the RN releases breaking from release to release?\nlostintangent: We scout RN releases pretty religiously, and for the most part, we've only had problems with RN 0.19, and most recently with RN 0.29\nlostintangent: That said, the RN team has been amazing in working with us to ensure that we get unblocked when they introduce breaking changes, so we've never had any significant issues with being able to support new RN releases very closely after they're released\ngcrab: 28 killed us in a lot of ways and we are skipping migration until 30. Currently on 25. It becomes very difficult to develop for a moving target sometimes 😃 such is life on the bleeding edge. Thanks for your response, My take away is that we need to engage and support the team directly more.\ngcrab: Specifically they need to have a better test and automation environment on multiple platforms.
\n# Q: Tangential: when will vscode have tab support in the wild (not internal)?
\ngeof90: I think the VS code team is in a better position to answer that question 😃\ngcrab: I had to try 😃 thanks\ngcrab: wrt hockey app, we are a customer and are curious about official RN support on both iOS and Android.\nlostintangent: We've been collaborating a little bit with the community-created RN HockeyApp plugin to help as much as we can, but moving forward, we plan to spend a lot more energy on providing a 1st class HockeyApp experience for RN
\n# Q: I'm curious how many of the React Native dev issues expressed here are on Microsoft's radar for IDE improvement.
\nlostintangent: Let me skim that article real quickly so that I can answer you 😃\nBrent Arias: Summary points from the article: (1) React Native does not have a recommended project template...everyone devises their own and (2) unlike native development (iOS/Xcode or Android/Android Studio), with React Native you have a terminal (with a couple of panes), a text editor, perhaps Redux Remote DevTools plus your IDE for the platform you are targeting....in short, a messy developer tooling experience\nlostintangent: The project template topic isn't something we're currently thinking about, but I would definitely love to see this improve. Pepperoni, Ignite, Snowflake, NativeBase, etc. are pretty awesome, and I think help immensely with getting started, and standardizing on a set of conventions. From our perspective, I think we'll definitely need to provide some prescriptions from any tooling / authoring experiences we have (e.g. VS Code), to help folks get started. but the community is in a much better position to help define what great standard project templates look like, so I'd like to see us integrate with some of the aforementioned better\nlostintangent: Regarding your comment about RN requiring a disjointed, multi-tool setup: we're definitely interested in providing an integrated, yet interopable/loosely coupled/etc. experience in Visual Studio Code. We started by allowing you to do step debugging of JS directly within the editor, but moving forward, we're very interested in improving the experience, reducing context switching, etc. in ways that make the most sense\nvcarl: yeah, IDEs can't really exist until each of the tools that make them up exist\nlostintangent: Yeah totally. We hope that VS Code is a great editor, but it will only be successful in the context of the amazing work that the community is driving. So as improvements as made in the platform, and ecosystem, we hope to collaborate as much as we can to see what kind of integrated authoring experience is possible, without it becoming too \"bloated\", and definitely without \"locking\" you in to any specifically workflow
\n# Q: Just a tangential suggestion...to float the idea to the Xamarin team to offer React rendering as an alternative to XAML. 😍
\nlostintangent: I will pass that on to the team. I'm not on the Xamarin team, but since they've joined Microsoft, I can assure you that I never pass up an oppurtunity to tell them how awesome React Native is 😃(edited)\nmarkspolakovs: lol, please remind them at every opportunity! 😛
\n# Q: Is there a site of information where I can find out more about this? Jumped in a bit late
\ngeof90: Finding out more about CodePush? You could visit our site, https://microsoft.github.io/code-push/, which usually have updated docs, otherwise, the management CLI docs is a great place to start https://github.com/Microsoft/code-push/tree/master/cli\nagmcleod: Ah awesome. Also saw mention of \"continuous delivery with VSTS (Visual Studio Team Services)\"\nagmcleod: Any sort of CI with react native might be worth looking into. Was asked this morning to help quote a RN app at work actually\nlostintangent: You can check out the VSTS + CodePush integration docs here: https://microsoft.github.io/code-push/docs/vsts-extension.html\nlostintangent: Awesome. Check out the docs and then feel free to ping us in the #code-push channel later if you have any further questions
\n# Q: really interested in Code Push, how much longer do you guys plan to stay in beta ?
\nlostintangent: We're shooting to exit beta in the next couple of months, since at this point, we have a lot of users in prodiuction, and feel very comfortable with the quality of the product, and the fact that he have the right feature set in place. We just have a few remaining items to complete, along with getting a formal SLA in place, etc.
\n# Q: What exactly are the rules for whether a code push release gets picked up by a react-native app? Does it have to have the same semver as the compiled native version?
\ngeof90: Yes, the native version has to fulfil the semver range specified in the codepush release\nlostintangent: We also do a hash comparison of the update contents contained with the contents in the binary and/or the currnetly running CodePush update, so that the end user doesn't get updates that they're already running
\n# Q: Ok gotcha. So if I release to App Store with 1.0.1, and I want to make sure that fresh installs don't redownload anything, what codepush semver should I avoid?
\nlostintangent: We support all \"standard\" semver range expressions, so just don't use any range which would include 1.0.0 and 1.0.1. Examples are \"1.0.x\", \"~1.0.0\"
\n# Q: what if I want to publish the source-map generated from release-react so that an API can pick it up to be used when the app crashes, and wants to make a request to get appropriate error logs. Is there anything that facilitates this in code-push ecosystem? Example: a release is minified, and at some point app throws exception. Client wants to call a service with minified line and col, and get back details to be logged to crashlytics.
\nlostintangent: We don't currently do anything with the JS source maps generated from your bundle file, so we would just recommend storing them as approrpaitely, so that you have them for each app build you would need to debug crashes for\nlostintangent: As we integrate more deeply with crash reporting services, however, we will be interested in how we can tighten this workflow
","frontmatter":{"date":"2016-07-07T00:00:00.000Z","dateGroup":"July 2016","dateString":"Thursday July 7th, 2016","description":"Microsoft Visual Studio/CodePush Team | Topic is React Native continuous delivery with VSTS (Visual Studio Team Services), CodePush and HockeyApp.\n","location":"Q&A Channel Reactiflux","people":"@LostInTangent\n","recording":null,"time":null,"title":"Jonathan Carter & Geoffrey Goh"}}},{"name":"mike-grabowski","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What effect would a Brexit \"Leave\" vote have on the U.K.'s tech industry? - brianboyko
\nA: Brexit, pretty good question. Haven't thought about it that much, but I wouldn't be surprised if some of my friends from Poland decide to come back, like @knowbody 😄
\n# Q: re: Navigator/NavigatorExperimental... which should we use and are systems like react-native-router-flux which rely on NavigatorExperiemental influencing the path forward with development? - davidbrear
\nA: from react-native-router-flux, there's also ex-navigation built by Exponent, which is meant to be a v2 for the current ex-navigator. Having used it for quite a long time, I am moving towards using it in my next project. There's nothing wrong in using bare NavigationExperimental as is from react-native core, at least to understand the internals and how it works. Although I still have this feeling it might be too low-level for most of the users and can introduce the extra maintainance oveerheat, at least know when we have quite a few breaking changes being shipped. If you want to stay on the safe side of things, definitelly try out these community packages.
\n# Q: How is the work on moving animations away from the JS thread going on both Android and ios. I've noticed someone work has been done on ios but a PR for Android seems to have died down when issues were hit. - Alias
\nA: for bringing this up. In fact I've just upgraded all my apps to 0.29.0-rc.0 to take advantage of native iOS animations. Can't really tell the performance difference for now as they are all in the early stage of development, but the code is definitelly there and is moving towards having more and more features. iOS has now a bit better support for different kinds of animations (although it still doesn't support animating bottom property for instance) than the Android one. The work on Android things is mainly done by Kris (authored original PR) and I've been successfully seeing small additions being made in every release.
\n# Q: In your honest opinion. How does working with react-native compare to swift. If somebody already know swift, why should it use react-native? (it's a very subjective question) - lewix
\nA: Wouldn't say I am a Swift expert, but I have worked with Objective-C for quite a long time. I think I can answer that given I am one of the few (?) developers who actually quite enojoy using its syntax! To me, react-native solved the most annoying problems I had when developing apps, which was seamless support for REST APIs (and other json resources) as well as managing state of my app and avoiding side effects. So I wouldn't neccessarily say there's something in React Native that makes it a to go solution, but it's more React and the paradigm that's moving the platform forward.
\n# Q: What's the general feeling about the documentation? At the moment it seems very hit and miss - ios only demos, es5 examples and very hard to read examples. Will this be a future focus? - Alias
\nA: There's a community-hackhaton happening right now as we speak here in order to improve documentation, conducted by Facebook CA & London. If you take a look at latest master commits, you'll see plenty of docs-related PRs merged. The general plan is to improve examples and user experience, so that it's easier to navigate and find the informations you need.
\n# Q: In your opinion whats the best way to learn RN for a beginner? What kind beginner app would teach someone like me most of RN? - Asep
\nA: at the company I am working, we don't have a general app idea we suggest our interns to build. It is important at this stage to pick something /idea/ you are excited about so that in case you have troubles making it working, you are still excited enough to keep it going. Currently we are building an app that controls AirPlay speakers so that everyone in the office can queue song to be played. Takes ages since everyone's learning React Native there, but it's fun so maybe it's also your next app idea? 😉
\n# Q: Hi 😄 From your experience (based on GH issues or perhaps questions you receive), what people find the most hard/unappealing/annoying in React Native when developing real production apps? - ilyagelman
\nA: question. I would say native APIs are quite tricky, but it's been easier now with things like rnpm and stackoverflow having more and more answers. Back in the day, things like adding push notifications or location watchers were a bit complicated to someone who just used to access these properties under window. And that's iOS only. Soon after that, you will find yourself going through Google docs trying to understand how to set it up.\nBut I don't feel super strong with this answer. There are tons of issues, so I can also list styles and flexbox problems people are having, for sure.
\n# Q: What are your thoughts on Angular 2? Do you see it being a competitor to React or has Angular had its time in the sun. - doodirock
\nA: I've stopped using Angular like a year ago, so can't really speak for it. However, if we are speaking about its integration with the NativeScript which seems to be the most popular approach, I don't think it's going to have a better DX than React Native. Again, for someone with native experience, using 1:1 native APIs with Javascript may seem appealing, but at that point, I'd just consider going straight to the native code. React Native has this nice abstraction that you can just use web-like APIs in a cross-platform way where possible.
\n# Q: I really love react and react native as view libraries but not having a preferred way of handling the state of the application and communication with any backends leaves many questions open for developers. Many different libraries like redux, relay and others try to solve these issues. Can you suggest a stack that works for large REST based apps or is it really better to move to graphql and relay? - igin
\nA: We are still slowly adopting GraphQL at the company, mainly because most of the apps are a companion additions to already made services that consume REST APIs. In regards to the state management, it really depends. We use redux, some plugins and stuff to store and persist system-wide elements, like currentUser, token, session, flags about onBoarding. We also use a lot of state where it makes sense, e.g. when you open up a modal that contains user profile - there's no need to fetch it through redux for instance. My personal advice is to always start small & simple and move things to a more convinient place, like redux when you feel like it's getting out of your control.
\n# Q:: In your personal projects, do you typically differentiate navigation between android (with a drawer) and iOS (with a tab bar). Do you like to keep a similar feel in the app and use one or have special handlers that render differently on different devices? (sorry for all the navigation questions, I'm just wrestling with \"best practices\") - davidbrear
\nA: Depends on the project! Recently I am seeing a trend that people want to have the so-called MainScene platform specific, so that iOS utilises tab bar with e.g. 4 tabs and the last one is the \"options\" tab (kinda Facebook-like) whereas the Android just goes directly with side menu. In most of the apps, we keep containers and presenters platform-independent and optimise small components to platform design guideliness. For example - we have Notifications view, on iOS there's no shadow and on Android the card looks a bit more Material-like. But the container itself is the same.
\n# Q: Hi dude. At the bank I'm currently working at we're contemplating building an app for certain services. Obviously I'm biased towards React Native, but I see their point about using something like Cordova to re-use existing HTML views. At the same time React Native still seems like more \"beta\" than Cordova, which in banks means unstable (and banks hate non-stable). What are your thoughts on these points? - cbrevik
\nA: Can't list the name because of NDA, but there's one very popular UK bank having React Native in production that I've seen being developed. People can't really tell the difference. When we are pitching React Native to the client who's concerned about stability and performance, I am always bringing up the interoperability. It can either be native app running few React Native views, or React native app running few native views. I wouldn't say building banking app in RN/Cordova would be a wise decision after all, but the companion apps seem totally fine to me.
\n# Q: Routing and Navigation doesn't seem yet to have The Way to solve it, as we have it for the web or the native platforms. Do you think there will be some standard implementation of it in the future, maybe with NavigatorExeperimental, or that probably will always fall to the developer to implement? - rseemann
\nA: I think NavigationExperimental is definitelly closer to being the to go solution here, since it's all in all up to the developer to manage the state of views and perform actions, like push/pop. We can now see that things that were almost impossible previously (tap twice the tab bar icon to reset active stack) are now dead simple. I have this feeling that the community wrappers mentioned previously are a really good candidates to answer almost all use-cases for typical app.
\n# Q: Hi, what is your preferred test setup for your js? - cdreier
\nA: Nothing fancy, standard Jest set up as in react-native itself. We mainly unit-test reducers and actions, for views, we haven't had a lot of time yet to do it properly. That's why I am in love with snapshot tests as it's just a matter of few minutes to get it working (there's an article on my medium if you are interested in learning more).
\n# Q: When will TouchableNativeFeedback get some love? Right now by default it doesn't feel native at all (need to hold it down for any feedback) , and when nested in views the ripple locations are all over the place (there's a few issues about for this but seem to have gotten lost). For Android this is absolutely key to making the app feel native. - Alias
\nA: Good question, haven't heard of any plans within the core team itself to work on it. I would suggest re-posting this Q on the Facebook group to get more traction. https://www.facebook.com/groups/reactnativeoss/
\n# Q: I would like to ask another question about Angular and React. Do you think it's a good idea to use the two alongside of each other? For example to use Angular as a tool to support the overall architecture and React to implement individual features within this architecture. (I'm asking this because most people I'm working with are completely into Angular) - Prutser
\nA: Not really sure. You can use https://github.com/angular/react-native-renderer which I think kinda addresses your concerns. My personal feeling about this project was that having to know two frameworks in order to build an app might be a bit too much for a single team. Not really sure how this integration works under the hood and whether all bindings and interactions were Angularized though.
\n# Q: Okay, follow-up. You said \"I wouldn't say building banking app in RN/Cordova would be a wise decision after all\". Why so? - cbrevik
\nA: First of all I think it might be hard to convince any bank to React Native, given that they may have loads of Java developers (and possibly other internal services) already built with it? I am not a banking expert, but amount of security that has to be put in such solutions makes me feeling that by the end of the day, you will end up having a lot of native code anyway (e.g. Barclays has checks for rooted devices, my banking app disables previews of the app when it open the app switcher on iOS etc.) I think it all boils down to the fact that banks are super strict about these technologies in their core products.
\n# Q: Upon updating react native versions (in this case 25.2 to 27.2), Did you have to add the -lc++ to Other Linker Flags in xcode, and encountered \"Cannot find module {some number}\" in the ios logs when debugging? If so, how did you fix? - Butch
\nA: I think I had similar error back in the day. In my case it wasn not only because of lc++ flag (I had it already because of snapshot tests), but also I've noticed that react-native upgrade liked to remove $(inherited) from linker flags which was breaking my CocoaPods setup. Bringing these two flags back made the project compile again.
\n# Q: What is the hardest thing to face right now as a core contributor technically and organizationally in react-native code base? - jondot
\nA: Good question! I think the hardest thing is to stay up to date and always be aware of what's happening. I've been recently super busy with my own startup and merging rnpm, hence I didn't have a lot of time to do some pull request or keep spamming all issues. I am specifically responsible for the releases, so it's a lot of responsibilities as you have to makes sure the update you are sending out is not going to break straight away on loads of devices! But it's fun, a lot of things going on. People within the core team are really helpful and I love the fact we have so many different backgrounds. So that whenever we are stuck with anything, we just keep asking each other questions and React Native is moving forward 😃
\n# Q: Do you have any opinions on the best way to bind functions or when to use the different options? - bondparkerbond
\nA: I am using arrow functions as class properties, e.g. a: () => { this.setState() } and just pass it as is to a handler. Don't have any preference on other solutions, e.g. whether to bind in constructor or in render(), the differences are really minimal unless you render like hundreds of views.
# Q: What's your startup? 😄 - vcarl
\nA: callstack.io, just a small dev shop about React Native. I've been spending my free time 100% on React Native so that I found it's time to give back and quit my daily JS job. Wish it was a product startup though ;/
\n# Q: When do you think we'll be able to have some way to have the performance improvement of the shouldComponentUpdate for stateless pure function components? - rseemann
A: I don't know, keep it for a React Core Q&A! You can also tweet sebmarkbage on Twitter, he's always on top of all algo improvements 😃
\n# Q: Do you see RN, or similar approaches of bringing JS to other platforms, bringing JS to Augmented, or Virtual Reality? There was a talk on React Conf 2016 about React being used with A-Frame and that kind of raised the question if we could do it in native as well. https://www.youtube.com/watch?v=ty2bFeOdGeI - rseemann
\nA: I haven't heard of any RN-related solutions yet. My main concern is the performance in real-time, though I would say if anything comes up at some point, it's going to be e.g. a native component wrapper. That said, it might be better to investigate iOS/Android answers to that problem
\n# Q: With rnpm you and kureev saw the need for linking modules easier, and filled that \"community need\". (Awesome job by the way). Do you see any other current (or future) needs in the world of RN which is yet to be solved by the core project, but could be a thing the community could take on? - cbrevik
\nA: Not sure if there's anything that painful coming up right now, but... There's an open debate on how to move platform-specific build tools away so that there's no such thing as Xcode or Android Studio for an average developer. There's also plan to rework Yeoman init command so that you have more scaffolding (new library, new project) which is a next step for an rnpm (but since we are plugin-based, it's unlikely we do it exclusively behind the scenes, so please help!) (I just realised I focused purely on tooling side of things)
\n# Q: Any guess on how long it will take to make ES6 the default for react in terms of usage/documentation? - bondparkerbond
\nA: I've seen @gaearon tweeting about it recently. I know Facebook internally is working on migrating to ES6 classes as well, but I don't know any dates on that one.
\n# Q: There is a big discussion about classes or factories in JS. As far as I recall, most of the RN code is written with classes. Is that for performance purposes, or is there another reason? - rseemann
\nA: Do you have any link / code example with a factory? Not sure if I remember any. Initially I thought you might be referring to lazy getters as in index.js of React Native itself
\n# Q: in your opinion, could the android port be as good as iOS or will it always lag behind in terms of performance and quirks ? (I feel the latter just because - well, android) - jondot
\nA: Hahaha. The Android implementation is really solid in terms of code, features and structure. We can't really workaround all its limitations (or features), like the fact that you can't have overflow: visible which is sometimes a deal breaker. It's definitelly improving given how it's been working few months ago. But if we are speaking simulator-development experience only, I am not really sure if anything will move as close in terms of performance as the iOS Simulator.
\nBut I think keeping \"well Android\" in mind might also help 😃 Sure how's that on iOS as I haven't dive in that deeper recently into its code, but I remember when I was investigating race conditions and exploring how threads are used on Android part of React Native, I've seen quite a few places where there were signs of web worker like code, ie. the ability to run different JS threads etc. It has a lot of hidden features 😄
# Q: Did you interface with designers in Facebook handling React Native designs (handing off designs to devs) and how did that go? Did they get training? Was it awkward (since it's not native not web nor anything they saw yet) - jondot
\nA: Don't know the answer as I've never worked for Facebook (though it's been always my dream haha). At my company, we just deal with standard templates as made for iOS/Android and designers don't know that they are targeting React Native at all. Of course sometimes we tell them that some of the features are hard to make, but since they have some development background, they know we are serious.
\n# Q: We've had recent stability issues with React Native only on Android (in dev, it hangs on fetching javascript bundles). Any thoughts on this, and in general, is Android generally behind iOS for React Native, or is it considered to be up-to-par with iOS. (P.S. we're hudge react native advocates, thanks and great work) - pete
\nA: I have this feeling we might need to exchange few DM later as I had that issue with Android crashing on bundle fetching (not really sure if it got solved, but I remember one team having this particular issue). In general what I am seeing is that my iOS app has ~100 crashes and recent Android build has like 7k exceptions on some specific Samsung devices. As far as I am aware of Android and its specifics, it's trickier to provide same experience in terms of performance because you deal with not only loads of devices but also loads of vendored Android versions that have modified internals. I had a crash once on Samsung devices only just because Samsung changed few classes React was using. Thankfully Facebook team is aware of most of them and always trying to fix them (these are these weird commits we can never understand pushed by internal employees!). Feature-wise I think we are reaching (if not yet) a stage where features are the same and development happens on both platforms at once 😃
","frontmatter":{"date":"2016-06-23T00:00:00.000Z","dateGroup":"June 2016","dateString":"Thursday June 23rd, 2016","description":"React Native Core Contributor | RNPM Author | Topic is native modules, installing dependencies, tooling & native shipping\n","location":"Q&A Channel Reactiflux","people":"@grabbou\n","recording":null,"time":null,"title":"Mike Grabowski"}}},{"name":"sophie-alpert","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: Are there plans to support a web worker based rendered in React Core ? Angular2 has support for it in core - axemclion
\nA: right now we're not considering web workers in depth because it's difficult to carve off pieces that can be parallelized independently -- simply moving React to a separate thread while executing DOM operations on the main thread would free up the main thread but likely wouldn't improve responsiveness overall. so instead we're looking more at how we can do concurrent work on the main thread and cancel in-progress updates if new high-priority input arrives\nwe might experiment a little more with threads/workers on React Native, but that would likely be more along the lines of running parts of Relay in a separate thread since it's still hard to split up the component tree
\n# Q: did you ever think you’d be learning about fibers and coroutines to implement a JavaScript UI library? 😃 - iamdustan
\nA: can't say I ever considered it, but I suppose I didn't expect that I would either!
\n# Q: What advantages will the new fiber reconcilier bring to React? - Aweary
\nA: we're hoping that it can support concurrency better as I mentioned above and pausing work on one part of a tree to go switch to another; in addition it's designed to support more features like returning multiple components from render and the basic building blocks needed to support layout in React -- still early days though so we'll see where it goes
\n# Q: Any clue if Seb Mckenzie will opensource the optimizations he unveiled that make react faster? - jamestwiggle
\nA: Sebastian McKenzie talked at react-europe about an experimental project that could make React (and other JS) start up faster; note that this only speeds up the initial loading of React and not the actual speed of rendering -- generally we use projects in production before considering open-sourcing them, just to make sure they're battle-tested and to prevent us from getting distracted from building something that's actually useful, but once we're using it in production it seems likely that we'll open-source it if it's useful
\n# Q: I help organize React meetups/confs in the Vancouver area. Do you know anyone at Facebook who helps organize meetups, conference, does community outreach, etc... that you would be able to put me in touch with? - EvNaverniouk
\nA: unfortunately we're a pretty small team and don't have anyone working much on community involvement so I don't think we'll have time to help out, sorry
\n# Q: any significant developer-facing changes in the pipe? returning multiple components from render is pretty big, that on its way? - vcarl
A: nothing in the immediate term planned -- if things with the new reconciler work out then we could do multiple components in render and potentially some other new primitives that could be used to build layout and other similar features; we'd also like to introduce a \"stateful functional component\" syntax that would allow us to support most components while giving React more flexibility to make optimizations (for instance, to not allocate a backing instance for the component) but don't know what we want that syntax to look like yet
\n# Q: are there any more optimizations (or general dev opportunities) in your heads for SFC? is there any ETA for recent ones (PureComponent etc) hitting master? - Andarist
\nA: we're going to look soon at what it would take to optimize stateless functional components and see how much of a benefit we can get; hopefully React.PureComponent can land soon but I wanted to figure out what we're doing with functional components at the same time and find something that everyone's happy with
\n# Q: Do you see the SyntheticEvent as a potential tool for extending events and giving them more useful keys, or is the aim just to normalize events across browsers/platforms and stop there? Is using the SyntheticEvent object to grab data considered a potentially good idea, or a dangerous anti-pattern? - duncan
\nA: for now we're planning to mostly stick to the DOM specs for the events in React DOM but I could see React Native's events developing more properties over time
\n# Q: Why is moving layout to React Important? - jamestwiggle
\nA: the most obvious place that it can help is for components that want to render a different design based on the size available; currently people render a placeholder and then measure the DOM in componentDidMount which is a bit clumsy and inefficient -- if things work out, we can also give people the power to build new layout primitives as components so that (as one example) you could have created the flexbox spec entirely in user space without waiting for browsers to support it
\n# Q: Would/Is React open to some sort of community RFC process for larger features, specifically things that may not be of much use to fb but may be to others. Right now discussion issues tend to either, languish, get lost to bikeshedding, or never move past \"this is a good idea we should do eventually\". Personally I've wanted to jump in and work on some bigger things, but it can be hard to et feedback from all the related parties (and react-core can be a moving target for things that touch renderers) - monastic.panic
\nA: yes, we've talked about making a separate repo for RFCs and I think it's something we'd like to do -- we're still worried about the RFCs getting lost to bikeshedding but hopefully we can figure something out that works for everyone. one middle ground that has worked well for RN is to have a read-only, public discussion group where the core contributors can discuss and anyone interested can watch.\narguing about APIs is tiring but I think also important so we can try to make sure we're building the right thing
\n# Q: in enzyme we rely on getPublicInstance so we can provide an instance to test against with certain things, and SFCs return null, so we have to use the _instance property. Once SFCs have no backing instance (which is happening eventually right?) I'm not sure how we'll do this, will there be a better way? - Aweary
A: not sure what your exact requirements are, but our general idea would be to either have a separate stateful test renderer which creates instances for every component or to emit \"debug events\" that a test tool like enzyme could listen to in order to reconstruct its own tree with whatever information you need (which is how the rewritten perf tools in 15.1 are built)
\n# Q: Any other project you are excited about or interested to see unfold? - kennetpostigo
\nA: I'm cautiously excited for the new reconciler but it's still early days so it's hard to know if everything will work out -- overall I've been trying to focus on developer experience lately and doing things like improving warning messages, which I think is important overall for React users and which hopefully you'll see in the next release
\n# Q: Making dynamic script loading easier without mixins in the future possibly? - jamestwiggle
\nA: I don't think I understand, can you rephrase?
\n# Q: say I want to load Stripe of FBLogin to my react component, theres 2 ways ive seen done, using react-script-loader mixin or
\n(function (d, s, id) {\n const element = d.getElementsByTagName(s)[0];\n const fjs = element;\n let js = element;\n if (d.getElementById(id)) {\n return;\n }\n js = d.createElement(s);\n js.id = id;\n js.src = '//connect.facebook.net/en_US/sdk.js';\n fjs.parentNode.insertBefore(js, fjs);\n})(document, 'script', 'facebook-jssdk');\n- jamestwiggle\nA: I don't think there's any magic solution here but I also don't think mixins are super necessary -- you can make a generic JS module in your app for loading external scripts (which shouldn't need to be particularly different from loading internal modules), and call it or subscribe in componentDidMount much like any other store in your app -- you always need to decide what to display when the script is still loading so there's inherent complexity that you just need to handle
\n# Q: is there a \"team lead\" for the React team? Or--more generally--I'm curious about the structure of the React core team at Facebook? - Aweary
\nA: we have a people-manager (Tom Occhino, who also manages the Flow team) but otherwise we don't have any formal structure within our 6-person team; we just choose projects and work collaboratively
\n# Q: Is the new recommended way of sharing functionality between components Higher Order Components over container components and mixins? - calebmer
\nA: in many cases it makes sense to simply split out utility functions into their own modules rather than doing anything React -- but in a lot of cases it does make sense to use higher-order components, especially for data fetching; hopefully we'll be able to write up some recommendations soon with examples about various mixin alternatives
\n# Q: Last time I checked (around 0.14.x), the Synthetic Event system accounted for almost a quarter of React's minified bundle size - what does it give React over the \"like React but fewer KBs\" libraries which have popped up in a tradeoff for the extra size? onChange normalization is one thing I'd miss, but presumably people writing apps of any size/audience with lighter alternatives will start bumping into the problems this system solves? - jbscript
A: we don't want to get to a place where there are many different variants of React; it's important that people can easily publish components on npm and just use them without having to configure anything differently. in addition, we haven't seen much evidence that byte size is a significant problem for React so when working on performance we've been focusing on other areas we can improve
\n# Q: Is the plan to move all DOM related stuff from React.DOM to the react-dom package? - simonsmith
\nA: the 'react' package contains the things needed to define components, whereas 'react-dom' contains the code to actually render them; you could actually make a separate renderer that does something with React.DOM.div(...) (equivalent to React.createElement('div', ...)) so 'react' really is a more correct place for them over 'react-dom' -- but we do recognize that they feel a little weird in the 'react' package and most people don't need them so we'll likely split them out to a separate package (see https://github.com/facebook/react/issues/6169)
\n# Q: Hey Ben... Dan Abramov mentioned you started as a core contributor before you ended up on the Facebook React team... just curious about how all that went down? - Gabe
\nA: while working at Khan Academy in 2013, I saw React when it was released on Hacker News and started looking into it then -- it seemed like a good fit for a project I was working on so I went home that weekend and rewrote my project in React (and deployed it two weeks later, making me the first non-FB production user of React); I was curious about the implementation so I jumped into the code and fixed bugs when I encountered them and over time just continued to fix bugs and eventually add new features to React in my spare time\neventually I figured it made more sense for me to just work at Facebook, so here I am 😃
\n# Q: Curious why string refs look to be deprecated in a future version of React. Is it simply that callbacks can already handle basic references / are more versatile? Subtle way to discourage the use of ref's as an escape hatch for component communication? *-
\nBradColthurst*
\nA: not to discourage people, though that could be a nice side-effect? a handful of reasons reasons: (1) string refs make it less clear that there's a timing aspect involved and that the ref only becomes available at a certain point in the mount cycle, whereas function refs make it a little clearer, (2) function refs are more flexible and you could read some property from or call a method on the node without storing it, (3) if you have a helper function outside your class that returns a component with a string ref, it's unclear where that ref will be attached, and (4) we track which component is the \"owner\" to attach refs to using a stateful module within the 'react' package, which is intellectually gross but can also complicate things in a practical sense and means you it's harder to use multiple versions of the 'react' package (which should otherwise work correctly)
\n# Q: What's your favorite movie? - sotojuan
\nA: not sure, sorry 😃
\n# Q: what's the status of vjeux's css explorations? - jared
\nA: -
\n# Q: is facebook using one implemenation of Flux or there are projects internally using different implementations? - Alx
\nA: we use the official flux implementation https://github.com/facebook/flux as well as redux for some projects and probably others
\n# Q: What is Angular or Ember doing better at than React? - calebmer
\nA: both Angular and Ember do a nice job with providing a cohesive experience that makes it easy to get started and learn everything in one place (including ember-cli) -- it would be nice if we could develop something similar for React while still making it easy to adopt in existing applications if you don't want all of the pieces
\n# Q: Will server-side rendering be officially supported in Relay? The Relay ecosystem currently requires a third party library \"isomorphic-relay\" - John Tran
\nA: not sure on where the Relay team is on that, sorry -- I know that we experimented with SSR in the past but don't know the current status
\n# Q: Where does Redux fit into Facebook in relation to Relay? - Setsunai
\nA: complementary I think, as is React's built-in component state -- Relay excels at fetching data from a graphql server but doesn't work as well when you're managing client-only data, Redux can be great for larger applications but can also be a lot of boilerplate for a simple app, and React state is easy to get set up with but can be cumbersome to scale -- hoping we can try to unify these at least a little over time but not sure what that would look like
\n# Q: What is the hardest React bug you fixed till now? - vramana
\nA: https://github.com/facebook/react/issues/2410 was pretty hard to track down -- the fix I eventually put in isn't complex but it's unfortunately also a bit of a hack
\n# Q: what’re the most interesting problems and experiments taking place in the UI/product engineering spaces today? - iamdustan
\nA: -
\n# Q: Is there ever gonna be support for a \"standard\" way of setting up your workflow in regards to react, webpack, babel, es2015, JSX etc. etc. It's currently a huge jungle.. - Panen
\nA: right now our team doesn't have the bandwidth to make this happen but we certainly appreciate the advantages it would give, especially for new React users, so I'm hoping we can make time for this someday
\n# Q: What is your view about 1/ GraphQL as a new query environment and 2/ alternative GraphQL implementations, like Graphene ? Do you see them as \"experimental\" projects ? - Xavier
\nA: haven't used GraphQL personally but it seems like a very solid idea and we've had a lot of success with it at Facebook so I'd certainly use it for the next product I build; haven't looked into Graphene, sorry, but I'm in favor of anything that makes it easier to build GraphQL servers
\n# Q: If you're gonna create a simple slightly complex app with real time functionality, what's gonna be your stack(web and mobile) 😜? - pierrevert
\nA: not sure where Relay and GraphQL are on live stuff at the moment but I'd probably just start with React DOM+Native, Relay, GraphQL and try to branch out from there if anything's missing -- not sure what I'd do for a server, haven't been super enamored with any of the Node-based web frameworks
\n# Q: Any personal projects you want to work on? - jamestwiggle
\nA: not too much, though I'd love to find an excuse to use Rust on something
\n# Q: what do you about AirBNB Hypernova project? how do you think it can benefit us? - Andarist
\nA: haven't looked at hypernova much yet -- we didn't see great success when we tried React SSR at Facebook but it's obvious that other companies have seen more benefit so I'd love to see how React DOM can continue supporting server-side rendering and hopefully make improvements to it
\n# Q: what programming languages are you most comfortable with and whats your personal favorites? - Aweary
\nA: in descending order, probably JavaScript, Python, C, Ruby, Objective-C, Java, Hack (PHP), Swift -- might have missed some. honestly I'm pretty happy working in most of those and am not too picky, though I definitely like ML-style type systems (algebraic data types w/ pattern matching, non-nullable) and Rust excites me because it falls into that category and seems pretty versatile
\n# Q: what's the future of observables in React? - ManicAkrasiac
\nA: it's been on hold as we try to figure out what's the best API and best programming model for the long term (ex: can we make things more efficient overall if we don't need to store subscriptions on every component?) but we might revisit data-loading solutions if we can get the new reconciler working
\n# Q: Two parts, If a weakness for React is developer experience, will Facebook be the one to fix that problem or will that be left to competing community implementations? Second part, is a unified developer experience possible for React? - calebmer
\nA: at Facebook we mostly focus on the things that will help Facebook, which tends to make good, solid libraries overall but also means we don't end up focusing on things like the new project experience as much since FB devs never encounter that. I'm always looking to the community for ideas and to build out things we don't have time to work on, but we also want to reduce fragmentation in the community when possible so could consider pulling a little more of the ecosystem into React proper (ex: maybe a data management solution combining the best parts of Relay/Redux/setState as I mentioned above, if we can figure out something good)
\n# Q: What's the future plans for context? This introduction seems like a complete opposite direction from pure components etc. - hkjorgensen
A: context can be abused to make data flow impossible to follow which is why we haven't encouraged it much but is also important for making certain types of APIs (as an example, you can think of how every component inherits its font from the parent component as a type of implicit propagation done by the browser which would likely be done using context in React) -- our context API still has some holes (ex: updates aren't guaranteed to make it to children if there's an intervening shouldComponentUpdate) but once we patch those up I think you'll see gradually more use of it over time\nthe \"coroutine\" component type in the new experimental reconciler can potentially support some of the same use cases as context does now, so we'll see where that goes
","frontmatter":{"date":"2016-06-09T00:00:00.000Z","dateGroup":"June 2016","dateString":"Thursday June 9th, 2016","description":"Facebook React.js Core Team\n","location":"Q&A Channel Reactiflux","people":"@sophiebits\n","recording":null,"time":null,"title":"Sophie Alpert (June 2016)"}}},{"name":"devin-abbott","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: How’s development going? i see you’re still in a closed beta, somebody in here mentioned that they’ve been waiting for a while for a beta key
\nA: We’re gonna officially launch next Wednesday! It’ll be free and open source. So… development is going pretty well, I’d say. We did the beta thing to iron out bugs. it’s not perfect, but it’s reasonably stable, so it should be ok to have a lot more people try it out. (...) It’s more stable than eclipse
\n# Q: What was the hardest goal to accomplish in deco's development?
\nA: Hmmm... there are a few things that come to mind.
\n# Q: Will deco be available for windows?
\nA: It won't be for Windows on Wednesday. But it's written on Electron, so porting it to windows shouldn't be too bad. I'm hoping someone can cantribute windows support, since it's not really my area of expertise 😉 So, it's an \"OSX App\" but it's actually written with React + Redux. It just looks like OSX thanks to careful CSS. Even if it ran on windows.... it will look like OSX. |
\n# Q: How well does the insert mode shown off work, in your experience? is that video sped up? it seems too fast for it to account for npm install 😃
\nA: Haha, the video isn't sped up at all, but there is some demo magic going on. In our first version, we actually hot reloaded over a separate websocket, so changes would be ~30ms to see on the screen. Now we use the hot reload which is part of RN (it wasn't in master at the time)... and it's ~300ms or more 😦 So it's a little slower now - but in terms of inserting components with npm dependencies, you're right - you will have to wait for it to npm install - still lightyears faster than doing it manually - and of course, if it's a RN-core thing, you don't need to npm install anything. Overall, this is the feature I like most.
\n# Q: Seems like a lot of work, how is Deco financed?
\nA: We raised a small angel round right when we started, now we'll try to become profitable without taking on more investments. Things may change of course - but the plan is to do a few things that can help us monetize:
\nWe also plan on doing some RN contracting
\n# Q: How far off is Live Testing on Android support?
\nA: Basically, the only thing missing for Android support is a \"launch emulator\" button. If you react-native run-android manually, and then use Deco to edit your code files, it will all work
\n# Q: Any plans to expand to web react? it'd take a lot to make me switch off sublime, but that inserting and the properties might do it
\nA: We sometimes use Deco for web react 😃 Actually, we sometimes use Deco to edit Deco (very meta). We wanna focus on RN and make that experience as good as possible first, but since we'll be open source if the community really takes the IDE in the React direction, that's fine with us too. Most of it is agnostic to React web/native... and even to React. You could use it with other stuff. You probably won't switch of sublime/atom entirely. that's not our goal right now, cause we just can't compete in terms of features and robustness with these tools which have been in development for 5-10 years. So Deco will be the place you go to prototype ideas or new screens, do visual work, etc
\n# Q: That's what i was thinking it would be most useful for, it's cool to hear that's your target
\nA: I like being in the prototyping/visual space because it means we can try experimental new ideas and see how they work 😃. A lot of stuff in the IDE is quite different than anything we've seen in other IDEs, and I hope it stays that way, although I also think we should try to merge some of our best ideas into Nuclide or whatever makes sense
\n# Q: @dabbott whats a guy gotta do for a beta key to mess with over the weekend? 😉
\nA: Haha, you should probably wait till the launch Wednesday, but if you really want a key now you can just email me dabbott@decosoftware.com Seriously though, wait till Wednesday 😉 Our current build is missing a lot of my favorite stuff - I mean, our current production build if you install it today instead of next week |
\n# Q: What are your current, top product pains surrounding React Native ?
\nA: Hmmm... my biggest one is probably docs. Since I've seen/helped a lot of people get started with RN, I've seen people continuously struggle with just getting basic stuff on the screen. Navigation is a big one too. I'm not sure what to recommend to people. The old nav stuff is obviously not right, and the new one is still \"experimental\", I guess. (added by gtfargo) \"Don't think you are required to use navigationexperimental - as of this week my team has trashed all our efforts of working with old Nav or NavExp and started building a custom one - Its not easy.\". Another big area people struggle with is figuring out how to manage data - it's always a hodgepodge combination of redux, asyncstorage, realm, a REST API, GraphQL, Firebase, whatever - which if you know what you're doing is nice cause it's super flexible. But as a beginner you're not sure what to use or where to start and there's no \"right way\". I'm hoping a few boilerplates will totally dominate and we can include them in Deco, so when you create a new project, you have a few options for setting up the entire app with routing/data
\nA live stream with some feature demos is shown
\n# Q: Can you show some general UI?
\nA: Overall UI: files and components on the left. Text editor in center. Properties on right - properties appear when I add components, or I can manually add by alt+clicking a value in my code
\n# Q: Where are the external components pulled form? js.coach? or do you curate yourself...
\nA: currently curated myself - the list is here: https://github.com/decosoftware/deco-components/blob/master/package.json - we'll figure out something more scalable in the future
\n# Q: Split panes?
\nA: Not yet 😦 The text editor isn't that awesome so that's one of the big reasons why you'll still use sublime/atom for a lot of your core editing
\n# Q: What is that discuss button?
\nA: you can chat with us other other Deco users on Slack |
\n# Q: Can those default props that get imported be changed per-project somewhere? |
\nA: Hmmm... that's a good idea - not yet. The whole component insertion thing works pretty well, but there are a lot of details we might want to revisit. Right now it's actually inserting templates that we made manually, but it would definitely be more scalable if we just scanned props (or maybe let authors add) and generated the template from that. Templates have the advantage that they can be more than just React stuff - like you could insert anything, really.
\n# Q: What navigation is it using currently? Or is that done by hand?
\nA: Basically I wasn't sure what to do with navigation - this navbar is done by hand. Its just something I found on npm and made a deco template for react-native-navbar. We don't help you much with navigation. Mainly cause I'm not sure what to recommend at the moment. We think it can help a lot with the strange hand-off from designers to engineers - possibly even a common ground where both can contribute.
","frontmatter":{"date":"2016-05-19T00:00:00.000Z","dateGroup":"May 2016","dateString":"Thursday May 19th, 2016","description":"Deco Software | Topic is Deco their awesome React Native IDE\n","location":"Q&A Channel Reactiflux","people":"@devinaabbott\n","recording":null,"time":null,"title":"Devin Abbott"}}},{"name":"tadeu-zagallo","relativeDirectory":"","childMarkdownRemark":{"html":"","frontmatter":{"date":"2016-05-12T00:00:00.000Z","dateGroup":"May 2016","dateString":"Thursday May 12th, 2016","description":"Facebook React Native Core Team\n","location":"#react-native Channel Reactiflux","people":"@tadeuzagallo\n","recording":null,"time":null,"title":"Tadeu Zagallo"}}},{"name":"dan-abramov","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: When you started at Facebook, was it your plan to work on the React Core team, or did you get hired just to work on \"something at Facebook\"?
\nA: The initial plan was that I would work on React Native (mostly Android) team in London. However we mutually decided it might make more sense for me to help out the Core folks instead.
\n# Q: Are there any plans for any of the features of Redux making their way into React Core?
\nA: In some form, maybe. We want React to be “what you need to build a UI”, and predictable state management is a part of this. I might be helping out with this later this year, but there are no specific plans yet. In any case it won’t be as simple as adding Redux itself to React—more like “what can we learn from it that would apply well to a component abstraction that React provides”.
\n# Q: What's your plan for the future, specifically personal development wise? Where do you go from being a very-high-profile open source person and now facebook employee working on open source?
\nA: I want to ship some significant contributions to React, which I haven’t been able to yet. I’m working on dev tooling API that will hopefully help us move forward faster without breaking third-party tools, so I’m looking forward to finishing this work. I also hope that hot reloading is eventually going to be less flaky as tools mature, and that it becomes a part of React development experience you don’t need to set up, kinda like it happened in React Native. This would make me happy. In general, I want to learn more from my teammates and become a better engineer.
\n# Q: I'm curious to hear your thoughts on using a declarative data fetching framework (like Relay) with a client state container (like Redux). Have you seen any good patterns for making the two work together smoothly?
\nA: Declarative data fetching is great! I haven’t seen anything that would mix those concepts well yet in JavaScript. I know Om Next exists but from what I heard you need to build a lot by yourself, whereas Relay takes care of more things but is harder to customize. This is something Relay team is thinking about, and I’m sure they’ll come up with some solution to the local state management this or the next year.
\n# Q: Whats your opinion, if someone is using Rx for Ajax, MouseEvents etc, does it make sense to go fully Rx and use it for State Management as well (e.g. through a single Subject) or use Redux? Greetings from Berlin.
\nA: Sure, use scan() from Rx. That said we just landed observable interop support in Redux 3.5.x so it can be used directly with compatible libraries as a subject. Really, this is up to you. (https://github.com/reactjs/redux/pull/1632)
\n# Q: About a week ago on twitter you said you we're planning on taking a break from social media. This week you are streaming on twitch and doing a QA. I don't have a question I just want to call you out on this.
\nA: I guess what I really meant is I’m starting to treat social media is write-only. I used to answer to all notifications and messages but I just can’t handle the volume anymore. Twitch is an example of one-way communication that scales just fine without me burning out.
\n# Q: On one of the latest releases of Redux the ability to interop with observables was added. What was the reason behind this and possibilities this might add to redux.
\nA: This just makes Redux less awkward to use from codebases that also use Rx. You can see the examples in the tests of the PR I linked to. This doesn’t make any huge difference. Redux was always behaving like a Subject so we’re just providing a more natural interface to folks who want to treat it as one.
\n# Q: What do you think about standardization of react boilerplates? Do we need a generic, specific starter to achieve a universal understanding of codebases
\nA: I think in general boilerplates can be terrible because they put together a bunch of experimental technologies and don’t explain when you’d want to use either. I don’t suggest anyone to use the boilerplates. Play with them to get a feel for how pieces can be used together—sure, steal some parts to your own setup—sure, but base a project on a boilerplate? I think this is a bad decision.
\n# Q: Any updates on those improvements to PerfUtils you were working on? Is it blocked by the general tooling work you're doing now? Really looking forward to getting my hands on better perf tools.
\nA: New perf tools are going to be pretty much the same as the old ones externally. The change is internal, so that React core refactorings stop breaking these tools every time. Yeah, it’s blocked by more general work, or to be precise, I’m extracting the more general work (with tests) from my proof of concept PR. https://github.com/facebook/react/pull/6549, if merged, will be the first meaningful step to this.
\n# Q: Do you have any thoughts on having a more opinionated way to declare asynchronous data dependencies for components for use with both client side and server side routing?
\nA: Maybe the way Relay does it?
\n# Q: What would be your approach for CSS in a complex website (not necessarily Facebook) ? Inline, CSS Module, Radium, PostCSS, CSSNext, Aphrodite, all that stuff
\nA: I haven’t been keeping up so I can’t say. I’d probably use CSS modules with autoprefixer, and test Aphrodite for some components to get a feel for it. I heard it’s good.
\n# Q: In your opinion how hard is it to get a job working with react now? With a lot of side project experience but not experience actually doing it full time
\nA: I don’t know but it seems like it’s exploding in popularity so having a few visible side projects with React might very well help you land a relevant job.
\n# Q: Is Redux the best paradigm for data intensive and async heavy applications and why?
\nA: I don’t think any paradigm is “best”. I think Redux works well for apps with complex local mutations and data structures. Redux doesn’t really solve async work anyhow so you’d need something like Rx, or Redux Saga, or channels, etc, to manage async dependencies if you have any.
\n# Q: Do you plan to work on the product again (e.g. Facebook.com) for a while?
\nA: Yeah, I’d love to! Maybe in a year or two. I kinda miss product development, but then I’ve been working on a product for the past 4 years so it’s liberating to actually get paid to work on the tools—something I’ve never been able to do before.
\n# Q: Is Interop with Web Components something you care about? (any ideas on how they will mesh with React in the future)?
\nA: Personally, I’m not very much interested in web components. React kinda supports them, but since their primary API is imprerative, and they are tied to a particular platform, there are limited things we can do with them. I think Sebastian’s “DOM as a Second-class Citizen” touches on that: https://www.youtube.com/watch?v=Zemce4Y1Y-A
\n# Q: I have been using Immutable but was thinking to drop it in the next project, is it essential? I tend to not to like when it breaks destructuring and so
\nA: It’s kinda nice but one of the biggest use cases I know (deep updates) is solved in Redux by reducer composition. I would expect that Immutable performs better on mobile devices because there’s (I assume) less GC pressure, but I’m not sure. In short: create a sample app that imitates the kinda of data size and change speed you expect in your app, and profile it. No other way to tell if dropping Immutable is going to work for you.
\n# Q: What is your opinion of Mobx?
\nA: Well, the example code looks very clean, and it’s nice that it “just works” with great performance out of the box. I haven’t looked into it in detail, so I can’t vouch for much else!
\n# Q: Are there any plans to integrate server-side rendering into Relay Core? If so, when do you anticipate this will happen? SSR is imperative for SEO. Currently, the only 'real' solution is to use isomorphic-relay. You could also use node-prerender for SEO but not ideal.
\nA: “SSR is imperative for SEO” — not sure this is the case, at least not for Google anymore. It’s been able to crawl JS sites for a while now. As for Relay, I saw some work on using context so yea, pretty sure it’s on the roadmap. I suggest checking their meeting notes in the repo to get a sense of what’s being worked on.
\n# Q: What you said about SEO is not accurate. Just because Google can crawl something does not mean it's optimal at all. SEO is what makes or breaks a site. It is one of the most important things to take into account when building for the web. Not something to take lightly. The reality is that SPA's are becoming the standard for everything from blogs to e-commerce to insanely complex UIs. There is literaly nothing I can't build with RGR ( React GraphQL Relay). This is hands down the best UI solution I've ever come across. The weak link however, is SEO. How to deal with it. It's very difficult to get a straight answer from anyone about this topic. Truth is, I just don't think many people know the answer. However, if RGR wants to explode like it can, it needs to implement SSR. It's the final thing that is missing.
\nA: I have no stake in this game, sorry if I said something misleading.
\n# Q: Do you think redux side of an app should know about the UI that's going to talk to it or should it be architected in a generic way that if UI changes, you don't have to make any changes to your state/actions? For e.g. say I want to pop a toast message after I create a new object. Should this happen at the component level or should a toast action be triggered after the create object action.?
\nA: Making UI easily replaceable is certainly one of the goals of Redux. Actually notifications are my favorite example. You write a reducer and a component rendering the current notification. Then you decide that you want to display a stack of notifications instead of just one. You don’t need to change any components showing notifications, as what would be the case if you were to operate on the state directly in the components. You just keep dispatching an action that leads to a different state change under the hood.
\nThat said don’t take it too far. I think firing actions in lifecycle hooks is occasionally convenient. As with anything, try it both ways and see which one works better 😃
\n# Q: There seems to be a rebounding (a bounce towards less) of support for SSR lately. My opinion is that if your webapp does not very much depend on SEO, e.g. a blog CMS, then perhaps SSR is a complication you can avoid. The question: What detail would I have to tell you about my webapp for you to say, \"Yes, it's worth the hassle of doing SSR.\"?
\nA: Is it supposed to be consumed by low-end devices in countries with slow internet speeds? If so, does it serve mostly textual information, or is any benefit from SSR going to be drowned by image size anyway?
\n# Q: What do you dislike the most about React (or React ecosystem) and why? And what kind of problems do you think the community should be focusing on?
\nA: I don’t like that we have a ton of boilerplates for everything. I don’t think that this is a very healthy situation. I think this is a sign that React should learn to do more (e.g. styles, hot reloading, better data management) to be useful as a UI library.
\n# Q: What strategies do you have for avoiding OSS burnout? I find that the more I give, the more people want. From watching Ryan and Michael tweet, it seems that one must be very careful with how much guilt for unresponsiveness one allows oneself to feel.
\nA: I haven’t been very good at this but.. I recently unwatched all repos except that a couple that I actually care about. I put “no maintenance intended” on a few projects I don’t plan to change, and deprecated a few projects that I know were dead ends. This really helps.
\nI try to give commit access to anyone who made a substantial PR so that they can take over maintaining the repo. This really works in some cases, and doesn’t work as well in their cases, but it has been taking a lot of stress off. There are many people who’d like to get active in open source, and all they lacked is a project to pour energy into.
\nMake them collaborators early and let them flourish. I also found that having a “troubleshooting” and “faq” docs, as well as highly upvoted answers on SO, is really important. If you spend 20 minutes every few days answering the same question, it’s a good sign you can solve this once and for all by putting it somewhere out there.
\n# Q: Do you have an example of splitting up a redux app into multiple npm packages? how would you approach that?
\nA: This sounds very generic, not sure if I could give a good answer. I don’t really think it’s different from splitting any other JS code?
\n# Q: What are your thoughts on redux-saga?
\nA: It’s an awesome project, and the kind of thing I was hoping somebody would do when I wanted to have a concept of middleware in Redux.
\n# Q: Aside from your existing projects what is something you really interested in working on? (Doesn't need to be react related)
\nA: Some cool product. Or Babel / Flow. Or something low level. Anything I’m really bad at 😄
\n# Q: How would you handle splitting up the redux store, so you can pick and choose parts of it to use in your app.
\nA: Export separate reducers, let the consuming code which ones to combine.
\n# Q: Server-side language of choice?
\nA: Tough one. JavaScript 😄 ? I never really learned any server side language. I liked C# but nobody uses it anymore, and I used Python but I couldn’t like it.
\n# Q: Other than you, how many people at Facebook are working on React core full-time?
\nA: React core team is something like 5-7 people (it’s fluctuating, the boundaries aren’t set in stone). React native team (and perf team) is way larger and is split beween US and UK.
\n# Q: Do you miss the first languages you worked on?
\nA: I used to miss C# but I’ve gotten very comfortable with ES2015, and I don’t anymore. So not really.
\n# Q: what do you think of the ecosystem around redux? anything you think is missing?
\nA: I’m impressed by what people put out. I think there’s a tendency to over-Redux-ize things (e.g. a component that could’ve been a normal React component but for some reason forces you to mount a reducer). But a lot of it is really cool. Obviously I’d like some combination of Redux and Relay-like data fetching to appear.
\n# Q: You've got a great way of breaking things down into simple abstractions. Any recommendations for good books about software design?
\nA: Thanks! I don’t really know if this is true. Redux is largely inspired by Flux, and it was clunky in the beginning until Andrew Clark suggested the pattern of reducer composition, similar to what Elm does.
\nI think in general reading about functional programming is very beneficial. I read some “standard” books like Code Complete when I was a teenager so I don’t remember if they taught me something important or not. I also like good blogs, like http://prog21.dadgum.com/archives.html.
\n# Q: What you think would be the future or React ecosystem and its influence over JS ecosystem?
\nA: I think it already had a lot of influence over JS ecosystem. I hope that React manages to deliver on its future milestones like incremental reconciler, a declarative animation system that works well with gestures, or rendering to GL.
\n# Q: Name two things you like better about London than St. Pete's, and the thing you miss most (cultural, family excluded) about Russia.
\nA: I spent two minutes on this and can’t recall a single thing I miss, or that I would like more there.
\n# Q: How do you see Redux's relation to Elm and Elm architecture in insight? They absolutely have things in common, but other things (eg: how things are composed) is quite different. Language feature differences aside, where did you draw the line where \"No, this will not be like how it's done in Elm\", so to speak, or things that were done differently on purpose.
\nA: That’s a great question. In general I think that I was interested in being close to Flux because that’s what I knew well, so I just wanted to make a little more composable and work better with hot reloading. So my guideline was “take Flux and do what needs to be done so hot reloading, time travel, and server rendering are easy to implement”. Elm architecture is much more ambitious, but also has some problems: whenever you want to put a component in another component, you have to write the code to connect their update functions too. I didn’t want to go the same way because we already have a very easy composition model in React. It’s also convenient that React local state can often be used as a fallback when global state is too inconvenient. This wouldn’t be pure by Elm’s standards.
\n# Q: Would you like that some React and Redux based framework was created? I mean opinionated framework in contrary to the unopinionated ecosystem.
\nA: Yeah, sure. There’s http://shasta.tools that kinda does this, but I think it’s not officially out yet.
\n# Q: I am writing a large app from scratch using react + redux (converting an old legacy app). Any suggestions on things I should do early on or things I should look out for so that things are less painful as the code size grows?
\nA: I’d say normalize the data early. In general, read through https://redux.js.org/faq/ and have a good grasp of everything discussed there.
\n# Q: How far do you think React (and redux of course) is from Universal JS (mobile, native mobile, desktop, native desktop, server) ? Is it still a myth? Your thoughts?
\nA: Redux is just a state library so it works anywhere. React is pretty close to being available on all those platforms (except native desktop perhaps, but MS is bringing it for Windows which I assume means all platforms).
\n# Q: what are you most excited about with the future of React? Both the near term next release version and distance/dreaming future?
\nA: Incremental reconciler and rendering to GL.
\n# Q: Don't know if off topic. In a recent London React Meetup there was an example of React Native performing animations quite well. Can it be used to make 2D games instead of cocosJS or similar frameworks that compile to native and expect it to do the job?
\nA: I don’t know, but you can give it a try 😃
\n# Q: Will the core meeting notes continue to be posted?
\nA: Yeah. We skipped a meeting last week because I was sick and everyone else was busy. I’ll post today’s notes later.
\n# Q: Any hints on what might be coming in React 16?
\nA: Error boundaries, although I hope they’ll ship some time during 15 instead, but who knows 😃 . Mostly major releases mean breaking changes, so they don’t necessarily add new features—just remove the old cruft that prevents us from implementing them.
\n# Q: What are the most pressing needs for the Redux docs? (Also, why is the new FAQ the best part of the docs, and why is the person who wrote that page awesome? 😃 )
\nA: I try to keep them as open issues with \"docs\" tag. And yeah, Mark’s help has been amazing.
\n# Q: Any word on stateless functional component optimizations coming down the pipe?
\nA: Sebastian has been thinking about this, but he’s busy with thinking about incremental reconciler instead so I wouldn’t count on this any time soon.
\n# Q: Do you think Mobx has the potential to be the \"Next Big Thing\" after redux? What do you think are some of the disadvantages of using something like Mobx apart from the smaller ecosystem?
\nA: I don’t know why Redux even became a “big thing” so I have no idea. It was just a project I made for a conference talk. 😃 I don’t know about disadvantages; it’s better to ask the MobX author(s).
\n# Q: I saw redux is used on the makeitopen.com f8 conference app, I was wondering how much is redux used in Facebook?
\nA: Just a tiny bit in some new projects.
\n# Q: What does \"incremental reconciler\" mean? I know what the reconciler does but why does it need to be \"incremental\"?
\nA: Currently when you setState() or ReactDOM.render(), this happens recursively for the whole subtree. Some components can bail out but it’s still somewhat expensive, especially on mobile.
\nThis is where people like to say that React is slow 😃 . However in reality your screen size is limited. Most of the time is often spent updating things that are not on the screen.
\nIf React knew about what’s on the screen (hint: inline styles), it would be able to prioritize updates to those components, and only update the offscreen components when it’s idle. This would make reconciliation “incremental” because it would happen in prioritizable chunks.
\n# Q: Kenye wants to know how he can get hair like yours
\nA: I’m happy to swap
\n# Q: Are there any project of yours we can contribute to?
\nA: Yes, I’m working on React Hot Loader 3 but don’t have the time to write the docs to release it as stable. Help is much appreciated: https://github.com/gaearon/react-hot-loader/issues/243.
\n# Q: Will it be possible to define lifecycle hooks like componentDidMount etc. for stateless function components? or we should just stay with classes for this?
\nA: There are no such plans. Yea, use classes for this. We might add functional stateful components later that might allow this, but this is distant future.
\n# Q: When is it better to just store state in a component? people sometimes seem to use Redux for everything and not store state in components at all.
\nA: Write it both ways. If it’s more hassle to do in Redux, use local state. There’s no substitute to good judgement 😃 Also: https://redux.js.org/faq/organizing-state#do-i-have-to-put-all-my-state-into-redux-should-i-ever-use-reacts-setstate
\n# Q: What would you want to be if you werent a programmer? Also how are you enjoying London?
\nA: I don‘t know what I’d be doing, really. I’d like to learn to produce music.
\n# Q: If your reducers are the place where you can detect an error condition, what are the best practices for propagating that back to the user? (Think an invalid game move)
\nA: Not sure this is easily answerable, it depends a lot, and I’m not sure what exactly is being asked. Maybe this helps: http://stackoverflow.com/questions/34403269/what-is-the-best-way-deal-with-fetch-error-in-react-redux
\n# Q: Why not propagate shouldComponentUpdate to functional component children? To children functional comps.
\nA: Not sure what you mean. If you mean that React doesn’t let you define shouldComponentUpdate, well, I don’t know why this is the case. Maybe we want to do it differently later. It’s better to look to React repo and discussions in it for this answer, as I don’t have one.
\n# Q: How do you feel about your \"celebrity status\" as a developer (ie. having 27k twitter followers)... is it overwhelming. humbling...?
\nA: Yeah, I’m not sure how this happened so it’s still surprising. I’ve been trying to answer notifications, but since last week I don’t anymore because it is too stressful. I think that other ways of communication (e.g. streaming coding sessions) scale better so I intend to do more of that.
\n# Q: What are the major shifts you think we'll see in the world of frontend dev in the next 3-5 years?
\nA: I have no clue 😃
","frontmatter":{"date":"2016-04-21T00:00:00.000Z","dateGroup":"April 2016","dateString":"Thursday April 21st, 2016","description":"Facebook React.js Core Team\n","location":"Q&A Channel Reactiflux","people":"@dan_abramov\n","recording":null,"time":null,"title":"Dan Abramov"}}},{"name":"eric-vicenti","relativeDirectory":"","childMarkdownRemark":{"html":"# Q: What does the build/release process for RN apps look like at Facebook? (Documentation on the site's a little light in that regard)
\nA: Joshua, we have a system that runs tests for us against each commit, which we call 'diff's in the phabricator world. Some of those tests run asynchronously and others are 'land-blocking'. The build system runs async tests continuously, and will make sure all of the land-blocking tests pass before it merges the commit into master. We also have release branches that are synced up with our product releases. We will cut a branch and stabilize it for a week or two before shipping the final product. To stabilize, we first fix the bug in master, and pick the fix over into the release branch. Currently those releases happen once every two weeks, but we are thinking about doing it even faster
\n# Q: What pattern are you guys using to render a detail view from tapping a list view item? I tried using Navigator, but the component in render row seems to not have the navigator prop even if the list view does
\nA: With Navigator, we need to pass the navigator prop around manually, then make imperative calls on it to move around in the app. This can get tricky as your app grows, so you may want to look into more declarative navigation solutions like NavigationExperimental. To provide some context, NavigationExperimental is the new Navigation library we are working on at Facebook, and we decided to open source it pretty early on because Navigator has clearly been a pain point for the RN community
\n# Q: Are you planning to use relay with any of your react native apps?
\nA: We already use Relay in all of our RN apps! AdsManager, Groups, and some features within the main Fb app are already using Relay.
\n(added by geirman) The main fb app uses rn for the “Friends Day Videos” and soon the “Events Dashboard\". they mention this in the keynote react conf 2016 video if you're interested
\n# Q: Do you update rn apps from hosted js bundles at facebook? any tips or services you can recommend for doing this?
\nA: It is something we're thinking about, but we currently ship our JS bundle with the native app bundle. Feel free to explore things like Microsoft CodePush!
\n# Q: Are you still working on offloading animations off the JS thread? When do you think it will be ready for both iOS and Android?
\nA: Good question! The Animation off-threading effort has mostly been pioneered by Krzysztof Magiera who has been working with the Exponent team. We haven't prioritized it yet, so we absolutely want some help from the community in solving this problem!
\n# Q: What would you say the mix is between RN and native components and coding in Facebook apps?
\nA: The main app is still native, but many new screens are being developed in react. We typically try to use RN where there isn't heavy data overlap between other screens in the app. As our data handling solutions get more advanced, we can start having bigger mixes of native and react code
\n# Q: Whats the future for RN platform wise? At this point mobile platforms are mostly covered but what about other targets: Xboxes, Roku's IOT? Does RN become another sort of substrate platform like react core?
\nA: I think that would be awesome, but we aren't there yet. We still have a lot of work when it comes to easing the differences between iOS and Android. Eventually it would be awesome to get RN working on everything from web to TV interfaces, but we would need a lot of community support to make that happen.
\n# Q: Any tips on how to ease a company into looking into React-Native that is very leery of code once run everywhere solutions? I know RN isn't exactly code once, but it's close to it. This has less to do with the code itself and more of what's a good way to introduce the idea in a more persuasive way. We currently have our Desktop team doing app development and it puts a giant burden on them, I'd like to lessen that greatly.
\nA: The write-once-run-anywhere solutions are often problematic because they invite a lot more people to build for a platform that they aren't highly familiar with. To ship a successful app, you are much better off having native platform developers work alongside react developers.
\n# Q: Are there any ways to access app lifecycle methods in RN (e.g. applicationDidBecomeActive in iOS)? Or would you just use the native to JS events?
\nA: You can use the AppStateIOS module to monitor that on iOS. Or use componentDidMount to detect when the app has started
\n# Q: How do you think the idea of \"learn once, write anywhere\" has held up?
\nA: It is certainly challenging to make these sorts of changes to your development team, but I work with developers every day who started on iOS, web, or Android, but all manage to ship their code on both iOS and Android. We're really adverse to platform forking when we can avoid it.
\n# Q: How often do you find yourselves doing native work on your production android apps because of performance issues?
\nA: It depends on how performance-sensitive the application is. Some teams need to pay closer attention and are working on more experimental tech to speed things up. There is a whole team working on improving RN performance for both platforms, and they are doing tons of native work. Also keep in mind, bad performance can also be due to inefficient JS code, so there are a lot of wins to be gained from paying attention to your JS
\n# Q: On that note, and this might completely be my ignorance, suppose you have massive calculations to perform. Are Web Workers able to handle that task or is there an abstraction for them, given the native platforms have threading
\nA: Massive calculations are probably best done in something more performant than JS, like C++. You can do that, and interface with your native code from JS. Or if you really want to use JS, you can spin up an extra react bridge with a different bundle. But we don't have a real WebWorkers solution yet.
\n# Q: So the take away is to weave native with react-native?
\nA: Yep, for complex and very high-performance apps, you absolutely want to be able to use native code when you need to
\n# Q: Are there improvements coming to ListView with regard to memory consumption on big lists?
\nA: ListViews are very tricky, and lots of people are working on improvements, including us. We have several experimental list views internally, but we're not sure about any of them yet.
\n# Q: Any announcements on releasing android-support for FB SDK?
\nA: I'm not aware of any upcoming announcements about an Android FB SDK. But our big developer conference, F8, is just about a month away..
\n# Q: Thoughts on how to model a segment control in the navbar and updating the component when segment control changes?
\nA: Your segment control can have a prop that it calls to pass an action to the parent. The parent can use the action to decide how to change the state, and declaratively re-render the segmented control and the appropriate view for it.
\n# Q: So, and this is more of a freebie question. Is it a sound plan to port a webapp to React Native with a Native UI implementation, and then replace/add from there? Or is that not a valid usecase
\nA: Yep it is pretty common to start with a React web app and port it to RN.
\n# Q: How big is the team working on React Native?
\nA: The RN team is about 15-20 people right now, depending on who you count. I'm actually working on RN within the Groups products right now, so I'm not even on the core RN team at the moment. Of course there are a lot of neighboring teams like React Core, Relay, GraphQL, Flow, Nuclide
\n# Q: Are there changes coming to gestures handling and ScrollView? Specific problem I have is it's difficult for now to pan a ScrollView horizontally blocking the vertical scroll. Natively it's easy to do on iOS with gesture recognizers.
\nA: Another good question. You've pointed out two of the most problematic technical areas that we face with RN, ListViews and gestures. The trickiest components when it comes to gestures are those like ScrollView, where we have a native component that needs to interact well with the JS world. We are constrained by platform gesture systems, so even if we had a better design for a gesture system, we wouldn't have an easy time building it. Andy Matuschak had a great talk at ReactJS conf that shows how tricky gesture systems can get. We still have a ways to go in that department
\n# Q: What percent of Groups app is using NavigationExperimental if at all?
\nA: 'Percent' can be a tricky thing to define when it comes to API adoption, especially in hybrid apps like Groups. An upcoming release of Groups will switch to NavigationExperimental for all navigation that happens within the react views
\n# Q: What are the biggest needs that the community could fill in right now that aren't being actively tackled by the RN FB team?
\nA: The community is pretty amazing when it comes to supporting each-other, and I want to see that get even better. The docs aren't nearly as mature as the knowledge of the community, and it would be amazing if everybody pitched in on the documentation and example code to help raise the bar for everyone else.
\n# Q: I'd love a \"Getting Started with NavigationExperimental\" style tutorial. I spent an evening trying to dig into the docs and UIExplorer examples, but didn't get far. Something that starts simple and builds up from there would be awesome. Are you aware of any efforts along those lines? ETA?
\nA: That is on my todo list. I have started a version here, but I decided to move away from the TicTacToe example and I haven't gone back to revise and finish it: https://github.com/ericvicenti/navigation-rfc/blob/master/Docs/Guide.md
\n# Q: I'm working on a RN app on the FB platform, do you know if it's possible to contact FB to see if they'd be interested in showcasing it?
\nA: You mean showcasing it on the RN page? If you publish a really impressive app, you can blast us on twitter and we will probably feature it.
\n# Q: What are your thoughts on using something like this for navigation: https://github.com/aksonov/react-native-router-flux
\nA: It is great to see people tackling the navigation problem from several angles. The desire for a redux-like navigation system is why I hacked on NavigationExperimental over my holiday break. That particular library uses ExNavigator, which uses the RN Navigator component. So it is still stateful on the inside, which is why I decided to focus on a genuinely declarative approach
\n# Q: What's your favorite smash bros character? |
\nA: Meta Night!!
\n# Q: So, in what version will navigationExperimental, no longer be experimental? when will it be in the main docs? I've played with it and it feels pretty stable
\nA: The API is still changing in minor ways, so there has been a bit of hesitation on my part with the docs. (The version in master is even ahead of 0.22 already). So I'm not sure if I should publish docs that will be out of sync with the current release. brentvatne, I'm sure you can help. 😄
\n# Q: Where are the navigationExperimental docs being prepared, so we can contribute
\nA: The NavigationExperimental docs are being worked on here: https://github.com/ericvicenti/navigation-rfc/blob/master/Docs Contributions to the Navigation docs would be greatly appreciated!! It is also a great way to make sure you understand the code! Also, it would be awesome if one of you could help by adding comments to the navigation example code in RN master |
\n# Q: Regarding the Guide, you are planning to completely rewrite it, aren't you?
\nA: I hope to swap out the example and go into more complicated navigation eventually
\n# Q: So, are contributions to the current guide welcome? Or should we wait till you start the new one
\n# Q: They are very welcome!
\n# Q: I noticed rendering can take some time when you try to render a grid with simple items (Image or Text), let's say 50. Is that something you observed on your side? Are there possibilities to mitigate that? | while rendering it
\nA: We generally try to break up the JS renders into smaller chunks. sahrens recently released something along those lines: https://github.com/facebook/react-native/pull/4953/files
\n(added by brentvatne) Make sure you read this for more background on what eric mentioned above re: breaking up js renders https://www.facebook.com/notes/andy-street/react-native-scheduling/10153916310914590
\n# Q: I saw that one and it's interesting, but I needed to display a table at once (fully visible, no scroll) and incremental rendering wasn't giving a good user experience.
\nA: Yeah it can be tricky when you have a lot of views that you need to flush to the main thread at once. Maybe you could mount the view ahead of time and simply display it when you need to
\n(added by brentvatne) then you can incrementally render it and show loading while it's happening then the actual table when it's complete using something like IncrementalPresenter - this will allow you to maintain responsiveness
\n# Q: Are there any solutions for running JS in the background, other than the allowed things like location and sound?
\nA: Sorry, not that I'm currently aware of! There is surely a way if you figure it out on the native side
\nAlong the lines of the question about how the community can help, I would really like to see the community step up and try to crack some of these hard problems. Take gestures for example. We haven't \"solved\" gesture handling at Fb, but we're happy to take an open approach to find solutions. Andy's talk shows how far we have to go in this regard.
\nTo anyone interested, I strongly encourage you to publish exploratory articles, hack on prototypes, and really push the limit of the current methodologies. Anybody can help us solve these problems, and we need dedicated folks like you to crack these tough issues, and move our community to the bleeding-edge of mobile development.
\nThanks for all of your excellent questions! You can ping me on twitter ericvicenti. On Facebook I'm Eric Vlad Vicenti. And of course I will be around to help as we get NavigationExperimental to maturity. Feel free to tag me on issues or file them in the RFC repo.
","frontmatter":{"date":"2016-03-10T00:00:00.000Z","dateGroup":"March 2016","dateString":"Thursday March 10th, 2016","description":"Facebook Engineer\n","location":"Q&A Channel Reactiflux","people":"@EricVicenti\n","recording":null,"time":null,"title":"Eric Vicenti"}}}]}},"pageContext":{}},"staticQueryHashes":["3248290905"]}