Artikel ini untuk pemula dan mereka yang ingin sedikit panduan dalam hal dan teknologi aplikasi web modern. Artikel ini menjelaskan bagaimana aplikasi web berbeda dari situs, apa aplikasi web, apa yang terdiri dari dan bagaimana mereka bekerja.
1. Bagaimana aplikasi web berbeda dari situs
Bagi saya, situs adalah sesuatu yang informatif dan statis: kartu nama perusahaan, situs resep, portal kota atau wiki. Satu set file HTML yang sudah disiapkan sebelumnya yang ada di server jarak jauh dan diberikan ke browser berdasarkan permintaan.
Situs berisi berbagai statika, yang seperti file HTML tidak dihasilkan dengan cepat. Paling sering ini adalah gambar, file CSS, skrip JS, tetapi mungkin ada file lain: mp3, mov, csv, pdf.
Blog, kartu nama dengan formulir kontak, halaman arahan dengan banyak efek, saya juga merujuk ke situs untuk kesederhanaan. Meskipun, tidak seperti situs yang sepenuhnya statis, mereka sudah memasukkan semacam logika bisnis.
Dan aplikasi web adalah sesuatu yang secara teknis lebih kompleks. Di sini halaman HTML dihasilkan dengan cepat tergantung pada permintaan pengguna. Klien email, jejaring sosial, mesin pencari, toko online, program online untuk bisnis, ini semua adalah aplikasi web.
2. Apa itu aplikasi web
Aplikasi web dapat dibagi menjadi beberapa jenis, tergantung pada kombinasi berbeda dari komponen utamanya:
- Backend (backend atau sisi server aplikasi) berjalan pada komputer jarak jauh, yang dapat ditemukan di mana saja. Itu dapat ditulis dalam berbagai bahasa pemrograman: PHP, Python, Ruby, C # dan lainnya. Jika Anda membuat aplikasi hanya menggunakan sisi server, maka sebagai akibat dari transisi antara bagian, pengiriman formulir, pembaruan data, server akan menghasilkan file HTML baru dan halaman di browser akan memuat ulang.
- Frontend (frontend atau sisi klien dari aplikasi) berjalan di browser pengguna. Bagian ini ditulis dalam bahasa pemrograman Javascript. Aplikasi hanya dapat terdiri dari bagian klien jika tidak diperlukan untuk menyimpan data pengguna lebih dari satu sesi. Misalnya, editor foto atau mainan sederhana.
- Aplikasi satu halaman (SPA atau aplikasi satu halaman). Pilihan yang lebih menarik adalah saat kedua bagian belakang dan bagian depan digunakan. Menggunakan interaksi mereka, Anda dapat membuat aplikasi yang akan berfungsi tanpa memuat ulang halaman apa pun di browser. Atau dalam versi yang disederhanakan, ketika transisi antar partisi menyebabkan reboot, tetapi tindakan apa pun di partisi dilakukan tanpa mereka.
3. Kerangka kerja Pyhon Django alias backend
Dalam pengembangan, kerangka kerja adalah seperangkat pustaka dan alat siap pakai yang membantu Anda membuat aplikasi web. Sebagai contoh, saya akan menjelaskan prinsip pengoperasian kerangka kerja Django yang ditulis dalam bahasa pemrograman Python.
Langkah pertama adalah permintaan dari pengguna ke router (URL dispatcher), yang memutuskan fungsi mana untuk memproses permintaan untuk menelepon. Keputusan dibuat berdasarkan daftar aturan yang terdiri dari ekspresi reguler dan nama fungsi: jika ada url, maka fungsi tersebut.
Fungsi yang dipanggil oleh router disebut view. Logika bisnis apa pun mungkin terkandung di dalamnya, tetapi paling sering itu adalah salah satu dari dua hal: data diambil dari basis data, disiapkan dan dikembalikan ke depan; atau permintaan datang dengan data dari beberapa formulir, data ini diperiksa dan disimpan dalam database.
Data aplikasi disimpan dalam database (DB). Database relasional yang paling umum digunakan. Ini adalah ketika ada tabel dengan kolom yang telah ditentukan dan tabel ini saling berhubungan melalui salah satu kolom.
Data dalam database dapat dibuat, dibaca, dimodifikasi, dan dihapus. Kadang-kadang, untuk menunjukkan tindakan ini, orang dapat menemukan singkatan CRUD (Buat Baca Perbarui Hapus). Untuk meminta data dalam database, bahasa SQL khusus (bahasa permintaan terstruktur) digunakan.
Di Django, model digunakan untuk bekerja dengan database. Mereka memungkinkan Anda untuk menggambarkan tabel dan membuat pertanyaan pada pengembang python biasa, yang jauh lebih nyaman. Anda harus membayar untuk kenyamanan ini: permintaan seperti itu lebih lambat dan kemampuannya terbatas dibandingkan dengan menggunakan SQL murni.
Data yang diterima dari database disiapkan dalam pandangan untuk dikirim ke depan. Mereka dapat diganti menjadi template dan dikirim sebagai file HTML. Tetapi dalam kasus aplikasi satu halaman, ini terjadi hanya sekali, ketika halaman HTML dihasilkan, dimana semua skrip JS terhubung. Dalam kasus lain, data serial dan dikirim dalam format JSON.
4. Javascript frameworks alias frontend
Bagian klien dari aplikasi adalah skrip yang ditulis dalam bahasa pemrograman Javascript (JS) dan dieksekusi di browser pengguna. Sebelumnya, semua logika klien didasarkan pada penggunaan perpustakaan JQuery, yang memungkinkan Anda untuk bekerja dengan DOM, animasi pada halaman dan membuat permintaan AJAX.
DOM (model objek dokumen) adalah struktur halaman HTML. Bekerja dengan DOM berarti menemukan, menambahkan, memodifikasi, memindahkan, dan menghapus tag HTML.
AJAX (javascript dan XML asinkron) adalah nama umum untuk teknologi yang memungkinkan Anda membuat permintaan asinkron (tanpa memuat ulang halaman) ke server dan bertukar data. Karena bagian klien dan server dari aplikasi web ditulis dalam bahasa pemrograman yang berbeda, untuk pertukaran informasi, perlu untuk mengubah struktur data (misalnya, daftar dan kamus) di mana ia disimpan ke dalam format JSON.
JSON (JavaScript Object Notation) adalah format universal untuk bertukar data antara klien dan server. Ini adalah string sederhana yang dapat digunakan dalam bahasa pemrograman apa pun.
Serialisasi adalah konversi daftar atau kamus menjadi string JSON. Sebagai contoh:
Kamus:
{ 'id': 1, 'email': 'mail@example.com' }
String berseri:
'{"id": 1, "email": "mail@example.com"}'
Deserialisasi adalah transformasi terbalik dari string ke dalam daftar atau kamus.
Dengan memanipulasi DOM, Anda dapat sepenuhnya mengontrol konten halaman. Menggunakan AJAX, Anda dapat bertukar data antara klien dan server. Dengan teknologi ini, Anda sudah dapat membuat SPA. Tetapi ketika membuat aplikasi yang kompleks, kode front-end berbasis jQuery dengan cepat menjadi membingungkan dan sulit dipertahankan.
Untungnya, kerangka kerja Javascript telah menggantikan JQuery: Backbone Marionette, Angular, React, Vue, dan lainnya. Mereka memiliki filosofi dan sintaks yang berbeda, tetapi mereka semua memungkinkan Anda untuk mengelola data di ujung depan dengan kenyamanan yang jauh lebih besar, memiliki mesin templat dan alat untuk membuat navigasi antar halaman.
Template HTML adalah halaman HTML yang cerdas di mana variabel digunakan sebagai pengganti nilai-nilai spesifik dan berbagai operator tersedia:
jika ,
untuk loop, dan lainnya. Proses mendapatkan halaman HTML dari template ketika variabel diganti dan operator diterapkan disebut rendering template.
Halaman yang dihasilkan ditampilkan kepada pengguna. Beralih ke bagian lain di SPA menggunakan templat yang berbeda. Jika Anda perlu menggunakan data lain dalam templat, maka mereka diminta dari server. Semua pengiriman formulir dengan data adalah permintaan AJAX ke server.
5. Bagaimana klien dan server berkomunikasi satu sama lain
Klien berkomunikasi dengan server melalui HTTP. Dasar dari protokol ini adalah permintaan dari klien ke server dan respon dari server ke klien.
Untuk kueri, mereka biasanya menggunakan metode GET jika kita ingin mendapatkan data, dan POST jika kita ingin mengubah data. Permintaan juga menunjukkan Host (domain situs), badan permintaan (jika itu permintaan POST) dan banyak informasi teknis tambahan.
Aplikasi web modern menggunakan protokol HTTPS, versi HTTP yang diperluas dengan dukungan untuk enkripsi SSL / TLS. Menggunakan saluran transmisi data terenkripsi, terlepas dari pentingnya data ini, telah menjadi bentuk yang baik di Internet.
Ada permintaan lain yang dibuat sebelum HTTP. Ini adalah permintaan DNS (sistem nama domain). Diperlukan untuk mendapatkan alamat ip yang terikat dengan domain yang diminta. Informasi ini disimpan di browser dan kami tidak lagi menghabiskan waktu untuk hal ini.
Ketika permintaan dari browser mencapai server, itu tidak langsung sampai ke Django. Pertama, diproses oleh server web Nginx. Jika file statis diminta (misalnya, gambar), maka Nginx sendiri mengirimkannya sebagai respons kepada klien. Jika permintaannya tidak statis, maka Nginx harus proxy (transfer) ke Django.
Sayangnya, dia tidak tahu caranya. Oleh karena itu, program lapisan lain digunakan - server aplikasi. Misalnya, untuk aplikasi python, bisa berupa uWSGI atau Gunicorn. Dan sekarang mereka mengirim permintaan ke Django.
Setelah Django memproses permintaan, ia mengembalikan respons dengan halaman HTML atau data, dan kode respons. Jika semuanya baik-baik saja, maka kode responsnya adalah 200; jika halaman tidak ditemukan, maka - 404; jika kesalahan terjadi dan server tidak dapat memproses permintaan, maka - 500. Ini adalah kode yang paling umum.
6. Caching dalam aplikasi web
Teknologi lain yang terus kami temui, yang hadir baik dalam aplikasi web dan perangkat lunak, dan pada tingkat prosesor di komputer dan smartphone kami.
Cache adalah konsep dalam pengembangan ketika data yang sering digunakan, alih-alih mengeluarkannya dari basis data setiap kali, dihitung atau disiapkan dengan cara lain, disimpan di tempat yang mudah diakses. Beberapa contoh penggunaan cache:
- Di Django, permintaan datang untuk menerima data untuk bagan dalam laporan. Kami mendapatkan data dari basis data, menyiapkannya dan memasukkannya ke dalam basis data dengan akses cepat, misalnya memcached selama 1 jam. Atas permintaan berikutnya, kami akan segera mendapatkannya dari memcached dan mengirimkannya ke frontend. Jika kami mengetahui bahwa data tidak lagi relevan, kami membatalkannya (menghapusnya dari cache).
- Untuk caching file statis, penyedia CDN (jaringan pengiriman konten) digunakan. Ini adalah server yang berlokasi di seluruh dunia dan dioptimalkan untuk distribusi statika. Terkadang lebih efisien untuk menempatkan gambar, video, JS-skrip pada CDN daripada server Anda.
- Semua browser memungkinkan caching file statis secara default. Berkat ini, membuka situs bukan yang pertama kali, semuanya memuat terasa lebih cepat. The minus untuk pengembang adalah bahwa dengan cache dihidupkan, perubahan yang dibuat dalam kode tidak selalu langsung terlihat.