UI-કિટથી ડિઝાઇન સિસ્ટમ સુધી

આઇવી ઓનલાઇન સિનેમા અનુભવ

જ્યારે 2017 ની શરૂઆતમાં અમે અમારી પોતાની ડિઝાઇન-ટુ-કોડ ડિલિવરી સિસ્ટમ બનાવવા વિશે સૌપ્રથમ વિચાર્યું, ઘણા પહેલાથી જ તેના વિશે વાત કરી રહ્યા હતા અને કેટલાક તે કરી રહ્યા હતા. જો કે, આજની તારીખે ક્રોસ-પ્લેટફોર્મ ડિઝાઇન સિસ્ટમ્સ બનાવવાના અનુભવ વિશે બહુ ઓછું જાણીતું છે, અને ડિઝાઇન અમલીકરણની પ્રક્રિયાને પહેલેથી જ કાર્યરત ઉત્પાદનમાં રૂપાંતરિત કરવા માટેની તકનીકો અને પદ્ધતિઓનું વર્ણન કરતી કોઈ સ્પષ્ટ અને સાબિત વાનગીઓ નથી. અને "કોડમાંના ઘટકો" દ્વારા તેઓનો અર્થ ઘણીવાર ખૂબ જ અલગ વસ્તુઓ થાય છે.

દરમિયાન, કંપનીએ વર્ષ-દર વર્ષે તેના સ્ટાફને બમણો કર્યો - ડિઝાઇન વિભાગને માપવા અને વિકાસ માટે લેઆઉટ બનાવવા અને સ્થાનાંતરિત કરવાની પ્રક્રિયાઓને ઑપ્ટિમાઇઝ કરવી જરૂરી હતી. અમે આ બધાને પ્લેટફોર્મના "ઝૂ" દ્વારા ગુણાકાર કરીએ છીએ જેને સપોર્ટ કરવાની જરૂર છે, અને અમને બેબીલોનીયન રોગચાળાનું પ્રતીક મળે છે, જે "સામાન્ય રીતે" કરવા અને આવક પેદા કરવા માટે સક્ષમ નથી. પ્લેટફોર્મ્સનો વિકાસ ઘણીવાર સમાંતર રીતે આગળ વધતો હતો, અને સમાન કાર્યક્ષમતા કેટલાક મહિનાના વિરામ સાથે વિવિધ પ્લેટફોર્મ્સ પર પ્રકાશિત થઈ શકે છે.


દરેક પ્લેટફોર્મ માટે અલગ લેઆઉટ સેટ

પરંપરાગત રીતે, અમે એવી સમસ્યાઓથી શરૂઆત કરી હતી કે ડિઝાઇન સિસ્ટમ તેની ડિઝાઇન માટેની જરૂરિયાતોને ઉકેલવામાં અને ઘડવામાં મદદ કરશે. એકીકૃત વિઝ્યુઅલ લેંગ્વેજ બનાવવા ઉપરાંત, લેઆઉટ અને ડેવલપમેન્ટની ઝડપ વધારવા અને એકંદરે ઉત્પાદનની ગુણવત્તામાં સુધારો કરવા ઉપરાંત, ડિઝાઇનને શક્ય તેટલું એકીકૃત કરવું આવશ્યક હતું. આ જરૂરી છે જેથી અમારા તમામ પ્લેટફોર્મ પર એકસાથે કાર્યક્ષમતાનો વિકાસ શક્ય બને: વેબ, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - તે દરેક પર અલગથી કામ કર્યા વિના. અને અમે તે કર્યું!

ડિઝાઇન → ડેટા

જ્યારે પ્રોડક્ટ અને ડેવલપમેન્ટ વિભાગો વચ્ચે મૂળભૂત સમજૂતીઓ થઈ ગઈ, ત્યારે અમે ટેક્નોલોજી સ્ટેક પસંદ કરવા બેઠા અને સમગ્ર પ્રક્રિયાની વિગતો - લેઆઉટથી લઈને રિલીઝ સુધી કામ કર્યું. ડિઝાઇનને વિકાસમાં સ્થાનાંતરિત કરવાની પ્રક્રિયાને સંપૂર્ણપણે સ્વચાલિત કરવા માટે, અમે લેઆઉટ સાથે સ્કેચ ફાઇલોમાંથી સીધા જ ઘટક પરિમાણોને પાર્સ કરવાનો વિકલ્પ શોધી કાઢ્યો છે. તે બહાર આવ્યું છે કે અમને જરૂરી કોડના ટુકડાઓ શોધવા અને અમને જરૂરી પરિમાણો કાઢવા એ એક જટિલ અને જોખમી ઉપક્રમ હતું. સૌપ્રથમ, ડિઝાઇનરોએ સ્રોત કોડના તમામ સ્તરોને નામ આપવામાં અત્યંત સાવચેત રહેવું પડશે, બીજું, આ ફક્ત સરળ ઘટકો માટે જ કાર્ય કરે છે, અને ત્રીજું, કોઈ અન્યની તકનીક અને મૂળ સ્કેચ લેઆઉટની કોડ સ્ટ્રક્ચર પરની અવલંબન સમગ્રના ભાવિને જોખમમાં મૂકે છે. પ્રોજેક્ટ અમે આ ક્ષેત્રમાં ઓટોમેશન છોડી દેવાનું નક્કી કર્યું. આ રીતે ડિઝાઇન સિસ્ટમ ટીમમાં પ્રથમ વ્યક્તિ દેખાયો, જેનું ઇનપુટ ડિઝાઇન લેઆઉટ છે, અને આઉટપુટ એ ઘટકોના તમામ પરિમાણોનું વર્ણન કરતો ડેટા છે અને અણુ ડિઝાઇન પદ્ધતિ અનુસાર વંશવેલો ક્રમાંકિત છે.

ડેટા ક્યાં અને કેવી રીતે સંગ્રહિત કરવો, તેને વિકાસમાં કેવી રીતે સ્થાનાંતરિત કરવું અને અમે સપોર્ટ કરીએ છીએ તે તમામ પ્લેટફોર્મ પર વિકાસમાં તેનું અર્થઘટન કેવી રીતે કરવું તે માત્ર કરવાનું બાકી હતું. સાંજ સુસ્ત થવાનું બંધ થઈ ગયું... દરેક પ્લેટફોર્મ પરથી ડિઝાઇનર્સ અને ટીમ લીડ્સ ધરાવતા કાર્યકારી જૂથની નિયમિત બેઠકોનું પરિણામ નીચે મુજબના કરાર હતા.

અમે વિઝ્યુઅલને અણુ તત્વોમાં મેન્યુઅલી પાર્સ કરીએ છીએ: ફોન્ટ, રંગો, પારદર્શિતા, ઇન્ડેન્ટ્સ, રાઉન્ડિંગ્સ, ચિહ્નો, ચિત્રો અને એનિમેશન માટે અવધિ. અને અમે આ બટનો, ઇનપુટ્સ, ચેકબોક્સ, બેંક કાર્ડ વિજેટ્સ વગેરેમાંથી એકત્ર કરીએ છીએ. અમે ચિહ્નો સિવાય, કોઈપણ સ્તરની શૈલીઓને બિન-અર્થપૂર્ણ નામો અસાઇન કરીએ છીએ, ઉદાહરણ તરીકે, શહેરોના નામ, અપ્સરાઓના નામ, પોકેમોન, કાર બ્રાન્ડ્સ... ફક્ત એક જ શરત છે - સૂચિ પહેલા ખતમ ન થવી જોઈએ, શૈલીઓ કેવી રીતે સમાપ્ત થાય છે - શો જવો જોઈએ! તમારે સિમેન્ટિક્સથી દૂર ન થવું જોઈએ, જેથી તમારે ઉદાહરણ તરીકે "નાના" અને "મધ્યમ" વચ્ચે મધ્યમ બટન ઉમેરવાની જરૂર નથી.

દ્રશ્ય ભાષા

ડેવલપર્સને તમામ પ્લેટફોર્મને અનુકુળ હોય તે રીતે ડેટા કેવી રીતે સંગ્રહિત અને ટ્રાન્સફર કરવો તે વિશે વિચારવાનું બાકી હતું અને ડિઝાઇનને એવા ઇન્ટરફેસ તત્વો ડિઝાઇન કરવાના હતા જે સારા દેખાઈ શકે અને સમર્થિત ઉપકરણોના સમગ્ર કાફલામાં અસરકારક રીતે કાર્ય કરી શકે.

અગાઉ, અમે વિન્ડોઝ 10 માટેની એપ્લિકેશનમાં મોટાભાગના ડિઝાઇન ઘટકોનું "પરીક્ષણ" કરવામાં પહેલેથી જ વ્યવસ્થાપિત હતા, જે તે સમયે અમારા માટે એક નવું પ્લેટફોર્મ હતું, એટલે કે, તેને "શરૂઆતથી" રેન્ડરિંગ અને વિકાસની જરૂર હતી. તેને દોરવાથી, અમે મોટાભાગના ઘટકોને તૈયાર કરવા અને પરીક્ષણ કરવામાં અને તેમાંથી કયાને ભાવિ Eevee ડિઝાઇન સિસ્ટમમાં સમાવવાના હતા તે સમજી શક્યા. આવા સેન્ડબોક્સ વિના, આવો અનુભવ પહેલાથી કાર્યરત પ્લેટફોર્મ્સ પર મોટી સંખ્યામાં પુનરાવર્તનો દ્વારા જ મેળવી શકાય છે, અને આમાં એક વર્ષથી વધુ સમય લાગશે.

વિવિધ પ્લેટફોર્મ્સ પર સમાન ઘટકોનો પુનઃઉપયોગ કરવાથી લેઆઉટની સંખ્યા અને ડિઝાઇન સિસ્ટમના ડેટાની શ્રેણીમાં નોંધપાત્ર ઘટાડો થાય છે, તેથી ડિઝાઇનને વધુ એક સમસ્યા હલ કરવાની હતી, જેનું અગાઉ ઉત્પાદન ડિઝાઇન અને વિકાસની પ્રથાઓમાં વર્ણન કરવામાં આવ્યું ન હતું - ઉદાહરણ તરીકે, કેવી રીતે, શું ફોન અને ટેબ્લેટ માટેનું બટન ટીવી પર ફરીથી વાપરી શકાય છે? અને આવા વિવિધ પ્લેટફોર્મ્સ પરના ફોન્ટ્સ અને તત્વોના કદ સાથે આપણે શું કરવું જોઈએ?

દેખીતી રીતે, ક્રોસ-પ્લેટફોર્મ મોડ્યુલર ગ્રીડ ડિઝાઇન કરવી જરૂરી હતી જે દરેક ચોક્કસ પ્લેટફોર્મ માટે જરૂરી ટેક્સ્ટ અને એલિમેન્ટ માપો સેટ કરશે. ગ્રીડ માટે પ્રારંભિક બિંદુ તરીકે, અમે ચોક્કસ સ્ક્રીન પર જોવા માંગતા મૂવી પોસ્ટર્સનું કદ અને સંખ્યા પસંદ કરી અને તેના આધારે, અમે ગ્રીડ કૉલમ બનાવવા માટે એક નિયમ ઘડ્યો, જો કે એક કૉલમની પહોળાઈ સમાન હોય. પોસ્ટરની પહોળાઈ સુધી.

હવે આપણે બધી મોટી સ્ક્રીનને સમાન લેઆઉટ સાઈઝમાં લાવવાની અને તેમને સામાન્ય ગ્રીડમાં ફિટ કરવાની જરૂર છે. Apple TV અને Roku 1920x1080, Android TV - 960x540, સ્માર્ટ ટીવી, વિક્રેતા પર આધાર રાખીને, સમાન હોય છે, પરંતુ ક્યારેક 1280x720. જ્યારે એપ પૂરી HD સ્ક્રીન પર રેન્ડર અને પ્રદર્શિત થાય છે, ત્યારે 960 ને 2 વડે ગુણાકાર કરવામાં આવે છે, 1280 ને 1,33 વડે ગુણાકાર કરવામાં આવે છે અને 1920 આઉટપુટ છે.

