javascript - Facebook Bigpipe , doing it right or not? -
actually m creating framework in php similer java servlet model use facebook big pipe similer technology.
to clear take @ servlet ( php servlet )
<?php class login_servlet extends servlet{ public function doget($request, $response){ $response->getwriter()->write('hii'); } // __ end of doget public function dopost($request, $response){ } // end of dopost } // __ servlet ?> so when user enters http://myweb.com/login
this servlet called, mapping done framework, , framework :-
$servlet_name = genrate_servlet_name('login'); $servlet_boj = new $servlet_name(new request(), new response()); $servlet_obj-> init(new servletconfig()); $servlet_obj-> service(); $servlet_obj-> destroy(); so can single servlet similer controller in mvc, , according doget or dopost method called framework explalined above request , response parameters, views devided in multiple pagelets, ex :- 
as can see in picture page contains 4 pagelets :-
1 header 2 center left part 3 center right part ( login part ) 4 footer
so login_servlet code :-
<?php class login_servlet extends servlet{ public function doget($request, $response){ $writer = $response->getwriter(); $pg_strucutre = new pageletindexstructure($request, $response); $writer->writepagelet($pg_strucutre); $pg = new pageletindexhead($request, $response); $writer->writepagelet($pg); $pg = new pageletindexleft($request, $response); $writer->writepagelet($pg); $pg = new pageletindexright($request, $response); $writer->writepagelet($pg); $pg = new pageletindexfooter($request, $response); $writer->writepagelet($pg); } // __ end of doget public function dopost($request, $response){ } // end of dopost } // __ servlet ?> and pagelet class this every pagelet must extend :-
<?php class pagelet{ public $template_name = ''; public $js = array(); public $css = array(); public $output = null; public $container_id = 'root'; // __default root private $request = null; private $response = null; function __construct($request, $response){ $this->request = $request; $this->response = $response; $this->doprocess(); /* default */ } // __ construct public function doprocess(){ // __ here code comes } // __doprocess public function render(){ $arr = array( 'js' => $this->js, 'css' => $this->css, 'content' => $this->output, 'container_id' => $this->container_id, 'response_type' => 2 ); return json_encode($arr); } // __ end of render } // __ end of class ?> and on client side response :-
<!doctype html> <html> <head> <script type="text/javascript" src="js/jquery.min.js"> </script> <script type="text/javascript" src="js/require.js" data-main="js/load.js"></script> <script type="text/javascript" src="js/boot.js"> </script> <link rel="stylesheet" href="css/nnj.css" /> </head> <body> <div id="__global"> </div> <div style="position : fixed; width : 100%; height : 50px; background-color : black; bottom : 0px; left : 0px;"></div> <iframe id ="__navigate" style=""> </iframe> <script type="text/javascript"> boot.on_arrived({"response_type" : 1}); </script> <script type='text/javascript'> boot.on_arrived({"js":["index_structure"],"css":["index_structure"],"content":"<div id=\"cntr\"> <div id=\"cntr_head\"> </div> <div> <div id=\"cntr_left\"> </div> <div id=\"cntr_right\"> </div> </div> <div id=\"cntr_footer\"> </div></div>","container_id":"root","response_type":2}); </script> <!-- <code><div id="cntr"> <div id="cntr_head"> </div> <div> <div id="cntr_left"> </div> <div id="cntr_right"> </div> </div> <div id="cntr_footer"> </div></div></code> --> <script type='text/javascript'> boot.on_arrived({"js":[""],"css":[""],"content":"<b> login page : enter informations </b>","container_id":"cntr_head","response_type":2}); </script> <!-- <code><b> login page : enter informations </b></code> --> <script type='text/javascript'> boot.on_arrived({"js":[""],"css":[""],"content":"<h2> login , join others</h2>","container_id":"cntr_left","response_type":2}); </script> <!-- <code><h2> login , join others</h2></code> --> <script type='text/javascript'> boot.on_arrived({"js":[""],"css":[""],"content":"<form action=\"/login\" method=\"post\"> email : <input type=\"text\" name=\"email\"> <br> pasword : <input type=\"password\" name=\"password\"> <br> <input type=\"submit\"></from><br><br><a href=\"/register\"> don't have account ? </a>","container_id":"cntr_right","response_type":2}); </script> <!-- <code><form action="/login" method="post"> email : <input type="text" name="email"> <br> pasword : <input type="password" name="password"> <br> <input type="submit"></from><br><br><a href="/register"> don't have account ? </a></code> --> <script type='text/javascript'> boot.on_arrived({"js":[""],"css":[""],"content":"<div style=\"width : 150px; text-align : left; display : inline-block;\"> </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> privacy </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> terms , conditions </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> advertise </div>","container_id":"cntr_footer","response_type":2}); </script> <!-- <code><div style="width : 150px; text-align : left; display : inline-block;"> </div><div style="width : 150px; text-align : left; display : inline-block;"> </div><div style="width : 150px; text-align : left; display : inline-block;"> privacy </div><div style="width : 150px; text-align : left; display : inline-block;"> terms , conditions </div><div style="width : 150px; text-align : left; display : inline-block;"> advertise </div></code> --> <script type="text/javascript"> boot.on_arrived({"response_type" : 3}); </script> </body> </html> so question m doing right or need change ,, ? sorry weak english :( , in advance
it hard answer question "am doing right?". there want specific feedback on? try ask directed question.
the blogpost bigpipe: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
since not opensourced, don't think find lot of information internals. there open implementation here: http://www.juhonkoti.net/2010/10/01/open-bigpipe-javascript-implementation. maybe can further.
Comments
Post a Comment