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

Vaadin को बारेमा धेरै लेखेको छु। म यति उत्साहित थिएँ कि मैले यसको बारेमा पहिलो पुस्तक (वादिनको पुस्तक बाहेक), वादिन 7 को लागि यसको अद्यावधिक संस्करण , र एक साथी वेबसाइट लेखें। अझै पनि, JVM संसारमा यति धेरै मानिसहरूले यसको बारेमा कहिल्यै नसुनेकोमा म छक्क परें।

यस पोष्टमा, म 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> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <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> <!--3--> </dependency> </project>

1. अन्य गुणहरूसँग Vaadin संस्करण सेट गर्नुहोस्।
2. सबै निर्भरताहरूको संस्करण लगातार राख्नुहोस्।
3. 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 } }

1. Vaadin servlet subconnect root मा कम्पोनेन्ट सम्बद्ध गर्दछ।
2. स्थिर पृष्ठ शीर्षक सेट गर्नुहोस्। यदि तपाईंलाई गतिशील शीर्षक चाहिन्छ भने, तपाईंले HasDynamicTitle लागू गर्न सक्नुहुन्छ।
3. RootComponent वर्ग परिभाषित गर्नुहोस्।
4. VerticalLayout एउटा वर्ग हो जसलाई Vaadin ले HTML div रूपमा रेन्डर गर्छ
5. Vaadin स्प्रिंग बुट स्टार्टरले सूची सुई लगाउने ख्याल राख्छ।
6. Vaadin ले पहिलो ब्राउजर अनुरोधमा init() प्रकार्य कार्यान्वयन गर्दछ।
7. अर्को कोड स्निपेटहरू त्यहाँ जानेछन्।

अवयवहरू थप्दै

माथिको स्निपेटमा, हामीले VerticalLayout बाट प्राप्त गरेका थियौं, Vaadin-प्रदान गरिएको घटक ।

Vaadin डिजाइन प्रणालीले कम्पोनेन्टहरूको सेट समावेश गर्दछ जुन तपाईंले आफ्नो UI निर्माण गर्न प्रयोग गर्न सक्नुहुन्छ। कम्पोनेन्टहरूसँग क्लाइन्ट-साइड विकासको लागि TypeScript API को अतिरिक्त सर्भर-साइड Java API छ।

तपाइँ पहिले यसलाई सिर्जना गरेर र त्यसपछि यसलाई समावेश लेआउटमा थपेर एक घटक प्रयोग गर्नुहोस्।

-- Vaadin अनुप्रयोगहरूमा UI सिर्जना गर्दै

केही कम्पोनेन्टहरूले अरूलाई समावेश गर्न सक्छन्, र उनीहरूलाई थाहा छ कि कसरी उनीहरूको उप-घटकहरू बाहिर राख्ने। उदाहरणका लागि, VerticalLayout स्तम्भमा कम्पोनेन्टहरू माथि-देखि-तल राख्छ; HorizontalLayout तिनीहरूलाई बायाँ-देखि-दायाँ पङ्क्तिमा राख्छ।

लेआउटमा कम्पोनेन्टहरू थप्नु सरल छ:

 add(Label("Hello")) //1 add(Label("world!"))

1. init() प्रकार्यको सन्दर्भमा।

जबकि यो पूर्ण रूपमा काम गर्दछ, हामी Kotlin प्रयोग गर्दा हामी Karibu-DSL प्रयोग गरेर स्थिति सुधार गर्न सक्छौं। हामी माथिको स्निपेटलाई निम्नानुसार पुन: लेख्न सक्छौं:

 label("Hello") //1 label("world!")

1. label() HasComponent इन्टरफेसमा एक Karibu DSL विस्तार प्रकार्य हो

Karibu उत्कृष्ट छ, तर अलिकति नकारात्मक पक्षको साथ: यसले सम्पूर्ण API को लागि विस्तार कार्यहरू प्रस्ताव गर्दैन। उदाहरणका लागि, तपाईंले Grid कम्पोनेन्टमा फुटर थप्नको लागि नियमित API मा फर्किनु पर्छ:

 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 }

1. मानको साथ नयाँ Checkbox कम्पोनेन्ट प्रारम्भ गर्नुहोस्।

   
   

2. जब चेकबक्सको मान परिवर्तन हुन्छ, lambda कार्यान्वयन गर्नुहोस् - हामी अन्तर्निहित मोडेलको मान परिवर्तन गर्छौं।

जाभास्क्रिप्ट कोडको लागि कुनै आवश्यकता छैन; Vaadin स्वतन्त्र रूपमा अन्तरक्रिया व्यवस्थापन गर्दछ।

निष्कर्ष

पोस्ट AJAX र SSR को सन्दर्भमा Vaadin को छोटो परिचय थियो।

धेरै जसो विकासकर्ताहरू जसले वेब एपहरूमा प्रोग्रामिङ सिक्छन् र यसरी अनुरोध-प्रतिक्रिया मोडेलमा बानी बसाल्छन् भने Vaadin मा पर्दा खराब प्रतिक्रिया दिन्छन्। तिनीहरूको मुख्य तर्क API को अनुपस्थिति हो। IMHO, यो एक फाइदा हो: केहि अनुप्रयोगहरू, विशेष गरी व्यावसायिक अनुप्रयोगहरू, तपाईंले समर्पित मोबाइल ग्राहकहरू विकास गर्न आवश्यक पर्ने बिन्दुमा विकसित हुँदैन।

Vaadin एक पूर्वनिर्धारित CSS सेटको साथ आउँछ, जस्तै परिचयमा भनिएको छ। यो पूर्वनिर्धारित विषयवस्तुले Vaadin एपहरू सुरुदेखि नै राम्रो देखिने कुरा सुनिश्चित गर्दछ, प्रयोगकर्ताहरूलाई सहज र दृश्यात्मक रूपमा आकर्षक कार्य वातावरण प्रदान गर्दछ। यद्यपि, तपाइँ सधैं अर्कोलाई एकीकृत गर्न सक्नुहुन्छ वा आफ्नै विकास गर्न सक्नुहुन्छ।

वास्तविक लाभ, तथापि, संगठनात्मक स्तरमा फेरि भेटिन्छ। परिचयात्मक पोष्टमा, मैले उल्लेख गरे कि फ्रन्टएन्ड र ब्याकएन्ड विकासले तिनीहरूको एकीकरणको क्रममा समस्याहरू सिर्जना गर्दछ। किनभने Vaadin सँग त्यस्तो विभाजन छैन, परियोजना योजना अधिक अनुमानित छ, किनकि अगाडिको छेउ र पछाडिको छेउको बीचमा कुनै एकीकरण चरण छैन। त्यसैगरी, विषयवस्तु विकाससँग समानान्तर हुन सक्छ।

यस पोस्टको लागि पूर्ण स्रोत कोड GitHub मा फेला पार्न सकिन्छ:

अगाडि जानको लागि:

• वादिन
• प्रवाह के हो?
• More Vaadin

मूल रूपमा A Java Geek मा अक्टोबर 13th, 2024 मा प्रकाशित