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. člen skupiny Cleverlance Group
Praha Hradec Králové
Brno České Budějovice
Bratislava
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
Web Server • Java • Spring • Hibernate
Cloudová Služba (Google)
SQL Webový prohlížeč • HTML / CSS • JavaScript • Angular
Backend systém • DMS • CRM • Billing • Apod. Databáze
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é!!!
Různé skilly webového vývoje
Java
Angular
Kreativní design / UX
Photoshop
HTML / CSS / JS
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
Tohle všechno je třeba umět!
Java
Angular
Kreativní design / UX
Photoshop
HTML / CSS / JS
Angular + HTML / CSS
Ukázka Angular • Aneb ať chvilku mluví taky ten, kdo tomu opravdu rozumí ;-)
Náročnost vývoje
S rozsahem webové aplikace rychle roste náročnost jejího vývoje
Rozsah a funkčnost webové aplikace
• 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
2005 ; Wicket
2010
Angular 2015
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
