فادين فلو - غزال غريب

كل تغيير ، حتى تغيير للأفضل ،
غير مريح دائما

ريتشارد هوكر

كما تعلم ، يعد Vaadin واحدًا من أكثر أطر عمل Java شيوعًا:

• مؤشر Java Web Frameworks: فبراير 2017
• أفضل 10 إطارات جافا ويب للاستخدام في 2018

في الآونة الأخيرة ، تم إصدار إصدار جديد من هذا الإطار لتطوير واجهة مستخدم الويب ، Vaadin 10 ، وهناك القليل من المنشورات باللغة الروسية حول Vaadin 10 و Vaadin Flow ، وقد تم تصميم هذا المنشور لملء هذه الفجوة.


يضع المبدعون Vaadin Flow كإطار ويب Java جديد لتطوير تطبيقات الويب ومواقع الويب الحديثة (هنا لا أصدقهم تمامًا). هذا جزء من Vaadin Platform ، الذي يحل محل منتج آخر - إطار Vaadin ، فهو يسمح لك بتطوير تطبيقات الويب (أو ، على وجه الدقة ، واجهة مستخدم الويب) باستخدام معيار Java Web Components.

هنا في ذهن القارئ ، على الأرجح أن كل شيء كان مختلطًا بالفعل ، كل هؤلاء Vaadin Bla Bla ، والإطار ، والنظام الأساسي ، وما إلى ذلك. ما الذي يجري؟

نحن نستخدم Vaadin كجزء من منصة CUBA الخاصة بنا لأنظمة المكتب الخلفي لواجهة المستخدم لمدة 7 سنوات وخلال هذه الفترة تراكمت لدينا الكثير من الخبرة في العمل معها ، لذلك لا يسعنا إلا القلق بشأن مصيره. تحت القطع ستجد المواصفات الخاصة بي على Vaadin 10.

إطار فادين

Vaadin هي شركة فنلندية تعمل على تطوير أدوات ومكتبات لتطوير واجهة المستخدم. إنهم يصنعون إطار العمل الذي يحمل نفس الاسم لتطوير الويب في Java.

Vaadin Framework هو إطار عمل لواجهة المستخدم مع نموذج برمجة من جانب الخادم توجد فيه جميع منطق واجهة المستخدم وحالته على الخادم ، ويتم تنفيذ رمز واجهة المستخدم فقط للمكونات في المتصفح. في الواقع ، هذه تقنية عميل رقيقة حيث يعرض المستعرض فقط ما يقوله الخادم ويتم إرسال جميع الأحداث إلى الخادم.

يتيح لك النهج من جانب الخادم نسيان حقيقة أن التطوير يتم من خلال الويب ، وتطوير واجهة المستخدم كتطبيق جافا لسطح المكتب مع وصول مباشر إلى البيانات والخدمات على الخادم. في الوقت نفسه ، سيهتم فادين بعرض واجهة المستخدم في المتصفح وتفاعل AJAX بين المتصفح والخادم. يقدم محرك Vaadin واجهة المستخدم الخاصة بالتطبيق من جانب الخادم في المستعرض ويقوم بتنفيذ جميع تفاصيل تبادل العميل والخادم.



هذا النهج له مزايا عديدة:

• كود جافا أسهل في الكتابة والتصحيح
• يمكنك استخدام مكتبات وأدوات Java الحالية (IDEs ، و compilers ، والاختبار)
• لا يتطلب تطوير خدمة الويب
• الأمن أفضل

والسلبيات:

• تحتاج إلى الكثير من الذاكرة على الخادم لعرض واجهة المستخدم
• من الصعب توسيع نطاق الحل
• عند تطوير التطبيقات المصغرة ، تحتاج إلى تطوير Java API

استنادًا إلى هذه السلبيات والإيجابيات ، استقر Vaadin FW على وجه التحديد في تطوير المشاريع ، حيث يمكن التنبؤ بالأحمال ، كما أن سرعة وسهولة التطوير أهم بكثير من تكلفة الحديد والذاكرة.

