Webové programování je CHALENGE!
Milan Čapoun, Samuel Šramko
Představení
• Milan Čapoun
– Šéf vývoje webových aplikací v Cleverlance a.s.
• Samuel Šramko
– Senior vývojář webových aplikací v Cleverlance
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
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
Co jsou webové aplikace? Aneb kdo nikdy nezkusil?
Vývoj webové aplikace je…
1.HTML 2.CSS 3.JavaScript
Webové aplikace v enterprise sféře
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.
Webové aplikace JDE psát jednoduše a rychle!
Proč to tedy dělat složitě?
Protože…
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!
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…)
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é!!!
Kreativní design / UX
Photoshop
HTML / CSS / JS
Angular
Java
Různé skilly webového vývoje
Kreativní design / UX
Photoshop
Photoshop – řezání grafiky
HTML / CSS / JavaScript
+ +
=
Angular nebo jiný FrontEnd Framework
Tohle už je skutečné
programování
Java nebo jiný middle/backend jazyk
Java nebo jiný middle/backend jazyk
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
Kreativní design / UX
Photoshop
HTML / CSS / JS
Angular
Java
Tohle všechno je třeba umět!
Angular +
HTML / CSS
Ukázka Angular
• Aneb ať chvilku mluví taky ten, kdo tomu opravdu rozumí ;-)
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
• Není mezi vámi zájemce?
• Řekněte komukoli, koho by mohlo zajímat
FrontEnd – Client side vs. Server side
• Dosud jsme mluvili hlavně o JavaScript/Angular = Client side
Další frameworky: • Ember.js • Backbone • Meteor • …
FrontEnd – Client side vs. Server side
• Jiné přístupy jsou orientované více Server side
frameworky: • JSF • Wicket • Vaadin • Řada dalších
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
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)
Trendy ve vlnách
Klient Side Server Side
;
2010
2015
2005
Wicket
Angular
A aby to nebylo tak jednoduché
Podpora v různých prohlížečích
• Internet Explorer 6-11, Chrome, Firefox, Safari, …
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!
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
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
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?
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
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)
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?
Týká se nás clustering?
Soubor.txt Soubor.txt
Webové programování
je CHALENGE!
• Není mezi vámi zájemce?
• Řekněte komukoli, koho by mohlo zajímat
Otázky
a
Odpovědi