webové programování je chalenge! sramko - webove programovani … · dodržením design...
TRANSCRIPT
![Page 1: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/1.jpg)
Webové programování je CHALENGE!
Milan Čapoun, Samuel Šramko
![Page 2: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/2.jpg)
Představení
• Milan Čapoun
– Šéf vývoje webových aplikací v Cleverlance a.s.
• Samuel Šramko
– Senior vývojář webových aplikací v Cleverlance
![Page 3: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/3.jpg)
Agenda
• Co je to webová aplikace? • Proč to dělat jednoduše, když to jde i složitě • Různé oblasti dovedností, aneb to vše musím umět? • Což takhle dát si Angular? • Client side vs. Server side • Výkon, HA, Bezpečnost, Přenositelnost… • Clever Akademie • Otázky a odpovědi
![Page 4: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/4.jpg)
Cleverlance Enterprise Solutions, a.s.
Praha
Brno
Bratislava
České Budějovice
Hradec Králové
člen skupiny Cleverlance Group
Jeden z největších poskytovatelů IT služeb
Ryze česká společnost
![Page 5: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/5.jpg)
Co jsou webové aplikace? Aneb kdo nikdy nezkusil?
![Page 6: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/6.jpg)
Vývoj webové aplikace je…
1.HTML 2.CSS 3.JavaScript
![Page 7: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/7.jpg)
Webové aplikace v enterprise sféře
![Page 8: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/8.jpg)
Cloudová Služba (Google)
Web Server • Java • Spring • Hibernate
Webový prohlížeč • HTML / CSS • JavaScript • Angular
SQL
Databáze
Backend systém • DMS • CRM • Billing • Apod.
![Page 9: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/9.jpg)
Webové aplikace JDE psát jednoduše a rychle!
Proč to tedy dělat složitě?
![Page 10: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/10.jpg)
Protože…
![Page 11: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/11.jpg)
Enterprise aplikace mají požadavky
• Na výkon – co když o Vánocích klikne 10.000 lidí naráz?
• Na bezpečnost – co když se mi dostanou do internet bankovnictví?
• Na high availibility – co když potřebujeme systém na hodinu odstavit?
To nám utíkají peníze
• Na udržovatelnost – Po vaší poslední „malé opravě“ přestaly komplet
fungovat objednávky!
![Page 12: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/12.jpg)
Dříve platilo • Veřejné portálové
stránky musejí být krásné a poutavé
• Podnikové Enterprise aplikace můžou být hnusné (nikomu to neříkejte, ale je to tak…)
![Page 13: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/13.jpg)
A tak se to komplikuje
• Webové aplikace se musejí vyvíjet s dodržením design patternů
• Musejí respektovat zásady bezpečného programování (TOP 10 OWASP)
• Musí být navrženy s ohledem na výkon
• V hodně věcech vám pomůžou framewroky – ale musíte je umět!
• A ještě ke všemu musejí být hezké!!!
![Page 14: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/14.jpg)
Kreativní design / UX
Photoshop
HTML / CSS / JS
Angular
Java
Různé skilly webového vývoje
![Page 15: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/15.jpg)
Kreativní design / UX
![Page 16: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/16.jpg)
Photoshop
![Page 17: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/17.jpg)
Photoshop – řezání grafiky
![Page 18: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/18.jpg)
HTML / CSS / JavaScript
+ +
=
![Page 19: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/19.jpg)
Angular nebo jiný FrontEnd Framework
Tohle už je skutečné
programování
![Page 20: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/20.jpg)
Java nebo jiný middle/backend jazyk
![Page 21: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/21.jpg)
Java nebo jiný middle/backend jazyk
![Page 22: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/22.jpg)
Java a frameworky a nástroje
• JSF, Wicket, Vaadin, …
• Spring – Ve skutečnosti celá
rodina frameworků
• Hibernate
• Log4j
• Atd. - Obrovské množství Open source
• Maven - build
• JUnit - test
• Jenkins – CI
• Atd. - Obrovské množství Open source
![Page 23: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/23.jpg)
Kreativní design / UX
Photoshop
HTML / CSS / JS
Angular
Java
Tohle všechno je třeba umět!
![Page 24: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/24.jpg)
Angular +
HTML / CSS
![Page 25: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/25.jpg)
Ukázka Angular
• Aneb ať chvilku mluví taky ten, kdo tomu opravdu rozumí ;-)
![Page 26: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/26.jpg)
S rozsahem webové aplikace rychle roste náročnost jejího vývoje
Rozsah a funkčnost webové aplikace
Nár
očn
ost
výv
oje
![Page 27: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/27.jpg)
• Není mezi vámi zájemce?
• Řekněte komukoli, koho by mohlo zajímat
![Page 28: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/28.jpg)
FrontEnd – Client side vs. Server side
• Dosud jsme mluvili hlavně o JavaScript/Angular = Client side
Další frameworky: • Ember.js • Backbone • Meteor • …
![Page 29: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/29.jpg)
FrontEnd – Client side vs. Server side
• Jiné přístupy jsou orientované více Server side
frameworky: • JSF • Wicket • Vaadin • Řada dalších
![Page 30: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/30.jpg)
Server side
• Samozřejmě NAKONEC jde zase o HTML/CSS/JS v prohlížeči
• Ale vývojář primárně nepíše HTML/JS kód, primárně programuje v Javě
• Z tohoto Java kódu až framework vygeneruje cílový HTML/CSS
![Page 31: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/31.jpg)
Server side – proč takhle?
• Motivace byla taková, že stačí mít pouze Java programátory
• Nebude nutné mít zvlášť know how HTML/CSS/JS (to vygeneruje framework)
![Page 32: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/32.jpg)
Trendy ve vlnách
Klient Side Server Side
;
2010
2015
2005
Wicket
Angular
![Page 33: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/33.jpg)
A aby to nebylo tak jednoduché
![Page 34: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/34.jpg)
Podpora v různých prohlížečích
• Internet Explorer 6-11, Chrome, Firefox, Safari, …
![Page 35: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/35.jpg)
Web na mobilu
• Dnes je i jisté automatické očekávání, že web bude rozumně dostupný i z mobilu
• „Responzivní design“
• Něco řeší frameworky (Bootstrap, …) ale NENÍ TO ZADARMO!
![Page 36: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/36.jpg)
Pozor na použití session
• Některé Frameworky (hlavně server side) zakládají automaticky session
• Pokud se to stane na HomePage a jde o navštěvovanou stránku, obrovsky naroste aloakce paměti
• Přitom úplně zbytečně, na HomePage nikdo session nepotřebuje.
• Těch, co poračují v aplikaci dále (s použitím session) je jen zlomek těch, co přijdou na HomePage
![Page 37: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/37.jpg)
Když zákazník říká „nechci tam captcha“
• Roboti si vás najdou ;-)
• Několik tisíc robotických registrací rozeslalo několik tisíc SMS na existující telefonní čísla
![Page 38: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/38.jpg)
Za chyby se platí. Doslova!!!!
• Důležitost konfirm dialogů
• Třeba převodní příkaz, co když si uživatel splete políčko pro částku s políčkem pro variabilní symbol?
![Page 39: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/39.jpg)
Nespoléhejte jako vývojáři FrontEnd, že „ti na BackEnd vše ošéfují“
• Například, že každá backend metoda v rozumném čase vrátí výsledky
• Příklad – nedávná kauza s registrem vozidel
• Backendy měly někdy pomalé odezvy. Ale na FE NEBYL timeout = zamrzla celá aplikace a nebylo možné nijak pokračovat
![Page 40: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/40.jpg)
Neřešit bezpečnost je nebezpečné!
• TOP 10 OWASP
• Například SQL injection
– Co když někdo do vyhledávacího formuláře napíše „OR 1=1“
– Výsledek:
• SELECT FROM Objednavky WHERE userId=123 OR 1=1
• Moderní frameworky toto řeší za vás (ale musíte je umět)
![Page 41: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/41.jpg)
Týká se nás clustering?
• Clustering je nutný z důvodů
– Výkonostních a/nebo
– High availibility
• Vývojář FE většinou nemusí řešit.
• Ale pozor – co když si například něco uložíte na filesystem?
![Page 42: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/42.jpg)
Týká se nás clustering?
Soubor.txt Soubor.txt
![Page 43: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/43.jpg)
Webové programování
je CHALENGE!
![Page 44: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/44.jpg)
• Není mezi vámi zájemce?
• Řekněte komukoli, koho by mohlo zajímat
![Page 45: Webové programování je CHALENGE! Sramko - Webove programovani … · dodržením design patternů •Musejí respektovat zásady bezpečného programování (TOP 10 OWASP) •Musí](https://reader036.vdocuments.pub/reader036/viewer/2022062919/5edfc5dbad6a402d666b15ad/html5/thumbnails/45.jpg)
Otázky
a
Odpovědi