🧑🏽‍🤝‍🧑🏼 💕 👆🏼 वाडिन प्रवाह - एक अजीब हिरण 🔖 🤦🏻 👿

हर बदलाव, यहां तक कि बेहतर के लिए एक बदलाव,
हमेशा असुविधाजनक

रिचर्ड हुकर

जैसा कि आप जानते हैं, वाडिन सबसे लोकप्रिय जावा वेब फ्रेमवर्क में से एक है:

हाल ही में, वेब यूआई, वाडिन 10 को विकसित करने के लिए इस ढांचे की एक नई रिलीज जारी की गई है। वाडिन 10 और वाडिन फ्लो के बारे में रूसी में कुछ प्रकाशन हैं, और यह पोस्ट इस अंतर को भरने के लिए है।

रचनाकार आधुनिक वेब-एप्लिकेशन और वेब-साइटों के विकास के लिए वाडिन फ्लो को एक नए जावा वेब-फ्रेमवर्क के रूप में स्थान देते हैं (यहां मैं उन्हें बहुत मानता नहीं हूं)। यह वैडिन प्लेटफ़ॉर्म का हिस्सा है, जो किसी अन्य उत्पाद को प्रतिस्थापित करता है - वाडिन फ्रेमवर्क, यह आपको जावा वेब कंपोनेंट्स मानक का उपयोग करके वेब एप्लिकेशन (या, सटीक, वेब यूआई) विकसित करने की अनुमति देता है।

यहां पाठक के दिमाग में, सबसे अधिक संभावना है कि सब कुछ पहले से ही मिलाया गया था, ये सभी वाडिन ब्ला ब्ला, रूपरेखा, मंच, और इसी तरह। क्या चल रहा है?

हम 7 साल से UI बैक ऑफिस सिस्टम के लिए हमारे CUBA प्लेटफॉर्म के हिस्से के रूप में वाडिन का उपयोग कर रहे हैं और इस दौरान हमने उसके साथ काम करने का बहुत अनुभव जमा किया है, इसलिए हम उसके भाग्य की चिंता नहीं कर सकते हैं। कट के तहत आपको वाडिन 10 पर मेरा चश्मा मिलेगा।

वादिन ढांचा

वाडिन एक फिनिश कंपनी है जो यूआई विकसित करने के लिए टूल और लाइब्रेरी विकसित करती है। वे जावा में वेब विकास के लिए एक ही नाम की रूपरेखा बनाते हैं।

वाडिन फ्रेमवर्क एक यूआई फ्रेमवर्क है जिसमें सर्वर-साइड प्रोग्रामिंग मॉडल होता है जिसमें सभी यूआई तर्क और इसकी स्थिति सर्वर पर स्थित होती है, और केवल यूआई कोड के घटक ब्राउज़र में निष्पादित होते हैं। वास्तव में, यह एक पतली ग्राहक तकनीक है जहां ब्राउज़र केवल वही दिखाता है जो सर्वर कहता है और सभी घटनाओं को सर्वर पर भेजा जाता है।

सर्वर-साइड दृष्टिकोण आपको इस तथ्य के बारे में भूलने की अनुमति देता है कि विकास वेब के तहत आयोजित किया जाता है, और सर्वर पर डेटा और सेवाओं तक सीधी पहुंच के साथ यूआई को डेस्कटॉप जावा एप्लिकेशन के रूप में विकसित करना है। उसी समय, वाडिन ब्राउज़र में UI प्रदर्शित करने और ब्राउज़र और सर्वर के बीच AJAX इंटरैक्शन का ध्यान रखेगा। वाडिन इंजन ब्राउज़र में सर्वर-साइड एप्लिकेशन के उपयोगकर्ता इंटरफ़ेस को प्रस्तुत करता है और क्लाइंट और सर्वर एक्सचेंज के सभी विवरणों को लागू करता है।

इस दृष्टिकोण के कई फायदे हैं:

जावा कोड लिखना और डीबग करना आसान है
आप मौजूदा जावा पुस्तकालयों और उपकरणों (आईडीई, संकलक, परीक्षण) का उपयोग कर सकते हैं
कोई वेब सेवा विकास की आवश्यकता नहीं है
सुरक्षा बेहतर है

और विपक्ष:

UI देखने के लिए सर्वर पर बहुत अधिक मेमोरी की आवश्यकता होती है
बड़े पैमाने पर समाधान के लिए मुश्किल है
विजेट विकसित करते समय, आपको जावा एपीआई विकसित करने की आवश्यकता होती है

इन minuses और pluses के आधार पर, Vaadin FW उद्यम विकास में सटीक रूप से बस गया, जहां भार पूर्वानुमान योग्य हैं, और विकास की गति और आसानी लोहा और स्मृति की लागत से बहुत अधिक महत्वपूर्ण है।

Google वेब टूलकिट का क्या हुआ

हर समय जब वाडिन आम जनता से परिचित होता है, तो वाडिन एफडब्ल्यू का क्लाइंट हिस्सा एक अन्य प्रसिद्ध उत्पाद - Google वेब टूलकिट (जीडब्ल्यूटी) के साथ अटूट रूप से जुड़ा हुआ था। इस अग्रानुक्रम ने यूआई घटकों को स्वयं और सर्वर एपीआई उनके लिए एक भाषा - जावा में लिखना संभव बना दिया, जो काफी सुविधाजनक था।

हाल के वर्षों में, Google वेब टूलकिट विकसित नहीं हुआ है, और 2015 के बाद से हम सभी GWT 3.0 / J2CL की उपस्थिति की प्रतीक्षा कर रहे हैं, जिसकी घोषणा GWT.Create 2015 में की गई है:

इस स्थिर अवधि (2015-2017) में एक महत्वपूर्ण घटना घटित हुई: वेब घटक विनिर्देशन और एक अन्य Google रूपरेखा, पॉलिमर, दिखाई दिया। जाहिर है, यह GWT के अंत की शुरुआत थी।

यह ध्यान देने योग्य है कि GWT 3 को आंतरिक Google ढांचे के रूप में विकसित किया जा रहा है और इसका विकास आंतरिक रूप से किया जाता है। इसलिए, समुदाय किसी भी तरह से प्रक्रिया को प्रभावित नहीं कर सकता है, या कम से कम यह नहीं देख सकता है कि प्रक्रिया चल रही है।

इस ठहराव की पृष्ठभूमि के खिलाफ, वाडिन टीम ने जीडब्ल्यूटी पर विकास को पूरी तरह से छोड़ने और उनके ढांचे के ग्राहक भाग को फिर से लिखने का एक कठिन निर्णय लिया। इन परिवर्तनों पर किसी का ध्यान नहीं जा सका और उन सभी को डरा दिया जो पहले से ही वाडिन पर विकसित हो रहे हैं।

वेब घटक

वेब घटक मानकों का एक समूह है। यह प्रस्तावित और सक्रिय रूप से Google के लोगों द्वारा प्रचारित किया गया था, लेकिन इस पहल को मोज़िला में पहले ही समर्थन मिल चुका है। संक्षेप में, ये वेब के लिए UI घटक बनाने की तकनीकें हैं, ताकि वे व्यवहार और प्रस्तुति के इनकैप्सुलेशन का समर्थन करें। और मुख्य प्लस पुन: उपयोग की संभावना है।

मुख्य अवधारणाएँ:

कस्टम तत्व - अपने HTML तत्वों को बनाने के लिए एपीआई
शैडो डोम HTML घटकों को एनकैप्सुलेट करने और वैश्विक सीएसएस नियमों से उनकी दृश्य प्रस्तुति को अलग करने के लिए एक उपकरण है। संक्षेप में, आप एक घटक बना सकते हैं, उदाहरण के लिए, एक ऑर्डर फॉर्म, और इस बात से डरो नहीं कि इस पृष्ठ के सीएसएस नियमों के कारण इसकी शैली साइट के कुछ पृष्ठों पर टूट जाएगी।
HTML टेम्प्लेट - एक HTML दस्तावेज़ में DOM रिक्त तत्वों वाले निष्क्रिय ब्लॉकों को रखने की क्षमता। इस तरह के ब्लॉक ब्राउज़र द्वारा पार्स किए जाते हैं, लेकिन वे अपने कोड को रेंडर या रन नहीं करते हैं। उन्हें डेटा रेंडरिंग के लिए टेम्प्लेट के रूप में उपयोग करने का सुझाव दिया गया है।
HTML आयात - एक HTML दस्तावेज़ को अपने सभी लेआउट, शैलियों और JS के साथ मॉड्यूल के रूप में आयात करने की क्षमता

उदाहरण के लिए, यदि आप अब YouTube DOM ट्री को देखते हैं, तो आपको कस्टम एलिमेंट्स और शैडो DOM का उपयोग मिलेगा:

ये सभी चीजें आपको वेब के लिए नए फैशनेबल UI घटक लिखने की अनुमति देती हैं।

यह स्वीकार करने योग्य है कि ब्राउज़र समर्थन एकदम सही है और पॉलीफ़िल अभी भी आवश्यक हैं , उदाहरण के लिए, एज के लिए।

