Cena-DTA PHP Conference 2011 Slides

2,087 views

Published on

Presentation slides for Cena-DTA in PHP Conference 2011, Tokyo.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,087
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Cena-DTA PHP Conference 2011 Slides

  1. 1. Cena-DTA : HTML5 の ローカル DB を使った アプリ開発 https://github.com/asaokamei/Cena-DTA 亀井 亜佐夫 @asao_jp WorkSpot.JP
  2. 2. About Cena-DTA <ul><li>C ena E ntity N otation and A ugmentation
  3. 3. Source Code at GitHub </li><ul><li>https://github.com/asaokamei/Cena-DTA
  4. 4. GPL v2 </li></ul><li>Documents at </li><ul><li>http://www.workspot.jp/cena/ja/index.php
  5. 5. http://www.workspot.jp/cena/index.php </li></ul></ul>
  6. 6. About me <ul><li>ワークスポット・ジェーピー </li><ul><li>http://www.workspot.jp/
  7. 7. http://twitter.com/asao_jp
  8. 8. Simple勉強会 </li></ul><li>ウェブサイト開発(PHP+DB)
  9. 9. 2002 ~ 現在
  10. 10. その他 </li><ul><li>日本人、男性、年齢:46才 </li></ul></ul>
  11. 11. About my past... <ul><li>University of Idaho , M.E. 1989~1994
  12. 12. Etak , Menlo Park, 1994~2000 </li><ul><li>カーナビ開発 </li><ul><ul><li>title: Program Manager </li></ul></ul></ul><li>Workspot, inc. , Palo Alto, 2000~2001 </li><ul><li>Remote Linux Desktop Server
  13. 13. App development for OmniSky =Palm+Wireless Modem, </li><ul><ul><li>One of seven founders!!!
  14. 14. title: VP of Engineering </li></ul></ul></ul></ul>
  15. 15. about Cena-DTA
  16. 16. HTML5 is coming to your web browser <ul><li>HTML5 = More DataBases!!! </li><ul><li>Web Storage (x2) </li><ul><li>Simple session storage & local stroage </li></ul><li>Web Sql Database </li><ul><li>= sqlite = Relational Database!
  17. 17. abandoned... but works in Chrome, Safari, etc. </li></ul><li>Web Indexed Database </li><ul><li>this is the future... </li></ul></ul></ul>
  18. 18. Database's Everywhere! HTML5 browser brings Database to everywhere. server Master Database PC local db smart phone local db notebook local db
  19. 19. Master and Local Databases <ul><li>download all data </li><ul><li>from master -> local DB. </li></ul><li>edit at local DB </li><ul><li>create and modify many data and relations . </li></ul><li>upload edited data </li><ul><li>synchronize local and master DB . </li></ul></ul>
  20. 20. Synchronizing Relational Data <ul><ul>...but synchronizing relationship with auto-numbered id is not easy. (I think.) </ul></ul>
  21. 21. Synchronizing Relational Data #1 create table contact( contact_id SERIAL, name text ); create table connect( connect_id SERIAL, contact_id int, method text ); contact_id name 9 Alan 10 George connect_id contact_id method 100 9 twitter 101 10 facebook 102 10 Tumblr
  22. 22. Synchronizing Relational Data #2 contact_id name 9 Alan 10 George 11 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 Google+ created: contact_id=11, name=Taro modified: connect_id=100 contact_id=11 created: connect_id=103 contact_id=11 method=Google+ ローカル DB で追加・修正
  23. 23. Synchronizing Relational Data #3 contact_id name 9 Alan 10 George 11 Giro 12 Taro connect_id contact_id method 100 11 twitter 101 10 facebook 102 10 Tumblr 103 11 mixi 104 11 Google+ contact_id=11 already occupied! relation to contact_id=11 is broken! サーバーと同期すると・・・ ID を付け替えればいいのですが、とても面倒 ...
  24. 24. Cena-DTA's Objectives <ul><li>データベース間の同期処理 </li><ul><li>自動連番IDを使った関係を維持する。 </li></ul><li>各データの項目ごとに更新する。 </li><ul><li>できるだけ上書きを避ける。 </li></ul><li>テンプレートベースの簡単開発 </li><ul><li>できるだけ簡単に。 </li></ul></ul>
  25. 25. Introducing Cena-DTA #1 <ul><form action=”/connect/mod/100/”> <ul><input type=”text” name=” method ” value=” twitter ”> <input type=”hidden” name=” contact_id ” value=” 11 ”> </ul></form> </ul>
  26. 26. Introducing Cena-DTA #2 <ul><form action=”/Cena/”> <input name=” Cena[connect][mod][100][method] ” value=” twitter ”> </ul><ul><input name=” Cena[connect][new][103][method] ” value=” Google+ ”> </ul><ul><input name=” Cena[contact][new][11][name] ” value=” Taro ”> </ul><ul><input name=” Cena[connect][mod][100][contact_id] ” value=” Cena.contact.new.11 ”> </ul><ul><input name=” Cena[connect][new][103][contact_id] ” value=” Cena.contact.new.11 ”> </ul>
  27. 27. Introducing Cena-DTA #3 12 12 Cena.contact.new.11 contact_id=11 name=Taro 12
  28. 28. Cena Protocol <ul><li>Cena.model.type.id . action (.column)=value </li></ul><ul><ul><li>cena_id : </li><ul><li>scheme: 'Cena'
  29. 29. model: table, AR, etc.
  30. 30. type: </li><ul><li>get: from master db,
  31. 31. new: added at local db. </li></ul><li>id: primary key </li></ul></ul></ul><ul><ul><li>action (state?): </li><ul><li>set, rel, or del.
  32. 32. or maybe a state... </li></ul><li>column: </li><ul><li>no column for del. </li></ul><li>value: </li><ul><li>string value, or
  33. 33. cena_id for action=rel. </li></ul></ul></ul>
  34. 34. demo
  35. 35. Cena-DTA Demo create table contact100 ( contact_id SERIAL, name text, gender char(1), type char(1), date date, ); create table contact110 ( connnect_id SERIAL, contact_id int, method text, type char(1) );
  36. 36. inside Cena-DTA
  37. 37. Cena-DTA Overview <ul><li>Server Side: PHP </li><ul><li>cenaPhp </li><ul><li>requires PHP5.3 (or above) and MySql (PDO). </li></ul></ul><li>Client Side: jQuery's plug-in </li><ul><li>jqCena : template, utilities
  38. 38. jqCenaSql : interface for WebSqlDatabase </li><ul><li>requires WebSqlDatabase and jQuery.
  39. 39. works on Chrome, and probably on Safari... </li></ul></ul></ul>
  40. 40. Cena-DTA Overview server side html5 browsers html form ajax ORM/database WebSqlDB HTML5 display/web forms internet
  41. 41. Cena Protocol Formats <ul><li>Web form style </li><ul><li>Cena[model][type][id][action][column]=value </li></ul><li>Compact style </li><ul><li>Cena.model.type.id </li></ul><li>Cena Envelope </li><ul><li>Cena protocol in JSON style </li></ul></ul>
  42. 42. Cena Envelope <ul><li>Cena protocol in JSON format. </li><ul><li>example: </li><ul><li>{ cena_id: “Cena.connect.new.103”, type: “new”, model: “connect”, id: “103”, set: { name: “Google+” }, rel: { contact_id: “Cena.contact.new.11” } } </li><ul><li>(need better naming...) </li></ul></ul></ul></ul>
  43. 43. Client Side: cenaJq Overview html5 browsers ajax HTML5 display HTML5 template WebSqlDB WebIndexDB internet
  44. 44. Client Side: HTML5 template <table id=&quot; cena_post &quot;> <tr id=&quot; cena_env_src &quot; style=&quot;display:none;&quot;> <td> <input type=&quot;text&quot; name=&quot; contact_name &quot; class=&quot; cena_element &quot; /> <span class=&quot; cena_element &quot; cena=&quot;cena_id&quot; ></span> </td> <td align=&quot;center&quot;> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;1&quot;>male</label><br> <label> <input type=&quot;radio&quot; name=&quot; contact_gender &quot; class=&quot; cena_element &quot; value=&quot;2&quot;>female</label> </td>...
  45. 45. Client Side: data and template var callback100 = function( env_data ) { $() .cena( { // initialize cena. env_src: ' #cena_env_src ', // source envelop id. env_post: ' #cena_post ', // id to post bound envelope. bind_type: ' replace ' // show contents. }) .cena( 'add', env_data ) .cena( 'bind' ) .cena( 'clean' ) ; } bind_type: - replace : 内容の表示 - populate : フォームとして表示
  46. 46. Client Side: retrieving data $() .cena( 'restart' ); $() .cenaSql() .cenaSql( 'find', // set search options #2 { column: opts.find_column, value : opts.find_value, type : opts.find_type }) .cenaSql( { // set search options #1 model: 'dao_contact100', offset: opts.contact_offset, limit: opts.contact_limit, order: opts.order_column, ascend: opts.order_ascend }) .cenaSql( 'get', callback100 ) ;
  47. 47. Client Side: local DB table structure create table if not exists cena_env( cena_name text unique, cena_id, scheme, model, type, id integer, act, column, value, state ); テーブルひとつで作ってます。 初期設計のままなので、構造は変更する予定・・・
  48. 48. Server Side: cenaPhp sql wrapper data model active record Cena maps ORM internet browser
  49. 49. Server Side: saving data to DB static function proc_cena( &$cena_recs, $doAct=NULL ) { $do_models = self::$models; foreach( $do_models as $model ) { // for all models foreach( $get_types as $type => $get_ids ) { // for all types foreach( $get_ids as $id => $actions ) { // for all ids $cena = Cena::getCena( $model, $type , $id ); $cena->manipulate( $actions ); try { if( have_value( $doAct ) ) $cena->do_function( $doAct ); } catch( ormDataInvalid_DbaRecord_Exception $e ) { $num_err ++; } $cena_recs[ $model ][] = $cena; } // end loop on ids } // end loop on types } // end loop on models }
  50. 50. summary
  51. 51. Similar Technologies... <ul><li>Random ID </li><ul><ul><li>used by persistent.js, parse.com, Google Calendar </li></ul></ul><li>GUID (Globaly Unique ID) by Microsoft </li><ul><ul><li>used by MS Access </li></ul></ul><li>sqlAnywhere by Sybase </li><ul><ul><li>use ODBC to issue SQL statement to master db? </li></ul></ul><li>conversion table patent by SAP? </li><ul><ul><li>a patent I found somewhere... </li></ul></ul></ul>
  52. 52. Cena-DTA's Strength <ul><li>Cena-DTAの特徴 </li><ul><li>確実に同期できる(はず)
  53. 53. 一般的なRDBに対して摘要可能 </li><ul><li>既存のRDBにも摘要可能?
  54. 54. KVとRDBの橋渡し的な存在? </li></ul><li>ORMを利用する </li><ul><li>セキュリティの強化。 </li></ul></ul></ul>
  55. 55. and Weaknesses... <ul><li>問題点 </li><ul><li>簡単、ではないかも。 </li><ul><li>クライアント側でget/newを追いかける必要あり </li></ul><li>ORM依存? </li><ul><li>Active Record
  56. 56. しかも俺々ライブラリ… </li></ul><li>特許取得済み </li></ul></ul>
  57. 57. Future Plan <ul><li>Improve demo </li><ul><li>Support Web Indexed Database.
  58. 58. Security issue.
  59. 59. AJAX download/upload data, many-to-many, i18n support, etc. </li></ul><li>Refactor code and protocol
  60. 60. Other language/platform???
  61. 61. Need killer demo/application/service! </li></ul>
  62. 62. End of Presentation ご清聴ありがとうございました。

×