moderni webapp - frontend

27
Moderní webové aplikace 1.část: FRONTEND Tomas Hodbod

Upload: tomas-hodbod

Post on 03-Jul-2015

452 views

Category:

Education


2 download

DESCRIPTION

http://www.ffdigital.cz

TRANSCRIPT

Page 1: moderni webapp - frontend

Moderní webové

aplikace1.část: FRONTEND

Tomas Hodbod

Page 2: moderni webapp - frontend

KLASICKÝ MODEL WEBOVÉ

APLIKACE

business logika

data

(get, validate, create, …)

šablony

vrací velký objem dat

SERVER CLIENT

odešle dotaz

vypíše odpověď

× velký počet klientů × 1

Page 3: moderni webapp - frontend

CO JE ŠPATNĚ?

server pracuje víc než musí

obrovský traffic

vysoké výdaje za provoz

nevhodné pro masivní aplikace

Page 4: moderni webapp - frontend

CLOUD VŠUDE KOLEM NÁS

moderní webové aplikace

Page 5: moderni webapp - frontend

MODERNÍ MODEL WEBOVÉ

APLIKACE

správa DB (validace)

vrací jen data (JSON,

XML)

SERVER CLIENT

odešle dotaz

načte šablony

načte data

zprocesuje business logiku

validuje data

vykreslí elementy

Page 6: moderni webapp - frontend

V ČEM JE TO DOBRÉ?

server zpracovává jen nezbytné (DB)

minimalní traffic

zátěž přebírá počítač klienta

minimalizace nákladů na provoz

Page 7: moderni webapp - frontend

jQuery

Page 8: moderni webapp - frontend

CO TO JE?

javascriptový framework stejně jako:

Prototype

YUI

Dojo

mooTools

odladěný a optimalizovaný

crossbrowser

Page 9: moderni webapp - frontend

VZESTUP JQUERY

Page 10: moderni webapp - frontend

FILOZOFIE

Najdi element

a něco s ním udělej.

Page 11: moderni webapp - frontend

SELEKTORY

Page 12: moderni webapp - frontend

SETTER/GETTER

jedna funkce, mnoho způsobů použití

Page 13: moderni webapp - frontend

EVENTY

Page 14: moderni webapp - frontend

CHAINING

Page 15: moderni webapp - frontend

AJAX

Page 16: moderni webapp - frontend

CO JEŠTĚ?

animace

pluginy

sablony

jQuery UI

jQuery Mobile

Page 17: moderni webapp - frontend

BACKBONE.js

Page 18: moderni webapp - frontend

CO JE BACKBONE.JS?

jednoduchý MVC framework pro masivní JS

APP

malý < 7kb

důraz na OO (také sémantika)

vlastní eventy

REST JSON

trasování url

spolupracuje s Underscore.js a jQuery

SproutCore, Cappuccino

Page 19: moderni webapp - frontend

CO NENÍ BACKBONE.JS?

DOM (jQuery, Zepto)

animace

balík „vše v jednom“

Page 20: moderni webapp - frontend

MODEL

Page 21: moderni webapp - frontend

MODEL

Page 22: moderni webapp - frontend

MODEL

Page 23: moderni webapp - frontend

COLLECTION

Page 24: moderni webapp - frontend

VIEWS

Page 25: moderni webapp - frontend

CONTROLERS

Page 26: moderni webapp - frontend

PŘÍŠTĚ

server side – App Engine

funkční aplikace

Page 27: moderni webapp - frontend

Díky

Tomas Hodbod

@yomash

http://www.ffdigital.cz

http://i-w-s.eu