Instal and Start with Node.js

Node Js adalah adalah perangkat lunak yang didesain untuk mengembangkan aplikasi berbasis web dan ditulis dalam sintaks bahasa pemrograman JavaScript. Bila selama ini kita mengenal JavaScript sebagai bahasa pemrograman yang berjalan di sisi client / browser saja, maka Node.js ada untuk melengkapi peran JavaScript sehingga bisa juga berlaku sebagai bahasa pemrograman yang berjalan di sisi server, seperti halnya PHP, Ruby, Perl, dan sebagainya. Node.js dapat berjalan di sistem operasi Windows, Mac OS X dan Linux tanpa perlu ada perubahan kode program. Node.js memiliki pustaka server HTTP sendiri sehingga memungkinkan untuk menjalankan server web tanpa menggunakan program server web seperti Apache atau Nginx.

Untuk mengeksekusi Javascript sebagai bahasa server diperlukan engine yang cepat dan mempunyai performansi yang bagus. Engine Javascript dari Google bernama* V8*-lah yang dipakai oleh Node.js yang juga merupakan engine yang dipakai oleh browser Google Chrome.

Bagaimana Node.js Bekerja?

Berbeda dengan bahasa pemrograman sisi server pada umumnya yang bersifat blocking, Node.js bersifat non-blocking, sebagaimana halnya JavaScript bekerja. Node.js berjalan dengan basis event (event-driven). Maksud dari Blocking secara sederhana adalah, bahwa suatu kode program akan dijalankan hingga selesai, baru kemudian beralih ke kode program selanjutnya.

Misalkan kita memiliki program dengan algoritma berikut:

• Terima rekues untuk halaman blog
• Ambil data blog dari database
• Tulis html berisi data blog
• Kirim respon ke klien



Bila kita menggunakan bahasa pemrograman blocking yang bersifat multi-thread, pada poin kedua saat program mengambil data dari database selama jangka waktu tertentu pada satu thread, maka thread lain yang disiapkan untuk menjalankan poin ketiga (yakni menulis data dari database ke dalam bentuk HTML) tidak akan dijalankan hingga thread untuk poin kedua mengembalikan data. Ini sebenarnya bukan masalah karena CPU menjalankan proses dengan sangat cepat. Hanya saja, Node.js dengan single-threaded-nya melakukan dengan cara yang berbeda.




Node.js, alih-alih mengalokasikan thread untuk setiap poin, dia hanya akan membuat thread hanya apabila ada event yang membutuhkan hal tersebut. Contohnya untuk kasus di atas, ketika program mengambil data dari database, program hanya akan membuat thread atau dengan kata lain mulai memproses poin ketiga hanya apabila data dari database sudah diterima, menggunakan callback. Selain itu, bila ada proses lain yang tidak tergantung pada data tadi, maka proses tersebut akan dijalankan tanpa harus menunggu pengambilan data selesai.




Siapa Sih Pembuat Node.js Pertama Kali?







Node.js pertama kali diciptakan dan diperkenalkan oleh Ryan Dahl, pada tahun 2009 sehingga JavaScript bisa digunakan sebagai bahasa pemrograman di sisi server, sekelas dengan PHP, ASP, C#, Ruby dan lain sebagainya. Ryan Dahl adalah seorang pengembang dari Joyent yang merupakan sebuah perusahaan perangkat lunak dan infrasturktur Cloud. Ia memiliki ketertarikan dengan penerapan single-threaded pada bahasa pemrograman sisi server dan akhirnya memilih JavaScript sebagai bahasa untuk Node, setelah sebelumnya mencoba menggunakan Haskell, Lua dan C.




Kelebihan Memakai Node.js

1. Node.js menggunakan bahasa pemrograman JavaScript yang diklaim sebagai bahasa pemrograman yang paling populer dan banyak dikenal oleh masyarakat luas.

2. Node.js mampu menangani ribuan koneksi bersamaan dengan penggunaan resource minimum untuk setiap prosesnya

