Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jsdc 2013

741 views

Published on

  • Be the first to comment

Jsdc 2013

  1. 1. 如何打造雲端開發平台中冠資訊Marty
  2. 2. fackbook/groups/KSDGroup/
  3. 3. Cloud Development PlatformGood BadBrowser only PerformanceIn cloud OnlineCollaborativeDevelopmentDebug
  4. 4. MQ ServerMQ ServerAgendaUIComponentUIComponentUIComponentUIComponentHTTPJSONWebServerWebServerNodeJSNodeJSPHPPHP……AMQPFront End Back End112233
  5. 5. Cloud Development Platform
  6. 6. Building Custom Components• HTML Tag– Tag enhance– custom tag• Separate– view & model• API– componentUIComponentUIComponentUIComponentUIComponentFront End11
  7. 7. HTML Tag –Tag enhance<ul data-role="listview"><li><a href="#">Acura</a></li><li><a href="#">Audi</a></li><li><a href="#">BMW</a></li><li><a href="#">Cadillac</a></li><li><a href="#">Ferrari</a></li></ul>
  8. 8. HTML Tag – Custom Tag<tabs><pane title="Localization">Date: {{ 2012-04-01 | date:fullDate }} <br>Currency: {{ 123456 | currency }} <br>Number: {{ 98765.4321 | number }} <br></pane><pane title="Pluralization">…</pane></tabs>
  9. 9. http://trirand.com/blog/jqgrid/jqgrid.html
  10. 10. HTML Tag - JQGrid<JQGrid>...</JQGrid><JQCol>
  11. 11. ViewComponentTag is Component
  12. 12. Use Custom Tagshttp://jsbin.com/ujeyip/18/edit
  13. 13. http://goo.gl/SMNPJ
  14. 14. Separate – view & model<script>$.gk.model[add] ={onclick:function(){var record = {item:$(#input).val()};$(#itemList).gk(add,record);$(#input).val();}};</script><page><header label=ToDo></header><content><input id=input type="text"placeholder=What needs to bedone?><btn id=add label=Add></btn>......</content></page>GKModelViewEventBinding
  15. 15. API – component<script>$.gk.model[add] ={onclick:function(){var record = {item:$(#input).val()};$(#itemList).gk(add,record);$(#input).val();}};</script><page><header label=ToDo></header><content><input id=input type="text"placeholder=What needs to bedone?><btn id=add label=Add></btn>......</content></page>ModelViewComponentGK
  16. 16. API – componentGK http://jsbin.com/ekujig/23/edit
  17. 17. Custom Tag & AttributeEditorEditor UI DesignerUI DesignerComponentvisualization
  18. 18. JSON / HTTPHTTPJSON22• JSON–action–attribute–dataUIComponentUIComponentUIComponentUIComponentFront End
  19. 19. Chrome [F12]
  20. 20. Back end• MQServer–AMQP–Cross PlatformMQ ServerMQ ServerWebServerWebServerNodeJSNodeJSJavaJava……AMQPBack End33
  21. 21. MQ ServerMQ ServerWebServerWebServerNodeJSNodeJSJavaJava……AMQPBack End33

×