કંટાળાજનક વિગતોને અવગણીને, અમે નિષ્કર્ષ પર પહોંચ્યા કે સામાન્ય રીતે તમામ સ્ક્રીનો, જેમાં ટેલિવિઝન સ્ક્રીનનો સમાવેશ થાય છે, તત્વો અને તેમના કદના સંદર્ભમાં, એક ડિઝાઇન લેઆઉટ દ્વારા આવરી લેવામાં આવે છે, અને તમામ ટેલિવિઝન સ્ક્રીનો સામાન્ય ક્રોસ-પ્લેટફોર્મ ગ્રીડનો વિશેષ કેસ છે, અને સરેરાશ ટેબ્લેટ અથવા ડેસ્કટોપની જેમ પાંચ કે છ કૉલમ ધરાવે છે. વિગતોમાં કોને રસ છે, ટિપ્પણીઓમાં જાઓ.

બધા પ્લેટફોર્મ માટે સિંગલ UI

હવે, નવી સુવિધા દોરવા માટે, અમારે દરેક પ્લેટફોર્મ માટે લેઆઉટ બનાવવાની જરૂર નથી, ઉપરાંત તે દરેક માટે અનુકૂલનક્ષમતા વિકલ્પો. કોઈપણ પહોળાઈના બધા પ્લેટફોર્મ અને ઉપકરણો માટે એક લેઆઉટ અને તેની અનુકૂલનક્ષમતા બતાવવા માટે તે પૂરતું છે: ફોન - 320-599, બાકીનું બધું - 600-1280.

ડેટા → વિકાસ

અલબત્ત, અમે સંપૂર્ણ રીતે એકીકૃત ડિઝાઇન હાંસલ કરવા માંગીએ છીએ, દરેક પ્લેટફોર્મની પોતાની વિશિષ્ટ વિશેષતાઓ છે. વેબ અને સ્માર્ટ ટીવી બંને ReactJS + TypeScript સ્ટેકનો ઉપયોગ કરતા હોવા છતાં, સ્માર્ટ ટીવી એપ્લિકેશન લેગસી વેબકિટ અને પ્રેસ્ટો ક્લાયન્ટ્સ પર ચાલે છે અને તેથી વેબ સાથે શૈલીઓ શેર કરી શકતી નથી. અને ઇમેઇલ ન્યૂઝલેટર્સને ટેબ્યુલર લેઆઉટ સાથે કામ કરવા માટે સંપૂર્ણપણે ફરજ પાડવામાં આવે છે. તે જ સમયે, બિન-એચટીએમએલ પ્લેટફોર્મ્સમાંથી કોઈ પણ રીએક્ટ નેટિવ અથવા તેના કોઈપણ એનાલોગનો ઉપયોગ કરતું નથી અથવા તેનો ઉપયોગ કરવાની યોજના નથી, પ્રદર્શનમાં ઘટાડો થવાના ડરથી, કારણ કે અમારી પાસે ઘણા બધા કસ્ટમ લેઆઉટ, જટિલ અપડેટ લોજિક, છબીઓ અને વિડિયોઝ સાથે સંગ્રહ છે. તેથી, તૈયાર સીએસએસ શૈલીઓ અથવા પ્રતિક્રિયા ઘટકો પહોંચાડવાની સામાન્ય યોજના અમારા માટે યોગ્ય નથી. તેથી, અમે અમૂર્ત ઘોષણાત્મક સ્વરૂપમાં મૂલ્યોનું વર્ણન કરીને JSON ફોર્મેટમાં ડેટા ટ્રાન્સમિટ કરવાનું નક્કી કર્યું.

તેથી મિલકત rounding: 8 વિન્ડોઝ 10 એપમાં કન્વર્ટ થાય છે CornerRadius="8", વેબ - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
મિલકત offsetTop: 12 વિવિધ કેસોમાં સમાન વેબ ક્લાયંટ તરીકે અર્થઘટન કરી શકે છે top, margin-top, padding-top અથવા transform