पॉलिमर

पॉलिमर वेब घटक मानकों के शीर्ष पर एक छोटी सी लाइब्रेरी है जो उनके उपयोग को आसान बनाने के लिए डिज़ाइन की गई है। एक उदाहरण:

//    import '@polymer/paper-checkbox/paper-checkbox.js'; import {PolymerElement, html} from '@polymer/polymer'; //    class LikeableElement extends PolymerElement { //      static get properties() { return { liked: Boolean }} //    DOM  , CSS      static get template() { return html` <style> .response { margin-top: 10px; } </style> <paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox> <div hidden$="[[!liked]]" class="response">Web components like you, too.</div> `; } } //     customElements.define('likeable-element', LikeableElement);

वास्तव में, पॉलिमर वह सब कुछ करता है जो जीडब्ल्यूटी ने पहले किया था, लेकिन साथ ही यह जेएस घटकों और अन्य रूपरेखाओं के साथ संगत है, उदाहरण के लिए, प्रतिक्रिया और कोणीय।

वाडिन घटक

वापस वाडिन में। लंबे समय से, वैडिन वैडिन कंपोनेंट्स नामक एक उत्पाद बना रहा है - फ्रंट-एंड डेवलपर्स के लिए यूआई घटक जो किसी भी जेएस एप्लिकेशन में एम्बेड किए जा सकते हैं।

ये घटक वेब घटक और पॉलिमर पर आधारित हैं!

जैसा कि अब हम देखते हैं, यह वाडिन फ्रेमवर्क के लिए एक वैकल्पिक एयरोड्रोम था, जिसने हमें Google वेब टूलकिट को छोड़ने और एक नया फ्रेमवर्क विकसित करने की अनुमति दी, जिसके लिए घटक अभी तक मौजूद नहीं थे। चिकन और अंडे की समस्या हल हो गई है और वाडिन कंपोनेंट्स आगामी वैडिन 10 का फ्रंट-एंड बन गए हैं।

वाडिन प्रवाह

वाडिन 8 में एक यूआई राज्य तुल्यकालन तंत्र और दो-तरफ़ा आरपीसी प्रोटोकॉल (दूरस्थ प्रक्रिया कॉल) के लिए समर्थन शामिल था। यह जीडब्ल्यूटी के लिए संभव था, क्योंकि जावा और सर्वर और क्लाइंट के सामान्य इंटरफेस लिखे गए थे।

GWT के परित्याग के साथ, एक नए तंत्र को लागू करना आवश्यक था जो JS फ्रंटेंड और जावा बैकएंड के साथ पारदर्शी एकीकरण की अनुमति देगा। यह तंत्र वाडिन फ्लो था (और यह नाम भी लंबे समय से पूरे वाडिन 10 को संदर्भित करता है)।

फ्लो प्रलेखन में यह योजना है:

इसका मुख्य अर्थ इस प्रकार है:

यूआई राज्य सिंक्रनाइज़ेशन सर्वर से क्लाइंट के लिए समर्थित है
सर्वर भाग UI घटकों की घटनाओं के लिए सदस्यता ले सकता है, और AJAX अनुरोध निष्पादित किया जाएगा
व्यापार तर्क सर्वर पर निष्पादित किया जाता है, केवल UI में प्रदर्शित डेटा वेब ब्राउज़र में लोड किया जाता है
सर्वर साइड जावा का उपयोग करता है
क्लाइंट HTML, CSS, JS और पॉलिमर टेम्प्लेट का उपयोग कर सकता है

मेरे लिए, इसका मतलब है कि वाडिन में अधिक फ्रंट-एंड तकनीकें होंगी, और अब जावा अकेले स्पष्ट रूप से पर्याप्त नहीं है (वैडिन 8 के लिए, जावा आपके लिए पर्याप्त होगा और HTML / CSS की आवश्यकता नहीं होगी)। दूसरी ओर, जेएस कोड का आसान एकीकरण अब संभव है।

वादिन मंच

वैडिन 10 के प्रत्येक घटक को अलग-अलग और जेएस दुनिया की सर्वश्रेष्ठ परंपराओं में विकसित किया गया है - छोटे मॉड्यूल जो एक-दूसरे से यथासंभव स्वतंत्र हैं। एक ही समय में, घटकों का क्लाइंट भाग एक प्रारूप में JAR में पैक किया जाता है WebJARs: www.webjenn.org

यह थोड़ा डरावना है, खासकर यदि आप न्यूनतम डिजाइन को देखते हैं:

