Současnost a budoucnost Webových aplikací

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

Agenda

  1. Backend webových aplikací
  2. Knihovny a nástroje v JavaScriptu
  3. 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)
}

3. Dataspecer

Současnost a budoucnost Webových aplikací

By Štěpán Stenchlák

Made with Slides.com

Současnost a budoucnost Webových aplikací

  • 130

More from Štěpán Stenchlák