Nova poruka

Upit na backend - objašnjenje?

poruka: 17
|
čitano: 5.425
|
moderatori: Lazarus Long, XXX-Man, vincimus
1
+/- sve poruke
ravni prikaz
starije poruke gore
Zoko 
13 godina
neaktivan
offline
ned 14.3.2021 8:42
Odgovori Citiraj
Upit na backend - objašnjenje?

Pozdrav! Imam nekoliko nejasnoća što se tiče komunikacije frontend - backend. Evo konkretnog primjera

 

Lista glumaca na IMDB

https://www.imdb.com/list/ls000004615/

"

Što se događa kada kliknemo na nekog od glumaca, npr Jessica Chastain. Ako dobro shvaćam, na backend se šalje link "name/nm1567113/" i backend vraća odgovor u obliku cijelog HTML-a? Zašto se to tako radi? Zašto backend ne vrati samo potrebne podatke, a onda na frontendu slaže stranica?  Ok, razumijem da svaki od tih glumaca mora imati "svoj" link zbog indeksiranja tražilica, ali da li je moguće to napraviti npr. sa javascriptom na frontu?

 
trajni link
0 0 hvala 0
fico ipo 
13 godina
neaktivan
offline
ned 14.3.2021 10:59
Odgovori Citiraj
Upit na backend - objašnjenje?

Korisnik nikad ne komunicira s backendom. Kad ideš na link npr https://www.imdb.com/name/nm0000197/?ref_=nmls_hd, ti komuniciraš s frontend aplikacijom, koja onda dohvaća informacije s backenda. Znači korisnik komunicira s frontend aplikacijom, frontend aplikacija dohvaća podatke s backenda (najčešće u JSON obliku), oblikuje ih i prikazuje korisniku u obliku HTML-a.

 

 Frontend aplikacija iz linka izvuče identifikator vezan uz glumca i onda taj identifikator šalje u zahtjevu prema backendu. Recimo npr. u ovom linku kojeg si ti posla, identifikator je možda ovaj broj 0000197, frontend aplikacija izvlači tu vrijednost iz linka i šalje na backend zahtjev oblika actors/0000197

Poruka je uređivana zadnji put ned 14.3.2021 11:02 (fico ipo).
Moj PC  
trajni link
0 0 hvala 0
Zoko 
13 godina
neaktivan
offline
ned 14.3.2021 11:25
Odgovori Citiraj
Re: Upit na backend - objašnjenje?

Korisnik nikad ne komunicira s backendom. Kad ideš na link npr https://www.imdb.com/name/nm0000197/?ref_=nmls_hd, ti komuniciraš s frontend aplikacijom, koja onda dohvaća informacije s backenda.

 

 Frontend aplikacija iz linka izvuče identifikator vezan uz glumca i onda taj identifikator šalje u zahtjevu prema backendu. Recimo npr. u ovom linku kojeg si ti posla, identifikator je možda ovaj broj 0000197, frontend aplikacija izvlači tu vrijednost iz linka i šalje na backend zahtjev oblika actors/0000197

 

 

Ok, ovaj dio mi je cijeli jasan

 

 

 frontend aplikacija dohvaća podatke s backenda (najčešće u JSON obliku), oblikuje ih i prikazuje korisniku u obliku HTML-a.

 

Mislio sam da mi je u ovaj dio jasan ali sam pogledao primjere i vidim da se razilazi od ovog što si ti napisao. Konkretno na ovom linku što si stavio, response sa servera (dio, velik je da ga cijelog stavim) je :

 


<!DOCTYPE html>
<html lang="en" class="touch"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

