() translation by (you can also view the original English article)
Web Starter Kit adalah sebuah inisiatif baru dari Google; sebagai bagian dari misi mereka untuk menyederhanakan alur pengembangan web, sembari mendorong penerapan-penerapan terbaik yang mereka anjurkan di dalam Google's Web Fundamentals.
Pada saat penulisan, Web Starter Kit baru saja dirilis beberapa hari sebagai sebuah repo umum di Github. Web Starter Kit segera menarik perhatian komunitas pengembang web, serta dengan cepat menjajaki posisi teratas trending repositories di Github.
Meskipun saat ini ada begitu banyak library dan framework, namun Web Starter Kit begitu menarik dan layak untuk ditelusuri. Dalam artikel ini, saya akan mengajak anda melihat beberapa fitur utama serta menunjukkan bagaimana menggunakannya untuk memulai proyek baru anda berikutnya. Tanpa panjang kata, mari kita mulai!
Tentang Web Starter Kit
Seperti yang tesirat pada namanya, Web Starter Kit adalah sebuah satuan alat pengembangan yang didesain untuk langkah awal proyek baru. Google, dalam Girhub repository, menggambarkannya sebagai:
A starting point for multi-device web development
Ketika ditelusuri anda akan mendapati bahwa Web Starter Kit mengambil banyak inspirasi dari seperti HTML5 Boilerplate dan Yeoman (Web Starter Kit menggabungkan banyak hal terbaik dari kedua alat tersebut). Web Starter Kit hadir dengan template awal yang dioptimalkan untuk kecepatan dan banyak perangkat.
We actively work on delivering the best PageSpeed Insights score and frame-rate possible.
Lebih dari itu, Web Starter Kit juga mencakup sejumlah sarana untuk memfasilitasi proses pengembangan, termasuk alat uji tersinkronisasi, live browser reloader, JavaScript linter, Sass compiler, CSS minifier, dan sebuah pengoptimal gambar. Seperti pada Yeoman, alat-alat pendukung tersebut telah terkonfigurasi, sehingga kita bisa segera memulai pengembagan tanpa perlu membuang waktu untuk melakukan konfigurasi.
Pra-syarat
Anda bisa mengambil file Web Starter Kit dengan mengunduhnya langsung dari repo Google, akan tetapi agar dapat memanfaatkan Web Starter Kit sepenuhnya, anda sangat disarankan untuk memasang alat-alat berikut pada sistem komputer anda.
Git: seperti tersebut diatas, Web Starter Kit dimuat di Github. Anda akan mendapati bahwa mengambil repository melalui perintah git clone lebih mudah ketimbang mengunduhnya sebagai file Zip. Jika anda menggunakan applikasi Github, cukup tekan tombol Clone in Desktop pada halaman repo:
Anda belum mengerti git? Simak Git for Designers di Tuts+ Code.
Node.js: banyak alat-alat yang anda akan temui di Web Starter Kit, seperti JSLinter, dibuat dengan Node.js. Dan mereka akan harus diinstal melalui Node Package Manager (NPM). Anda dapat melihat Installing Node and NPM, untuk bantuan lebih lanjut.
Ruby and Sass: Web Starter Kit menggunakan gulp-ruby-sass untuk menterjemahkan Sass ke CSS, yang mana membutuhkan Ruby dan Sass agar berfungsi. Untuk OSX dan Linux, Ruby telah terinstal. Bagi pengguna Windows; gunakan RubyInstaller untuk menginstal Ruby. Setelah Ruby terinstal, jalankan perintah gem install sass dari Command Prompt untuk menginstal Sass.
Untuk informasi lebih lanjut dalam memasang Ruby dan Sass, silakan lihat Mastering Sass: Lesson 1.
Gulp: menggunakan Gulp untuk menangani banyak tugas yang diperlukan selama pengembangan akan sangat membantu. Dengan Node.js telah terpasang pada sistem anda, pasang Gulp dengan menggunakan perintah berikut:
1 |
npm install -g gulp |
Terakhir, pastikan perintah git dan npm dapat diakses. Ketik perintah di bawah ini untuk menguji apakahgit dannpm berfungsi.
1 |
git --version && npm -v |
Perintah di atas akan menampilkan versi git and npm, sebagai berikut.
Menginstal Web Starter Kit
Ok, untuk memulai, masuklah ke dalam direktori di mana Anda ingin mengerjakan proyek Anda (baik dengan menuliskan perintah langsung, atau menjalankan perintah "cd" kemudian tariklah folder yang Anda pilih ke atas jendela Terminal sebelum menekan tombol "Enter") kemudian jalankan perintah berikut untuk menyalin Web Starter Kit dari Github ke dalam folder anda:
1 |
git clone https://github.com/google/web-starter-kit.git |
Setelah itu, ubah direktori ke folder "web-starter-kit" di mana file Web Starter Kit berada. Jalankan perintah berikut:
1 |
cd web-starter-kit
|
Di dalam folder ini, web-starter-kit/, anda akan menemukan:
-
app/; ini adalah folder di mana semua sumber kode yang belum terminifikasi berada. -
package.json; daftar dependensi. -
gulpfile.js; memuat konfigurasi untuk menjalan Gulp.
Dependensi Web Starter Kit
Seperti tersebut, Web Starter Kit bergantung pada sejumlah paket Node, termasuk plugin Gulp, untuk menjalankan beberapa proses proses pengembangan. Jadi hal berikutnya yang harus anda lakukan adalah instal pakat Node yang telah ditentukan di dalam file "package.json". Lakukan hal ini cukup dengan menjalankan perintah berikut:
1 |
npm install
|
Setumpuk paket Node akan diinstal di dalam folder bernama node_modules.
Sedikit Tentang Gulp
Singkatnya, Gulp, mirip dengan Grunt. Keduanya adalah "task runners" yang akan menjalankan tugas-tugas tertentu secara otomatis selama proses pengembangan berlangsung, bertujuan untuk menangani perkerjaan-pekerjaan yang berat untuk anda. Biasanya, kita harus menentukan dan mengkonfigurasi Gulp di dalam gulpfile.js, tapi karena Web Starter Kit telah melakukan hal tersebut untuk kita, kita dapat segera menjalankan Gulp tanpa menyentuh apapun.
Selama proses pengembangan, jalankan perintah di bawah ini.
1 |
gulp serve |
Perintah ini akan mengaktifkan BrowserSync yang telah terintegrasi dan terkonfigurasi di dalam gulpfile.js. BrowserSync adalah alat yang berguna yang memungkinkan kita untuk menguji website secara serentak di beberapa browser sekaligus. Dengan BrowserSync, interaksi pengguna seperti scrolling, clicking, serta pengisian input akan dicerminkan secara aktual di semua perangkat yang terhubung. Hal tersebut memungkinkan kita menangkap perbedaan yang mungkin terjadi pada setiap perangkat terhubung ketika interaksi itu terjadi. BrowseSync juga dilengkapi dengan server HTTP. Ketika menjalankan perintah ini anda akan diberikan alamat localhost di mana anda dapat mengakses websitenya.
Lebih lanjut, BrowserSync juga akan memantau perubahan yang ada di dalam file yang telah ditentukan, termasuk HTML, stylesheets, and gambar. Ketika kita mengubah file-file tersebut, BrowserSync akan dengan segera menjalan tugas yang telah ditentukan di dalamgulpfile.js
Ketika anda telah siap untuk mempublikasikan website anda, anda cukup menjalan perintah gulp. Perintah ini akan menjalankan semua tugas Gulp, menghimpun proyek menjadi ke dalam sebuah folder baru bernama dist/ yang siap anda serahkan kepada klien anda.
Rincian dari tugas dan perintah Gulp dapat anda temukan di Summary of Web Starter Kit tools.
Petunjuk Dasar Styling
Web Starter Kit menyediakan sebuah Panduan Style yang mendasari styling beberapa elemen serta komponen umum, seperti tipografi, tombol, pranala (link), breadcrumbs, tabel, ikon, dan grid. Ketika menulusuri sumber kode, anda akan juga menemukan selector yang digunakan untuk menghasilkan style tersebut.
Panduan Style ini dapat ditemukan di dalam folder app/styleguide dan ia terhubung dengan stylesheet, sehingga kita dapat melihat Pandauan Style beruabh seiring dengan diperbahuruinya stylesheet tersebut. Brilliant!
Catatan: Pastikan juga simak artikel berseri kita All About Style Guides.
Penutup
Kita telah mengunduh dan mengatur Web Starter Kit berserta dengan dependensinya, jadi anda saat ini dapat mengerjakan proyek anda.
Secara keseluruhan, Web Starter Kit cukup solid ‐ bahkan pada status Beta saat ini. Template dan alat-alat pendukungnya terkonfigurasi dengan baik. Dan melihat bahwa proyek ini disokong oleh Google dengan para developer cerdas di belakangnya, Web Starter Kit dapat menjadi sepopuler Bootstrap atau Foundation. Saya sangat menantikan bagaimana proyek ini berveolusi kedepannya.
Referensi Lebih Lanjut
