Webové programování je CHALENGE! Milan Čapoun, Samuel Šramko

Transkript

1 Webové programování je CHALENGE! Milan Čapoun, Samuel Šramko

2 Představení Milan Čapoun Šéf vývoje webových aplikací v Cleverlance a.s. Samuel Šramko Senior vývojář webových aplikací v Cleverlance

3 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

4 Cleverlance Enterprise Solutions, a.s. člen skupiny Cleverlance Group Praha Hradec Králové České Budějovice Brno Jeden z největších poskytovatelů IT služeb Ryze česká společnost Bratislava

5 Co jsou webové aplikace? Aneb kdo nikdy nezkusil?

6 Vývoj webové aplikace je 1.HTML 2.CSS 3.JavaScript

7 Webové aplikace v enterprise sféře

8 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

9 Webové aplikace JDE psát jednoduše a rychle! Proč to tedy dělat složitě?

10 Protože

11 Enterprise aplikace mají požadavky Na výkon co když o Vánocích klikne 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!

12 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 )

13 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é!!!

14 Různé skilly webového vývoje Java Kreativní design / UX Angular Photoshop HTML / CSS / JS

15 Kreativní design / UX

16 Photoshop

17 Photoshop řezání grafiky

18 HTML / CSS / JavaScript + = +

19 Angular nebo jiný FrontEnd Framework Tohle už je skutečné programování

20 Java nebo jiný middle/backend jazyk

21 Java nebo jiný middle/backend jazyk

22 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

23 Tohle všechno je třeba umět! Java Kreativní design / UX Angular Photoshop HTML / CSS / JS

24 Angular + HTML / CSS

25 Ukázka Angular Aneb ať chvilku mluví taky ten, kdo tomu opravdu rozumí ;-)

26 Náročnost vývoje S rozsahem webové aplikace rychle roste náročnost jejího vývoje Rozsah a funkčnost webové aplikace

27 Není mezi vámi zájemce? Řekněte komukoli, koho by mohlo zajímat

28 FrontEnd Client side vs. Server side Dosud jsme mluvili hlavně o JavaScript/Angular = Client side Další frameworky: Ember.js Backbone Meteor

29 FrontEnd Client side vs. Server side Jiné přístupy jsou orientované více Server side frameworky: JSF Wicket Vaadin Řada dalších

30 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

31 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)

32 Trendy ve vlnách Server Side Klient Side 2005 ; Wicket Angular

33 A aby to nebylo tak jednoduché

34 Podpora v různých prohlížečích Internet Explorer 6-11, Chrome, Firefox, Safari,

35 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!

36 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

37 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

38 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?

39 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

40 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)

41 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?

42 Týká se nás clustering? Soubor.txt Soubor.txt

43 Webové programování je CHALENGE!

44 Není mezi vámi zájemce? Řekněte komukoli, koho by mohlo zajímat

45 Otázky a Odpovědi