DEV Community: KAIDI

Building and deploying a web app in svelte

KAIDI — Sat, 06 Feb 2021 13:50:21 +0000

I wanted to try svelte by myself to take a clearer idea of the framework. In my daily life, I work especially with react (Next.js). Both of react and svelte are based on component-architecture, the major difference is that svelte compiles the code, while react uses the virtual DOM.

What is the application?

A simple web-application that fetches the trending git repositories of a programming language and displays them.

Tools we're going to use:

Svelte for developing the app.
SnowPack for building the app.
Vercel for deploying the app.

The source code is available here.

KaidiMohammed / svelte-power

The Demo.

Project architecture

the project architecture is very simple.

Let's begin

In the "src" folder we create App.svelte, it's the principal component.

  const getReposByLang = async () => {
    if (!reposMap.has(repoLang)) page = 0;
    isSearching = true;
    if (reposMap.has(repoLang) && !page === 0) {
      isSearching = false;
      return;
    }
    await getRepos(repoLang, page).then((res) => {
      if (reposMap.has(repoLang)) {
        reposMap.set(repoLang, [...reposMap.get(repoLang), ...res.items]);
      } else reposMap.set(repoLang, res.items);
      isSearching = false;
    });
    listRepo = reposMap.get(repoLang);
    if (page === 0) page = 1;
  };

  // actions to do when the component is mounted first time
  onMount(() => {
    getReposByLang();
    repoLangInput.focus();
  });

The onMount function executes the getReposByLang(); and repoLangInput.focus(); when the component is mounted, it's equivalent in react is useEffect().
The getReposByLang function will fetch the repos and save them in a Map.

export default async function getRepos(repoLang: string, page: number) {
  repoLang = repoLang.replace(/\s/g, "");
  const response = await fetch(
    `https://api.github.com/search/repositories?q=language:${repoLang}&sort=stars&order=desc&per_page=30&page=${
      page + 1
    }`
  );
  if (response.ok) {
    return response.json();
  } else throw new Error();
}

Displaying the git repos

{#if isSearching}
      <div style="display:flex;flex-direction:row;position:relative;left:42%">
        <Spinner class="spinner-border text-warning" />
      </div>
    {/if}
    <Row>
      {#each listRepo ?? [] as repo}
        <Col class="mt-1 col-md-6 col-12 col-s-6 col-sm-6 col-lg-4 col-xl-3">
          <Repo {repo} />
        </Col>
      {/each}
    </Row>

We loop over listRepo which contains the git repos and display them in a grid.

We use another component to display each repo.
<Repo {repo} />
Repo is a component that has a props repo.

<script lang="ts">
  import type { IRepoProps } from "src/types";

  import { Card, CardBody } from "sveltestrap";

  export let repo: IRepoProps;
</script>

To create props for a component we just add export to the variable name.

  export let repo: IRepoProps;

Building with snowPack

I've used Snowpack to build the project; Snowpack is a lightweight alternative to webpack.
In the config file we just need to add the svelte plugin and let place to magic.

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: "/",
    src: "/dist",
  },
  plugins: ["@snowpack/plugin-svelte"],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],

To build the project we launch snowpack build

Deploying on vercel

Deploying in vercel is very simple, we just need to import the project from Github and vercel will do all the rest.

The source code and the demo.

The source code is available here.

KaidiMohammed / svelte-power

The Demo.

What is the application?

A simple web-application that fetches the trending git repositories of a programming language and displays them.

Tools we're going to use:

[Svelte] (https://svelte.dev/) for developing the app.
[SnowPack] (https://www.snowpack.dev/) for building the app.
[Vercel] (https://vercel.com/) for deploying the app.

Project architecture

the project architecture is very simple

Let's begin

In the "src" folder we create App.svelte, it's the principal component.

const getReposByLang = async () => {
  if (!reposMap.has(repoLang)) page = 0;
  isSearching = true;
  if (reposMap.has(repoLang) && !page === 0) {
    isSearching = false;
    return;
  }
  await getRepos(repoLang, page).then((res) => {
    if (reposMap.has(repoLang)) {
      reposMap.set(

…

View on GitHub

The Demo.

conclusion

Svelte is really simple to learn comparing with React, the absence of JSX, and the new paradigms brought by React make svelte the friend of the beginners in web dev. I wait for the svelte-kit which will bring more exciting features.

News API suggestions ?

KAIDI — Mon, 18 Jan 2021 15:27:20 +0000

Hey,

Do you have any suggestions for some free and unlimited News API? I've tried newsapi.org but it's limited to only 100 API calls/day !

Thanks.

Clean code or not clean code that's the question

KAIDI — Wed, 16 Sep 2020 14:09:01 +0000

Hello,
code quality is a really important subject in software development, if we really like to deliver a real tested product with fewer bugs (or no bugs) we should respect the majority of coding rules and standards.
I use eslint and prettier in vscode and some other extensions for code formatting.
Lately, I've started using SonarQube for checking code in CI/CD and it's a really powerful engine, it analyses the code and it detects bugs, untested code, security vulnerabilities, and more.
after resolving all the points, another devlopper will check the merge request to check the unseen or forgotten issues.

what do you think and what do you use in your daily life?

Recommendations to speed up a web application

KAIDI — Tue, 11 Aug 2020 17:07:20 +0000

Hello there,

The actual web development major frameworks like angular,react, vue and other relie on some external libraries and every time we want to use an external library means more of code behind the scene , do you think this has an influence on the speed of the web application and what do you recommend to speed up a web app ? (Not using a framework is not a choice😶)

what do you think about Antd design ?

KAIDI — Fri, 19 Jun 2020 08:19:10 +0000

Hello there,
Soon I will start a new react project and I have a choice between using Antd Design which is a powerful React UI library Or using react-bootstrap and all other libraries ! I mean for a very large application which is the most suitable to use to not have performance issues ?

Simple react-based chat application

KAIDI — Mon, 11 May 2020 18:25:59 +0000

I want to share a simple chat application that I've made using next js and socket-io.

To achieve this I've used Next.js and Socket.IO.
Next.js is a framework that most notably allows us to write server-rendered React apps easily.
Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers.

Front part

First step : creating the next application.
The command : npx create-next-app (we choose the name of app )
In next js we just need to add a file in pages folder to have all the routing stuff ....

We modify the existing file index.js.
firstly we import the necessary libraries

In this work I've used functional components, much easier and more fun than class components, so we create the App component, we define some states that we need later.

1) a state to save the connected user list.
2) a state to save the message that we send.
3) a state to save the received messages.

After that we create the basic functions for communication between clients and server.
For each new client do :
1) in a useEffect hook we emit a login event to the server.
2) the server says:"Hi", and he sends the list of logged clients and also returns some information of the logged client such as socket_id.
End
Every client can send messages to all the users by emitting sendMsg event.

finally we render the connected users and an input to send messages.

that's all for the front part, we move to the second one which is the server and the event management.

The server part

we create a simple node server.
the mission of the server is to respond to all the events which come from the clients.
We use an array to save the user information (a real database for serious things is more suitable)
We manage the connection and disconnection events by adding or removing the client from the clients array respectively.
When the server catch the SendMsg event, it broadcast it to all the logged client (we can create rooms if we want more control or just emit it to a specific client by passing his socket id)

The git repo :

KaidiMohammed / chatapp

a simple chat app made with next js, socket io

Getting Started

In the root folder there are two folders :D

The first folder : socket-io-server

It contains the io socket server. in order to run the server, run the commands bellow :

npm install
npm start

The second folder : NextChat

It contains the next js chat application. In order to run the application, run the commands bellow :

npm install
npm run dev
Go to : http://localhost:9000 (by default)

Description

NextChat is a simple react-based chat application. Each client join the chat can send messages to the other members. The library Socket.IO is used for bi-directional communication between clients. Enjoy.

View on GitHub

to see the final result, please click here : NextChat

Thanks for reading.