前端的發展和未來趨勢

来源:https://www.cnblogs.com/powertoolsteam/archive/2019/11/01/11777375.html
-Advertisement-
Play Games

本文由葡萄城技術團隊於博客園原創並首發 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 前端技術的發展日新月異,過一段時間就會出現新的框架、工具、插件,伴隨著十幾年的發展,前端領域已經告別了野蠻生長的時期,越發表現出成熟和現代化,引領了整個技術行業的潮流, ...


本文由葡萄城技術團隊於博客園原創並首發

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

 

前端技術的發展日新月異,過一段時間就會出現新的框架、工具、插件,伴隨著十幾年的發展,前端領域已經告別了野蠻生長的時期,越發表現出成熟和現代化,引領了整個技術行業的潮流,那麼讓我們在文中過一遍前端發展中一些重要的節點。

前端是什麼?

針對瀏覽器開發,代碼在客戶端瀏覽器運行。

 

前端“三劍客”

這裡提到的“三劍客”指的不是某公司出品的三個產品,而指的是在前端開發過程中用到的三種技術:HTML、CSS、JavaScript。

 

HTML:

是HyperText Markup Language的縮寫, HTML是前端開發的基礎,用戶看到網頁中的結構和基礎樣式都是由HTML來提供的,目前HTML的標準已經於2014年被推進到了HTML5。

 

CSS:

是Cascadeing Style Sheets的縮寫,它能對網頁中的元素位置、排版、外觀進行精準的像素級控制,能夠為用戶提供更豐富的網頁樣式呈現。

 

JavaScript:

JavaScript 一個客戶端腳本語言,作為一個弱類型語言,它能為網頁用戶增加一些有限的動態交互效果。

 

小前端時代

隨著JavaScript被髮明,前端開發進入了小前端時代,那麼JavaScript為什麼會被髮明出呢?

1995年,網上衝浪開始興起,但當時用戶還是通過一條28.8 kbit/s的數據機連接互聯網,例如用戶如果要簡單的做註冊表單驗證,和伺服器交互一輪就需要近30秒。讓我們試想一下,在經過了半分鐘的等待後,伺服器告訴你你的一個欄位忘填了,是怎樣的一種心情。

 

(圖片來自網路)

 

所以基於客戶端運行的腳本語言需求逐漸增大,由Netscape於1995年開發的JavaScript前身LiveScript應運而生,後來為了傍Java這個時髦辭彙,LiveScript更名為了JavaScript。有了JavaScript 客戶端也可以做邏輯判斷,動態交互等行為。

所以由HTML為骨架、CSS為外貌、JavaScript為交互的搭配正式被固定下來了。後來隨著Ajax技術的興起,Web由1.0時代,邁入了2.0時代,web頁除了基礎的內容展示功能外,還具備了數據處理、動態效果、優秀的用戶體驗等功能。

 

大前端時代

隨著對前端動效、數據交互的需求量越來越強,jQuery跨瀏覽器的工具庫應運而生,它為Web帶來了新的活力,使開發者能更方便的開發操作DOM,數據交互,動態交互等行為,開發者的思路被進一步打開。

後來,谷歌V8引擎發佈,Node誕生,為前端開發提供了使用同一語言實現全棧開發的機會(JavaScript不再是一個只能寫頁面交互的前端語言)。隨後React、Angular、Vue 等 MVVM 前端框架的出現,使前端實現了項目真正的應用化。前端迎來了大前端時代,前端開發的從業者也終於告別了 “切圖仔”的稱謂,因為他們有了全新的職稱“前端開發工程師”。

2009年開始,大屏智能手機開始陸續出現,到後來進入了4G時代, 人們對Web產品的要求和期望越來越高,Web開發從業者不僅需要面對的是PC端單方面的需求,甚至在面對移動端、PWA(小程式)、app hybird平臺的需求也成了家常便飯。

因為業務需求的不斷變化,這導致了Web應用需要不斷的提升迭代開發的速度,縮短髮布周期。這一點企業中的開發者也在同樣面對著。同時,一位名叫Issam Elbaytam的美國工程師也同樣註意到了,他曾多年在.NET領域持續積累,曾設計、開發了多款知名.NET控制項,面對這樣的技術風口,他在想現在既有的.NET控制項是不是可以全面轉到前端平臺上?

帶著這樣的問題,他投入了新產品的設計、開發工作中,開發過程中他也註意到了,大部分用戶在處理數據、統計數據時,還是更習慣於使用Excel來做,Excel憑藉著出色的計算性能、直觀的數據分析和圖表成為數據統計領域不可或缺的軟體之一。但同樣Excel也具有它的短板,例如:和企業已有應用接駁困難、無法完全脫離Office套件、高昂的授權價格、無法分散式修改數據等。

在瞭解了這些短板後,他開始想是不是可以用純JavaScript開發一套和Excel類似的開發工具供開發者使用,這樣全面滿足了用戶進一步把應用遷移B/S的需求,也可以完全脫離Office套件使用,同時也降低了因為快速迭代的發佈周期。終於,在2015年,經過了幾年的開發,SpreadJS終於應運而生。藉助SpreadJS,用戶可以以不到100行代碼即可在前端實現Excel全部功能,並可以實現一次開發,多端使用的目的。

迄今已為國內外知名企業和機構的服務賦能,例如:天弘基金、華為、中國平安、招商銀行、騰訊、蘇寧易購等,為他們實現了Web Excel組件開發、數據填報、線上文檔、圖表公式聯動、數據可視化等核心業務場景。

 

 

過幾天,我們將會邀請Issam Elbaytam為我們帶來一場線上直播,日期會在2019-11-20(星期三) 下午14:00準時開始,報名地址:https://live.vhall.com/347833693

由他來為我們講講他為何如此痴迷於技術研究,他的初心是什麼,面對當今大熱的HTML5、JavaScript,以及區塊鏈等新興技術,他又有哪些不同的看法和觀點呢?

葡萄城員工對Issam Elbaytam的評價:

  • Allan:“他是我所認識的25年來每天只休息4小時,除了日常休息時間,其他時間不是在研究技術和產品,就是在去研究技術發展趨勢的路上。 ”
  • Zenos:“開著保時捷上班的技術大佬,對技術和產品的研究非常狂熱,是一位超級酷的Geek,甚至車牌都是“CODE”。“
  • Mark:“原先是Data Dynamics 創始人,曾開發出與水晶報表市場表現不分伯仲的標桿產品ActiveReports。”
  • Willie:“現任葡萄城全球首席架構師的Issam Elbaytam是一位非常牛的人,負責葡萄城全球產品線的架構設計,30多年開發經驗,是我所知的一位優秀的全棧開發工程師。”

總結

Issam 坦言道,“中國開發人員喜歡使用最新和最好的技術, SpreadJS一定會為他們的項目提供強大的支撐,併在財務、預算、工程、統計等領域的信息系統開發中,通過強大的計算引擎和靈活的數據可視化呈現,為商業表單控制面板提供更為豐富、有效的內容信息。”。

隨著JavaScript和瀏覽器的不斷發展,基於Web應用程式的系統開發提供了良好的性能支持和運行環境基礎。相信隨著未來前端技術的發展,以及不斷更新迭代的Web程式集,這些技術將為用戶提供更加前所未有且越來越強大的解決方案。他對未來前端領域的發展也充滿了期待。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Emmet語法 1. Emmet語法前身是Zen coding,他使用縮寫來提高html、cssde編寫速度 2. 快速生成HTML結構語法 生成標簽:直接輸入標簽名,按tab鍵 如果想要生成多個相同的標簽,加上“ ”就可以了,比如 div\ 3 tab,就可以快速生成3個div標簽 如果父子級關係 ...
  • 下麵的代碼,我想要列印出hey jack,結果卻列印出hey rose,為什麼? 這裡問題出在{ name: 'jack' } != { name: 'jack' }。對象是複雜數據類型,複雜數據類型的值存儲在堆記憶體,棧記憶體儲的是複雜數據類型的地址(地址指向真實數據),當比較兩個對象時,JavaSc ...
  • ![](https://img2018.cnblogs.com/blog/611735/201911/611735-20191101191045185-170636664.jpg) ...
  • 數組的基礎方法, 將有序數組進行隨機排序. 主要應用於視頻的隨機展示 ...
  • [toc] 前言 “迴流(重排)”和“重繪”基本上算是前端的高頻詞之一,你可以在各個文章及面試題中見到,我們在討論這個詞的時候,其實討論的是瀏覽器的渲染流程。 所以在討論“迴流重繪”之前,我們還需要掌握一些知識;在它之中,我們還需要更深入一點;在這之後,我們還要懂得怎麼去把理論結合到項目實踐中去。 ...
  • 1、安裝庫 npm install typings echarts --global npm install ngx-echarts --save npm install @types/echarts --save 2、app.module引入 import { BrowserModule } fr ...
  • 遞歸和閉包作為js中很重要的一環,幾乎在前端的面試中都會涉及,特別閉包。今天前端組的組長冷不丁的問了我一下,粗略的回答了一下,感覺不太滿足,於是重新學習了一下,寫下本篇。 在說這個兩個概念之前,我們先回顧一下函數表達式。 function實際上是一種引用對象,和其他引用類型一樣,都有屬性和方法。定義 ...
  • 為什麼我想要使用redux? 前段時間初步上手了react,最近在使用react的過程中發現對於組件之間通信的需求比較迫切,尤其是在axios非同步請求後端數據的時候,這樣的需求是特別強烈的!舉個例子: // 廠家報告到貨 class ReportArrivalGoods extends React. ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...