बारेमा धेरै लेखेको छु। म यति उत्साहित थिएँ कि मैले यसको बारेमा   (वादिनको पुस्तक बाहेक), वादिन 7 को लागि यसको   , र एक   लेखें। अझै पनि, JVM संसारमा यति धेरै मानिसहरूले यसको बारेमा कहिल्यै नसुनेकोमा म छक्क परें। Vaadin को पहिलो पुस्तक अद्यावधिक संस्करण साथी वेबसाइट  यस पोष्टमा, म AJAX र SSR को सन्दर्भमा Vaadin परिचय गराउन चाहन्छु।  Vaadin को एक छोटो परिचय  Vaadin को सुन्दरता यसको सरलता मा निहित छ -   । तपाईंले त्यो राम्रोसँग पढ्नुभयो। Vaadin विकासकर्ताले Java, वा कुनै JVM भाषा, र Vaadin API मात्र जान्न आवश्यक छ। रनटाइममा, Vaadin ले क्लाइन्ट-साइड कोड,   , HTML, JavaScript, र CSS सिर्जना गर्नेछ। यस दृष्टिकोणले विकासकर्ताहरूलाई अनुप्रयोगको मुख्य कार्यक्षमतामा ध्यान केन्द्रित गर्न सक्षम बनाउँछ, विकास प्रक्रियालाई थप उत्पादक बनाउँछ। तपाईं केवल ब्याकएन्ड कोड लेख्नुहुन्छ जस्तै  Vaadin ले कम्पोनेन्ट र लेआउटहरूमा बनाउँछ, जस्तै नियमित डेस्कटप-आधारित फ्रेमवर्कहरू। यदि तपाइँ Swing वा JavaFX जान्नुहुन्छ भने, तपाइँ घरमा ठीक महसुस गर्नुहुनेछ।  मैले माथि CSS उल्लेख गरेको छु: Vaadin ले तपाइँलाई तपाइँको CSS लाई   भनिने समर्पित पुन: प्रयोज्य प्याकेजमा विकास गर्न अनुमति दिन्छ। केकमा आइसिङ: विषयवस्तुको विकास ब्याकएन्ड विकासको समानान्तरमा गर्न सकिन्छ र पछिल्लोसँग कुनै पालना छैन; कोडले विशेष टेम्प्लेट प्रयोग गर्न वा HTML मा विशेष कक्षाहरू थप्न आवश्यक छैन। विषयवस्तु  Vaadin सेटअप  वसन्त बुटको सन्दर्भमा Vaadin सेट अप एक हावा हो:   <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 इन्जिनको कोड फिर्ता गर्नेछ। इन्जिनले कन्फिगर गरिएको UI पुन: प्राप्त गर्न र पछिल्लो क्लाइन्ट साइड स्क्याफोल्ड गर्न पछिको अनुरोधहरू गर्नेछ। त्यसपछि, इन्जिनले सबै प्रयोगकर्ता अन्तरक्रियाहरू ह्यान्डल गर्दछ र आवश्यक भएमा UI अद्यावधिक गर्दछ।  Vaadin संग पहिलो कदम  एकपटक हामीले परियोजना सेटअप गरेपछि, हामीले अनुरोध प्राप्त गर्दा Vaadin कुन कम्पोनेन्ट प्रदर्शन गर्छ कन्फिगर गर्नुपर्छ।   @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }  Vaadin servlet   root मा कम्पोनेन्ट सम्बद्ध गर्दछ। subconnect  स्थिर पृष्ठ शीर्षक सेट गर्नुहोस्। यदि तपाईंलाई गतिशील शीर्षक चाहिन्छ भने, तपाईंले   लागू गर्न सक्नुहुन्छ। HasDynamicTitle    वर्ग परिभाषित गर्नुहोस्। RootComponent    एउटा वर्ग हो जसलाई Vaadin ले HTML   रूपमा रेन्डर गर्छ VerticalLayout div  Vaadin स्प्रिंग बुट स्टार्टरले सूची सुई लगाउने ख्याल राख्छ।  Vaadin ले पहिलो ब्राउजर अनुरोधमा   प्रकार्य कार्यान्वयन गर्दछ। init()  अर्को कोड स्निपेटहरू त्यहाँ जानेछन्।  अवयवहरू थप्दै  माथिको स्निपेटमा, हामीले   बाट प्राप्त गरेका थियौं, Vaadin-प्रदान गरिएको   । VerticalLayout घटक  Vaadin डिजाइन प्रणालीले कम्पोनेन्टहरूको सेट समावेश गर्दछ जुन तपाईंले आफ्नो UI निर्माण गर्न प्रयोग गर्न सक्नुहुन्छ। कम्पोनेन्टहरूसँग क्लाइन्ट-साइड विकासको लागि TypeScript API को अतिरिक्त सर्भर-साइड Java API छ।  तपाइँ पहिले यसलाई सिर्जना गरेर र त्यसपछि यसलाई समावेश लेआउटमा थपेर एक घटक प्रयोग गर्नुहोस्।  --  Vaadin अनुप्रयोगहरूमा UI सिर्जना गर्दै  केही कम्पोनेन्टहरूले अरूलाई समावेश गर्न सक्छन्, र उनीहरूलाई थाहा छ कि कसरी उनीहरूको उप-घटकहरू बाहिर राख्ने। उदाहरणका लागि,   स्तम्भमा कम्पोनेन्टहरू माथि-देखि-तल राख्छ;   तिनीहरूलाई बायाँ-देखि-दायाँ पङ्क्तिमा राख्छ। 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!  वेब अनुप्रयोगहरूले यो प्रतिमान परिवर्तन गरे। हाम्रा अघिल्ला लेखहरूले देखाए जस्तै, प्रत्येक अन्तरक्रिया अब अनुरोध-प्रतिक्रिया प्रवाह, सिंक्रोनस वा एसिन्क्रोनसमा नक्सा गर्दछ। Vaadin ले हामीलाई मूल प्रतिमानमा फर्काउँछ।   Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }  मानको साथ नयाँ   कम्पोनेन्ट प्रारम्भ गर्नुहोस्। Checkbox  जब चेकबक्सको मान परिवर्तन हुन्छ, lambda कार्यान्वयन गर्नुहोस् - हामी अन्तर्निहित मोडेलको मान परिवर्तन गर्छौं।  जाभास्क्रिप्ट कोडको लागि कुनै आवश्यकता छैन; Vaadin स्वतन्त्र रूपमा अन्तरक्रिया व्यवस्थापन गर्दछ।  निष्कर्ष  पोस्ट AJAX र SSR को सन्दर्भमा Vaadin को छोटो परिचय थियो।  धेरै जसो विकासकर्ताहरू जसले वेब एपहरूमा प्रोग्रामिङ सिक्छन् र यसरी अनुरोध-प्रतिक्रिया मोडेलमा बानी बसाल्छन् भने Vaadin मा पर्दा खराब प्रतिक्रिया दिन्छन्। तिनीहरूको मुख्य तर्क API को अनुपस्थिति हो। IMHO, यो एक फाइदा हो: केहि अनुप्रयोगहरू, विशेष गरी व्यावसायिक अनुप्रयोगहरू, तपाईंले समर्पित मोबाइल ग्राहकहरू विकास गर्न आवश्यक पर्ने बिन्दुमा विकसित हुँदैन।  Vaadin एक पूर्वनिर्धारित CSS सेटको साथ आउँछ, जस्तै परिचयमा भनिएको छ। यो पूर्वनिर्धारित विषयवस्तुले Vaadin एपहरू सुरुदेखि नै राम्रो देखिने कुरा सुनिश्चित गर्दछ, प्रयोगकर्ताहरूलाई सहज र दृश्यात्मक रूपमा आकर्षक कार्य वातावरण प्रदान गर्दछ। यद्यपि, तपाइँ सधैं अर्कोलाई एकीकृत गर्न सक्नुहुन्छ वा आफ्नै विकास गर्न सक्नुहुन्छ।  वास्तविक लाभ, तथापि, संगठनात्मक स्तरमा फेरि भेटिन्छ। परिचयात्मक पोष्टमा, मैले उल्लेख गरे कि फ्रन्टएन्ड र ब्याकएन्ड विकासले तिनीहरूको एकीकरणको क्रममा समस्याहरू सिर्जना गर्दछ। किनभने Vaadin सँग त्यस्तो विभाजन छैन, परियोजना योजना अधिक अनुमानित छ, किनकि अगाडिको छेउ र पछाडिको छेउको बीचमा कुनै एकीकरण चरण छैन। त्यसैगरी, विषयवस्तु विकाससँग समानान्तर हुन सक्छ।  यस पोस्टको लागि पूर्ण स्रोत कोड GitHub मा फेला पार्न सकिन्छ:   https://github.com/ajavageek/compare-frontends?embedable=true   अगाडि जानको लागि:   वादिन   प्रवाह के हो?   More Vaadin   मूल रूपमा   मा अक्टोबर 13th, 2024 मा प्रकाशित A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

यो अडियो कथाको मौलिक भाषामा निर्माण गरिएको हो!

तपाईले Vaadin बारे के जान्न आवश्यक छ - ब्याट्री-समावेश सर्भर-साइड AJAX फ्रेमवर्क

About Author

टिप्पणीहरू

ह्याङ्ग ट्यागहरू

यो लेख मा प्रस्तुत गरिएको थियो

Related Stories

The HackerNoon Newsletter: Vibe Coding - A New System of the World (3/9/2025)

Uber Still Can't Turn a Profit

The HackerNoon Newsletter: The Bitcoin Blockchain is Spice Melange—It Is a Meme (2/14/2025)

The HackerNoon Newsletter: Salt Typhoon: The Hidden Hand Behind the Telecom Gift Card Scam? (6/12/2025)

The HackerNoon Newsletter: Vibe Coding - A New System of the World (3/9/2025)

Uber Still Can't Turn a Profit

The HackerNoon Newsletter: The Bitcoin Blockchain is Spice Melange—It Is a Meme (2/14/2025)

The HackerNoon Newsletter: Salt Typhoon: The Hidden Hand Behind the Telecom Gift Card Scam? (6/12/2025)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps