Studi Kasus - HTML5 di deviantART muro

Mike Dewey
Mike Dewey

Pengantar

Pada 7 Agustus 2010, deviantART merayakan ulang tahunnya yang ke-10. Kami merayakan ulang tahun dengan meluncurkan alat gambar HTML5 bernama deviantART muro. Alat ini dapat digunakan sebagai aplikasi web mandiri serta alat gambar ringan untuk menambahkan gambar ke komentar forum.

Komunitas deviantART menyambut alat gambar baru ini dengan antusiasme yang besar, dan alat itu sendiri kini mendapatkan traffic sebanyak beberapa properti web berukuran cukup besar. Sejak peluncurannya, gambar baru dikirim menggunakan deviantART muro sekitar sekali setiap 5 detik. Ini hanyalah jumlah gambar yang telah selesai; masih banyak lagi yang telah dimulai dan tidak disimpan.

Artikel berikut memberikan beberapa latar belakang tentang cara kami menggunakan HTML5, alasan kami memilih untuk menggunakan teknologi yang kami gunakan, dan hal-hal yang saya temukan saat menulis salah satu aplikasi HTML5 lengkap pertama untuk situs besar.

Latar Belakang Saya

Pada akhir tahun 2005, saya adalah salah satu developer yang bertanggung jawab atas alat gambar yang digunakan oleh Draw Here. Alat ini adalah alat 'graffiti web' yang diluncurkan oleh bookmarklet. Alat ini digunakan untuk menggambar gambar di halaman web mana pun. Draw Here awalnya dibuat menggunakan SVG (Firefox 1.5 beta baru saja dirilis; ini adalah salah satu browser pertama yang mendukung SVG).

Di Internet Explorer, kita membuat SVG di latar belakang, tetapi merender gambar menggunakan VML. WebKit tidak mendukung SVG pada saat itu, jadi saya mem-porting kode kami untuk merender SVG menggunakan kanvas (yang merupakan teknologi baru yang hanya terlihat di WebKit pada saat itu). Pada satu titik, saya bahkan membuat port sehingga kode SVG kita dapat dirender di browser lama menggunakan sekumpulan elemen div yang ditempelkan bersama. (Tentu saja, ini lebih merupakan lelucon untuk menunjukkan bahwa hal itu dapat dilakukan dan sangat lambat untuk digunakan).

Pada masa kejayaannya, Draw Here digunakan untuk membuat sekitar 100 gambar per hari. Aplikasi ini cukup lengkap untuk disebut lebih dari sekadar eksperimen, meskipun tidak memiliki pengoptimalan akhir dari aplikasi web utama. Pada pertengahan tahun 2006, project ini dihentikan, meskipun situsnya masih berjalan hingga saat ini - sebagian besar hanya untuk bersenang-senang.

Teknologi yang Digunakan oleh deviantART muro

Karena latar belakang saya menggunakan berbagai teknologi HTML5 di awal kemunculannya, saya diminta untuk menjadi developer utama di deviantART muro. Siapa pun yang membaca artikel ini mungkin dapat memahami alasan kami memutuskan untuk menggunakan HTML5, bukan teknologi berbasis plugin seperti Silverlight atau Flash. Kami menginginkan sesuatu yang andal dan juga sesuatu yang menggunakan standar terbuka.

Memilih Antara Kanvas dan SVG

Kita memutuskan untuk membuat lapisan gambar menggunakan kanvas. Beberapa orang mungkin bertanya-tanya kapan harus menggunakan kanvas dan kapan harus menggunakan SVG. Ada banyak tumpang-tindih dalam hal yang dapat dilakukan dengan kedua teknologi tersebut - seperti yang dibuktikan Draw Here, kedua teknologi tersebut dapat digunakan untuk membuat aplikasi gambar.

Saya mendapati bahwa SVG sangat bagus jika Anda ingin mempertahankan handle ke objek yang telah Anda gambar. Misalnya, jika Anda ingin pengguna dapat menggambar garis, lalu dapat menarik bagian garis untuk mengubah bentuknya, hal itu akan cukup mudah menggunakan SVG. Namun, hal yang sama sangat canggung menggunakan kanvas.

Saat menggunakan kanvas, Anda akan memicu berbagai hal ke kanvas, lalu melupakannya. Kanvas kosong dan kanvas yang telah digambar selama satu jam berperilaku sama persis dalam kode, dan keduanya memiliki jejak memori yang hampir sama. Meskipun program gambar raster biasanya berfungsi dengan sangat baik dengan teknologi fire and forget, program ini membuat hal-hal tertentu menjadi sulit. Misalnya, membuat fungsi urungkan cepat jauh lebih sulit di kanvas daripada di SVG. Di SVG, Anda cukup menyimpan handle ke beberapa garis terakhir yang Anda tempatkan, dan mengurungkan tindakan hanya dengan menghapus objek tersebut. Dengan kanvas, setelah garis digambar, Anda tidak tahu apa yang ada di bawahnya, sehingga untuk menghapus garis, Anda harus menggambar ulang area tempat garis berada.

Setelah memutuskan untuk menggunakan HTML5 untuk kanvas, kami memutuskan untuk memanfaatkan sedikit fitur HTML5 lainnya di sana-sini. Contohnya adalah cara kita menggunakan localStorage untuk melacak setelan kuas pengguna. Dengan cara ini, setelah menyiapkan berbagai kuas sesuai keinginan, mereka dapat kembali ke setelan tersebut saat menggunakan alat kami lagi. localStorage berarti kita tidak perlu menghabiskan cookie atau melakukan perjalanan server untuk mendapatkan preferensi tersebut.

Menggunakan Canvas

Canvas telah berkembang pesat dalam lima tahun terakhir. Dengan Draw Here, kami sebenarnya tidak memublikasikan port kanvas saya, karena performanya tidak bagus. Sekarang, saya rasa, dapat dikatakan bahwa performanya mungkin lebih baik dari yang Anda bayangkan. Menghapus sebagian besar kanvas dan menggambar ulang bentuk yang rumit biasanya dapat dilakukan dengan kecepatan yang lebih cepat daripada persepsi manusia. Satu-satunya hal yang saya temukan terkadang terlalu lambat adalah menggunakan getImageData() untuk mengambil sampel piksel. Kecepatan operasi jelas bergantung pada ukuran kanvas, tetapi, pada kanvas besar, melakukan getImageData() pada waktu yang salah dapat memerlukan waktu yang cukup lama bagi pengguna untuk merasa bahwa aplikasi lambat merespons.

Setelah membaca berbagai tutorial kanvas, awalnya saya memiliki kesan bahwa kanvas adalah hal berat yang harus digunakan seperlunya, mungkin sekali atau dua kali di halaman. Saya tidak tahu apakah semua orang merasakan hal ini, tetapi saya merasakannya, jadi saya menggunakannya seperlunya saat pertama kali mulai membuat kode deviantART muro. Namun, setelah beberapa saat, saya menemukan bahwa ada banyak tempat kecil yang dapat menghemat banyak tenaga Anda. Misalnya, mockup untuk aplikasi kita menentukan bahwa harus ada pemilih warna yang berupa dua segitiga tumpang-tindih yang menampilkan warna primer dan sekunder:

Pemilih warna
Pemilih warna

Intuisi pertama saya adalah mulai memikirkan cara membuat alat UI kecil ini dengan HTML dan CSS tradisional. Orang yang mahir dalam meretas CSS mungkin menunjukkan bagaimana semua ini dapat dilakukan melalui CSS, tetapi bentuk segitiga dari dua bagian yang berubah warna membuatnya tidak terlalu jelas.

Saat terpikir untuk menggunakan kanvas saja, saya membuat widget dengan satu elemen DOM dan beberapa baris JavaScript. deviantART muro menggunakan node kanvas di mana-mana. Setiap lapisan adalah kanvas, dan mengubah urutan lapisan hanya masalah beralih z-index. Palet 'navigator' zoom yang menampilkan tampilan area gambar yang diperkecil hanya kanvas lain yang terkadang memanggil drawImage() menggunakan kanvas lapisan sebagai gambar sumber. Bahkan kursor area gambar (lingkaran dua warna yang menyesuaikan ukuran bergantung pada ukuran kuas dan zoom) adalah kanvas yang mengambang di bawah mouse.

Alasan kami lebih liberal dengan kanvas daripada teknologi HTML5 lainnya adalah karena library ExplorerCanvas Google memungkinkan simulasi kanvas di Internet Explorer. Hal ini membawa saya ke bagian berikutnya.

