How to Consume and Render Data from a Backend in Svelte

Svelte is a modern reactive component framework that runs at build time, converting components into highly efficient imperative code that surgically updates the DOM.

What we’ll be building

In this article, we’ll explore how Svelte consumes and renders data from an API by building a simple app. We’ll first write a simple backend to store our data and then write our Svelte components.

Setup

The first thing we’ll do is set up a working directory where we’ll store the code for our application. There are a number of ways to get a Svelte project up and running, and since this isn’t an introductory tutorial on Svelte, we’ll be using degit, a scaffolding tool to clone a Svelte template.

To scaffold our app, which we’ll call continent-app, run the following command in your terminal from your preferred working directory:

npx degit sveltejs/template continent-app

Next is to navigate into the newly created directory and install the dependencies:

cd continent-app && npm install

Once the dependencies installation is complete, we create two component files, Continents and Continent, and then start the app:

touch src/{Continent,Continents}.svelte
npm run dev

You should get the screen below:

Building the API

Now that we have our Svelte app up and running, we are set to build the API before writing the components for the Svelte app. Our API is a simple one that holds hard coded informations about the seven continents that can be retrieved once a call is made to it.

Next, create a new folder api, in the app’s directory and install the following dependencies:

mkdir api && cd api
npm init -y // Quick initialisation of directory
npm install express cors body-parser

After the installation, create a new file, app.js, that will hold the simple backend, and then copy the accompanying code below into it:

touch app.js

app.js

We start off by importing the dependencies and initializing them:

const express = require("express");
const bodyParser = require("body-parser");
const cors = require('cors')

const app = express();
app.use(bodyParser.json());
app.use(cors())

Next, we create an array of data in JSON format holding the names, population, number of countries in the continent, and the area in kilometers

const continents = [
  {
    id: 1,
    name: "Asia",
    population: "4,624,520,000",
    no_of_countries: 50,
    area: "44,579,000"
  },
  {
    id: 2,
    name: "Africa",
    population: "1,327,042,300",
    no_of_countries: 54,
    area: "30,370,000"
  },
  {
    id: 3,
    name: "North America",
    population: "590,176,500",
    no_of_countries: 23,
    area: "24,709,000"
  },
  {
    id: 4,
    name: "South America",
    population: "429,276,300",
    no_of_countries: 12,
    area: "17,840,000"
  },
  {
    id: 5,
    name: "Antartica",
    population: "No real data on populants",
    no_of_countries: 0,
    area: "14,000,000"
  },
  {
    id: 6,
    name: "Europe",
    population: "747,447,200",
    no_of_countries: 51,
    area: "10,180,000"
  },
  {
    id: 7,
    name: "Australia",
    population: "42,448,700",
    no_of_countries: 14,
    area: "8,600,000"
  }
]

Now that we have our continents’ data stored in the continents variable, we will write the handler for the API that allows us retrieve the data as well as start the backend:

app.get("/", (req, res) => {
  res.send(continents);
});

app.listen(8081, () => {
  console.log("App's running on port 8081");
});

We have successfully completed the backend app! We can start it with the command:

node app.js

We get a running message, and navigating to the url localhost:8081 returns a list of the continent and its data.

Next we’ll write the Svelte app’s component to retrieve and render data.

Writing the Svelte components

As we have seen above, the Svelte app displays its default landing page, and we have completed the backend. The next step is to write our Svelte components and redesign the app to render our continents data. We’ll be writing two components:

• Continent: This component renders the data of the continents passed as a prop to it from the Continents component
• Continents: This component retrieves the list of continents from the backend and renders them through the Continent component

We’ll begin by writing the Continent component that renders the data of continents passed to it from the Continents component.

Continents.svelte

We’ll begin by creating a prop, continent, in the <script> section of the component.

<script>
  // create a prop
  export let continent;
</script>

The continent prop will be used to render data, just as in other libraries like React and Vue.

Next, we render the data from the prop. Remember that from our API, we have the following data: name, population, number of countries, and area. We’ll render this just below the script tags:

<article>
    <h1>{continent.name}</h1>
    <small>
      Population: <b>{continent.population}</b>   
    </small><br/>
    <small>
      Number of countries: <b>{continent.no_of_countries}</b>
    </small><br/>
    <small>
      Continent's size: <b>{continent.area}</b>
    </small>
</article>

Great! Next, we’ll add a little styling :

<style>
  article {
    margin: 0 0 1em 0;
  }
  h1 {
    font-size: 1.4em;
    margin: 0;
    display: block;
  }
</style>

We have successfully completed our Continent component, this is quite straightforward than in other libraries where you have to write plenty code for a component. Next, we write the Continents component.

Continents.svelte

In this component, we retrieve the list of continents from the backend, iterate over it, and pass each continent as a prop to the Continent component to render it. We’ll begin by importing the onMount() method and the Continent component.

<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  // define the data holding variable
  let continents;

Next, we define the onMount method that executes as soon as the Continents component is rendered.

onMount(async () => {
    await fetch(`http://localhost:8081/`)
      .then(r => r.json())
      .then(data => {
        continents = data;
      });
  })

</script>

Next thing is to iterate over the continents data retrieved and pass each one as a prop to the Continent. This is done through Svelte’s built-in conditional support.

{#if continents}
  {#each continents as continent }
    <ul>
      <li>    
        <Continent {continent} />
      </li>
    </ul>
  {/each}
{:else}
  <p class="loading">loading...</p>
{/if}

In the code above, we first check if the data has been retrieved. If yes, the data is iterated and rendered through the Continent component, as can be seen in lines 2–8. Otherwise, it displays a loading message.

onMount() component method

Just as we have componentDidMount() in React, we also have the onMount() method in Svelte.
This method is a function that is executed when the component is rendered. It can take a predefined function as an argument, or a function can be defined in it, as seen above.

Next, we add a little styling:

<style>
  .loading {
    opacity: 0;
    animation: 0.4s 0.8s forwards fade-in;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  li {
    list-style-type: georgian;
  }
</style>

Rendering the app

We’ve successfully written the components, and the next step is to render the data via the app’s main component. We’ll be rewriting the App component:

<script>
  import { onMount } from "svelte";
  import Continent from "./Continent.svelte";
  import Continents from "./Continents.svelte";
  let continents;
  let continent;
</script>

<h1>The Seven Continents Svelte App</h1>
<main>
    <Continents {continents} />
</main>

Svelte has a hot-reloading function pre-built, and so if we navigate to our application via [http://localhost:5000](http://localhost:5000), we get a screen as this:

Next we’ll change our app title and style our app a bit (if you’d like to keep it black-and-white, it’s OK to skip this 😊).

<svelte:head>
  <title>Svelte Continent App</title>
</svelte:head>


<style>
  main {
    background-color: lavenderblush;
    font-size: 15px;
  }
  h1 {
    font-size: 25px;
  }
</style>

Once saved, the app reloads and we have this screen:

Conclusion

In this article, we looked at how to consume and render data from a backend in Svelte, define and export props, and pass props to components. We also briefly looked at what the onMount() method is.

The inbuilt template system is also a great advantage to building simple apps since this function removes the need for excessive JavaScript conditionals we’d normally need in, say, React. After reading this tutorial, I believe you should now be able to write components and consume and render consumed data from an API — keep coding, and again, you can find the code used in this article here.

#svelte #javascript #web-development

What is GEEK

Buddha Community

Your Data Architecture: Simple Best Practices for Your Data Strategy

If you accumulate data on which you base your decision-making as an organization, you should probably think about your data architecture and possible best practices.

If you accumulate data on which you base your decision-making as an organization, you most probably need to think about your data architecture and consider possible best practices. Gaining a competitive edge, remaining customer-centric to the greatest extent possible, and streamlining processes to get on-the-button outcomes can all be traced back to an organization’s capacity to build a future-ready data architecture.

In what follows, we offer a short overview of the overarching capabilities of data architecture. These include user-centricity, elasticity, robustness, and the capacity to ensure the seamless flow of data at all times. Added to these are automation enablement, plus security and data governance considerations. These points from our checklist for what we perceive to be an anticipatory analytics ecosystem.

#big data #data science #big data analytics #data analysis #data architecture #data transformation #data platform #data strategy #cloud data platform #data acquisition

Getting Started With Data Lakes

Frameworks for Efficient Enterprise Analytics

The opportunities big data offers also come with very real challenges that many organizations are facing today. Often, it’s finding the most cost-effective, scalable way to store and process boundless volumes of data in multiple formats that come from a growing number of sources. Then organizations need the analytical capabilities and flexibility to turn this data into insights that can meet their specific business objectives.

This Refcard dives into how a data lake helps tackle these challenges at both ends — from its enhanced architecture that’s designed for efficient data ingestion, storage, and management to its advanced analytics functionality and performance flexibility. You’ll also explore key benefits and common use cases.

Introduction

As technology continues to evolve with new data sources, such as IoT sensors and social media churning out large volumes of data, there has never been a better time to discuss the possibilities and challenges of managing such data for varying analytical insights. In this Refcard, we dig deep into how data lakes solve the problem of storing and processing enormous amounts of data. While doing so, we also explore the benefits of data lakes, their use cases, and how they differ from data warehouses (DWHs).

---

This is a preview of the Getting Started With Data Lakes Refcard. To read the entire Refcard, please download the PDF from the link above.

#big data #data analytics #data analysis #business analytics #data warehouse #data storage #data lake #data lake architecture #data lake governance #data lake management

Future of Marketing: How Data Science Predicts Consumer Behavior

The outbreak of COVID-19 has shaken every industry thereby influenced the preferences and priorities of consumers. During the pandemic, those business models who adapted to the change survived while others got lost in the thin air. Gradually, as the post-pandemic phase arrived, one thing that helped marketers predict their consumer behavior was Data Science

#data-science #consumer-behavior #marketing #big-data #data #data-analysis #data-visualization #data-analytics

How Has COVID-19 Impacted Data Science?

The COVID-19 pandemic disrupted supply chains and brought economies around the world to a standstill. In turn, businesses need access to accurate, timely data more than ever before. As a result, the demand for data analytics is skyrocketing as businesses try to navigate an uncertain future. However, the sudden surge in demand comes with its own set of challenges.

Here is how the COVID-19 pandemic is affecting the data industry and how enterprises can prepare for the data challenges to come in 2021 and beyond.

#big data #data #data analysis #data security #data integration #etl #data warehouse #data breach #elt

Applications Of Data Science On 3D Imagery Data

CVDC 2020, the Computer Vision conference of the year, is scheduled for 13th and 14th of August to bring together the leading experts on Computer Vision from around the world. Organised by the Association of Data Scientists (ADaSCi), the premier global professional body of data science and machine learning professionals, it is a first-of-its-kind virtual conference on Computer Vision.

The second day of the conference started with quite an informative talk on the current pandemic situation. Speaking of talks, the second session “Application of Data Science Algorithms on 3D Imagery Data” was presented by Ramana M, who is the Principal Data Scientist in Analytics at Cyient Ltd.

Ramana talked about one of the most important assets of organisations, data and how the digital world is moving from using 2D data to 3D data for highly accurate information along with realistic user experiences.

The agenda of the talk included an introduction to 3D data, its applications and case studies, 3D data alignment, 3D data for object detection and two general case studies, which are-

• Industrial metrology for quality assurance.
• 3d object detection and its volumetric analysis.

This talk discussed the recent advances in 3D data processing, feature extraction methods, object type detection, object segmentation, and object measurements in different body cross-sections. It also covered the 3D imagery concepts, the various algorithms for faster data processing on the GPU environment, and the application of deep learning techniques for object detection and segmentation.

#developers corner #3d data #3d data alignment #applications of data science on 3d imagery data #computer vision #cvdc 2020 #deep learning techniques for 3d data #mesh data #point cloud data #uav data