Naka-pin na Tweet
I built software Facebook and Google engineers said were impossible.
Ask me anything ๐๐ฝ
English
Ayobami Ogundiran ๐
16.1K posts
Ayobami Ogundiran ๐
@codingnninja
๐ ๏ธ Inventing the future of the web with @korasjs | Creator | contributed to @firefoxDevTools | exDev@orgs | React โ๏ธ | AI application Engineer/Researcher
Creating opportunities ๐คฉ Sumali Aฤustos 2015
668 Sinusundan1.7K Mga Tagasunod
*continuation if they're have different positions in the hierarchy
but if they have the same position, then you still need to reconcile.
So what is continuation?
โ
Continuation!
English
have different attributes as that means the duplicate is either an additional list or new children but not update to existing ones.
You can only reconsile element and duplicate with the same attributes but different in values.
If they're different in attributes, then it is
English
โ
Reconciliation
It is a state or UI management system that ensure the latest changes represented by the duplicate
is committed or added to the UI or the state so that users can see changes.
This is how it works.
If the UI is different from its duplicate only in values
Ayobami Ogundiran ๐@codingnninja
โ State In a reactive system, a state is the data that represents the current attributes of an element which is liable to change. Changing a state of an element changes the nature of the element. โ State management It is a system of ensuring consistency in state changes.
English
@markessien I built a library that makes that easier whether on the client or the server.
English
The hardest part about AI development is in feeding the results back to the AI. This requires real skill.
English
๐ช๐พ I am a winner
It seems I have conquered reactivity rendering system.
It is time to ship and be maintaining it.
Now taking on a business and personal challenges. Who is in?
English
"Vibe coding is for those who want to die poor" โ Egbon Adugbo. ๐๐ฝ
English
valid:
<section id="blog">
<section id="articles">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</section>
<button onclick=${do()}>re-render</button>
</section>
So, I only need to throw an error in this case to inform them about the error and fix.
English
๐ช๐พ Adding an element that is not part of the list items is invalid in html
Invalid:
<section id="articles">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<button onclick=${do()}>render</button>
</section>
Button should be out and be wrapped in a tag like below:
Ayobami Ogundiran ๐@codingnninja
๐ช๐พ Done. Only need to ensure buttons or other elements that are not part of the list be move to the bottom of the list. No more <For /> just map, flatmap or whatever for loop. There is no way you will build this system without fully understanding how modern UIs frameworks work
English
I have also found a VSCODE extension for template literals syntax highlighter that works with
nested html in nested arrow functions.
English
๐ช๐พ Done.
Only need to ensure buttons or other elements that are not part of the list be move to the bottom of the list.
No more <For /> just map, flatmap or whatever for loop.
There is no way you will build this system without fully understanding how modern UIs frameworks work
Ayobami Ogundiran ๐@codingnninja
โ Going fully React mode. Finally found a VSCode extension that works with html in nested arrow function with "return". For that reason, I might not ship <For /> but ship only <If /> if I am able to reconcile the target and source components.
English
It is a system that observes or an handles the state of an element as it changes to ensure consistency and trigger other operations in a reactive system.
State management doesn't have to be complex.
What matters is consistent state update and triggering of other operations.
English
โ
State
In a reactive system, a state is the data that represents the current attributes of an element which is liable to change.
Changing a state of an element changes the nature of the element.
โ
State management
It is a system of ensuring consistency in state changes.
Ayobami Ogundiran ๐@codingnninja
โ Nodes duplication I reinvent React and this is from my experience. Building re-rendering capable system requires nodes duplication as VDOM, GRAPH or DOM because it enables re-rendering system. Your main nodes is for UI and its duplicate for update. This enables re-renders
English
For example,
You have <div> Ayo </div>
and it will be duplicated and be added to a VDOM, DOM or GRAHP before or upon user interactions.
English
A library like solid.js stores its node duplicates in a graph and koras uses DOM.
It is impossible to build a reactive UI without node duplication because there is no other way to handle state changes.
English
โ
Nodes duplication
I reinvent React and this is from my experience.
Building re-rendering capable system requires nodes duplication as VDOM, GRAPH or DOM
because it enables re-rendering system. Your main nodes is for UI and its duplicate for update.
This enables re-renders
English
Don't write regex, write parsers instead.
And never trust regex from Ai โ
Cory House@housecor
Iโve never been great at regex. But now, AI generates it for me. It writes tests for each regex it generates, and quickly explains existing regexes too. So, regex mastery doesnโt feel that useful anymore.
English
Ayobami Ogundiran ๐ nag-retweet
โ
You're imposters.
I don't know why developers worry about imposter syndrome.
All of you are imposters. You have been copying and pasting since the days of paper.
It is not new during Ai era. You people are imposters faking it to be seen as real engineers.
English