Début mai, Misko Hevery , le créateur du framework Angular , a annoncé son départ de Google et de l'équipe Angular pour builder.io .
Un mois et demi plus tard, sur sa page dev.to , il y avait une annonce d'un nouveau framework - Qwik .
J'ai décidé de comprendre ce que c'est et pourquoi c'est nécessaire.
Qwik est maintenant à un stade proof of concept
, il y a très peu de docks et il n'y a pas d'infrastructure correspondante, et il n'est même pas clair s'il se déclenchera ou non, mais les idées principales sont déjà claires, et vous pouvez toucher le code.
Voyons ce que cela nous apportera d'intéressant, et si nous devrons apprendre un nouveau framework (spoiler : c'est trop tôt).
Pourquoi Qwik est-il nécessaire ?
La tâche principale de Qwik - comme vous pouvez le deviner d'après son nom - est d'être très rapide !
Le fait est que depuis mai de cette année, Google a commencé à prendre en compte les performances de l' application dans les résultats de recherche. Plus précisément, le score est calculé à l' aide d'un ensemble de métriques Web Vitals .
La plupart des frameworks modernes peuvent, avec l'aide de Server Side Rendering, obtenir rapidement First Contentful Paint et la plupart des autres métriques, mais une métrique ne les a pas encore conquis - Time to interactive .
Le fait est qu'après avoir envoyé le code HTML généré sur le serveur, vous devez également télécharger le framework et le code de l'application, l'exécuter, et seulement après cela, vous pouvez gérer les événements.
C'est le problème que Qwik essaie de résoudre.
Qu'est-ce que Qwik est capable de faire ?
Qwik permet d'écrire du code qui sera réutilisé sur le serveur et sur le client, tandis que le code sera chargé sur le client juste avant l'exécution.
Cela fonctionne comme ceci :
Lors du premier rendu, le serveur sérialise toutes les données en attributs de nœud HTML.
(0.5 , 1ms ) Qwik, .
, .
, .
, DOM .
? ?
- . , - , , ( guess.js)
Time to interactive, ?
Time to interactive , 50 .
10%, , SSR
, , Time to interactive .
, , 20-70 100.
?
, , .
, , .
, ?
Qwik
- , Time to Interactive.
Markojs.com - Ebay, , , core team , . , core Marko Qwik
.
Astro.js, , (islands)
?
Qwik
, (quick), - :
qoot, .
, !
TODO , , StackBlitz, (, Web Containers) Github.
, , , - Header:
import { jsxFactory, QRL, injectMethod } from '../qwik.js';
import { HeaderComponent } from './Header_component.js';
export const _needed_by_JSX_ = jsxFactory; // eslint-disable-line @typescript-eslint/no-unused-vars
export default injectMethod(
HeaderComponent, //
function (this: HeaderComponent) {
return (
<>
<h1>todos</h1>
<input
class="new-todo"
placeholder="What needs to be done?"
autofocus
value={this.$state.text}
on:keyup={QRL`ui:/Header_addTodo#?value=.target.value&code=.code`}
/>
</>
);
}
);
- JSX ( Angular), , , , . , , , . ( . @nin-jin , JSX)
:
export const _needed_by_JSX_ = jsxFactory; // eslint-disable-line @typescript-eslint/no-unused-vars
( Angular
), TODO
// TODO: Create QFor and QIf directive?
<Q for="todos.value" do={(todo) => <Item $item={todo} />} />
<Q if="todos.value.length > 0" then={(value) => <section></section>} />
, # :
<input on:keyup={QRL`ui:/Header_addTodo#addTodo?value=.target.value&code=.code`} />
QRL
- Template Literal Tag,
ui:/
- Namespace, , , qwik:/ .
/Header_addTodo
-
#addTodo
- ,
?value=
- - (query params
)
.target.value
- , Event
, :
export const addTodo = injectEventHandler(
HeaderComponent,
provideQrlExp<string>('value'),
provideQrlExp<string>('code'),
provideProviderOf(provideEntity(TodoEntity.MOCK_USER)),
async function (
this: HeaderComponent,
inputValue: string,
charCode: string,
todoEntity: () => Promise<TodoEntity>
) {
if (charCode === 'Enter' && inputValue) {
(await todoEntity()).newItem(inputValue);
this.$state.text = '';
markDirty(this);
}
}
);
Dependency Injection Qwik ( Angular)
, :
InjectFunction
- (?value=.target.value
), provideQrlExp<string>('value')
.
injectMethod
- ( ) , (this
), , .
InjectEventListener
- , Event
/
, , Qwik (Enitity): , ( TodoListEntity, TodoItemEntity) DOM . , ID .
, .
Change Detection
Change Detection: markDirty
( Angular Ivy), DOM
, Entity
. DOM
, on:q-render
change detection cycle
requestAnimationFrame
.
change detection cycle
, , , querySelectorAll('[on:q-render]')
DOM, DOM
:
, , :
<Item $item={item} />
DI:
export const Item = injectFunction(
provideEntityState<Item>(
provideComponentProp('$item')
),
function ItemTemplate(item: Item) {
// code
}
);
, emitEvent
Qwik
, open
.
on:open
<my-component on:open="./onOpen"">
<button on:click="base:qwik#emitEvent?$type=open&someArg=someValue">open</button>
</my-component>
, ?
, v1 , :
, Qwik ?
Angular Google, React Facebook, 100% , flow killedbygoogle
Qwik Builder.io, 2017 , Issues , jsx-lite builder,
, Qwik - .
rxjs?
, .
?
, , Discord , - .
, Qwik.
API , , - .
Je tiens également à exprimer ma gratitude à tous ceux qui ont participé à la rédaction, suggéré et posé des questions, et un grand merci à tous ceux qui ont lu ceci jusqu'à la fin !