SlideShare a Scribd company logo
1 of 95
改名字



   PYJAMAS (PYJS)
 A Python Web Application Framework
Rasiel Chang - CTO of Fliper Creative Inc.
python        創業




         HI        Jamie
                   appworks
python           創業




           HI         Jamie
                      appworks



         I’m Rasiel
WHAT IS PYJAMAS (PYJS)?




Pyjamas is a Rich Internet Application (RIA) Development
Platform for both Web and Desktop.
WHAT IS PYJAMAS (PYJS)?




Pyjamas is a Rich Internet Application (RIA) Development
Platform for both Web and Desktop.
OUTLINE

• 為什麼要使用Pyjamas?


• 如何使用Pyjamas?


• HAPPY   ENDING
OUTLINE

• 為什麼要使用Pyjamas?


• 如何使用Pyjamas?


• HAPPY   ENDING ?
為什麼要使用Pyjamas?
去年二月創
        python做網站


前後端
Web後端
Web前端       Web後端



?       +
Web前端       Web後端



        +
Web前端                 Web後端



Google Web Toolkit
     (GWT)
                     +
Web前端       Web後端



        +
PURE WIN
Web前端              Web後端



          +
PURE WIN
Web前端              Web後端



           +
 用python   寫網站的前後端!
除了懶以外
SINGLE-PAGE APPLICATION
SINGLE-PAGE APPLICATION



為了取得最好的User Experience!
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!

    T ML
H
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
           Javascript

    T ML
H
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
           Javascript

    T ML
H

                    AJAX
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
           Javascript      JSON

    T ML
H

                    AJAX
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
               Javascript          JSON

    T ML
H
               Iden tifier
           ent
 F ragm                     AJAX
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
               Javascript           JSON

    T ML                                       gins
H                                        r plu
                    tifier             wse
               Iden                Bro
           ent
 F ragm                     AJAX
SINGLE-PAGE APPLICATION

為了取得最好的User Experience!
為什麼要使用Pyjamas?
為什麼要使用Pyjamas?

•可以只用python完成網站前後端
為什麼要使用Pyjamas?

•可以只用python完成網站前後端

•較容易實作Single-Page Application
為什麼要使用Pyjamas?

•可以只用python完成網站前後端

•較容易實作Single-Page Application

•跨瀏覽器相容
如何使用Pyjamas?
HELLO WORLD!
用python   寫網站前端程式!
HELLO WORLD!


         模組化
Button




Button
Content




Content
Add
Add




RootPanel
CSS class




style
?
?

click
click handler
click handler
???
in   ?
in   ?
in   ?
in   ?


+
in        ?


+        in
output
output
output
output
output
HOW BROWSER LOAD PAGE



      讀取                和
           Hello.html       bootstrap.js
HOW BROWSER LOAD PAGE

       讀取                和
            Hello.html        bootstrap.js

                             載入

                         Hello.nocache.html
HOW BROWSER LOAD PAGE

                              讀取                         和
                                            Hello.html        bootstrap.js

                                                             載入
  Hello.ie6.cache.html

                  Hello.opera.cache.html     依照瀏覽器讀取     案

Hello.mozilla.cache.html
                                                         Hello.nocache.html

                  Hello.safari.cache.html

Hello.oldmoz.cache.html
HOW BROWSER LOAD PAGE

                              讀取                         和
                                            Hello.html        bootstrap.js

                                                             載入
  Hello.ie6.cache.html

                                    案!
                  Hello.opera.cache.html     依照瀏覽器讀取     案

                 應 用的
  正 執行
Hello.mozilla.cache.html
                                                         Hello.nocache.html
真
                  Hello.safari.cache.html

Hello.oldmoz.cache.html
如何使用Pyjamas?
如何使用Pyjamas?
•使用pyjamas提供的元件 寫python 案
(當然你也可以自行定義)
如何使用Pyjamas?
•使用pyjamas提供的元件 寫python 案
(當然你也可以自行定義)
•將靜態的html和css放在public資料夾內
如何使用Pyjamas?
•使用pyjamas提供的元件 寫python 案
(當然你也可以自行定義)
•將靜態的html和css放在public資料夾內
•使用pyjamas提供的pyjsbuild編譯python
 案產生html以及javascript
HAPPY ENDING
?
HAPPY ENDING
output
output
output




案較為龐大
SEO?
SEO?

在搜尋引擎眼裡
SEO?

在搜尋引擎眼裡




在我們眼裡
SEO?

在搜尋引擎眼裡


因為是動態產生所以SEO不佳

在我們眼裡
DEBUG?
DEBUG?
DEBUG?
DEBUG?
DEBUG?




         生e rror!
    不 會產
DEBUG?




         生e rror!
    不 會產
DEBUG?



Debug比較困難

            生e rror!
      不 會產
HAPPY ENDING?
HAPPY ENDING?

Single-Page Application
HAPPY ENDING?

Single-Page Application



       Ye s
HAPPY ENDING?

Single-Page Application   Normal web page



       Ye s
HAPPY ENDING?

Single-Page Application   Normal web page



       Ye s                   N o
rasiel@fliper.cc
rasiel@fliper.cc

pyjamas(pyjs)
http://pyjs.org
rasiel@fliper.cc

pyjamas(pyjs)            fliper
http://pyjs.org   http://app.fliper.cc
REFERENCE
•   pyjamas(pyjs)官方網站
    http://pyjs.org

•   Pyjamas + Django = Pure Win
    http://www.derekschaefer.net/2011/02/08/pyjamas-django-pure-win/

•   Single-page application wiki
    http://en.wikipedia.org/wiki/Single-page_application

•   Django官方網站
    https://www.djangoproject.com/

•   Google Web Toolkit(GWT)
    https://developers.google.com/web-toolkit/overview

More Related Content

Similar to 201206010 pyjamas final

網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630Yeh Yung-Hsin
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展agen
 
Mojito 開發 mobile web 實戰經驗談
Mojito 開發 mobile web 實戰經驗談Mojito 開發 mobile web 實戰經驗談
Mojito 開發 mobile web 實戰經驗談Yu-Wei Chuang
 
Django入门
Django入门Django入门
Django入门oikomi
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_finalWei Sun
 
實戰流網站優化 – 治國篇
實戰流網站優化 – 治國篇實戰流網站優化 – 治國篇
實戰流網站優化 – 治國篇煜庭 邱
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践Mingel Zhang
 
Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南YUCHENG HU
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0soboring
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践alvis-m
 
China PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 pptChina PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 pptXinchen Hui
 
Lazyload实践
Lazyload实践Lazyload实践
Lazyload实践Wu tianhao
 
模块化和组件化Css
模块化和组件化Css模块化和组件化Css
模块化和组件化CssWu tianhao
 
天鹅绒围脖
天鹅绒围脖天鹅绒围脖
天鹅绒围脖Liu Chao
 
构建网络工具箱
构建网络工具箱构建网络工具箱
构建网络工具箱Lv Jian
 
Flash RIA Usability
Flash RIA UsabilityFlash RIA Usability
Flash RIA Usabilitynbaction
 

Similar to 201206010 pyjamas final (20)

網頁開發工具 20140630
網頁開發工具 20140630網頁開發工具 20140630
網頁開發工具 20140630
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
 
Mojito 開發 mobile web 實戰經驗談
Mojito 開發 mobile web 實戰經驗談Mojito 開發 mobile web 實戰經驗談
Mojito 開發 mobile web 實戰經驗談
 
Django入门
Django入门Django入门
Django入门
 
Using google appengine_final
Using google appengine_finalUsing google appengine_final
Using google appengine_final
 
實戰流網站優化 – 治國篇
實戰流網站優化 – 治國篇實戰流網站優化 – 治國篇
實戰流網站優化 – 治國篇
 
Html5
Html5Html5
Html5
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践
 
Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南Presta shop 1.6 详细安装指南
Presta shop 1.6 详细安装指南
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0
 
淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践淘宝彩票移动项目开发实践
淘宝彩票移动项目开发实践
 
China PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 pptChina PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 ppt
 
Lazyload实践
Lazyload实践Lazyload实践
Lazyload实践
 
模块化和组件化Css
模块化和组件化Css模块化和组件化Css
模块化和组件化Css
 
天鹅绒围脖
天鹅绒围脖天鹅绒围脖
天鹅绒围脖
 
构建网络工具箱
构建网络工具箱构建网络工具箱
构建网络工具箱
 
漫谈web前端
漫谈web前端漫谈web前端
漫谈web前端
 
Flash RIA Usability
Flash RIA UsabilityFlash RIA Usability
Flash RIA Usability
 
Flash ria usability 刘轩飞
Flash ria usability 刘轩飞Flash ria usability 刘轩飞
Flash ria usability 刘轩飞
 

201206010 pyjamas final

Editor's Notes

  1. 很高興今天來到pycon和大家介紹pyjamas, 對於需要寫網站前端的程式設計師來說,它是一個很棒的工具。\n它以前的名字叫做pyjamas,也就是睡衣,不過在今年之後已經將名字改成pyjs,並且換了一批新血加入,所以我相信接下來他會越來越好。\n
  2. 我是Rasiel,目前和朋友一起創業,公司名稱是Fliper creative,也正在mr jamie的appworks接受育成。\n第一次聽到python是在兩年前我的好朋友cody大大在唸研究所介紹給我使用,但是當時我沒聽進去,是一直到畢業後進入IBM開始才正式的使用python。\n廢話不多說,我們就立刻進入正題吧,來聊聊什麼是Pyjamas。\n
  3. Pyjamas是一個framework,用來設計Rich Internet Application,使用pyjamas編譯出來的應用不只是可以跑在網頁上,還可以在一般本機執行。\n當然是使用python語言,不過今天我們不會介紹桌面應用的部份,會把重點放在web。\n
  4. 今天將會分三個部份說明pyjamas這個工具,首先會從為什麼要使用開始說起,這一部份會比較像是故事的形式。\n再來就簡單的說明一下如何使用pyjamas,我們今天是pycon當然還是會看一些python的程式。\n最後,我們就高高興興的使用它。\n
  5. 首先,立刻就來聽故事吧。\n
  6. 去年二月,因為和朋友一起創業,而我又是其中最工程背景的人,當然我就順理成章的負責整個網站的架設,包含前後台,資料庫等等。\n雖然我是電子電機出身,其實並沒有太多網路方面的經驗,但是憑著一股傻勁也走到了現在,正好前一份工作在IBM的工作主要是使用python程式語言,我當然就想要用python來做網站。\n
  7. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  8. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  9. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  10. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  11. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  12. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  13. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  14. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  15. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  16. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  17. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  18. 大家都知道Django是一個很棒的python web back-end develop framework,當我一發現之後馬上就決定要使用它了,雖然台灣使用RoR的人好像比較多,但是為了支持python當然是二話不說。\n當我決定要使用Django開發網站的後端之後,下一步當然就是決定前端的實作方式。\n用html和javascript的framework當然是最直覺的方法,可是那個時候的我其實並不太會這兩個東西,所以就想說找找看有沒有別的tool可以用。\n後來想到GWT,而且我記得我還在念書的時候好像有聽過他會支援python,很可惜的到現在還是只有Java。\n我不死心的繼續在網路上面搜尋,就在那個時候,我看到了一篇文章說明Django + pyjamas就是pure win!終於我找到了使用python就完成一個網站的方法。\n
  19. 當然身為一個程式設計師,怎麼可以因為懶得學其他語言就選這個tool呢?\n這背後當然還有其他理由!\n
  20. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  21. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  22. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  23. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  24. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  25. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  26. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  27. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  28. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  29. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  30. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  31. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  32. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  33. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  34. 所謂的single-page app可以用一句很簡單的話來形容,就像是在瀏覽器上面跑桌面應用程式。而single-page app存在的目的就是,提高UX(user experience),因為不會再有整個page一直重讀然後中斷的感覺。\n而要在撰寫一個singe-page app完成,通常我們需要很多不同的技術來完成:\nhtml和javascript當然不用講,還要使用asynchronously javascript and xml和後端server溝通,然後使用json等等的資料結構增加傳輸效率,還有一個很重要的是hashmark # on URL,讓瀏覽器可以記得我們現在的執行狀態,因為我們並沒有reload any page,不這樣做瀏覽器的上一頁或下一頁會讓使用者混淆。\n當然也有人使用flash或 Java applts 來實作,但是現在html5這個火紅我就沒有研究了。\n而使用pyjamas,上述的技術都可以簡單的搞定。\n
  35. 所以來復習一下,為什麼要使用pyjamas?\n可以只用python完成前後端。\n可以較容易完成single page app。\n最後,還可以跨瀏覽器相容!\n進入下衣主題。\n
  36. 所以來復習一下,為什麼要使用pyjamas?\n可以只用python完成前後端。\n可以較容易完成single page app。\n最後,還可以跨瀏覽器相容!\n進入下衣主題。\n
  37. 所以來復習一下,為什麼要使用pyjamas?\n可以只用python完成前後端。\n可以較容易完成single page app。\n最後,還可以跨瀏覽器相容!\n進入下衣主題。\n
  38. 所以來復習一下,為什麼要使用pyjamas?\n可以只用python完成前後端。\n可以較容易完成single page app。\n最後,還可以跨瀏覽器相容!\n進入下衣主題。\n
  39. 相信這樣子應該已經有足夠的動機讓大家把手弄髒,跳下去寫幾個pyjamas的程式玩玩看了吧。\n二話不說,馬上來看看pyjamas的hello world!\n
  40. 這個範例程式你可以在pyjamas裡面的example找到。\n終於看到python code了,首先我們注意到上面import模組的部份,這也是pyjamas的好處,模組化比javascript簡單多了。\n
  41. 這個範例程式你可以在pyjamas裡面的example找到。\n終於看到python code了,首先我們注意到上面import模組的部份,這也是pyjamas的好處,模組化比javascript簡單多了。\n
  42. 這個範例程式你可以在pyjamas裡面的example找到。\n終於看到python code了,首先我們注意到上面import模組的部份,這也是pyjamas的好處,模組化比javascript簡單多了。\n
  43. 這個範例程式你可以在pyjamas裡面的example找到。\n終於看到python code了,首先我們注意到上面import模組的部份,這也是pyjamas的好處,模組化比javascript簡單多了。\n
  44. 這個範例程式你可以在pyjamas裡面的example找到。\n終於看到python code了,首先我們注意到上面import模組的部份,這也是pyjamas的好處,模組化比javascript簡單多了。\n
  45. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  46. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  47. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  48. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  49. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  50. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  51. 而這個程式顯示在瀏覽器裡會長的像這樣。\n接下來就一個一個來說明,宣告一個button instance,他會長得像這樣。\n而content也是只需要簡單的宣告就可以使用。\n
  52. 光是宣告並不夠,最後要將他們加到rootpanel裡面,而rootpanel就是那一整個page,有點像是html的body tag,它事實上就是一個div,裡面包含了所有pyjamas build出來的內容。\n
  53. 而那些style就是在這裡給class name,也是在宣告instance的時候加入class名稱即可。\n
  54. 那麼這一斷程式碼是幹嘛的?既然button叫我click我就按按看。\n
  55. 按下去之後跳出一個alert而且button的內文也改掉了,原來greet這一個function是在宣告button的click handler,也是只要簡單的傳個reference進去宣告即可使用。\n
  56. 看起來我們把整個python code都看完了,疑,等等,這一斷怎麼沒有在python code裡面看到勒?\n這一部份我們留到稍候看看它實際上在哪裡。\n
  57. 看完了簡單的hello world,大家應該會有一個問題,我們是在瀏覽器內執行python的程式嗎?\n事實上不是這樣的,你還是在瀏覽器裡跑javascript,所以你需要先經過pyjs的編譯,它會幫你產生對應的html和javascript檔案,那些才是真正在瀏覽器裡面執行的東西。\n那麼透過pyjs,到底會產生哪些檔案呢?\n
  58. 看完了簡單的hello world,大家應該會有一個問題,我們是在瀏覽器內執行python的程式嗎?\n事實上不是這樣的,你還是在瀏覽器裡跑javascript,所以你需要先經過pyjs的編譯,它會幫你產生對應的html和javascript檔案,那些才是真正在瀏覽器裡面執行的東西。\n那麼透過pyjs,到底會產生哪些檔案呢?\n
  59. 看完了簡單的hello world,大家應該會有一個問題,我們是在瀏覽器內執行python的程式嗎?\n事實上不是這樣的,你還是在瀏覽器裡跑javascript,所以你需要先經過pyjs的編譯,它會幫你產生對應的html和javascript檔案,那些才是真正在瀏覽器裡面執行的東西。\n那麼透過pyjs,到底會產生哪些檔案呢?\n
  60. 看完了簡單的hello world,大家應該會有一個問題,我們是在瀏覽器內執行python的程式嗎?\n事實上不是這樣的,你還是在瀏覽器裡跑javascript,所以你需要先經過pyjs的編譯,它會幫你產生對應的html和javascript檔案,那些才是真正在瀏覽器裡面執行的東西。\n那麼透過pyjs,到底會產生哪些檔案呢?\n
  61. 看完了簡單的hello world,大家應該會有一個問題,我們是在瀏覽器內執行python的程式嗎?\n事實上不是這樣的,你還是在瀏覽器裡跑javascript,所以你需要先經過pyjs的編譯,它會幫你產生對應的html和javascript檔案,那些才是真正在瀏覽器裡面執行的東西。\n那麼透過pyjs,到底會產生哪些檔案呢?\n
  62. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  63. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  64. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  65. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  66. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  67. 我們先來看看剛剛那個hello world範例的source code,Hello.py也就是剛剛看到的python code。\npublic資料夾內的Hello.css和Hello.html也會在pyjs編譯html和javascript的時候被使用,css檔裡面有我們預先定義好的一些style,像是剛剛綠色背景的teststyle class。而在hello.html裡面可以看到這一句話,還記得剛剛這一段話python code裡面找不到對吧,其實它是被預先寫在src的html檔裡面。\n透過pyjs編譯後,會產生output這個資料夾,當然你可以透過下參數修改產生資料夾的名稱以及位置,裡面包含所有需要的東西。\n
  68. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  69. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  70. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  71. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  72. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  73. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了幾行。bootstrap.js這個檔案是用來將pyjs build出來的javascript load進現在這個頁面,而那些需要被load進來的程式就在剛剛那。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  74. 這就是剛剛那簡單的python code經過pyjs所build出來的檔案,可以發現比想像中的多很多,這裡面的每個檔案都有他不同的用處,而我們最後會使用到的就是Hello.html這個檔案。\n\n和前面static html的檔案比較起來,事實上只多了兩行。其中這一行所使用到的js檔案bootstrap.js就是用來將實際上有做用的檔案load到瀏覽器裡。\n\n光這樣看程式比較難瞭解實際上載入檔案的方式,我們看這張圖。\n
  75. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  76. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  77. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  78. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  79. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  80. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  81. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  82. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  83. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  84. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  85. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  86. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  87. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  88. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  89. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  90. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  91. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  92. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  93. 首先瀏覽器將hello.html讀取進來,接著讀取bootstrap.js這個檔案,接著js會去讀nocache html檔,這是為了解決瀏覽器cache的問題,最後才會去讀取對應不同瀏覽器的實際程式碼,你們可以注意到那些程式碼是寫在html檔裡面而非js檔。\n\n這個loading方式和gwt很像,大家也可以參考GWT。\n
  94. 所以來復習一下,如何pyjamas?\n
  95. 所以來復習一下,如何pyjamas?\n
  96. 所以來復習一下,如何pyjamas?\n
  97. 所以來復習一下,如何pyjamas?\n
  98. 所以從此之後我們前端開發的程式人員就過著幸福快樂的日子。\n等等,是這樣嗎?\n
  99. 所以從此之後我們前端開發的程式人員就過著幸福快樂的日子。\n等等,是這樣嗎?\n
  100. 事情沒有這麼簡單,讓我們回去output這個資料夾裡面詳細看一下,那幾個針對不同瀏覽器的html檔案都大的嚇人,就算只是做一個簡單的hello world,這是因為裡面包含了pyjs的框架,很明顯的如果你網頁並不需要大量的互動那這樣是很浪費的。\n
  101. 事情沒有這麼簡單,讓我們回去output這個資料夾裡面詳細看一下,那幾個針對不同瀏覽器的html檔案都大的嚇人,就算只是做一個簡單的hello world,這是因為裡面包含了pyjs的框架,很明顯的如果你網頁並不需要大量的互動那這樣是很浪費的。\n
  102. 事情沒有這麼簡單,讓我們回去output這個資料夾裡面詳細看一下,那幾個針對不同瀏覽器的html檔案都大的嚇人,就算只是做一個簡單的hello world,這是因為裡面包含了pyjs的框架,很明顯的如果你網頁並不需要大量的互動那這樣是很浪費的。\n
  103. 事情沒有這麼簡單,讓我們回去output這個資料夾裡面詳細看一下,那幾個針對不同瀏覽器的html檔案都大的嚇人,就算只是做一個簡單的hello world,這是因為裡面包含了pyjs的框架,很明顯的如果你網頁並不需要大量的互動那這樣是很浪費的。\n
  104. 再者,single-page app大部份的資料都是ajax取得的,但是search engine並不會執行javascript,變成無法讓search engine做index。又因為我們使用fragment identifier,所以search engine並無法認得不同的頁面,它會認為是同一頁。\n\n\n
  105. 再者,single-page app大部份的資料都是ajax取得的,但是search engine並不會執行javascript,變成無法讓search engine做index。又因為我們使用fragment identifier,所以search engine並無法認得不同的頁面,它會認為是同一頁。\n\n\n
  106. 再者,single-page app大部份的資料都是ajax取得的,但是search engine並不會執行javascript,變成無法讓search engine做index。又因為我們使用fragment identifier,所以search engine並無法認得不同的頁面,它會認為是同一頁。\n\n\n
  107. 再者,single-page app大部份的資料都是ajax取得的,但是search engine並不會執行javascript,變成無法讓search engine做index。又因為我們使用fragment identifier,所以search engine並無法認得不同的頁面,它會認為是同一頁。\n\n\n
  108. 再者,single-page app大部份的資料都是ajax取得的,但是search engine並不會執行javascript,變成無法讓search engine做index。又因為我們使用fragment identifier,所以search engine並無法認得不同的頁面,它會認為是同一頁。\n\n\n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. 所以,真的是pure win嗎?\n
  123. 所以,真的是pure win嗎?\n
  124. 所以,真的是pure win嗎?\n
  125. 所以,真的是pure win嗎?\n
  126. 所以,真的是pure win嗎?\n
  127. \n
  128. 如果有任何問題,請大家不用客氣,直接寫mail聯絡我。\n
  129. 如果有任何問題,請大家不用客氣,直接寫mail聯絡我。\n
  130. 如果有任何問題,請大家不用客氣,直接寫mail聯絡我。\n
  131. \n