Node.js sangat diandalkan terutama untuk membuat aplikasi real-time

Node.js adalah project open source, sehingga siapapun dapat melihat struktur kode dan juga dapat berkontribusi untuk pengembangannya

Penggunaan JavaScript di sisi server dan juga client meminimalisir ketidakcocokan antar dua sisi lingkungan pemrograman, seperti terkait komunikasi data yang mana menggunakan struktur JSON yang sama di kedua sisi, validasi form yang sama yang dapat dijalankan di sisi server dan client, dan sebagainya.

Database NoSQL seperti MongoDB dan CouchDB mendukung langsung Javascript sehingga interfacing dengan database ini akan jauh lebih mudah.

Node.js memakai V8 yang selalu mengikuti perkembangan standar ECMAScript (nama standar resmi dari JavaScript, Namun JavaScript yang lebih dikenal dalam implementasinya), sehingga tidak perlu ada kekhawatiran bahwa browser tidak mendukung fitur-fitur di Node.js.

Kamu dapat mencari tau lebih dalam di situs web resmi Node.js.





Cara instal note.js

1. Buat folder project contoh "warung kopi".

2. Ketikan ini di terminal pada Text Editor anda npm install

3. Setelah itu jalanakan perintah ini pada terminal pada text editor "npm init".

4. Buat file index.js

5. Buat sedikit code js contoh " console.log("Welcome to warung kopi") dan klik save".

6. Jalankan perintah ini di terminal text editor " node index.js " dan lihat output hasil code di index.js tadi.




Selanjutnya kita bisa menggunakan RUN SCRIPT.

Caranya :

1. Buka file package.json

2. Ketikan perintah berikut :
"start":"node index.js"setelah "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" },.

3. Ketikan perintah berikut i terminal text editor npm run start dan tekan enter.






Perintah-perintah bawaan Javascript




Code	Fungsinya
npm install jquery	Install package jquery pada project
npm install moment --save	Install package moment pada dependecies project
npm install http-server --save-dev	Install/Memasang package hhtp-server pada devDependencies project
npm install http-server -g	Install package http-server pada cakupan global
const moment = require("moment");	Cara menggunakan package yang sudah kita install sebelumnya seperti "moment".
npm run test	Menjalankan scripts test
npm run start	Menjalankan scripts start pada local web server "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "http-server ." }
npm uninstall <package-name>	Menghapus package pada dependencies
npm uninstall <package-name> --save-dev	Menghapus package pada devDependencies Contoh : npm uninstall <http-server> --save-dev
npm list -g	Melihat package listing pada cakupan global
npm list -g --depth=0	Melihat package listing pada cakupan global hanya pada layer paling atas saja
<body> <script src="node_modules/moment/moment.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> </body>	Cara import lama
Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); // April 27th 2021, 4:07:55 pm moment().format('dddd'); // Tuesday moment().format("MMM Do YY"); // Apr 27th 21 moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021 moment().format(); // 2021-04-27T16:09:30+08:00
Relative Time moment("20111031", "YYYYMMDD").fromNow(); // 9 years ago moment("20120620", "YYYYMMDD").fromNow(); // 9 years ago moment().startOf('day').fromNow(); // 16 hours ago moment().endOf('day').fromNow(); // in 8 hours moment().startOf('hour').fromNow(); // 5 minutes ago
Calender Time moment().subtract(10, 'days').calendar(); // 04/17/2021 moment().subtract(6, 'days').calendar(); // Last Wednesday at 4:11 PM moment().subtract(3, 'days').calendar(); // Last Saturday at 4:11 PM moment().subtract(1, 'days').calendar(); // Yesterday at 4:11 PM moment().calendar(); // Today at 4:11 PM moment().add(1, 'days').calendar(); // Tomorrow at 4:11 PM moment().add(3, 'days').calendar(); // Friday at 4:11 PM moment().add(10, 'days').calendar(); // 05/07/2021
Multiple Locale Support moment.locale(); // en moment().format('LT'); // 4:12 PM moment().format('LTS'); // 4:12:51 PM moment().format('L'); // 04/27/2021 moment().format('l'); // 4/27/2021 moment().format('LL'); // April 27, 2021 moment().format('ll'); // Apr 27, 2021 moment().format('LLL'); // April 27, 2021 4:12 PM moment().format('lll'); // Apr 27, 2021 4:12 PM moment().format('LLLL'); // Tuesday, April 27, 2021 4:12 PM moment().format('llll'); // Tue, Apr 27, 2021 4:12 PM
npm install webpack --save-dev npm install webpack-cli --save-dev atau dengan npm install webpack webpack-cli --save-dev	Menginstal package webpack dan webpack-cli yang membnatu kita untuk menjalanakan sebuah perintah (Command Line Interface)
npm install style-loader css-loader --save-dev	untuk install package style loader
npm install @babel/core babel-loader @babel/preset-env --save-dev	Untuk menggunakan babel pada webpack sebagai loader. Yang pertama package @babel/core, yang kedua babel-loader, dan yang ketiga @babel/preset-env. babeljs.io
npm install html-webpack-plugin --save-dev	Untuk menggunakan html-webpack-plugin. Dengan menambahkan plugin HtmlWebpackPlugin, Webpack dapat membuatkan berkas HTML dan memasukkan script hasil bundel pada berkas HTML yang dibuat secara otomatis.
npm install regenerator-runtime	Memasang regenerator runtime
npm install @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server webpack-merge --save-dev	@babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server webpack-merge




