Streamable Web Apps Presentation #54
Comments
|
@bgando / @matthewp I added a task around capturing videos for the best and worst performers (biggest deltas). It will probably be useful if I can show the comparisons side by-side, so make the videos about 2x as tall as they are wide. For example, I could show:
VS
Also, the app might look as simple as a bunch of very short rows, each with their id. Similar to:
But where you might see ~60 of the 500 rows instead of ~7 |
|
@matthewp I'm thinking instead of react, maybe lets just get a "basic" app working like: module.exports = {
// what is `createState` for?
createState: function(request){
return {};
},
render: function(document, state) {
document.innerHTML = `
<div id='sidebar'>Pet Store <div id='cartCount'></div></div>
<div id='products'></div>`;
async function listProducts(){
var response = await fetch('/products.ndjson');
var productsEl = document.getElementById('products');
for await (const product of ndjsonStream(response.body) ) {
var productEl = `<div>{product.name}</div>`;
productsEl.appendChild(productEl)
}
}
listProducts();
fetch('/cartCount').then(function(response){
return response.json();
}).then(function(data){
document.getElementById('cartCount').innerHTML = data.value;
});
}
};I'd like to show how to setup something like this with |
|
I can create an example app project like this, I agree that it's a good way to go. Would look like: var ndjsonStream = require('can-ndjson-stream');
module.exports = function(request){
document.body.innerHTML = `
<div id='sidebar'>Pet Store <div id='cart-count'></div></div>
<div id='products'></div>`;
async function listProducts(){
var response = await fetch('/api/product');
var productsEl = document.getElementById('products');
for await (const product of ndjsonStream(response.body) ) {
var productEl = `<div>${product.name}</div>`;
productsEl.appendChild(productEl);
}
}
listProducts();
fetch('/api/cart').then(function(response){
return response.json();
}).then(function(data){
document.getElementById('cart-count').innerHTML = data.value;
});
}; |
|
How does re-attachment happen?
…Sent from my iPhone
On Jul 17, 2017, at 7:17 AM, Matthew Phillips ***@***.***> wrote:
I can create an example app project like this, I agree that it's a good way to go. Would look like:
var ndjsonStream = require('can-ndjson-stream');
module.exports = function(request){
document.innerHTML = `
<div id='sidebar'>Pet Store <div id='cartCount'></div></div>
<div id='products'></div>`;
async function listProducts(){
var response = await fetch('/api/product');
var productsEl = document.getElementById('products');
for await (const product of ndjsonStream(response.body) ) {
var productEl = `<div>${product.name}</div>`;
productsEl.appendChild(productEl);
}
}
listProducts();
fetch('/api/cart').then(function(response){
return response.json();
}).then(function(data){
document.getElementById('cart-count').innerHTML = data.value;
});
};
—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Chrome devtools lets you adjust latency and throughput independently.
|
|
I've collected the data on HTTP2 performance. You can view the spreadsheet here. High level observations:
|
|
I've uploaded 3 videos which show some faster and slower examples from the data. The datacenter for these tests is in San Francisco. Fast - 5 Files, 50k gzipped total, 750k throughput 2ms latency, from Singapore, PUSHFast - 1 File, 50k gzipped total, 30mb throughput 2ms latency, from Kentucky, CDNSlow - 5 files, 750k throughput 300k latency, from Singapore, No PUSH |
|
NDJSON data set is here: https://docs.google.com/spreadsheets/d/1_uO79zTYfPwfv3wcOp8xuYTx19KBdw7xp-4RplWnb34/edit#gid=0 Biggest things I noticed:
|
|
Can you make the CSS so most of the 500 fit in the page? 15 columns of 30 items maybe.
…Sent from my iPhone
On Jul 24, 2017, at 1:10 PM, Matthew Phillips ***@***.***> wrote:
NDJSON Videos
These videos show the difference between using NDJSON vs JSON at 500 records, streaming 1 at a time with 750k throughput and 2ms latency.
NDJSON
JSON
—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
i'm going to try. |
|
|
|
I'm recalculating the numbers using this sql query to slow it down: var COUNT = 500;
var cc = `
SELECT t.*
FROM (
SELECT *, row_number() OVER(ORDER BY id ASC) AS row
FROM todos
) t
WHERE t.row % 500 = 0
limit ${COUNT}
`; |
|
I'm going to make a branch of donejs-streaming-product-page that uses basic HTML and provide a sample as asked for here. |
|
This is a code sample a project using basic HTML. |
Justin
Jamie
12- rough draft3-4- add more rocks before, remove the rocks after5-6- animate the streaming part to show "chunking"8floating water10JUSTIN - take5-6animation and put it here21- Fix the line issue8,21- perspective28- make it look more like a waterfall ... rocks + rapidsMatthew
Stream + NDJSON + Fetch
https://glitch.com/edit/#!/join/d35df473-e855-43d8-a260-e9d32a4cd29a
HTTP/2 PUSH
Incremental Rendering
The text was updated successfully, but these errors were encountered: