Belajar mengenai Polymer JS Cara mudah untuk membuat WebCommponent.
Jadi PolymerJS ini merupakan Framework yang di desain untuk membantu developer web, dalam membangun Component tersendiri. Component yang dapat di include-kan dalam page yang ia inginkan.
Untuk kali ini kita akan mencoba melakukan percobaan untuk membuat component hello-world menggunakan polymer Js.
Adapun requirement yang di butuhkan untuk membangun applikasi kita kali ini adalah :
Jadi PolymerJS ini merupakan Framework yang di desain untuk membantu developer web, dalam membangun Component tersendiri. Component yang dapat di include-kan dalam page yang ia inginkan.
Untuk kali ini kita akan mencoba melakukan percobaan untuk membuat component hello-world menggunakan polymer Js.
Adapun requirement yang di butuhkan untuk membangun applikasi kita kali ini adalah :
- Polymer JS
- Web Server (xampp(Apache), node js, wampp, dll) kali ini saya menggunakan xampp.
- Text Editor (Notepad++, Netbeans, Sublime, dll) kali ini saya menggunakan Notepad++.
- Langkah Pertama karena saya menggunakan web server xampp maka. masuk ke direktori xampp kemudian htdocs. kebetulan direktori saya seperti ini "C:\xampp\htdocs\". di dalam direktori htdocs buat direktori baru (nama aplikasi) misal hello-polymer sehingga direktori menjadi "C:\xampp\htdocs\hello-polymer".
- Selanjutnya download package polymerJS dan extract kedalam direktory hello-polymer.
- Setelah direktory sesuai seperti gambar di atas, maka kita bisa membuat component sendiri. buat direktori baru setara dengan bower_components dengan nama folder components selanjutnya buat file hello-world.html di dalam folder components.
Hello {{name}} !
Input Your Name :
Susunan direktori sebagai berikut. - Kemudian buat file index.html di dalam folder hello-polymer. File ini yang nantinya akan kita gunakan untuk memanggil component hello-world yang sudah kita buat.
Polymer JS Hello - Susunan Folder akhir akan seperti ini:
-- xampp -- htdocs -- hello-polymer -- bower-components -- core-component-page -- polymer -- webcomponentsjs -- components -- hello-world.html -- index.html
- Selanjutnya jalankan web server anda untuk xampp.
- Langkah terakhir akses melalui web browser "localhost/hello-polymer"
Sekian tutorial singkat dari saya Saiful Arifin semoga bermanfaat. disini saya lampirkan video dari Joe Maddalone yang kurang lebih hampir sama seperti yang saya tuliskan.