Internet dan aplikasi web telah berkembang pesat akhir-akhir ini dengan hadirnya headless web framework seperti node.js, grunt, bower, dll.
Banyak mvc framework untuk front-end seperti backbone, angular, reactorjs menjadikan pembuatan aplikasi berbasis web semakin rapi dan semakin user-friendly walaupun kenyataannya aplikasi single page akan bermasalah dengan SEO tapi tenang ada beberapa trik untuk mengantisipasinya.
Ada satu yg masih tidak berubah. Apa itu? yaitu struktur aplikasi web yang terkadang bisa membingungkan developer web itu sendiri dan deployment aplikasi web yang terkadang menguras banyak waktu.
Bagi aplikasi web yang berskala kecil, hal ini mungkin tidak menjadi masalah yang besar.
Namun apabila skala aplikasi web kita semakin besar, struktur penyusunan file, direktori dan library bakal menjadi kendala.
Dan apabila kita bekerja dalam team tentunya ini akan menjadi masalah yang besar disaat kita berkolaborasi dengan developer lain.
Tentunya banyak developer bertanya, apa solusi yang jelas untuk masalah ini ? Beruntunglah bagi para developer aplikasi web saat ini, karena dengan ada yeoman yang akan menjadi pereda sakit kepala kita walapun menurut saya masih cenut-cenut yh wajar lah saya kan bukan developer hehehe.
Apa itu Yeoman?
Yeoman dibuat oleh para engineer di Google, dengan motto modern workflows for modern webapps. Yeoman juga membawa teman bernama Grunt dan Bower.
Dua tools ini akan otomatis ter-install dengan meng-install yeoman. Sekedar info bagi yang belum pernah menggunakan grunt dan bower, grunt adalah task runner berbasis javascript, yang dapat digunakan sebagai cron untuk front-end development.
Dan bower adalah package manager untuk front-end, yang dapat digunakan untuk menginstall, mengatur secara otomatis framework dan library yang akan digunakan di aplikasi web.
Instalasi Nodejs
Unduh Nodejs versi terbaru dan taruh di folder /opt (bisa di taruh dimana saja tergantung selera).
alex@Alex-Laptop:~/src/listen$ wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz
Ekstrak file yang di unduh tadi dan buat symlink baru.
alex@Alex-Laptop:~/src/listen$ sudo tar -xvf node-v6.9.2-linux-x64.tar.xz
alex@Alex-Laptop:~/src/listen$ sudo ln -s node-v6.9.2-linux-x64 nodejs
Buat alternatif binary untuk nodejs.
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/node node /opt/nodejs/bin/node 99
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/npm npm /opt/nodejs/bin/npm 99
Install komponent pendukung seperti bower, grunt, compass dan update alternatif.
alex@Alex-Laptop:~/src/listen$ sudo npm install -g bower
alex@Alex-Laptop:~/src/listen$ sudo npm install -g grunt-cli
alex@Alex-Laptop:~/src/listen$ sudo npm install grunt-contrib-compass --save-dev
alex@Alex-Laptop:~/src/listen$ sudo apt-get install -y ruby-dev
alex@Alex-Laptop:~/src/listen$ sudo gem install foundation
alex@Alex-Laptop:~/src/listen$ sudo gem install compass
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/bower bower /opt/nodejs/bin/bower 99
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/grunt grunt /opt/nodejs/bin/grunt 99
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/compass compass /usr/local/bin/compass 99
Instalasi Yeoman
Untuk install yeoman kita bisa gunakan npm dan kita juga install generator-angular.
alex@Alex-Laptop:~/src/listen$ sudo npm install -g yo generator-angular
alex@Alex-Laptop:~/src/listen$ sudo update-alternatives --install /usr/bin/yo yo /opt/nodejs/bin/yo 99
Buat directory project untuk angularjs.
alex@Alex-Laptop:~/src/listen$ mkdir AngularjsYeoman
pada saat ini sys akan menggunakan generator angular agar dapat mempersingkat waktu.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ yo angular
Untuk step ini akan ada beberapa option yg harus di pilih sebagai contoh dapat di lihat di bawah.
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? Yes
? Would you like to include Bootstrap? Yes
? Would you like to use the Sass version of Bootstrap? Yes
? Which modules would you like to include? (Press <space> to select, <a> to toggle all, <i> to inverse selection)angular-animate.js, angular-cookies.js, angular-resource.js, angular-route
.js, angular-sanitize.js, angular-touch.js
Pada step ini mungkin dibutuhkan beberapa waktu tergantung kecepatan internet yang digunakan.
Setelah selesai bisa dilihat seperti dibawah dan inilah yang membuat angularjs menarik yeoman langsung generate directory lebih modern dan automate.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ ls -l
total 60
drwxrwxr-x 6 alex alex 4096 Jan 19 21:25 app
drwxrwxr-x 12 alex alex 4096 Jan 19 21:26 bower_components
-rw-rw-r-- 1 alex alex 624 Jan 19 21:25 bower.json
-rw-rw-r-- 1 alex alex 12550 Jan 19 21:25 Gruntfile.js
drwxrwxr-x 696 alex alex 20480 Jan 19 21:27 node_modules
-rw-rw-r-- 1 alex alex 1269 Jan 19 21:32 package.json
-rw-rw-r-- 1 alex alex 286 Jan 19 21:25 README.md
drwxrwxr-x 3 alex alex 4096 Jan 19 21:25 test
Berikutnya kita coba melihat apakah angular berjalan atau tidak.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ grunt serve
Binggo…jika angularjs running akan tampil seperti ini.
gambar
Ok mungkin sedikit main dengan route oiy yeoman juga dapat men-generate controller, route, service dll untuk detail bisa liat di help.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ yo --help
Balik lagi ke fokus tadi kita akan membuat route untuk help.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ yo angular:route help
invoke angular:controller:/opt/node-v6.9.2-linux-x64/lib/node_modules/generator-angular/route/index.js
create app/scripts/controllers/help.js
create test/spec/controllers/help.js
invoke angular:view:/opt/node-v6.9.2-linux-x64/lib/node_modules/generator-angular/route/index.js
create app/views/help.html
Perintah diatas membuat controller, views dan sekarang kita buka file app/scripts/app.js
...
.when('/help', {
templateUrl: 'views/help.html',
controller: 'HelpCtrl',
controllerAs: 'help'
})
...
Kita tambahkan locationProvider untuk hashPrefix di file app.js
...
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('!');
...
Kemudian tambahkan <li><a ng-href="#!/help">Help</a></li> pada file index.html
Sekarang kita coba jalankan kembali grunt serve.
alex@Alex-Laptop:~/src/listen/AngularjsYeoman$ grunt serve
munkin cukup sekian dulu kenalan dengan angularjs sama yeoman.
NB : untuk detail bisa liat di code di repo
