Introduce to Ruby on Rails

Halo sobat, kembali lagi di blog Nostra!

Pada kesempatan kali ini, kami akan memberikan pengenalan tentang Ruby on Rails.

Ruby on Rails (disingkat menjadi Rails) adalah framework yang ditulis dengan bahasa pemrograman Ruby, yang diperkenalkan pertama kali pada tahun 2004. Rails termasuk server side, yang berarti semua proses dijalankan pada server, bukan pada client's browser.

Ruby itu sendiri merupakan salah satu high level programming language dan menggunakan konsep object oriented programming. Ruby populer karena beberapa hal berikut:

- Mudah dipelajari

- Open source

- Library yang banyak

Dengan beberapa kelebihan tersebut, tentunya Ruby memiliki beberapa kekurangan, beberapa kekurangannya, adalah:

- Performa yang tidak sebanding dengan Java, C, C++, dan lainnya

- Threading model yang digunakan oleh Ruby menggunakan virtual machine, tidak menggunakan native OS thread

Rails sendiri memiliki beberapa keuntungan:

- Framework yang membuat developer lebih produktif

- Tidak membutuhkan proses compile

- Anda bisa membuat aplikasi setidaknya lebih cepat 10 kali daripada framework berbasis Java

Rails juga merupakan full-stack framework, karena menggunakan MVC (model view controller) pattern, sehingga Rails memiliki backend dan frontend sendiri. Secara code, Rails juga lebih simple, sehingga anda dapat membuat aplikasi dengan lebih sedikit baris.

Salah satu contoh code yang ditulis menggunakan Rails:

Sekian introducing to Ruby on Rails kali ini, sampai bertemu di part kedua (yang akan menjelaskan function-function dasar pada Rails).

Sass Vs LESS Manakah yang lebih baik?

Hallo teman-teman, setelah kemarin saya bahas tentang Pengenalan Sass dan fitur-fiturnya, sekarang saya akan sharing perbandingan antara Sass dan LESS dengan sedikit penjelasan agar teman-teman semua lebih paham.

Sebelum mulai jika teman-teman belum baca tentang Sass boleh buka url ini,

http://blog.nostratech.com/2017/12/sass-css-with-superpowers.html

Apa itu Preprocessor CSS?

Sering kali kita menulis CSS dengan berulang2 seperti warna, class yang berbeda, dll. Ini bisa membuat kita para developer jadi lebih banyak memakan waktu. Oleh sebab itu kita butuh Preprocessor CSS yang pada dasarnya adalah bahasa pemrograman yang digunakan untuk membuat bentuk, warna yang nantinya akan di compile menjadi CSS biasa.

Menurut Google Trends, Sass jauh lebih populer dari LESS sampai bulan Desember 2017 ini.

Google Trends

Keuntungan Menggunakan Preprocessor

Salah satu keuntungan yang utama adalah kita sebagai developer atau designer bisa menggunakan preprocessor untuk menghindari Pengulangan pada CSS yang akan kita buat.

Dengan Preprocessor, kode kita akan lebih bersih. Contohnya adalah dengan menggunakan variable untuk menyimpan suatu nilai, jadi masalah pengulangan yang kita temui di CSS akan lebih cepat kita selesaikan dengan Preprocessor ini. Dengan Preprocessor, file kita bisa lebih terstruktur karena kita bisa memisahkan antara fungsi satu dengan fungsi lainnya di beberapa file yang berbeda. Selain itu, kita bisa menggunakan Operator Matematika untuk menentukan sebuah nilai yang kita inginkan.

Installasi Sass dan LESS

      Untuk memulai menggunakan keduanya, kita bisa menggunakan aplikasi Complier tambahan. 

      Selain aplikasi diatas, kita juga bisa menggunakan CLI. Berikut Cara Installnya :

1. Sass : Pertama kita harus menginstall Ruby untuk Windows / Linux. Kemudian jalanakan sudo gem install sass. Selain menggunakan Ruby, ada juga library lain seperti libSass, yang sekarang membawa Sass ke NodeJS, tanpa membutuhkan Ruby untuk compile.
2. LESS : Sebelum install LESS kita harus menginstall NodeJs, karena LESS dasarnya adalah menggunakan javascript, lalu kita hanya perlu menjalankan npm install -g less. Untuk windows, bisa menggunakan npm install less.

Code Editor

Masih banyak Code Editor yang belum support Sass dan LESS. Oleh sebab itu, kita perlu menginstall plugin agar syntax dapat dikenali, sehingga lebih memudahkan kita untuk menulis syntax.

Berikut plugin untuk Sass dan LESS :

Ini dia beberapa perbandingan Sass dan LESS secara mendasar :

Sass : 

• Compiler Menggunakan Ruby / libSass
• Sass Menggunakan $ untuk penulisan Variable
• Sass memiliki Compass (cross-browser support)
• Looping berfungsi untuk Semua Data Class
• mempunyai 2 extension yaitu .SASS & .SCSS
• Sass tidak membutuhkan titik koma ';' dan kurung kurawal '{}' untuk penulisan syntax
• SCSS membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS tetapi mempunyai fungsi seperti Sass

LESS :

• Compiler Menggunakan NodeJs (Javascript)
• Less Menggunakan @ untuk penulisan variable 
• Looping (Hanya untuk Angka)
• 1 extension (.less)
• Less membutuhkan titik koma ';' dan kurung kurawal '{}' seperti CSS

   
Setelah kita membahas beberapa perbedaan antara Sass dan LESS, dapat disimpulkan bahwa Sass lebih kaya dalam fitur. Oleh karena itu, saya menganjurkan teman-teman semua untuk memilih Sass sebagai preprocessor dalam pengerjaan CSS. Selain lebih kaya fitur, Sass juga lebih populer dari LESS sehingga kita akan lebih mudah untuk belajar dengan adanya banyak sumber yang membahas tentang Sass. 

Nah, sekian dulu blog tentang Perbandingan Sass dan Less, semoga dapat membantu teman-teman semua.

GANBATTE!!!

Refrensi :

http://marksheet.io/sass-mixins.html

http://sass-lang.com/

http://lesscss.org/

http://www.keycdn.com/blog/sass-vs-less/

Membuat Generic DropDown dengan ReactJS

Salah satu kelebihan reactjs, adalah bisa membuat komponen sekecil mungkin, dan komponen-komponen ini bisa di re-use atau digunakan kembali.

Selain bisa di re-use, memecah komponen menjadi bagian-bagian kecil juga memudahkan untuk maintenance.

Ketika terjadi error, cukup membenahi di komponen tersebut. Dalam membuat komponen generik, sebaiknya meminimalisir operasi-operasi kalkulasi yang spesifik, karena generik jadi harus bisa dipakai dengan masukan yang umum.

Salah satu komponen penting dalam form selain input text dan text area adalah dropdown. Dengan reactjs, memungkinkan untuk membuat komponen dropdown yang generik.

Komponen dropdown yang harus ada:

1. select 
2. options
3. List/map
4. Default value
5. Selected value
6. onChange event

Komponen Option

Ide nya adalah, komponen option ini hanya menerima masukan dan menampilkan value dan label.

Komponen Select

Test

1. Clone from here
2. npm install
3. npm start

Result

Jika memilih drop down yang kedua, maka nilai yang dipilih akan ditampilkan di bawahnya.