Prez

Szerver oldali JavaScript

1. hét

Bevezetés. Node.js története, fejlődése, működése, V8, NPM és ökoszisztéma bemutatása.

Csak a fontos dolgok

Paróczi Zsombor paroczi@tmit.bme.hu | Dr. Kovács Gábor kovacsg@tmit.bme.hu | 2 kredit | csütörtök 12:15 - 14:00 | https://portal.vik.bme.hu/kepzes/targyak/vitmav42 | https://malna.tmit.bme.hu/vitmav42/ | https://tinyurl.com/nodeyoutube | https://github.com/VITMAV42

Gyakorlathoz nem kell gép!!!

Meg ami még fontosabb

Hét fejlesztési gyakorlat megoldása

Félévközi jegy a teljesített feladatok alapján
Leadási határidő a weboldalon
Hét feladat megoldása kötelező
Két feladat pótolható vagy javítható a pótlási hét végéig
Eredmények a weboldalon, módosítási kérések is ott lesznek felsorolva!

https://malna.tmit.bme.hu/vitmav42/submit/

Eredmények és információk

Értékelés értelmezése:

Szép munka vagy Ok: el lett fogadva, minden ok
Hiányos: A megjegyzés alapján javítsunk valamin

Hiányos esetén újra be kell adni a házi feladatot, az eredeti leadási határidővel számoljuk a késést.

1. Feladat

Egy elképzelt megrendelő feladatát specifikáljuk:

Legalább 2 entitás típus (legalább egyiknél az összes CRUD funkció megvalósítása)
Legalább 3 nézet (mindegyikhez mockup)
Részletes specifikáció kell

Amit le kell adni:

specifikáció pdfben (minta)
mockup specifikációban
összezipelve fel lehet tölteni (nem rar, gz, etc...)

2. hét péntek éjfél

(szeptember 16, 23:59)

Mintafeladat és korábbi évek

Githubon megtalálható végtelen, van hivatalos is.

Ésszel használjuk!

Kérdések amikre a válasz: nem :/

Lehet-e TS-et használni?
Lehet-e SPA-t építeni hozzá?
Lehet-e csoportban dolgozni?
Megéri 2 kreditért a sok munka?

Végre jöhet a lényeg

Webfejlesztés

sok fejlesztő, fura megítélés
nagyon nagy a skála szaktudásban, projekt managementben

Pozíciók

https://www.youtube.com/watch?v=-ta-D26iAIc

Frontend 2005

CSS, HTML, JS

Frontend 2022

CSS, HTML, SASS, LESS, Stylus, Bootstrap, Tailwind, JS (ES6, ES2016, ESnext+++), jQuery, Babel, HTML, Gulp, Webpack, React, Angular, Vue, ...

Agile módszerek

Amire készülni kell

nagyfokú bővíthetőség és félúton változó igények
rövid fejlesztési idő
"nem házakat építünk" mentalitás vs utólagos módosíthatóság
cél: moduláris, egyszerű elemek hasznlata

Dan North (Dan North & Associates) - Beyond Features: Rethinking Agile Planning and Tracking:

http://www.ustream.tv/recorded/61492206

Javascript

10 nap alatt "összedobott" programnyelv, amit 1995-ben Brendan Eich hozzott létre, amikor a Netscape-nél dolgozott.

Az ECMA szabványosította 1996-1997-ben, azóta is ők foglalkoznak a nyelvi alapokkal. Most az ECMA script 6-os változatánál tartunk.

Kiforrott technológia már.

JavaScript TLDR;

1995 óta létezik, gyengén típusos nyelv.

Mindenhol fut, de tényleg.

Egy egyszerű nyelv

function foo(item) {
   console.log('Bar' + (item + 3) + "!");
}
foo(1);

Vagy mégsem?

Promise.all(Array.apply(null, {length: 8})
    .map(Number.call, Number)
    .filter(e => !(e % 2))
    .map(e => new Promise((r1, r2) => {r1(e + 3)})))
    .then(e => e.join(''))
    .then(console.log)
    .catch(e=>console.error(e))

'Komolytalan programnyelv'

Atwood's Law

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Chrome és V8

Google Chrome 2008 óta fejlesztés alatt lévő böngésző, induláskor már a V8 javascript motor volt benne.

A V8 natív kóddá fordítja a betöltött js-t, így gyorsítva a működést. Nagyon sok "varázslat" van benne, mint minden JIT projektben.

Open source, bármiben használható library:

https://code.google.com/p/v8/

Alapja a Node.js, MongoDB szoftvereknek.

JS sebesség

Node.js

Ha már kliens oldalon javascriptet használunk (de-facto), miért ne használhatnánk szerver oldalon is?

Mi is kell ehhez?

Node.js modulok

Beépített standard modulok:

File system, Path
Net, HTTP, UDP, DNS, Domain
Cluster, Console, Crypto
...

A legalapvetőbb funkciók vannak csak meg és a nyelv.

Mit tegyünk?

NPM

npm is the package manager for javascript

sok, sok, sok, sok, sok package

Telepítsünk!

Egy egyszerű webszerver

const http = require('http');

const server = http.createServer((req, res) =>{
    res.writeHead(200);
    res.write("Hello world!");
    res.end();
});

const port = 3000;
server.listen(port, () => {console.log('server listening on port ' + port);});

Egy npm module telepítése

Egy egyszerű webszerver (+ colors)

const http = require('http');
const colors = require('colors');                         // 1.

const server = http.createServer( (req, res) => {
    res.writeHead(200);
    console.log('URL: ' + colors.red(req.url));          // 2.
    res.write("Hello world!");
    res.end();
});

const port = 3000;
server.listen(port, () => { console.log('server listening on port ' + port);});

Mivel fogunk foglalkozni a félév során:

javascript nyelvi elemek (ES 6 is)
node alap modulok
express struktúra, middleware gondolatmenet és használat
npm, gulp, mongodb, ejs technológiák
tesztelés (tényleg hasznos módon)
egy csipetnyi HTML és CSS