Mitos Pengembangan Web di Microsoft Edge (Bahasa Indonesia Edition)

If you are looking for the English Version: Web Development Myths On Microsoft Edge

(Language: Bahasa Indonesia)

Microsoft Edge sudah tentu merupakan Browser modern untuk menggunakan HTML5 Standar Web, secara teknis mirip dengan browser IE11 (Internet Explorer 11), Chrome, Firefox, Opera dan Safari. Namun, Microsoft Edge sangat berbeda dengan browser lain, sebagai contoh tidak ada support untuk BHO (Browser Helper Object) atau dukungan (support) untuk menjalankan komponen ActiveX serta Plugin. Mungkin dalam masa yang dekat akan memiliki support untuk browser extensions, namun didalam artikel ini saya tidak ingin membahas masalah tersebut.

Pada saat saya menulis artikel ini, kita dapat melihat bahwa browser Microsoft Edge mendukung ES6 (ECMA Script 6), bahkan sudah mencapai hingga 90%. Kita juga tahu bahwa mesin Edge JavaScript yang disebut ‘Chakra‘ kini telah menjadi Open Sourced. Ini berarti developer dapat menggunakan mesin JavaScript ini di luar lingkungan browser.

Oleh karena itu, dengan berita besar ini, ada beberapa web developer yang saya amati melalui media sosial atau forum memaparkan HTML code yang tidak benar secara teknis untuk mengadposi browser-browser modern, meskipun mereka pikir itu tidak ada masalah. Mungkin juga beberapa pengembang mengasumsikan bahwa Microsoft Edge itu adalah IE11. Microsoft Edge BUKAN IE11. Didalam tulisan ini saya tidak ingin menceritakan tentang bagaimana Microsoft mengembangkan browser Edge, karena Microsoft telah memiliki banyak tutorial ataupun video tentang sejarah Edge browser dari sejak enam bulan lalu. Yang saya akan berbagi kepada Anda adalah mitos2 apa yang diasumsikan/difikir oleh pengembang web pada browser Microsoft Edge. Tujuan saya menulis ini karena saya melihat banyak pengembang web masih belum lagi bahkan tidak benar didalam menerapkan Standar Web HTML5 ketika ingin mengembangkan aplikasi web yang menargetkan Microsoft Edge browser juga. Saya berfikir, apakah karena programmer tersebut menanggap Microsoft Edge mirip dengan browser-browser lama? Mungkin iya, mungkin tidak, yang jelas saya ingin membantu dan berbagi tentang masalah ini. Jadi, mari kita catat ini sebagai Mitos Pengembangan Web di Microsoft Edge.


MITOS #1

Microsoft Edge menggunakan Trident untuk rendering engine-nya. (Rendering Engine adalah program didalam browser yang kerjanya mengkompilasi HTML menjadi tampilan di layar secara grafis).

FAKTA: TIDAK BENAR!

Yang benar adalah, Microsoft Edge memiliki Rendering Engine baru dengan nama ‘EdgeHTML‘ dan JavaScript engine namanya ‘Chakra‘.

CARA MENGETAHUINYA

Untuk melihat Microsoft Edge dan versi EdgeHTML, buka Microsoft Edge dan click Settings (itu yang titik-titik-titik dikanan atas) kemudian scroll kebawah sampai habis.

Checking EdgeHTML Version


MITOS #2

Deklarasi Tipe Dokumen HTML5. Ada pengembang web yang mengira bahwa Microsoft Edge tidak bisa menggunakan deklarasi berikut;

FAKTA: TIDAK BENAR!

Yang benar adalah browser Microsoft Edge justru lebih mantab bila anda menggunakan Tipe Dokumen HTML5 dan ini justru memerintahkan browser Edge untuk menggunakan EdgeHTML didalam memproses dokumen HTML5.

BAGAIMANA CARA MENGGUNAKANNYA?

Letakan Deklarasi Tipe Dokumen HTML5 paling atas (baris pertama) sebelum elemen <head />. Contohnya:

HTML5 Doctype in First Line


MITOS #3

Untuk kompatibilitas dengan Microsoft Edge, kita perlu menambah deklarasi meta tag ‘http-equiv‘ untuk menset User Agent (UA) sebagai ‘Edge‘. Seperti berikut;