ماذا حدث لمجموعة أدوات الويب من Google

طوال الوقت الذي يكون فيه Vaadin مألوفًا لعامة الناس ، كان جزء العميل من Vaadin FW مرتبطًا ارتباطًا وثيقًا بمنتج آخر معروف - Google Web Toolkit (GWT). جعل هذا الترادف من الممكن كتابة مكونات واجهة المستخدم نفسها وواجهة برمجة التطبيقات للخادم لها بلغة واحدة - Java ، والتي كانت مناسبة تمامًا.

في السنوات الأخيرة ، لم يتم تطوير Google Web Toolkit ، ومنذ عام 2015 ننتظر جميعًا ظهور GWT 3.0 / J2CL ، الذي تم الإعلان عنه في GWT.Create 2015:

• إنشاء تطبيق GWT 3.0 باستخدام Java 8
• توقف عن تسميتها GWT 3.0
• j2cl المراوغ

حدث حدث مهم في هذه الفترة الراكدة (2015-2017): ظهرت مواصفات Web Components وإطار عمل Google آخر ، Polymer. على ما يبدو ، كانت هذه بداية نهاية GWT.

تجدر الإشارة إلى أن GWT 3 يتم تطويره كإطار عمل داخلي من Google ويتم تطويره داخليًا. لذلك ، لا يمكن للمجتمع التأثير على العملية بأي شكل من الأشكال ، أو على الأقل لا يرى أن العملية مستمرة.

على خلفية هذا الركود ، اتخذ فريق فادين قرارًا صعبًا بالتخلي عن التطوير بالكامل في GWT وإعادة كتابة جزء العميل من إطار عملهم . لا يمكن أن تمر هذه التغييرات دون أن يلاحظها أحد وتخيف كل من يتطور بالفعل على فادين.

مكونات الويب

مكونات الويب هي مجموعة من المعايير. تم اقتراحها وترويجها بنشاط من قبل اللاعبين من Google ، ولكن تم دعم المبادرة بالفعل في Mozilla. في الجوهر ، هذه تقنيات لإنشاء مكونات واجهة المستخدم للويب ، بحيث تدعم تغليف السلوك والعرض التقديمي. والميزة الرئيسية هي إمكانية إعادة الاستخدام.

المفاهيم الأساسية:

• Custom Elements - API لإنشاء عناصر HTML الخاصة بك
• Shadow DOM هي أداة لتغليف مكونات HTML وعزل عرضها المرئي من قواعد CSS العالمية. باختصار ، يمكنك إنشاء مكون ، على سبيل المثال ، نموذج طلب ، ولا تخشى أن تنكسر أنماطه على بعض صفحات الموقع بسبب قواعد CSS في هذه الصفحة.
• قوالب HTML - القدرة على وضع كتل سلبية تحتوي على عناصر DOM فارغة في مستند HTML. يتم تحليل هذه الكتل من قبل المتصفح ، ولكن لا يتم عرضها أو تشغيل التعليمات البرمجية الخاصة بها. يقترح استخدامها كقوالب لتقديم البيانات.
• استيراد HTML - القدرة على استيراد مستند HTML كوحدة نمطية بكل تخطيطها وأنماطها و JS

على سبيل المثال ، إذا نظرت الآن إلى شجرة YouTube DOM ، فستجد استخدام Custom Elements و Shadow DOM:



تسمح لك كل هذه الأشياء بكتابة مكونات واجهة مستخدم عصرية جديدة للويب.

تجدر الإشارة إلى أن دعم المتصفح بعيد عن الكمال ولا يزال هناك حاجة إلى ملفات متعددة ، على سبيل المثال ، لـ Edge.

بوليمر

Polymer هي مكتبة صغيرة على أعلى معايير Web Components مصممة لتبسيط استخدامها. مثال:

//    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); 

في الواقع ، يقوم البوليمر بكل ما فعلته GWT من قبل ، ولكنه في نفس الوقت متوافق مع أي مكونات JS وأطر عمل أخرى ، على سبيل المثال ، React و Angular.

