Ողջույն սիրելի ընթերցողներ, այս անգամ մեր 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 խաղի օրինակի վրա:
Ավելի պատկերավոր լինելու համար օրինակ եմ բերել կոդով, որտեղ օգտագործված են input-ներ` ստանալու համար հետևյալ արդյունքը՝ (տես՝ նկար 1)
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)