Současnost a budoucnost Webových aplikací

Štěpán Stenchlák stepan.stenchlak@matfyz.cuni.cz

Agenda

Backend webových aplikací
Knihovny a nástroje v JavaScriptu
Představení mého projektu

1. Backend

Servírování obsahu

Řízení přístupu do databáze

Vykonávání vedlejších akcí

Vykonávání složitého kódu

Statický obsah

Server pouze servíruje soubory

Dynamický obsah

Protože musíte

PHP
Java
C#

High performance

C/C++
Rust
Go

Stejný jako na frontendu

JavaScript

Node.js / Deno / Bun jako klasický server

Funguje podobně jako Python
Interpretace JS kódu, přístup k systémovým prostředkům

const express = require('express')
const app = express()
const port = 80

app.get('/', (req, res) => {
  res.send(new Date().toLocaleString())
})

app.listen(port, () => {
  console.log(`Listening`)
})

<?php
echo(date('Y-m-d H:i:s'));

(WebAssembly)

Lze programovat v libovolném programovacím jazyce který se přeloží do Wasm
Binární instrukce pro zásobníkový automat

Rust
Emscripten (C/C++)
...

Microservices

Spousta malých nezávislých služeb tvořící fungující aplikaci
Komunikují přes HTTP

Škálovatelnost
Odolnost proti výpadkům
Využíván Docker, Kubernetes

Serverless computing

Neuvažujeme nad konceptem serveru
Amazon Lambda / Cloudflare Workers

Škálovatelnost
Platíš za to, co použiješ

const html = `<!DOCTYPE html>
<body>
  <h1>Hello World</h1>
  <p>This markup was generated by a Cloudflare Worker.</p>
</body>`;

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      'content-type': 'text/html;charset=UTF-8',
    },
  });
}

addEventListener('fetch', event => {
  return event.respondWith(handleRequest(event.request));
});

Github Pages

Automatické nasazení + build statických stránek na internet

Netlify
Vercel
Cloudflare Pages

DEMO

free-for.dev

DBaaS - zdarma MySQL a další databáze
Web hosting
Amazon services

Spousta věcí mimo backendové řešení

2. Současný JavaScript

Jak se programuje v dnešním JavaScriptu

npm - node package manager

Databáze knihoven pro JavaScript

Podobné jako pip pro Python nebo NuGet pro C#

const ms = require('ms')

ms('2 days')  // 172800000

Knihovny

lodash - easier work with arrays, numbers, objects, strings
chalk - colored font in terminal
ms - convert various time formats into milliseconds
mongodb - driver for Node.js
cytoscape.js - Graph theory
(network) library for visualisation
and analysis

Tooly

eslint - find and fix problems in your JavaScript code
babel - compiler for next generation JavaScript
webpack - static
module bundler
for modern
JavaScript
applications

Frameworky

express - minimalist web framework for Node.js
react / vue / svelte - library for building user interfaces

Více v NSWI153 Pokročilé programování webových aplikací

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  }
}
</script>

<template>
  <button @click="list.push(list.length + 1)">Push Number</button>
  <button @click="list.pop()">Pop Number</button>
  <button @click="list.reverse()">Reverse List</button>

  <ul>
    <li v-for="item of list">{{ item }}</li>
  </ul>
</template>

TypeScript

De-facto standard místo JS

Typová kontrola za překladu
Autocomplete od IDE
Interfaces
Menší chybovost, rychlejší vývoj

interface Account {
  id: number
  displayName: string
  version: 1
}
 
function welcome(user: Account) {
  console.log(user.id)
}

function welcome(user) {
  console.log(user.id)
}