0

Actually i m creating a framework in php that is similer to Java Servlet Model but use Facebook Big pipe similer technology.

To clear take a look at this 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 will be called, mapping will be done by framework, and framework do something like this :-

$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 we can say that a single servlet is similer to a controller in MVC, and according to doGet or doPost method will be called by framework as i explalined above with request and response parameters, but views are devided in multiple pagelets, ex :-

as you can see in picture this page contains 4 pagelets :-

1 header 2 center left part 3 center right part ( login part ) 4 footer

so so login_servlet code look like this :-

<?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 look this this that every pagelet must extend :-

<?php

   class Pagelet{

      public $template_name = '';
      public $js = array();
      public $css = array();
      public $output = null;  
      public $container_id = 'root'; // __default is 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 all code will 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 look like this :-

<!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> This is the login page  : Enter your informations </b>","container_id":"cntr_head","response_type":2}); </script> 
     <!-- <code><b> This is the login page : Enter your informations </b></code> --> 

     <script type='text/javascript'>  boot.on_arrived({"js":[""],"css":[""],"content":"<h2>    login and join others</h2>","container_id":"cntr_left","response_type":2}); </script> 
     <!-- <code><h2>  login and 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;\"> About  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> help  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> Privacy  </div><div style=\"width : 150px; text-align : left; display : inline-block;\"> Terms and 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;"> About </div><div style="width : 150px; text-align : left; display : inline-block;"> help </div><div style="width : 150px; text-align : left; display : inline-block;"> Privacy </div><div style="width : 150px; text-align : left; display : inline-block;"> Terms and 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 my question is m i doing right or i need to change something ,, ? sorry for weak english :( , thanks in advance

Roemer
  • 3,566
  • 1
  • 16
  • 32
Tiger
  • 404
  • 1
  • 4
  • 13
  • it is working very well :) ,, – Tiger Apr 08 '15 at 18:29
  • but now i modify in this techniuqe ,, i will not create different-2 js for different-2 pagelets because then i will end with a lot of js files ,, what i did that ,, i create a single js file for page strucutre that sent with first response and browser imeditely start downloading that, and other pagelts just arrived with thier css and then we download css and add pagelets in page, so what happens is :- our js was also parrrerly downloading when our server were genrating other pagelets , :) ,, and i think it is better :p , but not sure ,, thanks , and sorry for weak english :( – Tiger Apr 08 '15 at 18:32

1 Answers1

1

It is very hard to answer a question like "am I doing it right?". Is there anything you want specific feedback on? Try to ask a very directed question.

The blogpost about Bigpipe: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

Since it is not opensourced, I don't think you will find a lot of information about the internals. There is an open implementation here: http://www.juhonkoti.net/2010/10/01/open-bigpipe-javascript-implementation. Maybe that can help you further.

See also Facebook Bigpipe Technique Algorithm.

Community
  • 1
  • 1
Roemer
  • 3,566
  • 1
  • 16
  • 32