百日轉職前端工程師：第十二週前後端整合復盤 《DAY 18》

大家好，這是百日轉職前端工程師的 Day18，也是 11/13（五），這週的主題會講的該要如何將前後端（分開處理後再）整合，如果有做好這個步驟，那理論上就算後端 Server 掛掉頁面還是會有資料，只是某些部分是空白的而已，而將這個功能做到極致則會有點類似 SPA（Single Page Application）單頁應用一樣，除此之外本週也會介紹 Boostrap 和 jQuery 兩樣好用的工具。

復盤系列將會回答我正在上的課程 Huli 的程式導師實驗計畫每一週學習上的自我檢測目標。

一、什麼是 SPA？

SPA（Single Page Application）單頁應用

• 他能夠讓你雖然只有一個 index.html 檔案，用起來卻像一個 App
• 其能夠減少重新載入整個頁面的次數，改用 AJAX 局部渲染頁面內容
• 簡單來說原本資料是在後端就要做處理，對於瀏覽器來說這叫做 Server-side render，而讓前後端分開處理，則是前端只單純透過 API 向後端拿取資料再透過 JavaScript render 出來部分頁面，稱為 Client-side render
• 當你把這種東西發揮到極致稱為 SPA，會覺得很像在寫一個 App 一樣，因為用起來就跟你在用 Native App 差不多

1. Server-side 和 Client-Side Render 的兩種資料處理方式

PHP：連資料跟介面都已經處理好輸出

又稱之為 Server-side render（SSR）

1. 把資料拿出來
2. 把資料跟 HTML (UI) 介面結合在一起
3. 回傳 HTML

API：只是單純拿到資料（只有資料）

又稱之為 Client-side render（CSR）

1. 把資料拿出來
2. 變成某種格式（JSON）
3. 回傳純資料

二、怎麼樣用 PHP 自己寫出 API？

簡單來說在 PHP 的最後段，將你想要取得的資料存在陣列 $json 中，再用 PHP 內建的函示 json_encode() 將其轉為 JSON 字串，後加入到 $response 送出。

$json = array("comments" => $comments);
$response = json_encode($json);

測試 API 時可以使用兩個工具，更方便的即時檢視 echo 和回傳結果，以便確定 API 寫的無誤

1. Postman
2. Insomnia

三、如何在前端與自己開的 API 串接？

• 簡單來說在前端的 JavaScript 中用 new XMLHttpRequest 的方式去向 api_comment_api 發送一個非同步的請求（Request）
• 並且取得其回應 （response） 值
• 然後用內建的函式 JSON.parse 將 JSON 字串轉化為物件
• 並將整串非同步的請求放入一個 function getComments 中，隨時等待呼叫

function getComments(cb) {
  var request = new XMLHttpRequest();
  request.open('GET', 'api_comment.php', true);
  request.onload = function() {
    if(this.status >= 200 && this.status < 400) {
      var resp = this.response;
      var json = JSON.parse(resp)
      var comments = json.comments
     }
  };
  request.send();
}

參考資料

1. XMLHttpRequest — JavaScript 發送 HTTP 請求
2. 如何在 PHP 中將陣列（array）轉成 JSON 格式

四、Server 與 Client render 的差別？

• 在實際應用上，前後端拆成兩個專案也有一些好處，像是利於團隊分工
• 在這個思維下，後端用來實作商業邏輯及橋接資料庫，前端用來傳接資料及輸出頁面
• 前端的程式設計師不會直接動到後端的專案，反之亦然。
• 將專案拆開後，前端只要用靜態網頁主機就可以架起來，不需和後端共用同一個伺服器
• 另外一個好處是將資料和輸出解耦，同樣的資料可以搭配不同的媒介，像是同一個後端，可用來橋接網頁、行動裝置、桌機等不同環境。

但看似美好的 SPA 也不是沒有任何缺陷

• 由於需要仰賴前端下載大量 JavaScript 檔案，隨後才計算、渲染畫面，造成第一畫面需要較長的反應時間，在性能較差的行動裝置上更是如此
• 且如果使用者操作太快，前端就不能保證每次都能得到正確的 Server 資料（點進電影 A → 快速按上一頁 → 快速點進電影 B → 畫面顯示電影 A 資料）
• 除此之外 SEO（Search Engine Optimization） 效果也會變差
  • 因為是由前端的 JavaScript 動態產生內容，因此如果你對 SPA 的網站按下右鍵 -> 檢視原始碼，只會看到空蕩蕩的一片，搜尋引擎無法讀取內容做判斷
• 視情況去使用，其比較廣泛運用於 Gmail、Twitch，和 Spotify......等場景，讓使用者能夠在同一個頁面部分刷新，但又不中止整個網頁的運作，也就不會在讀取新資料時出現惱人的一片白，在特定場景上大幅度優化了整體的使用者體驗。

