Svelte at the Edge - Luke Edwards at Svelte Summit

Luke Edwards recently gave a talk at Svelte Summit 2020 in which he discussed running Svelte applications at the edge. Edwards demoed building and running a simple Svelte application with Cloudflare Workers and Google Cloud.

Edwards first explained web workers and service workers. The Web Workers API allows developers to run a script in a background thread that is independent of the main thread. Web Workers are often used to run expensive computations without blocking the main thread. The main thread runs the event loop in which user interactions are processed. Blocking the main thread would thus negatively alter the responsiveness to user inputs. Web Workers are also used to run computations concurrently, and possibly in parallel on multi-core architectures.

Workers may themselves spawn new workers, as long as those workers are hosted at the same origin as the parent page. Workers are however limited by design in their operations. Workers cannot update the DOM to protect against the dangers of concurrent access to the DOM state. Workers cannot use some default methods and properties of the window object for similar reasons.

Workers, being on a separate thread and scope, rely on messaging for communication with the main thread. Both communicating parties send their messages using the postMessage() method, and respond to messages via the onmessage event handler. Message data is copied rather than shared. A web worker that runs the code contained in a worker.js file can be created in the main thread as follows:

/* main.js */

const myWorker = new Worker('worker.js');

#svelte #javascript #web development #cloud #architecture & design #development #news

What is GEEK

Buddha Community

Svelte at the Edge - Luke Edwards at Svelte Summit

Svelte at the Edge - Luke Edwards at Svelte Summit

Luke Edwards recently gave a talk at Svelte Summit 2020 in which he discussed running Svelte applications at the edge. Edwards demoed building and running a simple Svelte application with Cloudflare Workers and Google Cloud.

Edwards first explained web workers and service workers. The Web Workers API allows developers to run a script in a background thread that is independent of the main thread. Web Workers are often used to run expensive computations without blocking the main thread. The main thread runs the event loop in which user interactions are processed. Blocking the main thread would thus negatively alter the responsiveness to user inputs. Web Workers are also used to run computations concurrently, and possibly in parallel on multi-core architectures.

Workers may themselves spawn new workers, as long as those workers are hosted at the same origin as the parent page. Workers are however limited by design in their operations. Workers cannot update the DOM to protect against the dangers of concurrent access to the DOM state. Workers cannot use some default methods and properties of the window object for similar reasons.

Workers, being on a separate thread and scope, rely on messaging for communication with the main thread. Both communicating parties send their messages using the postMessage() method, and respond to messages via the onmessage event handler. Message data is copied rather than shared. A web worker that runs the code contained in a worker.js file can be created in the main thread as follows:

/* main.js */

const myWorker = new Worker('worker.js');

#svelte #javascript #web development #cloud #architecture & design #development #news

Zelma  Gerlach

Zelma Gerlach

1621616520

Edge Computing: Device Edge vs. Cloud Edge

It sometimes makes sense to treat edge computing not as a generic category but as two distinct types of architectures: cloud edge and device edge.

Most people talk about edge computing as a singular type of architecture. But in some respects, it makes sense to think of edge computing as two fundamentally distinct types of architectures: Device edge and cloud edge.

Although a device edge and a cloud edge operate in similar ways from an architectural perspective, they cater to different types of use cases, and they pose different challenges.

Here’s a breakdown of how device edge and cloud edge compare.

Edge computing, defined

First, let’s briefly define edge computing itself.

Edge computing is any type of architecture in which workloads are hosted closer to the “edge” of the network — which typically means closer to end-users — than they would be in conventional architectures that centralize processing and data storage inside large data centers.

#cloud #edge computing #cloud computing #device edge #cloud edge

Poppy Cooke

Poppy Cooke

1600073509

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

Svelte can be used anywhere and for anything you’d use Angular, React or Vue for. It’s a JavaScript tool used for building fast web applications, with a big focus on super slick and interactive user interfaces that are not only incredibly easy to build within the Svelte framework, but are also highly code efficient – never a bad thing.

There’s no performance cost associated with the framework’s abstractions, nor is there that initial dip in performance when an app first opens that’s usually attributed to the DOM diffing version update checking process.

Better yet, there is the flexibility to either build the entire app in Svelte, or to add in segments incrementally to an already existing base of code. Components made in Svelte can operate as stand-alone packages that don’t require the overhead of a conventional framework dependency, and can be used anywhere really.

SUBSCRIBE to Kofi Group: https://www.youtube.com/channel/UC1mBXiJnLtiDHMtpga0Ugaw?view_as=subscriber


00:00 - Intro
02:49 - What is Svelte
04:22 - What is Svelte used for
06:01 - Svelte pros
09:08 - Svelte cons
11:00 - Who’s using Svelte
*

Website: https://www.kofi-group.com/

Blog article version: https://www.kofi-group.com/5-reasons-why-svelte-is-improving-ui-development/

Remote jobs: https://www.kofi-group.com/search-jobs/

