Phoenix LiveView: ketika Anda tidak lagi membutuhkan JavaScript *

* untuk membuat halaman dinamis

Belum lama ini, pada 12/12/2018, rilis perpustakaan baru untuk penggemar kerangka phoenix yang disebut Phoenix LiveView diumumkan . Saya ingin berbagi dengan Anda kesan saya tentang penggunaannya dan phoenix secara umum, dan pada artikel berikutnya cobalah menulis permainan browser yang sederhana. Bagian dari artikel dengan pendapat pribadi tidak sepenuhnya benar, saya akan mencoba menjelaskan kelebihan pengembangan web menggunakan contoh phoenix versus php

Bagian teoretis

Phoenix adalah kerangka kerja dalam elixir bahasa fungsional. Tolong jangan bingung dengan Phalcon untuk php.

Phoenix LiveView adalah perpustakaan baru yang hebat yang memungkinkan Anda membuat halaman web dinamis tanpa menulis kode javascript melalui komunikasi dua arah di soket web dan rendering sisi server. Seperti yang kita ketahui, soket web phoenix diimplementasikan dengan baik, sehingga akan ada kinerja yang cukup untuk sebagian besar ide yang Anda rencanakan untuk diterapkan.

Ada beberapa opsi untuk menggunakan LiveView:

• Memeriksa input data ke dalam formulir (validasi), menekan tombol, menyembunyikan dan menampilkan blok, lengkapi-otomatis.
• Acara dari server, seperti notifikasi, dasbor, penghitung.

Saat ini terbatas dan tersedia di masa depan:

• Navigasi halaman dan pagination. Mereka dapat dibangun menggunakan LiveView, tetapi saat ini Anda akan kehilangan fungsi transisi "mundur / maju". Dukungan untuk `pushState` termasuk dalam paket.
• Tampilkan data yang terus tumbuh - obrolan, log online, dll. dapat dibuat menggunakan LiveView, tetapi saat ini Anda harus menyimpan semua data dalam keadaan aplikasi di server. Dukungan untuk memperbarui sebagian data status sedang dalam pengembangan.
• Bekerja dengan penundaan ketika suatu negara berubah. LiveView menyimpan keadaan aplikasi di sisi server dan ini memastikan operasi antarmuka yang benar dengan penundaan serius.
• Serangkaian fungsi lengkap untuk memodelkan situasi ini akan muncul di versi mendatang.

Apa yang buruk tentang LiveView:

• Animasi Misalnya, tampilan menu dengan klik dapat diimplementasikan melalui LiveView, tetapi tampilan yang halus lebih baik untuk diberikan dalam css atau js.
• UI yang optimis. Aplikasi ini dirancang untuk bekerja terus-menerus dengan status server dan status ini bukan pada klien. Semua kode html untuk acara apa pun disiapkan di server dengan status baru dan terbang melalui soket web ke klien, semua perubahan yang terlihat terjadi dengan mengganti kode html.

Bagaimana cara kerja liveview?

Gambar diambil dari elixirschool

LiveView dimulai dengan permintaan HTTP normal dan respons HTML, dan kemudian mulai memantau status aplikasi di server melalui soket web, sambil menjamin tampilan halaman HTML biasa, bahkan jika JavaScript dinonaktifkan. Setiap kali kondisi aplikasi berubah, aplikasi secara otomatis menggambar ulang dan pembaruan dikirim ke klien. Pada klien, menggunakan perpustakaan morphdom , konten diperbarui. Bahkan, logikanya cukup dekat dengan kerangka kerja js modern, hanya tanpa menggunakan DOM virtual.
Agar sesi komunikasi tidak hilang saat menghubungkan kembali, sesi pengguna dengan data yang diperlukan dimulai dari pengontrol dan dikirimkan ke klien. Hanya sesi yang ditandatangani dengan data primer yang disimpan pada klien, itu dikirim ke server saat menghubungkan, atau menghubungkan kembali jika terjadi kegagalan, ke keadaan aplikasi.

Kesan dan pendapat pribadi tentang Phoenix itu sendiri

