Friday, April 12, 2019

AMP Perkenalkan amp-script untuk input JavaScript di Web AMP

    Dengan amp-script, Website berbasis AMP memungkinkan menggunakan JavaScript dari pihak ketiga seperti React Component

    Kabar gembira bagi anda developer website berbasis AMP HTML. AMP Project sebagai pengembang AMP HTML baru-baru ini meresmikan komponen AMP terbaru yang diumumkan langsung via Twitter @amphtml. 

    AMP Project mengumumkan bahwa, komponen <amp-script> akan segera bisa dipakai dan saat ini bisa digunakan dalam mode experimental. 

    Apa fungsi amp-script?

    Seperti yang kita tahu sebelumnya, sebuah dokumen AMP akan mengalami error validasi apabila kila memasang sebuah JavaScript pihak ketiga di dalam komponen website AMP. 

    Tapi, dengan 'amp-script', custom JavaScript pihak ketiga dapat digunakan di dalam halaman website berbasis AMP. Contoh, jika anda ingin menggunakan komponen React, anda bisa menggunakan <amp-script> untuk memanggilnya.

    Tentu saja ini akan sangat berguna bagi anda yang ingin membuat website AMP dengan JavaScript. JavaScript bukan hanya salah satu bahasa tertua untuk web, itu hampir salah satu yang paling cepat berkembang. Jadi sekarang AMP akan mendukungnya, pengembang dapat lebih banyak mengadopsi AMP pada aplikasi web dan situs web mereka.

    Cara Menggunakan amp-script

    Saat ini, amp-script masih dalam tahap experimental. (Baca: AMP Experimental). Jadi belum dapat digunakan dalam production.

    Namun dalam halaman resmi amp.dev dijelaskan secara sederhana penggunaan amp-script, contoh seperti di bawah ini.
    
    <!-- hello-world.html -->
    <amp-script layout="container" src="https://example.com/hello-world.js">
    <button id="hello">Insert Hello World!</button>
    </amp-script>

    Dan di bawah ini adalah JavaScript pada hello-world.js
    
    // hello-world.js
    const button = document.getElementById('hello'); button.addEventListener('click', () => { const el = document.createElement('h1'); el.textContent = 'Hello World!'; // `document.body` is effectively the <amp-script> element. document.body.appendChild(el); });

    Baca selengkapnya di halaman amp-script.


    Disqus Comments