ФАКУЛТЕТ ТЕХНИЧКИХ НАУКА У ЧАЧКУ

УНИВЕРЗИТЕТА У КРАГУЈЕВЦУ

ЗАВРШНИ РАД Тема:

RAD, FRAMEWORK и UI/UX решења за

развој Web апликација

Руководилац рада: Студент: Стефан Мршевић

проф. др Ненад Стефановић Индекс бр.: 102/2011

Чачак, 2014.

Садржај

1. Увод .................................................................................................................................. 4

1.1 Шира тематика рада- примена, функционалности, позадина, сврха и значај рада . 5

1.1.1 Дефиниција, историја, примена и функционалности ......................................... 5

1.1.2 Позадина и значај истраживања .......................................................................... 8

1.2 КОРИШЋЕНЕ ТЕХНОЛОГИЈЕ И МЕТОДОЛОГИЈА РАДА ............................... 10

1.2.1 Предуслови за програмирање web апликација ................................................. 11

1.2.2 Основна структура Web апликације ................................................................ 12

1.3 Потреба и мотивација- Од Web Сајтова до Web апликација. Данашњи трендови у Web

developmentu. Опсег рада. .............................................................................................. 13

1.3.1 Циљеви, критеријуми, питања .......................................................................... 14

1.4 Опис рада по тачкама ............................................................................................... 14

2. Савремени трендови у развоју wеб апликација ............................................................ 15

2.1 Трендови у развоју web апликација ......................................................................... 15

2.2 Аутентификација у web апликацијама .................................................................... 21

2.2.1 Мандаторне сигурносне технике ...................................................................... 22

2.3 Препоруке на које треба обратити пажњу при изради web апликација ................. 23

