Making the web svelter with SvelteKit

# Making the web Svelter with SvelteKit

### Part 0 - Introduction
						---

"The road to hell is paved with the best of intentions"
						<div style="text-align: right">- Saint Bernard of Clairvaux</div>
						---
						## Svelte

<div style="text-align: left; color: #aaa;">/svɛlt/</div>
						<div style="text-align: left; padding-left: 60px;">[...] slender and elegant</div>
						<div style="text-align: left; padding-left: 60px; color: #aaa;">"she was svelte and sophisticated"</div>
						<div style="text-align: center; color: #666; padding-top: 60px;">Svelte came to us, by way of French, from Italian svelto, which itself comes from the Italian verb svellere, meaning "to pluck out" or "to pull or stretch out." In English svelte has been used since the early 19th century to describe a slender appearance"</div>
						<div style="text-align: right"><a href="https://www.merriam-webster.com/dictionary/svelte">https://www.merriam-webster.com/dictionary/svelte</a></div>
						---
						## $ ~ whoami

- I am Joachim Skeie
						- Senior Consultant at Experis Norway
						- Author of Ember.js in action (2014)
						- Operate a makerspace for kids (Skaperiet)
						---
						## What is Svelte
						## and SvelteKit?

- Svelte is a:
							- programming language
							- component framework
							- compiler
						- SvelteKit is a:
							- meta-framework built on top of Svelte
							- helps build full-stack application for the modern web.
---
						## Svelte - the language

- Svelte is a programming language using the .svelte file extension.
						- A .svelte file contains HTML, CSS and JavaScript
						- Svelte will compile this down to vanilla JavaScript

<pre><code data-line-numbers>
						<script>
							const name = "Joachim";
						</script>

<h1>Hello {name}!</h1>

- Svelte is a component library, similar to React and Vue
						- Provides interesting features such as
							- Reactivity
							- Reactive Statements
							- Stores
							- No Virtual DOM (!!)
							- and much more
						---
						## Svelte - The compiler

- Probably the most unique and interesting feature of Svelte
						- A Svelte app is compiled at build time into vanilla JavaScript code
							- You only ship the Svelte-library code you actually use in you app
						- Means that Svelte can add any number of features into its codebase without affecting you apps footprint

---
						## Svelte Reactivity

- Based on normal assignments, no special functions to learn
							- no React useState and setState
						- UI updates automatically when variables change
						- Here, whenever **increment()** is called, **count** gets updated, which also triggers the **UI** to update ***automagically***!

<pre><code data-line-numbers>
						let count = 0;

function increment() {
						  count += 1;
						}
						</code></pre>

---
						## Svelte Reactivity statements

- $: creates a reactive statement, which keeps up-to-date whenever any of its dependant-variables change
							- No need for complex state-management libraries

<pre><code data-line-numbers>
						<script>
						let a = 2;
						let b = 4
						$: product = a * b;
						</script>

<h1>Product is: {product}</h1>>
						</code></pre>
						---
						## Svelte Components

- A .svelte file is a component containing its own markup, its own state and its own logic
						- A .svelte file can contains three code types:
							- JavaScript inside the **\<script\>**-tag
							- Markup: Normal HTML with markup logic contained within **{** and **}**
							- Styles that are component-specific inside the **\<style\>**-tag

<pre><code data-line-numbers>
						<script>
							const name = "Joachim";
						</script>

<h1>Hello {name}!</h1>

---
						## Svelte - Stores

- Allows multiple components to share state without passing data as props
						- Has a **subscribe()**-function that will notify components when the store value change
						- Stores are reactive
							- Any component subscribing to the store will see any change made to the store
						- A Svelte component can use the store via the $-handle
						- Stores can be readable, writable or derived

---
						## Svelte vs SvelteKit

---
						## SvelteKit

"SvelteKit is built on Svelte, a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It's a love letter to web development."

<div style="text-align: right">- <a href="https://kit.svelte.dev" target="_blank">kit.svelte.dev</a></div>
						---
						## SvelteKit - The meta framework

- SvelteKit adds additional features that are needed to build fuill-stack applications
							- Server-side rendering
							- Hooks
							- Form actions
							- API routes
							- Endpoints
							- Hydrization
							- etc

---
						## SvelteKit - ServerSide Rendering

- SvelteKit supports SSR, ensures your app is both fast and supports SEO
							- SSR sends a complete website to the browser
							- Hydration ensures SPA-features users expects from modern webapps

---
						## No more ugly routing (Angular)

```angular [3-5, 7-12, 15-16]
						import { NgModule } from '@angular/core';
						import { RouterModule, Routes } from '@angular/router';
						import { HeroesComponent} from "./heroes/heroes.component";
						import { DashboardComponent} from "./dashboard/dashboard.component";
						import { HeroDetailComponent} from "./hero-detail/hero-detail.component";

const routes: Routes = [
						  {path: 'heroes', component: HeroesComponent},
						  {path: 'dashboard', component: DashboardComponent},
						  {path: 'detail/:id', component: HeroDetailComponent},
						  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
						];

@NgModule({
						  imports: [RouterModule.forRoot(routes)],
						  exports: [RouterModule]
						})
						export class AppRoutingModule { }
						```
						---
						## No more ugly routing (Ember.js)

```ember [1-2, 4-7, 9-21]
						import EmberRouter from '@ember/routing/router';
						import config from './config/environment';

export default class Router extends EmberRouter {
						  location = config.locationType;
						  rootURL = config.rootURL;
						}

Router.map(function() {
						  this.route('ideer');
						  this.route('page', { path: '/page/:page_id' });
						  this.route('cms', function() {
							this.route('page');
							this.route('pages', function() {
							  this.route('page', {path: '/:page_id'});
							});
						  });
						  this.route('blogg', function() {
							this.route('post', {path: '/:blogg_id'});
						  });
						});
						```
						---
						## No more ugly routing (react-router)

```react []
						import ReactDOM from "react-dom/client";
						import { BrowserRouter, Routes, Route } from "react-router-dom";
						import Layout from "./pages/Layout";
						import Home from "./pages/Home";
						import Blogs from "./pages/Blogs";
						import Contact from "./pages/Contact";
						import NoPage from "./pages/NoPage";

export default function App() {
						  return (
							<BrowserRouter>
							  <Routes>
								<Route path="/" element={<Layout />}>
								  <Route index element={<Home />} />
								  <Route path="blogs" element={<Blogs />} />
								  <Route path="contact" element={<Contact />} />
								  <Route path="*" element={<NoPage />} />
								</Route>
							  </Routes>
							</BrowserRouter>
						  );
						}

const root = ReactDOM.createRoot(document.getElementById('root'));
						root.render(<App />);
						```
						---
						## SvelteKit - Routing

- SvelteKit includes a built-in ***directory***-based router that ensures:
							- URLs are ***human readable***
							- Keeps your directory-structure ***consistent*** with the URL-patterns (!!)
							- Splits your code into essentialy "page-based components" and site-wide components

---
						## SvelteKit - Routing

---
						## SvelteKit - Routing - recap

- No magic file responsible for keeping track of the routes
							- Extremely simple to find the page-component by looking simply at the URL
						- Every route rendered on the page has its own "page-based component"
						- +page.svelte contains parts only relevant to this URL
						- +layout.svelte contains parts relevant to this URL and children
						---
						## SvelteKit - Adaptability

- SvelteKit is designed to be adaptable
						- Has built-in support for multiple build and deploy targets
							- Cloudflare
							- Netlify
							- Node
							- Vercel
							- Static
							- A range of community developed adapters
						---
						## Onwards

[part 1](part1_slides.html)