FAKTA: TIDAK BENAR! ALIAS HARAM!

Yang benar adalah “TIDAK ADA“. Anda tidak perlu meletakan baris meta tag ini walaupun anda berfikir/berharap bisa kompatibel dengan IE11, IE10, IE9, IE8. Meta tag ini tidak diperlukan sama sekali didalam HTML5, termasuk di Microsoft Edge, termasuk di IE11 dan di termasuk pada browser2 lainnya.

CARA MEMBETULKAN

Hapus semua baris apapun yang mencantumkan meta tag http-equiv=”X-UA-Compatible” di dokumen HTML5. Lalu, bagaimana jika ingin membuat kompatibel dengan browser lama (non-Modern) seperti IE8, IE9 or IE10? Lihat ulasannya pada mitos ke-4 dan ke-5 dibawah.


MITOS #4

Ada developer web menyatakan seperti ini: Untuk kompatibilitas dengan browser Microsoft Edge, kita perlu mengendus atau mendeteksi jenis browser apa yang digunakan oleh pengguna (User/Client). Caranya dengan mencek string User Agent (UA String) di client-side (dengan JavaScript) atau di server-side, kemudian sewaktu permintaan (request) balasan konten ke server, kembalikan konten yang sesuai dengan model browser yang ada pada user/client tersebut. Artinya kita kondisikan saja respon web server sesuai browser mereka.

FAKTA: TIDAK BENAR! ALIAS MAKRUH (99% HARAM, 1% KEPEPET)!

Yang benar adalah, HINDARI bahkan JANGAN melakukan pendeteksian atau pengendusan jenis browser melalui string User Agent untuk mengkondisikan respon dari web server. Yang anda harus lakukan adalah respon apapun permintaan (request) ke web server dengan konten HTML5 yang standar. Hal ini sebab User Agent String sangat bisa menipu web server. Apa yang terdapat pada user agent string sama sekali tidak menggambarkan model browser. Sekiranya anda kepepet harus mendeteksi browser, maka gunakanlah hanya untuk mencek saja dan bukan untuk mengkondisikan konten balasan dari web server. Kenapa? Sebab layout/rendering engine HTML mempunyai kemampuan bertoleransi atas kesalahan sintaks HTML. Rendering Engine tidak akan memberikan error kepada anda atau memblok halaman gara-gara salah sintaks HTML, pasti dia hajar terus. Apa yang Rendering Engine itu faham langsung dipapar di layar, yang tidak dia faham dilewati saja. Namun, selalulah berpatokan pada standar web HTML5 didalam merespon ke server. Gak ada tuh HTML5 untuk IE8, IE9, IE10, Firefox, Chrome, Safari, dan lainnya. HTML5 ya cuma HTML5. Okay, sekarang bila anda sudah tau seperti ini, namun jangan membiarkan dokumen HTML anda berisi teks-teks yang tidak ada fungsinya (alias teks-teks sampah), bersihkan dokumen HTML anda semurni-murninya. Contoh-contoh User Agent String pada browser yang bisa menipu web server;

Browser Microsoft Edge

Browser Microsoft IE11

Browser Chrome pada Android

Browser Chrome pada Tablet

Browser Safari

Untuk User Agent String Firefox, bisa lihat disini: http://www.useragentstring.com/pages/Firefox/

Coba anda bayangkan jika anda harus mengendus User Agent String, kagak bakal tepat browser apa yang dipakai. Yang terjadi malah browser mendapat konten yang menurut anda itu saja, dan bukan sesuai kompatibilitas serta kemampuan browser sesungguhnya.

BAGAIMANA CARA MENGATASI INI?

Ada beberapa cara untuk mengatasi kompatibilitas. Namun yang paling utama dulu adalah anda harus menghapus segala pendeteksian browser baik di client-side (dengan JavaScript) ataupun di server-side. Mengapa, sebab ini sama sekali TIDAK DIREKOMENDASIKAN dalam pengembangan web. Gunakanlah sintaks HTML5 yang standar/murni/bersih tanpa embel-embel lain dalam server respon.