વર્ણનની ઘોષણાત્મકતા એ પણ સૂચિત કરે છે કે જો પ્લેટફોર્મ તકનીકી રીતે મિલકત અથવા તેના મૂલ્યનો ઉપયોગ કરી શકતું નથી, તો તે તેને અવગણી શકે છે. પરિભાષાના સંદર્ભમાં, અમે એક પ્રકારની એસ્પેરાન્ટો ભાષા બનાવી છે: કેટલીક Android માંથી લેવામાં આવી હતી, કેટલીક SVGમાંથી, કેટલીક CSS માંથી.

જો કોઈ ચોક્કસ પ્લેટફોર્મ પર તમારે તત્વોને અલગ રીતે પ્રદર્શિત કરવાની જરૂર હોય, તો અમે સંબંધિત ડેટા જનરેશનને અલગ JSON ફાઇલના રૂપમાં ટ્રાન્સફર કરવાની ક્ષમતા લાગુ કરી છે. ઉદાહરણ તરીકે, સ્માર્ટ ટીવી માટે "ફોકસમાં" સ્થિતિ પોસ્ટર હેઠળના ટેક્સ્ટની સ્થિતિમાં ફેરફાર સૂચવે છે, જેનો અર્થ છે કે આ પ્લેટફોર્મ માટે "ઇન્ડેન્ટ" પ્રોપર્ટીના મૂલ્યમાં આ ઘટક તેને જરૂરી 8 ઇન્ડેન્ટેશન પોઇન્ટ સમાવશે. જો કે આ ડિઝાઈન સિસ્ટમના ઈન્ફ્રાસ્ટ્રક્ચરને જટિલ બનાવે છે, તે સ્વતંત્રતાની વધારાની ડિગ્રી આપે છે, જે અમને પ્લેટફોર્મ્સની દ્રશ્ય "વિષમતા" નું સંચાલન કરવાની તક આપે છે, અને અમે બનાવેલા આર્કિટેક્ચરને બંધક બનાવતા નથી.

ચિત્રો

ડિજિટલ પ્રોડક્ટમાં આઇકોનોગ્રાફી હંમેશા વિશાળ હોય છે અને સૌથી સરળ સબપ્રોજેક્ટ નથી, જેને ઘણીવાર અલગ ડિઝાઇનરની જરૂર પડે છે. ત્યાં હંમેશા ઘણા બધા ગ્લિફ્સ હોય છે, તેમાંના દરેકમાં ઘણા કદ અને રંગો હોય છે, અને પ્લેટફોર્મને સામાન્ય રીતે વિવિધ ફોર્મેટમાં તેની જરૂર હોય છે. સામાન્ય રીતે, આ બધું ડિઝાઇન સિસ્ટમમાં ન મૂકવાનું કોઈ કારણ નહોતું.

Glyphs SVG વેક્ટર ફોર્મેટમાં લોડ થાય છે, અને રંગ મૂલ્યો આપમેળે ચલો સાથે બદલાઈ જાય છે. ક્લાયન્ટ એપ્લિકેશનો તેમને કોઈપણ ફોર્મેટ અને રંગમાં - ઉપયોગ માટે તૈયાર પ્રાપ્ત કરી શકે છે.

પૂર્વાવલોકન

JSON ડેટાની ટોચ પર, અમે ઘટકોનું પૂર્વાવલોકન કરવા માટે એક સાધન લખ્યું છે - એક JS એપ્લિકેશન જે તેના માર્કઅપ અને શૈલી જનરેટર દ્વારા ફ્લાય પર JSON ડેટાને પસાર કરે છે, અને બ્રાઉઝરમાં દરેક ઘટકની વિવિધ ભિન્નતા દર્શાવે છે. અનિવાર્યપણે, પૂર્વાવલોકન એ પ્લેટફોર્મ એપ્લિકેશન્સ જેવું જ ક્લાયંટ છે અને તે જ ડેટા સાથે કામ કરે છે.