---




Penerapan Webpack

Sebelum memulai instal dulu package berikut : npm install regenerator-runtime kemudia import pada entry point import "regenerator-runtime"; dan setelah itu install juga package http-server npm install -g http-server dan jalankan ketikan perintah code berikut http-server ./dist




1. Buka project anda dan ketikan ini pada terminal

npm init




2. Install semua package yang diperlukan dengan mengetik code berikut pada terminal :

npm install @babel/core @babel/preset-env babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server webpack-merge --save-dev

3. Buat tiga file berikut : webpack.common.js , webpack.dev.js , dan webpack.prod.js




4. Tuliskan code konfigurasi berikut pada webpack.common.js :

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
entry: "./src/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html"
})
]
}




5. Kemudian ketikan konfigurasi code berikut pada webpack.dev.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
mode: "development"
})




6. Kemudian ketikan konfigurasi code berikut pada webpack.prod.js

const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
mode: "production",
module: {
rules: [
{
test: /\.js$/,
exclude: "/node_modules/",
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
]
}
]
}
})




7. Karena pada konfigurasi kita menentukan endpoint pada lokasi src->app.js dan HTML template pada lokasi src->index.html maka pindahkan kedua berkas tersebut ke dalam folder src.




8. Selanjutnya hapus style ini <link rel="stylesheet" href="src/styles/style.css"> pada index.html dan juga script ini <script src="app.js" type="module"></script> pada index.html




8. Selanjutnya kita perlu import kedua file tersebut pada app.js

import "./styles/style.css";
import "./script/component/app-bar.js";
import main from "./script/view/main.js";

document.addEventListener("DOMContentLoaded", main);




9. Dan yang terakhir kita perlu tambahkan script berikut pada package.json hasilny seperti berikut :

{
"name": "clubfinder",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"start-dev": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"babel-loader": "^8.1.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.2.0"
},
"dependencies": {
"regenerator-runtime": "^0.13.5"
}
}




Setelah itu anda bisa jalankan perintah berikut pada terminal di text editor anda npm run start-dev dan bisa juga melakukan build untuk production melalui perintah npm run build.
Dengan begitu akan terbentuk berkas bundle.js dan index.html yang siap untuk di-deploy.







Nanti kita lanjut lagi ya..