किसी तरह इस अराजकता को नियंत्रित करने के लिए, वैडिन प्लेटफॉर्म नामक एक बीओएम (सामग्री का बिल) परियोजना दिखाई दी ।

यह कुछ स्वतंत्र उत्पाद नहीं है, लेकिन मैवेन बॉम प्रारूप में डिज़ाइन किए गए घटकों और उपकरणों के संगत संस्करणों की एक सूची है।

यह मावेन से जोड़ता है :

 <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <version>${vaadin.platform.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement>

वैडिन 10 की विशेषताएं

कुल, पूरे ढांचे में 3 घटक होते हैं:

वाडिन घटक - सीमा
वादिन प्रवाह - परिवहन
सर्वर घटक एपीआई - यूआई घटकों के लिए जावा एपीआई

यह आधिकारिक ट्यूटोरियल के साथ विकास शुरू करने के लायक है।

इसके अलावा, मैं एक नए वेबिनार की सलाह देता हूं।

स्टार्टर्स

आप पृष्ठ से रूपरेखा से अधिक परिचित हो सकते हैं। वहां आपको स्प्रिंग बूट पर आधारित फुल-स्टैक सहित परियोजनाओं के उदाहरण मिलेंगे।

स्प्रिंग बूट के उत्साही प्रशंसक सीधे शुरू कर सकते हैं। spring.io और वहां वेब फ्रेमवर्क के बीच वाडिन का चयन करें।

एक जावा वर्ग के साथ एक न्यूनतम परियोजना शुरू की जा सकती है, उदाहरण के लिए:

 //  URL   @Route("") public class MainView extends VerticalLayout { public MainView() { //  UI   Button button = new Button("Click me"); //    button.addClickListener(event -> { new Notification("Hello!").open(); }); add(button); } }

सामान्य तौर पर, आप Vaadin 10 पर लिख सकते हैं, जैसा कि Vaadin 8, BUT पर! आपको निश्चित रूप से घटक मिलान पृष्ठ को देखना चाहिए।

तत्व एपीआई

किलर सुविधा वाडिन 10 - सर्वर-साइड जावा कोड से डोम तत्वों को सीधे नियंत्रित करती है।

 Element nameField = ElementFactory.createInput(); nameField.setAttribute("id", "nameField"); nameField.setAttribute("placeholder", "John Doe"); nameField.setAttribute("autofocus", "");

आप उन विशेषताओं को भी प्रबंधित कर सकते हैं जो पहले से ही चिपकाए गए हैं:

 // "John Doe" String placeholder = nameField.getAttribute("placeholder"); // true nameField.hasAttribute("autofocus"); nameField.removeAttribute("autofocus"); // ["id", "placeholder"] nameField.getAttributeNames().toArray();

बेशक, यह यूआई घटकों के लिए एक प्रतिस्थापन नहीं है, लेकिन यूआई घटकों को विकसित करने के लिए सरल लेआउट परिवर्तनों के लिए एक अच्छा एपीआई आवश्यक नहीं है।

डेटा बाइंडिंग

HasValue इंटरफ़ेस को लागू करने वाले घटकों के साथ काम करने के लिए (मूल्य / मान प्राप्त करें और ValueChangeListener), एक सुविधाजनक बाइंडर वर्ग है:

 Binder<Person> binder = new Binder<>(); TextField titleField = new TextField(); binder.forField(titleField) .bind( Person::getTitle, Person::setTitle);

जैसा कि आप उदाहरण से देख सकते हैं, लैम्बडा एक्सप्रेशन के आधार पर स्टैटिकली टाइपिंग बाइंडिंग समर्थित है।

इसके अलावा, बाइंडर्स मूल्यवर्धक और सत्यापनकर्ता स्थापित कर सकते हैं:

 binder.forField(yearOfBirthField) // Validator will be run with the String value of the field .withValidator(text -> text.length() == 4, "Doesn't look like a year") // Converter will only be run for strings with 4 characters .withConverter( new StringToIntegerConverter("Must enter a number")) // Validator will be run with the converted value .withValidator(year -> year >= 1900 && year < 2000, "Person must be born in the 20th century") .bind(Person::getYearOfBirth, Person::setYearOfBirth);

टेम्पलेट्स

HTML टेम्पलेट टाइप कर रहे हैं:

 <link rel="import" href="../bower_components/polymer/polymer-element.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html"> <dom-module id="hello-world"> <template> <div> <paper-input id="inputId" value="{{userInput}}"></paper-input> <button id="helloButton" on-click="sayHello">Say hello</button> <div id="greeting">[[greeting]]</div> </div> </template> <script> class HelloWorld extends Polymer.Element { static get is() { return 'hello-world' } } customElements.define(HelloWorld.is, HelloWorld); </script> </dom-module>

टेम्प्लेट्स घोषणात्मक डेटा बाइंडिंग का समर्थन करते हैं और आप देशी जावास्क्रिप्ट लिख सकते हैं जो कि इस ब्राउज़र में निष्पादित किया जाएगा। यह आपको सर्वर से अनुरोध भेजे बिना सरलतम यूआई तर्क का हिस्सा लागू करने की अनुमति देता है।

घटनाक्रम

घटक ईवेंट हैंडलिंग बहुत सरल है :

 TextField textField = new TextField(); textField.addChangeListener(e -> System.out.println("Event fired"));

यहां आप वाडिन 8 के साथ अंतर नहीं देखेंगे।

रूटिंग

अनुप्रयोग में नेविगेशन और रूटिंग वह बन गए हैं जो उन्हें होने चाहिए :

 @Route("some/path") public class SomePathComponent extends Div { public SomePathComponent() { setText("Hello @Route!"); } }

दृश्य निर्धारित कर सकते हैं कि वे किस URL को संसाधित करते हैं, पते से उन्हें किन मापदंडों की आवश्यकता होती है, और बहुत कुछ।

घटक विकास

वाडिन 10 के लिए, आप निम्नलिखित तरीकों से घटकों को विकसित कर सकते हैं:

एक मौजूदा वेब घटक का एकीकरण: vaadin.com/docs/v10/flow/web-compenders/integrating-a-web-component.html
JS कोड को सीधे टेम्प्लेट से कनेक्ट करना: vaadin.com/docs/v10/flow/importing-d dependencies / tutorial-importing.html
मौजूदा से मिश्रित घटकों का विकास:
vaadin.com/docs/v10/flow/creating-components/tutorial-component-composite.html

कस्टम घटकों के विकास के लिए इस तरह का एक सीधा दृष्टिकोण शायद सबसे बड़ा कदम है। जीडब्ल्यूटी पर जेएस के लिए रैपर लिखना आवश्यक नहीं है, फिर वाडिन पर सर्वर साइड लिखना है।

लुमो थीम

SASS के बजाय, सीएसएस चर अब दृश्य विषयों के लिए उपयोग किया जाता है, अर्थात्। प्रोजेक्ट बनाते समय CSS को संकलित करने की आवश्यकता नहीं:

 <custom-style> <style> html { --lumo-font-family: "Open Sans", sans-serif; } </style> </custom-style>

और Valo थीम को नए कस्टम Lumo थीम से बदल दिया गया है।

वाडिन एफडब्ल्यू 8 के साथ माइग्रेट करना

वाडिन 8 से माइग्रेशन विकल्प दस्तावेज़ में वर्णित हैं: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

यहां मेरे पास आपके लिए बुरी खबर है: यदि आपने वाडिन 8 पर एक बड़ी परियोजना लिखी है, तो आपको वाडिन पर स्विच करते समय इसे पूरी तरह से फिर से लिखना होगा। 10. शब्द से कोई माइग्रेशन पथ नहीं है!

वादिन 10 और वादिन 8 कई पहलुओं में समान हैं:

सर्वर-साइड दृष्टिकोण
UI तर्क विकसित करने के लिए जावा
डेटा बाइंडिंग के लिए एक ही दृष्टिकोण

लब्बोलुआब यह है: वाडिन 10 खरोंच से लिखा गया एक नया ढांचा है ।

डेवलपर्स के वादे के अनुसार, वाडिन 8 को 2022 तक समर्थन दिया जाएगा, और माइग्रेशन दृष्टिकोण दिखाई दे सकते हैं।

निष्कर्ष

मैं यह महत्वपूर्ण मानता हूं कि नई वाडिन वेबसाइट वाडिन फ्लो में लिखी गई है, जो फ्रंट-एंड टेक्नोलॉजी के लिए वास्तविक मानक बन रही है, क्योंकि एक प्रोग्रामिंग भाषा की परिपक्वता इस बात से निर्धारित होती है कि उसका कंपाइलर उसी भाषा में लिखा गया था या नहीं।

मुझे उम्मीद है कि अब आप वाडिन के बारे में अपनी राय बना सकते हैं। 10. सामान्य तौर पर, यह भविष्य के लिए एक अच्छा ढांचा और बहुत बड़ा रिजर्व है। मेरे लिए, यह एक यूआई के निर्माण के लिए नए विचारों और दृष्टिकोणों के लिए एक उत्कृष्ट प्रायोगिक प्रशिक्षण ग्राउंड है।

वाडिन प्रवाह - एक अजीब हिरण