React Hooks vs. Vue.js vs. Svelte 3: State of Components

React Hooks vs. Vue.js vs. Svelte 3: State of Components

React Hooks vs. Vue.js vs. Svelte 3: State of Components. Evan examines three different approaches: React Hooks, Vue Composition API, and Svelte 3. They share a common departure from the class-based models, but also have fundamental differences due to the trade-offs in their respective designs, which he discusses in this talk about State of Components.

For a period of time, most of the mainstream frontend frameworks have converged on a class-or-semi-class-based model for declaring components. However, in the past year, we are seeing some new ideas emerging regarding how stateful logic inside components are declared, managed and composed.

Evan examines three different approaches: React Hooks, Vue Composition API, and Svelte 3. They share a common departure from the class-based models, but also have fundamental differences due to the trade-offs in their respective designs, which he discusses in this talk.

React vs Svelte: What are the differences?

React vs Svelte: What are the differences?

React vs Svelte: What are the differences? Shows how AJAX is done differently between React and Svelte (Svelte is much simpler) - using a free GeoCoding API to search for a partial address

Shows how AJAX is done differently between React and Svelte (Svelte is much simpler) - using a free GeoCoding API to search for a partial address

TOC/Index

  • 00:00 Intro
  • 00:35 React project setup
  • 01:15 Svelte project setup
  • 02:10 Geocoding API demo
  • 03:17 Initial coding in React
  • 06:08 Initial coding in Svelte
  • 07:30 Initial comparison between Svelte and React code
  • 08:40 React solution: function in to make GeoCoding API calls over AJAX (uses async/await)
  • 11:15 Examine the response from geocoding AJAX request
  • 12:05 HTML table to show the results of AJAX request
  • 14:20 Successful in React: geocoding results shown in the HTML table
  • 15:40 Svelte solution: write equivalent code for Svelte
  • 18:15 Successful in Svelte: geocoding results shown in the HTML table
  • 18:42 Conclusion and summary of differences between how we do AJAX in React v/s Svelte

React vs. Svelte: Building a File Upload component

React vs. Svelte: Building a File Upload component

React vs. Svelte: Building a File Upload component - We create the same File Upload component in React and Svelte and compare which one is cleaner, feature-rich, and developer-friendly. I created the exact same app in React and Svelte. Here are the differences. React vs Svelte. Finally, a side-by-side code comparison! Because you’ve heard the fuss about Svelte, and now you want to know what the hype is all about.

We create the same File Upload component in React and Svelte and compare which one is cleaner, feature-rich, and developer-friendly.

Source code: https://bitbucket.org/spinspire/react-vs-svelte

00:10 Intro
00:30 React project
13:45 Svelte project
21:45 Initial comparison
22:45 Customizing child content
27:45 Advanced feature: referencing child data in parent - React implementation
33:05 Advanced feature: referencing child data in parent - Svelte implementation
36:10 Finally getting the React implementation to work the hard way
38:03 Final comparison
38:56 Advanced feature: multiple slots in Svelte
41:15 Closing thoughts

How to Share Code Between React and React Native

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.

How to Share Code Between React and React Native

Sharing Code Between React and React-Native: What Not to Share - Ben Ellerby

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.

In this talk I will give real examples from my work with MADE.COM, migrating their web and mobile application to React and React-Native with code sharing as a primary objective.

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic

Sharing Code Between React and React Native

React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native. Yet this is not always the best approach. There is value in only sharing your business and state logic; keeping your render code separate.