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 kami dengan meluncurkan alat menggambar HTML5 yang disebut deviantART muro. Alat ini dapat digunakan sebagai aplikasi web mandiri serta alat menggambar yang ringan untuk menambahkan gambar ke komentar forum.

Komunitas deviantART menyambut alat gambar baru ini dengan sangat antusias, dan alat tersebut kini melihat traffic sebanyak beberapa properti web berukuran layak. Sejak diluncurkan, gambar baru dikirimkan menggunakan muro deviantART sekitar sekali setiap 5 detik. Ini hanyalah jumlah gambar yang telah selesai; 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 lakukan, dan hal-hal yang saya temukan saat menulis salah satu aplikasi HTML5 lengkap pertama untuk situs web besar.

Latar Belakang Saya

Pada akhir 2005, saya adalah salah satu developer yang bertanggung jawab atas alat gambar yang digunakan oleh Draw Here. Alat itu adalah alat "{i>web graffiti<i}" yang diluncurkan oleh bookmarklet. Alat ini digunakan untuk menggambar gambar di halaman web apa pun. Draw Here awalnya dibuat menggunakan SVG (Firefox 1.5 beta baru saja keluar; ini adalah salah satu browser pertama yang mendukung SVG).

Di Internet Explorer, kami membuat SVG di latar belakang, tetapi merender gambar menggunakan VML. Pada saat itu, WebKit tidak mendukung SVG, jadi saya telah mem-porting kode kami untuk merender SVG menggunakan kanvas (yang merupakan teknologi baru yang hanya ada di WebKit pada saat itu). Pada satu titik, saya bahkan membuat porta sehingga kode SVG kami bisa di-render pada browser lama menggunakan sekelompok elemen div yang ditempel bersama. (Tentu saja, ini lebih berupa lelucon untuk menunjukkan bahwa langkah itu bisa dilakukan, tetapi sangat lambat digunakan).

Pada masa kejayaannya, Draw Here digunakan untuk membuat sekitar 100 gambar per hari. Prosesnya cukup lengkap untuk dipanggil lebih dari sekadar eksperimen, meskipun aplikasi web utama tidak memiliki sentuhan akhir. Pada pertengahan 2006, project tersebut ditinggalkan, meskipun situs tersebut masih terkulai saat ini - kebanyakan hanya untuk tersenyum.

Teknologi yang Digunakan oleh muro deviantART

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

Menentukan Antara Kanvas dan SVG

Kami memutuskan untuk menggambar {i>layer <i}menggunakan kanvas. Beberapa orang mungkin bertanya-tanya kapan mereka harus menggunakan kanvas dan kapan mereka harus menggunakan SVG. Ada banyak tumpang tindih dalam hal yang dapat dilakukan dengan kedua teknologi ini - seperti yang telah dibuktikan oleh Draw Here, kedua teknologi tersebut dapat digunakan untuk membuat aplikasi gambar.

SVG sangat bagus jika Anda ingin tetap menangani objek yang telah digambar. Misalnya, jika Anda ingin pengguna dapat menggambar garis, lalu dapat menarik bit garis untuk mengubah bentuknya, hal itu akan cukup mudah menggunakan SVG. Namun, hal yang sama juga sangat janggal menggunakan kanvas.

Ketika Anda menggunakan kanvas, Anda bisa membakar benda-benda ke kanvas, dan kemudian Anda melupakannya. Kanvas kosong dan kanvas yang telah digambar selama satu jam berfungsi sama persis dalam kodenya, dan kanvas tersebut memiliki jejak memori yang hampir sama. Meskipun program menggambar raster biasanya bekerja sangat baik dengan api dan melupakan teknologi, 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 hingga beberapa baris terakhir yang Anda tempatkan, dan tindakan mengurungkan cukup dengan mencabut objek tersebut. Dengan kanvas, setelah garis dilukis, Anda tidak tahu apa yang ada di bawahnya, jadi menghapus garis memerlukan penggambaran ulang area tempatnya berada.

Setelah kami menggigit butir dan memutuskan bahwa ini akan menggunakan HTML5 untuk kanvas, kami memutuskan untuk menggunakan sedikit barang HTML5 lainnya di sana-sini. Contohnya adalah bagaimana kami menggunakan localStorage untuk melacak setelan kuas pengguna. Dengan cara ini, setelah mereka menyiapkan berbagai kuas sesuai keinginan, mereka dapat kembali ke setelan tersebut saat berikutnya mereka menggunakan alat kami. localStorage berarti kami tidak perlu menggunakan cookie kami atau melakukan perjalanan server untuk mendapatkan preferensi tersebut.

Menggunakan Kanvas

