Post on 29-Jun-2015
編程另闢蹊徑
、 、介紹與比較
GWT、Dart、TypeScript介紹
個人看法 & 大家討論
未來性發展
2
以下介紹按先後發佈順序介紹
3
4
5
GWT 歷史回顧
GWT 1.0 (2006)
GWT 1.3 (2007) First Open Source Release, OSX support
GWT 1.4 (2007) JUnit and ImageBundle
GWT 1.5 (2008) Java 1.5 support, Overlay Types, DOM API, CSS Themes, Linkers
GWT 1.6 (2009) EventHandlers, EMMA Support, WAR support, Parallelized Builds
GWT 1.7 (2009) Newer browser support, IE8, GPE and AppEngine
GWT 2.0 (2009) DevMode, DraftCompile, UIBinder, LayoutPanel, CodeSplitter, ClientBundle, CssResource
GWT 2.1 (2010) RequestFactory, Editor Framework, Validation, MVP, Cell Widgets
GWT 2.2 (2011) GWT Designer, HTML5 support
GWT 2.3 (2011) Better AppEngine integration
GWT 2.4 (2011) Maven and RequestFactory enhancements
GWT 2.5 (2012) Super Dev Mode、Elemental (experimental)
6
GWT 亮眼事蹟
SDK downloaded over 1 million times
100,000+ Active Developers
Deep Integration with Eclipse, IntelliJ, Spring STS/Roo
Used by Google products such as AdWords, Flights, Wallet
Fun things: GwtQuake, Angry Birds for the Web
GWT Today is a mature, high quality, code base.
7
分頁 Grid
8
介紹如何使用EventBus從後端拿資料後，餵給Grid 呈現
GWT Client Spring Bean
EventBus
public class dejcGridBean { List data = new ArrayList(); {for (int i = 1; i <= 500; i++) { data.add(createVO("使用者" + i, "000" + i));}}
// 取得指定起始和限定筆數 public List page(Map info) {
int offset = Integer.parseInt(info.get("offset")+""); int limit = Integer.parseInt(info.get("limit")+""); List list = new ArrayList(); Map rtn = new HashMap(); rtn.put(" totalSize" , data.size());
list.add(rtn); //放入回傳筆數 for (int i = offset; i < (offset + limit); i++) {list.add(data.get(i));} return list; }}
private BasePagingLoader createDataLoader() { RpcProxy proxy = new RpcProxy() { public void load(Object loadConfig, final AsyncCallback callback) { page = (PagingLoadConfig) loadConfig; para.put("offset", page.getOffset()+""); para.put("limit", page.getLimit()+""); EventBus.get().publishRemote(new EventObject(eventId, para), new EventProcess() { public void execute(String eventId, EventObject eo) { List resp = eo.getInfoList(); totalSize = Integer.parseInt((String) resp.remove(0)); BasePagingLoadResult b = read(page, resp); callback.onSuccess(b); }}); }};
toolbar = new PagingToolBar(pageSize); BasePagingLoader loader = new BasePagingLoader(proxy); toolbar.bind(loader); return loader; } 9
Grid 分頁元件提供PageToolBar，可點選下頁，進行指定頁數的限定筆數讀取，和先前Grid差異就在DataLoader物件不同
分頁 Grid 原理說明
傳給Spring的參數
Spring回傳資料
改從Map取得totalSize
後端Spring元件dejcFormStudyBean
10
Spring元件已經實作完成，可提供GWT前端進行資料的CRUD，唯此元件只做示範用途，所以資料僅保存在記憶體。
判斷主鍵是否存在
11
Java 社群拿著 Google Web Toolkit 上雲端
GWT 個人看法
亮點
將Java轉成JavaScript
IDE支援，Debug、Performance….
跑在JavaScript VM，可用JSNI
所見所得UI，拖拉設計畫面組件
缺點
編譯很花很花時間，需重新編譯整包
有門檻，熟OO，Event-Driven (Swing)
12
13
M1
14
參與V8作者，重新開發Dart語言
Dart
A simple and unsurprising OO language
Class-based single inheritance with interfaces
"Coming from C#, Dart feels natural"
"Likely to appeal to Java and JS developers"
Optional static types
Real lexical scoping (block, method, param, class, lib)
Single threaded*
Syntactic sugar
15
16
既生瑜，何生亮 JavaScript，Dart
Dart官方說法
Dart有VM，不是要取代JavaScript，而是嘗試從不同角度看Web開發這事
17
Dart
18
Google內部對打…
19
20
這樣應該很明顯了…
最適合開發Web的語言
21
其實 Dart 內心OS…幹掉它
22
Dart 個人看法
亮點
語法看來不錯
有完整設計工具
針對Web的編程語言
有自己的VM，速度很快很快!?
缺點
要編譯成JavaScript，誰知道會有哪些問題?
和JavaScript交互有些麻煩，不直覺
會不會又變成棄嬰 ?
23
TypeScript For JavaScript Programmers
24
TypeScript 個人看法
亮點
提供OO，本身完全支援JavaScript子集
完整工具支援
更容易整合JavaScript
編譯沒有負擔
缺點
舊的路能走多遠呢?
工具要錢 (不然很可能不是很方便…XD)
現在只是預覽版
是微軟! 26
27
Typescript、Dart
大家都以Browser為中心
28
未來發展
GWT
如果很熟Java，不熟JavaScript，短時間要做到RIA，選它就對了
29
未來發展
GWT
JavaScript很值得學習，遲早要打交道
30
未來發展
GWT
出來混(Web)，遲早都要還(JavaScript Skill)
31
未來發展
Dart
很好的程式語言，完整工具支持，值得玩看看
32
未來發展
Dart
如果有3~5年計畫，可以衝衝看!
33
未來發展
TypeScript
讓JavaScript如虎添翼!!!
34
未來發展
TypeScript
OpenSource、微軟強大支持~
35
未來發展
TypeScript
會朝向ECMA6標準前進
36
語法亮點
37
擁有套件
38
未來發展
39
40