مكونات فادين

عودة إلى فادين. لفترة طويلة ، كانت Vaadin تصنع منتجًا يدعى Vaadin Components - مكونات واجهة المستخدم لمطوري الواجهة الأمامية التي يمكن تضمينها في أي تطبيق JS.



تعتمد هذه المكونات على مكونات الويب والبوليمر!

كما نرى الآن ، كان مطارًا بديلاً لـ Vaadin Framework ، مما سمح لنا بمغادرة Google Web Toolkit وتطوير إطار عمل جديد لم تكن مكوناته موجودة بعد. تم حل مشكلة الدجاج والبيض وأصبحت مكونات Vaadin الواجهة الأمامية لـ Vaadin 10 القادم.

تدفق فادين

يتضمن Vaadin 8 آلية مزامنة حالة واجهة المستخدم ودعم بروتوكول RPC ثنائي الاتجاه (استدعاء الإجراء عن بُعد). كان هذا ممكنًا بفضل GWT ، حيث تمت كتابة الواجهات والفئات المشتركة للخادم والعميل في Java.

جنبًا إلى جنب مع التخلي عن GWT ، كان مطلوبًا تنفيذ آلية جديدة تسمح بالتكامل الشفاف مع واجهة JS الأمامية وخلفية Java. كانت هذه الآلية Vaadin Flow (كما تم استخدام هذا الاسم منذ فترة طويلة للإشارة إلى Vaadin 10 بالكامل).

يحتوي مخطط التدفق على هذا المخطط:



معناه الرئيسي كما يلي:

• يتم دعم مزامنة حالة واجهة المستخدم من الخادم إلى العميل
• يمكن أن يشترك جزء الخادم في أحداث مكونات واجهة المستخدم ، وسيتم تنفيذ طلب AJAX
• يتم تنفيذ منطق الأعمال على الخادم ، يتم تحميل البيانات المعروضة في واجهة المستخدم فقط في متصفح الويب
• يستخدم جانب الخادم جافا
• يمكن للعميل استخدام قوالب HTML و CSS و JS و Polymer

بالنسبة لي ، هذا يعني أن Vaadin سيكون لديه المزيد من التقنيات الأمامية ، والآن من الواضح أن Java وحدها ليست كافية (بالنسبة لـ Vaadin 8 ، ستكون Java كافية بالنسبة لك ولن تكون هناك حاجة إلى HTML / CSS). من ناحية أخرى ، أصبح من السهل الآن دمج كود JS.

منصة فادين

تم تطوير كل مكون من مكونات Vaadin 10 بشكل منفصل وفي أفضل تقاليد عالم JS - وحدات صغيرة مستقلة بقدر الإمكان عن بعضها البعض. في الوقت نفسه ، يتم حزم جزء العميل من المكونات في JAR بتنسيق WebJARs: www.webjars.org

هذا أمر مخيف قليلاً ، خاصة إذا نظرت إلى الحد الأدنى من التصميم:



من أجل السيطرة على هذه الفوضى بطريقة ما ، ظهر مشروع BOM (فاتورة المواد) يسمى منصة Vaadin .

هذا ليس منتجًا مستقلاً ، ولكنه مجرد قائمة بالإصدارات المتوافقة من المكونات والأدوات المصممة بتنسيق Maven BOM .

يتصل Maven على النحو التالي :

 <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> 

ميزات Vaadin 10

المجموع ، يتكون الإطار بأكمله من 3 مكونات:

1. مكونات فادين - الواجهة الأمامية
2. تدفق فادين - النقل
3. Server Components API - Java API لمكونات واجهة المستخدم

من الجدير بدء التطوير بالبرنامج التعليمي الرسمي .

أيضا ، أوصي بعقد ندوة جديدة .

مقبلات

يمكنك التعرف على إطار العمل من الصفحة . ستجد هناك أمثلة على المشاريع ، بما في ذلك الحزمة الكاملة القائمة على Spring Boot.

يمكن للمعجبين المتحمسين لـ Spring Boot المتابعة مباشرة إلى start.spring.io واختيار Vaadin من بين إطارات الويب هناك.

يمكن بدء مشروع بسيط بفئة Java واحدة ، على سبيل المثال:

 //  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 ، ولكن! يجب عليك بالتأكيد إلقاء نظرة على صفحة مطابقة المكونات .

Element API

ميزة Killer Vaadin 10 - تحكم في عناصر DOM مباشرة من كود Java من جانب الخادم.

 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 (قيمة get / set و ValueChangeListener) ، هناك فئة Binder مناسبة:

 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> 

تدعم النماذج ربط البيانات التعريفية ويمكنك كتابة JavaScript الأصلي الذي سيتم تنفيذه في المستعرض كما هو. يتيح لك هذا تنفيذ جزء من أبسط منطق لواجهة المستخدم دون إرسال الطلبات إلى الخادم.

الأحداث

معالجة حدث المكون بسيطة للغاية :

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

هنا لن تلاحظ الفرق مع Vaadin 8.

التوجيه

أصبحت الملاحة والتوجيه في التطبيق ما يجب أن تكون عليه :

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

يمكن أن تحدد طرق العرض عنوان URL الذي تعالجه ، والمعلمات التي تتطلبها من العنوان ، والمزيد.

تطوير المكونات

بالنسبة إلى Vaadin 10 ، يمكنك تطوير المكونات بالطرق التالية:

• تكامل مكون ويب موجود: vaadin.com/docs/v10/flow/web-components/ Integrating-a-web-component.html
• ربط كود JS بالقالب مباشرة: vaadin.com/docs/v10/flow/importing-dependencies/tutorial-importing.html
• تطوير المكونات المركبة من الموجودة:
• vaadin.com/docs/v10/flow/creating-components/tutorial-component-composite.html

ربما يكون هذا النهج المباشر لتطوير المكونات المخصصة هو أكبر خطوة إلى الأمام. لم يعد من الضروري كتابة الأغلفة لـ JS على GWT ، ثم كتابة جانب الخادم على Vaadin.

موضوع Lumo

بدلاً من SASS ، تُستخدم متغيرات CSS الآن للموضوعات المرئية ، أي لم تعد بحاجة إلى تجميع CSS عند بناء المشروع:

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

ويتم استبدال نسق Valo بموضوع Lumo مخصص جديد.

الهجرة مع فادين مهاجم 8

خيارات الترحيل من Vaadin 8 موصوفة في الوثيقة: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

هنا لدي أخبار سيئة لك: إذا كتبت مشروعًا ضخمًا على Vaadin 8 ، فستحتاج إلى إعادة كتابته بالكامل عند التبديل إلى Vaadin 10. لا يوجد مسار ترحيل ، من الكلمة على الإطلاق!

Vaadin 10 و Vaadin 8 متشابهان في عدة جوانب:

• نهج جانب الخادم
• جافا لتطوير منطق واجهة المستخدم
• نفس النهج لربط البيانات

خلاصة القول: Vaadin 10 هو إطار عمل جديد مكتوب من نقطة الصفر .

كما وعد المطورون ، سيتم دعم Vaadin 8 حتى عام 2022 ، وقد تظهر أساليب الترحيل.

الخلاصة

أعتقد أنه من المهم أن يتم كتابة موقع Vaadin الجديد في Vaadin Flow ، والذي أصبح المعيار الفعلي لتقنيات الواجهة الأمامية ، حيث تم تحديد نضج لغة البرمجة من خلال ما إذا كان مترجمها مكتوبًا بنفس اللغة.

آمل أن تتمكن الآن من إبداء رأيك حول Vaadin 10. بشكل عام ، هذا إطار جيد واحتياطي ضخم للمستقبل. بالنسبة لي ، تعد هذه ساحة تدريب تجريبية ممتازة للأفكار والأساليب الجديدة لبناء واجهة مستخدم.