2020/01/31

GraphQL使用評估

在學習React的過程有接觸到GraphQL這個新名詞,簡單來說GraphQL是:
一種新興的JSON Remote Procedure Call (RPC)規範
REST API寫多了,不是發展出一套龐大的路由切換器就是龐大的參數解析器

路由切換器
/person/id
/friend/id
/person/id/friend
...

參數解析器
persion_id=id
friend_id=id
...

如果系統簡單還好,但當系統一變多或變大,一定會有以下的問題:
  • API根目錄(ROOT)數量爆增,後端專案管理是個問題
  • API一旦異動(常見型別不同或欄位異動),前端必須等待後端更新,徒增開發效率不彰
GraphQL制定了前後端規範,只要後端Schema制定好,前端即有極大自由,減少工程師橫向溝通的時間就能加快開發速度。

使用GraphQL就能飛天?

前面說到,GraphQL嚴格來說僅止於制定規範,實作也只有提供簡易的Server讓使用者【嘗鮮】,實戰使用GraphQL往往需要搭配三方工具:Apollo或Relay,看來也是一條漫漫長路。

或許我們直接取用GraphQL的概念進行實作會更佳合宜。

能不能再簡單一點?

GraphQL到目前為止還是很新的技術,目前已知的資訊還不算成熟,如果自己採用類似JSON ORM的概念是否會更加簡單?

以上是目前對GraphQL一些看法,提供各位參考。謝謝各位觀看!

See also





2020/01/30

【前端】實戰 ASP.NET C# 移轉到 REACT 03



上回提到Main的作法之後,就要把前端做個完整的Prototype,讓前端歸前端,後端歸後端。

完整範例在此:eden-first-todo-list-app

2020/01/22

【前端】實戰 ASP.NET C# 移轉到 REACT 02



上一回提到登入頁面製作後,這次要帶實作主畫面。

原本主畫面長這樣:
 修改時會另開視窗進行編輯:
當時是利用後端進行 HTML 繪製,也就是 Server side 的處理方式,現在使用 REACT 會擦出什麼火花呢?

當時不會排版,不會CSS,連HTML標籤都知道的很少, 所以排版方式使用 Table 處理,就如同上圖的畫面。

REACT + Bootstrap 對 Table 不是太友善,我在 Caption 屬性就卡關了。

故用 Tabs 和 ListGroup 進行排版,畫面如下:

2020/01/21

【新聞】土耳其教育部添購百萬套Delphi授權



TIMETURK(土耳其官媒)在 2020/01/16 發表關於土耳其教育部購買百萬套 Delphi 授權的新聞。

其中說到土耳其國家教育部(MEB)和 Bilgi ve Teknoloji Grubu (BTG)簽了 5 年約,並購買百萬套 Delphi 授權供 1600 所職校近百萬名學生使用,個人猜測是以教育版為主。

買了這麼多 Delphi 版權是要用在哪裡?

2020/01/17

form + API 的兩種方式比較

一個 form post 也可以繞個一大圈


網頁傳統 form 要傳遞參數值時,會使用 action,寫法大致如下:

  <form action="http://localhost:8080/login" method="post">
    <h1>Form Action Test</h1>
    <input type="text" name="email" value="Eden" />
    <input type="password" name="password" value="L@veEden" />
    <input type="submit" value="Submit">
  </form>

可以看到 submit 時,Request 的 Content-Type 屬性是很標準的 application/x-www-form-urlencoded。



這個方式很標準,絕大部份的 Web Server 都可以接受,當然也包含了 Delphi Web Server。

時代在進步,JavaScript 標準都來到 2020,所以當然要試一下新的操作方法。

JavaScript 裡有 FormData 類別,可以建構 form 物件,寫法如下:

  <form id="login-form" onsubmit="handleSubmit(event)">
    <input type="text" name="email" value="Eden" />
    <input type="password" name="password" value="L@veEden" />
    <input type="submit" value="Submit">
  </form>
  
  <script>
  function handleSubmit(event) {
    event.preventDefault()
    let formData = new FormData(document.getElementById('login-form'))

    fetch("http://localhost:8080/login", {
      method: "POST",
      body: formData
    })
  }
  </script>

