Clone lại 1 phiên bản cực đơn giản của VSCode sử dụng Tauri và Reactjs

Hi friends! I'm hudy.
A web developer from Hanoi, Vietnam

In this post, I'm gonna show you how to build a Notebook app - desktop application - using Tauri and ReactJS. 

For those who don't know Tauri, it is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence

A tutorial video:

{% embed https://www.youtube.com/embed/2E5edr4_LXw %}

The source code for this tutorial is available here: [https://github.com/hudy9x/tauri-notebook](https://github.com/hudy9x/tauri-notebook.git)

## Prerequisite

1. [Tauri](https://tauri.app/v1/guides/getting-started/prerequisites) - a toolkit to build desktop app
2. [Nodejs](https://nodejs.org/en/)
3. npm or yarn - package manager

## Table of contents

1. Install Tauri
2. Scaffolding code structure using `create-tauri-app`
3. Using Tiptap library in `<MainEditor/>` and create `<Menubar/>`
4. Time to style
5. Change app's icon
6. Build app

## #1. Install Tauri
The first step is to intall Rust and it's dependencies. Visit Tauri's home page to get it done

- For window users: check this [link](https://tauri.app/v1/guides/getting-
started/prerequisites#setting-up-windows)
- For macOs users: check this [link](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos)
- For Linux users: check this [link](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-linux)


## #2. Scaffolding code structure using `create-tauri-app`

Make sure that you've installed `npm` already. Then, run the following command to generate code structure

```shell
$ npm create tauri-app
```
Follow the instructions. Just remember to select `react-ts` as main framework

![Select framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63t4kwsu4vdphoyf4roh.png)

Now, time to install `tiptap` and `remixicon`
```shell
$ npm install @tiptap/react @tiptap/starter-kit remixicon
```
Next, create a `components` folder with 2 files inside it as `Editor.tsx` and `Menubar.tsx`. And add a simple component definition to them

![Create Editor and Menubar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt7dsgrs5aqwt2zd7rgv.png)

## #3. Using Tiptap library in `<MainEditor/>` and create `<Menubar/>`

Open `src/components/MainEditor.tsx` and add the following code:

```javascript
// src/components/MainEditor.tsx
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Menubar from "./Menubar";

export default function MainEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `<h2>Hello world</h2>`
  })
  return <>
    {editor ? <Menubar editor={editor} /> : null}
    <EditorContent editor={editor} />
  </>
}
```
Next, open `src/components/Menubar.tsx`
```javascript
// src/components/Menubar.tsx
import {Editor} from '@tiptap/react'

interface IMenubarProp {
  editor: Editor
}

export default function Menubar({editor}: IMenubarProp) {
  const getFocus = () => editor.chain().focus()
  const isActive = (type: string, options?: any) => {
    return editor.isActive(type, options ?? {}) ? 'is-active' : ''
  }

  const menus = [
    [
      {icon: 'bold', onClick: () => getFocus().toggleBold().run(), isActive: isActive('bold')},
      {icon: 'italic', onClick: () => getFocus().toggleItalic().run(), isActive: isActive('italic')},
      {icon: 'strikethrough', onClick: () => getFocus().toggleStrike().run(), isActive: isActive('strike')},
      {icon: 'code-line', onClick: () => getFocus().toggleCode().run(), isActive: isActive('code')},
    ],
    // ...
  ]
    
  return <div className="menu">
    {menus.map(group => {
      return <div className="group-item">
        {group.map(item => {
          return  <button className="menu-item" onClick={item.onClick}>
        <i className={`ri-${item.icon} ${item.isActive}`}></i>
      </button>

        })}
      </div>
          })}
  </div>
}
```

After that, just import `<MainEditor/>` to `App.tsx`
```javascript
// src/App.tsx
import MainEditor from "./components/MainEditor";
import './App.css'
export default function App() {
  return <MainEditor />
}
``` 

Run app to check the result

```shell
$ npm run tauri dev
```

![Run first time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8bubaylb79bo31r96uk.png)

## #4. Time to style

Alright, everything work well so far. But we still have no style for the app.

Let's add style to `src/App.css` file

```css
.menu {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
}

.group-item {
  display: flex;
  gap: 0.5rem;
}

.menu-item {
  padding: 0.5rem 0.75rem
}

.menu-item .is-active {
  color: #55db55;
}

// Editor css

.ProseMirror {
  padding: 1rem;
  outline: none;
  padding-top: 2.5rem;
}

.ProseMirror >
 * + * {
	 margin-top: 0.75em;
}
 .ProseMirror ul, .ProseMirror ol {
	 padding: 0 1rem;
}
 .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
	 line-height: 1.1;
}
 .ProseMirror code {
	 background-color: rgba(97, 97, 97, 0.1);
	 color: #616161;
}
 .ProseMirror pre {
	 background: #0d0d0d;
	 color: #fff;
	 font-family: 'JetBrainsMono', monospace;
	 padding: 0.75rem 1rem;
	 border-radius: 0.5rem;
}
 .ProseMirror pre code {
	 color: inherit;
	 padding: 0;
	 background: none;
	 font-size: 0.8rem;
}
 .ProseMirror img {
	 max-width: 100%;
	 height: auto;
}
 .ProseMirror blockquote {
	 padding-left: 1rem;
	 border-left: 2px solid rgba(13, 13, 13, 0.1);
}
 .ProseMirror hr {
	 border: none;
	 border-top: 2px solid rgba(13, 13, 13, 0.1);
	 margin: 2rem 0;
}

// Scrollbar css
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 8px;
  background-color: rgb(182, 182, 182);
}

::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: transparent;
}
```

Looks good hah ? 😁

![After add style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwnec2prvikrcz0cec4e.png)

## #5. Change app's icon (optional)
By default, Tauri has a default icon. If you want to change it to another using my tool [here](https://github.com/hudy9x/tauri-icon-converter)

Prepare an icon in .PNG format that has size of 1024px x 1024px. And it's name must be 1024x1024. Now clone the tool and install packages

```shell
$ git clone https://github.com/hudy9x/tauri-icon-converter
$ cd tauri-icon-converter && npm install
```
And then, copy the icon to `/tauri-icon-converter` folder and run the below command

```shell
$ node .
```

After genereting process finished, you guys can see a list of icon in `/tauri-icon-converter/outputs`

![List of icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xko1dvwj0s0t4g8whxll.png)

Just replace all of them, but `.keep` file to `/src-tauri/icons` folder

You could also verify by running `npm run tauri dev`. If the icon showed as below then everything work well

![App icon after replacing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x91qjmn26oq11w5f07dz.png)

## #6. Build app 
Time to package our app to .msi file. Open terminal and run the following

```shell
$ npm run tauri build
```
If you guys got an error like below

![Error when building app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suo249h0twwygeu32eip.png)

That's because your `indentifier` not unique. Just open `src-tauri/tauri.conf.json` and change value to a new one. I changed mine to `com.notebook.dev`

![Update indentifier value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwx8x5jkyvoda5mszz55.png)

Ok, run the command `npm run tauri dev` again. And see the result

![Build success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1e5x281ymbhzfn4vlt9.png)

After building process finished you can see the output path like above

## Conclusion

So far, you've learnt how to build a desktop application using Tauri and Reactjs. 

You can also improve this app by providing some personal feature like auto update, sign-in, theme, ...etc

Thank you for reading!

Building a notebook using Tauri and ReactJS

🎞 Timestamp
=========

- 00:00 Let's start
- 00:16 Get dummy API endpoint
- 01:25 Scaffolding ReactJS using Vite
- 03:26 Start coding
- 07:21 Create usePaginate hook
- 13:11 Show data on table
- 18:33 Time to style 
- 19:34 Done

📂 Resources
=============
- 👉🏻 Link style: https://github.com/hudy9x/courses/blob/main/code-no-talk/code-pagination/src/Home.css
- 👉🏻 Source code: https://github.com/hudy9x/courses/tree/main/code-no-talk/code-pagination


📖 Contact me:
=========
- 👉🏻 Facebook: https://www.facebook.com/hudy9x/
- 👉🏻 Group: https://www.facebook.com/groups/komaster.dev
- 👉🏻 Blog: https://www.komaster.dev/

CODENOTALK - Coding pagination with react-router-dom

Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:
- [JS First Step: Phân tích chức năng](https://www.komaster.dev/post/js-first-step-phan-tich-chuc-nang)
- JS First Step: Làm việc với DOM
- [JS First Step: Tạo sự kiện cho DOM](https://www.komaster.dev/post/js-first-step-tao-su-kien-cho-html-dom)

Ở bài viết này, tôi sẽ làm rõ hơn về mối liên hệ giữa HTML và Javascript. Thêm vào đó là cách sử dụng Javascript để làm việc với DOM (hay có thể hiểu nó là các thẻ HTML)

# DOM là gì? và Javascript có thể làm gì với DOM

DOM là viết tắt của __Document Object Model__, hiểu đơn gián thì nó là 1 cây đối tượng 

![Cây đối tượng DOM](https://www.w3schools.com/js/pic_htmltree.gif)

Mỗi Element được thể hiện ở hình trên được gọi là 1 __DOM Node__. Thông qua cây đổi tượng này Javascript có khả năng thực hiện các xử lý sau:

- thay đổi tất cả các thẻ HTML
- thay đổi toàn bộ HTML attribute 
- thay đổi toàn bộ giá trị CSS
- có thể xóa bỏ các thẻ HTML và thuộc tính của nó
- tạo mới thẻ HTML và thuộc tính của nó
- tác động tới tất cả sự kiện của tất cả các thẻ HTML
- tạo mới sự kiện cho thẻ HTML

Chúng ta sẽ tìm hiểu lần lượt các khả năng trên sau

# Sử dụng Javascript để làm việc với DOM

Tiếp theo, để làm việc với DOM thông thường chúng ta cần làm quen với các công việc sau
- Tìm kiếm DOM
- Thay đổi nội dung của DOM
- Thay đổi style
- Thêm, xóa thẻ DOM
- Thêm hiệu ứng cho thẻ DOM

## 1/ Tìm kiếm DOM

Có kha khá cách sử dụng javascript để thao tác với DOM, các bạn có thể tham khảo [tại đây](https://www.w3schools.com/js/js_htmldom_elements.asp)

Tuy nhiên, cách tìm kiếm dễ dàng nhất là sử dụng __querySelector__. Có 2 cách để sử dụng api này như sau:
- __`querySelector(".example")`__: tìm kiếm chỉ 1 DOM có class là .example
- __`querySelectorAll(".example")`__: tìm kiếm tất cả DOM có class là .example

Xem xét ví dụ sau để rõ hơn về cách sử dụng ([tham khảo thêm](https://www.w3schools.com/jsref/met_document_queryselector.asp))
```javascript
// document.querySelector(<css selector>)
// chỉ trả về 1 DOM
document.querySelector('.title')
document.querySelector('#content p')
document.querySelector('div')
document.querySelector('p')

// document.querySelectorAll(<css selector>)
// trả về toàn bộ DOM phù hợp với <css selector>
document.querySelectorAll('.content')

```

## 2/ Thay đổi style 

Để thay đổi style sử dung Javascript ta có thể sử dụng thuộc tính `style`
```javascript
const div = document.querySelector('div')

div.style.color = 'red'
div.style.background = 'blue'

const allPTags = document.querySelectorAll('p')
// do querySelectorAll trả về 1 mảng 
// nên cần phải loop trước khi sử dụng
allPTags.forEach(p => {
  p.style.color = 'red'
  p.style.background = 'blue'
})


```
Lưu ý rằng, để sử dụng được thuộc tính style, trước hết bạn cần phải tìm được DOM. 

Danh sách các thuộc tính khác của style có thể được tham khảo [ tại đây](https://www.w3schools.com/jsref/dom_obj_style.asp)

## 3/ Thay đổi nội dung của DOM

Tiếp theo, ngoài việc thay đổi style của DOM, bạn có thể thay đổi cả nội dung của DOM. Xem ví dụ sau

```javascript
// Giả sử ta có thẻ HTML sau
// <p>Nội dung cần thay đổi</p>

const p = document.querySelector('p')

p.innerHTML = 'Nội dung mới'
// kết quả là: <p>Nội dung mới</p>

```

## 4/ Thêm, xóa thẻ DOM

Cần phân biệt việc thêm mới DOM và thay đổi nội dung DOM
- Thay đổi nội dung DOM là XÓA toàn bộ nội dung hiện tại và thay bằng nội dung mới sử dụng __`.innerHTML`__
- Thêm mới DOM là bổ sung vào nội dung hiện tại 1 hoặc nhiều DOM mới sử dụng __`.createElement`__ và __`.appendChild`__

Nếu các bạn đã đọc bài viết trước của tôi thì sẽ không lạ lẫm gì với ứng dụng Todo. Ứng dụng cho phép user thêm mới 1 todo vào 1 danh sách có sẵn. Việc __thêm mới__ này được thực hiện sử dụng javascript như sau

```javascript
// tìm thẻ <ul>
const list = document.querySelector('ul')

// tạo ra 1 thẻ mới là <li>
const li = document.createElement('li')

// do nó chưa có nội dung nào, 
// nên ta có thể cập nhật nội dung mới cho nó
item.innerHTML = 'Item 1'

// giờ thì sử dụng .appendChild để chèn thẻ <li> vào cuối <ul>
list.appendChild(li)
```

Giở nếu muốn xóa 1 thẻ đang tồn tại thì sao ? Đơn giản, chỉ việc gọi hàm `.remove()`

```javascript
const list = document.querySelector('ul')
list.remove()
```

Tham khảo thêm tài liệu về [append](https://www.w3schools.com/jsref/met_node_appendchild.asp) và tài liệu về [remove](https://www.w3schools.com/jsref/met_element_remove.asp)

# Mối quan hệ giữa các DOM Node

Lưu ý, mối quan hệ giữa DOM Node với nhau khác hoàn toàn với mối liên hệ giữa HTML và Javascript

![Mối quan hệ của DOM Node](/image/posts/KumyDM08tBHROmBCM71d/Event-Navigation-2.png)

Cùng xem xét hình minh họa trên, mỗi __Node__ đều có __mối quan hệ gia đình dòng họ__ với nhau 😆

- __`<html>`__ - là node gốc và nó không có node cha nào cả
- __`<html>`__ - là node cha của __`<head>`__ và __`<body>`__
- __`<h1>`__ và __`<p>`__ - là node anh em của nhau

## Các thuộc tính nào thể hiện mối quan hệ này trong Javascript

Mối quan hệ trên cũng được thể hiện trong Javacsript qua các thuộc tính:

- __`parentNode`__
- __`children[nodenumber]`__
- __`firstElementChild`__
- __`lastElementChild`__
- __`nextElementSibling`__
- __`previousElementSibling`__

Những thuộc tính này hữu ích trong 1 số TH cụ thể. 

## Áp dụng vào ví dụ thực tiễn


Ví dụ ta có chức năng sau: khi user đổi trạng thái checkbox, dòng text mô tả sẽ bị gạch ngang thể hiện rằng todo này đã được hoàn thành

![Danh sách Todo](/image/posts/KumyDM08tBHROmBCM71d/Event-Example-3.png)

Sử dụng các thuộc tính quan hệ trên ta có thể thực hiện chức năng này như sau

```javascript
// VD: Mỗi todo sẽ có cấu trúc HTML như sau
// 	<div>
//		<input />
//		<p></p>
//	</div>

const input = document.querySelector('input')
input.addEventListener('change', function(){
	const input = this;
	// tìm node anh em nằm bên cạnh input
	const p = input.nextElementSibling;
	
	p.style.textDecoration = 'line-through'
})

```

# Tạm kết

Trên đây là 1 số các làm việc với DOM tiêu biểu, hi vọng các bạn đã có thể thực hiện các bước thao tác cơ bản. Ở bài viết tiếp theo, tôi sẽ hướng dẫn các bạn cách tạo sự kiện DOM





JS First Step: Làm việc với DOM

Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:
- [JS First Step: Phân tích chức năng](https://www.komaster.dev/post/js-first-step-phan-tich-chuc-nang)
- [JS First Step: Làm việc với DOM](https://www.komaster.dev/post/js-first-step-lam-viec-voi-dom)
- JS First Step: Tạo sự kiện cho DOM

# HTML Event là gì ? <i emoj>❔</i>

Một HTML Event, hay nói ngắn gọn là Event, là 1 hành động xảy ra bởi sự tác động của trình duyệt hoặc của user lên các HTML Element. Ví dụ như:
- Trang web được tải xong
- User thay đổi nội dung của thẻ input
- User nhấn vào 1 button

# Khi nào cần sử dụng HTML Event ? <i emoj>🤔</i>

Event có thể được sử dụng để xử lý và kiểm duyệt nội dung được nhập bởi user hoặc những hành động của user hay trình duyệt như:
- Xử lý sau mỗi lần trang web được load _(VD: cấp quyền truy cập)_
- Xử lý cần thực hiện khi trang web bị đóng _(VD: cảnh báo nếu user chưa lưu đữ liệu đang nhập)_
- Xử lý hành động khi user click vào 1 button  _(VD: gửi dữ liệu tới backend)_
- Kiểm tra dữ liệu có được user nhập liệu đúng hay không  _(VD: kiểm tra email có hợp lệ không)_
- Và nhiều TH khác nữa ...



# Tại sao nên sử dụng addEventListener <i emoj>✌️</i>

Thay vì trực tiếp thêm sự kiện như là 1 thuộc tính kiểu `<div onclick="...">` thì chúng ta sẽ sử dụng hàm __addEventListener__. Vì những lợi ích sau:

- giống như __`onclick`__ thì __`addEventListener`__ cũng cho phép đính kèm 1 sự kiện vào 1 đối tượng DOM
- Không ghi đè sự kiện đã được tạo trước đó
- Có thể tạo được nhiều sự kiện
- Có thể tạo được nhiều sự kiện có tên giống nhau. VD: bạn có thể tạo được 4 sự kiện click và mỗi sự kiện đều có xử lý logic khác nhau
- Tách biệt code  javascript ra khỏi html, tránh gặp TH khó đọc hiểu, dễ dàng kiểm soát code hơn 

# Cú pháp và cách sử dụng <i emoj>✒️</i>

```javascript
const element = document.querySelector('div');
element.addEventListener(event, function, useCapture);
```

Tham số đầu tiên là kiểu sự kiện (VD: click, mousedown, ...). 
Tham số thứ 2 lầ function mà chúng ta muốn gọi khi sự kiện xảy ra

Tham số cuối cùng là 1 giá trị boolean (True/False). Nó liên quan đến việc sử dụng __event bubbling__ và __event capturing__. Tham số này là tùy chọn, có thể có hoặc không.

Không mất thời gian nữa, chúng ta sẽ tiếp tục học cách làm việc với DOM Events ngay sau đây

## Tạo sự kiện
```javascript
// tạo nhiều sự kiện giống nhau
element.addEventListener("click", myFunction);
element.addEventListener("click", myFunction2);

// tạo nhiều loại sự kiện khác nhau
element.addEventListener("mousedown", myFunction3);
element.addEventListener("mouseover", myFunction4);
```
## Tạo sự kiện khi input thay đổi giá trị

```javascript
// 1. rõ ràng là phải tìm input trước
const input = document.querySelector('input')

// 2. ràng buộc sự kiện change để có thể biết
// khi nào input thay đổi giá trị
input.addEventListener('change', function(){
  console.log(this.value)
})
```

## Tạo sự kiện khi form được submit
```javascript
const form = document.querySelector('form')

form.addEventListener('submit', myFunction)
```

Để biết thêm thông tin về tên các event có thể sử dụng, các bạn có thể tham khảo tại đây: https://www.w3schools.com/jsref/dom_obj_event.asp

# Hiểu về Event bubbling và Event capturing <i emoj>🤓</i>

Khi sự kiện được xảy ra, có 2 con đường mà sự kiện có thể được __lan truyền__ là bubbling và capturing

![Event-Propagration.png](/image/posts/BydGbG5f0m7BBQ1Tk45r/Event-Propagration.png)

Khái niệm lan truyền sự kiện là 1 cách để định nghĩa thứ tự xảy ra sự kiện trên đối tượng element nào. 

Cùng xem xét đoạn code sau, tôi gán giá trị `true` cho tham số thứ 3. Nghĩa là, sử dụng capturing event
```javascript
const p = document.querySelector("p")
const a = document.querySelector("a")

const fn1 = () => console.log('click p')
const fn2 = () => console.log('click a')

p.addEventListener("click", fn1, true);
a.addEventListener("click", fn2, true);
// Kết quả log sẽ là: 
// click p   => sự kiện click ở p sẽ xảy ra trước
// click a

// đổi giá trị sang false
p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a   => sự kiện click ở a sẽ xảy ra trước
// click p
```
Hành vi lan truyền sự kiện này có thể gây ra những xử lý không mong muốn. Như ví dụ trên ta có thể thấy, người dùng chỉ mong muốn click vào thẻ `<a>`, tuy nhiên xử lý ở thẻ `<p>` lại được gọi. 

Để ngăn chặn việc này xảy ra, ta có thể sử dụng `stopPropagation()`

```javascript
//...
const fn1 = () => console.log('click p')
const fn2 = (ev) => {
  // ngăn chặn hành vi lan truyền sự kiện
  ev.stopPropagation()
  console.log('click a')
}

p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a  => sự kiện click vào p ko xảy ra

```

# Tạm kết

Đến đây, có lẽ các bạn đã hiểu rõ cách ràng buộc sự kiện cho 1 đối tượng DOM rồi đúng không ? Bài viết tiếp theo chúng ra sẽ làm quen với việc lấy dữ liệu từ backend sử dụng Javascript

JS First Step: Cách làm việc với Event

Tất cả bài viết trong series ở link dưới đây:
- JS First Step: Phân tích chức năng
- [JS First Step: Làm việc với DOM](https://www.komaster.dev/post/js-first-step-lam-viec-voi-dom)
- [JS First Step: Tạo sự kiện cho DOM](https://www.komaster.dev/post/js-first-step-tao-su-kien-cho-html-dom)

Theo khảo sát của tôi thì có rất nhiều bạn học sinh, sinh viên đã và đang học HTML/CSS/JS. Nhưng đa phần trong số đó gặp khó khăn trong việc áp dụng JS vào những bài tập, dự án thực tế.

![Thực trạng học HTML/CSS/JS](/image/posts/oY57U6JCIUiS6y42C1rO/image-3.jpg)

Do đó, trong bài viết này tôi sẽ cố gắng làm rõ cho các bạn hiểu được cách vận dụng JS bằng cách: 
- Chỉ ra mối liên hệ giữa HTML/CSS/JS 
- Hướng dẫn phân tích chức năng trước khi thực hiện bất kì chức năng nào liên quan đến Javascript

# HTML là gì ? và CSS là cái chi ? <i emoj>❔</i>

HTML là 1 ngôn ngữ được sử dụng để xây dựng lên cấu trúc hay còn gọi là nội dung của website

CSS dùng để trang trí cho nội dung HTML. Nói 1 cách đơn giản hơn thì nó hỗ trợ việc tô điểm màu sắc, kích thước, sắp xếp vị trí,...

![HTML vs CSS](/image/posts/oY57U6JCIUiS6y42C1rO/HTMLVSCSS.png)

# Còn Javascript thì sao ? <i emoj>❔</i>

Javascript là ngôn ngữ lập trình trên môi trường web, nó lập trình hành vi của các đối tượng HTML

Nghe vẫn khó hiểu đúng ko. Vậy hãy cùng xem xét ví dụ dưới đây. Đối tượng HTML được click là 1 checkbox, khi checkbox đổi trạng thái thì nội dung text bên cạnh được gạch ngang

Đây chính là hành vi có thể được lập trình sử dụng Javascript

![Hành vi ở đây là tick vào checkbox](/image/posts/oY57U6JCIUiS6y42C1rO/Video-Mon-Dec-13-2021-15-22-23.gif)

# Mối liên hệ giữa HTML và Javascript <i emoj>⚖️</i>

Những định nghĩa trên sẽ trở lên vô nghĩa nếu các bạn không thể hiểu được HTML có liên hệ thế nào với Javascript

Mối liên hệ giữa HTML và Javascript được thiết lập thông qua các thẻ HTML. VD: `<div>`, `<h2>`, `<p>`, ...

>Bạn không thể hiển thị dữ liệu lên website với javascript mà không sử dụng bất kì thẻ HTML nào

Để hình thành mối liên hệ này thì website cần cung cấp 1 chức năng cụ thể. Cụ thể như những chức năng dưới đây
- Hệ thống bình luận bài viết
- Ứng dụng chat
- Chức năng giỏ hàng
- ...

Tóm lại, mối liên hệ ở đây là chức năng mà người dùng có thể thông qua đó tương tác được với website

# Không biết áp dụng Javascript vào 1 chức năng cụ thể  <i emoj>😕</i>

Nhiều bạn, mặc dù hiểu mối liên hệ trên, thậm chí hiểu yêu cầu chức năng nhưng vẫn không biết áp dụng javascript để tạo ra chức năng đó như thế nào

Dựa vào kinh nghiệm của mình thì tôi nhận ra rằng, __các bạn chưa biết cách phân tích chức năng để tìm ra đối tượng và hành động__

Vậy thế nào là phân tích chức năng ? Chúng ra sẽ lấy 1 ví dụ cụ thể như sau: Tạo chức năng todo cho phép user 

- Tạo todo bằng cách nhập input và ấn button ADD
- Todo được hiển thị theo dạng danh sách sau khi nhấn ADD
- User chuyển trạng thái checkbox thì gạch bỏ todo

# Học cách phân tích chức năng <i emoj>✍🏻</i>

Có 3 bước để phân tích 1 chức năng thực hiện bằng javascript
- Tìm đối tượng mà user cần tương tác
- Xác định đâu là hành động của user
- Ràng buộc sự kiện, xử lý logic cho đối tượng tương ứng với hành động

Giờ ta sẽ đi vào phân tích các chức năng của Todo app ở trên để nắm được rõ hơn về cách phân tích

## 1/ Tạo todo bằng cách nhập input và ấn button ADD

Phân tích theo yêu cầu chức năng ta sẽ được:
- Đối tượng 1: nút add -> do user phải nhấn vào nút add nên ta coi nó là 1 đối tượng
- Đối tượng 2: ô input -> vì user phải nhập nội dung cho todo rồi mới có thể ấn nút add
- Hành động: ấn button ADD

Dựa vào phân tích trên ta có thể triển khai code javascript như sau:
```javascript
// tìm đối tượng sử dụng document.querySelector()
const buttonAdd = document.querySelector('#button-add')
const input = document.querySelector('#input-todo')

// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // ...
})
```

## 2/ Todo được hiển thị theo dạng danh sách sau khi nhấn ADD

Tiếp tục phân tích yêu cầu số 2 ta được:
- _Todo được hiển thị theo dạng danh sách_: để hiển thị  được thì cần có 1 thẻ HTML. Nên trước hết, cần tìm được thẻ HTML để chứa nội dung đó
- _Sau khi nhấn ADD_: nghĩa là việc hiển thị này được thực hiện sau khi user nhấn nút ADD

Triển khai code ta sẽ được

```javascript
// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // tìm thẻ HTML để chứa nội dung todo, 
  // vẫn sử dụng document.querySelector
  const list = document.querySelector('#list');

  // tạo ra 1 thẻ HTML <div>
  const newTodo = document.createElement('div');
  // lấy giá trị của ô input
  const value = input.value;

  // gán giá trị của input vào thẻ <div>
  newTodo.textContent = input.value;

  // chèn thẻ <div> vào danh sách
  list.appendChild(newTodo)
})
```

## 3/ User chuyển trạng thái checkbox thì gạch bỏ todo

Giờ các bạn thử phân tích hành động thứ 3 nhé. Tôi sẽ giả định rằng, todo mới được tạo sẽ bao gồm 1 thẻ `<input type="checkbox"/>` 

```javascript
buttonAdd.addEventListener('click', function(){
  // ...

  // tiếp tục tìm thẻ <input type="checkbox"/>
  // tuy nhiên, lần này sẽ sử dụng <div> được tạo ra ở bước trên 
  const checkbox = newTodo.querySelector('.checkbox');
  checkbox.addEventListener('change', function(){
    const checked = this.checked;
    
    // tiếp theo là xử lý thêm gạch chân
    // chắc các bạn đã biết phải xử lý như nào rồi
  })

  list.appendChild(newTodo)
})

```

# Tạm kết
Để hiểu cách vận dụng Javascript vào ứng dụng web thì hiểu được mối liên hệ giữa HTML/CSS/JS và hiểu cách phân tích chức năng là rất quan trọng. 

Bài viết này tôi chỉ tóm tắt 1 số ý chính, bạn vẫn cần phải luyện tập nhiều trong những trường hợp thực tế. Hi vọng với những kiến thức này các bạn có thể hiểu cách vận dụng javascript vào những chức năng thực tế

JS First Step: Phân tích chức năng

Bài viết này gồm 2 phần
- [Next.js: Authentication sử dụng Firebase - part 1
](https://www.komaster.dev/post/nextjs-authentication-su-dung-firebase-part-1)
- [Next.js: Authentication sử dụng Firebase - part 2
](https://www.komaster.dev/post/nextjs-authentication-su-dung-firebase-part-2)

Trước khi đi vào việc thực hiện, có 1 số công cụ tôi sử dụng trong suốt bài viết này mà các bạn cần nắm được như sau:
- __Tailwindcss__: css framework cung cấp các class hỗ trợ việc dựng giao diện nhanh chóng
- __Next.js__: một reactjs framework tuyệt vời ở thời điểm hiện tại
- __Firebase__: sử dụng dịch vụ Firebase Authentication
- __Typescript__: hỗ trợ định nghĩa kiểu dữ liệu
- __yarn__: công cụ quản lý package thay cho npm

# Cài đặt
Việc đầu tiên cần làm là cài đặt Next.js và Tailwindcss. Tôi sẽ sử dụng `create-next-app` để tạo next.js project, bổ sung thêm option `--typescript` 
```shell
$ yarn create next-app nextjs-firebase-authentication --typescript
```
Cài đặt Tailwindcss, các bạn có thể tham khảo cách cài đặt [tại đây](https://tailwindcss.com/docs/guides/nextjs#install-tailwind-via-npm)
```shell
$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```
Tiếp theo, tạo 2 file config của Tailwindcss `tailwind.config.js` và `postcss.config.js`
```shell
$ yarn tailwindcss init -p
```
Sau khi câu lệnh trên chạy xong, sửa nội dung của file `tailwind.config.js` như dưới đây, mục đích của việc này là cung cấp cài đặt để Tailwindcss loại bỏ những style không được sử dụng khi build production

```javascript
// tailwind.config.js
  module.exports = {
   // purge: [],
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

```
Đến đây là hoàn thành 9/10 việc cài đặt rồi, giờ ta cần tích hợp tailwindcss vào source code. Để làm việc này các bạn cần import nó vào `globals.css`

```css
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

```
Thử xem Nextjs đã được tích hợp tailwindcss chưa 
```typescript
// pages/index.tsx
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div className="m-6">
      <button
        type="button"
        className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
    </div>
  );
};

export default Home;

```
![Cài đặt Tailwindcss thành công](/image/posts/VUFsw66dIzwVlzNDJMDx/img-1.jpg)

# Tạo trang Login
Việc đầu tiên cần làm là tạo 1 trang login. Để tập trung vào xử lý authentication nên chúng ta sẽ đơn giản hóa bước này. Nên tôi sẽ dùng __tailwindcss__ chỉ tạo ra 1 trang login gồm 2 input là email và password

```javascript
// pages/login.tsx
export default function Login() {
  return (
    <>
      <div className="h-screen flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Login with your account
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Or{" "}
            <a
              href="#"
              className="font-medium text-indigo-600 hover:text-indigo-500"
            >
              create a new one
            </a>
          </p>
        </div>

        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-sm">
          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <form className="space-y-6" action="#" method="POST">
              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700"
                >
                  Email address
                </label>
                <div className="mt-1">
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    required
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div>
                <label
                  htmlFor="password"
                  className="block text-sm font-medium text-gray-700"
                >
                  Password
                </label>
                <div className="mt-1">
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    required
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <input
                    id="remember-me"
                    name="remember-me"
                    type="checkbox"
                    className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  />
                  <label
                    htmlFor="remember-me"
                    className="ml-2 block text-sm text-gray-900"
                  >
                    Remember me
                  </label>
                </div>

                <div className="text-sm">
                  <a
                    href="#"
                    className="font-medium text-indigo-600 hover:text-indigo-500"
                  >
                    Forgot your password?
                  </a>
                </div>
              </div>

              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Sign in
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

```
Đổ màu cho background để có độ tương phản nhất định
```css
/* styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-50
}
```

![Trang Login](/image/posts/VUFsw66dIzwVlzNDJMDx/img-4.jpg)

# Cài đặt Firebase SDK

Trước khi cài đặt Firebase thì các bạn cần phải tạo Firebase Project và đăng kí app đã. Trang chủ của Firebase cũng hướng dẫn chi tiết cách làm. Truy cập vào [hướng dẫn tạo Firebase Project](https://firebase.google.com/docs/web/setup#create-firebase-project-and-app) và thực hiện __Step 1__

Cần phải đảm bảo sau khi tạo Firebase Project, các bạn phải có được thông tin configuation như dưới đây ( ví dụ thôi nhé, sai đấy 😃)

```javascript
// firebase configuration

const firebaseConfig = {
  apiKey: "AIzaSyCZCS8Kw3I65nVjNSQ09bkZtkvdmeUIxg4",
  authDomain: "next01.firebaseapp.com",
  databaseURL: "https://next01-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "next01",
  storageBucket: "next01.appspot.com",
  messagingSenderId: "205499221374",
  appId: "1:205499221374:web:c04a4fff5dfc2e370e964f",
  measurementId: "G-CTFB3NN1RB"
};
```

Quay trở lại project và cài đặt Firebase SDK thông qua terminal
```shell
$ yarn add firebase
```
Đoạn firebase config ở trên giờ đã đến lúc lên sàn. Các bạn tạo 1 file mới trong project và chép đoạn cài đặt dưới đây vào. Sau đó là nhảy sang bước __Đăng nhập__
```javascript
// ./libs/firebase.ts

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "<YOUR_KEY>",
  authDomain: "<YOUR_KEY>",
  databaseURL: "<YOUR_KEY>",
  projectId: "<YOUR_KEY>",
  storageBucket: "<YOUR_KEY>",
  messagingSenderId: "<YOUR_KEY>",
  appId: "<YOUR_KEY>",
  measurementId: "<YOUR_KEY>"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

```


# Đăng nhập qua Firebase Authentication

Tạo mới file dành riêng cho xử lý đăng nhập và cũng dễ dàng maintain hơn về sau.
```javascript
// ./services/sign.ts

import "../libs/firebase";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

export const signInWithEmail = (email: string, password: string) => {
  return signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log(userCredential.user);
    })
    .catch((error) => {
      console.log(error.code);
    });
};

//
```
Cập nhật nội dung của file `login.tsx` như sau

```typescript
// pages/login.tsx

import React, { FormEventHandler, useRef } from "react";
import { signInWithEmail } from "../services/sign";

export default function Login() {
  const emailRef = useRef<HTMLInputElement>(null);
  const passRef = useRef<HTMLInputElement>(null);

  const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
    ev.preventDefault();
    if (!emailRef.current || !passRef.current) return;

    const email = emailRef.current.value;
    const password = passRef.current.value;

    signInWithEmail(email, password);
  };

  return (
    <>
....
            <form
              onSubmit={onSubmit}
....
                  <input
                    ref={emailRef}
                    id="email"
....

                  <input
                    ref={passRef}
                    id="password"
....

    </>
  );
}

```

Nếu đoạn code trên gây ra lỗi như bên dưới có nghĩa là việc đăng nhập hoạt động, nhưng do user chưa tồn tại nên không thể đăng nhập được
![Hoạt động nhưng không login đcược](/image/posts/VUFsw66dIzwVlzNDJMDx/img-6.jpg)

Tiếp theo, chúng ta sẽ tạo user để quá trình trên hoạt động. Có 2 cách để tạo user là: 
__sử dụng firebase sdk__ hoặc __tạo trực tiếp trên firebase console__

Tôi sẽ sử dụng cách thứ 2, tạo trực tiếp trên __firebase console__. Các bạn thực hiện theo các bước dưới đây:
- Truy cập vào địa chỉ [https://console.firebase.google.com/](https://console.firebase.google.com/) 
- Chọn Project để chuyển vào màn hình Admin
- Tại section __Build__ > chọn __Authentication__
- Tại tab __Sign-in method__, chọn __Email/Password__ và enable nó lên
   ![Enable email method](/image/posts/VUFsw66dIzwVlzNDJMDx/img-7.jpg)
- Quay trờ lại tab __Users__ và nhấn __Add user__ để tạo tài khoản
  ![img-8.jpg](/image/posts/VUFsw66dIzwVlzNDJMDx/img-8.jpg)

OK. giờ thử login lại nào
![Login thành công](/image/posts/VUFsw66dIzwVlzNDJMDx/Video-Fri-Nov-05-2021-22-33-39.gif)

# Kết luận

Phần 1 của bài viết Authetication sử dụng Firebase đến đây là kết thúc. Tôi sẽ hoàn thành bài viết này ở phần tiếp theo với việc tạo ra Custom token và xác thực nó. 

Hẹn gặp lại các bạn trong phần tiếp theo

Next.js: Authentication sử dụng Firebase - part 1

Bài viết này tôi sẽ đưa ra 10 quy tắc được rút ra trong quá trình làm việc và tìm hiểu. Đừng chỉ đọc, hãy mở editor lên và code thử nhé
# Trước hết, chuẩn bị nội dung sau <i emoj>🍽️</i>

Để những quy tắc nêu ra trong bài viết này thêm trực quan, tôi đã chuẩn bị 1 ví dụ sau:
- Cho phép user nhập thông tin
- Khi nhấn submit, nội dung sẽ được kiểm duyệt
- Nếu thông tin hợp lệ, hiển thị preview và thêm vào list of users

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/1/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

Tiếp theo, thì hãy thử áp dụng các quy tắc dưới đây vào ví dụ trên

# 1/ Sử dụng `let`, `const` thay cho `var` <i emoj>🌍</i>

Bộ 3 từ khóa trên đều được sử dụng để khai báo giá trị cho biến. Tuy nhiên, chúng có những khác biệt cơ bản như sau

- __`var`__ - đưa toàn bộ khai báo lên đầu scope, thường gây ra hiện tượng __[hoisting variable](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)__
- __`let`__ - khai báo biến ngay tại vị trí scope
- __`const`__ - khai báo hằng số, giá trị được khai báo không thể thay đổi

Do nhược điểm của `var` ở trên nên hầu hết các ứng dụng web hiện tại không chấp nhận việc sử dụng nó nữa

Nên việc đầu tiên là chuyển toàn bộ `var` sang sử dụng `let` hoặc `const`

# 2/ Khai báo biến ở vị trí trên cùng thay vì tràn lan trong code<i emoj>🗼</i>

Đoạn code của chúng ta có 1 số biến được định nghĩa mỗi khi `<form/>` submit. Việc này là không cần thiết

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/6/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 3/ Sử dụng object destructing <i emoj>🗽</i>

Khi cần truy xuất trường dữ liệu trong 1 object, thay vì tạo 1 biến mới và gán giá trị của object vào đối tượng đó thì có thể sử dụng cú pháp sau

```javascript
const userInfo = {name: 'John doe', age: 24}
const { name } = userInfo
```

Áp dụng vào source code ta được kết quả sau

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/12/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 4/ Hạn chế sử dụng `if` lồng nhau<i emoj>😖</i>

Câu lệnh điều kiện càng đơn giản, thì code càng dễ hiểu. Thay vì viết lồng nhiều `if` làm tăng độ phức tạp, thì chúng ta nên đơn giản hóa điều kiện

Hãy sử dụng các câu lệnh điều kiện dạng ngắt. Kiểu như: nếu không thỏa mã, bỏ qua.

Giở thử thay đổi điều kiện <u>_"nếu độ dài tên nhỏ hơn 30 và tuổi lớn hơn 0"_</u> trong ví dụ

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/16/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 5/ Gộp nhiều đoạn code thành 1 function <i emoj>🗝️</i>

Độ dài của 1 xử lý ảnh hưởng rất nhiều đến quá trình đọc hiểu, fixbug và cải thiện chất lượng source code

Code ngắn thường dễ đọc hiểu và ngược lại. Nên là, nếu dài quá thì gộp lại thành function

Ví dụ trên có các đoạn code về kiểm duyệt dữ liệu, hiển thị preview và thêm mới thông tin có thể gộp thành 3 function: `isValidData`, `previewData`, `addNewInfo`

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/24/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 6/ Sử dụng Template strings <i emoj>🗳️</i>

Quy tắc này không bắt buộc, bạn có thể thực hiện hoặc không. Chẳng qua, viết teamplate strings sẽ KHÔNG CẦN PHẢI:
- dùng dấu `+` để nối chuỗi
- bổ sung kí tự escape khi viết:  'I\\'m John'

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/29/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 7/ Sử dụng `async` và `await` kết hợp lambda function <i emoj>🖐️</i>

Bất đồng bộ thường gây ra 1 vấn đề được gọi là [callback hell](http://callbackhell.com/), đại khái có thể hiểu là __việc sử dụng quá nhiều callback__. Việc này thường xảy ra khi chúng ta có nhiều xử lý cần phải đợi kết quả từ xử lý trước mới có thể thực hiện được

Để giải quyết vấn đề này thì `async` và `await` ra đời. Quay lại ví dụ của chúng ta, hãy áp dụng vào hàm `saveToDatabase`. Nhớ là
- __`await`__ luôn luôn phải nằm trong __`async`__
- __`async`__ không cần thiết phải có __`await`__
- __`async`__ chỉ được sử dụng với function

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/47/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 8/ Thay đổi thứ tự thực thi code <i emoj>♻️</i>

Thông thường, với tôi, việc đọc code luôn bắt đầu từ trên xuống dưới, và phải có 1 điểm bắt đầu

Do đó, để dễ đọc hiểu hơn, tôi thường chuyển thứ tự thực thi code theo chiều từ trên xuống dưới

Trên cùng là nơi toàn bộ xử lý được bắt đầu, các xử lý phụ thì sắp đặt bên dưới. Trong ví dụ của chúng ta, tôi sẽ chuyển sự kiện submit của `<form />` lên đầu tiên, thay vì dưới cùng

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/33/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 9/ Đừng lặp lại những công việc mà bạn thấy phiền <i emoj>⚠️</i>

Nếu chỉ đọc bài viết này, thì có lẽ các bạn sẽ ko cảm nhận được. Nhưng nếu mà thử thực hiện, các bạn sẽ thấy rằng việc viết đi viết lại câu lệnh `document.get...`, `document.query...` rất là mệt mỏi. Nhất là khi đã mỏi tay rồi mà bàn phím còn kẹt nút  😡😡

Do đó, nếu có thể viết ngắn hơn, thì đừng đắn đo nhiều, sửa luôn cho đỡ mỏi

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/34/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# 10/ Sử dụng comment để làm rõ chức năng thực hiện <i emoj>💬</i>

Có nhiều quan điểm về việc sử dụng comment trong code. Tiêu biểu có thể kể đến 2 quan điểm:
- Code phải có nhiều comment mới tốt
- Code ít comment mà vẫn hiểu được mới là tốt

Thực tế 2 quan điểm này không hề sai, tuy nhiên, lời khuyên cho các bạn newbie là __nên comment để hiểu mình đã và đang làm gì__

Hơn nữa, lập trình không phải là 1 công việc cá nhân, mà có tính đồng đội rất cao. Do đó, việc mô tả công việc của mình cho đồng đội hiểu là rất quan trọng

<iframe width="100%" height="300" src="//jsfiddle.net/hudy9x/g85p7or0/44/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

# Kết

Trên đây chắc chắn không phải là những quy tắc hoàn chỉnh và đầy đủ nhất. Nó chỉ là những kinh nghiệm mà tôi đúc kết, tìm hiểu và chia sẻ cho các bạn. 

Hy vọng qua đó các bạn có thể tự nắn chỉnh bản thân để cải thiện hơn nữa chất lượng code của mình

Nếu thấy hữu ích hãy chia sẻ cho bạn bè của bạn, cùng làm và cùng thay đổi.

10 quy tắc giúp newbie viết code javascript tốt hơn

Trước hết, bạn cần phải hiểu được 2 khái niệm cơ bản về Cloud Firestore như sau:
- __`collections`__: ứng với CSDL quan hệ thì nó là tables
- __`document`__: ứng với CSDL quan hệ thì nó là row
- __`field`__: giống với CSDL quan hệ



# Chuẩn bị
Có 3 thứ bạn cần chuẩn bị là: __danh sách user__ và __2 collections là `posts` và `users`__

![Danh sách users](/image/posts/hu0BJmY847FwT0Z8ZyBp/firestore-rule-2.png)

![Posts Collection](/image/posts/hu0BJmY847FwT0Z8ZyBp/firestore-rule-1.png)

![Users Collection](/image/posts/hu0BJmY847FwT0Z8ZyBp/firestore-rule-3.png)

# Sử dụng Rules Playground

Để hỗ trợ cho việc test các rules được đơn giản và nhanh chóng, và __không làm thay đổi đến dữ liệu hiện tại__ thì chúng ta sẽ sử dụng Rules Playground. Truy cập thông qua https://console.firebase.google.com

![Rules Playground](/image/posts/hu0BJmY847FwT0Z8ZyBp/firestore-rule-5.png)

Có 3 trường dữ liệu cần lưu ý như sau:
- __Simulation type__: phương thức request gồm: get, create, update, delete
- __Location__: đường dẫn tới document hoặc collection cần kiểm tra rule. VD: /posts/BklzUCx35BLnkYs5ru2g
- __Authenticated__: lựa chọn loại request là đã xác thực hay chưa xác thực

![firestore-rule-6.png](/image/posts/hu0BJmY847FwT0Z8ZyBp/firestore-rule-6.png)



# Cài đặt Rules cơ bản

## 1/ Vô hiệu hóa toàn bộ truy cập vào database

Nghĩa là user không thể thực hiện hành động đọc (read), ghi (write) dữ liệu vào database.

Các khai báo bên dưới được hiểu như sau:
- __`service firebase.storage`__:  chỉ định rules chỉ được áp dụng cho dịch vụ `storage`
- __`match /{document=**}`__: khai báo này biểu thị rằng toàn bộ rule sẽ được áp dụng cho toàn bộ document
- __`allow read, write: if false`__: không cho phép đọc, ghi dữ liệu

```javascript
rules_version = '2';
service firebase.storage { 
  match /{document=**} {
    allow read, write: if false
  }
}

```

## 2/ Cho phép bất kì ai đọc và ghi dữ liệu
Chuyển cài đặt `if false` sang `if true`, có nghĩa là toàn bộ document đều có thể đọc và ghi. Kể cả với những user chưa được xác thực

Cài đặt này chỉ phù hợp khi phát triển hoặc kiểm thử
```javascript
match /{document=**} {
  allow read, write: if true
}
```

## 3/ Phân quyền cho user đã đăng nhập
Nếu bạn chỉ muốn cho những user đã đăng nhập được quyền write dữ liệu vào database

```javascript
match /posts/{postId} {
   allow write: if request.auth != null;
}
```

Lưu ý: user đã đăng nhập ở đây là những user đăng nhập sử dụng [Firebase Authentication](https://firebase.google.com/docs/auth) 

## 4/ Phân quyền cho 1 user cụ thể

Ví dụ, bạn muốn phân quyền ghi dữ liệu trong collection `users` cho chính người sở hữu dữ liệu ấy, hay nói cách khác là có `uid` trùng với `userId`

```javascript
match /users/{userId} {
   allow write: if request.auth.uid != userId;
}

```

## 5/ Truy cập vào dữ liệu của document
Tiếp theo, bạn có thể tạo ra rule dựa vào dữ liệu trong document bằng cách sử dụng biến `resource.data`
```javascript
match /posts/{postId} {
  allow read: if resource.data.isDraft == false
}
```

Biến `resource.data` đại diện cho toàn bộ dữ liệu trong document. Giả sử bạn có 1 document như sau
```javascript
// posts/{postId}
{
  name: 'Post no 1';
  isDraft: false;
  content: "...";
  author: "James"
}
```

Lúc này, bạn có thể sử dụng `resource.data.name`, `resource.data.content`, .v.v

# Cài đặt Rules nâng cao

## 6/ Sử dụng function để rút gọn rule

Thử hình dung rằng, khi số lượng điều kiện của bạn ngày càng tăng lên và điều kiện cũng phức tạp hơn gây khó khăn trong việc đọc hiểu. 

Nếu vẫn sử dụng cách cài đặt điều kiện như trên thì không tốt chút nào. Để giải quyết vấn đề này, chúng ta sẽ sử dụng `function`

```javascript
match /posts/{postId} {
  function isSignedIn() { // tạo function
    return request.auth != null;
  }

  allow read: if isSignedIn(); // gọi function - khá giống javascript
}
```

Trông ngắn gọn và tường minh hơn đúng k 🌝

## 7/ Truy cập đến dữ liệu từ collection khác

Trường hợp tiếp theo, nếu bạn muốn truy cập đến dữ liệu từ 1 collection khác thì sao. Xem xét ví dụ: chỉ cho phép tác giả hoặc admin sửa hoặc xóa bài viết của họ tạo ra

```javascript
match /post/{postId} {
   allow update, delete: if isAuthor() || isAdmin();

   function isAuthor() {
      return resource.data.ownerId == request.auth.uid;
   }
   function isAdmin() {
      return get(/databases/$(database)/documents/
          user/$(request.auth.uid)).data.role == "ADMIN";
   }
}

```

Hàm `get()` được sử dụng để giải quyết trường hợp này. Ở ví dụ trên, hàm này được giải thích như sau:
- __get__ : sử dụng để truy xuất các collection khác
- __/databases/$(database)/documents/user/$(request.auth.uid)__: đường dẫn đến document thuộc collection cần lấy dữ liệu. 
- __get(</path/to/document>).data__: chứa kết quả trả về của hàm get

## 8/ Kiểm tra dữ liệu có tồn tại hay không

Muốn kiểm tra xem 1 document có tồn tại hay không thì sử dụng hàm `exists`, các sử dụng khá đơn giản như dưới

```javascript
exists(/databases/$(database)/documents/collectionName/$(documentId))
```

## 9/ Phân quyền theo nhiều cấp dữ liệu

Cuối cùng, bạn còn có thể phân quyền cho từng document bên trong collection

```javascript
  match /databases/{database}/documents {
    match /post/{postId} {
      allow read, write: if <condition>;

      match /children {
        allow read: if <condition>;
      }
    }
  }
```

# Tài liệu tham khảo

Nếu bạn cần tham khảo thêm về các method khác ngoài `write`, `read` thì có thể tham khảo 1 số nguồn dưới đây

- Tài liệu về ngôn ngữ được sử dụng để cài đặt Rules <br/>https://firebase.google.com/docs/rules/rules-language

- Những câu lệnh cài đặt Rules cơ bản<br/>
https://firebase.google.com/docs/rules/basics


# Kết

Với 9 cài đặt trên, hi vọng các bạn có thể nắm được những quy tắc cơ bản khi cài đặt rules cho Cloud Firestore. 

Nguồn tham khảo:<br/>
https://khreniak.medium.com/cloud-firestore-security-rules-basics-fac6b6bea18e<br/>
https://firebase.google.com/docs/rules



Cài đặt Security Rules cho Cloud Firestore trong 4 phút

Điểm số của WebVitals cho ứng dụng hay website của bạn là những thước đo rất quan trọng. Nó thể hiện việc trải nghiệm của người dùng có tốt hay không. Hơn nữa, điểm số này cũng ảnh hưởng đến việc xếp hạng của Google Search

Dưới đây là 4 điểm tối ưu mà `next/image` cung cấp khi được sử dụng 1 cách đúng đắn:

- __Improved Performance__ ⚡️: hiển thị ảnh có kích thước phù hợp cho từng thiết bị sử dụng những dạng ảnh hiện đại (webp, avif)
- __Visual Stability__ ⛷️: tự động ngăn chặn các lỗi CLF.
- __Faster Page Loads__ 🛸: chỉ load ảnh khi chúng nằm trong viewport, sử dụng blur placeholder
- __Asset Flexibility__ 🦢: thay đổi kích thước hình ảnh theo yêu cầu, kể cả với những ảnh được đặt ở remote server

# Giải thích những ưu điểm - Dài lắm đừng đọc <i emoj>👽</i> <i emoj>👼</i>
## Cải thiện hiệu suất - Improved performance <i emoj>⚡️</i>

Để tăng hiệu suất cho ứng dụng của bạn, `next/image` tự động sử dụng các định dạng ảnh như `.webp` hoặc `.avif` nếu nó được hỗ trợ

![Định dạng ảnh .webp đc sử dụng](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-1.png)

Ngoài ra, nó cũng cung cấp khả năng tự động tạo ra các kích thước hình ảnh phù hợp cho từng thiết bị. Việc này được xử lý bởi `loader`. Mục đích chính là tăng tốc độ tải ảnh tùy thuộc vào thiết bị, màn hình

Tuy nhiên, việc tự động tạo kích thước ảnh chỉ làm việc khi bạn sử dụng `layout=responsive` hoặc `layout=fill`

![4 chế độ layout chính](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-2.png)

## Tăng sự ổn định về mặt hiển thị - Visual Stability <i emoj>⛷️</i>

Nghe có vẻ hơi trừu tượng 1 chút, để hình dung rõ hơn các bạn cần phải hiểu 1 chút về [CLS](https://web.dev/cls/) - Cumulative Layout Shift

Ví dụ bạn có 1 nội dung HTML gôm 1 ảnh và 1 nội dung mô tả. Do bức ảnh không được chỉ định độ cao rõ ràng, nên sẽ gây ra hiện tượng nội dung mô tả bị đẩy thụt xuống sau khi bức ảnh được hiển thị. __Đây được gọi là hiện tương CLS__ (dịch chuyển bố cục của trang)

![Cumulative Layout Shift](/image/posts/FggFfQIRZGj1gWyx8Lql/Video-Wed-Nov-24-2021-23-08-52.gif)


Do đó, chúng ta luôn phải cung cấp cho ảnh 1 kích thước cụ thể. Hiểu rõ vấn đề này nên `next/image` cung cấp thuốc tính `layout` để giúp việc chỉ định kích thước 



## Tải trang nhanh hơn - Faster Page Loads <i emoj>🛸</i>

Tiếp theo, để tăng tốc độ tải trang nhanh hơn nữa, `next/image` không thực hiện hành động tải toàn bộ ảnh cùng 1 lúc. Thay vào đó, nó sẽ chỉ tải những ảnh đang nằm trong khu vực viewport đang hiển thị

![Chỉ ảnh trong viewport đc hiển thị](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-5.png)


Hơn nữa, để trải nghiệm của người dùng "mượt" hơn khi ảnh được tải xuống, thì `next/image` cung cấp thuộc tính `placeholder`. 

Với ảnh đang được tải, thay vì hiển thị "bụp 1 cái" để "đe dọa người dùng" 😂 thì 1 hiệu ứng mờ ảo sẽ được hiện ra, rồi dần dần chuyển sang rõ nét khi ảnh đc tải xuống hoàn tất

![Ảnh có sử dụng blur](/image/posts/FggFfQIRZGj1gWyx8Lql/image-placeholder.gif)


## Xử lý file linh hoạt - Asset Flexibility <i emoj>🦢</i>

Đôi khi thay vì lưu trữ hình ảnh trên cùng 1 máy chủ web thì chúng ta sử dụng dịch vụ lưu trữ của bên thứ 3. Với trường hợp này ta vẫn có thể sử dụng Image Optimization API

Để làm được việc này, thì bắt buộc bạn phải cung cấp danh sách các domain cần thiết. Các cài đặt này được thực hiện trong `next.config.js`

```javascript
// next.config.js

module.exports = {
  images: {
    domains: ['example.com', 'example2.com'],
  },
}
```

Và nếu bạn còn lo lắng về việc __"next/image có hỗ trợ tính năng tự động resize ảnh khi sử dụng dịch vụ lưu trữ bên thứ 3 hay không ?"__ thì, ... nó cũng hỗ trợ luôn nhé, quá xịn 🎉🎊

# Sử dụng `next/image` như thế nào ? <i emoj>🤔</i>

Trước hết, để sử dụng next/image chúng ta cần import nó vào đã

```javascript
import Image from 'next/image'
```

Tiếp theo, là đặt đường dẫn ảnh vào `src` là xong

```javascript
import Image from 'next/image'
import profilePic from '../public/me.png'

//...
      <Image
        src={profilePic}
        alt="Picture of the author"
      />
        // width={500} được nhập tự động
        // height={500} được nhập tự động
        // blurDataURL="data:..." được nhập tự động
//...
```
# Sử dụng các thuộc tính `layout`, `placeholder`, `priority` đúng đắn <i emoj>📚 🤓</i>

## Độ ưu tiên priority <i emoj>🗻</i>

Những ảnh có thuộc tính `priority` sẽ có độ ưu tiên cao và được xem xét tải trước để cải thiện LCP

Chỉ nên sử dụng thuộc tính này khi ảnh nằm trong nửa trên của trang đẩu tiên

![Cài đặt priority ở  các khung màu đỏ](/image/posts/FggFfQIRZGj1gWyx8Lql/above-the-fold.png)

## Sử dụng `layout=intrinsic`

Là kiểu layout mặc định, nên bạn không cần phải truyền giá trị `intrinsic`. Ở chế độ này `width` và `height` tự động fit với container chứa ảnh

```javascript
<Image id="img" src={url} />
```

Chế độ này __không thể tự động resize ảnh về các kích thước nhỏ hơn để phù hợp với từng thiết bị có viewport khác nhau__ nên với những bức ảnh có độ phân giải lớn thì việc sử dụng thuộc tính này sẽ không đem lại lợi ích về mặt hiệu suất 1 cách triêt để

![next-image-6.png](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-6.png)

Tất nhiên, là chế độ này vẫn hỗ trợ việc sử dụng định dạng ảnh `.webp` nên dung lượng của ảnh được tối ưu rất tốt

## Sử dụng `layout=fixed`
Gần như tương tự với `intrinsic`, ngoại trừ việc phải cung cấp `width` và `height` cho ảnh. Chế độ này __không thể tự động responsive__ theo sự thay đổi kích thước của thiết bị  😕

## Sử dụng `layout=responsive`

Một số yêu cầu bắt buộc ở chế độ này như sau

- 👊 Phải cung cấp thuộc tính __`width`__ và __`height`__
- 👊 Phải cung cấp giá trị __`layout=responsive`__

Bên cạnh những yêu cầu bắt buộc thì nó cũng đem lại nhiều cải thiện hơn những chế độ tôi đã đề cập ở trên

- ✔️ Tự động convert sang định dạng __`.webp`__
- ✔️ Tự động resize hình ảnh theo các kích thước khác nhau của device sử dụng thuộc tính __`sizes`__ 

Cách sử dụng thì khá đơn giản như sau

```javascript
<Image
  id="img"
  src={ "/test-image/unnamed.jpg?inline=false" }
  width="1200"
  height="1200"
  layout="responsive"
/>
```

Với những cài đặt đơn giản trên, `next/image` sẽ dựa vào kích thước của ảnh và thiết bị để tạo ra 1 loạt những cài đặt cho `srcset`, `sizes`, ...

```javascript
// next.config.js - đây là cài đặt mặc định của next/image
module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}
```
Kết quả của việc cài đặt này như sau

![Tự động tạo ảnh với nhiều kích thước khác nhau](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-11.jpg)

Chúng ta sẽ bắt đầu test với kích thước màn hình nhỏ, sau khi được kéo dãn ra rộng bằng màn hình thì __ảnh với các kích thước khác nhau sẽ được tải xuống và sử dụng__, các bạn có thể kiểm tra bằng cách kiểm tra bên dưới 
```javascript
console.log(document.getElementById('image-id').currentSrc)
```

<video width="100%" controls autoplay="true">
    <source src="/image/posts/FggFfQIRZGj1gWyx8Lql/auto-generate-image-size.webm" type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

Điều này có nghĩa là, nếu bạn resize đến kích thước <= 640px thì chỉ ảnh tương ứng với kích thước này được hiện thị

## Sử dụng `layout=responsive` và `sizes`

Một lưu ý đặc biệt cần nắm được khi sử dụng chế độ layout này đó là __nên sử dụng cùng với thuộc tính `sizes`__

Cùng xem xét ví dụ sau: đặt 1 bức ảnh trong 1 container có độ rộng là 100px. Kết quả rất dễ hình dung, ảnh sẽ được đặt vừa với container

```javascript
<div style={{ width: 100 }}>
	<Image
	  id="img"
	  src={ "/test-image/unnamed.jpg?inline=false" }
	  width="1200"
	  height="1200"
	  layout="responsive"
	/>
</div>
```

Vấn đề ở đây là, nếu bức hình có độ rộng là 1920px thì nó vẫn sẽ được tải xuống với kích thước này. Ảnh hưởng đến hiệu suất khi tải trang

![Ảnh hiển thị trong khung nhỏ nhưng vẫn sử dụng kích thước lớn](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-12.jpg)

Để giải quyết vấn đề này, chúng ra sẽ sử dụng thuộc tính `sizes`. Chỉ tải ảnh có kích thước 384px ở  tất cả các khung hình

```javascript
<div style={{ width: 100 }}>
	<Image
	  id="img"
	  src={ "/test-image/unnamed.jpg?inline=false" }
	  width="1200"
	  height="1200"
	  layout="responsive"
	  sizes="(max-width: 640px) 384px,
	  (max-width: 1080px) 384px,
	  (max-width: 1200px) 384px,
	  (max-width: 1920px) 384px,
	  384px"
	/>
</div>
```
Có thể hiểu đoạn code trên như sau: ([tài liệu về thuộc tính __sizes__](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images))
- nếu <= 640px sử dụng ảnh 384px
- nếu <= 1080px sử dụng ảnh 384px
- cứ như thế, cho đến 1920px


![Sử dụng cách này có thể làm tăng tối đa hiệu suất tải trang
](/image/posts/FggFfQIRZGj1gWyx8Lql/next-image-13.jpg)

## Sử dụng `layout=fill`

Chế độ này chỉ khác với reposive ở việc hiển thị hình ảnh. Mặc định, khi sử dụng thì `width` và `height` sẽ được kéo dài cho vừa với container chứa ảnh

```javascript
        <Image
          id="img"
          src={
            "/test-image/unnamed.jpg?inline=false"
          }
          width="50"
          height="50"
          alt="Picture of the author"
          layout="fill"
          objectFit="contain"
        />
```

Do đó, gây ra hiện tượng ảnh bị dãn, bị méo. Nên cần phải sử dụng kèm với thuocj tính `objectFit`

<video width="100%" controls autoplay="true">
    <source src="/image/posts/FggFfQIRZGj1gWyx8Lql/object-fit.webm" type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

## Sử dụng placeholder

Cách sử dụng khá đơn giản với ảnh local, mục đích là tạo lớp mờ hiển thị trước khi ảnh được load hoàn chỉnh

```javascript
import mountains from '../public/mountains.jpg'

// ...
<Image
  alt="Mountains"
  src={mountains}
  placeholder="blur"
/>
```

Với ảnh remote thì bạn sẽ cần sử dụng `blurDataURL` ([tham khảo](https://nextjs.org/docs/api-reference/next/image#placeholder))

```javascript
const keyStr =
  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='

const triplet = (e1, e2, e3) =>
  keyStr.charAt(e1 >> 2) +
  keyStr.charAt(((e1 & 3) << 4) | (e2 >> 4)) +
  keyStr.charAt(((e2 & 15) << 2) | (e3 >> 6)) +
  keyStr.charAt(e3 & 63)

const rgbDataURL = (r, g, b) =>
  `data:image/gif;base64,R0lGODlhAQABAPAA${
    triplet(0, r, g) + triplet(b, 255, 255)
  }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`

const Color = () => (
  <div>
    <Image
      alt="Cat"
      src="/cat.jpg"
      placeholder="blur"
      blurDataURL={rgbDataURL(2, 129, 210)} // <==
      width={750}
      height={1000}
    />
  </div>
)
```

## Sử dụng `loader`

Nếu bạn vẫn đang thắc mắc rằng `next/image` tạo ra ảnh `.webp` và thay đổi chất lượng ảnh ở đâu? hay resize ảnh chỗ nào ? Câu trả lời là những công việc đó được thực hiện bởi loader

Mặc định, Next.js cung cấp loader để hỗ trợ việc tối ưu này rồi, nên bạn sẽ không cần phải cài đặt nữa

Nhưng nếu bạn đang sử dụng những provider khác, thì bạn vẫn có thể thay đổi cài đặt trong `next.config.js` ([danh sách loader hỗ trợ](https://nextjs.org/docs/api-reference/next/image#built-in-loaders))

```javascript
module.exports = {
  images: {
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

```

# Kết <i emoj>🍰</i>
Tóm lại, để sử dụng `next/image` 1 cách hiệu quả thì các bạn cần lưu ý đến mục đích sử dụng của ảnh, qua đó lựa chọn chế độ `layout` phù hợp. Hi vọng hiện tại các bạn đã có thể hiểu cách sử dụng `next/image`

Nguồn tham khảo<br/>
https://nextjs.org/docs/api-reference/next/image<br/>
https://nextjs.org/docs/basic-features/image-optimization

Tối ưu hóa hình ảnh với next/image

Hiện đội ngũ phát triển của Next vẫn đang hoàn thiện các tính năng còn lại. Nên hướng dẫn này chỉ mang tính trải nghiệm và <u>__không nên sử dụng trong việc phát triển sản phẩm__</u>💥

# React Server Components là loại component gì ? <i emoj>🐶</i>
Tôi sẽ chia component ra làm 2 loại là __Server Component__ và __Client Component__ để tiện cho việc phân biệt công dụng của từng loại

Client component thì rất rõ ràng, nó chính là những component chỉ được sử dụng phía client

Còn Server component thì ngược lại, chỉ được sử dụng phía server,  để hiểu rõ về nó chúng ta cần phải xem xét những khả năng mà RSC có thể và không thể làm. Dưới đây là những thứ mà RSC có thể làm:

- ✔️ Truy cập các người dữ liệu như: functions, database 
- ✔️ Giảm kích thước dữ liệu trả về client
- ✔️ Giảm số lượng request tới server
- ✔️ Tối ưu trải nghiệm duyệt web của người dùng

Và không thể làm:
- ❌ Không thể sử dụng __`useState`__ hay  __`useEffect`__
- ❌ Không thể sử dụng được hook mà trong đó có sử dụng __`useState`__ hoặc __`useEffect`__
- ❌ Không thể sử dụng được Browser API

Lỗi sau sẽ hiển thị nếu bạn cố tình sử dụng các api trên

![❌ RSC ko thể sử dụng useState, useEffect](/image/posts/eiZsx7Frd78zOJAhMjWB/rsc-1.png)

# RSC và SSR khác nhau ra sao ? <i emoj>💬</i>

SSR là kĩ thuật được sử dụng để render  ứng dụng ở phía server sau đó dữ liệu được render (HTML)  sẽ được gửi xuống client, sau đó được browser đọc và hiển thị

RSC, như tôi đã đề cập trước đó, cũng được render ở phía server. Tuy nhiên, dữ liệu được render ra __không phải là HTML__. Dạng dữ liệu này được stream trực tiếp từ server tới client
![Dữ liệu từ RSC](https://blog.logrocket.com/wp-content/uploads/2021/02/react-server-component-render.png)

Ngoài ra, RSC còn khác SSR ở 2 điểm sau
- ✔️ RSC có thể render theo từng phần nhỏ, trong khi SSR thì render lại toàn bộ trang
- ✔️ RSC có thể truy cập các nguồn dữ liệu từ database, không giống như SSR, chỉ có thể truy cập được các nguồn dữ liệu này thông qua `getServerProps`

# Làm sao để dùng thử RSC <i emoj>👨‍🚀</i>

Để sử dụng được React Server Component thì bạn cần bật 2 option trong `next.config.js` như dưới đây

```javascript
// next.config.js
module.exports = {
  experimental: {
    concurrentFeatures: true, // bật tính năng SSR Streaming
    serverComponents: true // bật tính năng React Server Components
  }
}
```
Giờ, để  tạo ra 1 RSC thì bạn chỉ đơn giản là thay đổi tên file. Cụ thể như sau, `pages/home.tsx` đổi thành `pages/home.server.tsx`

## Sử dụng RSC 

Đầu tiên, chúng ta tọa 1 file `pages/home.server.js` và bổ sung 1 đoạn code đơn giản lấy dữ liệu như sau


```javascript
// pages/home.server.js

import React from "react";
import ProfileDetail from "../components/ProfileDetail";

export default function Home() {
  return (
    <>
      <h2>Hello world</h2>
      <ProfileDetail />
    </>
  );
}
```
Tạo tiếp `components/ProfileDetail.server.js`, đây là nơi sự khác biệt giữa RSC và SSR

```javascript
// components/ProfileDetail.server.js

import React from "react";
import { fetchData } from "../libs/fakeApi";

const resource = fetchData();

export default function ProfileDetail() {
  const user = resource.read();

  return (
    <div>
      <p>{user.username}</p>
      <h1>{user.email}</h1>
    </div>
  );
}
```

Và tạo thêm 1 file dùng để giả lập việc lấy dữ liệu (tôi đang giả định là mất 5s để dữ liệu được lấy về)
```javascript
// libs/fakeApi.js

export function fetchData() {
  let status = "pending";
  let result;

  const pm = () =>
    new Promise((resolve, reject) => {
      fetch("https://jsonplaceholder.typicode.com/users/1")
        .then((res) => res.json())
        .then((json) => {
          setTimeout(() => {
            resolve(json);
          }, 5000); // tạm ngưng 5s để giả lập thời gian trả về
        })
        .catch((err) => {
          reject(err);
        });
    });

  let suspender = pm()
    .then((json) => {
      status = "success";
      result = json;
    })
    .catch((err) => {
      status = "error";
      result = err;
    });

  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    },
  };
}

```

Chạy thử thì kết quả sẽ được trả về sau 5s load dữ liệu. 

![Sử dụng RSC không có Suspend](/image/posts/eiZsx7Frd78zOJAhMjWB/reactjs-suspend-rsc.gif)

Các bạn hãy để ý sự khác biệt khi sử dụng RSC ở đây. Đó là __có thể truy cập dữ liệu từ `components`__  👍

Điều này ko thể làm được khi sử dụng SSR hay Client Component 👎🏾

## Sử dụng RSC với Suspend

Ở đoạn code trên, tôi đã đặt 1 khoảng thời gian delay là 5s. Điều này làm page phải đợi 5s để render ra được HTML. Tuy nhiên, <u>nếu sử dụng `<Suspend/>` thì quá trình chờ đợi này sẽ được xử lý song song với quá trình render, hay nói cách khác là bất đồng bộ</u> 👍

```javascript
// pages/home.server.js

import React, { Suspense } from "react";
import ProfileDetail from "../components/ProfileDetail.server";

export default function Home() {
  return (
    <>
      <h2>Hello world</h2>
      <Suspense>
        <ProfileDetail />
      </Suspense>
    </>
  );
}
```
Reload lại trình duyệt, bạn sẽ thành dòng _Hello world_ được load ra và sau 5s dữ liệu của `<ProfileDetail/>` sẽ được trả về

![Sử dụng RSC với Suspend](/image/posts/eiZsx7Frd78zOJAhMjWB/reactjs-w-suspend.gif)

# But, tại sao RSC lại giảm kích thước dữ liệu trả về client ?? <i emoj>🐷</i>

Tôi sẽ lấy 1 ví dụ, sư dụng `moment` để hiển thị thời gian hiện tại. Các bạn hãy tạo ra 2 file có cùng nội dung như bên dưới

```javascript
// components/Time.server.js
// components/Time.client.js

import React from "react";
import moment from "moment";

export default function Time() {
  const time = moment().format("DD/MM/YYYY hh:mm");
  return <div>{time}</div>;
}

```
Sau đó thử import lần lượt từng file vào `pages/home.server.js`

```javascript
// pages/home.server.js
....
export default function Home() {
  return (
    <>
      <h2>Hello world</h2>
      <Time />
      <Suspense>
        <ProfileDetail />
      </Suspense>
    </>
  );
}
```
Rồi lần lượt reload lại page để kiểm tra ta sẽ thấy sự khác biệt. Nếu sử dụng `components/Time.server` thì bạn sẽ không tìm thấy thư viện __node_modules/moment__. Điều này có nghĩa là kích thước dữ liệu đã được thu gọn lại

![Server component](/image/posts/eiZsx7Frd78zOJAhMjWB/rsc-2.png)

Còn nếu sử dụng `components/Time.client` thì ngược lại

![Client component](/image/posts/eiZsx7Frd78zOJAhMjWB/rsc-3.jpg)

# Kết

Đến thời điểm hiện tại, RSC vẫn chưa release chính thức, tuy nhiên 1 số ưu điểm có nó thì rất đáng để mong đợi. __KHUYẾN CÁO KHÔNG NÊN SỬ DỤNG RSC Ở MÔI TRƯỜNG PRODUCTION__. 

Cám ơn các bạn đã theo dõi hết bài viết

Nextjs 12 - React Server Components

Để bắt đầu, các bạn cần chuẩn bị một số công cụ cần thiết. Tôi cũng đã chuẩn bị đường link đến tài liệu cài đặt nếu như bạn chưa biết về các công cụ này
- [npm account ](https://www.npmjs.com/signup)- để publish thư viện
- [yarn](https://yarnpkg.com/getting-started/install#about-global-installs) - quản lý packages


## #1 Cài đặt storybook  <i emoj>🛠️</i>
Dùng `create-react-app` tạo React.js project, nhớ bổ sung thêm option sử dụng template typescript
```shell
$ yarn create react-app my-first-react-component --template typescript
```
Cài đặt storybook bên trong dự án. Nhớ là bên trong dự án chứ ko phải bên ngoài

```shell
$ cd my-first-react-component
$ npx sb init
```
Sau khi cài đặt xong, chạy storybook
```shell
$ yarn storybook
```

## #2 Xóa các file không cần thiết <i emoj>🛑</i>
Chúng ta sẽ chỉ giữ lại thư mục `src/stories` và xóa các thư mục còn lại
![Thư mục và file cần xóa](/image/posts/rdznuNguyllnJPWWR98H/img-1.png)

Đổi tên thư mục `src/stories` thành `src/components` - không bắt buộc, mục đích của việc này là do cá nhân tôi thích tên thư mục rõ ràng với chức năng

![Đổi tên thành /components](/image/posts/rdznuNguyllnJPWWR98H/img-2.png)

Đừng quên mở lại storybook xem có bât kì sai xót nào không __yarn storybook__. Nếu không có vấn đề gì, ta sẽ cần tạo thêm `src/index.ts`. Mục đích là để có thể import được module

```typescript
// src/index.ts

import { Button } from "./components/Button";

export { Button };

```

## #3 Bổ sung cài đặt cho `tsconfig.json` vs `package.json` <i emoj>📺</i>

Tiếp theo, cần phải bổ sung 1 số cài đặt cho typescript là `outDir`, `declaration`, `declarationDir` và 
`exclude`

```json
// tsconfig.json

{
  "compilerOptions": {
    ...
    "outDir": "lib", // => chỉ rõ thư mục output sau khi build
    "declaration": true, // => yêu cầu typescript tạo ra file .d.ts
    "declarationDir": "lib", // => thư mục lưu file .d.ts
    ...
  },
  ...
  "exclude": ["node_modules", "lib"] // loại trừ các thư mục không cần thiết
}

```

Mở file `package.json` và bổ sung các option sau để
- __`private`__: cho phép public module
- __`main`__: chỉ rõ file chính
- __`module`__: chỉ rõ file module
- __`types`__: chỉ rõ file định nghĩa kiểu dữ liệu

```json
// package.json

{
  ...
  "private": false,  // => xóa đi hoặc chuyển giá trị sang false
  "main": "lib/index.js",  
  "module": "lib/index.esm.js",
  "types": "lib/index.d.ts",
  ...
}

```

## #4 Cài đặt rollup <i emoj>🗳️</i>

Trước khi cài đặt, 
```shell
$ yarn add --dev rollup rollup-plugin-typescript2 @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss postcss

```

Tạo file `rollup.config.js` với nội dung sau
```javascript
// rollup.config.js

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss({
      extensions: [".css"],
    }),
  ],
};
```
Cập nhật file `package.json` và bổ sung lệnh build
```json
// package.json
{
  ...
  "scripts": {
    ...
    "build": "rollup -c",
  },
}
```
Chạy thử lệnh __build__ và xem kết quả
```shell
$ yarn build

// -----------------------------------------
yarn run v1.22.11
warning package.json: No license field
$ rollup -c

src/index.ts → lib/index.js, lib/index.esm.js...
created lib/index.js, lib/index.esm.js in 2.7s
Done in 3.57s.
```

## #5 Đăng nhập npm và publish sản phẩm <i emoj>🚩</i>
Mở terminal và sử dụng tài khoản npm để đăng nhập. Nếu bạn không có tài khoản npm thì có thể [đăng ký tại đây](https://www.npmjs.com/signup)
```shell
$ npm login
Username: watiss09
Password:
Email: (this IS public) watiss09@gmail.com
Logged in as watiss09 on https://registry.npmjs.org/.
```
Bước cuối cùng, chạy lệnh sau, nếu không có lỗi gì thì xin chúc mừng, bạn đã thành công
```shell
$ npm publish
```

Còn nếu gặp phải lỗi sau, thì khả năng cao là do tên module của bạn đã tồn tại, đơn giản là vào `package.json` và thay đổi trường `name` và thực hiện publish lại

![Lỗi do trùng tên module](/image/posts/rdznuNguyllnJPWWR98H/img-3.png)

## Kết luận
Với 5 bước trên hi vọng các bạn đã có thể tự publish được module của chính mình lên npm. Cám ơn các bạn đã giành thời gian cho bài viết này và hẹn gặp lại
