ALAT MODEN UNTUK MEMBANGUNKAN LAMAN INTERNET DAN APLIKASI WEB
Krupina Tatyana Aleksandrovna 1, Shcherbakova Svetlana Mikhailovna 1
1 Pedagogi Moscow Universiti Negeri, pelajar sarjana
anotasi
Artikel ini dikhaskan untuk semakan cara moden pembangunan tapak Internet dan aplikasi Web. Masalah mengajar pelajar dan pelajar sekolah teknologi ini juga dibincangkan.
ALAT PEMBANGUNAN MODEN LAMAN DALAM TALIAN DAN APLIKASI WEB
Krupina Tatiana Aleksandrovna 1 , Shcherbakova Svetlana Mikhajlovna 1
1 Universiti Pedagogi Negeri Moscow, Graduan Jabatan Matematik Gunaan dan IT
Abstrak
Artikel ini memberikan gambaran keseluruhan pembangunan laman web moden dan aplikasi berasaskan Web. Ia juga membincangkan masalah melatih pelajar dan murid teknologi ini.
Pemberitahuan masyarakat moden dikaitkan dengan pengenalan alat dan kaedah maklumat dan teknologi komunikasi(ICT) dalam pelbagai bidang aktiviti manusia. Peranan istimewa dalam proses ini sudah pasti tergolong dalam pembangunan teknologi rangkaian dan komunikasi, yang, antara lain, menunjukkan dirinya dalam penciptaan sistem maklumat automatik korporat dan projek rangkaian e-dagang. Memang aktiviti mana-mana perusahaan moden, satu cara atau yang lain, berkaitan dengan penciptaan dan penyelenggaraan laman web korporat.
Piawaian Pendidikan Negeri Persekutuan Moden (FSES) dalam kebanyakan bukan sahaja bidang kejuruteraan tetapi juga bidang kemanusiaan memerlukan graduan mempunyai kemahiran untuk membangun dan mengurus laman Internet.
Kaedah dan alatan untuk membangunkan tapak Internet dan aplikasi Web berkembang secara dinamik daripada keupayaan untuk mencipta tapak kad perniagaan yang mudah kepada pembangunan aplikasi pelayan yang memproses dan menyimpan sejumlah besar data.
Untuk membangunkan tapak web mudah, termasuk tapak web kad perniagaan dengan penerangan dan maklumat hubungan, anda boleh gunakan cara yang berbeza:
- mencipta dokumen HTML, i.e. menggunakan editor Notepad, taipkan kod tersebut bahasa HTML V mod manual dan melaksanakannya menggunakan penyemak imbas pada stesen kerja pelanggan, dan kemudian menerbitkannya dengan pembekal menggunakan perkhidmatan pengehosannya;
- mencipta dokumen HTML yang sama menggunakan Editor Adobe Dreamweaver, mengambil kesempatan daripada pelbagai ciri dan kemudahan;
- gunakan tapak shell siap sedia untuk membangunkan laman web pelbagai bidang dan reka bentuk tematik dan juga menerbitkan tapak di Internet menggunakan perkhidmatan pengehosan percuma atau berbayar.
Tidak seperti pembangunan tapak yang ringkas dan tidak interaktif, untuk pembangunan aplikasi Web yang menjalankan dan memproses data pada pelayan, kaedah dan alatan diperlukan yang melengkapi yang dinyatakan dalam perenggan sebelumnya. Pembangunan aplikasi Web melibatkan, selain mencipta kod HTML, pengaturcaraan dalam bahasa khas. Bahasa yang digunakan untuk membangunkan aplikasi Web ialah pengaturcaraan PHP, dan juga tidak boleh melakukannya tanpa, sebagai contoh, pelayan tempatan pangkalan data Apache dan MySQL.
Mari lihat beberapa lagi alat pengaturcaraan aplikasi Web:
- bahasa pengaturcaraan JavaScript digunakan untuk mencipta dokumen HTML interaktif;
- VBScript digunakan untuk skrip klien dan juga skrip pelayan;
- Perl digunakan untuk pembangunan alat pentadbiran sistem, serta dalam pembangunan skrip CGI, sistem pemprosesan e-mel automatik dan sokongan untuk laman web.
Untuk membangunkan aplikasi Web secara bebas, anda boleh menggunakan sumber Denwer yang diedarkan secara bebas.
Denwer (dari singkatan DNVR - set lelaki Pembangun web) ialah satu set kit pengedaran dan cangkerang perisian yang direka untuk mencipta dan menyahpepijat aplikasi Web dan kandungan dinamik lain halaman Web pada PC yang menjalankan OS.
Set Denwer termasuk:
- tempatan pelayan Apache untuk menjalankan aplikasi pada komputer pengguna, simulasi kefungsian pelayan di mana pembekal akan memasang aplikasi yang dibangunkan itu. Apache ialah perisian merentas platform, diedarkan secara bebas dan disokong oleh pelbagai sistem pengendalian;
- Sistem pengaturcaraan PHP ialah bahasa seperti C untuk membangunkan kod program yang dibenamkan dalam kod HTML tapak dan dilaksanakan pada pelayan untuk tujuan memproses data yang diterima daripada pengguna tapak tertentu. PHP (Hypertext Preprocessor - "Hypertext Preprocessor", asalnya Alat Halaman Utama Peribadi - "Alat untuk mencipta laman web peribadi") – bahasa skrip tujuan am, digunakan untuk membangunkan aplikasi Web, telah dicipta oleh Rasmus Lerdorf pada tahun 1994;
- MySQL ialah perisian yang tersedia secara percuma untuk memproses pangkalan data, termasuk apabila bekerja dengan data yang diterima daripada pelayar klien. MySQL (Bahasa Pertanyaan Berstruktur - " Bahasa tersusun requests") telah dicipta oleh Michael Widenius daripada syarikat Sweden TcX pada tahun 1995.
Tetapkan Program Denwer atau komponennya secara individu digunakan secara meluas oleh kedua-dua amatur dan profesional untuk mencipta dan menyahpepijat aplikasi dan tapak Web. Set ini juga digunakan secara meluas untuk tujuan pendidikan untuk mengajar pengaturcaraan Web kepada pelajar sekolah dan pelajar.
Aplikasi reka bentuk web telah mengubah cara pereka bentuk mereka bentuk laman web untuk masa yang lama. Menggunakan alatan moden menjadikan perkara lebih mudah dan pantas, contohnya jika anda menggunakan apl dan makro pelengkapan automatik. Hari ini, pereka yang lebih suka mereka bentuk secara visual boleh menggunakan beberapa apl ini untuk membuat reka bentuk yang boleh diubah menjadi kod yang kemudiannya akan disematkan dalam talian.
Hakikatnya ialah kebanyakan platform pembangunan web hari ini menjadikannya lebih mudah bagi profesional untuk membangunkan tapak web mereka. Sebagai contoh, jika anda berada di luar jangkauan sambungan Internet dan ingin terus mengusahakan projek anda, aplikasi sedemikian akan sangat membantu dalam hal ini.
Terdapat bilangan yang besar aplikasi hebat untuk pembangunan web, dan berikut ialah beberapa yang terbaik yang boleh anda pertimbangkan untuk menggunakannya.
Ini ialah aplikasi yang boleh membantu anda membuat tapak web standard profesional anda sendiri dalam beberapa minit. ini aplikasi terbaik, yang harus anda pertimbangkan jika anda mencari alat pembangunan web yang akan melakukan segala-galanya untuk anda, terutamanya jika anda pengguna Windows. Terdapat dua versi - percuma dan lanjutan ( versi berbayar), tetapi kedua-duanya sama-sama mengagumkan. Aplikasi ini menggabungkan reka bentuk dan pengekodan WYSIWYG, memberikan anda alat yang bukan sahaja berfungsi dengan cepat, tetapi juga sangat mudah dipelajari. Versi percuma mungkin kekurangan beberapa ciri yang terdapat dalam versi berbayar, tetapi ia masih merupakan aplikasi hebat yang patut diberi perhatian anda.
Ini ialah apl terbaik untuk digunakan, tapak web responsif yang juga akan kelihatan menyenangkan dari segi estetik seperti pada komputer ringkas, dan seterusnya peranti mudah alih. Dengan Mobirise, mencipta tapak web boleh menjadi sangat menyeronokkan. Alat itu disertakan dengan blok yang berbeza, pembangun web yang boleh pilih dan seret ke tempat yang mereka mahu letakkan, dan kemudian tukar tetapan lalai agar sesuai dengan keperluan mereka.
Ia universal penyunting teks, yang disertakan dengan banyak alatan yang menakjubkan untuk pembangun web. Dia mungkin bukan yang terbaik, tetapi dia pasti baik. ini Antara muka Windows, yang menawarkan editor pengaturcaraan yang sangat baik yang merangkumi templat untuk bahasa pengaturcaraan yang paling biasa seperti HTML, VBScript, klien FTP, PHP.
Aplikasi pembangunan web yang sangat responsif yang perlu anda pertimbangkan sebagai salah satu alat untuk projek anda. Tersedia versi percuma dengan sekatan pada ciri yang boleh anda gunakan, dan versi berbayar yang menawarkan fungsi penuh yang boleh anda gunakan dalam pembangunan web anda. TOWeb ialah aplikasi yang sangat mudah digunakan yang mengandungi templat hebat yang boleh disesuaikan mengikut keperluan anda. Seperti alat sebelumnya, TOWeb menyokong banyak bahasa pengaturcaraan.
Ini adalah aplikasi terbaik yang boleh anda gunakan jika anda ingin mencipta animasi yang menakjubkan untuk tapak web anda. Ia paling kerap digunakan oleh pereka yang terlibat dalam animasi dan pengiklanan, jadi jika anda adalah jenis pereka yang mencipta elemen animasi untuk digunakan dalam program lain yang boleh diakses pada semua platform, maka aplikasi ini adalah yang anda perlukan. Terdapat beberapa ciri yang anda akan sukai tentang apl ini, termasuk penyepaduan Google Drive, acara, objek 3D, lapisan dan banyak lagi.
Editor drag-and-drop yang sangat mudah, paling sesuai untuk pemula yang sedang membangunkan tapak web pertama mereka. Apl ini disertakan dengan pengehosan percuma dan halaman tanpa had, antara semua ciri hebat yang lain. Jika anda ingin mencipta laman web yang hebat tanpa menghabiskan terlalu banyak masa untuk menciptanya, maka program ini akan berguna.
Apl hebat yang boleh anda mula gunakan sekarang. Alat ini berdasarkan Firefox dan tawaran pendekatan moden untuk mencipta laman web yang hebat. Ia mempunyai ciri yang luar biasa, dan walaupun kebanyakannya memerlukan anda membeli lesen untuk digunakan, terdapat beberapa yang ditawarkan kepada anda secara percuma, walaupun dengan penggunaan terhad.
Ini adalah aplikasi web yang bagus untuk pembangunan web, namun, disebabkan kerumitannya, ia tidak sesuai sepenuhnya untuk pemula. Walau bagaimanapun, walaupun pada hakikatnya alat itu tidak begitu mudah untuk digunakan, ia memberikan peluang besar untuk mereka yang sudah mempunyai sedikit pengalaman dalam pembangunan web.
Penyunting teks yang ditujukan hanya untuk pembangun web yang paling maju. Hakikat bahawa ia adalah alat berasaskan teks menjadikannya tidak sesuai untuk pemula, tetapi jika anda mempunyai sedikit pengalaman pengekodan, maka ia adalah aplikasi yang patut dipertimbangkan untuk projek pembangunan web. Ia kecil dan ringan, malah anda boleh membawanya pada pemacu kilat. SynWrite ialah alat berciri penuh, dengan rakaman makro, sejarah papan keratan, pemalam, banyak bantuan pengekodan, pratonton dan palet. Ia juga membolehkan pembangun mencari dan menggantikan berbilang fail serta corak kod. Ini mungkin aplikasi terbaik yang akan digunakan sepanjang keseluruhan projek - daripada membuat susun atur kepada menulis kod.
Ia adalah aplikasi pembangunan web yang bergaya yang boleh membantu anda mencipta laman web yang cemerlang dan menarik dari segi estetika. Permohonan dalam talian yang menawarkan peluang yang hebat, jika anda membayar untuk mereka, iaitu, anda boleh mengharapkan sedikit lebih banyak ciri, jika anda sanggup berpisah dengan beberapa dolar tambahan. Terdapat juga versi percuma, namun ia tidak mempunyai banyak ciri seperti versi berbayar.
Aplikasi pembangunan web direka bentuk untuk memudahkan kerja anda dengan menyediakan beberapa ciri dan alatan yang anda perlukan sebagai pembangun. Pilihan anda harus bergantung pada ciri yang anda cari dan jenis tapak web yang anda ingin buat.
Apakah pembangunan aplikasi web?
Pembangunan aplikasi web adalah istilah umum untuk proses mencipta halaman web atau laman web. Halaman web dicipta dengan menggunakan HTML, CSS dan JavaScript. Halaman ini boleh mengandungi teks dan grafik ringkas, menyerupai dokumen statik. Halaman juga boleh menjadi interaktif atau memaparkan maklumat yang berubah-ubah. Mencipta halaman interaktif adalah sedikit lebih kompleks, tetapi ia membolehkan anda membuat tapak web yang kaya dengan kandungan. Hari ini, kebanyakan halaman adalah interaktif dan menyediakan yang terkini perkhidmatan interaktif, seperti troli beli-belah dalam talian, visualisasi dinamik dan juga rangkaian sosial yang kompleks.
Pembangunan aplikasi untuk komputer moden dijalankan menggunakan bahasa pengaturcaraan khusus. Bahan pengenalan ini akan membantu anda membiasakan diri dengannya.
Video | 15 minit | Bahasa pengaturcaraan
Laporan ini membincangkan mengapa bahasa pengaturcaraan diperlukan, apakah itu, dan tujuan apa ia dimaksudkan. Bahasa penanda (HTML), perwakilan data (XML), dan bahasa pertanyaan (SQL) juga disebut secara ringkas.
Video | 23 minit | Bahasa pengaturcaraan
Laporan ini menyediakan ulasan ringkas bahasa pengaturcaraan C#, ciri dan reka bentuk utamanya, menunjukkan contoh mencipta aplikasi konsol dan tetingkap mudah untuk Windows dalam Visual Studio 2010.
Terokai keupayaan bilik pembedahan yang kaya sistem Windows, yang boleh dan harus digunakan semasa membangunkan aplikasi web.
| 4 | alat pembangunan |
Video | 10 minit | WebMatrix
Cerita pendek tentang WebMatrix - persekitaran untuk membangunkan laman web. WebMatrix membolehkan anda membuat laman web dengan kerumitan yang berbeza-beza: dari halaman utama hingga kecil portal korporat. Persekitaran termasuk satu set templat laman web yang boleh digunakan sebagai asas untuk mencipta tapak web anda sendiri. WebMatrix membolehkan anda membuat dan mengedit penanda dan kod tapak web, serta mengurus pangkalan data dan menerbitkan tapak web siap sedia untuk pengehosan.
Video | 11 minit | internet Explorer
Ceramah ini memberikan gambaran ringkas tentang teknologi Tapak Disemat yang diperkenalkan dalam Internet Explorer 9. Menunjukkan cara bekerja dengan Senarai Lompat, Ikon Tindanan dan Butang Bar Alat Kecil.
Sumber di bawah akan membantu anda memperoleh kemahiran tambahan dalam bidang minat anda.
Dalam hal ini, persoalannya ialah - apa lagi yang perlu anda ketahui?Walau apa pun, anda memerlukan backend. Jika saya faham dengan betul, Angular, Vue dan rangka kerja lain hanyalah frontend.
Betul. Di mana-mana sahaja anda pergi, pembangunan web disebut di mana-mana sebagai pembangunan bahagian hadapan, dan ia pastinya disambungkan dengan Node.js (untuk menulis sesuatu dalam Angular, anda tidak boleh melakukannya tanpanya). Saya tidak faham bagaimana bahagian hadapan disambungkan kepada Node.js, kerana... Node.js pada asasnya ialah cara untuk menjalankan JS di luar penyemak imbas.
Kemungkinan besar, anda sedang membaca artikel tentang bahagian hadapan, kerana tiada apa-apa tentang bahagian belakang di dalamnya. Seperti yang anda ketahui, bahagian hadapan ditulis dalam JS dan ramai yang terpikat dengan fakta bahawa anda boleh memasang NodeJS pada bahagian belakang dan membuat laman web menggunakan satu bahasa. Jika saya ingin menjalankan aplikasi dalam penyemak imbas, maka mengapa saya memerlukan nod ? Ini semua mengelirukan saya; Saya hanya melihat percanggahan.
Jangan keliru. Terdapat teknologi yang digunakan semasa proses permohonan dan ada teknologi yang digunakan semasa proses pembangunan aplikasi. Semua Gulp, Grunt, Babel, Webpack dan lain-lain ini adalah alat pembangunan. Mereka mempercepatkan, memudahkan dan meningkatkan kualiti kerja. Pada masa itu, jQuery, Angular, React ialah perpustakaan dan rangka kerja yang mana aplikasi akan berfungsi.
Jika sebelum ini tapak web dicipta menggunakan beberapa teknologi, aplikasi moden boleh menggunakan berpuluh-puluh, atau bahkan ratusan, daripada yang terakhir. Selain itu, ini boleh menjadi bahasa pengaturcaraan, perpustakaan, rangka kerja, perkhidmatan, dsb. Semua ini sering dipanggil "zoo" teknologi.
Di sini saya hanya boleh menganggap bahawa pelayan, bukannya html, harus bertukar data dengan aplikasi melalui json atau sesuatu yang lain.Ya, JSON ialah yang paling biasa. Anda memerlukan rangka kerja bahagian belakang yang mana anda boleh menggunakan API REST. Setahu saya, kebanyakan rangka kerja moden bahasa pengaturcaraan moden yang digunakan untuk pembangunan web boleh melakukan ini. Saya tidak boleh mengatakan dengan pasti, saya bekerja dalam bahasa yang sama. Namun, pelayan adalah asas kepada mana-mana aplikasi rangkaian, dan pertama sekali anda perlu membangunkan bahagian pelayan.
Pasti. Aplikasi satu halaman moden (SPA) terdiri daripada dua bahagian berasingan - hujung hadapan dan hujung belakang. Mereka boleh dibuat sepenuhnya secara berasingan oleh pemaju yang berbeza, perkara utama adalah untuk bersetuju dengan format pemindahan data dan semua nuansa.
Keindahan SPA adalah pada pemisahan bahagian-bahagian ini. Mana-mana daripada mereka boleh digantikan dengan yang lain tanpa sebarang akibat khas. Satu bahagian belakang boleh melayani tapak, aplikasi mudah alih, menyediakan akses kepada data untuk pihak ketiga aplikasi rakan kongsi, dan semua melalui API tunggal.
Apa lagi yang perlu dikaji? Atau adakah ilmu yang disenaraikan sudah mencukupi?Saya rasa itu tidak mencukupi. Anda akan menentukan dengan tepat tugas yang mesti diselesaikan oleh projek anda dan memilih teknologi untuk mereka. Anda perlu fokus pada satu perkara, anda tidak akan dapat mempelajari segala-galanya yang moden, tidak akan ada masa yang cukup. Adakah mungkin untuk tidak menggunakan Node.js dan, sewajarnya, npm jika JS (TS) diperlukan hanya dalam pelayar? Pada masa yang sama, ujian juga perlu.
Ya, ia agak. Di sisi pelanggan, sebagai contoh, JS+Angular. Dan di bahagian belakang, sebagai contoh, PHP + Laravel. Kini terdapat banyak bahasa dan lebih banyak lagi rangka kerja untuk mereka. Pilih yang lebih mudah untuk anda.
Baru-baru ini, terutamanya disebabkan oleh UX dan prestasi.
Saya ingin membentangkan 7 prinsip yang boleh diambil tindakan untuk tapak web yang ingin menggunakan JavaScript untuk mengawal UI. Prinsip ini adalah hasil kerja saya sebagai pereka web, tetapi juga sebagai pengguna lama WWW.
JavaScript tidak dapat dinafikan menjadi alat yang sangat diperlukan untuk pembangun bahagian hadapan. Kini skopnya berkembang ke kawasan lain seperti pelayan dan mikropengawal. Bahasa pengaturcaraan ini telah dipilih oleh universiti berprestij untuk mengajar pelajar asas sains komputer.
Pada masa yang sama, terdapat beberapa soalan mengenai peranan dan kegunaan khususnya, yang ramai mendapati sukar untuk dijawab, termasuk pengarang rangka kerja dan perpustakaan.
- Sekiranya JavaScript digunakan sebagai pengganti untuk fungsi penyemak imbas: sejarah, navigasi, pemaparan?
- Adakah bahagian belakang mati? Adakah perlu untuk membuat HTML sama sekali?
- Adakah benar bahawa Aplikasi Satu Halaman (SPA) adalah masa depan?
- Sekiranya JS menjana halaman pada tapak web dan memaparkan halaman dalam aplikasi web?
- Patutkah saya menggunakan teknik seperti PJAX atau TurboLinks?
- Apakah perbezaan tepat antara laman web dan aplikasi web? Perlukah ada satu perkara lagi?
Apa yang berikut akan menjadi percubaan saya untuk menjawab soalan-soalan ini. Saya cuba menyelidik cara menggunakan JavaScript dari perspektif pengalaman pengguna (UX). Khususnya, dia membayar Perhatian istimewa idea untuk meminimumkan masa yang diperlukan pengguna untuk mendapatkan data yang dia minati. Bermula dari asas teknologi rangkaian dan berakhir dengan meramalkan tingkah laku pengguna masa hadapan.
1. Membuat halaman pada pelayan adalah pilihantl;DR: Penyampaian pelayan dilakukan bukan untuk SEO, tetapi untuk prestasi. Pertimbangkan permintaan tambahan untuk skrip, gaya dan permintaan API seterusnya. Pada masa hadapan, pertimbangkan untuk menggunakan kaedah HTTP 2.0 Push.
Pertama sekali, saya perlu menunjukkan kesilapan biasa untuk memisahkan "aplikasi yang diberikan pelayan" daripada "aplikasi halaman tunggal". Jika kita ingin mencapai pengalaman terbaik dari sudut pandangan pengguna, kita tidak boleh mengehadkan diri kita kepada had tersebut dan meninggalkan satu alternatif memihak kepada yang lain.
Alasannya cukup jelas. Halaman dihantar melalui Internet, yang mempunyai had fizikal, seperti yang digambarkan oleh Stuart Cheshire dalam esei terkenal "It's Latency, Fool":
Jarak antara Stanford dan Boston ialah 4320 km.
Kelajuan cahaya dalam vakum ialah 300 x 10^6 m/s.
Kelajuan cahaya dalam gentian optik adalah lebih kurang 66% daripada kelajuan cahaya dalam vakum.
Kelajuan cahaya dalam gentian optik ialah 300 x 10^6 m/s * 0.66 = 200 x 10^6 m/s.
Kelewatan sehala apabila menghantar ke Boston 4320 km / 200 x 10^6 m/s = 21.6 m/s.
Kelewatan pergi dan balik 43.2 m/s.
Ping dari Stanford ke Boston di Internet moden adalah kira-kira 85 ms (...)
Jadi, peralatan moden Internet menghantar isyarat pada kelajuan 0.5 kali ganda kelajuan cahaya.
Keputusan 85 ms yang ditunjukkan boleh dipertingkatkan (dan sudah lebih baik sedikit), tetapi adalah penting untuk memahami bahawa terdapat had fizikal pada kelewatan apabila menghantar maklumat melalui Internet, tidak kira berapa banyak lebar jalur pada komputer pengguna meningkat .
Ini amat penting dengan peningkatan populariti aplikasi JavaScript, yang biasanya hanya mengandungi markup dan medan kosong di sebelahnya. Apa yang dipanggil aplikasi halaman tunggal (SPA) - pelayan mengembalikan satu halaman, dan semua yang lain dipanggil oleh kod pada sisi klien.
Bayangkan senario di mana pengguna mengakses terus http://app.com/orders/. Pada masa permohonan anda menerima dan memproses permintaan ini, ia sudah mempunyai perkara penting maklumat tentang perkara yang perlu ditunjukkan pada halaman. Ia boleh, sebagai contoh, memuatkan pesanan daripada pangkalan data dan menambahkannya pada respons. Tetapi kebanyakan SPA dalam situasi ini mengembalikan halaman kosong dan teg. Kemudian anda perlu bertukar permintaan sekali lagi untuk menerima kandungan skrip, dan sekali lagi untuk menerima kandungan.
Menghuraikan HTML yang dihantar oleh pelayan untuk setiap halaman SPA
Ramai pemaju sengaja melakukan pengorbanan ini. Mereka cuba memastikan rangkaian tambahan itu hop hanya akan berlaku sekali untuk pengguna, menghantar tajuk yang betul untuk caching dalam respons dengan skrip dan CSS. Kebijaksanaan konvensional ialah ini adalah tawaran yang baik kerana sebaik sahaja semua fail dimuat turun ke komputer, kebanyakan tindakan pengguna (seperti menavigasi ke bahagian lain) berlaku tanpa memerlukan halaman atau skrip tambahan.
Walau bagaimanapun, walaupun mengambil kira cache, terdapat kerugian tertentu dalam prestasi jika kita mengambil kira masa untuk penghuraian dan pelaksanaan skrip. Dalam artikel "Adakah jQuery terlalu besar untuk mudah alih?" ia mengatakan bagaimana jQuery sahaja boleh melambatkan beberapa pelayar mudah alih selama beratus-ratus milisaat.
Lebih memburukkan lagi keadaan, pengguna biasanya tidak menerima sebarang maklum balas semasa skrip sedang dimuatkan. Keputusan - halaman kosong pada skrin, yang kemudian tiba-tiba bertukar menjadi halaman yang dimuatkan sepenuhnya.
Paling penting, kita cenderung lupa bahawa pengangkutan data Internet (TCP) yang paling biasa bermula dengan perlahan. Ini hampir pasti menjamin bahawa kebanyakan berkas skrip tidak akan dipindahkan sekali gus, menjadikan keadaan di atas lebih teruk.
Sambungan TCP bermula dengan pertukaran paket jabat tangan. Jika anda menggunakan SSL, yang penting untuk pemindahan selamat skrip, dua pertukaran paket tambahan berlaku (satu jika pelanggan memulihkan sesi). Hanya selepas ini pelayan boleh mula menghantar data, tetapi amalan menunjukkan bahawa ia melakukan ini secara perlahan-lahan dan dalam kelompok.
Mekanisme kawalan kesesakan yang dipanggil Slow Start terbina dalam protokol TCP untuk menghantar data, meningkatkan jumlahnya secara beransur-ansur segmen. Ini mempunyai dua implikasi serius untuk SPA:
1. Skrip besar mengambil masa lebih lama untuk dimuatkan daripada yang kelihatan. Seperti yang dijelaskan dalam buku "Rangkaian Pelayar Berprestasi Tinggi" oleh Ilya Grigorik, ia memerlukan "empat pertukaran paket (...) dan ratusan milisaat kependaman untuk mencapai 64 KB pertukaran data antara pelanggan dan pelayan." Sebagai contoh, dalam kes sambungan Internet yang pantas antara London dan New York, ia mengambil masa 225 ms sebelum TCP boleh mencapai saiz paket maksimumnya.
2. Memandangkan peraturan ini juga digunakan pada pemuatan halaman awal, kandungan yang dimuatkan adalah sangat penting untuk dipaparkan pada halaman terlebih dahulu. Seperti yang disimpulkan oleh Paul Irish dalam pembentangannya Menyampaikan Barangan, 14 KB pertama adalah kritikal. Ini jelas jika anda melihat graf yang menunjukkan jumlah pemindahan antara klien dan pelayan semasa peringkat pertama mewujudkan sambungan.
Berapa KB yang boleh dihantar oleh pelayan pada setiap peringkat sambungan, mengikut segmen
Tapak web yang berjaya menyampaikan kandungan (walaupun markup asas tanpa data) dalam tetingkap ini kelihatan sangat responsif. Malah, ramai pengarang aplikasi sebelah pelayan pantas menganggap JavaScript sebagai sesuatu yang tidak perlu atau sesuatu yang perlu digunakan dengan berhati-hati. Sikap ini diperkukuhkan lagi jika aplikasi mempunyai backend dan pangkalan data yang cepat, dan pelayannya terletak berhampiran pengguna (CDN).
Peranan pelayan dalam mempercepatkan persembahan kandungan bergantung secara langsung pada aplikasi web. Penyelesaian tidak selalunya bermuara kepada "memberikan keseluruhan halaman pada pelayan."
Dalam sesetengah kes, tidak relevan dalam masa ini Bagi pengguna, adalah lebih baik untuk mengecualikan sebahagian halaman daripada respons awal dan biarkan ia untuk kemudian. Sesetengah aplikasi, sebagai contoh, memilih untuk memaparkan hanya "teras" halaman untuk memastikan tindak balas segera. Mereka kemudian meminta bahagian halaman yang berlainan secara selari. Ini menyediakan tindak balas yang lebih baik walaupun dalam keadaan dengan bahagian belakang yang lambat dan ketinggalan zaman. Untuk beberapa muka surat pilihan yang baik Hanya bahagian halaman yang kelihatan akan dipaparkan.
Sangat penting penilaian kualitatif skrip dan gaya, dengan mengambil kira maklumat yang pelayan mempunyai tentang sesi, klien dan URL. Skrip yang mengisih pesanan jelas akan menjadi lebih penting kepada /pesanan daripada logik halaman tetapan. Mungkin tidak begitu jelas, tetapi terdapat perbezaan dalam memuatkan " CSS struktur" dan "CSS untuk penggayaan". Yang pertama mungkin diperlukan untuk kod JavaScript, jadi ia diperlukan menyekat, dan yang kedua dimuatkan secara tidak segerak.
Contoh SPA yang baik yang tidak mengakibatkan pertukaran paket yang tidak diperlukan ialah klon konsep StackOverflow 4096 bait, yang secara teorinya boleh dimuatkan dengan paket pertama selepas berjabat tangan pada sambungan TCP! Penulis berjaya mencapai ini dengan menolak caching, menggunakan sebaris untuk semua sumber dalam respons daripada pelayan. Dengan menggunakan tolak pelayan SPDY atau HTTP/2, secara teorinya mungkin untuk memindahkan semua kod klien cache dalam satu lompatan. Nah, pada masa ini, membuat bahagian atau keseluruhan halaman pada bahagian pelayan kekal sebagai cara paling popular untuk menyingkirkan pusingan pertukaran paket yang tidak perlu.
SPA bukti konsep menggunakan sebaris untuk CSS dan JS untuk menyingkirkan perjalanan pergi balik yang tidak perlu
Sistem yang agak fleksibel yang memisahkan rendering antara penyemak imbas dan pelayan dan menyediakan alatan untuk memuatkan skrip dan gaya secara beransur-ansur boleh mengaburkan garis antara laman web Dan aplikasi web. Kedua-duanya menggunakan URL, navigasi dan menunjukkan data kepada pengguna. Malah permohonan dengan hamparan, yang secara tradisinya bergantung pada kefungsian sisi klien, mesti menunjukkan kepada pelanggan maklumat yang perlu diedit terlebih dahulu. Dan melakukan ini dalam bilangan paling sedikit perjalanan pergi balik adalah amat penting.
Dari sudut pandangan saya, kecacatan prestasi terbesar dalam banyak perkara sistem popular pada zaman moden dijelaskan oleh pengumpulan progresif kerumitan dalam timbunan. Dari masa ke masa, teknologi seperti JavaScript dan CSS telah ditambahkan. Populariti mereka juga meningkat secara beransur-ansur. Hanya sekarang kita boleh menghargai bagaimana ia boleh digunakan secara berbeza. Kami juga bercakap tentang meningkatkan protokol (ini ditunjukkan oleh kemajuan semasa SPDY dan QUIC), tetapi faedah terbesar datang daripada mengoptimumkan aplikasi.
Mungkin berguna untuk mengingati beberapa perbincangan sejarah yang mengelilingi reka bentuk awal versi HTML dan WWW. Sebagai contoh, senarai mel dari tahun 1997 ini mencadangkan penambahan tag dalam HTML. Marc Andreessen mengulangi kepentingan menyampaikan maklumat dengan cepat:
"Jika dokumen perlu disusun menjadi satu keseluruhan dengan cepat, maka ia boleh menjadi rumit seperti yang diingini, dan walaupun kerumitannya terhad, kita masih akan menghadapi masalah masalah utama dengan prestasi kerana penstrukturan dokumen dengan cara ini. Pertama sekali, ini serta-merta melanggar prinsip satu-hop WWW (baik, IMG juga melanggarnya, tetapi atas sebab yang sangat spesifik dan dalam erti kata yang sangat terhad) - adakah kita pasti kita mahukan ini?
2. Sambutan segera kepada tindakan penggunatl;DR: JavaScript membenarkan anda menyembunyikan kependaman rangkaian sama sekali. Menggunakan ini sebagai prinsip reka bentuk, kami juga boleh mengalih keluar hampir semua penunjuk pemuatan dan "memuatkan" mesej daripada aplikasi. PJAX atau TurboLinks kehilangan peluang untuk meningkatkan kelajuan antara muka subjektif.
Matlamat kami adalah untuk memaksimumkan kelajuan tindak balas terhadap tindakan pengguna. Tidak kira berapa banyak usaha yang kami lakukan untuk mengurangkan bilangan lompatan semasa bekerja dengan aplikasi web, terdapat perkara di luar kawalan kami. Ini ialah had teori kelajuan cahaya dan ping minimum antara klien dan pelayan.
Faktor penting ialah kualiti komunikasi yang tidak dapat diramalkan antara pelanggan dan pelayan. Jika kualiti sambungan kurang baik, maka paket akan dihantar semula. Apabila kandungan perlu dimuatkan dalam beberapa perjalanan pergi balik, anda mungkin memerlukan lebih banyak lagi.
Ini adalah faedah utama JavaScript untuk meningkatkan UX. Jika antara muka diskrip pada bahagian klien, kami boleh menyembunyikan kependaman rangkaian. Kita boleh mencipta kesan kelajuan tinggi. Kami boleh mencapai kependaman sifar secara buatan.
Kiranya lagi di hadapan kita HTML biasa. Dokumen disambungkan dengan hiperpautan atau tag . Jika anda mengklik mana-mana daripada mereka, penyemak imbas membuat permintaan rangkaian, yang mengambil masa yang tidak dapat diramalkan, kemudian menerima dan memproses data yang diterima dan akhirnya memasuki keadaan baharu.
JavaScript membolehkan anda bertindak balas dengan segera dan optimistik terhadap tindakan pengguna. Mengklik pada pautan atau butang menghasilkan respons segera, tanpa perlu pergi ke Internet. Contoh yang terkenal ialah antara muka Gmail (atau Peti Masuk Google), di mana pengarkiban mesej e-mel berlaku serta-merta, manakala permintaan yang sepadan kepada pelayan dihantar dan diproses secara tak segerak.
Dalam kes borang, daripada menunggu beberapa kod HTML sebagai jawapan untuk mengisinya, kami boleh membalas serta-merta sebaik sahaja pengguna menekan "Enter". Atau lebih baik lagi, seperti carian Google, kita boleh bertindak lebih awal dengan menyediakan penanda untuk halaman baharu lebih awal.
Tingkah laku ini adalah contoh yang saya panggil penyesuaian markup. Idea asasnya ialah halaman itu "mengetahui" penanda masa hadapannya, jadi ia boleh beralih kepadanya apabila tiada data untuk menunjukkannya lagi. Ini adalah tingkah laku "optimis" kerana masih terdapat risiko bahawa data tidak akan sampai dan mesej ralat perlu dilaporkan, tetapi ini jelas jarang berlaku.
Halaman utama Google ialah contoh yang baik kerana ia menunjukkan dua prinsip pertama daripada artikel kami dengan jelas.
Pada penghujung tahun 2004, Google mempelopori penggunaan JavaScript untuk memberikan cadangan masa nyata semasa menaip pertanyaan carian (menariknya, ciri ini dibangunkan oleh pekerja dalam 20% masa lapangnya, sama seperti Gmail). Ini malah menjadi asas kepada kemunculan Ajax:
Lihat Google Suggest. Tonton istilah carian anda dikemas kini semasa anda menaip, hampir serta-merta... tanpa melengahkan muat semula halaman. Google Suggest dan Google Maps ialah dua contoh pendekatan baharu untuk mencipta aplikasi web yang kami di Adaptive Path panggil "Ajax."
Satu lagi jenis tindakan selain daripada klik dan penyerahan borang yang bertambah baik dengan menggunakan JavaScript, ialah pemaparan pemuatan fail.
Kami boleh mendaftarkan percubaan pengguna untuk memuat turun fail dengan cara yang berbeza: drag-n-drop, menampal daripada penimbal, memilih fail. Kemudian, terima kasih kepada API HTML5 baharu, kami boleh memaparkan kandungan seolah-olah ia telah dimuat turun. Contoh antara muka jenis ini ialah kerja kami dengan muat turun dalam Cloudup. Perhatikan cara lakaran kecil imej dijana dan dipaparkan serta-merta:
Imej dipaparkan dan dipaparkan sehingga pemuatan selesai
Dalam semua kes ini kami menambah baik persepsi kelajuan. Nasib baik, terdapat banyak bukti untuk kegunaan pendekatan ini. Ambil sekurang-kurangnya contoh bagaimana meningkat jarak ke penghantar bagasi di Lapangan Terbang Houston menurun bilangan aduan tentang kehilangan bagasi, tanpa perlu mempercepatkan pemprosesan bagasi.
Idea ini harus memberi kesan serius kepada UI aplikasi kami. Saya percaya bahawa penunjuk pemuatan sepatutnya menjadi jarang berlaku, terutamanya apabila kita beralih ke aplikasi maklumat masa nyata, yang diterangkan dalam bahagian seterusnya.
Terdapat situasi di mana ilusi tindakan segera sebenarnya mempunyai kesan buruk pada UX. Ini boleh menjadi satu bentuk pembayaran atau menamatkan sesi di tapak. Dengan mengambil pendekatan optimistik di sini, secara de facto memperdaya pengguna, kami berisiko merengsakannya.
Tetapi walaupun dalam kes ini, memaparkan pemutar atau penunjuk pemuatan pada skrin harus dihentikan. Mereka harus dipaparkan hanya selepas pengguna menganggap respons tidak serta-merta. Menurut kajian Nielsen yang sering disebut:
Nasihat masa tindak balas asas kekal sama selama tiga puluh tahun Miller 1968; Kad et al. 1991:
*0.1 saat ialah had untuk pengguna melihat respons sebagai serta-merta, tiada paparan diperlukan di sini maklumat tambahan, kecuali hasil operasi.
* 1.0 saat adalah had kesinambungan pemikiran pengguna, walaupun dia akan menyedari kelewatan itu. Biasanya, tiada petunjuk tambahan diperlukan untuk kelewatan lebih daripada 0.1 saat tetapi kurang daripada 1.0 saat, tetapi pengguna kehilangan perasaan bekerja secara langsung dengan data.
* 10 saat ialah had untuk mengekalkan perhatian pengguna pada dialog. Dengan kependaman yang lebih tinggi, pengguna akan mahu melaksanakan tugas lain sementara menunggu respons daripada komputer.
Teknik seperti PJAX atau TurboLinks malangnya terlepas kebanyakan ciri yang diterangkan dalam bahagian ini. Kod sisi klien tidak "tahu" tentang keadaan halaman pada masa hadapan sehingga pertukaran data dengan pelayan berlaku.
3. Reaksi terhadap perubahan datatl;DR: Apabila data dikemas kini pada pelayan, pelanggan harus dimaklumkan tanpa berlengah-lengah. Ini adalah satu bentuk peningkatan produktiviti di mana pengguna dibebaskan daripada terpaksa tindakan tambahan(tekan F5, muat semula halaman). Isu baharu: (semula) pengurusan sambungan, pemulihan keadaan.
Prinsip ketiga berkaitan dengan tindak balas UI terhadap perubahan dalam data pada sumber, biasanya satu atau lebih pelayan pangkalan data.
Model transmisi semakin ketinggalan zaman. data HTML, yang kekal statik sehingga pengguna menyegarkan halaman (laman web tradisional) atau berinteraksi dengannya (Ajax).
UI anda harus dikemas kini secara automatik.
Ini penting dalam dunia dengan aliran maklumat yang semakin meningkat daripada sumber yang berbeza, termasuk jam tangan, telefon, tablet dan peranti boleh pakai yang akan muncul pada masa hadapan.
Bayangkan Suapan Berita Facebook sejurus selepas ia mula-mula muncul, apabila maklumat disiarkan terutamanya daripada komputer peribadi pengguna. Paparan statik tidak optimum, tetapi ia masuk akal untuk orang yang memuat semula suapan mereka, katakan, sekali sehari.
Kami kini hidup dalam dunia di mana anda memuat naik foto dan hampir serta-merta menerima suka dan komen daripada rakan dan kenalan. Keperluan untuk tindak balas segera telah menjadi keperluan semula jadi dalam persekitaran persaingan aplikasi lain.
Walau bagaimanapun, adalah salah untuk menganggap bahawa faedah kemas kini UI segera adalah terhad kepada aplikasi berbilang pengguna. Itulah sebabnya saya suka bercakap tentang titik data yang dipersetujui, bukannya pengguna. Mari kita ambil senario biasa untuk menyegerakkan foto antara telefon anda dan komputer riba anda sendiri:
Aplikasi pengguna tunggal juga boleh mendapat manfaat daripada kereaktifan.
Bermanfaat untuk dibayangkan semua maklumat yang dihantar kepada pengguna sebagai "reaktif". Menyegerakkan sesi dan keadaan kebenaran ialah satu contoh pendekatan universal. Jika pengguna aplikasi anda membuka beberapa tab pada masa yang sama, maka penamatnya sesi bekerja pada salah satu daripada mereka hendaklah segera menyahaktifkan kebenaran pada semua yang lain. Ini sudah pasti membawa kepada keselamatan yang lebih baik dan perlindungan yang lebih baik maklumat sulit, terutamanya dalam situasi di mana beberapa orang mempunyai akses kepada peranti yang sama.
Setiap halaman bertindak balas kepada keadaan sesi dan status kebenaran
Sebaik sahaja anda telah menetapkan peraturan bahawa maklumat pada skrin dikemas kini secara automatik, adalah penting untuk menjalankan tugas baharu: memulihkan keadaan.
Apabila menghantar permintaan dan menerima kemas kini atom, mudah terlupa bahawa aplikasi anda harus dikemas kini secara normal walaupun selepas tempoh yang lama tidak aktif. Bayangkan menutup penutup komputer riba anda dan membukanya beberapa hari kemudian. Bagaimanakah aplikasi akan bertindak?
Contoh apa yang berlaku dalam kes itu kemas kini yang salah komunikasi
Keupayaan aplikasi untuk menyambung semula biasanya berinteraksi dengan prinsip #1. Jika anda memilih untuk menghantar data pada pemuatan halaman pertama, anda juga mesti mempertimbangkan masa yang berlalu sebelum skrip dimuatkan. Masa ini pada asasnya bersamaan dengan masa putus sambungan, jadi sambungan awal skrip anda ialah penyambungan semula sesi.
4. Kawalan pertukaran data dengan pelayantl;DR: Sekarang kita boleh memperhalusi pertukaran data dengan pelayan. Pastikan pengendalian ralat, permintaan berulang kepada klien, penyegerakan data masuk latar belakang dan menyimpan cache di luar talian.
Apabila web wujud, komunikasi antara klien dan pelayan dihadkan dalam beberapa cara:
Kesederhanaan model ini sangat menarik, dan kini keadaan sudah pasti menjadi lebih kompleks apabila memahami cara menerima dan menghantar maklumat.
Sekatan utama berkaitan dengan perkara kedua. Ketidakupayaan untuk menghantar data tanpa semestinya memuatkan halaman baharu merupakan satu kelemahan dari perspektif prestasi. Tetapi perkara yang paling penting ialah ia benar-benar memecahkan butang "Kembali":
Mungkin artifak web lama yang paling menjengkelkan
Inilah sebabnya mengapa web sebagai platform aplikasi kekal tidak lengkap tanpa JavaScript. Ajax mewakili lonjakan besar ke hadapan dari segi kemudahan penerbitan pengguna.
Kami kini mempunyai banyak API (XMLHttpRequest, WebSocket, EventSource, hanya untuk menamakan beberapa) yang memberikan kawalan lengkap dan tepat ke atas aliran data. Selain keupayaan untuk menerbitkan data pengguna melalui borang, kami mempunyai peluang baharu untuk menambah baik UX.
Secara langsung berkaitan dengan prinsip sebelumnya ialah paparan status sambungan. Jika kami menjangkakan data akan dikemas kini secara automatik, kami mesti memaklumkan fakta kepada pengguna kehilangan sambungan Dan percubaan untuk memulihkannya.
Apabila putus sambungan dikesan, adalah berguna untuk menyimpan data dalam memori (atau lebih baik lagi, dalam localStorage) supaya ia boleh dihantar kemudian. Ini amat penting memandangkan penggunaan ServiceWorker pada masa hadapan, yang membolehkan aplikasi JavaScript dijalankan di latar belakang. Jika aplikasi anda tidak dibuka, anda masih boleh terus mencuba menyegerakkan data dengan pelayan di latar belakang.
Pertimbangkan kemungkinan tamat masa dan ralat semasa menghantar data; situasi sedemikian harus diselesaikan memihak kepada pelanggan. Jika sambungan dipulihkan, cuba hantar data sekali lagi. Bila kesilapan kekal, maklumkan kepada pengguna tentang perkara ini.
Sesetengah ralat perlu ditangani dengan berhati-hati. Contohnya, 403 yang tidak dijangka boleh bermakna sesi pengguna telah tidak sah. Dalam kes sedemikian, adalah mungkin untuk memulihkan sesi dengan menunjukkan kepada pengguna tetingkap untuk memasukkan log masuk dan kata laluan.
Ia juga penting untuk memastikan bahawa pengguna tidak secara tidak sengaja mengganggu aliran data. Ini boleh berlaku dalam dua keadaan. Kes pertama dan paling jelas ialah menutup penyemak imbas atau tab, yang merupakan perkara yang kami cuba cegah dengan pengendali beforeunload.
Amaran sebelum memunggah
Kes lain (dan kurang jelas) ialah apabila anda cuba menavigasi ke halaman lain, seperti mengklik pada pautan. Dalam kes ini, aplikasi boleh menghentikan pengguna menggunakan kaedah lain, mengikut budi bicara pembangun.
5. Jangan pecahkan cerita, perbaikitl;DR: Jika penyemak imbas tidak mengurus URL dan sejarah, kami akan menghadapi masalah baharu. Pastikan anda memenuhi gelagat menatal yang diharapkan. Simpan cache anda sendiri untuk maklum balas pantas.
Sebagai contoh, halaman biasa "tidak berkesudahan" biasanya dibuat dengan butang JavaScript yang meminta data/HTML tambahan dan memasukkannya. Malangnya, beberapa orang ingat untuk memanggil history.pushState atau replaceState sebagai langkah yang diperlukan.
Sebab tu saya guna perkataan "break". Dengan model mudah web asal, keadaan ini tidak mungkin berlaku. Setiap perubahan keadaan adalah berdasarkan perubahan URL.
Tetapi terdapat juga sisi lain dari duit syiling - peluang bertambah baik sejarah melayari, yang kini kami kawal menggunakan JavaScript.
Satu kemungkinan sedemikian dipanggil Fast Back oleh Daniel Pipius:
Butang belakang harus berfungsi dengan cepat; pengguna tidak mengharapkan terlalu banyak perubahan data.
Ia seperti menganggap butang belakang sebagai butang daripada aplikasi web dan menggunakan prinsip #2 padanya: bertindak balas segera kepada tindakan pengguna. Perkara utama ialah anda mempunyai peluang untuk memutuskan cara cache halaman sebelumnya dan serta-merta memaparkannya pada skrin. Anda kemudian boleh menggunakan prinsip #3 dan kemudian memaklumkan kepada pengguna apabila data baharu tiba di halaman tersebut.
Masih terdapat beberapa situasi di mana anda tidak mempunyai kawalan ke atas tingkah laku cache. Contohnya, jika anda memaparkan halaman, kemudian pergi ke tapak pihak ketiga, dan kemudian pengguna mengklik "Kembali". Aplikasi yang membuat HTML pada bahagian pelayan dan kemudian mengubah suainya pada bahagian klien amat terdedah kepada pepijat kecil ini:
Kerja tak betul Butang belakang
Satu lagi cara untuk memecahkan navigasi ialah mengabaikan memori keadaan skrol. Sekali lagi, halaman yang tidak menggunakan JS dan kawalan manual sejarah, kemungkinan besar, tidak akan mempunyai masalah di sini. Tetapi akan ada halaman dinamik. Saya menguji dua yang paling popular suapan berita Internet berasaskan JavaScript: Twitter dan Facebook. Kedua-duanya mengalami scrolling amnesia.
Membalik halaman yang tidak berkesudahan biasanya merupakan tanda amnesia menatal
Lagipun, berhati-hati dengan perubahan negeri yang hanya relevan apabila melihat sejarah. Sebagai contoh, kes ini dengan menukar keadaan subpokok dengan ulasan.
Menukar jenis ulasan mesti disimpan dalam sejarah
Jika halaman itu dipaparkan semula selepas mengklik pautan dalam aplikasi, pengguna mungkin menjangkakan semua ulasan akan dikembangkan. Apabila keadaan berubah, ia mesti disimpan dalam sejarah.
6. Kemas kini kod melalui mesej pushtl;DR: Tidak cukup untuk menghantar data sahaja melalui mesej push, anda juga memerlukan kod. Elakkan ralat API dan tingkatkan prestasi. Gunakan DOM tanpa kewarganegaraan untuk mereka bentuk semula aplikasi anda tanpa rasa sakit.
Adalah amat penting bahawa aplikasi anda bertindak balas terhadap perubahan dalam kod.
Pertama, ia mengurangkan bilangannya kesilapan yang mungkin dan meningkatkan kebolehpercayaan. Jika anda membuat perubahan penting pada API bahagian belakang, maka mesti kemas kini kod program klien. Jika tidak, pelanggan mungkin tidak menerima data baharu atau mungkin menghantar data dalam format yang tidak serasi.
Alasan yang sama pentingnya ialah untuk mematuhi prinsip No. 3. Jika antara muka anda mengemas kini sendiri, maka tidak ada sebab untuk pengguna untuk memuat semula halaman secara manual.
Perlu diingat bahawa untuk tapak biasa, muat semula halaman mencetuskan dua perkara: muat semula data dan muat semula kod. Mengatur sistem dengan kemas kini data tolak tanpa kemas kini kod tolak adalah tidak lengkap, terutamanya dalam dunia di mana satu tab (sesi) boleh kekal terbuka untuk masa yang sangat lama.
Jika saluran tolak pelayan berfungsi, maka pengguna boleh dimaklumkan tentang ketersediaan kod baharu. Jika tidak, nombor versi boleh ditambah pada pengepala permintaan HTTP keluar. Pelayan boleh membandingkannya dengan versi terkini yang diketahui, bersetuju untuk memproses permintaan atau tidak, dan mengeluarkan tugas kepada pelanggan.
Selepas ini, beberapa aplikasi web memuat semula halaman secara paksa bagi pihak pengguna. Sebagai contoh, jika halaman tidak berada di kawasan skrin yang kelihatan dan tiada borang yang lengkap untuk dimasukkan.
Pendekatan yang lebih baik ialah pertukaran panas kod. Ini bermakna anda tidak perlu memuat semula halaman sepenuhnya. Sebaliknya, pasti modul digantikan dengan cepat, dan kod mereka diserahkan semula untuk pelaksanaan.
Dalam banyak aplikasi sedia ada Agak sukar untuk kod pertukaran panas. Untuk melakukan ini, anda mesti pada mulanya mematuhi seni bina yang memisahkan tingkah laku(kod) daripada data(negeri). Pembahagian ini akan membolehkan kami melancarkan banyak patch berbeza dengan cepat.
Sebagai contoh, dalam aplikasi web kami terdapat modul yang menyediakan bas untuk menghantar acara (seperti socket.io). Apabila peristiwa berlaku, keadaan komponen tertentu berubah dan ini ditunjukkan dalam DOM. Anda kemudian menukar gelagat komponen itu, contohnya supaya ia menjana penanda DOM yang berbeza untuk keadaan sedia ada dan baharu.
Sebaik-baiknya, kita sepatutnya boleh menukar kod secara modular. Tidak akan ada keperluan untuk mewujudkan semula sambungan ke soket, sebagai contoh, jika mungkin untuk mengemas kini kod komponen yang diperlukan. Oleh itu, seni bina yang ideal untuk kemas kini kod tekan adalah modular.
Tetapi masalah segera timbul tentang cara menilai modul tanpa yang tidak diingini kesan sampingan. Seni bina seperti yang ditawarkan oleh React paling sesuai di sini. Jika kod komponen dikemas kini, logiknya hanya boleh dilaksanakan semula dan DOM dikemas kini. Baca penjelasan Dan Abramov tentang konsep ini.
Pada asasnya, ideanya ialah anda mengemas kini DOM (atau mewarnakannya semula), yang sangat membantu dalam penggantian kod. Jika keadaan disimpan dalam DOM atau pengendali acara dipasang oleh aplikasi, maka mengemas kini kod boleh menjadi tugas yang lebih sukar.
7. Ramalan tingkah lakutl;DR : Kelewatan negatif.
Aplikasi JavaScript moden mungkin mempunyai mekanisme untuk meramalkan tindakan pengguna.
Aplikasi paling jelas bagi idea ini adalah untuk memuat turun data dari pelayan sebelum pengguna memintanya. Memuatkan halaman web dengan kursor tetikus melayang di atasnya supaya mengklik pada pautan memaparkannya serta-merta adalah contoh mudah.
Kaedah yang lebih maju sedikit untuk memantau penjejakan tetikus menganalisis trajektori tetikus untuk "perlanggaran" masa depan dengan elemen interaktif seperti butang. :
plugin jQuery meramalkan laluan tetikus
Internet kekal sebagai medium yang paling serba boleh untuk menghantar maklumat. Kami terus menambah dinamik pada halaman kami dan mesti memastikan bahawa kami mengekalkan prinsip penting web, yang kami warisi.
Halaman hiperpautan adalah blok binaan yang baik untuk sebarang aplikasi. Memuatkan kod, gaya dan markup secara progresif semasa pengguna berinteraksi memastikan prestasi hebat tanpa mengorbankan interaktiviti.
Baru peluang unik menyediakan JavaScript. Jika teknologi ini digunakan secara meluas, mereka akan menyediakan pengalaman terbaik berfungsi untuk pengguna platform paling bebas yang wujud - WWW.