ચોક્કસ ઘટક કેવી રીતે કાર્ય કરે છે તે સમજવાની સૌથી સરળ રીત તેની સાથે ક્રિયાપ્રતિક્રિયા કરવી છે. તેથી, અમે સ્ટોરીબુક જેવા ટૂલ્સનો ઉપયોગ કર્યો નથી, પરંતુ એક ઇન્ટરેક્ટિવ પૂર્વાવલોકન કર્યું છે - તમે સ્પર્શ કરી શકો છો, નિર્દેશ કરી શકો છો, ક્લિક કરી શકો છો... જ્યારે ડિઝાઇન સિસ્ટમમાં નવો ઘટક ઉમેરતા હોય, ત્યારે તે પૂર્વાવલોકનમાં દેખાય છે જેથી પ્લેટફોર્મ પર ધ્યાન કેન્દ્રિત કરવા માટે કંઈક હોય ત્યારે તેનો અમલ.

Документация

JSON ના સ્વરૂપમાં પ્લેટફોર્મને પૂરા પાડવામાં આવેલ ડેટાના આધારે, ઘટકો માટે દસ્તાવેજીકરણ આપમેળે જનરેટ થાય છે. તેમાંના દરેકમાં ગુણધર્મો અને સંભવિત પ્રકારનાં મૂલ્યોની સૂચિ વર્ણવેલ છે. ઓટો-જનરેશન પછી, માહિતી જાતે સ્પષ્ટ કરી શકાય છે અને ટેક્સ્ટ વર્ણન ઉમેરી શકાય છે. પૂર્વાવલોકન અને દસ્તાવેજીકરણ દરેક ઘટકના સ્તરે એકબીજા સાથે સંદર્ભિત છે, અને દસ્તાવેજીકરણમાં સમાવિષ્ટ તમામ માહિતી વિકાસકર્તાઓ માટે વધારાની JSON ફાઇલોના સ્વરૂપમાં ઉપલબ્ધ છે.

અવમૂલ્યન કરનાર

અન્ય આવશ્યકતા એ સમયાંતરે હાલના ઘટકોને બદલવા અને અપડેટ કરવાની ક્ષમતા હતી. ડિઝાઈન સિસ્ટમે વિકાસકર્તાઓને જણાવવાનું શીખી લીધું છે કે કઈ પ્રોપર્ટીઝ અથવા તો આખા ઘટકોનો ઉપયોગ કરી શકાતો નથી અને તેઓ બધા પ્લેટફોર્મ પર ઉપયોગમાં લેવાતા નથી તે જલદી તેમને દૂર કરે છે. આ પ્રક્રિયામાં હજુ પણ ઘણી બધી "મેન્યુઅલ" મજૂરી છે, પરંતુ અમે સ્થિર નથી.

ગ્રાહક વિકાસ

નિઃશંકપણે, અમે સપોર્ટ કરીએ છીએ તે તમામ પ્લેટફોર્મના કોડમાં ડિઝાઇન સિસ્ટમ ડેટાનું અર્થઘટન એ સૌથી જટિલ તબક્કો હતો. જો, ઉદાહરણ તરીકે, વેબ પર મોડ્યુલર ગ્રીડ કંઈક નવું નથી, તો પછી iOS અને Android માટે મૂળ મોબાઇલ એપ્લિકેશનના વિકાસકર્તાઓએ તેની સાથે કેવી રીતે જીવવું તે શોધતા પહેલા સખત મહેનત કરી.

iOS એપ્લિકેશન સ્ક્રીનોને લેઆઉટ કરવા માટે, અમે iviUIKit દ્વારા પૂરી પાડવામાં આવેલ બે મૂળભૂત પદ્ધતિઓનો ઉપયોગ કરીએ છીએ: તત્વોનું મફત લેઆઉટ અને તત્વોના સંગ્રહનું લેઆઉટ. અમે VIPER નો ઉપયોગ કરીએ છીએ, અને iviUIKit સાથેની તમામ ક્રિયાપ્રતિક્રિયાઓ વ્યુમાં કેન્દ્રિત છે, અને Apple UIKit સાથેની મોટાભાગની ક્રિયાપ્રતિક્રિયા iviUIKitમાં કેન્દ્રિત છે. તત્વોનું કદ અને ગોઠવણી કૉલમ અને સિન્ટેક્ટિક સ્ટ્રક્ચર્સના સંદર્ભમાં નિર્દિષ્ટ કરવામાં આવે છે જે મૂળ iOS SDK અવરોધોની ટોચ પર કાર્ય કરે છે, તેમને વધુ વ્યવહારુ બનાવે છે. UICollectionView સાથે કામ કરતી વખતે આ ખાસ કરીને અમારા જીવનને સરળ બનાવે છે. અમે લેઆઉટ માટે ઘણા વૈવિધ્યપૂર્ણ આવરણો લખ્યા છે, જેમાં ખૂબ જટિલ છે. ત્યાં ન્યૂનતમ ક્લાયંટ કોડ હતો અને તે ઘોષણાત્મક બન્યો.

એન્ડ્રોઇડ પ્રોજેક્ટમાં સ્ટાઇલ જનરેટ કરવા માટે, અમે ગ્રેડલનો ઉપયોગ કરીએ છીએ, ડિઝાઇન સિસ્ટમ ડેટાને XML ફોર્મેટમાં સ્ટાઇલમાં ફેરવીએ છીએ. તે જ સમયે, અમારી પાસે વિવિધ સ્તરોના ઘણા જનરેટર છે:

• પાયાની. ઉચ્ચ સ્તરના જનરેટર માટે આદિમનો ડેટા વિશ્લેષણ કરવામાં આવે છે.
• સંસાધન. ચિત્રો, ચિહ્નો અને અન્ય ગ્રાફિક્સ ડાઉનલોડ કરો.
• ઘટક. તે દરેક ઘટક માટે લખાયેલ છે, જે વર્ણવે છે કે કયા ગુણધર્મો અને તેમને શૈલીમાં કેવી રીતે અનુવાદિત કરવું.

એપ્લિકેશન રિલીઝ

ડિઝાઇનરોએ નવો ઘટક દોર્યા પછી અથવા અસ્તિત્વમાં છે તે ફરીથી ડિઝાઇન કર્યા પછી, આ ફેરફારો ડિઝાઇન સિસ્ટમમાં આપવામાં આવે છે. દરેક પ્લેટફોર્મના વિકાસકર્તા ફેરફારોને સમર્થન આપવા માટે તેમની કોડ જનરેશનને ફાઇન-ટ્યુનિંગ કરી રહ્યા છે. આ પછી, જ્યાં આ ઘટકની જરૂર હોય ત્યાં નવી કાર્યક્ષમતાના અમલીકરણમાં તેનો ઉપયોગ કરી શકાય છે. આમ, ડિઝાઇન સિસ્ટમ સાથે ક્રિયાપ્રતિક્રિયા વાસ્તવિક સમયમાં થતી નથી, પરંતુ ફક્ત નવા પ્રકાશનોને એસેમ્બલ કરતી વખતે. આ અભિગમ ડેટા ટ્રાન્સફર પ્રક્રિયા પર વધુ સારા નિયંત્રણ માટે પણ પરવાનગી આપે છે અને ક્લાયંટ ડેવલપમેન્ટ પ્રોજેક્ટ્સમાં કોડ કાર્યક્ષમતાને સુનિશ્ચિત કરે છે.

પરિણામો

આઈવી ઓનલાઈન સિનેમાના વિકાસને ટેકો આપતી ઈન્ફ્રાસ્ટ્રક્ચરનો ભાગ બનીને ડિઝાઈન સિસ્ટમને એક વર્ષ થઈ ગયું છે અને અમે પહેલાથી જ કેટલાક તારણો કાઢી શકીએ છીએ:

• આ એક મોટો અને જટિલ પ્રોજેક્ટ છે જેને સતત સમર્પિત સંસાધનોની જરૂર હોય છે.
• આનાથી અમને અમારી પોતાની અનન્ય ક્રોસ-પ્લેટફોર્મ વિઝ્યુઅલ લેંગ્વેજ બનાવવાની મંજૂરી મળી જે ઑનલાઇન વિડિઓ સેવાના ઉદ્દેશ્યોને પૂર્ણ કરે છે.
• અમારી પાસે હવે વિઝ્યુઅલી અને ફંક્શનલી લેગિંગ પ્લેટફોર્મ નથી.

આઇવી ડિઝાઇન સિસ્ટમ ઘટકોનું પૂર્વાવલોકન - design.ivi.ru

સોર્સ: www.habr.com