Podcast Summary
React wish list discussion on Syntax podcast: Exploring ideas for React improvements, acknowledging the flexibility's challenges, and fostering an open-minded community approach.
During this episode of Syntax, Wes Bos and Scott Talinski discussed their React wish list, featuring things they'd like to see in React or JSX, as well as the community in general. They prefaced the episode by acknowledging that not all suggestions might be practical and encouraged an open-minded approach. React's flexibility is a strength, but it can also lead to a multitude of solutions or a lack of clear ones. The podcast was sponsored by DevLifts and FreshBooks, and they touched upon the topic of video on the web, with a future episode planned to dive deeper into Mux and its benefits. Overall, the episode served as a fun exercise to share opinions and discuss potential improvements for the React community.
React's anticipated features for seamless animations and data handling: React looks forward to implementing features for delaying component unmounting for animations and handling component suspensions during data fetching with React Suspense.
There are two features the speaker is eagerly anticipating for React: the ability to easily delay the unmounting of components for animation purposes, and the implementation of React Suspense for handling component suspensions during data fetching. The speaker acknowledges that these features are not trivial to implement and that React may be reconsidering their approach. The delay feature would allow for seamless animations without the need for duplicate components or complex timing, while React Suspense would enable better handling of data fetching and displaying loading screens. The speaker also reflects on the history of animation support in other frameworks and the appeal of having animation features built-in.
Server side rendering in React can be complex and frustrating: File-based components in Svelte and Vue may offer solutions to hydration issues and simplify server side rendering in React
Server side rendering in React, while functional, can be a complex and frustrating process due to hydration issues. These issues can result in unclear errors and difficulty in determining why or how they occur. File-based components, as seen in Svelte and Vue, offer potential solutions to these issues by keeping things more organized and automatically naming and scoping styles. Additionally, preventing default shortcuts in React can be a common issue when handling user events and submitting forms, requiring developers to write additional code to run functions and prevent default actions simultaneously. While some improvements have been made, there is still room for streamlining and simplifying the server side rendering process in React.
Handling Events and Preventing Default Behavior in React: React lacks a built-in solution for preventing event default behavior, leading to repetition and potential confusion. Developers desire clear recommendations and solutions from the React team for handling common tasks like event handling and server-side rendering.
There are various ways to handle events and prevent their default behavior in React, but the lack of a built-in solution for this common task can lead to repetition and potential confusion. Additionally, certain React features, like useLayoutEffect, do not work with server-side rendering, requiring developers to use custom workarounds. These issues highlight the importance of clear recommendations and solutions from the React team to enhance the overall developer experience. Another topic discussed was the flexibility and freedom offered by React, but this can sometimes result in a lack of guidance and rigidity, leading to potential challenges for developers, particularly when it comes to handling common tasks like event handling and server-side rendering. The desire for more streamlined solutions directly from the React team was emphasized. Furthermore, a brief mention was made about the importance of developers' health and well-being, with a sponsor, DevLift, offering fitness plans to help address this issue. The sponsor's plans include free and premium options, tailored workouts, and community support. To learn more and take advantage of the discount for Syntax listeners, visit devlifts.io and use the code "syntax" at checkout.
More guidance needed for React hooks: Speakers discussed the need for curated collections or official hooks for common functionalities, simplifying form handling, and reducing decision fatigue in React development
There is a need for more guidance and official recommendations in the React community, particularly when it comes to using hooks. The speakers expressed their desire for a curated collection of recommended hooks or even official hooks for common functionalities like fetch, set timeout, and set interval. They also discussed the idea of simplifying form handling in React by directly binding input values to state, making the process more streamlined and user-friendly. The speakers acknowledged the decision fatigue that developers face when choosing among various libraries and solutions, and emphasized the importance of making common tasks easier and less time-consuming in React. Overall, the conversation highlighted the need for more streamlined and intuitive solutions in React development, particularly for new developers or those transitioning from other frameworks.
Simplifying React Native development: Despite ongoing efforts, simplifying React Native development for web apps remains a complex challenge. Write once, deploy everywhere solutions like React Native Web have limitations, and simpler APIs are difficult to create while catering to all edge cases.
There are ongoing efforts to simplify the development experience for building web applications using React Native, but these solutions may not be as seamless or widely adopted as some developers might hope. For instance, React Native Web aims to enable "write once, deploy everywhere" functionality, but it's not currently able to fully deliver on this promise. Instead, it's designed to help developers learn the React concepts and apply them to native app development. Another intriguing concept discussed was compile-time directives, which can provide looping and conditional rendering functionality, similar to what's available in other programming languages. The xrepeat package is an example of this, but it's important to note that it's an older library and may not be fully compatible with modern React features like hooks. Additionally, there's a desire for simpler APIs in general, but creating such APIs that cater to all edge cases while remaining easy to use is a complex challenge. The speaker referenced the example of Street Fighter and its various adaptations as a reminder of the intricacies involved in developing software that caters to multiple platforms and user needs. In summary, while there are ongoing efforts to simplify the development experience for building web applications using React Native, there are limitations and challenges to overcome. Developers must balance the desire for simplicity with the need for functionality and compatibility.
JSX developers want JSX to function more like HTML as a templating language: Developers want JSX to align more closely with HTML, make code more readable, and remove attributes that don't match HTML, such as class name vs class.
During a discussion about using decorators for Apollo queries and the potential use of slots as an alternative to children in React, the group expressed a desire for JSX to more closely align with HTML and function more as a templating language rather than trying to be too close to JavaScript or React. Specifically, they mentioned removing attributes that don't line up with regular HTML, such as the use of class name instead of class, and aligning JSX attributes with HTML attributes. They also expressed a preference for JSX to embrace its templating language aspect and make the code more readable. This wish list for JSX comes from the experience of many developers who have spent a significant amount of time working with HTML and are now adjusting to the differences in writing code for React and JSX.
Simplifying React imports and development experience: The speaker suggests using plugins and advocates for automatic imports and explicit syntax to streamline React development, making it more intuitive and less verbose.
The speaker expresses a desire for a more streamlined development experience in React, specifically in relation to importing dependencies like React itself and GraphQL. They mention using plugins like `React require` and `import globals` to simplify the import process for commonly used dependencies. Another desired improvement is the ability for React to automatically import dependencies when detecting JSX or TSX files, which is a feature that is already being implemented. The speaker also expresses a preference for explicit syntax, such as if statements, over ternary operators and conditional (&&) expressions. They also suggest that fragments should be the default return type for components that return multiple siblings, wrapping them automatically to allow for their return. Overall, the speaker is advocating for a more intuitive and less verbose development experience in React.
Improving React: Inferring keys, handling promises, scoping CSS, and shorthand props: Developers propose enhancements to React, including automatic key inference, promise syntax, CSS scoping, and shorthand prop syntax, to streamline development and boost efficiency
There are several areas where developers would like to see improvements in React, particularly when it comes to automating certain tasks and simplifying syntax. For instance, there's a desire for React to automatically infer keys when looping through lists, as developers often forget to assign unique keys manually. Additionally, there's interest in adopting a more flexible syntax for handling promises, similar to what's available in Svelte. Regarding CSS, there's a need for a standard way to scope CSS within JSX without relying on numerous libraries. Lastly, there's a request for shorthand syntax when passing down component props that are already defined as variables. These suggestions aim to make the development process smoother and more efficient for React users.
Simplifying React Syntax and Tooling: Speaker suggests simplifying React syntax with shorthand props and backticks, and streamlining routing by making <a> tags behave like client-side links. They also express frustration with complex tooling setup and desire for a more seamless experience.
There are discussions around simplifying syntax and tooling in React development. The speaker expresses frustration with the use of specific syntaxes like prop spreading and importing React Router link, which they find confusing and less intuitive compared to other frameworks like Svelte. They suggest potential solutions such as using shorthand or backticks for props, and simplifying routing by making HTML `<a>` tags behave like client-side links. Additionally, they mention the complexity of React's tooling setup and the desire for a more seamless experience. Overall, the speaker is advocating for making React development more user-friendly and consistent with standard web development practices.
React's comprehensive solution for web apps with server-side rendering and routing: React offers a robust solution for building web apps with server-side rendering and routing, and is expected to release new features like common hooks, class and class name improvements, and unmounting for animation.
React, with tools like Create React App, offers a more comprehensive solution for building web applications by including features like server-side rendering and built-in routing, making it an attractive choice for developers. Additionally, React is expected to roll out new server-side rendering capabilities and specializations in partial hydration in the near future. Some suggested features that may come true include new common hooks, class and class name improvements, and unmounting for animation. React, however, focuses on the core library and encourages developers to choose their own packages for additional functionality. The speaker recommends the Software Engineering Daily podcast for continuous learning in the tech industry.
The Importance of Having the Right Tool for the Job: Exploring various tools and solutions, the speaker emphasizes the importance of having the right tool for the job, no matter how small, and offers personal recommendations and experiences.
The podcast provides valuable insights into various technical issues and solutions, even if they may not directly relate to one's personal interests. The discussions offer a deeper understanding of concepts related to server infrastructure and tools, making it an informative and engaging listen. The speaker's enthusiasm for a particular screwdriver, the Picquic HexKey Pick Quick, showcases the importance of having the right tool for the job, no matter how small. The podcast also features the speaker's personal experiences and recommendations, such as the Sapper for Everyone course, which teaches building full-stack apps using Svelte and Zapper. The speaker's passion for the topics and tools highlights the value of continuous learning and exploration in the tech industry. Additionally, the podcast episode featured a discussion on various tools, including Picquic's screwdrivers, which the speaker highly recommends for their unique design that prevents losing bits. The speaker's enthusiasm for these tools underscores the importance of having the right tool for the job, no matter how seemingly insignificant it may be. The podcast offers a mix of technical discussions, personal experiences, and recommendations, making it an informative and engaging listen for anyone interested in technology and problem-solving.
Exploring Sapper and Gatsby for Future React Features: The speaker discusses his plans to create a Gatsby course, covering data sourcing, live data fetching, and availability soon on westboss.com/forward/courses. Use coupon code 'syntax' for discounted courses.
If you're interested in features not yet available in React, such as fully server-side rendering, consider exploring other frameworks like Sapper or Gatsby. The speaker, a developer, shares his positive experiences with Sapper and upcoming plans to create a Gatsby course. The course will cover data sourcing from headless and REST APIs, live data fetching without rebuilding, and will be available soon on westboss.com/forward/courses. The speaker also mentions that they have other courses available with a discount using the coupon code "syntax". In the next episode, they will discuss forms and inputs. Listeners are encouraged to subscribe, review, and check out the full archive of shows at syntax.fm.
