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