Tapi Gan, ada yang bilang; Terus gimana cara deteksi support ciri-ciri khas/fitur browser?

Yes, gak ada masalah Gan. Saran saya (sangat direkomendasikan) agar menggunakan Modernizer.js. Modernizer.js merupakan utilitas JavaScript berstandar industri yang berfungsi untuk bisa mencek fitur-fitur browser untuk mencapai kompatibilitas. Modernizr dapat memberitahu ciri-ciri khas/fitur HTML, CSS dan JavaScript yang di-support pada browser user/client tersebut. Misalnya jika anda ingin tau apakah browser bisa berkomunikasi dengan/menggunakan kamera, maka Modernizr dapat memberitahu bisa atau tidak. Dengan cara ini, anda bisa melakukan pengkondisian untuk mengaktifkan modul kamera pada dokumen tersebut. Dan jika ternyata tidak browser tidak bisa, maka anda bisa menginformasikan ke user (contoh: ‘Kamera tidak bisa dipakai pada browser ini’) atau mematikan saja fungsi tersebut. Yang perlu diperhatikan disini adalah respon HTML5-nya dari web server HARUS SAMA untuk semua browser. Respon dari server tidak perlu dibeda-bedakan mengikuti model browser. Sekiranya user menggunakan IE11, jangan kasih konten HTML4 atau standar IE6, melainkan kembalikan dengan konten HTML5 saja. Cara lainnya juga ada, yaitu dengan mengamalkan mekanisme kompatibilitas mundur dari HTML tersebut. Sebagi contoh, dokumen HTML5 dibawah ini akan berjalan dengan normal pada browser-browser model baru (modern browser) ataupun browser-browser model lama (non-modern browser).

HTML5 Contoh DataList

Ini tampilan pada Microsoft Edge:

HTML5 DataList Tampilan Pada Edge

Dan ini tampilan pada Microsoft IE6. Tunggu! Apeee… IE6? Ya, saya juga mencoba ini di IE6 untuk testing saja. Namun, jangan terus anda berfikir bahwa kita harus menargetkan IE6 juga. Tidak perlu! Sebab IE6 itu sudah tidak perlu lagi. Bahkan menurut saya IE6, IE7, IE8, IE9 dan IE10 sudah tidak bisa menjadi patokan untuk pengembangan web. Adapun, ini hanya contoh pembuktian konsep bahwa HTML itu ya cuma HTML, tidak ada HTML yang berbeda-beda pada tiap-tiap browser. Yang ada ciri-ciri khas/fitur-fitur khas dari browser tersebut. Ini juga yang saya maksud bahwa rendering engine pada browser itu sangat bertoleransi dengan apa yang anda programkan. Yang dia faham akan dipapar dilayar, yang tidak akan dilewati saja.

HTML5 DataList Tampilan Pada IE6


MITOS #5

JavaScript pada Microsoft Edge pelan (lambat)! Sama seperti pendahulunya yaitu IE.

FAKTA: TIDAK BENAR GAN!

Jangan selalu mengkambing hitamkan browser, padahal banyak pengembang web yang tidak melakukan unit test dan optimasi programnya. Berikut ini carta ukuran patokan mutakhir.

Chakra Performance

Menurut/opini saya, ukuran patokan diatas bukanlah untuk mencari alasan anda mengembangkan web yang tidak sesuai dengan standar HTML5. Bila saya mengatakan HTML5, ini juga termasuk CSS3 dan JavaScript-nya. Yang perlu dipahami dari patokan diatas adalah, setiap browser memiliki kelebihan dan kekurangan masing-masing. Terkadang saya memperhatikan ada pengembang web yang membandingkan kelebihan browser karena browser tersebut memiliki ciri-ciri khas kemampuan tersendiri. Terus terang tidak ada satupun browser yang sama. Sebagai contoh pada browser iOS Safari di Apple iPhone, dia memiliki sintaks CSS khas untuk iPhone 6S yang tidak ada pada browser lain. Lalu janganlah anda paksakan menggunakan CSS tersebut, sebab browser lain belum tentu bahkan mungkin tidak akan mengadopsinya.

