🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付

網際網路的開發歷程及網站的誕生

網際網路的起始可以追溯到1969年。
美國國防部的ARPA(高級研究計畫署)首次連接了四台電腦,開始了這一切。這些電腦分別來自三所大學及史丹佛研究所(SRI)等研究機構,稱之為ARPANET。

當時正值冷戰期間,網際網路主要是供研究機構和軍方使用。

在這之後,發生了許多歷史事件,不過這裡就不贅述了。


自從網際網路啟動後的 20年後的1989年,CERN(歐洲核子研究組織,以LHC的大型強子對撞機而聞名)的研究員蒂姆·伯納斯-李提出了 WWW(全球資訊網) 的概念。
而且, HTML也在這時發明! 這也是網頁瀏覽器誕生的時刻。

HTML 的基礎構想是在1989年提出的
HTML 1.0的規範於1993年公開

在此之前,要在網際網路上獲取信息需要透過鍵盤輸入指令,但從這時起,首次實現了只需一個滑鼠點擊的操作。


1993年,名為Mosaic的軟體誕生,讓使用者能夠瀏覽WWW。
這使得WWW的流量在一年內增長了3000倍。

自從國防部開發網際網路以來整整24年,網際網路才終於被認可為民眾可以使用的工具。
若想想網際網路自開放給大眾使用至今僅約30年,實在是相當短暫的歷史。

順便提一下,Internet Explorer在1995年發佈。
對於閱讀Qiita的朋友來說,當時可能有不少人已經接觸過電腦。

CGI的到來!動態內容的時代

1993年,引入了Common Gateway Interface(CGI),這是一種讓網頁伺服器執行外部程式的機制。
在此之前,網頁只能顯示靜態內容,但引入CGI後,網頁可以進行動態操作。

由此,Perl和C語言可以在網頁上執行,各種服務應運而生。

較具代表性的例子包括

  • 電子公告板
  • 部落格系統
  • 訪客計數器

這三項服務猶如五光十色的1990年代末到2000年代的縮影。

CGI是任何程式語言都可以使用,並且具備極高的靈活性
然而,相對的,因為每次請求都需要啟動新進程而導致重負,當請求量大時性能下降也是它的缺點。

隨著網頁規模的擴大,對於更快速、更安全、更有組織的開發需求愈加迫切。

伺服器與JSP:Java網頁開發的進化

伺服器和JSP是長期以來在 Java 領域用於開發網頁應用的重要機制。

伺服器是什麼

伺服器是運行於網頁伺服器上的 Java 程式。當瀏覽器發來請求時,它會啟動並返回響應。

與CGI最大的不同在於,它可以常駐使用。
伺服器常駐於記憶體中,通過線程處理,因此速度快、輕量且高效。

此外,它不依賴於特定平台,使得使用起來更加方便。
伺服器的大致工作流程如下:

  • 接收請求
  • 讀取參數
  • 如有需要,查詢資料庫
  • 返回結果作為響應

從表面上看似乎方便,但在早期的伺服器開發中,通常是將HTML作為字串組合進Java程式碼中,導致顯示部分相當混亂及難以操作。

特別是在多人協作開發的情況下,設計人員希望更改外觀的情況下,與控制功能的程式設計師之間的差異會造成困難。

以下是一段示範代碼:

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {

    String name = req.getParameter("name");
    if (name == null || name.isBlank()) {
      name = "Guest";
    }

    resp.setContentType("text/html; charset=UTF-8");

    try (PrintWriter out = resp.getWriter()) {
      // 這部分是HTML
      out.println("<!doctype html>");
      out.println("<html lang=\"ja\">");
      out.println("<head><meta charset=\"UTF-8\"><title>Hello</title></head>");
      out.println("<body>");
      out.println("<h1>Hello, " + escapeHtml(name) + "</h1>");
      out.println("</body></html>");
    }
  }
}

透過目標代碼可以看到,HTML被存放於Java中。如果想要修改HTML,卻不知道怎麼操作的話,對於沒有Java知識的人來說實在很困難。

解決這個問題的就是JSP。

JSP是什麼

JSP是JavaServer Pages的縮寫,基於HTML,僅在需要的地方嵌入Java的處理過程。

示範代碼如下所示:

<%@ page contentType="text/html; charset=UTF-8" %>
<%
  String name = request.getParameter("name");
  if (name == null || name.isBlank()) {
    name = "Guest";
  }
%>
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Hello</title>
</head>
<body>
    <!-- 包圍的部分作為Java執行 -->
  <h1>Hello, <%= org.apache.commons.text.StringEscapeUtils.escapeHtml4(name) %></h1>
</body>
</html>

伺服器是 「在Java程式碼中埋入HTML」
而JSP則是 「在HTML中埋入Java程式碼」
這樣的說明會更清楚吧。

這樣一來,可以在顯示更接近的地方進行顯示製作,特別是對設計師和前端相關的開發人員來說顯得更為友好。

函式庫和框架的出現:更加高效的開發

由於伺服器和JSP的引入,各種開發變得可能且非常便利。

然而,從零開始編寫所有程序是極其困難的。這將耗費大量時間,並導致驚人的代碼量。

隨之而來的問題也有以下幾種。

  • 畫面遷移和路由分散的問題
  • 共用處理的代碼四處可見的問題
  • 顯示和處理混合造成的混亂問題
  • 例外處理、認證、輸入檢查的訣竅難以統一問題

為了解決這些問題,所需的概念就是重用。
常用的處理被稱為 「函式庫」,成為程式設計部件,以避免不斷重寫相同的程序。這一思想早就已經被廣泛採用。

這一思想進一步深化,增加了可重用的部件,建立了便捷的應用程式開發基礎,這便是 「框架」
使用框架後,可以在此基礎上添加必要的部分,快速開發出理想的應用程式。

結語

我們粗略地回顧了ARPANET到WWW的誕生,以及CGI引入動態內容,再到伺服器和JSP的流轉。

網頁一開始僅是「顯示資訊的機制」,最終發展成為「接受用戶輸入、進行處理並返回結果的機制」。在這一過程中,性能、可維護性和分工等現實課題隨之增加,經過伺服器提高處理速度,JSP在顯示端的易用性上弥补,進行了一系列的改進。

隨著規模的進一步擴大,開始出現從零開始撰寫所有畫面遷移、共同處理、認證和例外處理的極限。這時,重用的思想開始得到強化,函式庫和框架作為基礎進行整合,開發方式轉向即使在團隊合作中也不易出現崩潰。

當然,您現在所打開的這一頁,也確實是經過漫長歲月的試探及探索而逐步形成的成果。


原文出處:https://qiita.com/shibata1111/items/1403f6be43bad5d085b3


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝6   💬4   ❤️2
146
🥈
我愛JS
💬1  
6
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
🔧 阿川の電商水電行
Shopify 顧問、維護與客製化
💡
小任務 / 單次支援方案
單次處理 Shopify 修正/微調
⭐️
維護方案
每月 Shopify 技術支援 + 小修改 + 諮詢
🚀
專案建置
Shopify 功能導入、培訓 + 分階段交付