SSR+CSR：解決 SPA 在 SEO 上效果不佳的問題

• 既然問題出在「第一次渲染」，那我們只要在第一次渲染的時候把該輸出的資料都輸出就好啦
• 對使用者來說還是一個 SPA，差別在於使用者接收到 HTML 的時候，就已經有完整的資料了
• 而後續的操作還是由 JavaScript 來處理，依舊能保持 SPA 的優點
• 簡單來說就是第一個頁面是由 SSR（Server-side render），之後的頁面還是保持 CSR （Client-side render）

參考資料

1. 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
2. 前後端分離與 SPA
3. 為什麼網站要做成 SPA？SSR 的優點是什麼？

五、jQuery 是做什麼的？

jQuery 是一個 JavaScript 函式庫（library），其初衷是用來簡化 HTML 與 JavaScript 之間的溝通與操作

1. 將 JS 檔案變小（ex：省空格）
2. 壓縮檔案
3. 跨瀏覽器！

其中又以第三點是最為關鍵，在早期瀏覽器百家爭鳴的年代，你可能要寫五種寫法才能在五個不同的瀏覽器上面能運行，但 jQuery 跨瀏覽器的特性讓工程師只要寫一種寫法，就能在不同的瀏覽器上運行，且其可跟 JavaScript 混用。

引入方式:

<scrpit src="https://code.jquery.com/jquery-3.5.1.js"></script>

若是要讓其能夠不會由於程式碼順序產生 bug，需要將所有程式碼包覆在 $(document).ready(function() { }) 中，其作用為讓網頁下載完成後立即執行包覆的程式碼，也就是說當頁面內的 DOM 都準備好開始讀取就會執行 callback 內的 function。

其中的 $() 符號就是 jQuery 常用的選擇器（$ = jQuery），善用選擇器可以快速找到網頁當中的物件。

以下介紹幾種常見的用法，其他用法可至 You might not need jQuery 有非常詳盡的對照資料可查詢

1. 選取 '$(selector)' 元素，並指派它進行 '.action()' 事件

$( "button.continue" ).html( "Next Step..." )

2. 修改一個表單元素的 value 值

$("Element").val(value)

3. class 的新增

$("#test").addClass("aaa")

4. click 事件點選 btn-finished 元素

$('.list-group-body').on('click', '.btn-finished', e => {}

5. 切換: toggle

$('#mydiv').toggle(function(){}, function(){})

6. ajax

$.ajax({'type': 'POST', 'url': '', 'data': { todolists }}).done(function(data) { ... }

7. 取得 HTML

$("#htmDoc").load("test.html")

8. 淡入淡出效果

$('.box').fadeOut(500)

9. 新增元素到最下面/最上面

• append()
• prepend()

參考資料

1. jQuery 概述
2. 前後端整合 - 學習 jQuery 與 Bootstrap
3. jQuery 是什麼，它跟 JavaScript 有什麼關係？它又有什麼能耐呢？

六、jQuery 與 vanilla js 的差別？

Vanilla JS 是世界上最輕量的 JavaScript 框架（沒有一個）這句話讀三遍。如果還是不信的話，再把下面這句話讀三遍：「無論過去，現在還是未來，Vanilla JS 都是世界上最輕量的 JavaScript 框架（沒有一個）！」它輕量到甚至沒有任何東西，什麼？你說中文看不懂？那請看看原文可能比較精準，或自行上網查詢，在網路上有很多關於 vanilla js 的精彩討論串。

VanillaJS is a term for library/framework free javascript. Its sometimes ironically referred to as a library, as a joke for people who could be seen as mindlessly using different frameworks, especially jQuery. Some people have gone so far to release this library, usually with an empty or comment-only js file.

七、什麼是 Bootstrap？ 原理及應用？

簡單來說 Bootstrap 就是由一堆 HTML、CSS，和 JavaScript 所組成的網站樣板（templates）/ 框架，核心的設計目標是達成 RWD 響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。

基本上你想的到的網站元件舉凡字體排印、表單、按鈕、導航......都有，是前端工程師神助攻的小幫手。網路上有很多公開資源可以下載，可參考官網以及 Bootswatch（提供各種經過調整顏色的 Bootstrap 版本，可以套用在已有的 Bootstrap 網站上）

應用 grid 網格系統在 Bootstrap 上

可以直接在 class 裡面給予不同的 .col-，的來宣告其在不同版位下的佔據網格的比例如：

<div class="col-12 col-md-4"></div>

參考資料

1. Bootstrap 介紹 + 套版
2. Bootstrap 初學介紹 #靜態篇

八、結論

『分離是為了更好的相遇（整合）。』