Sven Jakabfi
Autor:
Sven Jakabfi

Programer za C#.NET programski jezik

Client vs Server side routing

  • 27.10.2017

U ovom blogu saznajte osnovne razlike između routinga na strani klijenta i poslužitelja. Oba načina imaju prednosti i mane te svoje različite primjene.

Routing ili preusmjeravanje, u smislu razvoja web aplikacija, može se opisati kao mehanizam koji nadzire nadolazeće zahtjeve prema aplikaciji te uz pomoć definiranih obrazaca URL-a odlučuje na koji će način obraditi taj zahtjev. Princip na koji se u starijim arhitekturama odrađivao routing jest da URL je odgovarao fizičkoj lokaciji tražene stranice (HTML, aspx...) na serveru te bi korisnik bio preusmjeren do tražene lokacije. Poglavito dolaskom MVC- a i sličnih arhitektura (MVP, MVVM, MVW) URL obrasci više ne odgovaraju fizičkim lokacijama stranica na serveru već odgovaraju virtualnim putanjama klasa i metoda (controller action) koji obrađuju zahtjev te šalju povratnu informaciju klijentu. 

Routing se može odrađivati na samom serveru na kojem se nalazi aplikacija, ili unutar klijenta (web browser) preko kojeg se pristupa aplikaciji.

Server side routing

Preusmjeravanje zahtjeva na strani servera, unutar MVC arhitekture se odrađuje pomoću RouteConfig.cs klase. Jednostavnim prosljeđivanjem parametara moguće je odrediti obrazac potreban za navigaciju kroz aplikaciju, defaultne putanje, parametre slane putem URL-a i mnoge druge opcije.

U praksi routing na serveru se odvija na sljedeći način. Korisnik klikne na željeni  HTML tag. Preglednik detektira klik te šalje GET zahtjev na URL href=““ atributa. Server zaprima i obrađuje zahtjev pomoću controllera i actiona unutar primljenog URL-a te šalje novi dokument(HTML, CSHTML) klijentu koji zatim odbacuje prvu stranicu te zaprima i prikazuje stranicu poslanu sa servera. Projekti  unutar KING ICT-a  većinom prakticiraju routanje na serveru na većim projektima koji koriste MVC arhitekturu sustava.

Dijagram routanja na strani servera

 

Ovakva jednostavnost je jedna od prednosti preusmjeravanja zahtjeva na serveru. S obzirom da se sva potrebna konfiguracija za funkcionalnost jedne aplikacija može definirati unutar nekoliko metoda razvoj postaje jednostavniji, a aplikacija lakša za održavanje. Također tražilice poput Googlea i njihovi crawleri preferiraju stranice generirane na serveru što u velikoj mjeri olakšava SEO optimizaciju.

Glavni nedostatci preusmjeravanja na strani servera su opterećenost i povećan promet. S obzirom da prilikom zaprimanja svakog GET zahtjeva server generira i šalje cijele HTML dokumente klijentu, veće je hardversko opterećenje na serveru kao i povećan internetski promet prilikom zaprimanja svake stranice od strane klijenta.

Client side routing

Preusmjeravanje korisničkih zahtjeva na strani klijenta, odnosno pretraživača, izvodi se pomoću JavaScripta i frameworkova kao što su Angular, React, Ember, Backbone...

Šema funkcioniranja routinga na strani klijenta na primjeru React frameworka

Nakon korisničkog klika na određeni link, JS hvata event te ako nije referenciran na vanjski link blokira preglednikov GET zahtjev prema serveru. Nakon blokade  korisničkog zahtjeva, JS direktno mijenja URL na kojem se korisnik nalazi. Potom se mijenja stanje aplikacije na strani klijenta, te JS procesira promjenu stanja  i renderira novo inicijalizirane komponente i po potrebi šalje zahtjev za podacima prema serveru. Bitno je napomenuti kako traženi podaci sa servera mogu biti (i najčešće jesu) sirovi podaci. U prijevodu, sa servera se ne poteže cijeli novi DOM objekt nego samo tekstualni, slikovni, multimedijski podaci koji se renderiraju na stranici, dok renderiranje HTML dokumenta obavlja JS.

U praksi unutar KING ICT-a routanje na klijentu se koristi na manjim SPA (single page application) projektima kao i na projektima koji koriste MicroServices arhitekturu.

Zaključak

U današnje doba sve bržim razvojem programiranja kao znanosti, razne arhitekture i design patterni (MVC, MVVM, Monolith, Micro Services) dolaze do izričaja brže nego ikad prije. Međutim unatoč brzom razvoju neke stvari ostaju iste. Jedna od takvih stvari je potreba za promjenom korisničkog sučelja interakcijom korisnika. Unutar razvoja web aplikacija takvu promjenu sučelja zovemo routing, odnosno preusmjeravanje korisnika na željene stranice. Kao što smo vidjeli preusmjeravanje korisnika može se odrađivati s korisničke strane, serverske strane ili kombinacijom obiju metoda.


S obzirom na to da sve metode imaju svoje dobre i loše strane te niti jedna se ne može striktno nazvati superiornijom obje su prilično snažno zastupljene u modernom razvoju web aplikacija. Stoga odabir metode ovisi o isključivo o potrebama pojedinačnog projekta i željama klijenta.

Popularne teme
.NET ABAP ADFS Agile Always On Anemic Model Angular automatsko generiranje dokumnetacije Azure Backbone benchmark BI BI projekti Bootstrap building people business inteligence Business Intelligence Change Chrome CI CITCON Claims compile Continuous Delivery continuous deployment Continuous Integration CSR d3js data data visualization Data visualization alati DDD dekompozicija dependency injection dinamička forma dinamički parametri dinamički query distribuirani razvoj dokumentacija Domain-Driven design DOP društvena odgovornost edge-based video analytics Eliminating waste enkapsulacija enterprise razvoj softvera ERP ETL Excel FIORI Frontend funkionalna dokumentacija game Geopackage GPKG GIS Git Groovy heat map HICCUPS Hichert HTML IBCS interoperability invision IoT IPSO izvještavanje java JavaFX Javascript Jazz Build Engine JBE Jenkins jquery jqueryui jsfiddle JVM Kaizen Kanban king KING ICT Kingovci Knockout kvaliteta lambde leadership Lean legacy code M language Management Maven Metodologija microservices Microsoft mobile Mobility mockups moć monday game NetWeaver network nodejs oblikovni obrasci OGC OKR open source optimizacija organizacija organizacijska struktura OutOfMemoryError outsourcing overengineering paginacija Performance performanse PERT PMI PMP; Agile; Project management; Scrum; KING ICT; razvoj; metodologija podatkovni skup pouzdanost Power BI Power Map Power Pivot Power Query Power View pretraga proces procjena Product Owner programming proizvod Project manager projektni plan radar Rational Team Concert razvoj tima refaktoriranje Release resize responsive charts REST retrospektiva Rich-Domain model Roko Roić rolling wave planning RTC SAP scale scatterplot chart Scrum scrum team scrum tim service boundaries single responsibility principle Single Sign-On smart metering SoapUI social responsibility softver Software software prototyping Software Testing Club Spring Boot SQL standard sustav videonadzora svg swagger tdd Team team building team development Team Foundation Server tech tehnologije terminski plan Testing tim timesheet timovi Toggl.com touch transakcijski nadzor tražilica underengineering unit testing Uspjeh Visual Studio vodstvo vodstvo leadership moć društvena odgovornost DOP social responsibility CSR vođenje projekata WBS Web Zagreb STC

PRIJAVA NA NEWSLETTER

Najnovije novosti iz ICT svijeta