Svelte JS՝ նոր մոտեցում User Interface ստեղծելու համար

Ողջույն սիրելի ընթերցողներ, այս անգամ մեր React Developer Հայկը BeeWeb-ում արդեն ավանդույթ դարձած Knowledge Sharing-ի ընթացքում թիմին ներկայացրեց  նոր Framework (Svelte JS), որն առաջարկում է նոր մոտեցում  User Interface ստեղծելու համար: Svelte JS-ի ստեղծողը Ռիչ Հարիսն է, ով նաև Rollup-ի հեղինակն է։ Եվ ահա ներկայացնում ենք քննարկման հիմնական բովանդակությունը՝ հուսալով, որ այն օգտակար կլինի շատերիդ համար։ 😊

Այս անգամ ծանոթանալու ենք այնպիսի տեխնոլոգիայի հետ, որը կոչվում է Svelte JS` ի՞նչ է այն, ի՞նչ է անում և ինչու՞ է պետք սովորել հենց Svelte:
Svelte JS-ը լիովին նոր մոտեցում է առաջարկում User Interface ստեղծելու համար։ Ինչպես գիտենք՝ React-ն ու Vue-ն իրենց աշխատանքի մեծ մասը կատարում են browser-ում, մինչդեռ Svelte JS-ը այդ ամենը տեղափոխում է կոմպիլացիայի (build time) ժամանակ։ Svelte JS-ի գլխավոր առանձնահատկությունն այն է, որ այն չունի Virutal DOM:

Բայց նախ եկեք վերհիշենք մեզ արդեն հայտնի 3-ը` (React, Angular, Vue)

✔️Angular – Լիարժեք Framework է և ունի ամենինչ իր միջից լիարժեք հավելված պատրաստելու համար
✔️React – Արդեն բոլորին ծանոթ UI գրադարան է
✔️Vue – Պրոգրեսիվ Javascript Framework է

✔️Svelte JS – ը կիբերնետիկորեն բարելավված վեբ հավելված է։

Ինչ-որ առումով Svelte-ը համարվում է մրցակից և առաջարկում է ուրիշ լուծումներ։ Կարող է հարց ծագել՝ ինչու՞ սովորել նոր տեխնոլոգիաներ, եթե արդեն իսկ կան նման տեխնոլոգիաներ, որոնք հաջողության են հասել, զարգանում են և ապահովում են շատ աշխատատեղեր։
Սկզբի համար եկեք պատկերացնենք, որ ստեղծում ենք հավելված՝ օգտագործելով React, Angular կամ Vue։ Տվյալ հավելվածը պատրաստելիս Production-ի՝ Bundle-ի մեջ ընկնում է հենց ինքը Framework-ի կոդը և մեր կոդը։ Վերջնական մենք ստանում ենք այն, որ Bundle-ն ունենում է Framework-ի ամբողջ ծավալը։ Եվ այդպես աշխատում են բոլոր Framework-ները։
Svelte-ն աշխատում է այլ կերպ՝ մենք ծրագրավորում ենք ինչպես սովորական Framework-ում, բայց նա ուղղակի կոմպիլացնում է այն ինչ գրել ենք և վերջնական Bundle-ում ունենում ենք մաքուր JS կոդ առանց այն կոդի, որը պետք է Framework-ի աշխատանքի համար։

 Ծավալ

Մենք ուղարկում ենք չափից շատ կոդ մեր user-ներին։ Կան մի շարք հետազոտություններ, որոնք փաստում են՝ որպեսզի  հավելվածը նորմալ աշխատի բոլոր տեսակի սարքերի վրա, իր ծավալը պետք է լինի մոտավորապես 130-170 կբ, ոչ միայն JS կոդը, այլ նաև html/css-ը։ Դրան շատ դժվար է հասնել, եթե Framework-ն առանց կոդ գրելու արդեն իսկ 50 կբ է։
Եկեք պատկերացնենք այս ամենը Snake խաղի օրինակի վրա:

snake

Ավելի պատկերավոր լինելու համար օրինակ եմ բերել կոդով, որտեղ օգտագործված են input-ներ` ստանալու համար հետևյալ արդյունքը՝


1+2=3

Արդյունավետություն

Հաջորդը անդրադառնանք արդյունավետությանը։
Ունենում ենք ավելորդ գործողություն կոդի և browser-ի միջև։ Այսինքն ինչքան աբստրակտ բաներ կան  մեզ ավելի է հարմար  դարձնում կոդը գրելուն, բայց միևնույն ժամանակ մաքուր JS կոդ գրելուց հեռու է, ու այդ պատճառով ավելի շատ ռեսուրս է պետք հավելվածին։

Համատեղելիություն

Կոմպոնենտներով Framework-ները հայտարարել էին, որ լուծում են այնպիսի խնդիրներ, որ կարող ենք գրել առանձին կոմպոնենտ ու օգտագործել տարբեր հավելվածներում, բայց  օրինակ ՝ եթե ունենք calendar, և օգտագործում ենք React-ով մի քանի պրոյեկտների մեջ, ինչ որ պահից սկսած որոշում ենք այդ calendar-ը օգտագործել օրինակ՝ Angular-ում, դա հնարավոր չի լինի անել։ Իսկ Svelte JS-ի դեպքում մեր գրած կոդը հնարավոր է տեղափոխել այլ Framework-ներ։

Code splitting & Tree shaking

Կա  այսպիսի հայտնի հասկացություն։ Քանի որ Bundle JS-ում հայտնվում է  բացի մեր գրած կոդիցայ նաև Framework-ը ամբողջությամբ, այս մեթոդը հնարավոր չէ պատշաճ կերպով կիրառել։ Բայց Svelte JS-ի դեպքում հնարավոր է շատ ավելի լավ, քանի որ մենք վերջնական կոդում ունենում ենք միայն մաքուր JS կոդ՝ առանց Framework-ի առկայության։

Feature Cost

Կա ևս մի հետաքրքիր բան, դա Feature Cost-ն է։ Ցանկացած Framework իր մեջ ունի շատ բաներ, որոնք մեզ հարկավոր չեն, այսինքն մեծամասնությանը հարկավոր է բայց ինձ հարկավոր չէ, ու քանի որ մեծամասնությանը հարկավոր է, ստիպված եմ ես էլ  ինձ հետ քարշ տալ: Այս ամենը Svelte-ը լուծում է:

Ի՞նչ է Svelte-ը և ի՞նչ է լավացնում

✔️Build-time UI Framework
Այն գոյություն ունի միայն ստեղծելու ընթացքում
✔️ Compile-time static analyzer
Կոմպիլացիայի ընթացքում աշխատում է ստատիկ անալիզատորը, որը թույլ է տալիս անել այդ կախարդանքը, ինչով էլ հայտնի է Svelte-ը
✔️Ahead-of-time (AOT) compiler
Վերջնական կոդը որ մենք գրում ենք Svelte-ով  բարձր մակարդակի կոդ է, որը կոմպիլացիա է լինում ու դառնում է ցածր մակարդակի կոդ ու ավելի էֆֆեկտիվ։

Եվ այստեղ հարց է առաջանում՝ արդյո՞ք Svelte-ը ամենալավ հայտնագործությունն է framework-ների աշխարհում։😎

Runtime կամ առանց runtime
Runtime-ի մասին գիտենք բոլորս։
Եկեք դիտարկենք այն որպես հավելվածը շրջապատող միջոց։ Այսինքն եթե գրում ենք մաքուր JS-ով, runtime-ի աշխատանքի համար պետք է DOM, այսինքն հարկավոր է browser-ը DOM-ով։ Եթե գրում ենք React-ով, runtime-ի համար պետք է լինում առնվազն DOM, React, React Dom, այսինքն կոդի ամեն մի կտորը կախված է Runtime-ից։

Հաջորդ օրինակը ավելի պատկերավոր՝


Ունենք ինչ-որ state, որը փոխել ենք, հաջորդ քայլում գալիս է ընդհանուր կոմպոնենտի թարմացումը, համեմատվում են իրար հետ, հանվում է այն, ինչը փոխվել է ու թարմանում է իրական DOM-ը։ Վերջնական ստացվեց էֆեկտիվ քանի որ հասկացանք, թե որ մասն է փոխվել, բայց եկեք պատկերացնենք, եթե մեջտեղի երկու գործողությունը չլինի։

Svelte-ը կամպիլացնում է այդ ամենը։
Svelte-ի հիմնական գաղափարներից մեկն այն է, որ մենք երբեք չենք գրել շատ մեծ հավելված մաքուր JS-ով, որովհետև երբ մենք գրում ենք մաքուր JS-ով  կոդ, ինչ որ պահից հոգնում ենք այդքան շատ կրկնվող կոդից և DOM-ի հետ աշխատանքից։

Svelte JS-ը աշխարհում միակն է, որով կարողանում ենք գրել մաքուր JS-ով հավելված ու վերջնական կոդը լինում է շատ հստակ։

Իսկ այժմ  մի փոքր անդրադառնանք կոդին․ օրինակ React-ը ինչ որ հայտարարված արժեք թարմացնելու համար կանչում է API, իսկ Svelte-ը ընդամենը օգտագործում է վերագրելու նշանը՝

let name
name=beeWeb

Ի տարբերություն React-ի, որը կոդը բաժանում է Virtual DOM-ում, Svelte-ը անում է build-time ժամանակում։

Շատ կարևոր առավելություն ևս, Svelte-ում հնարավոր է  վերադարձնել վերևի մակարդակի մի քանի էլեմենտ, իսկ օրինակ React կամ Vue-ում միայն մեկը, օրինակ՝

React - <></>
Vue- <template></template>

Նշեմ, որ Svelte-ը  արդեն պաշտոնապես աջակցվում է Vercel-ի կողմից։
Գոյություն ունեն նաև Svelte kit և Svelte Native:

Այսպիսով ամփոփենք Svelte JS-ի առավելությունները՝

✔️Վերջնական կոդը ոչնչից կախված չէ
✔️Փոքր ծավալ
✔️Մուտքի ցածր շեմ
✔️Ստատիկ անալիզի ու կոմպիլացիայի հզորություն
✔️Code-splitting & tree-shaking

Svelte-ը փոխում է պատկերացումները ներկայիս Framework-ների մասին։Անցնել Svelte-ի թե ոչ ՝ որոշում է յուրաքանչյուրը, եթե ուզում եք ստեղծել փոքր հավելված, Svelte-ը շատ հարմար է դրա համար, իսկ մեծ հավելվածներ ստեղծելու համար, խորհուրդ կտամ սպասել որոշակի ժամանակ, քանի որ պատրաստի որոշումները Framework-ում օգտագործելու համար դեռևս շատ քիչ են։

Շնորհակալություն Հայկ, քո գիտելիքներով կիսվելու համար։ 🙂

Կարդացեք նաև՝
Manual QA-ից Automation QA
Building your own MVP (MVP development process)

 

 

 

Share with love

SUBSCRIBE

Subscribe to BeeWeb's blog and get our latest news right in your inbox.

FOLLOW US