Ես շատ եմ գրել   մասին: Ես այնքան ոգևորված էի, որ ես գրեցի դրա մասին   (բացի Վաադինի գրքից), դրա   Vaadin 7-ի համար և   : Այնուամենայնիվ, ես զարմացած եմ, որ JVM աշխարհում այդքան շատ մարդիկ երբեք չեն լսել դրա մասին: Վաադինի առաջին գիրքը թարմացված հրատարակությունը ուղեկից կայքը  Այս գրառման մեջ ես կցանկանայի ներկայացնել Vaadin-ը AJAX-ի և SSR-ի համատեքստում:  Կարճ ներածություն Վաադինի մասին  Վաադինի գեղեցկությունը կայանում է նրա պարզության մեջ.   : Դուք լավ կարդացիք: Vaadin-ի մշակողը պետք է իմանա միայն Java-ն կամ JVM-ի որևէ լեզու և Vaadin API-ն: Գործարկման ժամանակ Vaadin-ը կստեղծի հաճախորդի կողմի կոդը,   HTML, JavaScript և CSS: Այս մոտեցումը ծրագրավորողներին հնարավորություն է տալիս կենտրոնանալ հավելվածի հիմնական ֆունկցիոնալության վրա՝ դարձնելով զարգացման գործընթացն ավելի արդյունավետ: դուք գրում եք միայն հետնամասի կոդը այսինքն՝  Vaadin-ը հիմնված է բաղադրիչների և դասավորությունների վրա, ինչպես դա անում են սովորական աշխատասեղանի վրա հիմնված շրջանակները: Եթե դուք գիտեք Swing կամ JavaFX, ապա ձեզ կզգաք ինչպես տանը:  Ես վերևում նշեցի CSS-ը. Vaadin-ը թույլ է տալիս զարգացնել ձեր CSS-ը հատուկ վերօգտագործվող փաթեթում, որը կոչվում է   : Կարագը տորթի վրա. թեմայի մշակումը կարող է իրականացվել հետին պլանի մշակմանը զուգահեռ և չի հավատարիմ վերջինիս. կոդը կարիք չունի օգտագործել հատուկ ձևանմուշ կամ հատուկ դասեր ավելացնել HTML-ում: թեմա  Vaadin Setup  Vaadin-ի տեղադրումը Spring Boot-ի համատեքստում հեշտ է.   <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId>  </dependency> </project>  Սահմանեք Vaadin տարբերակը այլ հատկությունների հետ միասին:  Պահպանեք բոլոր կախվածությունների տարբերակը հետևողական:  Ավելացնել Vaadin Spring Boot ինտեգրման գրադարանը:  Vaadin-ը հիմնված է սովորական Java Servlet-ի վրա, որը լռելյայն կերպով քարտեզագրվում է արմատին: Vaadin Spring Boot-ի ինտեգրումը թույլ է տալիս վերացնել լռելյայնը: Քանի որ մեր կոդերի բազան միավորում է բազմաթիվ շրջանակներ, մենք այն քարտեզագրում ենք   ին՝ համապատասխան հատկության միջոցով. /vaadin   vaadin.url-mapping=/vaadin/*  Հաճախորդի առաջին խնդրանքով Vaadin-ը կվերադարձնի JavaScript շարժիչի կոդը: Շարժիչը հաջորդ հարցումներ կկատարի կազմաձևված միջերեսը ստանալու և վերջին հաճախորդի կողմը լաստակելու համար: Այդուհետ շարժիչը կարգավորում է օգտատիրոջ բոլոր փոխազդեցությունները և անհրաժեշտության դեպքում թարմացնում է միջերեսը:  Առաջին քայլերը Վաադինի հետ  Երբ մենք ստեղծեցինք նախագիծը, մենք պետք է կազմաձևենք, թե որ բաղադրիչն է ցուցադրում Vaadin-ը, երբ այն ստանում է հարցում:   @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }  Բաղադրիչը կապում է Vaadin servlet   արմատին: ենթահամատեքստի  Սահմանեք ստատիկ էջի անվանումը: Այն դեպքում, երբ ձեզ դինամիկ վերնագիր է անհրաժեշտ, կարող եք իրականացնել   : HasDynamicTitle  Սահմանեք   դասը: RootComponent    դաս է, որը Vaadin-ը ներկայացնում է որպես HTML  VerticalLayout div  Vaadin Spring Boot starter-ը հոգ է տանում ցուցակի ներարկման մասին:  Vaadin-ը կատարում է   ֆունկցիան բրաուզերի առաջին խնդրանքով: init()  Կոդի հաջորդ հատվածները կգնան այնտեղ:  Բաղադրիչների ավելացում  Վերոնշյալ հատվածում մենք ժառանգել ենք   ից՝ Vaadin-ի կողմից տրամադրված   : VerticalLayout բաղադրիչից  Vaadin Design System-ը ներառում է մի շարք բաղադրիչներ, որոնք կարող եք օգտագործել ձեր միջերեսը կառուցելու համար: Բաղադրիչները ունեն սերվերի կողմից Java API, բացի TypeScript API-ից՝ հաճախորդի կողմից մշակման համար:  Դուք օգտագործում եք բաղադրիչ՝ նախ ստեղծելով այն, այնուհետև ավելացնելով այն պարունակող դասավորության մեջ:  -  UI-ի ստեղծում Vaadin հավելվածներում  Որոշ բաղադրիչներ կարող են պարունակել ուրիշներ, և նրանք գիտեն, թե ինչպես պետք է դասավորել իրենց ենթաբաղադրիչները: Օրինակ,   բաղադրիչները վերևից ներքև տեղադրում է սյունակում;   դրանք անընդմեջ դնում է ձախից աջ: VerticalLayout HorizontalLayout  Հատակագծին բաղադրիչներ ավելացնելը պարզ է.   add(Label("Hello")) //1 add(Label("world!"))    ֆունկցիայի համատեքստում։ init()  Թեև սա հիանալի է աշխատում, մենք կարող ենք բարելավել իրավիճակը՝ օգտագործելով   քանի որ մենք օգտագործում ենք Kotlin-ը: Վերոհիշյալ հատվածը կարող ենք վերաշարադրել հետևյալ կերպ. Karibu-DSL,   label("Hello") //1 label("world!")    Karibu DSL ընդլայնման ֆունկցիա է   ինտերֆեյսի վրա label() HasComponent  Karibu-ն հիանալի է, բայց մի փոքր բացասական կողմով. այն չի առաջարկում ընդլայնման գործառույթներ ամբողջ API-ի համար: Օրինակ, դուք պետք է վերադառնաք սովորական API-ին՝   բաղադրիչին ստորագիր ավելացնելու համար. Grid   appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }  Դրական կողմն այն է, որ Karibu-ն բաց կոդով է, և դուք միշտ կարող եք նպաստել, եթե ավելացնելու բան ունեք:  UI-ի հետ կապված հատուկ բաղադրիչները կարևոր չեն ընդհանուր ընկալման համար: Եթե հետաքրքրված եք, միշտ կարող եք ստուգել   : սկզբնաղբյուրը  Օգտագործողի փոխազդեցություններ  Երբ հիմնական սարքերը հաշվողական համակարգերի արքաներն էին, դուք մուտք եք գործել դրանք տերմինալների միջոցով: UI-ը բավականին սահմանափակ էր, և մատուցումը տեղի ունեցավ «համր» տերմինալում: Անհատական համակարգիչները փոխանցման գործառույթը սերվերից տեղափոխեցին հաճախորդ: Այս պահին մշակողները կցել են վարքագիծը բաղադրիչի միջոցով ձգանով: Օրինակ, դուք կարող եք կապել տպագրությունը   երբ օգտագործողը սեղմում է կոճակը: Hello world!  Վեբ հավելվածները փոխեցին այս պարադիգմը: Ինչպես ցույց տվեցին մեր նախորդ հոդվածները, յուրաքանչյուր փոխազդեցություն այժմ քարտեզագրվում է հարցում-պատասխան հոսքով, համաժամանակյա կամ ասինխրոն: Վաադինը մեզ հետ է բերում սկզբնական պարադիգմային:   Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }  Նախաձեռնեք նոր   բաղադրիչը արժեքով: Checkbox  Երբ վանդակի արժեքը փոխվում է, գործարկեք լամբդա - մենք փոխում ենք հիմքում ընկած մոդելի արժեքը:  JavaScript կոդի կարիք չկա. Վաադինը ինքնուրույն է ղեկավարում փոխազդեցությունը:  Եզրակացություն  Գրառումը ընդամենը կարճ ներածություն էր Vaadin-ի մասին AJAX-ի և SSR-ի համատեքստում:  Ծրագրավորողների մեծ մասը, ովքեր սովորում են ծրագրավորում վեբ հավելվածներում և այդպիսով սովոր են հարցում-պատասխան մոդելին, վատ են արձագանքում, երբ ենթարկվում են Vaadin-ին: Նրանց հիմնական փաստարկը API-ի բացակայությունն է։ IMHO, դա օգուտ է. որոշ հավելվածներ, հատկապես բիզնես հավելվածներ, չեն զարգանում այն աստիճան, որ դուք պետք է զարգացնեք հատուկ բջջային հաճախորդներ:  Vaadin-ը գալիս է լռելյայն CSS հավաքածուով, ինչպես նշված է ներածության մեջ: Այս լռելյայն թեման ապահովում է Vaadin հավելվածների լավ տեսքը սկզբից՝ օգտվողներին տրամադրելով հարմարավետ և տեսողականորեն գրավիչ աշխատանքային միջավայր: Այնուամենայնիվ, դուք միշտ կարող եք ինտեգրել մեկ ուրիշին կամ նույնիսկ զարգացնել ձեր սեփականը:  Իրական օգուտը, սակայն, կրկին հայտնաբերվում է կազմակերպչական մակարդակում։ Ներածական գրառման մեջ ես նշեցի, որ frontend-ի և backend-ի մշակումն առանձնացնելը խնդիրներ է ստեղծում դրանց ինտեգրման ընթացքում։ Քանի որ Vaadin-ը նման տարանջատում չունի, նախագծի պլանավորումն ավելի կանխատեսելի է, քանի որ չկա ինտեգրման քայլ առջևի և հետևի միջև: Նմանապես, թեմատիկան կարող է տեղի ունենալ զարգացմանը զուգահեռ:  Այս գրառման ամբողջական սկզբնական կոդը կարելի է գտնել GitHub-ում.   https://github.com/ajavageek/compare-frontends?embedable=true   Ավելին գնալու համար.   Վաադին   Ի՞նչ է Flow-ը:   Ավելին Վաադին   Սկզբնապես հրապարակվել է   ում 2024 թվականի հոկտեմբերի 13-ին A Java Geek-

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Այս աուդիոն պատրաստվել է պատմության բնօրինակ լեզվով:

Չափազանց երկար; Կարդալ

Get Free Unlimited IP Geo Data With IPinfo Lite

Այն, ինչ դուք պետք է իմանաք Vaadin-ի մասին. մարտկոցով ներառված սերվերի AJAX շրջանակը

About Author

ՄԵԿՆԱԲԱՆՈՒԹՅՈՒՆՆԵՐ

ԿԱԽՎԵԼ ՏԵԳՍԵՐ

ԱՅՍ ՀՈԴՎԱԾԸ ՆԵՐԿԱՅԱՑՎԵԼ Է Մ

Related Stories

HyperCycle Announces Strategic Split into Two Distinct Operations

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

What is Hyperthreading and How Do You Enable It?

HyperCycle Announces Strategic Split into Two Distinct Operations

How HyperCycle Is Building the Internet for AI: A Deep Dive with Toufi Saliba

HyveDA Secures $50 Million in Pre-Deposits After Symbiotic Mainnet Launch

What is Hyperthreading and How Do You Enable It?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps