Geekly articles weekly

Vaadin Flow - rusa yang aneh

Setiap perubahan, bahkan perubahan menjadi lebih baik,
selalu tidak nyaman

Richard Hooker

Seperti yang Anda ketahui, Vaadin adalah salah satu kerangka kerja web Java yang paling populer:


Baru-baru ini, rilis baru kerangka kerja ini untuk mengembangkan UI web, Vaadin 10, telah dirilis.Ada beberapa publikasi di Rusia tentang Vaadin 10 dan Vaadin Flow, dan posting ini dimaksudkan untuk mengisi celah ini.


Pembuatnya menempatkan Vaadin Flow sebagai kerangka kerja web Java baru untuk pengembangan aplikasi web dan situs web modern (di sini saya tidak terlalu mempercayainya). Ini adalah bagian dari Platform Vaadin, yang menggantikan produk lain - Kerangka Kerja Vaadin, memungkinkan Anda untuk mengembangkan aplikasi web (atau, tepatnya, UI web) menggunakan standar Java Web Components.

Di sini, di kepala pembaca, kemungkinan besar semuanya sudah campur aduk, semua ini Vaadin Bla Bla, kerangka kerja, platform, dan banyak lagi. Apa yang sedang terjadi

Kami telah menggunakan Vaadin sebagai bagian dari platform CUBA kami untuk sistem back-office UI selama 7 tahun dan selama ini kami telah mengumpulkan banyak pengalaman bekerja dengannya, jadi kami tidak bisa tidak khawatir akan nasibnya. Di bawah potongan Anda akan menemukan spesifikasi saya di Vaadin 10.

Kerangka Vaadin


Vaadin adalah perusahaan Finlandia yang mengembangkan alat dan perpustakaan untuk mengembangkan UI. Mereka membuat kerangka kerja dengan nama yang sama untuk pengembangan web di Jawa.

Vaadin Framework adalah kerangka kerja UI dengan model pemrograman sisi-server di mana semua logika UI dan kondisinya terletak di server, dan hanya kode UI komponen yang dijalankan di browser. Sebenarnya, ini adalah teknologi thin client di mana browser hanya menampilkan apa yang dikatakan server dan semua acara dikirim ke server.

Pendekatan sisi server memungkinkan Anda untuk melupakan fakta bahwa pengembangan dilakukan di bawah web, dan untuk mengembangkan UI sebagai aplikasi Java desktop dengan akses langsung ke data dan layanan di server. Pada saat yang sama, Vaadin akan mengurus menampilkan UI di browser dan interaksi AJAX antara browser dan server. Mesin Vaadin membuat antarmuka pengguna aplikasi sisi server di browser dan mengimplementasikan semua detail pertukaran klien dan server.



Pendekatan ini memiliki banyak keunggulan:

  • Kode Java lebih mudah untuk ditulis dan di-debug
  • Anda dapat menggunakan perpustakaan dan alat Java yang ada (IDE, kompiler, pengujian)
  • Tidak diperlukan pengembangan layanan web
  • Keamanan lebih baik

Dan kontra:

  • Perlu banyak memori di server untuk tampilan UI
  • Solusi skala sulit
  • Saat mengembangkan widget, Anda perlu mengembangkan Java API

Berdasarkan minus dan plus ini, Vaadin FW menetap tepat dalam pengembangan perusahaan, di mana bebannya dapat diprediksi, dan kecepatan serta kemudahan pengembangannya jauh lebih penting daripada biaya besi dan memori.

Apa yang terjadi pada Google Web Toolkit


Sepanjang waktu yang dikenal Vaadin oleh masyarakat umum, bagian klien dari Vaadin FW terkait erat dengan produk terkenal lainnya - Google Web Toolkit (GWT). Tandem ini memungkinkan untuk menulis sendiri komponen UI dan server API untuk mereka dalam satu bahasa - Java, yang cukup nyaman.

Dalam beberapa tahun terakhir, Google Web Toolkit belum berkembang, dan sejak 2015 kita semua menunggu kemunculan GWT 3.0 / J2CL, diumumkan di GWT.Create 2015:


Peristiwa penting terjadi dalam periode stagnan ini (2015-2017): spesifikasi Komponen Web dan kerangka kerja Google lainnya, Polymer, muncul. Rupanya, ini adalah awal dari akhir GWT.

Perlu dicatat bahwa GWT 3 sedang dikembangkan sebagai kerangka kerja Google internal dan pengembangannya dilakukan secara internal. Jadi, masyarakat tidak dapat memengaruhi proses dengan cara apa pun, atau setidaknya tidak melihat bahwa proses itu sedang berlangsung.

Terhadap latar belakang stagnasi ini, tim Vaadin membuat keputusan yang sulit untuk sepenuhnya meninggalkan pengembangan pada GWT dan menulis ulang bagian klien dari kerangka kerja mereka . Perubahan-perubahan ini tidak bisa tanpa disadari dan membuat takut semua orang yang sudah berkembang di Vaadin.

Komponen web


Komponen Web adalah seperangkat standar. Itu diusulkan dan dipromosikan secara aktif oleh orang-orang dari Google, tetapi inisiatif tersebut telah didukung di Mozilla. Intinya, ini adalah teknologi untuk membuat komponen UI untuk web, sehingga mereka mendukung enkapsulasi perilaku dan presentasi. Dan plus utama adalah kemungkinan penggunaan kembali.

Konsep kunci:

  • Elemen Khusus - API untuk membuat elemen HTML Anda
  • Shadow DOM adalah alat untuk merangkum komponen HTML dan mengisolasi presentasi visual mereka dari aturan CSS global. Singkatnya, Anda dapat membuat komponen, misalnya, formulir pemesanan, dan jangan takut bahwa gaya akan terputus pada beberapa halaman situs karena aturan CSS halaman ini.
  • Template HTML - kemampuan untuk menempatkan blok pasif yang mengandung elemen kosong DOM dalam dokumen HTML. Blok semacam itu diuraikan oleh browser, tetapi tidak dirender atau dijalankan kodenya. Mereka disarankan untuk digunakan sebagai template untuk rendering data.
  • Impor HTML - kemampuan untuk mengimpor dokumen HTML sebagai modul dengan semua tata letak, gaya, dan JS-nya

Misalnya, jika sekarang Anda melihat pohon DOM YouTube, Anda akan menemukan penggunaan Elemen Kustom dan DOM Bayangan:



Semua hal ini memungkinkan Anda untuk menulis komponen UI baru yang modis untuk web.

Perlu diakui bahwa dukungan browser masih jauh dari sempurna dan polyfill masih diperlukan , misalnya untuk Edge.

Polimer


Polymer adalah perpustakaan kecil di atas standar Komponen Web yang dirancang untuk menyederhanakan penggunaannya. Contoh:

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

Faktanya, Polymer melakukan semua yang GWT lakukan sebelumnya, tetapi pada saat yang sama itu kompatibel dengan komponen JS dan kerangka kerja lainnya, misalnya, React and Angular.

Komponen Vaadin


Kembali ke Vaadin. Untuk waktu yang lama, Vaadin telah membuat produk yang disebut Vaadin Components - komponen UI untuk pengembang front-end yang dapat disematkan dalam aplikasi JS apa pun.



Komponen-komponen ini didasarkan pada Komponen Web dan Polimer!

Seperti yang kita lihat sekarang, ini adalah aerodrome cadangan untuk Kerangka Kerja Vaadin, yang memungkinkan kami meninggalkan Google Web Toolkit dan mengembangkan kerangka kerja baru yang komponennya belum ada. Masalah ayam dan telur telah diatasi dan Komponen Vaadin telah menjadi ujung depan dari Vaadin 10 mendatang.

Aliran Vaadin


Vaadin 8 termasuk mekanisme sinkronisasi keadaan UI dan dukungan untuk protokol RPC dua arah (panggilan prosedur jarak jauh). Ini dimungkinkan berkat GWT, karena antarmuka umum dan kelas server dan klien ditulis dalam Java.

Bersama dengan ditinggalkannya GWT, diperlukan untuk menerapkan mekanisme baru yang akan memungkinkan integrasi transparan dengan frontend JS dan backend Java. Mekanisme ini adalah Vaadin Flow (dan juga nama ini telah lama digunakan untuk merujuk pada keseluruhan Vaadin 10).

Dokumentasi Flow memiliki skema ini:



Arti utamanya adalah sebagai berikut:

  • Sinkronisasi keadaan UI dari server ke klien didukung
  • bagian server dapat berlangganan ke acara komponen UI, dan permintaan AJAX akan dieksekusi
  • logika bisnis dijalankan di server, hanya data yang ditampilkan di UI yang dimuat ke browser web
  • sisi server menggunakan Java
  • klien dapat menggunakan template HTML, CSS, JS dan Polymer

Bagi saya, ini berarti bahwa akan ada lebih banyak teknologi front-end di Vaadin, dan sekarang Java saja jelas tidak cukup (untuk Vaadin 8, Java akan cukup untuk Anda dan HTML / CSS tidak diperlukan). Di sisi lain, integrasi kode JS yang mudah sekarang dimungkinkan.

Platform Vaadin


Setiap komponen Vaadin 10 dikembangkan secara terpisah dan dalam tradisi terbaik dunia JS - modul kecil yang se independen mungkin dari satu sama lain. Pada saat yang sama, bagian klien dari komponen dikemas dalam JAR dalam format WebJAR: www.webjars.org

Ini sedikit menakutkan, terutama jika Anda melihat desain minimum:



Untuk mengendalikan kekacauan ini, sebuah proyek BOM (Bill of Material) bernama Vaadin Platform muncul .

