AI சில நொடிகளில் ஒரு இயங்கக்கூடிய React செயலியை உருவாக்க முடியும், மேலும் GeekyAnts போன்ற கருவிகள், வடிவமைப்பு அமைப்பின் (design system) கட்டமைப்பை இழக்காமல், புதிதாக உருவாக்கப்பட்ட குறியீட்டை (code) மீண்டும் Figma-விற்கு கொண்டு வருவதாக உறுதியளிக்கின்றன. வடிவமைப்பு குழுக்கள் AI மூலம் எழுதப்பட்ட குறியீடு தோன்றும் போதெல்லாம் ஆரம்பத்திலிருந்து தொடங்க வேண்டிய கட்டாயத்திற்கு உள்ளாவதால், இந்த உறுதிமொழி முக்கியமானது; இது மறுவடிவமைப்பு நேரம் மற்றும் செலவை அதிகரிக்கிறது.
பல ஆண்டுகளாக, இந்த ஒப்படைப்பு (hand-off) காகிதத்தில் எளிமையாகத் தெரிந்தது: வடிவமைப்பாளர்கள் Figma-வில் திரைகளை உருவாக்கினர், டெவலப்பர்கள் அந்தத் திரைகளை குறியீடாக மாற்றியமைத்தனர், மேலும் ஒவ்வொரு தரப்பும் லேஅவுட்டின் (layout) சொந்த நகலை வைத்திருந்தனர். AI-ஆல் இயக்கப்படும் குறியீடு உருவாக்குநர்கள் அந்தச் சீரான முறையை உடைத்துவிட்டனர். ஒரு AI இயந்திரம் தயார் நிலையில் இயங்கக்கூடிய React திட்டத்தை வழங்குகிறது, ஆனால் அதன் விளைவாக வரும் கூறுகளை (components) அசல் வடிவமைப்பு கோப்பிற்குள் இறக்குமதி செய்ய நேரடியான வழி இல்லை. இதன் விளைவாக, "முதலில் குறியீடு, பிறகு வடிவமைப்பு" (code-first, design-later) என்ற ஒரு கடினமான சுழற்சி உருவாகிறது, இது பகிரப்பட்ட வடிவமைப்பு மொழியைச் சிதைப்பதோடு பராமரிப்புச் செலவையும் அதிகரிக்கிறது.
DOM ஏன் போதுமானதாக இல்லை
பெரும்பாலான ரிவர்ஸ்-இன்ஜினியரிங் (reverse-engineering) கருவிகள், பிரவுசரின் HTML கூறுகளின் பிரதிநிதித்துவமான Document Object Model (DOM)-லிருந்து தொடங்குகின்றன. DOM ஒவ்வொரு காட்சிப் பகுதியையும் ஒரு பொதுவான <div அல்லது <span> ஆக treats செய்கிறது. ஒரு பட்டன் (button) மற்றும் ஒரு கார்டு (card) ஆகியவற்றுக்கு இடையிலான வேறுபாட்டை அதனால் கண்டறிய முடியாது, அல்லது கூறுகளின் ஒரு தொகுப்பு வடிவமைப்பு அமைப்பில் உள்ள ஒரு மாஸ்டர் காம்போனென்ட்டிற்கு (master component) சொந்தமானதா என்பதையும் அது அறியாது. ஒரு பக்கத்தில் பத்து பட்டன்கள் இருக்கும்போது, DOM வெறும் பத்து பெயர் இல்லாத அடுக்குகளை (anonymous layers) மட்டுமே தெரிவிக்கும். அசல் காம்போனென்ட் லைப்ரரியுடனான தொடர்பு மறைந்துவிடுகிறது, இது வடிவமைப்பாளர்களுக்குக் குழுவாக்கப்படாத வடிவங்களின் சிக்கலான தொகுப்பை வழங்குகிறது; இதைச் சரிசெய்வதற்கு, திரையை ஆரம்பத்திலிருந்து மீண்டும் உருவாக்குவதை விட அதிக வேலை தேவைப்படலாம்.
React Fiber ஒரு சிறந்த வரைபடத்தை வழங்குகிறது
React-ன் உள் அட்டவணைப்படுத்தி (internal scheduler), Fiber என்று அழைக்கப்படுகிறது, இது பெயர்கள், பெற்றோர்-பிள்ளை உறவுகள் (parent-child relationships) மற்றும் property bags ஆகியவற்றுடன் கூடிய கூறுகளின் மரத்தைப் (tree of components) பராமரிக்கிறது. ரெண்டர் செய்யப்பட்ட HTML-க்கு பதிலாக Fiber கட்டமைப்பைப் படிப்பதன் மூலம், ஒரு ரிவர்ஸ்-இன்ஜினியரிங் கருவியால் ஒரு குறிப்பிட்ட <div உண்மையில் ஒரு PrimaryButton கூறு என்பதையும், அது ஒரு Header கூறுக்குள் உள்ளது என்பதையும், அதன் நிலையை (state) வரையறுக்கும் ஒரு set of
மேற்பரப்பு மட்டத்திலான DOM-க்கு பதிலாக React-ன் உட்புற Fiber tree-ஐப் படிப்பது, ஒரு கடினமான “முதலில் குறியீடு, பிறகு வடிவமைப்பு” (code-first, design-later) சுழற்சியை ஒரு இருவழிப் பாதையாக மாற்றுகிறது. AI-ஆல் உருவாக்கப்பட்ட செயலிகளை, அவற்றின் component structure-ஐ இழக்காமல் இப்போது மீண்டும் Figma-விற்கு கொண்டு வர முடியும். வடிவமைப்பு விலகல் (design drift) மற்றும் அதிகரித்து வரும் பராமரிப்புச் செலவுகளுடன் போராடும் குழுக்களுக்கு, இந்த மாற்றம் ஒரு குழப்பமான மறுவடிவமைப்புச் சுழற்சிக்கும் (redesign sprint), ஒரு ஒழுக்கமான, component-first பணிப்பாய்வுக்கும் (workflow) இடையிலான வித்தியாசமாக அமையும்.