實際 submit 時 Request 的 Content-Type 屬性是 multipart/form-data,如下圖所示:




multipart/form-data 相對於 application/x-www-form-urlencoded 比較少見,故某些 Web Server 預設是不會處理 multipart/form-data 的格式內容。

既然後端需要做調整,如果前端事先做好,那後端不就更省事?

前端調整

仿照傳統規則

前端仿照傳統的作法實作,程式碼如下:

  <form id="login-form" onsubmit="handleSubmit(event)">
    <input type="text" name="email" value="Eden" />
    <input type="password" name="password" value="L@veEden" />
    <input type="submit" value="Submit">
  </form>
  
  <script>
  function handleSubmit(event) {
    event.preventDefault()
    let formElement = document.getElementById("login-form")
    let formData = ""
    formData = "email=" + formElement[0].value
    formData = formData + "&password=" + formElement[1].value
    fetch("http://localhost:8080/login", {
      method: "POST",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: formData
    })
  }
  </script>

執行結果


修改後就能讓 Web Server 順利解析參數。

使用 URLSearchParams

URLSearchParams 是個處理各種URL查詢參數轉換的類別,在這個例子只需要將 FormData 再丟入 URLSearchParams 處理過,即能得到 application/x-www-form-urlencoded 所需的查詢參數,程式如下所示:

<html>
<head></head>
<body>
  <form id="login-form" onsubmit="handleSubmit(event)">
    <input type="text" name="email" value="Eden" />
    <input type="password" name="password" value="L@veEden" />
    <input type="submit" value="Submit">
  </form>
  
  <script>
  function handleSubmit(event) {
    event.preventDefault()
    let formData = new FormData(document.getElementById('login-form'))
    var searchParams = new URLSearchParams(formData);
    fetch("http://localhost:8080/login", {
      method: "POST",
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: searchParams
    })
  }
  </script>
</body>
</html>

執行結果


一樣修改後就能讓 Web Server 順利解析參數。


總結

新方法但沿用舊觀念,在某些前端框架看不到的細節還是要拆成香草JS小部件來多做嘗試才行。

前端修改下我會偏好使用 URLSearchParams,在開發上比較省力,程式也比較好懂。

以上提供各位參考。謝謝大家收看!


【2021.05.18 更新】

jQuery 和 form 的結合


<html>
<head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>
</head>
<body>
  <form id="login-form" onsubmit="handleSubmit(event)">
    <input type="text" name="email" value="Eden" />
    <input type="password" name="password" value="L@veEden" />
    <input type="submit" value="Submit">
  </form>
  
  <script>
  function handleSubmit(event) {
    event.preventDefault()
    const formData = {user:document.getElementByName("user").value, password:document.getElementByName("password").value}
	
	// item 的內容也可以用 $.ajax.beforeSend 替換
	const item = {
		'url': "http://localhost:8080/login",
		'type': 'POST',
		'headers': {
		  'Authorization': `Basic ${ base64Auth }`,
		},
		//'contentType': false, // Default = application/x-www-form-urlencoded
		//'processData': false, // false = jq 不轉譯 Json to Parameters; Default=True
		'data': formData
	}

    $.ajax(item)
      .done(function (response) {
        console.log(response)
      })

      .fail(function (response) {
        console.log('Fail : ' + response.responseText)
      })
  }
  </script>
</body>
</html>


【前端】實戰 ASP.NET C# 移轉到 REACT 01

緣起

之前使用 ASP.NET C# WebForm 寫一套公司內部的報修系統,如下圖所示。
但維護上:
  • 遇到 JavaScript Callback hell
  • 在後端上想整合為一套語言,把 Server side 轉到 Client side (後台不需要考慮 SEO 問題)
  • 前端以JavaScript為核心,CSS 就依賴 3rd party 輔助開發。 
  • 這個專案非常小,很適合拿來練手。