<script type='text/javascript'>var ue_t0=ue_t0||+new Date();</script>
<script type='text/javascript'>
window.ue_ihb = (window.ue_ihb || window.ueinit || 0) + 1;
if (window.ue_ihb === 1) {

var ue_csm = window,
ue_hob = +new Date();
(function(d){var e=d.ue=d.ue||{},f=Date.now||function(){return+new Date};e.d=function(b){return f()-(b?0:d.ue_t0)};e.stub=function(b,a){if(!b[a]){var c=[];b[a]=function(){c.push([c.slice.call(arguments),e.d(),d.ue_id])};b[a].replay=function(b){for(var a;a=c.shift();)b(a[0],a[1],a[2])};b[a].isStub=1}};e.exec=function(b,a){return function(){try{return b.apply(this,arguments)}catch(c){ueLogError(c,{attribution:a||"undefined",logLevel:"WARN"})}}}})(ue_csm);


var ue_err_chan = 'jserr';
(function(d,e){function h(f,b){if(!(a.ec>a.mxe)&&f){a.ter.push(f);b=b||{};var c=f.logLevel||b.logLevel;c&&c!==k&&c!==m&&c!==n&&c!==p||a.ec++;c&&c!=k||a.ecf++;b.pageURL=""+(e.location?e.location.href:"");b.logLevel=c;b.attribution=f.attribution||b.attribution;a.erl.push({ex:f,info:b})}}function l(a,b,c,e,g){d.ueLogError({m:a,f:b,l:c,c:""+e,err:g,fromOnError:1,args:arguments},g?{attribution:g.attribution,logLevel:g.logLevel}:void 0);return!1}var k="FATAL",m="ERROR",n="WARN",p="DOWNGRADED",a={ec:0,ecf:0,
pec:0,ts:0,erl:[],ter:[],mxe:50,startTimer:function(){a.ts++;setInterval(function(){d.ue&&a.pec<a.ec&&d.uex("at");a.pec=a.ec},1E4)}};l.skipTrace=1;h.skipTrace=1;h.isStub=1;d.ueLogError=h;d.ue_err=a;e.onerror=l})(ue_csm,window);


var ue_id = 'KQ7520ZKFG0K0A0H9NZX',
ue_url,
ue_navtiming = 1,
ue_mid = 'A1EVAM02EL8SFB',
ue_sid = '140-6507227-3403457',
ue_sn = 'm.imdb.com',
ue_furl = 'fls-na.amazon.com',
ue_surl = 'https://unagi-na.amazon.com/1/events/com.amazon.csm.nexusclient.prod',
ue_int = 0,
ue_fcsn = 1,
ue_urt = 3,
ue_rpl_ns = 'cel-rpl',
ue_ddq = 1,
ue_fpf = '//fls-na.amazon.com/1/batch/1/OP/A1EVAM02EL8SFB:140-6507227-3403457:KQ7520ZKFG0K0A0H9NZX$uedata=s:',
ue_sbuimp = 1,
ue_resw = 1,
ue_fnt = 0,

ue_swi = 1;
var ue_viz=function(){(function(c,e,a){function k(b){if(c.ue.viz.length<p&&!l){var a=b.type;b=b.originalEvent;/^focus./.test(a)&&b&&(b.toElement||b.fromElement||b.relatedTarget)||(a=e[m]||("blur"==a||"focusout"==a?"hidden":"visible"),c.ue.viz.push(a+":"+(+new Date-c.ue.t0)),"visible"==a&&(ue.isl&&uex("at"),l=1))}}for(var l=0,f,g,m,n=["","webkit","o","ms","moz"],d=0,p=20,h=0;h<n.length&&!d;h++)if(a=n[h],f=(a?a+"H":"h")+"idden",d="boolean"==typeof e[f])g=a+"visibilitychange",m=(a?a+"V":"v")+"isibilityState";
k({});d&&e.addEventListener(g,k,0);c.ue&&d&&(c.ue.pageViz={event:g,propHid:f})})(ue_csm,document,window)};

(function(d,k,L){function F(a){return a&&a.replace&&a.replace(/^\s+|\s+$/g,"")}function t(a){return"undefined"===typeof a}function B(a,b){for(var c in b)b[u](c)&&(a[c]=b[c])}function G(a){try{var b=L.cookie.match(RegExp("(^| )"+a+"=([^;]+)"));if(b)return b[2].trim()}catch(c){}}function M(n,b,c){var e=(v||{}).type;2!==e&&1!==e&&(n&&(d.ue_id=a.id=a.rid=n,w=w.replace(/((.*?:){2})(\w+)/,function(a,b){return b+n})),b&&(w=w.replace(/(.*?:)(\w|-)+/,function(a,c){return c+b}),d.ue_sid=b),c&&a.tag("page-source:"+
c),d.ue_fpf=w)}function N(){var a={};return function(b){b&&(a[b]=1);b=[];for(var c in a)a[u](c)&&b.push(c);return b}}function x(d,b,c,e){e=e||+new C;var h,p;if(b||t(c)){if(d)for(p in h=b?g("t",b)||g("t",b,{}):a.t,h[d]=e,c)c[u](p)&&g(p,b,c[p]);return e}}function g(d,b,c){var e=b&&b!=a.id?a.sc[b]:a;e||(e=a.sc[b]={});"id"===d&&c&&(O=1);return e[d]=c||e[d]}function P(d,b,c,e,h){c="on"+c;var g=b[c];"function"===typeof g?d&&(a.h[d]=g):g=function(){};b[c]=function(a){h?(e(a),g(a)):(g(a),e(a))};b[c]&&(b[c].isUeh=
1)}function Q(n,b,c,e){function r(b,c){var d=[b],e=0,f={},h,k;c?(d.push("m=1"),f[c]=1):f=a.sc;for(k in f)if(f[u](k)){var r=g("wb",k),l=g("t",k)||{},p=g("t0",k)||a.t0,m;if(c||2==r){r=r?e++:"";d.push("sc"+r+"="+k);for(m in l)3>=m.length&&!t(l[m])&&null!==l[m]&&d.push(m+r+"="+(l[m]-p));d.push("t"+r+"="+l[n]);if(g("ctb",k)||g("wb",k))h=1}}!H&&h&&d.push("ctb=1");return d.join("&")}function p(b,c,f,e){if(b){var g=d.ue_err;d.ue_url&&!e&&b&&0<b.length&&(e=new Image,a.iel.push(e),e.src=b,a.count&&a.count("postbackImageSize",
b.length));if(w){var h=k.encodeURIComponent;h&&b&&(e=new Image,b=""+d.ue_fpf+h(b)+":"+(+new C-d.ue_t0),a.iel.push(e),e.src=b)}else a.log&&(a.log(b,"uedata",{n:1}),a.ielf.push(b));g&&!g.ts&&g.startTimer();a.b&&(g=a.b,a.b="",p(g,c,f,1))}}function z(b){var c=v?v.type:D,d=2==c||a.isBFonMshop,c=c&&!d,e=a.bfini;O||(e&&1<e&&(b+="&bfform=1",c||(a.isBFT=e-1)),d&&(b+="&bfnt=1",a.isBFT=a.isBFT||1),a.ssw&&a.isBFT&&(a.isBFonMshop&&(a.isNRBF=0),t(a.isNRBF)&&(d=a.ssw(a.oid),d.e||t(d.val)||(a.isNRBF=1<d.val?0:1)),
t(a.isNRBF)||(b+="&nrbf="+a.isNRBF)),a.isBFT&&!a.isNRBF&&(b+="&bft="+a.isBFT));return b}if(!a.paused&&(b||t(c))){for(var m in c)c[u](m)&&g(m,b,c[m]);a.isBFonMshop||x("pc",b,c);m=g("id",b)||a.id;var s=g("id2",b),f=a.url+"?"+n+"&v="+a.v+"&id="+m,H=g("ctb",b)||g("wb",b),y;H&&(f+="&ctb="+H);s&&(f+="&id2="+s);1<d.ueinit&&(f+="&ic="+d.ueinit);if(!("ld"!=n&&"ul"!=n||b&&b!=m)){if("ld"==n){try{k[I]&&k[I].isUeh&&(k[I]=null)}catch(G){}if(k.chrome)for(s=0;s<J.length;s++)R(E,J[s]);(s=L.ue_backdetect)&&s.ue_back&&
s.ue_back.value++;d._uess&&(y=d._uess());a.isl=1}a._bf&&(f+="&bf="+a._bf());d.ue_navtiming&&h&&(g("ctb",m,"1"),a.isBFonMshop||x("tc",D,D,K));!A||a.isBFonMshop||S||(h&&B(a.t,{na_:h.navigationStart,ul_:h.unloadEventStart,_ul:h.unloadEventEnd,rd_:h.redirectStart,_rd:h.redirectEnd,fe_:h.fetchStart,lk_:h.domainLookupStart,_lk:h.domainLookupEnd,co_:h.connectStart,_co:h.connectEnd,sc_:h.secureConnectionStart,rq_:h.requestStart,rs_:h.responseStart,_rs:h.responseEnd,dl_:h.domLoading,di_:h.domInteractive,de_:h.domContentLoadedEventStart,
_de:h.domContentLoadedEventEnd,_dc:h.domComplete,ld_:h.loadEventStart,_ld:h.loadEventEnd,ntd:("function"!==typeof A.now||t(K)?0:new C(K+A.now())-new C)+a.t0}),v&&B(a.t,{ty:v.type+a.t0,rc:v.redirectCount+a.t0}),S=1);a.isBFonMshop||B(a.t,{hob:d.ue_hob,hoe:d.ue_hoe});a.ifr&&(f+="&ifr=1")}x(n,b,c,e);c="ld"==n&&b&&g("wb",b);var q,l;c||b&&b!==m||$(b);c||m==a.oid||aa(m,(g("t",b)||{}).tc||+g("t0",b),+g("t0",b));(e=d.ue_mbl)&&e.cnt&&!c&&(f+=e.cnt());c?g("wb",b,2):"ld"==n&&(a.lid=F(m));for(q in a.sc)if(1==
g("wb",q))break;if(c){if(a.s)return;f=r(f,null)}else e=r(f,null),e!=f&&(e=z(e),a.b=e),y&&(f+=y),f=r(f,b||a.id);f=z(f);if(a.b||c)for(q in a.sc)2==g("wb",q)&&delete a.sc[q];y=0;a._rt&&(f+="&rt="+a._rt());e=k.csa;if(!c&&e)for(l in q=g("t",b)||{},e=e("PageTiming"),q)q[u](l)&&e("mark",ba[l]||l,q[l]);c||(a.s=0,(l=d.ue_err)&&0<l.ec&&l.pec<l.ec&&(l.pec=l.ec,f+="&ec="+l.ec+"&ecf="+l.ecf),y=g("ctb",b),"ld"!==n||b||a.markers||(a.markers={},B(a.markers,g("t",b))),g("t",b,{}));a.tag&&a.tag().length&&(f+="&csmtags="+
a.tag().join("|"),a.tag=N());l=a.viz||[];(q=l.length)&&(f+="&viz="+l.splice(0,q).join("|"));t(d.ue_pty)||(f+="&pty="+d.ue_pty+"&spty="+d.ue_spty+"&pti="+d.ue_pti);a.tabid&&(f+="&tid="+a.tabid);a.aftb&&(f+="&aftb=1");!a._ui||b&&b!=m||(f+=a._ui());a.a=f;p(f,n,y,c)}}function $(a){var b=k.ue_csm_markers||{},c;for(c in b)b[u](c)&&x(c,a,D,b[c])}function z(a,b,c){c=c||k;if(c[T])c[T](a,b,!1);else if(c[U])c[U]("on"+a,b)}function R(a,b,c){c=c||k;if(c[V])c[V](a,b,!1);else if(c[W])c[W]("on"+a,b)}function X(){function a(){d.onUl()}
function b(a){return function(){c[a]||(c[a]=1,Q(a))}}var c={},e,g;d.onLd=b("ld");d.onLdEnd=b("ld");d.onUl=b("ul");e={stop:b("os")};k.chrome?(z(E,a),J.push(a)):e[E]=d.onUl;for(g in e)e[u](g)&&P(0,k,g,e[g]);d.ue_viz&&ue_viz();z("load",d.onLd);x("ue")}function aa(g,b,c){var e=d.ue_mbl,h=k.csa,p=h&&h("SPA"),h=h&&h("PageTiming");e&&e.ajax&&e.ajax(b,c);p&&h&&(p("newPage",{requestId:g,transitionType:"soft"}),h("mark","transitionStart",b));a.tag("ajax-transition")}d.ueinit=(d.ueinit||0)+1;var a=d.ue=d.ue||
{};a.t0=k.aPageStart||d.ue_t0;a.id=d.ue_id;a.url=d.ue_url;a.rid=d.ue_id;a.a="";a.b="";a.h={};a.s=1;a.t={};a.sc={};a.iel=[];a.ielf=[];a.viz=[];a.v="0.215980.0";a.paused=!1;var u="hasOwnProperty",E="beforeunload",I="on"+E,T="addEventListener",V="removeEventListener",U="attachEvent",W="detachEvent",ba={cf:"criticalFeature",af:"aboveTheFold",fn:"functional",fp:"firstPaint",fcp:"firstContentfulPaint",bb:"bodyBegin",be:"bodyEnd",ld:"loaded"},C=k.Date,A=k.performance||k.webkitPerformance,h=(A||{}).timing,
v=(A||{}).navigation,K=(h||{}).navigationStart,w=d.ue_fpf,O=0,S=0,J=[],D;a.oid=F(a.id);a.lid=F(a.id);a._t0=a.t0;a.tag=N();a.ifr=k.top!==k.self||k.frameElement?1:0;a.markers=null;a.attach=z;a.detach=R;if("000-0000000-8675309"===d.ue_sid){var Y=G("cdn-rid"),Z=G("session-id");Y&&Z&&M(Y,Z,"cdn")}d.uei=X;d.ueh=P;d.ues=g;d.uet=x;d.uex=Q;a.reset=M;a.pause=function(d){a.paused=d};X()})(ue_csm,window,ue_csm.document);


ue.stub(ue,"event");ue.stub(ue,"onSushiUnload");ue.stub(ue,"onSushiFlush");

ue.stub(ue,"log");ue.stub(ue,"onunload");ue.stub(ue,"onflush");
(function(c){var a=c.ue;a.cv={};a.cv.scopes={};a.count=function(d,c,b){var e={},f=a.cv,g=b&&0===b.c;e.counter=d;e.value=c;e.t=a.d();b&&b.scope&&(f=a.cv.scopes[b.scope]=a.cv.scopes[b.scope]||{},e.scope=b.scope);if(void 0===c)return f[d];f[d]=c;d=0;b&&b.bf&&(d=1);ue_csm.ue_sclog||!a.clog||0!==d||g?a.log&&a.log(e,"csmcount",{c:1,bf:d}):a.clog(e,"csmcount",{bf:d})};a.count("baselineCounter2",1);a&&a.event&&(a.event({requestId:c.ue_id||"rid",server:c.ue_sn||"sn",obfuscatedMarketplaceId:c.ue_mid||"mid"},
"csm","csm.CSMBaselineEvent.4"),a.count("nexusBaselineCounter",1,{bf:1}))})(ue_csm);

 

var ue_hoe = +new Date();
}
window.ueinit = window.ue_ihb;
</script>

 


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="HandheldFriendly" content="true">
<meta name="google-site-verification" content="-41chk8SjktlW5suRZ4hSSArjxmVu7i89S2ljNh8_a8">
<meta name="msvalidate.01" content="C1DACEF2769068C0B0D2687C9E5105FA">
<meta property="pageId" content="nm0000197" />
<meta property="pageType" content="name" />
<meta property="subpageType" content="main" />


<link rel='image_src' href="https://m.media-amazon.com/images/M/MV5BMTQ3OTY0ODk0M15BMl5BanBnXkFtZTYwNzE4Njc4._V1_UY1200_CR118,0,630,1200_AL_.jpg">
<meta property='og:image' content="https://m.media-amazon.com/images/M/MV5BMTQ3OTY0ODk0M15BMl5BanBnXkFtZTYwNzE4Njc4._V1_UY1200_CR118,0,630,1200_AL_.jpg" />

<meta property='og:type' content="actor" />
<meta property='fb:app_id' content='115109575169727' />

<meta property='og:title' content="Jack Nicholson - IMDb" />
<meta property='og:site_name' content='IMDb' />
<meta name="title" content="Jack Nicholson - IMDb" />
<meta name="description" content="Jack Nicholson, Actor: Chinatown. Jack Nicholson, an American actor, producer, director and screenwriter, is a three-time Academy Award winner and twelve-time nominee. Nicholson is also notable for being one of two actors - the other being Michael Caine - who have received an Oscar nomination in every decade from the 1960s through the early 2000s. Nicholson was born on April 22, ..." />
<meta property="og:description" content="Jack Nicholson, Actor: Chinatown. Jack Nicholson, an American actor, producer, director and screenwriter, is a three-time Academy Award winner and twelve-time nominee. Nicholson is also notable for being one of two actors - the other being Michael Caine - who have received an Oscar nomination in every decade from the 1960s through the early 2000s. Nicholson was born on April 22, ..." />
<meta name="request_id" content="KQ7520ZKFG0K0A0H9NZX" />
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Person",
"url": "/name/nm0000197/",
"name": "Jack Nicholson",
"image": "https://m.media-amazon.com/images/M/MV5BMTQ3OTY0ODk0M15BMl5BanBnXkFtZTYwNzE4Njc4._V1_.jpg",
"jobTitle": [
"Actor",
"Soundtrack",
"Producer"
],
"description": "Jack Nicholson, an American actor, producer, director and screenwriter, is a three-time Academy Award winner and twelve-time nominee. Nicholson is also notable for being one of two actors - the other being Michael Caine - who have received an Oscar nomination in every decade from the 1960s through the early 2000s. Nicholson was born on April 22, ...",
"birthDate": "1937-04-22"
}</script> <link rel="canonical" href="https://www.imdb.com/name/nm0000197/">

<script>
if (typeof uet == 'function') {
uet("bb", "LoadTitle", {wb: 1});
}
</script>
<title>Jack Nicholson - IMDb</title>
<script>
if (typeof uet == 'function') {
uet("be", "LoadTitle", {wb: 1});
}
</script>
<script>
if (typeof uex == 'function') {
uex("ld", "LoadTitle", {wb: 1});
}
</script>

<script>
if (typeof uet == 'function') {
uet("bb", "LoadIcons", {wb: 1});
}
</script>
<link rel="image_src" type="image/png" href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/icon_114x114._CB479963066_.png">
<link href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/apple-touch-icon-mobile._CB479963088_.png" rel="apple-touch-icon">
<link href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/apple-touch-icon-mobile-76x76._CB479962152_.png" rel="apple-touch-icon" sizes="76x76">
<link href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/apple-touch-icon-mobile-120x120._CB479963088_.png" rel="apple-touch-icon" sizes="120x120">
<link href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/apple-touch-icon-web-152x152._CB479963088_.png" rel="apple-touch-icon" sizes="152x152">
<link rel="shortcut icon" sizes="196x196" href="https://m.media-amazon.com/images/G/01/imdb/images-ANDW73HA/android-mobile-196x196._CB479962153_.png">
<script>
if (typeof uet == 'function') {
uet("be", "LoadIcons", {wb: 1});
}
</script>
<script>
if (typeof uex == 'function') {
uex("ld", "LoadIcons", {wb: 1});
}
</script>


<script type="text/javascript">var IMDbTimer={starttime: new Date().getTime()};</script>
<script src="https://m.media-amazon.com/images/S/sash/tLn3fnQNyD3Dmm3.js"></script>
<script id="ads_doWithAds">
doWithAds = function(inside, failureMessage){
if ('consoleLog' in window &&
'generic' in window &&
'ad_utils' in window &&
'custom' in window &&
'monitoring' in generic &&
'document_is_ready' in generic) {
try{
inside.call(this);
}catch(e) {
if ( window.ueLogError ) {
if(typeof failureMessage !== 'undefined'){
e.message = failureMessage;
}
e.attribution = "Advertising";
e.logLevel = "ERROR";
ueLogError(e);
}
if( (document.location.hash.match('debug=1')) &&
(typeof failureMessage !== 'undefined') ){
console.error(failureMessage);
}
}
} else {
if( (document.location.hash.match('debug=1')) &&
(typeof failureMessage !== 'undefined') ){
console.error(failureMessage);
}
}
};
</script><script id="ads_monitoring_setup">
doWithAds(function(){
generic.monitoring.set_forester_info("main");

 

 

Znači, on je vratio gotovi html koji browser prikazuje. Sad mene zanima zašto se to tako radi, zašto jednostavno ne vrati samo JSON i onda složi HTML?

Poruka je uređivana zadnji put ned 14.3.2021 11:27 (Zoko).
 
trajni link nadporuka
0 0 hvala 0
fico ipo 
13 godina
neaktivan
offline
ned 14.3.2021 11:39
Odgovori Citiraj
Upit na backend - objašnjenje?

To nije odgovor sa servera, nego sa frontend aplikacije. Frontend aplikacija je kontaktirala backend, dobila JSON i oblikovala HTML sa JSON podacima koji je dobila od servera. Taj međukorak obrade podataka sa servera aplikacija obavi bez da to korisnik vidi.

 

https://developer.imdb.com/ - tu možeš istražiti kako dohvaćati podatke sa IMDB-ovog servera koji će biti u JSON obliku.

Poruka je uređivana zadnji put ned 14.3.2021 11:41 (fico ipo).
Moj PC  
trajni link
0 0 hvala 0
Bobobo-bo Bo-bobo 
11 godina
neaktivan
offline
ned 14.3.2021 11:44
Odgovori Citiraj
Re: Upit na backend - objašnjenje?

Web aplikacije se u principu mogu podijeliti na dinamički generirane web stranice i na singme page aplikacije (SPA)

 

Dinamički generirane web stranice su starija tehnologija - kad klijent zatraži neku stranicu server izgenerira kompletni HTML i vraća ga klijentu. Ovdje nema govora o frontendu/backendu jer je identičan statičnom web siteu kojem HRML dokumenti nisu datoteke na disku, nego se stvaraju ad-hoc.

 

SPA je "novija" tehnologija i ona radi ovako kako si ti opisao. Nakon učitavanja početne stranice u klijentskom browseru pokreće se javascript (frontend) koji po potrebi komunicira sa serverom (backend). Server ne vraća HTML nego nešto drugo, npr. ovakav JSON:

 

[
  {
    "id": 1,
    "title": "",
    "code": "foo = \"bar\"\n",
    "linenos": false,
    "language": "python",
    "style": "friendly"
  },
  {
    "id": 2,
    "title": "",
    "code": "print(\"hello, world\")\n",
    "linenos": false,
    "language": "python",
    "style": "friendly"
  }
]

 
trajni link nadporuka
1 0 hvala 0
Bobobo-bo Bo-bobo 
11 godina
neaktivan
offline
ned 14.3.2021 11:46
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
fico ipo kaže...

To nije odgovor sa servera, nego sa frontend aplikacije. Frontend aplikacija je kontaktirala backend, dobila JSON i oblikovala HTML sa JSON podacima koji je dobila od servera. Taj međukorak obrade podataka sa servera aplikacija obavi bez da to korisnik vidi.

 To jest odgovor sa servera jer imdb.com nije single page application.

 
trajni link nadporuka
0 0 hvala 0
fico ipo 
13 godina
neaktivan
offline
ned 14.3.2021 11:50
Odgovori Citiraj
Re: Upit na backend - objašnjenje?

Jesi siguran?

Moj PC  
trajni link nadporuka
0 0 hvala 0
Zoko 
13 godina
neaktivan
offline
ned 14.3.2021 12:29
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
fico ipo kaže...

To nije odgovor sa servera, nego sa frontend aplikacije. Frontend aplikacija je kontaktirala backend, dobila JSON i oblikovala HTML sa JSON podacima koji je dobila od servera. Taj međukorak obrade podataka sa servera aplikacija obavi bez da to korisnik vidi.

 

 

 

Da, ovo objašnjava neke stvari ( koje sam očito krivo shvatio   ), hvala ti!  E sad mi još nije jasan taj međukorak, gdje se i tko ga obavlja? Javascript (ili neki drugi jezik)?  Jasan mi je ovaj dio sa slanjem linka na backend i da onda on na temelju toga vraća potrebne podatke, ali kako se izvede to da se klikom na taj link otvara baš ta stranica?  

 

Bobobo-bo Bo-bobo kaže...

Web aplikacije se u principu mogu podijeliti na dinamički generirane web stranice i na singme page aplikacije (SPA)

 

Dinamički generirane web stranice su starija tehnologija - kad klijent zatraži neku stranicu server izgenerira kompletni HTML i vraća ga klijentu. Ovdje nema govora o frontendu/backendu jer je identičan statičnom web siteu kojem HRML dokumenti nisu datoteke na disku, nego se stvaraju ad-hoc.

 

 

Hvala ti, dao si mi materijala za proučavanje 

 
trajni link nadporuka
0 0 hvala 0
Bobobo-bo Bo-bobo 
11 godina
neaktivan
offline
ned 14.3.2021 13:34
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
fico ipo kaže...

Jesi siguran?

Da, upali konzolu pa provjeri.

 
trajni link nadporuka
0 0 hvala 0
Bobobo-bo Bo-bobo 
11 godina
neaktivan
offline
ned 14.3.2021 13:44
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
Zoko kaže...
fico ipo kaže...

To nije odgovor sa servera, nego sa frontend aplikacije. Frontend aplikacija je kontaktirala backend, dobila JSON i oblikovala HTML sa JSON podacima koji je dobila od servera. Taj međukorak obrade podataka sa servera aplikacija obavi bez da to korisnik vidi.

 

 

 

Da, ovo objašnjava neke stvari ( koje sam očito krivo shvatio   ), hvala ti!  E sad mi još nije jasan taj međukorak, gdje se i tko ga obavlja? Javascript (ili neki drugi jezik)?  Jasan mi je ovaj dio sa slanjem linka na backend i da onda on na temelju toga vraća potrebne podatke, ali kako se izvede to da se klikom na taj link otvara baš ta stranica?  

 

JavaScript je to jedini programski jezik kojeg podržavaju svi browseri pa nema drugog izbora.

 

Frontenda teoretski možeš traditi u čistom JavaScript+jQuery, ali je bolje koristiti framework kao AngularJS ili React.

 
trajni link nadporuka
0 0 hvala 0
MrBlc 
15 godina
odjavljen
offline
ned 14.3.2021 18:03
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
Zoko kaže...

Što se događa kada kliknemo na nekog od glumaca, npr Jessica Chastain. Ako dobro shvaćam, na backend se šalje link "name/nm1567113/" i backend vraća odgovor u obliku cijelog HTML-a? Zašto se to tako radi? Zašto backend ne vrati samo potrebne podatke, a onda na frontendu slaže stranica?  Ok, razumijem da svaki od tih glumaca mora imati "svoj" link zbog indeksiranja tražilica, ali da li je moguće to napraviti npr. sa javascriptom na frontu?

Meni je draže koristiti pojmove client-side i server-side jer jasnije. Frontend i backend se u žargonu znaju koristiti i za druge stvari, primjerice, ako imaš server-side web render koji koristi REST API, umjesto da ima kompletnu poslovnu logiku i DB layer, neki taj render app zovu frondendom, a REST API backendom, iako to tehnički nije točno.

 

 

Neke stranice stvarno dohvaćaju podatke preko API-a i renderiraju HTML, ili čak custom prikaz u canvas, na client sideu.

 

Za aplikacije u kojima se paralelno događa više toga, korisnik može istovremeno unositi podatke i u real timeu pratiti druge podatke, praktički je nezamislivo imati klasičan GET/POST sustav s vraćanjem čitavog HTML-a, i tu client-side aplikacije dolaze do izražaja.

 

 

Međutim, za klasične stranice koje su više orijentirane za prezentaciju, takav pristup uzrokuje određene probleme. Inicijalni load stranice pri prvom posjetu traje dulje jer se mora podići čitava frontend aplikacija prije nego browser ima što prikazati. Ako želiš imati dobar položaj na tražilicama, to ti donosi penalty, a ujedno uzrokuje i veći bounce rate, pa onda moraš opet imati i server side rendering kako bi korisniku pri prvom otvaranju (i tražilicama koje ne podržavaju JS) mogao poslati predrenderiranu stranicu. S ozbirom da se radi o sadržaju koji često može biti poprilično agresivno cacheiran na strani servera, nemaš nekog značajnijeg benefita od client-side aplikacije, osim ako ti je napeto biti moderan.

 

Eventualno, ako ti je serverska aplikacija node.js, pa imaš veliki reuse koda, onda ti je manji trošak imati takav hibridni sistem.

 

Također, klasične, server-side web stranice i dalje mogu imati određene funkcionalnosti implementirane kao client side aplikacija, pa imdb može učitati više recenzija, poslati recenziju i slično, bez reloada čitavog HTML-a.

 

I tu opet možeš imati client-side render html-a ili samo thin cilent app koji će samo parcijalni html iz responsea ubaciti na odgovarajuće mjesti i izvršiti elementarne provjere.

 

fico ipo kaže...

To nije odgovor sa servera, nego sa frontend aplikacije. Frontend aplikacija je kontaktirala backend, dobila JSON i oblikovala HTML sa JSON podacima koji je dobila od servera. Taj međukorak obrade podataka sa servera aplikacija obavi bez da to korisnik vidi.

 

https://developer.imdb.com/ - tu možeš istražiti kako dohvaćati podatke sa IMDB-ovog servera koji će biti u JSON obliku.

To je odgovor sa servera kojeg možeš vidjeti preko inspekt elementa. Backend aplikacija šalje gotov html.

 

Da, IMDB ima API, mobilna aplikacija koristi taj API. Interno ga WEB render možda također koristi, što ne možemo znati, ali to je samo još jedna odvojena backend aplikacija. Da, neko to žargonski zovu frontend, ali u kontekstu pitanja koje je Zoko postavio, to nije frontend.

 

Privatne poruke su za privatne razgovore. Ne odgovaram na općenita pitanja vezana uz neku temu.
 
trajni link nadporuka
0 0 hvala 0
ministar 
13 godina
offline
ned 14.3.2021 18:28
Odgovori Citiraj
Upit na backend - objašnjenje?

koliko vidim, koriste NextJS sa server-side renderingom.. zato vraća cijeli HTML, ali je frontend aplikacija

 
trajni link
0 0 hvala 0
Zoko 
13 godina
neaktivan
offline
pon 15.3.2021 19:24
Odgovori Citiraj
Upit na backend - objašnjenje?

Hvala svima na pomoći. Našao sam rješenje za svoje probleme ( da pomognem ako se tko nađe u mojoj situaciji )

 

https://altorouter.com/

 
trajni link
0 0 hvala 0
Caustic 
3 godine
protjeran
offline
pon 15.3.2021 22:54
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
Jel okej imati container u kojeg trpaš HTML kod (zajedno s JSom za taj HTML) dobiven putem AJAXa?

Npr kod uređivanja profila, klikneš na profil, dobiješ HTML s formom za uređivanje + JS i to je to.
Life is meant to die. Accept your fates.
 
trajni link nadporuka
0 0 hvala 0
MrBlc 
15 godina
odjavljen
offline
uto 16.3.2021 7:39
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
Zoko kaže...

Hvala svima na pomoći. Našao sam rješenje za svoje probleme ( da pomognem ako se tko nađe u mojoj situaciji )

 

https://altorouter.com/

A koji su uopće bili tvoji problemi? Pitanja su ti bila općenita o terminologiji i pristupima, a ne u vezi routinga. Obično dobiješ bolje odgovore kad bolje opišeš problem.

 

Gotovo svi PHP frameworci dolaze s router komponentom koja je u pravilu fleksibilnija i bolje dokumentirana od ovog liba. Ovo je ok rješenje za relativno jednostavne sustave.

 

Caustic kaže...
Jel okej imati container u kojeg trpaš HTML kod (zajedno s JSom za taj HTML) dobiven putem AJAXa?

Npr kod uređivanja profila, klikneš na profil, dobiješ HTML s formom za uređivanje + JS i to je to.

Za neke jednostavnije stvari jest, iako bih osobno izbjegao trpanje JS-a na taj način. Bolje je skripte imati učitane u jednom minificiranom fileu, pa pozvati što ti treba.

Privatne poruke su za privatne razgovore. Ne odgovaram na općenita pitanja vezana uz neku temu.
 
trajni link nadporuka
1 0 hvala 1
Caustic 
3 godine
protjeran
offline
uto 16.3.2021 7:55
Odgovori Citiraj
Re: Upit na backend - objašnjenje?
Još pitanje svezi PHPa - što to PHP frameworci imaju, a da PHP vanilla nema? Router? Meni ne smeta da link izgleda nešto tipa link.com/file.php?param=nešto
Life is meant to die. Accept your fates.
 
trajni link nadporuka
0 0 hvala 0
MrBlc 
15 godina
odjavljen
offline
uto 16.3.2021 9:29
Odgovori Citiraj
Re: Upit na backend - objašnjenje?

PHP vanilla ima više-manje samo nativne funkcije, jezične konstrukte i direktive (poput include i echo) te jednostavne tipove podataka.

 

PHP library implementira neke funkcionalnosti koje možeš pozvati - u osnovi tuđi kod koji možeš koristiti da ne izmišljaš toplu vodu rješavaš probleme koji su davno riješeni.

 

PHP framework sadrži skup library-a nužnih za tipičnu aplikaciju, ali je i više od toga - framework je kostur aplikacije na koji ti dodaješ svoj kod. Različiti frameworci imaju različitu razinu fleksibilnosti - kod nekih moraš raditi točno kako je zamislio autor frameworka, a neki ti daju gotovo potpunu slobodu. Svaki pristup ima svoje prednosi i mane.

 

Frameworci u pravilu implementiraju:

- routing

- dependency injection

- DB layer

- templating engine

- access control

- ...

 

Većina frameworka pruža dovoljno fleksibilnosti da neku od tih funkcionalnosti zamijeniš drugim libraryem ako ti tako paše.

 

 

 

Sad, što se tiče linkova, link.com/file.php?param=nešto je rudimentalni pristup. Imaš puno entry pointa. Zamisli da na aplikaciji koja je već razvijena i u pogonu moraš dodati novu funkcionalnost zbog koje moraš mijenjati sve fileove (tipa na aplikaciji koja ima login sad dodaješ da imaš dva tipa accounta, od kojih samo jedan ima pristup svim funkcionalnostima) - kod takvog pristupa imaš puno posla i veliku vjerojatnost da ćeš negdje pogriješiti.

 

Ako imaš jedno centralno mjesto na kojem to odrađuješ, stvari su jednostavnije. Ok, uvijek možeš iz svih fileova includeati jedan file i pozvati funkciju kojoj šalješ informacije za koji file radiš provjeru, ali i to može biti jako nezgodno ako moraš dodati novi poziv funkcije u sve fileove.

 

Zato je zgodnije imati jednu centralnu točku koja odrađuje routing, pa tu jednostavno možeš dodati što treba. Ti i dalje možeš imati link u obliku index.php?action=clanak/view&id=3, ali sad sve ide preko centralne točke, pa dodavanje novih funkcionalnosti postaje jednostavnije i otpornije na greške. Da li ćeš ići na pretty url ili ne je čisto tvoja odluka. Ako se radi o stranicama koje su public i želiš da se pojavljuju na googleu, onda je bolje imati url koju sadrži ključne riječi, nego neki id. Općenito, id je bolje izbjegavati u url-u jer otkriva informacije o sustavu.

 

To možeš i dalje napraviti u vanilla PHP-u, možeš koristiti library, ali za kompleksniju aplikaciju je bolje koristiti framework koji implementira best practices koje onda slijediš. To pogotovo vrijedi za aplikacije na kojima radi više ljudi jer ti framework u pravilu pruža jasnu strukturu i konzistentnu logiku, pa je manja šansa da se funkcionalnost koju ti razvijaš zakolje s nečim što tvoj kolega razvija.

 

Privatne poruke su za privatne razgovore. Ne odgovaram na općenita pitanja vezana uz neku temu.
 
trajni link nadporuka
2 0 hvala 1
1
Nova poruka
Pronađi
Prijava korisnika
E-mail:
Lozinka:
 
Aktivne teme
vrh stranice
Copyright © 2008 - 2024 Bug d.o.o. sva prava pridržana.