Kofi Group helps startups outcompete FAANG (Facebook, Amazon, Apple, Netflix, Google) and big tech in the highly competitive, war for talent.

Our videos cover hiring tips and strategies for startups, software engineering and machine learning interview preparation, salary negotiation best practices, compensation analysis, computer science basics, artificial intelligence, tips for other recruiters, and much more!

Hit the SUBSCRIBE button and we’ll see you in the comments!


Music - Throwaway 2 by XIAO-NIAO
https://www.youtube.com/watch?v=DqeGWcZ0dMg
https://soundcloud.com/bird-xiao/throwaway-2


#svelte #javasript #softwareengineering #startup #faang #kofigroup

#svelte #javasript #svelte.js

Getting Started Building a Svelte App with SvelteKit

Svelte is a lightweight framework for building web applications. When you use it, it looks and feels a lot like other frontend frameworks like React and Vue, but leaves the virtual DOM behind. That, along with other optimisations means it does far less work in the browser, optimising user experience and load time.

In this guide, we'll be going over how to setup your first Svelte application using SvelteKit. Svelte has a number of different ways to make applications, and SvelteKit is one of the official packages from Svelte for doing that. If you're interested in other frameworks, you might enjoy a similar guide we have on making your first Vue application.

#Creating your first Svelte Application

To get started, open up a new terminal window and initiate your svelte application using the command below. Note if you don't have npm installed, you'll need to get it. You can install npm by installing Node.JS, via the link here.

Once you have Node.JS and NPM installed, run the command below. Before you do that though, make sure you use cd to move into the folder you want to create your new Svelte application in.

npm init svelte@next my-svelte-app

When you run this command, you'll auto generate a Svelte template in a folder called my-svelte-app. Svelte will guide you through a number of options. Select your preferences. The image below shows the one's I have selected. For the purposes of this guide, I will be using the Skeleton project.

Options for Selecting in SvelteKit

Finally, run the following command to cd into your svelte directory:

cd my-svelte-app

And then install all of your dependencies using the following line:

npm i

#Svelte File Structure

If you are familiar with other frameworks, then Svelte will feel familiar. Here is an overview of the file structure in Svelte, for the project we have just made:

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

Our basic Svelte application is ready to go. If you want to see how it looks, you can serve it on your local computer on the URL http://localhost:3000 by running the following command in your Svelte application folder:

npm run dev

If you visit http://localhost:3000 in your browser, you should see something like this:

Our first Svelte Application

#Creating new pages or routes in Svelte

To make a new route in Sveltekit, simply make a new file within the routes folder. For example, if you make a file called about.svelte, then it will show up at http://localhost:3000/about. Another way you can do this is to make a new folder called about, and put index.svelte in that folder, http://localhost:3000/about will work.

#Try it yourself

Create a new page within your /src/routes folder, called about.svelte. Now when you go to http://localhost:3000/, you will be able to access that page. Similarly, you can try making a folder called about with a file placed inside called index.svelte

#How to run your SvelteKit App on Node.JS

To run your Svelte application on a server or locally on a Node.JS server, you need to use an adapter. If you want to run your Svelte application on a Node Server, install @sveltejs/adapter-node@next via the following line:

npm i @sveltejs/adapter-node@next 

Now we have to change our svelte.config.js file. We need to use the new adapter, and change our kit.adapter object within the config file. You can replace the contents of your svelte.config.js with the code below, but we're only changing two lines - our adapter import, and then adding the build directory in your config:

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// We have changed this to point to a build directory
		adapter: adapter({ out: 'build' })
	}
};

export default config;

#Other SvelteKit adapters

If you want to run your Svelte application on Cloudflare, Netlify, or Vercel, then you need to use one of these adapters, you don't need to do anything. These are all included by default in adapter-auto - so only change your svelte.config.js file if you aren't planning on using a Node.JS server.

#How to build your SvelteKit App for Production

Now that we've configured our adapter, let's build our application. In SvelteKit, it's easy to make your app ready to run in a production environment. Simply run the following command, which will create a new folder called .svelte-kit with all your production ready files in.

npm run build

Now, if you want to preview your production build, simply run the following command:

npm run preview

If you are running your application on a Node.JS server and have updated your adapter, as shown in the previous section, then you can run your new Svelte application locally by running the following command in your Svelte directory:

node build/index.js

Now when you navigate to http://localhost:3000/, your Svelte application should show, only this time it will be ready for production.

#Conclusion

In this guide we've looked at how to use SvelteKit to create your first Svelte application with routes. Let's look at what we've learned:

How to set up SvelteKit and create the basic structure of your Svelte application.

How to use routes in SvelteKit, so you can have multiple pages on your application.

How to update your config file to use the right adapter, based on where you want to deploy your application.

How to build and run your application locally on a Node.JS server.

Next, you can try playing around with Svelte to start customizing your application.

Source: https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit

#svelte #sveltekit