Ini bukan produk independen, tetapi hanya daftar versi komponen dan alat yang kompatibel yang dirancang dalam format BOM Maven .

Terhubung ke Maven sebagai berikut :

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

Fitur Vaadin 10


Total, keseluruhan kerangka kerja terdiri dari 3 komponen:

  1. Komponen Vaadin - frontend
  2. Vaadin Flow - transportasi
  3. Server Components API - Java API untuk komponen UI

Layak untuk memulai pengembangan dengan tutorial resmi .

Juga, saya sarankan webinar segar .

Pemula


Anda bisa lebih terbiasa dengan kerangka kerja dari halaman . Di sana Anda akan menemukan contoh proyek, termasuk tumpukan penuh berdasarkan Boot Musim Semi.

Penggemar Ardent dari Spring Boot dapat melanjutkan langsung ke start.spring.io dan memilih Vaadin di antara kerangka web di sana.

Proyek minimal dapat dimulai dengan satu kelas Java, misalnya:

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

Secara umum, Anda dapat menulis di Vaadin 10, seperti pada Vaadin 8, TAPI! Anda harus melihat halaman pencocokan komponen .

API Elemen


Fitur pembunuh Vaadin 10 - mengontrol elemen DOM langsung dari kode Java sisi-server.

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

Anda juga dapat mengelola atribut yang sudah ditempelkan:

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

Tentu saja, ini bukan pengganti untuk komponen UI, tetapi API yang baik untuk perubahan tata letak sederhana saat mengembangkan komponen UI tidak diperlukan.

Pengikatan data


Untuk bekerja dengan komponen yang mengimplementasikan antarmuka HasValue (dapatkan / set nilai dan ValueChangeListener), ada kelas Binder yang nyaman:

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

Seperti yang Anda lihat dari contoh, pengikatan yang diketik secara statis berdasarkan ekspresi lambda didukung.

Selain itu, binder dapat memasang konverter dan validator nilai:

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

Templat


Template HTML adalah pengaturan huruf:

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

Template mendukung pengikatan data deklaratif dan Anda dapat menulis JavaScript asli yang akan dieksekusi di browser apa adanya. Ini memungkinkan Anda untuk mengimplementasikan bagian dari logika UI paling sederhana tanpa mengirim permintaan ke server.

Acara


Penanganan komponen komponen sangat sederhana :

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

Di sini Anda tidak akan melihat perbedaannya dengan Vaadin 8.

Routing


Navigasi dan perutean dalam aplikasi telah menjadi seperti seharusnya :

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

Tampilan dapat menentukan URL mana yang mereka proses, parameter apa yang mereka butuhkan dari alamat, dan banyak lagi.

Pengembangan Komponen


Untuk Vaadin 10, Anda dapat mengembangkan komponen dengan cara berikut:


Pendekatan langsung seperti itu untuk pengembangan komponen khusus mungkin merupakan langkah maju terbesar. Tidak perlu lagi menulis pembungkus untuk JS di GWT, kemudian menulis sisi server di Vaadin.

Tema Lumo


Alih-alih SASS, Variabel CSS sekarang digunakan untuk tema visual, mis. tidak perlu lagi mengompilasi CSS saat membangun proyek:

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

Dan tema Valo digantikan oleh tema Lumo kustom baru.



Bermigrasi dengan Vaadin FW 8


Opsi migrasi dari Vaadin 8 dijelaskan dalam dokumen: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

Di sini saya punya berita buruk untuk Anda: jika Anda menulis proyek besar di Vaadin 8, maka Anda harus menulis ulang sepenuhnya ketika beralih ke Vaadin 10. Tidak ada jalur migrasi, dari kata sama sekali!

Vaadin 10 dan Vaadin 8 serupa dalam beberapa aspek:

  • Pendekatan sisi server
  • Java untuk mengembangkan logika UI
  • Pendekatan yang Sama untuk Mengikat Data

Intinya: Vaadin 10 adalah kerangka kerja baru yang ditulis dari awal .

Seperti yang dijanjikan pengembang, Vaadin 8 akan didukung hingga 2022, dan pendekatan migrasi mungkin muncul.

Kesimpulan


Saya menganggap penting bahwa situs web Vaadin baru ditulis dalam Vaadin Flow, yang menjadi standar de facto untuk teknologi front-end, karena kematangan bahasa pemrograman ditentukan oleh apakah kompilernya ditulis dalam bahasa yang sama.

Saya harap sekarang Anda dapat membuat pendapat Anda tentang Vaadin 10. Secara umum, ini adalah kerangka kerja yang baik dan cadangan besar untuk masa depan. Bagi saya, ini adalah tempat pelatihan eksperimental yang sangat baik untuk ide-ide baru dan pendekatan untuk membangun UI.

Source: https://habr.com/ru/post/id416893/

More articles:


All Articles