Belajar Menggunakan Bower

Bower adalah salah satu package manager untuk pengembangan front-end web. Sesuai kategorinya, Bower berfungsi untuk memudahkan kita mengatur paket atau library apa saja yang kita butuhkan saat mendevelop suatu aplikasi, dalam hal ini front-end (css/js). Kita tidak perlu repot untuk mendownload library satu-per-satu ketika akan menggunakannya. Begitu juga ketika ada versi baru dari library tersebut. Cukup dengan mengetikkan satu perintah dan voila, semuanya akan terdownload secara otomatis.

Hampir semua library yang terdapat di repositori publik dapat diambil menggunakan Bower. Biasanya repo-repo ini ditempatkan di Github oleh pemiliknya dan bersifat open-source. Nah sekarang kita coba untuk menggunakan Bower.

Install Git dan NodeJS

Ada 2 software yang menjadi ketergantungan si Bower ini, yaitu Git dan NodeJS. Jadi silahkan install terlebih dulu kedua software Keduanya bisa diperoleh di:

Install Bower

Untuk menginstall bower, kita menggunakan NPM (Node Package Manager) yang sudah terpasang saat kita menginstall NodeJS. FYI, NPM ini cara kerjanya juga sama dengan Bower. 😀 Kita pasang Bower dengan perintah berikut:

$ npm install -g bower

Jika muncul error permission denied, jalankan lagi perintah itu dengan sudo.

Menggunakan Bower

Sebelumnya pindah dulu ke direktori proyek kita. Jika kita memulai proyek baru, maka bisa menggunakan perintah:

$ bower init

Kemudian kita akan diberikan wizard untuk mengisi beberapa detail tentang proyek kita (kepo deh). Setelah itu kita bisa menginstall paket-paket yang kita butuhkan. Misal kita akan menginstall Twitter Bootstrap:

$ bower install bootstrap --save

Perintah ini otomatis akan men-download semua file Bootstrap yang siap digunakan. Tidak ketinggalan juga library yang dibutuhkan Bootstrap, seperti jQuery, juga akan otomatis ter-download. Dengan opsi --save maka library yang kita install otomatis akan ditambahkan ke file bower.json. Kita bisa mengedit file ini langsung kemudian jalankan perintah:

$ bower install

Maka semua library yang tertulis di bower.json akan di-download, dan lagi-lagi secara otomatis juga men-download apa yang mereka butuhkan. Awesome! 😮

Lebih jauh tentang Bower, mangga dicek di webnya bower.io. :))

P.S. Mas Rahmat Awaludin punya video bagus buat kenalan dengan Bower di Malescast.

TechTalk #63: MeteorJS

Halo, balik lagi sama saya, sang pemilik blog ini. 😀

Seperti biasa (padahal baru 4x), minggu ini TechTalk di JDV mengangkat topik Rapid Prototyping with MeteorJS yang disampaikan oleh Mas Kenniko. Di sesi ini Mas Kenniko menerangkan betapa mudahnya membuat prototipe aplikasi dengan MeteorJS. Bayangkan, aplikasi chat realtime bisa dibuat kurang dari 1 jam, awesome! 😮

Jadi dengan MeteorJS kita tinggal install paket-paket yang kita butuhkan. Tambah sedikit kode, tanpa konfig apapun, aplikasi kita sudah jalan. Dia punya sistem paket sendiri dan paket-paketnya bisa dicari di atmospherejs.com. Dan asiknya, si Meteor ini punya fitur One language everywhere, kita tidak perlu ngoding untuk backend dan frontend, cukup sekali saja dan Meteor bisa tau mana yang harus dijalankan di backend atau frontend.

Keynotes

  • Realtime, perubahan bisa dilihat secara bersamaan di device yang berbeda
  • Live update, ketika kita save file, tampilan di browser otomatis ikut update, dan itu tanpa reload page
  • Free testing server, untuk testing aplikasi secara live di namaAplikasi.meteor.com
  • Integrasi dengan Cordova, deploy ke mobile jadi lebih mudah
  • Way too magic! Banyak kemudahan tapi kita tidak tahu apa yang sebenarnya terjadi

~~~

Di kesempatan ini juga saya ketemu langsung dengan mas Rizqinova, yang sebelumnya cuma tau di facebook haha. Sempat kenalan juga dengan mas Evan dan mas Baba (kalau ngga salah 😀 yang kebetulan baru tau kemarin itu. Sip, ilmu baru, relasi baru. :))

TechTalk #62: Animations in AngularJS

Hola!

TechTalk minggu ini masih membahas javascript dan kali ini topiknya adalah Animations in AngularJS. Masih bersama mas Rijalul Fikri, yeah. Jadwal sebelumnya minggu ini topiknya MeteorJS, berhubung pembicaranya berhalangan jadinya mas Fikri yang turun tangan (ceritanya begitu).

Kali ini dijelasin dari basic animasi di web. Bukan animasi yang kompleks, bukan bahas <canvas> juga. Pertama dikenalkan dengan transition di CSS. Lalu dibandingkan dengan jQuery animate(). Dan terakhir penerapan animasi di AngularJS.

What I learned:

  • Gunakan properti yang ramah animasi: PROS (Position, Rotation, Opacity, Scale). Referensi
  • Gunakan Animate.css untuk efek-efek animasi yang umum digunakan
  • Animasi dengan CSS lebih menghemat waktu dibanding JS, terutama untuk kasus sederhana seperti efek hover
  • Angular #1: menggunakan modul ngAnimate dan manual di CSS-nya
  • Angular #2: modul Hendrixer/ngFX yang sudah bundled dengan ngAnimate dan Animate.css
  • Angular #3: modul cgwyllie/ngular-velocity, yang satu ini belum dibahas karena katanya terlalu panjang untuk dijelasin 😐

Sip, minggu depan kita ke MeteorJS. 🙂

TechTalk #61: Material Design using AngularJS

TechTalk #61 ini topiknya Material Design using AngularJS yang dibawain mas Rijalul FIkri. Awalnya saya kira materinya akan fokus ke Angular-nya, ternyata kebalik. Angular.js di sini ternyata sebagai wadahnya.

Jadi topik kali ini membahas Angular Material (https://material.angularjs.org/), library untuk implementasi Material Design di Angular.js. Dengan library ini, kita bisa mendevelop aplikasi Angular.js dengan rasa Material tanpa harus pusing memikirkan stylingnya, jadi kita bisa fokus ke pengembangan aplikasinya. Banyak fitur dan directives yang siap pakai, jadi kita tidak perlu repot-repot buat dari awal dan kita bisa develop lebih cepat, yosh!

Warna palet juga bisa kita sesuaikan sendiri agar tidak terkesan mainstream. Warna-warna palet default bisa dilihat di http://www.materialpalette.com/

Oke, see ya on the next techtalk!