前言:css
在看這邊文章前,能夠建議看下:圖形界面操做系統發展史——計算機界面發展歷史回顧html
從CS到BS,如今的前端開發,其實也是GUI開發範疇。現今前端
HTML&CSS,Winform&WPF,Universal Windows APP,JAVA GUI, Android,iOS……java
不一而足,先讓咱們看看react
我以爲java是最好學的語言。也是像我這種非科班出生的,踏入碼農行業的敲門磚(看C c++ 學了一年,也就hello word,會寫幾個demo界面)。android
作java開發,從AWT/Swing、SWT/JFace,這個有IBM的大佬總結,傳送門:https://www.ibm.com/developerworks/cn/java/j-gui/ios
我以爲,不管是c仍是java,仍是 後面的hmlt ,UI開發 總能夠借鑑基本的 Swing Class 樹c++
Object *Component Container *JComponent *AbstractButton JButton JMenuItem JCheckBonMenuItem JMenu JRadioButonMenuItem *JToggleButton JCheckBox JRadioButton Box Filler JColorChooser JComboBox JDesktopIcon JFileChooser JInternalFrame JLabel JLayeredPane JDesktopPane JList JMenuBar JOptionPane JPanel JPopupMenu JProgressBar JRootPane JScrollBar JScrollPane JSeparator JSlider JSplitPane JTabbedPane JTable JTableHeader *JTextComponent JEditorPane FrameEditorPane JTextPane JTextArea JtextField JPasswordField JToolBar JToolTip JTree JViewport ScrollableTabViewport Panel Applet JApplet Window Dialog JDialog Frame JFrame JWindow
Winform是XP時代的Windows 桌面程序開發技術。web
採用C#語言開發UI和邏輯,沒有使用標籤語言寫UI。chrome
採用事件驅動方法。
Winform如今基本被淘汰了。
Winform是上一代的主流桌面應用程序開發開發技術,這個我歷來沒有用過,如今也基本再也不使用了。
WPF是新一代微軟圖形界面開發技術。它是隨着Windows Vista推出的。.NET Framework 3.0的一部分。它提供了統一的編程模型、語言和框架,真正作到了分離界面設計人員與開發人員的工做;同時它提供了全新的多媒體交互用戶圖形界面。
採用XAML標籤式語言開發UI,能夠在Expression Blend可視化設計開發。美工也能夠輕易上手。XAML支持DataBind, Data(Item)Template, Style, Storyboard, Rescoure,自定義控件等技術,開發速度快。
支持事件驅動(Code behind)或者數據驅動(MVVM)開發模式
使用GC回收垃圾,XMAL和C#將編譯成CLR中間運行語言,效率比較低,佔用內存大
WPF的技術理念很是先進,開發過程也很是友好,也能夠作出極爲絢麗的界面,但是開發出來的應用體積較大,運行效率比較低,佔用內存大,因此沒有普及開來。(大部分咱們常見的桌面應用都是C&C++開發)可是由於開發效率高,因此不少企業內部常用該技術。
Universal Windows App(UWP)也就是通用Window App 是微軟最新的圖形應用開發技術,它是基於WPF技術演進而來的。
UWP繼承了全部WPF的優勢,還可使用C++和HTML&Javascript來開發,和WPF編譯成中間代碼不一樣,UWP直接將代碼編譯成機器碼直接運行,極大的提升了效率。一次開發編譯,能夠同時在Windows 10,Windows 10 Mobile, XBOX,物聯網IoT設備等其餘Windows平臺上運行
採用和iOS APP同樣的沙盒機制,同樣也有電話本,傳感器,地圖,推送等API。
採用響應式佈局,能夠適配任何分辨率等。
大量使用異步API,保證界面響應爲最高級別。
我開發UWP並很少,可是我接觸WPF的時間夠長,因此UWP上手毫無壓力。相比WPF運行在.NET運行時裏,UWP是能夠編譯成Native Code運行,因此UWP運行效率更高,UI更爲流暢。它是目前微軟最爲主推的開以技術。
android開發,主要一xml來作界面(固然蛋疼手工寫也能夠。
一個界面xml對於一個active,active與active 橋接intent ,
可是,我更加喜歡iOS的界面開發模式(storybord,因此這裏略過。
不過我以爲會ios開發的,上手android開發業不難
iOS應用是基於Cocoa框架上的,早期的Cocoa是用來開發Mac 應用的,後來加入了Cocoa touch層API用於iOS。
採用XIB或者Storyboard可視化搭建UI,也可使用手寫純代碼來開發UI。
採用Objective C 或者 Swift語言開發邏輯。
在Iphone5 加入多種分辨率後,蘋果引入了Autolayout自動佈局,它是一種基於約束的,描述性的佈局系統。
默認嚴格遵照MVC設計模式,現以也可使用MVVM開發框架。
採用ARC實現了自動內存管理。
iOS開發技術還有許多要點,這裏就省略了,相信看到這篇文章的人都比較熟悉。
各平臺UI開發小結
從上面能夠看出,對於UI構建,都是採用類HTML語言。一個HTML標籤表示一個View元素。它便可以當其餘View的容器,也能夠當內容或者數據的容器。能夠用獨立的Style文件來表示樣式,也能夠直接放在標籤的屬性裏面。每一個標籤均可以有Name或者id屬性來讓js或者其餘語言直接操做。
iOS其實也和上面的UI開發範式差很少,Storyboard內部其實也是一個XML文件,只不過咱們不能直接編輯,只能可視化設計和經過代碼操做。
Web界面是以HTML標籤的形式構建UI,它是HTML語言的最基本的單位。
用尖括號包圍的關鍵詞如
來表示UI元素,一般是成對出現。
若是須要在容器標籤裏放其餘HTML單位,須要放在標籤對裏面。
一些HTML元素屬性,放在第一個HTML標籤裏。以鍵值對的形式存在,好比type = 'text'。
使用Form來提交表單,Http(HTTPS)協議和服務器通信。
一般經過CSS來控制HTML元素的外觀。
一般經過Javescript來控制HTML元素。採用Ajax技術異步通訊,實現局部刷新等。
這裏就不給示例了,老是來講前端Web開發博大精深,新的技術框架層出不窮,當一個前端工程師也不容易。
從backbone,angular,到如今react+redux ,層出不窮,疲於奔命。你學了ie,還有firefox,還有chrome,……
一如前端深似海。
可是,前端的好處就是,統一GUI開發。我並不喜歡RN的開發模式,以爲仍是
html+css+js 本身定製webkit殼,而後,你想怎麼玩就怎麼玩。(俗話中webapp……
吃飯去了,不扯了……