Callum Slater

Callum Slater

1574764550

The Differences Between the Same App Created in React and Svelte

Having used React at work, I had a fairly solid understanding of it. I had, however, heard of Svelte — a new JavaScript framework that has recently started gaining attention amongst the web development scene. And as a curious Web Developer, I had been curious to know what the grass was like on the other side of the fence — the grass in this scenario being Svelte.

I’d read the Svelte docs and watched a couple videos and, while they were useful, what I really wanted to know was how different Svelte was from React. By “different”, I didn’t mean things such as whether Svelte used a virtual DOM or how it went about rendering pages. I wanted someone to take the time to explain how my React code might look if I had written the same thing in Svelte! I wanted to find an article that took the time to explain this so that someone new to either React or Svelte (or Web Development as a whole) could gain a better understanding of the differences between the two.

Unfortunately, I couldn’t find anything that tackled this. So I came to the realisation that I would have to go ahead and build this myself in order to see the similarities and differences. In doing so, I thought I’d document the whole process so that an article on this will finally exist.
React vs Svelte

I decided to try and build a fairly standard To Do App that allows a user to add and delete items from the list. Both apps were built using CLIs (create-react-app for React, and sveltejs/template for Svelte).

CLI stands for Command Line Interface by the way. 🤓

Anyway, this intro is already longer than I’d anticipated. So let’s start by having a quick look at how the two apps look:

React vs Svelte

React vs Svelte

The CSS code for both apps are exactly the same, but there are differences in where these are located. With that in mind, let’s next have a look at the file structure of both apps:
React vs Svelte

You’ll see that their structures are quite different here.

React has all of the components, styles and assets inside of the src folder, while Svelte requires the assets to sit directly in the public folder. You’ll also notice an absence of any .css files in the Svelte setup — this is because the styles are defined inside of the .svelte files (more on that later).

You will also notice that — for Svelte — there are some config files for Rollup. For those unaware, Rollup is basically a Webpack equivalent, which Svelte opts to use instead.

Finally, you’ll notice that Svelte already some bundle files inside of the public folder. These were created after I tried serving up the Svelte ToDo app to my localhost. Unlike React, Svelte’s CLI automatically generates these files as soon as you try starting up a local server. These are effectively the files that are being served to you, which are the compilations of all of the code from the .svelte files.

