BAB 6 PENGEMBANGAN FRONTEND
6.13 Pra-Prosesor Dan Mesin Template
Seperti yang Anda lihat, menulis kode HTML dan bahkan CSS bukanlah ilmu roket. Ini membutuhkan beberapa disiplin, karena Anda dapat dengan mudah berakhir dengan basis kode besar yang sulit dipelihara, tetapi tidak sulit sama sekali. Namun, pengembang adalah orang paling malas di dunia, jadi mereka menilai secara kritis setiap simbol yang harus mereka tulis dan dapat dengan mudah mengatakan, "Ini terlalu bertele-tele!" atau, “Ada banyak kode yang berulang, ayo lakukan sesuatu!” Jadi, misalnya, ketika datang ke kode HTML, mereka memutuskan bahwa simbol tag pembuka dan penutup (< dan >) tidak berkontribusi pada tujuan keseluruhan sehingga mereka datang dengan bahasa baru di mana mereka menghapusnya. Atau, misalnya, mengapa kita harus mengulang kode untuk hal-hal seperti footer di setiap halaman situs web kita? Pengembang sangat menyukai prinsip KERING dan KISS—itulah sebabnya mereka terus-menerus menghadirkan bahasa baru untuk membuat hidup mereka lebih mudah.
Prinsip KERING berarti "Jangan ulangi dirimu sendiri" dan KISS berarti "Tetap Sederhana Bodoh!"
Bahasa ini disebut pra-prosesor atau mesin templating untuk HTML dan pada dasarnya adalah bahasa pemrograman yang mengurangi waktu pengembangan dengan menyediakan sarana penggunaan kembali kode dan mengurangi jumlah kode itu sendiri.
Setelah menulis dalam bahasa ini, Anda harus menerapkan alat khusus yang disebut transpiler yang akan mengubah kode ini menjadi HTML dan CSS lagi, sehingga browser dapat memprosesnya. Ada banyak dari mereka. Jadi, untuk HTML Anda memiliki, misalnya, sebagai berikut:
HAML: bahasa markup abstraksi HTML
Giok: mesin templat
Kumis
HandlebarsJS
Mari, misalnya, membandingkan kode yang ditulis dalam HTML dan Jade.
Pertimbangkan potongan kode HTML ini:
<div class="container">
<div id="main" class="row">
<h2>Log in</h2>
<form>
<div class="form-group">
<label for="email">Email</label>
< input type="email" class="form-control" id="email"
aria-describedby="emailHelp" placeholder="[email protected]">
</div>
</form>
</div>
</div>
Di Jade, Anda akan melakukan sesuatu seperti ini:
.container #main.row h2 Log in
form
.form-group
label(for='email') Email
input#email.form-control(type='email', placeholder='[email protected]') Ini akan sangat mirip di HAML:
.container #main.row
%h2 Log in
%form .form-group
%label{:for => "email"} Email
%input#email.form-control{:placeholder => "[email protected]", :type => "email"}/
Seperti yang Anda lihat, mesin templat untuk HTML menghapus kode yang tidak perlu dan bahkan menyediakan sarana untuk menggunakan kembali templat di dalam templat; jadi, misalnya, Anda dapat memiliki template untuk footer dan hanya memasukkannya ke dalam template lain, sehingga Anda tidak perlu mengulang kode. Itu cukup berguna.
Ada sesuatu yang mirip untuk CSS juga. Dua alat paling populer untuk CSS adalah Sass (https://sass-lang.com/) dan KURANG (http://lesscss.org/). Sass adalah bahasa ekstensi CSS yang berarti "Sintactically Awesome Style Sheets". less adalah pra-praprosesor lain untuk CSS, yang terinspirasi oleh Sass, yang ditulis dalam JavaScript, dan tagline-nya adalah, "Ini CSS, dengan sedikit lebih banyak."
Satu hal yang sangat berguna yang ditawarkan oleh Sass dan Less adalah variabel.
Bayangkan Anda memiliki beberapa warna tertentu yang Anda gunakan di seluruh halaman dalam elemen yang berbeda. Katakanlah, merah muda, #f28fe9. Anda harus mengulangi kode warna ini di semua tempat di mana Anda ingin menggunakannya. Bayangkan bahwa untuk beberapa alasan Anda harus mengubah kode ini menjadi merah muda yang sedikit lebih terang, #ffb6c1. Tentu saja, ada fitur bagus yang disebut temukan dan ganti, tetapi tetap saja itu membosankan. Apa yang dapat Anda lakukan di Sass or Less adalah dengan mendeklarasikan variabel bernama pink dan menggunakan serta menggunakannya kembali di seluruh kode:
/ Variables
@pink: #f28fe9;
@light-pink: lighten(@pink, 10%);
// Usage a, .link {
color: @pink;
}
a:hover {
color: @light-pink;
}
Sekarang jika Anda perlu mengubah warna merah muda Anda menjadi sesuatu yang lebih gelap atau lebih terang, Anda hanya dapat mengubahnya di satu tempat! Seberapa mengagumkan itu? Selain menawarkan dukungan bahasa untuk membuat kode Anda dapat digunakan kembali dan ramah, baik Sass dan Less menawarkan beberapa pustaka komponen siap pakai, dukungan untuk sistem Grid, tema yang berbeda, dll. Jika Anda tertarik dengan subjek ini untuk membuat web lebih cantik menggunakan CSS , kami sangat menyarankan Anda untuk melihat dan bermain dengan semua alat ini.
6.14 Konten Dinamis
Sekarang kita tahu bagaimana mengimplementasikan antarmuka pengguna kita menggunakan HTML dan CSS, sekarang saatnya untuk membuatnya hidup! Di bagian ini,
seperti yang mungkin sudah Anda duga, kita akan berbicara tentang JavaScript! JavaScript adalah bahasa pemrograman yang ditafsirkan tingkat tinggi.
Menjadi bahasa pemrograman tingkat tinggi berarti kode lebih dekat dengan manusia daripada ke mesin, sehingga mudah dibaca oleh manusia. Diinterpretasikan berarti tidak perlu dikompilasi sebelum dieksekusi (seperti, misalnya, Java). Ini ditafsirkan oleh browser selama runtime.
Menjadi bahasa yang ditafsirkan dan tidak dikompilasi di satu sisi mengurangi waktu pengembangan, karena Anda tidak perlu mengkompilasi kode setiap kali Anda mengubahnya; di sisi lain, ini lebih rawan kesalahan karena Anda mungkin menemukan kesalahan hanya selama runtime.
harap dicatat, meskipun setengah dari nama bahasa JavaScript adalah Java, itu tidak ada hubungannya dengan bahasa pemrograman Java! Beberapa orang bahkan mengatakan,
“JavaScript ke Java seperti Mobil ke Karpet.”
Karena JavaScript berjalan di sisi klien, ia memiliki akses ke properti browser klien;
sekali lagi, berhati-hatilah dengan informasi yang Anda akses dan gunakan—hukum perlindungan data tidak tidur!
6.15 Konsol Alat Pengembangan
Cara termudah untuk mencoba JavaScript adalah menggunakan konsol alat pengembangan. Itu ada di sebagian besar browser. Kami akan menunjukkan alat pengembang Chrome di sini. Gambar 6-13 menunjukkan cara Anda membukanya.
Gambar 6-13. Membuka konsol alat pengembang di Chrome
Di beberapa sistem, Anda cukup menekan F12. Di macOS, Anda harus menekan commandoption-I (harus berbeda, kan?). Dengan alat pengembang dibuka, klik pada tab Konsol. Sekarang Anda dapat mengetik beberapa kode JavaScript, dan itu akan segera mengeksekusinya. Ketik, misalnya, 2 + 2 diikuti dengan Enter. Anda akan melihat sesuatu seperti yang ditunjukkan pada Gambar 6-14.
Gambar 6-14. JavaScript dieksekusi di chrome devtools console
Sekarang ketik new Date() dan klik Enter. Date() adalah fungsi JavaScript bawaan yang memungkinkan operasi dengan tanggal dan waktu. Ketik alert(new Date()), dan Anda akan melihat popup dengan Date baru. Alert adalah fungsi JavaScript bawaan lainnya yang menampilkan popup jelek ini. Tolong jangan gunakan itu.
6.16 Variabel
JavaScript juga memiliki variabel. Untuk mendeklarasikan variabel dalam JavaScript, gunakan kata kunci var diikuti dengan nama variabel. Misalnya, ketik var myVar = 10; Klik enter dan sekarang ketik myVar. Angka 10 akan ditampilkan. Ketik var a = 10; var b = 20;.
Sekarang ketik a + b. Mainkan sedikit dengan variabel menggunakan konsol.