Dari pengalaman pribadi, saya akan mengatakan bahwa saya jarang bertemu aplikasi tertulis dengan jelas dalam tim yang terdiri dari 3 orang atau lebih. Seringkali ada kesalahan layanan di php (server) nodejs (websocker) bereaksi / vue (depan) ada juga dimasukkan untuk hal-hal yang bekerja "perlahan" di php. Kami akan menempatkan antrian di redis, maka kami akan menghubungkan rabbitmq, dan salah satu pengembang tidak tahu bagaimana menggunakannya dan mengimplementasikannya dalam sql. Seseorang tahu cara menggunakan mahkota dengan benar melalui kawanan dan tidak membuat kembali logika perlindungan dalam kode, dan yang lain menjalankan daemon di php, yang terkadang menempatkan tongkat di roda ketika memperbarui kode dan struktur basis data. Status aplikasi mulai disimpan di mana-mana dan di mana saja, dalam statika kelas, dalam singleton, kadang-kadang bahkan dalam variabel metode statis, aturan penulisan kode mulai berlipat ganda untuk melawan ketidaktahuan bahasa dan pembangunan arsitektur yang benar, tetapi bagaimana jika proyek dimulai oleh programmer tingkat menengah atau junior di lutut, tanpa berpikir bahwa itu semua akan tumbuh menjadi bisnis nyata? Mempertahankan ini saja tidak begitu mudah, bagian dari logika digandakan baik pada klien dan di server (validasi, misalnya). Di SPA, ketika front mulai menggunakan api publik, kami mulai berpikir tentang versi. Dukungan semakin sulit karena Anda harus memenuhi tidak hanya kebutuhan layanan eksternal dan pelanggan, tetapi juga front Anda yang sering berubah, dan Anda tidak ingin menduplikasi kode. Graphql kacau. Seiring waktu, kebun binatang perpustakaan tumbuh dan perusahaan mulai mempekerjakan lebih banyak pengembang.

Di sini saya melihat keunggulan phoenix. Di luar kotak, kami memiliki pengganti php (elixir + Phoenix), nodejs (websockets di Phoenix .ocket), reaksi / vue (Phoenix.LiveView), redis (ets), rabbitmq (ets), cron (mungkin melalui GenServer), daemon (GenServer ), basis data terpotong (mnesia). Kami memiliki caching dalam bahasa itu sendiri melalui mnesia atau ets, mahkota atau setan tanpa masalah sama sekali. multitasking dan bekerja di latar belakang selama bertahun-tahun di "elixir in the blood." Penyimpanan negara paling sering di server gen. Api publik khusus untuk kebutuhan layanan eksternal, spa akan segera ditulis di LiveView. Dukungan untuk api akan jauh lebih mudah. Skalabilitas ke segala arah melalui bahasa, kecepatan pekerjaan hanya dibatasi oleh sumber penyimpanan data, semua yang lain bekerja dengan sangat cepat. Skema kerja yang cukup jelas jika Anda pernah mempelajari cara kerja plug dan apa samb. Pembuatan kode, "arsitektur microservice" - lihat ke arah aplikasi payung. Mereka mencoba menyelesaikan semua ini dengan buruh pelabuhan dengan orkestrasi, dll. menciptakan pekerjaan untuk sejumlah besar insinyur devops.

Ringkasan

Coba pasang elixir dan jalankan phoenix. Dalam artikel ini saya mencoba untuk menyatakan "air", pendapat pribadi dan bagian teoretis, sehingga di bagian selanjutnya saya akan membatasi diri hanya untuk kode dan logika. Kami akan menulis game sederhana dalam format DogView DogView tetapi tanpa fungsi clicker. Ini adalah artikel pertama saya, saya meminta Anda untuk tidak secara ketat menghakimi dan tidak menganggapnya terlalu serius, saya sengaja menunjukkan keuntungan dari Phoenix dan melewatkan kekurangannya. Lebih baik merasakannya dalam praktik daripada seperti ini berdasarkan pendapat orang asing.

Bergabunglah dengan komunitas pengembang proelixir di elixir atau temukan @proelixir di telegram. Berita bahasa baru dikumpulkan oleh bot di saluran @proelixir_news.