SlideShare ist ein Scribd-Unternehmen logo
1 von 40
Downloaden Sie, um offline zu lesen
編程另闢蹊徑
  、     、
介紹與比較
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
介紹如何使用EventBus從後端拿資料後,餵給Grid 呈現

             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));}      Spring Bean
GWT Client    return list;
             }}
                  EventBus                                       8
分頁 Grid 原理說明

Grid 分頁元件提供PageToolBar,可點選下頁,進行指定頁數的限定筆數
讀取,和先前Grid差異就在DataLoader物件不同
private BasePagingLoader createDataLoader() {           傳給Spring的參數
  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()+"");                        Spring回傳資料
    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)); 改從Map取得totalSize
         BasePagingLoadResult b = read(page, resp);
         callback.onSuccess(b);
       }});
  }};
             toolbar = new PagingToolBar(pageSize);
             BasePagingLoader loader = new BasePagingLoader(proxy);
             toolbar.bind(loader);
             return loader;
}                                                                                9
後端Spring元件dejcFormStudyBean
Spring元件已經實作完成,可提供GWT前端進行資料的
CRUD,唯此元件只做示範用途,所以資料僅保存在記
憶體。




             判斷主鍵
             是否存在

                               10
Java 社群拿著 Google Web Toolkit 上雲端




                            11
GWT 個人看法
亮點
將Java轉成JavaScript
IDE支援,Debug、Performance….
跑在JavaScript VM,可用JSNI
所見所得UI,拖拉設計畫面組件


缺點
編譯很花很花時間,需重新編譯整包
有門檻,熟OO,Event-Driven (Swing)


                                   12
M1




     13
參與V8作者,重新開發Dart語言




               14
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
既生瑜,何生亮
JavaScript,Dart


                  16
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




       25
TypeScript 個人看法
亮點
提供OO,本身完全支援JavaScript子集
完整工具支援
更容易整合JavaScript
編譯沒有負擔
缺點
舊的路能走多遠呢?
工具要錢 (不然很可能不是很方便…XD)
現在只是預覽版
是微軟!
                              26
Typescript、Dart




                  27
大家都以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

Weitere ähnliche Inhalte

Ähnlich wie KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較

Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian ShanghaiJackson Tian
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_finalWei Sun
 
Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Wei-Yu Chen
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swttka
 
Using google appengine (2)
Using google appengine (2)Using google appengine (2)
Using google appengine (2)Wei Sun
 
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台Shengyou Fan
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版Jackson Tian
 
Using google appengine_1027
Using google appengine_1027Using google appengine_1027
Using google appengine_1027Wei Sun
 
前端本地应用程序网络
前端本地应用程序网络前端本地应用程序网络
前端本地应用程序网络tblanlan
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践taobao.com
 
程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號鍾誠 陳鍾誠
 
基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册Zhen Li
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)Will Huang
 
部門會議 950619 Leon的錦囊妙計
部門會議 950619 Leon的錦囊妙計部門會議 950619 Leon的錦囊妙計
部門會議 950619 Leon的錦囊妙計Leon Chuang
 
淺談 Groovy 與 Gradle
淺談 Groovy 與 Gradle淺談 Groovy 與 Gradle
淺談 Groovy 與 GradleJustin Lin
 
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)FLASH开发者交流会
 
Big Java, Big Data
Big Java, Big DataBig Java, Big Data
Big Java, Big DataKuo-Chun Su
 
Grails敏捷项目开发
Grails敏捷项目开发Grails敏捷项目开发
Grails敏捷项目开发Michael Yan
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 

Ähnlich wie KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較 (20)

Browser vs. Node.js Jackson Tian Shanghai
Browser vs. Node.js   Jackson Tian ShanghaiBrowser vs. Node.js   Jackson Tian Shanghai
Browser vs. Node.js Jackson Tian Shanghai
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
 
Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計
 
2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt2012 java two-desktop-appliction-using-j-ruby-with-swt
2012 java two-desktop-appliction-using-j-ruby-with-swt
 
Using google appengine (2)
Using google appengine (2)Using google appengine (2)
Using google appengine (2)
 
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
 
D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版D2_node在淘宝的应用实践_pdf版
D2_node在淘宝的应用实践_pdf版
 
Using google appengine_1027
Using google appengine_1027Using google appengine_1027
Using google appengine_1027
 
前端本地应用程序网络
前端本地应用程序网络前端本地应用程序网络
前端本地应用程序网络
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號程式人雜誌 -- 2015 年5月號
程式人雜誌 -- 2015 年5月號
 
基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册基于Eclipse和hadoop平台应用开发入门手册
基于Eclipse和hadoop平台应用开发入门手册
 
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
JavaScript 物件導向觀念入門 v.s. TypeScript 開發實戰 (微軟實戰課程日)
 
部門會議 950619 Leon的錦囊妙計
部門會議 950619 Leon的錦囊妙計部門會議 950619 Leon的錦囊妙計
部門會議 950619 Leon的錦囊妙計
 
淺談 Groovy 與 Gradle
淺談 Groovy 與 Gradle淺談 Groovy 與 Gradle
淺談 Groovy 與 Gradle
 
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
 
Js培训
Js培训Js培训
Js培训
 
Big Java, Big Data
Big Java, Big DataBig Java, Big Data
Big Java, Big Data
 
Grails敏捷项目开发
Grails敏捷项目开发Grails敏捷项目开发
Grails敏捷项目开发
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 

KSDG_007_Web 編程另闢蹊徑-GWT,Dart,TypeScript介紹與比較