This is one key thing that Svelte does differently to React. In React, you would typically end up with a similar structure in your public file if you were to compile your code in order to get it ready to send to production and put live online, but whilst developing, if you were to serve your React ToDo app to the local server, you wouldn’t see these bundle files, as your code gets compiled by Webpack and then served to you in your localhost — and effectively sits somewhere in cache, whereas Rollup compiles the Svelte code and makes it visible for you in the public folder. Another difference caused here is that React’s setup with Webpack allows for hot module reloading (which basically means that the code will quite quickly update in your browser as you are making updates during development. With Svelte’s setup with Rollup, this isn’t possible, as those bundle files are effectively being recompiled, albeit quickly, every time you hit the save button to make an update in your code.

Ultimately, both file structures and approach to compilation achieve the same thing, just by different means.

Hopping back to the CSS setup for React for a moment, there is nothing to say that you can’t go ahead and structure your CSS differently to adopt something that puts your styles inside of the same file as the component. It really comes down to personal preference. You will hear plenty of discussion from the dev community over how CSS should be structured, especially with regard to React, as there are a number of CSS-in-JS solutions such as styled-components, and emotion. CSS-in-JS is literally what it sounds like by the way. While these are useful, for now, we will just follow the structure laid out in both CLIs.

Before we go any further, let’s take a quick look at what a typical React and Svelte component looks like:

React vs Svelte

Now that’s out of the way, let’s get into the nitty gritty detail!

Creating a new application

React

Using npm, run the following command in your terminal/command line:

npx create-react-app react-todo

That will create a project for you called ‘react-todo’ that will contain everything you need to get started. We used the same process for the app created for this article.

Svelte

Using npm, run the following command in your terminal/command line:

npx degit your-name/template svelte-todo

That will create a project for you called ‘svelte-todo’ that will contain everything you need to get started. We used the same process for the app created for this article.

How do we mutate data?

But first, what do we even mean by “mutate data”? Sounds a bit technical doesn’t it? It basically just means changing the data that we have stored. So if we wanted to change the value of a person’s name from John to Mark, we would be ‘mutating the data’. So the way in which we mutate data demonstrates a key difference between React and Svelte.

While Svelte essentially allows for data to be freely be updated (eg. we can push items into an array of data, reassign our data etc), React handles this through what is known as a state hook.

Let’s take a look at the set up for both in the images below, then we will explain what is going on after:

React vs Svelte

So you can see that we have passed the same data into both, but the structure is a bit different.

With React — or at least since 2019 — we would typically handle state through a series of Hooks. These might look a bit strange at first if you haven’t seen this type of concept before. Basically, it works as follows:

Let’s say we want to create a list of todos. We would likely need to create a variable called list and it would likely take an array of either strings or maybe objects (if say we want to give each todo string an ID and maybe some other things. We would set this up by writing const [list, setList] = useState([]). Here we are using what React calls a Hook — called useState. This basically lets us keep local state within our components.

Also, you may have noticed that we passed in an empty array [] inside of useState(). What we put inside there is what we want list to initially be set to, which in our case, we want to be an empty array. However, you will see from the image above that we passed in some data inside of the array, which ends up being the initialised data for list. Wondering what setList does? There will be more on this later!

Now with Svelte, you will notice that we have two variables that we are exporting. These were located inside of our ToDo.svelte file, but can be placed higher up inside of our route App.svelte file if we wanted to.

Anyway, let’s just take another look at them, then we’ll explain what is going on:

export let todo = "";
export let list = [
  { id: 1, text: "clean the house" },
  { id: 2, text: "buy eggs" }
];

So with Svelte, if we want to refer to things such as todo and list in our file, we need to have created a reference to them somewhere in the same file.

This is no different to React, or most other JavaScript, whether it be through creating a variable, importing a variable, or passing a variable down to a component as props. The different here is that we’re effectively creating new variables (with _let_, not _const_ as that would prevent us from being able to mutate it — or reassign it if we want to get technical about how _const_ works). The reason why I mention that we have to create new variables is because you’ll later notice that we have to do this in every file that we want to refer to them, even if they’ve already been passed down as props. Basically what happens is that Svelte will then pass the values down to those newly created variables. If you’re confused, just continue reading on and you’ll see how this works when we refer to it again later.

So how do we reference our mutable data in our Svelte app?

Well, let’s say that we have some piece of data called name that has been assigned a value of ‘Sunil**’**.

In Svelte, this let name = Sunil, will have either been created in a component and passed down to another as a prop, or just gets used inside of the component it was created in. Regardless of how we use name, we can update it by simply reassigning name. So I could write name = ‘John' and we would see the update in our screen in the UI. I’m not sure how I feel about being called John, but hey ho, things happen! 😅

In React, as we have our smaller pieces of state that we created with useState(), it is likely that we would have created something along the lines of const [name, setName] = useState('Sunil'). In our app, we would reference the same piece of data by calling simply calling name. Now the key difference here is that we cannot simply write name = ‘John’, because React has restrictions in place to prevent this kind of easy, care-free mutation-making. So in React, we would write setName('John'). This is where the setName bit comes into play. Basically, in const [name, setName] = useState('Sunil'), it creates two variables, one which becomes const name = 'Sunil', while the second const setName is assigned a function that enables name to be recreated with a new value.

Effectively React and Svelte are doing the same thing here, which is creating data that can be updated. Svelte essentially combines its own version of name and setName by default whenever a piece of data gets updated. So in short, React requires that you call setName() with the value inside in order to update state, Svelte makes an assumption that you’d want to do this if you were ever trying to update values that appear in the DOM (ie. values that we can see on the screen in our browser). So Why does React even bother with separating the value from the function, and why is useState() even needed? It’s because this signifies to React wants it needs to re-render whenever state changes. It would know that the state has changed because the useState function was called.
Now that we have mutations out of the way, let’s get into the nitty, gritty by looking at how we would go about adding new items to both of our To Do Apps.

How do we create new To Do Items?

React:

const createNewToDoItem = () => {  const newId = list.length ? 
                Math.max.apply(null, list.map(t => t.id)) + 1 :
                1;  const newToDo = { id: newId, text: toDo };  
  setList([...list, newToDo]);
  setToDo("");};

How did React do that?

In React, our input field has an attribute on it called value. This value gets automatically updated every time its value changes through what is known as an onChange event listener. The JSX (which is basically a variant of HTML), looks like this:

<input type="text" 
       value={toDo} 
       onChange={handleInput}/>

So every time the value is changed, it updates state. The handleInput function looks like this:

const handleInput = (e) => {
  setToDo(e.target.value);
};

Now, whenever a user presses the + button on the page to add a new item, the createNewToDoItem function is triggered. Let’s take a look at that function again to break down what is going on:

const createNewToDoItem = () => {  const newId = list.length ? 
                Math.max.apply(null, list.map(t => t.id)) + 1 :
                1;  const newToDo = { id: newId, text: toDo };  
  setList([...list, newToDo]);
  setToDo("");};

Essentially the newId function is basically creating a new ID that we will give to our new toDo item. The newToDo variable is an object that takes that has an id key that is given the value from newId. It also has a text key which takes the value from toDo as its value. That is the same toDo that was being updated whenever the input value changed.

We then run out setList function and we pass in an array that includes our entire list as well as the newly created newToDo.

If the ...list, bit seems strange, the three dots at the beginning is something known as a spread operator, which basically passes in all of the values from the list but as separate items, rather than simply passing in an entire array of items as an array. Confused? If so, I highly recommend reading up on spread because it’s great!

Anyway, finally we run setToDo() and pass in an empty string. This is so that our input value is empty, ready for new toDos to be typed in.

Svelte:

createNewToDoItem() {  const newId = list.length ? 
                Math.max.apply(null, list.map(t => t.id)) + 1 :
                1;
 
  list.push({ id: newId, text: todo });
  todo = "";}

How did Svelte do that?

In Svelte, our input field has a handle on it called bind:value. This allows us to do something known as two-way binding. Let’s just quickly look at our input field, then we’ll explain what is going on:

<input type="text" bind:value={todo} />

bind:value ties the input of this field to a variable we have called todo. When the page loads, we have todo set to an empty string, as such: let todo = ‘’. If this had some data already in there, such as let todo = ‘add some text here’, our input field would load with add some text here already inside the input field. Anyway, going back to having it as an empty string, whatever text we type inside the input field gets bound to the value for todo. This is effectively two-way binding (the input field can update todo and todo can update the input field).

So looking back at the createNewToDoItem() code block from earlier, we see that we push the contents of todointo the listarrayand then update todoto an empty string.

We also used the same newId() function as used in the React example.

How do we delete from the list?

React:

const deleteItem = (item) => {
  setList(list.filter((todo) => todo.id !== id));
};

How did React do that?

So whilst the deleteItem() function is located inside ToDo.js, I was very easily able to make reference to it inside ToDoItem.js by firstly, passing the deleteItem()function as a prop on <ToDoItem/> as such:

<ToDoItem deleteItem={deleteItem}/>

This firstly passes the function down to make it accessible to the child. Then, inside the ToDoItem component, we do the following:

<button className="ToDoItem-Delete" 
        onClick={() => deleteItem(item.id)}> - </button>

All I had to do to reference a function that sat inside the parent component was to reference props.deleteItem. Now you may have noticed that in the code example, we just wrote deleteItem instead of props.deleteItem. This is because we used a technique known as destructuring which allows us to take parts of the props object and assign them to variables. So in our ToDoItem.js file, we have the following:

const ToDoItem = (props) => {
  const { item, deleteItem } = props;
}

This created two variables for us, one called item, which gets assigned the same value as props.item, and deleteItem, which gets assigned the value from props.deleteItem. We could have avoided this whole destructuring thing by simply using props.item and props.deleteItem, but I thought it was worth mentioning!

Svelte:

const deleteItem = id => {
  list = list.filter(item => item.id !== id);
};

How did Svelte do that?

Quite a similar approach is deployed here in Svelte. In our ToDo.svelte file, we pass our deleteItem function down to <ToDoItem/> as such:

<ToDoItem {item} deleteItem={deleteItem}/>

Then in our ToDoItem.svelte file, we create a variable reference at the top of our file by writing export let deleteItem;. This allows us to make references to deleteItem as normal. Then finally, we pass our function to our ‘delete’ button inside of ToDoItem.svelte, like so:

<button class=”ToDoItem-Delete” 
        on:click={() => deleteItem(item.id)}> - </button>

As you can see, our ‘delete’ button is exactly the same as the one we used in React.

How do we pass DOM event listeners?

React:

Event listeners for simple things such as click events are straight forward. Here is an example of how we created a click event for a button that creates a new ToDo item:

<button className=”ToDo-Add” onClick={createNewToDoItem}>+</button>.

Super easy here and pretty much looks like how we would handle an onclick with regular JavaScript.

Svelte:

In Svelte it is also pretty straight-forward. We simply use the on: handle, and then the type of event-listener we want to do. So for example, to add a click event listener, we could write on:click, as we have in the following example:

<button class="ToDo-Add" on:click={createNewToDoItem}>+</button>

One cool thing with Svelte event listeners is that there are also a bunch of things that you can chain on to them, such as once which prevents the event listener from being triggered more than once.

How do we pass data/props to a child component?

React:

In react, we pass props onto the child component at the point where it is created. Such as:

<ToDoItem key={key.id} item={todo} />

Here we see two props passed to the ToDoItem component. From this point on, we can now reference them in the child component via this.props. So to access the item.todo prop, we simply call props.item.

Svelte:

In Svelte, it’s pretty much the same:

<ToDoItem {item} on:deleteItem={deleteItem} />

One difference here is that we didn’t have to pass a key to our ToDoItem, but hold that thought for a moment as we’ll cover that later.

Another difference is that we can pass item down by simply writing {item}. This is because the prop name and the actual prop have the same name. Writing item={item} would also work the same, but my Svelte setup automatically amended it to simply {item}.

Once this is done, we have to create a variable inside of our ToDoItem.svelte file called item, by writing export let item; towards the top of the

#React #Svelte #JavaScript #WebDev

What is GEEK

Buddha Community

The Differences Between the Same App Created in React and Svelte
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Harry Patel

Harry Patel

1614145832

A Complete Process to Create an App in 2021

It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.

Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.

You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?

This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.

The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.

Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.

From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.

Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.

#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Based on Statista data, the global mobile app market will generate over $935 billion in 2023 from more than $365 billion in 2018. The majority of this amount will come from in-app advertising and paid downloads. To gain a share in the marketplace, companies need to embrace new technologies to provide what consumers are looking for, such as seamless navigation and aesthetic appeal—the React Native development framework makes it all possible.

Table of Contents

  • What is Mobile App Development?
  • What are the Types of Apps?
  • What are the Components of Mobile App Architecture?
  • Things to Consider in Mobile App Development
  • What is React Native?
  • Top Reasons Why React Native is the Future of Mobile App Development
  • Useful Tips on How to Become an Excellent React Native Developer

#mobile-app-development #mobile-apps #react #react-native #android-app-development #app-development #ios-app-development #create-react-native-app

Top 10 React Native App Development Companies in USA

React Native is the most popular dynamic framework that provides the opportunity for Android & iOS users to download and use your product. Finding a good React Native development company is incredibly challenging. Use our list as your go-to resource for React Native app development Companies in USA.

List of Top-Rated React Native Mobile App Development Companies in USA:

  1. AppClues Infotech
  2. WebClues Infotech
  3. AppClues Studio
  4. WebClues Global
  5. Data EximIT
  6. Apptunix
  7. BHW Group
  8. Willow Tree:
  9. MindGrub
  10. Prismetric

A Brief about the company details mentioned below:

1. AppClues Infotech
As a React Native Mobile App Development Company in USA, AppClues Infotech offers user-centered mobile app development for iOS & Android. Since their founding in 2014, their React Native developers create beautiful mobile apps.

They have a robust react native app development team that has high knowledge and excellent strength of developing any type of mobile app. They have successfully delivered 450+ mobile apps as per client requirements and functionalities.
Website: https://www.appcluesinfotech.com/

2. WebClues Infotech
WebClues Infotech is the Top-Notch React Native mobile app development company in USA & offering exceptional service worldwide. Since their founding in 2014, they have completed 950+ web & mobile apps projects on time.

They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, WebClues Infotech provides top-notch React Native App solutions that meet the needs of their clients.
Website: https://www.webcluesinfotech.com/

3. AppClues Studio
AppClues Studio is one of the top React Native mobile app development company in USA and offers the best service worldwide at an affordable price. They have a robust & comprehensive team of React Native App developers who has high strength & extensive knowledge of developing any type of mobile apps.
Website: https://www.appcluesstudio.com/

4. WebClues Global
WebClues Global is one of the best React Native Mobile App Development Company in USA. They provide low-cost & fast React Native Development Services and their React Native App Developers have a high capability of serving projects on more than one platform.

Since their founding in 2014, they have successfully delivered 721+ mobile app projects accurately. They offer versatile React Native App development technology solutions to their clients at an affordable price.
Website: https://www.webcluesglobal.com/

5. Data EximIT
Hire expert React Native app developer from top React Native app development company in USA. Data EximIT is providing high-quality and innovative React Native application development services and support for your next projects. The company has been in the market for more than 8 years and has already gained the trust of 553+ clients and completed 1250+ projects around the globe.

They have a large pool of React Native App developers who can create scalable, full-fledged, and appealing mobile apps to meet the highest industry standards.
Website: https://www.dataeximit.com/

6. Apptunix
Apptunix is the best React Native App Development Company in the USA. It was established in 2013 and vast experience in developing React Native apps. After developing various successful React Native Mobile Apps, the company believes that this technology helps them incorporate advanced features in mobile apps without influencing the user experience.
Website: https://www.apptunix.com/

7. BHW Group
BHW Group is a Top-Notch React Native Mobile App Development Company in the USA. The company has 13+ years of experience in providing qualitative app development services to clients worldwide. They have a compressive pool of React Native App developers who can create scalable, full-fledged, and creative mobile apps to meet the highest industry standards.
Website: https://thebhwgroup.com/

8. Willow Tree:
Willow Tree is the Top-Notch React Native Mobile App Development Company in the USA & offering exceptional React Native service. They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, Willow Tree has top-notch React Native App solutions that meet the needs of their clients.
Website: https://willowtreeapps.com/

9. MindGrub
MindGrub is a leading React Native Mobile App Development Company in the USA. Along with React Native, the company also works on other emerging technologies like robotics, augmented & virtual reality. The Company has excellent strength and the best developers team for any type of React Native mobile apps. They offer versatile React Native App development technology solutions to their clients.
Website: https://www.mindgrub.com/

10. Prismetric
Prismetric is the premium React Native Mobile App Development Company in the USA. They provide fast React Native Development Services and their React Native App Developers have a high capability of serving projects on various platforms. They focus on developing customized solutions for specific business requirements. Being a popular name in the React Native development market, Prismetric has accumulated a specialty in offering these services.
Website: https://www.prismetric.com/

#top rated react native app development companies in usa #top 10 react native app development companies in usa #top react native app development companies in usa #react native app development technologies #react native app development #hire top react native app developers in usa

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers