{"id":16954732,"url":"https://github.com/williankeller/bigpipe-pipeline","last_synced_at":"2025-04-11T21:44:46.033Z","repository":{"id":32099205,"uuid":"35671429","full_name":"williankeller/bigpipe-pipeline","owner":"williankeller","description":"BigPipe: Pipelining web pages for high performance built in PHP","archived":false,"fork":false,"pushed_at":"2020-01-06T16:59:23.000Z","size":66,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-25T17:49:25.121Z","etag":null,"topics":["big-pipe","bigpipe","dynamic-content","facebook-pipeline","javascript","pagelet","pagelets","pipelining","pipelining-capabilities"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/williankeller.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"williankeller","custom":["https://paypal.me/williankeller"]}},"created_at":"2015-05-15T11:53:44.000Z","updated_at":"2020-01-06T16:59:25.000Z","dependencies_parsed_at":"2022-08-24T13:10:36.480Z","dependency_job_id":null,"html_url":"https://github.com/williankeller/bigpipe-pipeline","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fbigpipe-pipeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fbigpipe-pipeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fbigpipe-pipeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williankeller%2Fbigpipe-pipeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williankeller","download_url":"https://codeload.github.com/williankeller/bigpipe-pipeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487510,"owners_count":21112187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["big-pipe","bigpipe","dynamic-content","facebook-pipeline","javascript","pagelet","pagelets","pipelining","pipelining-capabilities"],"created_at":"2024-10-13T22:10:25.398Z","updated_at":"2025-04-11T21:44:46.002Z","avatar_url":"https://github.com/williankeller.png","language":"JavaScript","funding_links":["https://github.com/sponsors/williankeller","https://paypal.me/williankeller"],"categories":[],"sub_categories":[],"readme":"\n## BigPipe: Pipelining web pages for high performance\n[![Build Status](https://travis-ci.org/williankeller/bigpipe-pipeline.svg?branch=master)](https://travis-ci.org/williankeller/bigpipe-pipeline) \n[![Packagist](https://img.shields.io/packagist/v/wkeller/bigpipe-pipeline.svg)](https://packagist.org/packages/wkeller/bigpipe-pipeline) \n[![Downloads](https://img.shields.io/packagist/dt/wkeller/bigpipe-pipeline.svg)](https://packagist.org/packages/wkeller/bigpipe-pipeline)\n\nBigpipe is a feature originally created by facebook: \n[BigPipe: Pipelining web pages for high performance.](https://engineering.fb.com/web/bigpipe-pipelining-web-pages-for-high-performance/)\nThe general idea is to break down web pages into small reusable pieces of functionality \ncalled Pagelets and separate them into various stages of execution within web servers and browsers. This enables \nprogressive front-end rendering and results in exceptional front-end performance.\n\n\n### Our library code:\nMost web frameworks are based on a request and response pattern, one request arrives, we process the data and output \nof a model. But before we can issue the model we have to wait until all the data has been received before the model \ncan be processed. When you receive your first batch of data, why not send it directly to the browser so that it can \nstart downloading the required CSS, JavaScript and processing it.\n\n\n### Install via composer (recommended)\n```sh\ncomposer create-project wkeller/bigpipe-pipeline\n```\n\n### Methods to use it:\n* **addContent()** _(add content to the some DOM element)_\n* **addCss()** _(add the CSS no to the head of the page)_\n* **addJS()** _(add JavaScript file to the footer of the page)_\n* **addJsScript()** _(add inline JavaScript content)_\n\n### Some working examples:\n\n**Adding static text content:**\n```php\n// Initiate Pagelet (creates new div with ID)\n$element = new Pagelet('static-text');\n\n// Adding the text content inside of the DIV element\n$element-\u003eaddContent('Static text content inside of the \"static-text\" DIV element.');\n\n// Priting Pagelet element\necho $element;\n```\n\n**Adding external file:**\nPossible files to be loaded: PHP, HTML and more.\n```php\n// Initiate Pagelet (creates new div with ID)\n$element = new Pagelet('it-is-a-file');\n\n// Adding the content of the file inside of the DIV element\n$element-\u003eaddContent('path/to/file/filename.php', true);\n\n// Priting Pagelet element\necho $element;\n```\n\n**Adding CSS no head**\n```php\n// Initiate Pagelet\n$element = new Pagelet('css');\n        \n// Adding style files to the head\n$pagelet-\u003eaddCss([\n  'path/to/file/style.css',\n  'path/to/file/fonts.css'\n]);\n\n// Priting Pagelet element\necho $element;\n```\n\n**Adding JavaScript files to the footer of the page:**\n```php\n// Initiate Pagelet\n$element = new Pagelet('javascript');\n        \n// Adding JavaScript files to the footer\n$pagelet-\u003eaddJS([\n  'path/to/file/jQuery.js',\n  'path/to/file/script.js'\n]);\n\n// Priting Pagelet element\necho $element;\n```\n\n**Adding inline JavaScript content:**\n```php\n// Initiate Pagelet\n$element = new Pagelet('javascript-inline');\n        \n// Adicionando javascript inline\n$pagelet-\u003eaddJsScript(\"$('static-text').innerHTML = 'Changing static content';\");\n\n// Priting Pagelet element\necho $element;\n```\n\n### Priority:\nIn BigPipe, JavaScript resource is given lower priority than CSS and page content. Therefore, BigPipe won’t start \ndownloading JavaScript for any pagelet until all pagelets in the page have been displayed.\n\nWith that, it's possible to set priority to the Pagelets you are loading. Let's say you'd like to load your footer\ncontent as last content:\n\n```php\n// Initiate Pagelet\n$element = new Pagelet('footer', null, 30);\n        \n// Adding JavaScript files to the footer\n$pagelet-\u003eaddJS(['path/to/file/footer.js']);\n\n// Adding the text content inside of the DIV element\n$element-\u003eaddContent('Footer content goes here.');\n\n// Priting Pagelet element\necho $element;\n```\n\nIn this case, `footer` will have priority `30`. All the Pagelets bofore this number will be loaded first.\n\n### Contribution\nWant to contribute to this extension? The quickest way is to open a [pull request on GitHub](https://help.github.com/articles/using-pull-requests).\n\n\n### Support\nIf you encounter any problems or bugs, please open an issue on [GitHub](https://github.com/williankeller/bigpipe-pipeline/issues).\nNeed help setting up or want to customize this extension to meet your business needs? Please open an issue and if we like your idea we will add ad a feature.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliankeller%2Fbigpipe-pipeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliankeller%2Fbigpipe-pipeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliankeller%2Fbigpipe-pipeline/lists"}