Kanvas telah berkembang pesat dalam lima tahun terakhir. Dengan {i>Draw Here,<i} kami sebenarnya tidak memublikasikan porta kanvas saya, karena performanya tidak baik. Sekarang, dapat dikatakan, performanya mungkin lebih baik daripada yang Anda bayangkan. Menghilangkan sebagian besar kanvas dan menggambar ulang bentuk rumit biasanya dapat berlangsung dengan lebih cepat daripada pemahaman manusia. Satu-satunya hal yang kadang-kadang terlalu lambat adalah menggunakan getImageData() untuk mengambil sampel piksel. Kecepatan operasi jelas bergantung pada ukuran kanvas, tetapi, pada kanvas yang besar, melakukan getImageData() pada waktu yang salah dapat memerlukan waktu cukup lama bagi pengguna untuk merasa bahwa aplikasi lambat merespons.

Setelah membaca berbagai tutorial kanvas, saya awalnya mendapat kesan bahwa itu adalah hal yang berat yang harus digunakan dengan hemat, mungkin satu atau dua kali dalam satu halaman. Saya tidak tahu apakah semua orang mengerti, tapi saya melakukannya, jadi saya menggunakannya dengan hemat ketika kami pertama kali mulai melakukan {i>coding<i} deviantART muro. Setelah beberapa saat, saya menemukan bahwa ada banyak tempat kecil di mana kanvas dapat menghemat banyak upaya. Misalnya, mock-up untuk aplikasi kita menentukan bahwa harus ada pemilih warna yang merupakan dua segitiga tumpang-tindih yang menampilkan warna primer dan sekunder:

Pemilih warna
Pemilih warna

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

Ketika terpikir untuk hanya menggunakan kanvas, saya membuat widget dengan satu elemen DOM dan beberapa baris JavaScript. deviantART muro menggunakan node kanvas di semua tempat. Setiap lapisan adalah kanvas, dan mengubah urutan lapisan hanya dengan mengganti indeks z. Palet 'navigator' zoom yang menunjukkan tampilan area gambar yang lebih sempit hanyalah 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) merupakan kanvas yang mengambang di bawah mouse.

Alasan kami lebih liberal dalam menangani kanvas dibandingkan teknologi HTML5 lainnya adalah library ExplorerCanvas Google memungkinkan simulasi kanvas di Internet Explorer. Langkah itu membawa saya ke bagian berikutnya.

Internet Explorer (IE)

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

Di awal, kami memutuskan akan melakukan upaya terbaik untuk membuat berbagai hal di Internet Explorer, tetapi kami melakukan gaya pengembangan web yang paling tidak umum. Karena komunitas web menggunakan pendekatan bahwa situs tidak dapat diluncurkan hingga terlihat sama pada setiap browser yang dikenal, pengguna tidak dapat mengetahui kapan browser mereka kurang. Bagi rata-rata pengguna, masalah kecepatan disebabkan oleh koneksi internet mereka, dan setiap halaman dirender dengan cara yang kurang lebih sama. Jadi, mereka memutuskan browser favorit mereka berdasarkan hal-hal kecil yang mengatur antarmuka pengguna, seperti warna tombol kembali.

Kami memutuskan bahwa kami akan membuat fitur keren yang terlintas dalam pikiran menggunakan spesifikasi HTML5, mencoba membuatnya berfungsi di Internet Explorer, dan jika tidak bisa bekerja, kami akan memunculkan modal yang menjelaskan bahwa fitur tersebut tidak tersedia karena browser pengguna belum menerapkan standar web.

Awalnya kami mencoba membuat berbagai hal berfungsi dengan ExplorerCanvas (exCanvas) Google. Ia sangat pandai meniru kanvas untuk kebanyakan hal. Tetapi, terdapat satu kekurangan. 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 menjadi masalah, tetapi beberapa kuas muro deviantART membuat bentuk dengan melapisi banyak goresan secara bersamaan. Ketika Internet Explorer dihadapkan dengan VML yang memiliki ribuan node di dalamnya - bahkan pada komputer yang cepat - VML akan gagal dan mati. Oleh karena itu, untuk banyak panggilan menggambar, sebenarnya kita harus login dan membuat kode dalam VML yang sebenarnya, dan menggunakan trik untuk menggabungkan node dan menggunakan perintah Move untuk menentukan letak titik kosong. Banyak kontrol dan hal lain 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 agar 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 sudut pandang pengguna, mereka masih menggunakan browser yang sudah mereka kenal. Namun, di balik sampul, halaman kami dirender dengan kemampuan HTML5 Chrome dan JavaScript yang lebih cepat.

Saya tahu seharusnya mudah memindah port agar bekerja dengan Chrome Frame, tapi saya tidak menyadari betapa mudahnya. Anda cukup memasukkan tag meta tambahan dan... dan selesai, semuanya mulai berfungsi di IE.

Ringkasan

Sangat menyenangkan bekerja dengan teknologi baru dalam spesifikasi HTML5, dan saya akan mengatakan bahwa semua yang saya gunakan pasti siap untuk digunakan. Meskipun Anda membutuhkan sesuatu untuk bekerja dengan sempurna di IE, ada banyak hal mengejutkan yang dapat Anda lakukan dengan menggabungkan kanvas dan exCanvas. Selain itu, menulis lapisan terjemahan antara SVG dan VML juga dapat dilakukan. Setelah Anda mulai menggunakan teknologi ini, seperti melangkah ke dunia yang benar-benar baru.

Referensi