3. WEB Frameworks(WEB РАДНИ оквири ....................................................................... 27

3.1 УВОД ........................................................................................................................ 27

3.1.1 Предности коришћења радних оквира .............................................................. 28

3.1.2 Недостаци коришћења радних оквира .............................................................. 29

3.2 WEB РАДНИ ОКВИРИ ............................................................................................ 30

3.2.1 ВРСТЕ WEB РАДНИХ ОКВИРА ..................................................................... 30

3.2.2 "Гурни" наспрам "Повуци" базиране архитектуре ........................................... 31

3.2.3 Трослојна организација ..................................................................................... 32

3.2.4 ПОЗНАТИЈИ РАДНИ ОКВИРИ WEB АПЛИКАЦИЈА .................................. 32

4. UI/UX .............................................................................................................................. 35

5. RAD АЛАТИ ЗА ГЕНЕРИСАЊЕ WEB АПЛИКАЦИЈА ............................................. 35

6. ПРИМЕРИ ...................................................................................................................... 35

7. ЗАКЉУЧАК ................................................................................................................... 35

8. ЛИТЕРАТУРА................................................................................................................ 35

1. УВОД

Интернет заузима све битнију улогу у животу модерног човека. Данас смо са свих

страна окружени Wеb-ом, како на посредан тако и на непосредан начин. Муњевит развој

интернета и информационих технологија довео је до њиховог уласка у готово сваку сферу

људског живота, а сходно томе и промену стила живота и појачаног темпа којим се он одвија.

Због тога су потребни и нови начини промоције компанија и одређених сегмената друштва као

и пружање услуга новим генерацијама на њима пријемчив начин. Такође, потребни су што

ефикаснији, простији и јефтинији начини комуникације са заинтересованим странама.

Једна од тековина које на најбољи начин демонстрирају нови модерни свет у успону,

јесу Wеb апликације. Данас је њихова главна сврха да на једноставан начин крајњем

кориснику пруже јасну, ефикасну, визуелно прегледну и интуитивну услугу на модеран и

једноставан начин.

Wеб развој добија на значају сваког дана и као последица тога, данас су креирани

многобројни нови алати који помажу девелоперима да дизајнирају и праве апликације на

далеко бржи, лакши и ефикаснији начин него раније. Саме wеб апликације и презентације су

далеко боље структуиране и читљивије како за самог девелопера тако и за развојне тимове,

где често постоји потреба за разменом и прослеђивањем самих пројеката.

Поред разноликих интегрисаних развојних окружења (IDE) и разноврсних Wеb

технологија који су доступни девелоперима и развојним тимовима, данас посебан значај

добијају Wеb радни оквири (frameworks), RAD алати и UI/UX контроле. Своју популарност

су на заслужен начин добиле из простог разлога зато што заједно вишеструко скраћују Web

развој, обогаћују корисничко искуство у раду са системом(User Experience) са UI (User

interface) контролама, пружају широк опсег метода, класа и интерфејса на располагању

девелоперима(Frameworks), а одређени моћни софтверски RAD(Rapid Application

Development) пакети цео процес развоја аутоматизују тако што корисницима нуде да се више

посвете презентацији и делу логике својих производа него сувопарном, понављајућем писању

кода.

Све ово омогућава програмерима да на једноставан начин креирају и одржавају Wеb

системе од простијих до сложенијих.

Сврха овог рада, а и самих алата по мишљењу аутора, јесте подизање свести о значају

брзог развоја кориснички интуитивних, ефикасних и моћних wеb апликација које су у стању

да на пријемчив, брз, ефикасан и безбедан начин кориснику обезбеде искуство у коришћењу

истих.

У овом раду показаћемо преглед најпопуларнијих бесплатних и комерцијалних решења

која штеде људско време и вишеструко убрзавају израду wеb апликација и страница. То није

њихова једина намена. Ова решења проширују постојеће функционалности wеb апликација, а

одређене контроле обогаћују корисничко искуство и чине га знатно богатијим него када би то

било рађено ручно. Све то наравно има цену. У овом раду, биће приказана компаративна

анализа разноразних аспеката и карактеристика ових алата и технологија са посебним освртом

на цену/добит, прилагодљивост самих система и криви учења од стране корисника. У оквиру

овог рада бацићемо поглед на њихове најбитније карактеристике, историју развоја, заједно са

појединим примерима који ће на прегледан начин демонстрирати употребну вредност ових

технологија.

1.1 Шира тематика рада- примена, функционалности, позадина, сврха и значај рада

1.1.1 Дефиниција, историја, примена и функционалности

Првобитно, World Wide Web је замишљен као начин за дељење докумената повезаних у

унутрашњу строго контролисану мрежу која није имала приступ спољашњем свету(BernersLee

& Cailliau, 1990). Ови повезани документи су формирали у основи статичне сајтове и

директоријуме и поседовали су врло малу дозу интерактивности . Корисници су могли мењати

фајлове, али уистину било је веома мало динамичких сајтова и они су се тешко одржавали и

правили. Први такви динамички сајтови су пружали основне могућности попут могућности

претраге као и додатне функционалности уз помоћ сервиса који су рецимо показивали

информације о времену уз тренутно освежавање (једна од првих Web апликација коју је

креирао Тим Бернерс Ли у CERN-у је дизајнирана да тражи бројеве у телефонском именику

користећи web претраживач).

Међутим аутор странице увек је морао ручно да мења web странице што је изискивало доста

времена како самом власнику и администратуру одређеног домена тако и корисницима који

су тражили информације.

Слика бр. 1- Компаративни приказ коришћења и популарности различитих технологија током времена(извор Google Trends)

Како је web растао форме су уведене као један од начина да корисници на њима

прихватљивији начин комуницирају са сервером и добијају одговоре од њега. Ускоро после

тога почеле су се појављивати прве Web апликације заједно са зачетком сервер и клијент

скриптинг језика који су омогућили појаву динамичких HTML докумената. Предности

динамичког Web-a су резултовале појављивањем стално променљивих сервиса за

информације који су из корена продрмали до тада помало статичан свет WWW-a. Ови нови

сервиси су се кретали од простих CGI 1скрипти па све до пакета који су пружали могућност

web апликацијама да се повежу са релационим базама података остављајући неслућене

могућности за девелопере. Више није било довољно направити обичну колекцију повезаних

web страна; сада је било потребно дизајнирати функционалну, динамичну web апликацију.

Срећом, данас постоји велики број језика доступним програмерима за креирање

динамичких веб страна. Они имају своје библиотеке чији је задатак да помогну рад са

понављајућим, рутинским задацима. При томе се подразумева да библиотеке могу садржати

конфигурацијске податке, документацију, помоћне податке, шаблоне за поруке, раније

написани код у виду мањих програма, потпрограма, класе или спецификације типова.

Међутим, веб апликације често захтевају специфичне библиотеке које су нарочито корисне за

примену у веб апликацијама, као што је креирање HTML (нпр. Java Server Faces). Током

времена, развијени су web радни оквири са комплетним функционалностима, који су често

сакупљали на једном месту мноштво библиотека корисних за развој веб апликација, а у виду

добро интегрисане и заокружене целине, коју су као такву, без много даљих модификација,

веб програмери могли да користе за даљи развој.

Шта је то web апликација? То је клијент-сервер апликација која користи web browser као

клијент програм. Она представља својеврсну врсту прозора корисника која му омогућава не

само да лако завири у невероватан, безграничан свет Интернета, већ и да га мења и добија

релевантне информације. Web апликација пружа кориснику неограничен дијапазон

интерактивних сервиса који су путем web сервера дистрибуирани преко интернета/интранета.

Класичан web сајт кориснику приказује садржај из статичних .htm и .html фајлова. Web

апликација са друге стране може кориснику презентовати динамично скројен садржај базиран

на захтеваним параметрима које је корисник дефинисао, она може пратити навике корисника

и сходно томе презентовати му одређене препоруке. Овако генерисан садржај се може

1 CGI (Common Gateway Interface) стандард представља зачетак динамичких web страница. На самом почетку

WWW-a овај стандард је међу првима омогућио повезивање веб сервера са екстерним апликацијама. Највећи

недостатак је био интензивно оптерећење веб сервера, пре свега због бројних захтева за веб страницама које

су покретале нове процесе.

стварати како на клијентској тако и на серверској страни. Још једна важна карактеристика која

иде уз web апликације јесте да оне имају знатно већи обзир према сигурности.

Web апликације стоје иза свих моћних портала за информације, retail сајтова великих

извозника и корпоративних интранета. Они не само да пружају информације и међусобно

реагују са посетиоцима сајта, већ и сакупљају и обнављају исте, одржавају податке о приступу

и подржавају online трансакције.

Један од свакодневних примера Web апликације био би on-line shopping сајт. Нпр.

посетиоци сајта могу да прегледају online каталог разноразних појединачних ставки, гледају

сваку појединачну ставку које желе да купе, додају их у „корпу за куповину“ и коначно заврше

куповину користећи сигуран интерфејс који енкриптује њихове личне информације. Да би

омогућили ову функционалност, web апликације комуницирају са „складиштима база

података“ (warehouses) које служе као подршка при одлучивању (decision support) и

анализи(нпр. у пословном контексту колико дуго је продавац корисник разговарао са

продавцем, како је оценио степен задовољства производом. Ови подаци се обично чувају у

неком другом систему). Корисници такође могу да претражују ставке по тачно одређеним

критеријума а потом да добију информације о ставкама. Апликација пружа начин

корисницима да изаберу ставке које би биле додане у њихове корпе за куповину током њихове

сесије и да унесу/измене/избришу информацију из базе. Оне комуницирају-међусобно реагују

са другим web апликацијама да би потврдили валидност унете кредитне картице и датих

личних информација. Уобичајен начин функционисања ове врсте апликација јесте такав да

оне извршавају наредбе тако што другим деловима-компонентама web апликације говоре да

испоруче тачно наручену робу за коју корисник има могућност дефинисања у коментарима.

Неопходан безбедносни предуслов који се дешава пре ове радње јесте тај да пре обављања

трансакцијe web сервер корисницима шаље потврдни mail. Након што корисник потврди

куповину код великих online shopping система он добија код, којим може да прати пут

пошиљке, опет преко одређене уграђене функционалности у web апликацији.

Данас, web технологије су омогућили нов стандард у свету где web апликације имају

могућности готово једнаке пунокрвним десктоп апликацијама. Виртуализација и cloud

computing такође доводе до брисања ове баријере. Иако по перформансама и у одређеним

специфичним функционалностима најчешће не могу да парирају десктоп апликацијама

њихова широка доступност допринела је да се developer-и управо из тог разлога све чешће

одлучују за креирање управо ове врсте апликација.

Уобичајен и најчешћи начин представљања web апликација јесте група динамички

креираних међусобно тесно повезаних web страна.

1.1.2 Позадина и значај истраживања

У фебруару 2014, web сервер анкета направљена од стране Netcraft-а, енглеске Internet

Services Company, примила је одговоре од 920,102,079 сајтова. По анкети постоји више од 900

милиона сајтова на са свим доменима што је повећање од скоро пола милона у односу на

период из октобра 2011 (October 2011 Web Server Survey, 2011, Netcraft).

Све горе изречено нам говори да људи готово све своје послове могу урадити уз помоћ

интернета са огромним бројем сервиса којих је из дан у дан све више и више.

Шта нам ово показује? Web технологије се развијају невероватно брзо. То пружа бројне

могућности од којих је једна од значајнијих подизање животног стандарда човечанства.

Појава и развој рачунара и развој информационих технологија сигурно у великој мери

помажу развој у свим областима човековог деловања. Огроман број ствари које смо могли да

пре педесет година видимо само у Звезданим стазама су данас део наше свакодневнице.

Интернет је после точка једна од најиновативнијих и најкориснијих ствари створена од стране

људског рода. У самом зачетку интернета рачунари су коришћени за обраду података и

сложена израчунавања. Падом њихове цене постајали су доступни за средњу класу

становништва који су их користили за пословне потребе. Данас постоји мноштво уређаја за

крстарење интернетом и они су данас неопходни за живот и проналажење информација. Данас

не постоје изолована знања, она су доступна свима управо захваљујући интернету.

Огроман утицај Интернет је имао у области развоја електронског пословања које данас

представља срж свих пословних информационих система. Информације, њихова доступност

и брзина размене представљају основ успешног пословања савремених предузећа, а Интернет

у том контексту представља савршено средство за проналажење и дистрибуцију информација.

Сложене, дистрибуиране Wеb апликације постале су неопходне за опстанак и развој

савремених предузећа у условима глобалног, међународног тржишта. Како је дошло до појаве

web апликација? Једноставно речено због еволуције. Различити начини презентовања

информација и различите методе комуникације доносе велике изазове у области

програмирања web апликација пошто статички сајтови никако нису у стању да се носе са њима.

Не само да је потребно обезбедити информације, већ је начин презентовања потребно

прилагодити различитим уређајима(стандардним рачунарима, мобилним уређајима) као и

интегрисати са различитим системима(социјалним мрежама, системима за плаћање).

Пошто је Web коначно попримио своју препознатљиву форму он више не представља

скуп статичких web хипертекст страница које кориснику не пружају никакву дозу интеракције.

Током задњих година, web апликације су сазреле до тачке да милиони корисника не могу да

замисле свој живот без њих, како у пословном (Microsoft Dynamics) тако и у социјалном

животу(Facebook). Подршка новим технологијама је значајно порасла од великих гиганата са

њиховим производима попут Google web kit-а као и разних web радних оквира, RAD алата и

CMS система.

Имајући у виду све претходно изречено, креирање web апликација је задатак од

виталног значаја за сваку компанију. Зарад компетитивности и отворености на светском

тражишту и боље интерне комуникације у самој фирми неопходно је да фирма поседује

динамичку веб презентацију са специјалним одељком за своје запослене и партнере. Тиме

фирма себи обезбеђује ефикасност у пословању и далеко бољу будућност.

Све web апликације имају барем неке заједничке карактеристике. Већина њих имају

форме за кориснике којима су на располагању регистрација, приступ и интеракција са

апликацијом. Интеракције су уобичајено одрађене кроз preset и сигурне форме конектоване за

разним базама. Базе се затим користе да процесуирају податке и врате их кориснику. Неке веб

апликације дозвољавају кориснику да врши преглед и интеракцију са сајтом и без регистрације

преко 3rd party сервиса и уграђених библиотека(нпр. Disqus). Међутим, углавном се захтева

регистрација, а корисницима иста олакшава преко коришћења популарних web сервиса попут

facebook и google аутентификације.

Груписање понављајућих задатака који се провлаче кроз израду веб апликација у неку

врсту апстракције и њихов пренос даље у друге апликације би знатно убрзао процес

имплементације како великих пословних система тако и свакодневних web апликација. С тим

на уму, у овом раду су приказане разне технике попут RAD алата, библиотека и web радних

оквира које горепоменути посао олакшавају у знатној мери. Користећи ове технике просечан

developer има доста одличних избора пре почетка рада на својој web апликацији. Поред свих

ових техника, web радни оквири се издвајају и показују као једни од најкоришћенијих,

најпопуларнијих и најпотпунијих решења у подршци раду са web апликацијама. Основни

разлог у развоју и масовном коришћењу ових техника лежи у томе што је online тржиште

током времена захтевало од програмера да направе све боље web апликације са далеко мање

времена. Web радни оквири и RAD алати су креирани са овом наменом. Након што су

компаније почеле да их примењују и успевају у чувању времена, а успут одржале

имплементацију нових могућности у web апликацијама, web радни оквири су показали своју

могућност да се прилагоде захтевима тржишта.

Имајући у виду претходно изречене информације основна истраживачка питања која се

протежу кроз овај рад су:

Који су основни разлози за developer-e да изаберу да раде са web радним

оквирима?

У којим све случајевима и када developer-и треба да примене web радне оквире?

Са каквим изазовима се developer-и срећу приликом испоруке самих апликација

на одговарајућу платформу?

Како веб сервери и прегледачи реагују приликом коришћења RAD алата, web

радних оквира и библиотека?

Питање перформанси приликом коришћења web радних оквира.

Питање проблематике имплементације web радних оквира и њиховог даљег

коришћења током животног века веб апликације

1.2 КОРИШЋЕНЕ ТЕХНОЛОГИЈЕ И МЕТОДОЛОГИЈА РАДА

Овај рад је претежно заснован на client side JavaScript web радним оквирима, попут

KnockoutJS и Angular JS-a, web радног оквира који је одржаван од стране Google тима у

задњих неколико година.

У раду ће приказане могућности својствене и јединствене client side JS web радним

оквирима и како највише извући из његових могућности и перформанси. Метода акционог

истраживања је коришћена да одговори и разреши питања у овом раду. Коришћен је

индуктиван приступ.

Постоје бројни разлози за овакав приступ. Пракса показује да људи који до знања

долазе коришћењем форума или блогова углавном зависе од тога какве су информације нашли,

колико је пажње посвећено одређеним темама, па неретко прескоче фундаменталне концепте,

само зато што их је пут тражења одговора и решења одвео на сасвим другу страну. Услед

оваквог несистематичног и помало хаотичног приступа, често се дешава да чак и искусни

програмери буду изненађени неким новим „триком“(иако је он често основни начин употребе)

који би им знатно олакшао посао. Користећи индуктиван приступ и полазећи од појединачних

чињеница и не прескачући бројне кораке долазимо до одрживих решења и закључака који

немају сврху само да продубе знање истраживача већ и да буду друштвено корисни што је

сегмент који се у радовима у нашој земљи често занемарује.

Примери изворног кода прототип апликација је екстрахован из JetBrains WebStorm

IDE-а као и Visual Studio 2013(Update 2+ Web essentials) уколико није другачије назначено.

Током истраживања дошло се до очекиваног закључка. Он потврђује позитивне ефекте које

JS web радни оквири имају у развоју web апликација нарочито по питању перформанси и

растерећења bandwidth-a и података које сервер мора да порцесуриа. Изворни код који је дат

у примерима и функционалности приказане на скриншотовима демонстрира овај закључак.

Међутим, треба приметити да иако је број заједница и компанија које користе web радне

оквире и RAD алате порастао значајно они и даље имају одређене нефункционалности које ће

бити приказане и обрађене у овоме раду. Стога, даља проучавање ове теме од стране читаоца

се препоручује с обзиром на брзину и иновације које никако не могу бити обухваћене у једном

раду. Предности коришћења web радних оквира вишеструко компензују њихове одређене

мане, сами web радни оквири и RAD алати су близу сазревања, а у већини компанија су

стандард са којим се свакодневно ради. Велики системи као и појединачни developer-и су

схватили да њихове врлине далеко превазилазе њихове мане и иницијалне потешкоће током

њихове употребе.

1.2.1 Предуслови за програмирање web апликација

Услед велике сложености онога што интернет нуди, разноразних типова информација

и сложених форми помоћу којих су они презентовани неопходно је програмерима 2 пружити

што јединственији начин на који би се развијале Web апликације. Да би то испунио програмер

мора да добро упозна основне градивне елементе Web-a као што су HTTP протокол, HTML и

CSS, а затим и друге елементе као што су клијентски и серверски скриптинг, остале пратеће

технологије као и основне концепте база података. Уколико желите да примат дате само

развоју корисничког интерфејса и подизању корисничког искуства (front end development)рад

са базама података и технологијама на серверској страни ће Вам постати мање важан, па своје

време треба да посветите усавршавању у одређеним технологијама као што су JavaScript,

AJAX, jQuery, web радни оквири, RAD алати, библиотеке ... У свим случајевима неопходно је

разумети основне градивне појмове попут HTTP-a и HTTPS-a.

За разумевање рада web апликација потребно је разумети начин

комуникације(протокол) између web прегледача и сервера који шаље те информације. HTTP

је основни web протокол који функционише по принципу захтев-одговор. Захтев креира

клијент, а одговор сервер(web апликација којој је упућен захтев). Корисници траже одређене

податке помоћу својих претраживача тако што произвољно кликну на линк или унесу URL.

URL садржи назив домена(нпр. http://www.google.com) или у ређим случајевима IP

адресу(нпр. http://74.125.139.116) на основу којих се идентификује сервер којем ће бити

прослеђен захтев.

На серверу се налази апликација која обрађује захтеве и враћа одговоре- неки од чешће

коришћених HTTP сервера су Apache, IIS, NginX. Када од корисника/прегледача стигне захтев

за прегледање одређене web стране(енгл. HTTP Request message) сервер ће тај захтев

процесуирати, извршити серверске скриптове и web прегледачу послати измењени одговор

(енгл. HTTP response message који се састоји од линије заглавља и заглавља захтева)у облику

2 Програмер или developer- језичка недоумица. У овом раду биће коришћена оба термина иако је, барем по

мишљењу аутора термин developer шири од појма програмера. Међутим, у нашем језику немамо адекватну

замену за исти(развијач софтвера звучи рогобатно).

који он може да протумачи(HTML, CSS + JavaScript). Управо тај резултат ће бити приказан у

web прегледачу корисника. За разлику од кода који се извршава на серверској страни и који

остаје недоступан за преглед и анализу3(у претраживачу се може видети само крајњи резултат

извршавања серверског кода), клијентском коду се може приступити из самог претраживача(

нпр. debugging JavaScript-a помоћу додатка FireBug у прегледачу Mozilla Firefox).

Серверски одговор често садржи више од једног фајла, јер HTML код, који описује

структуру информација стране коју треба приказати, често садржи референце на слике, CSS

фајлови и Javascript фајлове које прегледач учитава у посебним HTTP захтевима. HTML, CSS

и JavaScript, слике и остали мултимедијални садржаји представљају коначан садржај који ће

бити приказан кориснику.

Слика бр. 1- Комуникација прегледача и сервера помоћу HTTP протокола

1.2.2 Основна структура Web апликације

У модерним web апликацијама постоји јасна подела између три основна презентациона

чиниоца- структуре података, приказа и функционалности.

Сервер враћа одговор који поред самих података које је потребно приказати кориснику,

садржи и упутства за њихов приказ. Језик којим се описују подаци се назива HTML(у неким

случајевима HTML може да послужи и као језик за прављење независних апликација те у том

3 Овај код је могуће на одређени начин анализирати уз помоћ специјализованих алата попут RedGate .NET

Reflector-a. Ови алати нису бесплатни али могу пружити увид напредним корисницима у недокументоване API

функције и библиотеке и самим тим побољшати њихово разумевање кода што ће резултовати бољим

производима. И почетницима могу бити корисни у смислу разумевања тајни програмерских техника на

серверској страни што иначе није могуће.

случају није потребно да се преузима са сервера) док се начини на које треба приказати и

стилизовати податке дефинишу употребом CSS правила. У случају да прегледач треба да

омогући кориснику да изврши неке акције или да имплементира функционалности на

серверској страни одговор ће садржати и JavaScript.

Слика бр.3- основна структура web апликације

1.3 Потреба и мотивација- Од Web Сајтова до Web апликација. Данашњи трендови у

Web developmentu. Опсег рада.

Корени WWW-а сежу више од две деценије у прошлост. Од тада много тога се десило.

WWW је постао незаобилазан фактор у модерном свету, поготову после појаве web 2.0 .

Константна еволуција WWW-а омогућила је да Web Development постане веома значајна и

незаменљива грана у нашем свету због значајне потребе свих компанија на свету које желе да

постану иоле озбиљан играч на тржишту.

Web програмирање постаје све важније и као последица, многи алати и технологије су

креирани да би помогли developer-има да дизајнирају и развијају web апликације брже и

лакше. Овакве технологије су настале из разлога што развој интернет апликација обухвата

велики број технологија које се стално мењају. Такве апликације су боље структуиране и

сигурније за употребу. Изван различитих IDE-а и технологија данашњи Web Frameworks-web

радни оквири добијају на значају превасходно због тога што нуде широк опсег прилагодљивих

метода, класа интегрисаних у једну смислену целину које програмерима омогућавају да са

знатно мање труда креирају и одржавају комплексне Web системе. Једна од тема овог рада јесу

неки од данас најпопуларнијих и иновативнијих Web радних оквира.

Сврха овог рада јесте да покаже један, досада слабо обрађиван део Web развоја

користећи RAD development алате укомбиноване са web радним оквирима и библиотекама.

Web Frameworks и RAD Development Tools су у последње време добиле на значају на светском

тржишту. У свету WWW-а (World Wide Web) постале су незаменљиве у web развоју.

Прототипови web апликација приказани у овоме раду су написани на неки од тренутно

најпопуларнијих JavaScript web радних оквира попут Google АngularJS и KnockoutJS. Ови

пројекти имају светлу будућност и искусили су значајне промене и унапређења током

развојног циклуса пре свега због одличног прихватања од заједнице. Зарад проучавања Web

Frameworks биће развијене и демонстрирани одређени прототипови web апликација које ће

ефективно показати да време и труд уложен у њих на крају бива вишеструко компензован

добитима.

1.3.1 Циљеви, критеријуми, питања

Овај рад је сачињен имајући у виду неке од основних циљеве које треба да произађу из њега:

● Упознати се са web радним оквирима. Научити, разумети и и користити на ефикасан и пре

свега безбедан начин једну грану развојних web радних оквира(Web Development Frameworks).

● Анализирати web радне оквире са становишта ефикасности сваког оквира користећи

различите критеријуме попут времена за учење, времена за развој, прилагодљивости

постојећим пројектима, једноставношћу и ефикасношћу.

● Коначан закључак о томе са којим је web радним оквиром најлакше и најпријатније радити.

Овај закључак се наравно изводи у складу са тим колику перспективу сам web радни оквир са

којим треба радити има у будућности,

●Упознавање RAD алата, њихових могућности, способности надоградње, флексибилности и

утицаја мењања кода на перформансе тако генерисане web апликације.

● Лиценцирање и цена комерцијалних RAD алата, бесплатни RAD алати, компарација и

предности које доносе RAD алати.

● Утврдити за коју циљну групу су RAD алати прикладни и каква је њихова економска

исплативост на дуже стазе.

● Упознавање основних принципа дизајна за веб апликације, као и начина на које се може

побољшати корисничко искуство и дизајн.

● Упознати корисничке контроле које је могуће искористи за унапређење корисничког

искуства.

1.4 Опис рада по тачкама

….

2. САВРЕМЕНИ ТРЕНДОВИ У РАЗВОЈУ WЕБ АПЛИКАЦИЈА

2.1 Трендови у развоју web апликација

Донедавно у свету веб технологија, developer-и су били неми сведоци немогућности

иновације услед подршке за „legacy“ web browser-e од којих је свакако најпознатији Microsoft-

ов чувени IE6. Иако разлог против коришћења нових технологија делује тривијално озбиљни

web developer-и и дизајн консултанти увек су се морали прилагођавати корисницима са старим

прегледачима, иначе би остали без својих технички непоткованих корисника као и корисника

који нису у могућности да надограде своје прегледаче.

Проблем некомпатибилности web прегледача и њихових припадајућих верзија је

онемогућавао developer-е да користе најновије web технологије. Иако су увек могли користити

неке од библиотека попут modernizr-a i HTML5Shiv да би детектовали и додали неку

функционалност то најчешће није било довољно и проблем је остајао.

Сама библиотека Modernizr иако невероватно популарна није додавала HTML5

могућности преко JS објеката већ само детектовала недостатак постојећих. Нпр.

if (Modernizr.canvas) {

// Хајде да нацртамо кругове!

} else {

// не постоји уграђена подршка прегледача за canvas елементе:(

}

Слика бр. 4- Преко UserString детекције могуће је кориснику legacy browser-a избацити следеће упозорење

Developer-и су морали креирати више варијанти сајтова зарад подршке за legacy кориснике.

Срећом, према задњим статистикама број корисника legacy browser-a се рапидно смањује те

је, рецимо број корисника интернет експлорера 6 пао испод 6%(треба напоменути да верзије

са побољшаним Trident engine-om попут IE8 и даље заузимају око 25% тржишта). Самим тим

developer-има се пружа пут иновација и подршке за најновије веб технологије. Ова транзиција

ће омогућити developer-има да граде брже апликацијe које се знатно конзистентније понашају

на свим платформама па чак и достижу брзину нативних4 апликација на паметним мобилним

уређајима. Developer-и, могу да развијају апликација без гледања уназад, имплементације

сложених безбедносних техника за кориснике рањивог IE6. Имајући у виду да тренутно web

апликације пролазе кроз масовне промене и сусрећу се са бројним изазовима, као и чињеницу

да HTML5 ове године четвртом кварталу коначно постаје стандард јасно је колико је ово

значајно. HTML 5.1 и 5.1 који су тренутно у фази израде такође потврђују пут иновације који

се наставља.

U 21-ом веку све се већа пажња поклања корисничком дизајну и искуству. Готово да не

постоји озбиљна фирма у свету која не упошљава многобројне стручњаке за побољшање

корисничког интерфејса као и повећање њихове продуктивности. Велики акценат се баца и на

инвентивност корисничког интерфејса према корисницима с посебном пажњом на избегавање

техничког језика и несувислих термина.

Пре појављивања iPhone-a корисници нису водили рачуна о дизајну користећи моћне

enterprise web апликације. Била је битна функција а не форма. Међутим појавом овог уређаја

долази до промене и појављује се нови скеуморфични дизајн, фокусиран на естетику са

површином богатом детаљима. Долазак Microsoft-овог Windows phone-a 7 и његовог тада

названог Metro корисничког интерфејса довео је до поновне револуције. Овај кориснички

интерфејс преферира чисте, интуитивне интерфејсе са посебном пажњом датом фонтовима и

тексту кога је све мање а чије су основне идеје истакнуте. Основна дизајнерска логика

приликом креирања овог интерфејса је била да корисници данас не читају већ скенирају текст.

Модерне корисничке контроле се све више и више базирају на овом интерфејсу па је чак и

Apple од Мајкрософта „позајмио“ овај интерфејс у iOS 7 и OS X Yossemite OS-у.

4 Нативна апликација је апликација која је развијена за коришћење на тачно одређеној платформи или уређају.

Коначан резултат је софтвер који је написан у коду који је специфично дизајниран да се извршава на одређеном

оперативном систему и самим тим оптимизован за окружење у коме се апликација извршава. Самим тим што су

апликације написане и дизајниране специфично за одређени систем даје им могућност да искористе специфичне

могућности хардвера и софтвера укључујући и специјално дизајниране апи функције. Самим тим корисник има

најбоље перформансе и корисничко искуство. Developer за сваку посебну платформу пише нову посебну апликацију. Поред нативних постоје и хибридне апликације(нпр. Chrome web апликације) које комбинују

најбоље из клијент и web апликација. Оне се не покрећу у прегледачу као веб апликације али као и веб апликације

написане су уз помоћ веб технологија. Оне користе webview контроле (UIWebView on iOS, WebView on Android

and others) као омотач који користи rendering engine присутан на уређају и представљају садржај преко целог

екрана. Важна разлика у односу на web апликације јесте та да web апликације имплементирају апстрактни слој

који developer-у пружа могућност коришћења специфичних функционалности уређаја попут GPS-a помоћу

рецимо JS API-ја. Ово омогућава web апликацијама приступ уграђеним могућностима уређаја који најчешће није

могућ због сигурносног слоја у прегледачу или API-ју самог уређаја.

Такође, велике интернет компаније све већи фокус бацају на GPU-у као предуго

запостављеној јединици приликом развоја rendering engine-a web прегледача. Готови сви

водећи прегледачи већ неколико година подржавају CSS3 3D трансформације и веома

ефикасно их употребљавају. Новина је и та што се могућности HTML 5 Canvas-а коначно

користе у пуној мери. Тако ове године очекујемо мноштво импресивних веб апликација, игара,

презентационих програма(нпр. impress.js) које максимално користе све експерименталне

функције WebGL-a. Један од дизајнера који на импресиван начин користе ову подршку јесте

Стивен Витенс а његови радови се налазе на:

http://acko.net/.

Да би у пуној мери искористили све могућности доступних технологија приликом израде

стандарда велика пажња се поклања имплементацији API-ја. Иако HTML5 још увек није

озваничен као стандард de facto он то одавно и јесте. Данас, најинтересантнији API-ји јесу

HTML5 JavaScript API-ји.

Неки од најзначајнијих API-ја у HTML 5 JavaScript спецификацији јесу:

•Web Storage- пружа далеко бољу алтернативу кукијима пошто подаци коначно могу бити

складиштени локално у корисничком прегледачу. Ово је значајно за мобилне апликације

пошто се приликом њихове израде уз помоћ HTML-a, CSS-a и JavaScript-а, подаци коначно

могу складиштити offline. .

•Web Workers дозвољавају симултано извршавање више комплексних JavaScript задатака

без утицаја на перформансе. Данас они представљају један фундаментални блок било у web

(далеко боља ефикасност) или мобилној апликацији пошто јој коначно омогућава да се понаша

као нативна апликација (нпр. апликација израђена у подразумеваном језику за неку платформу

-VB, C# за WindowsPhone 8 преводи се у природни машински CLR run-time и самим тим

обично даје најбоље перформансе и скалабилност. Долазак UniversalApps подршке у WP 8.1

платформи уз коришћење горе наведених функционалности уклања овај недостатак.)

•WebSockets је по перформансама боља алтернатива од AJAX-а. Користи се углавном за

комуникацију у реалном времену као и за смањење пинга код наменских сервера за поједине

видео игре.

•Апликациони кеш је још једна моћна могућност која омогућава веб апликацијама да се

понашају као нативне апликације њиховим простим кеширањем за offline употребу.

Ово су само неке од новина које омогућавају разноврсне могућности а које се касније

помињу у овом раду. Developer-и сада имају потенцијал да са веб апликацијама корисницима

дају способности и перформансе као у знатно моћнијим наменским апликацијама.

Већина веб прегледача је у стању да искористи ове могућности изузев њихових старијих

верзија као и популарног IE-a где се могу приказати нотификације за преузимање нових

прегледача.

Нуспродукт тренда раста JavaScript-a чији наставак видимо и данас као и у будућности

јесте прелазак са серверских технологија на клијент технологије. Постоје многе користи од

израде апликација са клијентским технологијама. Неке од њих су:

Developer-и не требају да уче нов језик и да се прилагођавају server-side раду.

Испорука ових апликација је могућа на било који сервер као скуп статичних страна.

Коришћењем претходно поменутих HTML5 JS API-ја могуће је одрадити све ствари

које server-side оквир могу, чак и више.

Наравно постоје одређени лимити са овим технологијама и server side језици сигурно неће

нестати, али можемо да видимо значајан тренд у развоју малих и средњих апликација које

функционишу искључиво на клијент страни. Постоји огромно интересовање код developer-а

да web апликације добију перформансе, ефикасност и могућности попут нативних апликација.

Све то захтева имплементацију горе наведених новина. Већина данашњих enterprise

апликација су server side. Server већ дужи низ година одрађује тежи део посла у обради

пословне логике. Самим тим сервер у зависности од перформанси и скалабилности у великој

мери смањује перформансе апликације. Уз помоћ горепоменутих API-ја и модерних JS web

радних оквира могу се написати browser базиране web апликације које процесирање података

обаљају на локалној машини користећи далеко мање bandwidth-a. Све ово доводи до бржег

одзива web апликација. Сервер је пак и даље потребан, међутим све што он треба да ради јесте

да складишти податке и шаље их апликацији по потреби.

JS је већ данас први, природни и подразумевани језик код wеб developer-a са

Слика бр. 5– Историја веб апликација

JS је већ данас први, природни и подразумевани језик код wеб developer-a са

свакодневним растом у популарности. JS алтернативе попут CofeeScript-a и Dart-a постају

популарне пре свега због њихове једноставности због чега постају одличан увод у свет JS.

Уместо комбиновања, рецимо PHP-a, JS-a и MySQL-a данас је могуће написати апликацију

искључиво у JS-у. Ово ослобађа developer-a когнитивног притиска и потребе за учењем нових

технологија и омогућава му да се пуном снагом усредсреди на развој апликације по себи

уместо петљања са разним технологијама. Многи developer-и далеко више уживају у свом

послу користећи JavaScript како на клијент тако и на сервер страни.

SPA5- Single page application- Једностранична апликација – су једна од

најинтересантнијих новина која нас чека у будућности. SPA полази од једноставног питања:

Због чега је потребно поново учитавати целу страницу када пређемо на њену другу целину.

Далеко је боље да имамо web апликацију која се понаша као десктоп апликација освежавајући

само поједине погледе(views) приликом корисникове интеракције са њом. Он добија

перцепцију да је сам сајт на коме је далеко бржи од традиционалног web сајта и самим тим

велика је вероватноћа да се управо због перформансе, а и занимљивог садржаја поново врати

на Вашу страницу.

Поред свих ових технологија важно је напоменути и хардверске уређаје за које

развијамо било нативне, било web апликације. Поред API-ја који су неопходни како би

искористили максимално све специфичне могућности данашњих уређаја потребно је да

прихватимо и један нов тип уређаја који је недавно ушао у наш свет. У питању је интернет

ствари- IoT(Internet of Things). У питању нису само комерцијални продукти као што су Android

Wear, Google Glass , Tesla аутомобили већ и сви уређаји који на неки начин међусобно реагују

са корисницима. Дијапазон тих уређаја је огроман. Заједничка карактеристика ових уређаја

јесте та да они углавном користе bluetooth LE(low energy) и RFID чипове. Ова релативно нова

област на коју треба обратити пажњу приликом развоја према Гартнеру има четири модела

употребе:

Руковођење

Монетизација

Операција

Проширење

5 Једностранична апликација (енгл. Single-page application (SPA)), такође позната као једностранични интерфејс

(енгл. Single-page interface (SPI)), је веб-апликација или веб-сајт смештен у оквиру једне веб-странице са циљем

пружања лакше интеракције, сличне оној на рачунарима без интернет конекције.

Ова четири моделa се не односе само на IoT већ и на људе, податке и места. У основи IoT

представља концепт повезивања ствари које користимо у свакодневном животу као и

несвакидашњих ствари нпр. сензора у нашим телима у огроман информациони систем. До

2020 биће 20 милијарди оваквих објеката(уз помоћ RFID и BT LE технологије)који већ сада у

већој или мањој мери међусобно комуницирају .У просеку, свака особа имаће 6 до 7 објеката

који комуницирају са интернетом. IoT представља нови конструкт у ИКТ свету. Ови уређаји

ће у будућности чинити свет који се константно мења око нас, свет који се прилагођава нама.

На крају најбитнија ствар код web developer-a јесте ефикасност и продуктивност. Сваки

програмер на почетку учи основне програмерске језике који условљавају његов даљи развој.

Међутим, developer за разлику од програмера огроман део свог усавршавања посвећује учењу

RAD алата, генератора кода, алата за менаџмент зависностима између компонената, web

радних оквира, библиотека, API-ја итд. Број ових алата није велик али се сваке године увећава.

Ови развојни алати могу у великој мери смањити развојно време продукта и побољшати

квалитет самог програмског кода. Самим тим долази до редукције у одржавању кода .

Мобилна револуција траје већ скоро пола деценије и данас се приликом израде било

озбиљних enterprise апликација или обичних web сајтова мора посветити пажња овом аспекту

пре свега због све растућег удела мобилних уређаја у глобалном интернет саобраћају. Растућа

дискусија у developer заједницама тиче се тога да ли за сваку појединачну платформу треба

градити нативне апликације, мобилне или пак хибридне. Web апликацију је наравно најлакше

изградити и њено одржавање је најлакше. Додатан разлог за развој мобилних web апликација

јесте то што су оне универзалне тј. покрећу се из било ког прегледача интернета. Такође,

developer се само фокусира на изворни код и користи једно развојно окружење. Најважније је

да сви крајњи корисници добијају истоветну верзију апликације са једнаким могућностима

која је потпуно независна од архитектуре система и верзије ОС. Архитектура ових web

апликација се обично састоји од одређених web елемената садржаним у неком web радном

оквиру попут Sencha Touch-a или jquerymobile-a, семантичих шаблонских система попут

handlebarsjs, пословне логике попут backbone-a и библиотека као што је zeptojs или његов

дериват jquery. Главна мана мобилних web апликација јесте тај што захтевају сталан приступ

интернету(мада се овај проблем релативно лако решава са хибридним апликацијама). Такође

на интернету се може наћи велика дискусија по питању перформанси ових апликација. Они

који подржавају мобилне web апликације рећи ће да су главни кривци за слабе перформансе

верзије прегледача у одређеним старијим верзијама iOS-а и Android-a. Такође, многи буџет

уређаји долазе са мало РАМ-а и слабијим процесорима те их то унапред ограничава у

интеграцији са специфичним могућностима и функционалностима хардвера. Неки developer-

и овај проблем покушавају решити развојем хибридних апликација међутим лоше

перформансе и даље опстају с обзиром да се користи интерни rendering engine уграђених

прегледача. У студији на примерима из овог рада уочен је драстичан пад перформанси код

уређаја старије генерације Android OS. И на знатно јачим уређајима искуство ни изблиза није

флуентно тако да се препоручује развој нативних апликација за сваку појединачну платформу

све у циљу обезбеђења што бољег искуства потенцијалним корисницима.

Неке од ових алата су описани у наставку овог завршног рада, а основне ћемо споменути

сада. Препоручљиво је користити CSS радне оквире попут LESS или SASS, развојне алате и

библиотеке као Grunt.JS, генератор кода попут Yeoman-a, node.js-a на Вашем серверу, HTML5

Boilerplate, Foundation, client-side оквира попут Angular.JS или JS DBMS MongoDB.

На крају треба напоменути да поред свих предности исказаним у претходном тексту треба

обратити пажњу и на неке мане од којих је једна поменута на почетку овог поглавља. Развојни

тимови појединих популарних развојних оквира попут Angular JS-a понекад избаце подршку

за тзв. legacy кориснике. У верзији 1.3 избачена је подршка за IE 8. Иако на први поглед

обичним корисницима и developer-има то не делује као велика ствар, овим се аутоматски

ускраћује приступ 25% потенцијалних корисника. Поред техничке необразованости неких

корисника, код многих корисника комплексна инфраструктура појединих светских компанија

намеће стриктна сигурносна правила онемогућавајући своје запослене да надограде своје

прегледаче. Такође, поред користи које доносе ове иновације треба погледати и реално стање.

Да ли је неопходно одмах ухватити корак са будућношћу? Да ли је баш то будућност? Због

чега ми је неопходан CSS оквир? Шта је то Mongo DB? Многи корисници само на летимични

преглед ових технологија одустају од њихове имплементације због тога што њихове пројекте

чини комплекснијим него што то већ јесу. Стога, потребно је од почетка имати јасну визију

шта корисник жели да постигне.

2.2 Аутентификација у web апликацијама

Данас је реткост да у одређеном временском периоду не видите губитак корисничких

података од великих компанија или познатих сајтова. Нажалост, чак и када се примене све

безбедносне технике, врло је могуће да већ неколико година постоји безбедносни пропуст у

некој од компонената web апликације а да се то тек открије када буде касно. Од огромног

пропуста компаније Sony у својој мрежи PSN што је довело до губитка огромног броја

корисничких кредитних картица а па до задњег HearthBleed bug-a јасно је да постоји огромна

заинтересованост developer-а да своју веб апликацију учине што безбеднијом.

2.2.1 Мандаторне сигурносне технике

Следеће ствари би требале да буду мандаторне за свакога ко развија веб апликацију и

требало би да се примене што пре. Непримењивање ових техника резултоваће у знатно већој

пропусности Ваше веб апликације на спољне малициозне нападе и самим тим одбити

потенцијалне кориснике од Вашег сајта.

Пре hearthbleed буг-а идеално је било користи SSL6. Међутим после овог бага многи

корисници су почели тражити алтернативе ,не би ли спречили овакве пропусте у будућности.

Једна од првих алтернатива јесте Мозилин NSS- Network security services скуп библиотека,

доступан у више лиценцних издања које одговарају одговарајућим групама корисника. Сам

скуп библиотека се релативно често ажурира. Скоро све Мозилине апликације користе овај

протокол као и многе апликације других прозвођача од којих је најпознатији Red Hat Directory

Server и mod_nss компонента за Апачи httpd Web сервер. NSS је посебно пријемчљив управо

у Апачијевом производу пошто укључује подршку за опозив сертификата као једну од

кључних механизама за бољу заштиту истих. Такође заједно за другом Апачијевом

компонентом mod_revocator, која омогућава да се листе за опозив сигурносних сертификата

процесуирају без рестартовања httpd-a, он чини добро сигурносно језгро за све Ваше будуће

веб апликације.

Остале могућности вредне помена јесу GnuTLS са широком подршком за мноштво

различитих протокола и стандарда и релативно либералном лиценцном политиком, Polar SSL

који постоји и у open source варијанти и MatrixSSL. Иако је OpenSSL баг брзо исправљен он је

искомпровитовао мноштво web апликација и довео сумњу у будућност самог пројекта. Зато

је добро још једном погледати пажњу на наведене пројекте и утврдити добро њихове

предности и мане.

Такође, приликом уноса осетљивих информација потребно је користити POST методу ,а не

GET пошто иста узрокује да сервер логови памте те информације што их чини осетљивим на

злоупотребе.

Веома битан безбедносни аспекат јесте коришћење добре хеш шеме(hashin schem) зарад

очувања интегритета осетљивих информација. Дакле, требало би користити нешто попут

bcrypt-a или неке друге хеш функције која је дизајнирана да буде спора, али поуздана. Не треба

користити MD5 или SHA1 који иако популарни нису одолели безбедносним манипулацијама.

То што је обрада мало спорија од регуларне методе је предност, обичан корисник неће

замерити то што је потребна једна секунда да се обради његов захтев , али неко ко напада хеш

6 SSL – Secure Socket Layer - најраспрострањенији протокол за енкрипцију података који се користи на Интернету.

Кад започне ССЛ сесија, клијент (Wеб броwсер) шаље серверу свој кључ. На ово сервер одговара својим кључем.

Уколико је ова трансакција обављена без грешака, сав будући трансфер бива шифрован.

лозинке ће имате доста муке уколико CPU уместо милисекунде захтев обрађује једну секунду.

Поред овога није препоручљиво користити двосмерну енкрипцију за лозинке.

Раздвајање безбедносних података од осетљивих података је кључно за безбедност веб

апликација. Многи од developer-a често креирају табела типа корисници са атрибутима типа

ид, име, лозинка, е-мејл итд. Проблем је у томе што једнога дана у тренутку непажње developer

може написати select * from корисници where ид=5 а потом избацити их у JSON формат како

би имплементирали AJAX функцију коју су управо имплементирали на њиховој страници.

Нажалост, неко са мало више искуства простим проучавањем AJAX одговора видеће хеш за

корисника. Решење је ставити податке у другу табелу са загонетнијим називом или пак у

тотално другу базу.

Не треба кориснику наметати ограничење у виду дужине лозинке, лозинку од 29 карактера

далеко је теже пробити него лозинку са 20 карактера. Не треба бринути ни о памћењу ових

комплексних лозинки данашњи прегледачи у себи имају auto complete поља форме, а многи

корисници користе и менаџере истих. Са друге стране треба имплементирати број покушаја

логовања са неке локације и обавестити корисника о томе емејлом. Исто је и по питању

локације, када се примети нека чудна локација неуобичајена за корисника треба пооштрити

сигурносне методе.

2.3 Препоруке на које треба обратити пажњу при изради web апликација

Генералне категорије сигурносних техника на које треба обратити пажњу при изради веб

апликација:

Потребно је детаљно проучити Open Web Application Security Project упутство које

пружа фундаменталне инструкције које сваки web девелопер треба да примени.

Проучити SQL injection и како спречити ову широко распрострањену појаву.

Никада подразумевано не веровати кориснику који често у свом захтеву приликом

уноса може да укључи кукије и тајна поља.

Приликом примене хеш функција над лозинкама користити „со

технику(салинизацију)“. Примењујте различите „соли“ над Вашим редовима да би сте

спречили „кишне“ нападе.. Користите споре хеш алгоритме попут већ поменутог bcrypt

или scrypt (новији и јачи) (1, 2), за чување лозинки. Погледати: (How To Safely Store A

Password). NIST такође прихвата PBKDF2 за хеширање лозинки", а FIPS је одобрен у

.NET (више информација овде). Избегавати MD5 или SHA алгоритме.

Упознати се са правилима процесуирања кредитних електронских картица картица.

Види: правила за процесуирање картица.(Види и ово питање)

Онемогућите хаковање сесије.

Онемогућите cross site scripting (XSS) и cross site request forgeries (CSRF).

Избегавати Clickjacking.

Одржавати систем за задњим сигурносним исправкама(поготову Windows XP, Vista и

задња MAC OS X издања)

Осигурајте да се детаљи о конекцији ваше базе осигурани.

Информишите се о задњим сигурносним пропустима и исправкама за Вашу развојну

платформу.

Прочитајте The Google Browser Security Handbook као и The Web Application Hacker's

Handbook.

Размотрите принцип минималних привилегија. Пробајте да покренете Ваш веб

апликациони сервер 7као не-рут(non root). (tomcat пример)

• Сви доступни фајлови видљиви спољним корисницима требали би бити упоређени са

белом листом дозвољених фолдерa тј. треба затворити апликациони веб сервер. Ово

онемогућава крајњег корисника да приступи нпр. следећој локацији:

http://server/download.php?file=../../etc/password. Никада не излажите путање фајлова

крајњим корисницима.

Интерфејс и корисничко искуство

У овом раду је већ споменуто да прегледачи имплементирају стандарде

неконзистентно и да би требало да тестирате Ваш сајт над свим главним прегледачима.

Постоје многи деривати популарних прегледача заснованим на следећим енџинима и

стога посебну пажњу треба обратити на Gecko engine-а (Firefox), WebKit engine-а (Safari

and some mobile browsers), Blink engine-a(Opera 15++, Google Chrome), разне верзије IE

(препоручено је користити Application Compatibility VPC Images). Такође треба

обратити пажњу на то како прегледачи обрађују ваш сајт на различитим оперативним

системима.

Потребно је обратити пажњу на особе са специјалним потребама које користе читаче

екране и претраживаче. Уколико развијате бизнис у одређеним земљама ова област је

дефинисана законом и мора се имплементирати. WAI-ARIA и WCAG 2 су богате

ресурсима и примерима везаним за ову област.

Потребно је имати аутоматизован систем контроле над Вашим пројектом. Унапређење

на веб апликацији корисницима треба да буду испоручена на једноставан и безболан

начин без обавештења.

7 Web апликациони сервер место одакле веб прегледачи имплементирају апликациону логику(JS) и кориснички

интерфејс(CSS, HTML…).

Не приказујте кориснику непознате термине на грешкама које се појављују током

његовог рада на веб апликацији.

Не чувајте корисничке e-mail адресе у plain text формату с обзиром на велику

вероватноћу спем напада на исте.

Додајте атрибут rel="nofollow" на кориснички генерисане линкове да би сте избегли

спем.

Имплементирајте одређена ограничења на Вашем сајту

Имплементирајте прогресивна побољшања Ваше веб апликације.

Извршите преусмеравање након POST ако је POST био успешан да би спречили

освежавање.

Не терајте корисника да размишља. Најбитнији принцип.

Перформансе

Неопходно је имплементирати кеширање и разумети HTTP каширање као и HTML5

Manifest.

Оптимизовати слике – нпр. не користити 200 KB слику за понављајућу позадину

Научите како да зипујете gzip и deflate/испумпате садржај.

Комбинујте више CSS или скрипт фајлова да би сте смањили број конекција и

унапредили способност gzip-а да компресује трансфер између два фајла.

Погледајте Yahoo Exceptional Performance и Google page speed страницу заједно са

њима одговарајућим алаткама YSlow tool (requires Firefox, Safari, Chrome or Opera) и

Гугловом browser extension .

Статичан садржај (нпр. слике, CSS, JavaScript, и генерално садржај коме не треба

приступ кукијима). Добар избор би био Content Delivery Network (CDN).

Смањити број HTTP неопходан да би прегледач обрадио страницу.

Користити Google Closure Compiler за JavaScript.

Потребно је омогућити да имате favicon.ico на Вашем сајту. Прегледачи ову ставку

аутоматску захтевају, чак ако иконица није споменута у HTML-у уопште. Уколико

немате favicon.ico добијаћете доста 404 грешака што ће ослабити bandwidth и page rank

Вашег домена.

SEO (Search Engine Optimization)

Користите "search engine friendly" URL-ове, нпр. example.com/pages/45-article-title

уместо example.com/index.php?page=45

Не користите линкове на којима пише "кликните овде". Не искоришћавате SEO

прилике и чините ствари лошијим за људе за читачима екрана.

Направите XML sitemap, најпожељније у рут локацији /sitemap.xml.

Иксористите <link rel="canonical" ... /> када имате више URL адреса које показују на

исти садржај овај проблем можете разрешити и визуелно уз помоћ Google Webmaster

Tools.

Користите Google Webmaster Tools и Bing Webmaster Tools(за сајтове са примарно

америчком публиком).

Инсталирајте Google Analytics приликом објављивања Вашег сајта (или open source

алата за анализу попут Piwik).

Научите како robots.txt и search engine пауци раде.

Технологија

Потребно је разумети HTTP и основне концепте попут GET, POST, сесија, колачића.

Такође, научите шта значи бестежинска апликација8.

Пишите Ваш XHTML/HTML и CSS по W3C спецификацији и будите сигурни да је

страница валидна.

Научите како се JavaScript обрађује у прегледачу.

Научите разлику између 301 и 302 преусмеравања.

Научите што више о Вашој платформи на којој испоручујете апликације (deployment

platform).

Размислите о коришћењу Reset Style Sheet или normalize.css.

Размислите о JavaScript оквирима (попут jQuery, MooTools, Prototype, Dojo or YUI 3),

које ће сакрити доста разлика између прегледача приликом DOM манипулације.

Размислите о коришћењу сервиса попут Google Libraries API за учитавање оквира тако

да browser може да користи копију оквирa уместо преузимања дупликата са Вашег

сајта.

Није потребно измишљати точак. Пре него што урадите било шта проверите да ли је

неко већ урадио исто. Постоји 99% шансе да је неко урадио слично и да је ту

компоненту/туторијал избацио као FLOSS.

Поправљање багова

20% времена програмер обично проведе у кодирању, а остатак у одржавању и поправци

истога. Пазите добро када програмирате.

Направите систем за пријављивање грешака у апликацији.

8 Бестежинска веб апликације јесте апликација која не бележи податке генерисане у једној сесији попут

информација о корисниковим подешавањима и догађајима који су десили за употребу у следећој сесији.

Правите често бекапове.

Користите системе за контролу верзија 9попут Subversion, Mercurial или Git.

Користите .log фајлове да би сте пронашли грешке у Вашем серверу. Користите log4j,

log4net or log4r.

3. WEB FRAMEWORKS(WEB РАДНИ ОКВИРИ

3.1 УВОД

У претходним поглављима смо поменули оквире и упознали се са њиховом основном

сврхом. У овом поглављу ова област ће бити детаљније обрађена. Термин радни оквир има

неколико дефиниција у зависности од самог контекста у којој је користимо:

Софтверски радни оквир је скуп кодова или библиотека који пружају функционалност

заједничку за целу класу апликација. Док једна библиотека уобичајено пружа један

специфични део функционалности, радни оквири пружају шири опсег функционалности које

су све коришћене од стране једног типа апликације. Или:

… оквир се може дефинисати као генератор апликација одређеног домена, или

конкретније оквир представља скелет апликације, који садржи комплетан код основних

функција целог система , а који се може прилагодити за потребе конкретне апликације.

(Марина Огњановић, Развој сопственог оквира за генерисање десктоп апликација, ФОН, 2010).

Такође, Application Framework - радни оквир апликације се може односити на библиотеку

класа, која садржи основну класу за дефинисање комплетног програма. Радни оквир

обезбеђује бар нека средства преко којих програм остварује интеракцију са корисником, као

што су менији и прозори, у стилу који је интерно конзистентан и апстрахован из одређеног

окружења за које је развијен. Радни оквир апликације је библиотека објектно-оријентисаних

класа које интегришу градивне блокове корисничког интерфејса, основне структуре података

и подршку за објектно-оријентисани улаз и излаз. Он дефинише стандардни кориснички

интерфејс апликације и њено понашање, тако да се програмер може концентрисати на

9 Системи за управљање софтверским конфигурацијама (Software Configuration Managment) омогућавају праћење

промена над кодом (и другим артифактима/фајловима) софтверског пројекта, интеграцију промена насталу од

стране различитих чланова тима као и добијање информација ко је, када, где, променио одређене линије кода.

имплементирање специфичних задатака апликације. Радни оквир апликације омогућава

програмерима да поново искористе исти дизајн целе апликације моделовањем сваке веће

компоненте апликације као апстрактне класе. Дакле, уместо да наново пише код за уобичајену

програмску логику, програмер може да искористи радни оквир који ће му пружити захтевану

функционалност, драстично смањујући време које је потребно да се креира апликација уз

истовремено смањење могућности појаве нових програмских грешака (bugs) и сигурносних

пропуста. Примера ради, радни оквири веб апликација могу да пруже сву неопходну

функционалност везану за управљање сесијом корисника, складиштењем података, и

шаблонизирањем изгледа веб страница. Скоро сви типови оквира контролишу барем неке

аспекте тока извршавања апликације.

Постоји много различитих типова радних оквира од којих неки нуде тек нешто мало више

од индивидуалних модула различитих функционалности и скупова алата слабо повезаних

неким заједничким оквиром апликације, док други нуде скоро потпуну апликацију која има

строго дефинисану структуру и друга правила. Одабир правог радног оквира за дати пројекат

често захтева од програмера да балансира између функционалности коју радни оквир нуди и

флексибилности која након тога остаје.

Још једна од дефиниција, у сржи иста као и претходне говори да је Framework (софтверски

оквир) скуп поновно искористивих библиотека које служе за брзи развој апликација. У wеб

framework-у имамо класе за рад са базама података, разним протоколима, па до оних класа које

помажу генеричко формирање html страница или њених делова.

У суштини они представљају готове класе са доста фунционалности које олакшавају

писање делова кода који се често користе (нпр. за приступање бази, манипулација сликама,

стринговима).

3.1.1 Предности коришћења радних оквира

Предности коришћења радног оквира огледају се у следећим ставкама:

Коришћење кода који је већ раније написан, тестиран и коришћен од стране других

програмера и корисника, повећава поузданост и смањује време потребно за програмирање.

Такође поновно коришћење кода смањује и новчане издатке. Поред тога, програмерски тимови

могу да се поделе на засебне групе од којих једни развијају програмски оквир а други коначну

апликацију или кориснички интерфејс. Ово раздвајање задатака омогућава сваком тиму да се

фокусира на специфичне циљеве.

Радни оквири могу да пруже и већ готова решења за сигурност која су често заједничка за

многе апликације. Ово омогућава да свака функционалност која је написана у оквиру

апликације има користи од придоданих сигурносних механизама без додатног трошка времена

и новца за развој и имплементацију истих.

Тиме што управља задацима на "нижем" архитектуралном нивоу, радни оквири

имплементирају концепт модуларности. Примера ради, пословна логика може остати на нивоу

апликације, док се рутински задаци интеракције са базом података и пријављивање на систем

могу обрадити на засебном месту у радном оквиру.

Радни оквири подстичу коришћење добрих пројектантских и практичних решења и

правила везаних за платформу на којој се радни оквир користи. Они могу помоћи при примени

образаца при пројектовању и уобичајеним најбољим решењима. Примера ради, већина радних

оквира су конципирани у складу са MVC (MODEL-VIEW-CONTROLLER) пројектантским

обрасцем.

Надоградња и унапређења радних оквира могу побољшати постојећу или додатну

функционалност без или са веома мало додатног програмирања од стране програмера коначне

апликације. Примера ради, ако неки радни оквир за електронску трговину понуди додатну

методу за плаћање, та опција може постати аутоматски доступна крајњим корисницима без

измена система и додатног програмирања.

3.1.2 Недостаци коришћења радних оквира

Приликом коришћења радних оквира може доћи и до негативних последица, од којих су

најчешће:

Перформансе понекад могу бити горе него када се користи типизирани уместо наменски

писаног кода. Ово се углавном дешава када радни оквир мора да провери више различитих

сценарија да би одабрао правилни ток даљег извршавања акције. Такође се то дешава када

генерализовани код није писан за специфичну ситуацију. Овај недостатак у деградирању

перформанси је најчешће компензован брзином у самом развоју апликације

Радни оквири чешће захтевају значајно време утрошено на едукацију за њихово ефикасно

и коректно коришћење, односно неки имају врло стрму криву учења. Услед тога конкретни

радни оквири постају заиста корисни тек када се учестало користе. Са сваким новим пројектом

који користи радни оквир, крива учења постаје све мањи проблем и продуктивност се

повећава.

Функционалност која треба да премости или заобиђе недостатке у радним оквирима може

узроковати више потешкоћа и узети више времена него што би то био случај када би се

развијала та функционалност у потпуности. Добри радни оквири пружају структуру која ће

бити флексибилна и оставити доста простора програмеру за допуне, модификације и уградњу

нових функционалности.

Ово није функционални недостатак радног оквира, већ је пре недостатак на нивоу

различите имплементације тих концепата.

Програмске грешке (bugs) и сигурност (security) у радном оквиру могу се одразити на сваку

апликацију која користи тај радни оквир. Услед тога, апликација мора бити засебно (у односу

на радни оквир) тестирана и поправљена уколико има сигурносних пропуста.

3.2 WEB РАДНИ ОКВИРИ

Радни оквири веб апликација (web application framework) јесу софтверски радни оквири

посебно дизајнирани са намером да помогну програмерима и дизајнерима приликом креирања

веб апликација. Ове врсте радних оквира пружају основне заједничке функционалности за

већину веб апликација, као што је управљање пријавом и одјавом корисника на систем,

перзистентност података, и систем шаблона за веб странице (templates). Коришћењем

одговарајућег радног оквира, члан развојног тима може значајно уштедети време и ресурсе

током прављења веб презентације.

3.2.1 ВРСТЕ WEB РАДНИХ ОКВИРА

Радни оквири веб апликација су најчешће базирани на MVC (Model-View-Controller)

архитектуралном обрасцу, да би се раздвојили модел података са пословним правилима од

корисничког радног окружења (interface). Ово се сматра добром праксом јер се тиме

модуларизује код, примењује поновно коришћење кода, и омогућава се примењивање

вишеструких интерфејса. У веб апликацијама, ово конкретно омогућава да се прикажу

различити погледи за различите намене, као нпр. веб странице за људе и веб странице за

роботе интернет претраживаче, или интерфејс (interface) за апликације са приступом на

даљину [4]. MVC је приказан на слици 1.

Слика бр.6- MVC архитектура веб апликације

Модел представља структуре података. Класе у слоју модела углавном служе за читање,

додавање и ажурирање података у бази података. Представља спону између контролера и

погледа који је попуњен од стране контролера. Имплементира нека од пословних правила.

Поглед представља информације презентоване кориснику. Податке које добија из модела

најчешће приказује у виду обичне веб стране или дела стране, нпр. заглавље. Поглед не зависи

од промене логике апликације.

Контролер служи као посредник између модела, приказа и осталих ресурса потребних за

процесирање HTTP захтева. Преузима захтеве које је корисник упутио погледу, и прослеђује

их моделу. Након што су одговарајуће акције обављене над захтевима, контролер их враћа

погледу чиме се оне приказују кориснику. Контролер и поглед заједно сачињавају корисничко

радно окружење - UI (user interface).

3.2.2 "Гурни" наспрам "Повуци" базиране архитектуре

Већина MVC web радних оквира користи "гурни" архитектуру, која се такође назива и

"акцијски-базирана". Ови радни оквири користе акције које захтевају обраду, а тада "гурају"

податке ка слоју приказа који је задужен за њихов приказ. Неки од примера за ову архитектуру

Struts, Struts2, SpringMVC, Stripes, Django, Ruby on Rails. Архитектура алтернативна овој

Web прегледач (клијент страна)

HTTP захтев

T TP Поглед H Контролер Поглед

HTTP страница

Модел

База података

архитектури је "повуци" базирана архитектура, која се понекад назива и "компонентски-

базирана". Ови радни оквири почињу са слојем приказа, који затим "повлачи" резултате из

вишеструких контролера у зависности шта му је када потребно. У овој архитектури

вишеструки контролери могу бити укључени у један једини приказ. Примери ове архитектуре

су Tapestry, JBoss Seam и други.

3.2.3 Трослојна организација

У трослојној организацији, апликације су структуриране око три физичка слоја: слој

клијента, апликације и базе података. Презентациони слој се односи на кориснички интерфејс

и приказује излазне резултате. Слој пословне логике контролише функционалност апликације

и обавља детаљну обраду процеса. Слој података се састоји од система за управљање базом

података - сервера базе података, чиме су подаци ефикасно издвојени од осталих слојева, тако

да се побољшава скалабилност и укупне перформансе система. Апликација садржи пословну

логику, која се извршава на серверу и комуницира са клијентом путем HTTP-а. На страни

клијента се налази веб читач који приказује HTML који је генерисао апликациони слој. Ово не

треба мешати са MVC архитектуралним обрасцем где се за разлику од трослојне архитектуре,

сматра добром праксом да се пословна логика држи одвојеном од контролера - средњег слоја

у MVC. MVC не адресира директно "послова правила" услед тога што је MVC у основи

презентациони слој. MVC је фокусиран на структурирање апликације те се услед тога модел

може посматрати као презентациони модел којег тада слој приказа приказује.

3.2.4 ПОЗНАТИЈИ РАДНИ ОКВИРИ WEB АПЛИКАЦИЈА

Постоји велики број радних оквира за веб апликације, како у затвореном, тако и у

отвореном коду. Они су суштински груписани око неког од познатијих програмских језика

или скрипти. Овде ће бити споменути само најзначајнији од њих.

• Java: Apache Struts, JavaServer Faces, AppFuse, Apache Wicket, Spring, Tapestry

• PHP: CakePHP, CodeIgniter, Symfony, Zend Framework, Zoop

• JavaScript: AngularJS, KnockoutJS, Backbone…

• Python: Django, Flask, Pyjamas, web2py, Pylons, Turbogears, Web.py, Zope, Pyroxide

• Perl: Catalyst, Maypole, Jifty

• Ruby: Ruby on Rails, Ramaze, Nitro, Merb ASP: ASP.NET

Apache Struts је радни оквир типа отвореног кода, а служи за развој JavaEE веб апликација.

Користи Java Servlet API(Application Programming Interface) за MVC архитектуру. Намењен је

за подршку комплетном животном циклусу веб апликације. Тренутна верзија је Struts2.

JSF (JavaServer Faces) је Јава засновани радни оквир за развој веб апликација намењен

поједностављењу развоја интеграције веб базираних корисничких радних окружења путем

коришћења компоненти. Као технологију за приказ JSF2 користи Facelets. Раније верзије (JSF

1.x) су користиле JavaServer Pages (JSP) као технологију за приказ. JSF су део Java 2 Platform

Enterprise Edition(J2EE).

AppFuse је Јава ЕЕ радни оквир типа отвореног кода намењен развоју веб апликација.

Конструисан је тако да омогућава брз и лак почетак развоја апликације, док у исто време

задржава све предности технологија као што су Spring радни оквир, Hibernate и Struts. AppFuse

је креиран са намером да минимизује време потребно између развоја нових веб апликације и

њиховог максималног искоришћења, категоризованог продукцијским и процесним

експериментима и унапређењима.

Ruby on rails: Ruby је динамички програмски језик, отвореног кода, фокусиран на

једноставност и продуктивност. Rails је потпуни радни оквир за развој Ruby веб апликација

базираних на MVC обрасцу. Има и подршку за Ајаx.

Code Igniter: CodeIgniter је PHP радни оквир. Омогућава једноставно креирање веб

апликација великих перформанси. Добро је документован. Компатибилан је многим верзијама

PHP.

Django: Python је динамички објектно оријентисани програмски језик. Djanog је радни

оквир за писање Python веб апликација. Фокусиран је на брз и прагматичан дизајн. Омогућава

брзо писање веб апликација високих перформанси. Заснива се на аутоматизовању креирања

веб апликација. Омогућава раздвајање дизајна од кода.

ASP.NET: ASP.NET је Microsoft радни оквир за развој веб апликација. Користи се за

креирање веб страница, веб апликација и веб сервиса. Базира се на .NET радном оквиру.

Омогућава писање веб апликација у било ком језику који .NET радни оквир подржава. MVC

архитектура је у потпуности имплементирана у ASP.NET.

Слика бр. 7- Тренд послова јасно показује растућу популарност JS оквира у односу на остале технологије. Графици су генерисани на основу базе послова на светском тржишту

4. UI/UX

5. RAD АЛАТИ ЗА ГЕНЕРИСАЊЕ WEB АПЛИКАЦИЈА

6. ПРИМЕРИ

7. ЗАКЉУЧАК

8. ЛИТЕРАТУРА