Untuk itu saya sarankan agar menggunakan HTML5 yang merupakan Standar Web atau HTML5 Web Standards. HTML5 Web Standards sudah di ratifikasi industri secara bersama dan ini akan mensupport semua browser modern, baik di desktop maupun di mobile. Sekali lagi, gunakanlah HTML5 standar. Sikiranya anda ingin menggunakan feature (ciri khas) browser terntentu, gunakan utilitas Modernzr.js untuk mencek apakah browser tersebut di-support atau tidak.

BAGAIMANA CARA MENGOPTIMASINYA?

Anda bisa mengukur sendiri dengan cara membuka aplikasi web anda dengan Microsoft Edge. Jika anda tidak pakai WIndows 10, anda bisa menggunakan utilitas Virtual Machine dari Microsoft Edge. Tapi saya sarankan agar menggunakan Windows 10 langsung. Kemudian anda juga bisa melakukan optimasi dengan memeriksa apakah aplikasi web anda sudah sesuai menggunakan Standar Web HTML5. Anda bisa menggunakan utilitas Site Scan Tools untuk memeriksanya. Masukan link URL web anda dan anda bisa melihat mana yang harus anda betulkan serta bisa untuk melihat patokan untuk melakukan optimasi. Jika anda ingin melakukan test kompatibilitas (responsive design, layout) serta Debuging dengan browser-browser lain seperti pada Android, iPhone, dll, anda bisa pakai utilitas Vorlon.JS.

Jika anda ingin mengoptimasi JavaScript-nya, maka saya sarankan agar anda menggunakan JavaScript murni (tanpa framework seperti jQuery, Angular, React, dll). Biasa disebut Vanilla JavaScript. Banyak hasil perbandingan yang mengejutkan kita bahwa ternyata framework-framework yang ada memperlambat kinerja browser tersebut. Jadi gunakanlah secara bijaksana, jangan asal copy-paste saja. Berikut ini daftar kemampuan JavaScript ES6 di Microsoft Edge (Kangax ES6 Compatibility Table).

Chakra - Kangax
Gambar diambil dari: https://blogs.windows.com/msedgedev/2015/12/05/open-source-chakra-core/

MITOS #6

Aplikasi Web saya untuk LoB (Line of Business), jadi hanya intranet. Saya tidak perlu migrasi ke Microsoft Edge sekarang, sebab HMTL5 juga belum siap hingga 2022.

FAKTA: SANGAT TIDAK BENAR!

HTML5 sudah hadir sekarang. Seharusnya aplikasi anda sudah di-update ke HTML5 sekarang, bahkan seharusnya anda sudah merencanakan ini pada tahun 2013, jika belum maka rencanakanlah sekarang juga. Sebab ini bukan masalah Microsoft Edge, ini masalah modernisasi Web Standar untuk meningkatkan sekuriti yang lebih baik, kinerja jauh lebih mantab, akur kompatibilitas dan jangkauan pengguna yang luas. HTML5 sudah hadir dan semua pengembang web harus menargetkan HTML5 saja. Tidak ada alasan bagi pengembang web untuk tidak menggunakan HTML5. Bayangkan saja bila anda membuat aplikasi intranet dimana user/client ingin mengakses dari iPhone, Android atau Windows Phone mereka, tetapi web tersebut tidak akan bisa berjalan sebab browsernya tidak kompatibel dengan HTML lama, apalagi yang tidak standar. Browser-browser tersebut tidak bisa menjalankan komponen ActiveX seperti Silverlight, Flash dan Plugin-plugin lainnya. Jadi sudah waktunya anda menggunakan Standar Web HTML5 sekarang.

BAGAIMANA CARA MIGRASINYA?

