АР
Так-то, по идее, веб-компоненты интероперабельны. То есть можно юзать компоненты Stencil в проекте на Lit, и наоборот.
Size: a a a
2019 June 07
АР
Я так понимаю, Stencil более opionated, чем Lit? Несёт в себе некие паттерны (типа как фреймворки) по сравнению с Lit, которая является низкоуровневой библиотекой?
IF
Я так понимаю, Stencil более opionated, чем Lit? Несёт в себе некие паттерны (типа как фреймворки) по сравнению с Lit, которая является низкоуровневой библиотекой?
Да. Там помимо этого все на JSX
АР
Да. Там помимо этого все на JSX
Но нет проблем с проперти и эвентами как в реакте?
IF
Но нет проблем с проперти и эвентами как в реакте?
Особо не писал на реакте. На стенциле только что-то простое
АР
Особо не писал на реакте. На стенциле только что-то простое
Handling data
React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
Handling events
Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
Handling events
Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
AS
контрибьютер стенсил: https://twitter.com/manucorporat/status/1136763868045336578
IF
Handling data
React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
Handling events
Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.
Handling events
Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.
Если не забуду, то проверю
AS
плюс они тришейкают рантайм "Since Stencil is able to statically analyze the source of every component, the compiler is able to apply heavy optimizations and only include exactly what the components require."
AS
и оптимизировали сборку
AS
"Stencil One uses a new bundling algorithm inspired by “word embedding”, a popular Machine Learning technique. It allows us to pack components more efficiently, therefore reducing the network throughput and round-trips. In order to do this, we generate a N-dimensional vector space where each component represents a coordinate. These coordinates are generated based on the previous static analysis of how components depend on each other. Later, the components that are located close enough in the vectorial space are bundled together. A blog post explaining this technique will be coming soon!"
AS
"In addition, all the metadata collected by the compiler and the dependency graph generated by rollup can be used to automatically create “modulepreload” links, reducing the amount of network round-trips required to download all the JS in the critical path to zero. This drastically reduces the Time-To-Interactive of apps built with Stencil."
АР
> not all vdom implementations are the same.
Вот это точно подмечено, кстати.
Вот это точно подмечено, кстати.
АР
И что, DX у JSX выше, чем у template literals?
IF
"Stencil One uses a new bundling algorithm inspired by “word embedding”, a popular Machine Learning technique. It allows us to pack components more efficiently, therefore reducing the network throughput and round-trips. In order to do this, we generate a N-dimensional vector space where each component represents a coordinate. These coordinates are generated based on the previous static analysis of how components depend on each other. Later, the components that are located close enough in the vectorial space are bundled together. A blog post explaining this technique will be coming soon!"
Они обещали подробнее написать об этом. Не знаете, есть ли статья про этот алгоритм?
AS
Они обещали подробнее написать об этом. Не знаете, есть ли статья про этот алгоритм?
пока нет
IF
пока нет
Походу есть, но только презентация с js conf: https://github.com/manucorporat/talk-stencil-build-time-approach/blob/master/stencil-build-time-approach.pdf
АР
И было бы здорово, если бы они вскрыли все детали реализации, чем их VDOM отличается от реактовского.
АР
Интересно, есть подвижки у HTML Template Instantiation?