Internet Explorer (IE)

Alasan utama lebih banyak situs utama yang belum menggunakan HTML5 adalah karena mereka tidak ingin kehilangan pengguna Internet Explorer. Saya yakin bahwa pertanyaan pertama di benak sebagian besar developer saat mereka mendengar bahwa deviantART membuat aplikasi gambar HTML5 adalah, 'Apa yang dilakukan terhadap IE?'

Pada awalnya, kami memutuskan untuk melakukan upaya terbaik dalam hal membuat semuanya berfungsi di Internet Explorer, tetapi kami sudah selesai melakukan gaya pengembangan web yang paling umum. Karena komunitas web telah mengambil pendekatan bahwa situs tidak dapat diluncurkan hingga terlihat sama di setiap browser yang diketahui, pengguna tidak dapat mengetahui kapan browser mereka tidak memadai. Bagi pengguna biasa, masalah kecepatan disalahkan pada koneksi internet mereka dan setiap halaman dirender kurang lebih sama. Jadi, mereka memutuskan browser favorit mereka berdasarkan hal-hal kecil antarmuka pengguna yang arbitrer, seperti warna tombol kembali.

Kami memutuskan untuk membuat fitur keren yang terlintas menggunakan spesifikasi HTML5, mencoba membuatnya berfungsi di Internet Explorer, dan jika tidak dapat berfungsi, kami akan menampilkan modal yang menjelaskan bahwa fitur tersebut tidak tersedia karena browser mereka belum menerapkan standar web.

Awalnya, kami mencoba membuat semuanya berfungsi dengan ExplorerCanvas (exCanvas) Google. Secara mengejutkan, canvas ini sangat baik dalam meniru kanvas untuk sebagian besar hal. Namun, ada satu kekurangannya. Setiap goresan yang dibuat di kanvas adalah objek DOM dalam terjemahan VML yang mendasarinya. Untuk sebagian besar hal yang mungkin Anda coba dengan kanvas, hal ini tidak masalah, tetapi beberapa kuas deviantART muro membuat bentuk dari banyak lapisan goresan yang digabungkan. Saat Internet Explorer dihadapkan dengan VML yang memiliki ribuan node di dalamnya - bahkan di mesin yang cepat - Internet Explorer akan mengalami error dan mati. Oleh karena itu, untuk banyak panggilan gambar, kita benar-benar harus masuk dan membuat kode dalam VML yang sebenarnya, dan menggunakan trik saat kita menggabungkan node dan menggunakan perintah pemindahan untuk menentukan tempat yang seharusnya ada celah. Banyak kontrol kecil dan sebagainya di antarmuka menggunakan tag kanvas, karena penggunaan kecil tersebut umumnya berfungsi dengan baik dengan exCanvas.

Selain membuat beberapa hal berfungsi dengan exCanvas, kami menyarankan kepada pengguna bahwa mereka dapat terus menggunakan versi Internet Explorer mereka jika menginstal plugin Google Chrome Frame. Google Chrome Frame adalah plugin yang menyematkan mesin rendering Google Chrome di Internet Explorer. Dari perspektif pengguna, mereka masih menggunakan browser yang sudah mereka kenal; tetapi, di balik layar, halaman kami dirender dengan kemampuan HTML5 Chrome dan JavaScript yang lebih cepat.

Saya tahu bahwa seharusnya mudah untuk melakukan port agar berfungsi dengan Chrome Frame, tetapi saya tidak menyadari betapa sederhananya. Anda hanya perlu memasukkan tag meta tambahan dan… selesai, semuanya mulai berfungsi di IE.

Ringkasan

Sangat menyenangkan menggunakan teknologi baru dalam spesifikasi HTML5, dan saya dapat mengatakan bahwa semua yang saya gunakan sudah siap untuk digunakan. Meskipun Anda memerlukan hal-hal yang berfungsi dengan sempurna di IE, ada banyak hal yang dapat Anda lakukan dengan menggabungkan kanvas dan exCanvas. Dan menulis lapisan terjemahan antara SVG dan VML ternyata juga dapat dilakukan. Setelah Anda mulai menggunakan teknologi ini, rasanya seperti memasuki dunia baru.

Referensi