Berikut ini beberapa mitos kecil yang saya pernah dengan dari beberapa pengembang web di perusahaan.

  • Kebanyakan perusahaan masih menggunakan Windows 7, kita tidak dapat migrasi sekarang: Anda bisa menginstal IE11 atau Chrome terbaru atau Firefox jika Anda ingin implementasi HTML5 di Windows 7. Anda dapat mulai migrasi perlahan untuk menargetkan IE11, NAMUN, gunakanlah HTML5 sebagai rencana migrasi. Jadi, bukan hanya rencana migrasi browser lama ke browser baru saja, namun persiapkan rencana migrasi HTML-nya juga.
  • Intranet saya membutuhkan ActiveX untuk aplikasi LoB: Tidak masalah, Anda dapat menggunakan IE11 atau Chrome terbaru atau Firefox saat Anda berencana untuk migrasi. Gunakan IE11 atau Chrome sebagai proses migrasi sementara. Perlahan hapuskan BHO (Browser Helper Object) seperti ActiveX Plugin, Silverlight, Flash dan ganti dengan pengembangan aplikasi web model baru dengan Standar Web HTML5. Ini lebih aman dan lebih kinerjanya lebih baik.
  • Anda tidak mengerti, kita memiliki ratusan aplikasi web intranet: Terus terang saya sangat mengerti situasi semacam ini, itu sebabnya Anda perlu merencanakan untuk migrasi ke HTML5 secepatnya, satu per satu. Katakanlah seperti ini, migrasi ke HTML5 adalah prioritas Anda dan Anda perlu melakukan hal ini mulai sekarang.
  • Saya menggunakan produk pihak ke-3 untuk aplikasi web intranet: Hubungi vendor yang buat dan tanya apakah memiliki yang standar HTML5. Jika mereka tidak memilikinya, stop dan jangan gunakan lagi. Gunakan produk vendor yang selalu up-to-date. Saran saya, jika komponen dari vendor tersebut menggunakan ActiveX, ganti dengan Standar Web HTML5 saja mulai sekarang.

KESIMPULAN: GUNAKAN STANDAR WEB HTML5

Gunakan Standar Web HTML5 jika aplikasi web anda ingin kompatibel pada semua browser, baik desktop browser maupun mobile browser. Design web aplikasi anda untuk bisa berjalan pada semua ukuran screen (besar, lebar, kecil, tegak, dan lain-lain) dengan cara menggunakan Bootstrap. Microsoft Edge dan IE11 adalah termasuk Modern Browser. Jangan khawatir tentang kompatibilitas dengan browser lain selama anda mengamalkan Standar Web HTML5 secara benar. Maksunya secara benar adalah sebagai berikut;

  1. Jangan lupa untuk menggunakan Deklarasi Dokumen Tipe HTML5 (yang ini <!DOCTYPE html>) pada baris pertama.
  2. Hindari mendeteksi atau mengendus jenis browser UA String untuk mengkondisikan respon dari web server.
  3. Hindari penggunaan CSS yang tidak standar. Setiap browser memiliki vendor CSS Prefixes masing-masing dan ada yang masih atau hanya untuk percobaan (eksperimen) dan ada yang sudah diratifikasi menjai standar HTML5 juga. Jadi, gunakanlah yang standar saja. Sebab yang masih percobaan terkadang dibatalkan oleh si pembuat browser tersebut. Namanya juga eksperimen.
  4. Selalu gunakan library JavaScript yang up-to-date. Contohnya, jangan membiarkan menggunakan Bootstrap, jQuery, Angular, React Libary versi lama tanpa di-update. Sebab jQuery juga mengikuti perkembangan teknologi web. Update dengan jQuery baru. Jika setelah update tidak kompatibel, berarti ada yang salah di dokumen HTML anda. Gunakan Standar Web HTML5 saja. Dijamin akan berjalan normal. Belajar menggunakan Bower dan Gulp jika ingin mudah mengupdate JavaScript Library.
  5. Berhenti/STOP menggunakan Plugins! Jangan lagi menggunakan Flash, Silverlight dan segala bentuk Plugin ActiveX. Komponen-komponen ini bukanlah merupakan standar HTML5. Ini sebab jaman dulu HTML masih tidak mampu dan perlu dibantu, misalnya untuk animasi. Sekarang, anda bisa membuat animasi dengan menggunakan CSS3 dan JavaScript. Bahkan untuk 3D pun mudah termsuk menggunakan vector graphics (SVG).

SUMBER LAINNYA

Web Development Myths On Microsoft Edge

5 ways to make your website rock on Microsoft Edge

Tune, modernise and optimise your website

Woah, I Can Test Edge & IE on a Mac & Linux!

Leave a Reply

Your email address will not be published. Required fields are marked *