Slide 1

Slide 1 text

Titanium “Moku-Moku” Meeting Tokyo #3 Carbon Carbon Native JSON UI Titanium Framework

Slide 2

Slide 2 text

Titanium “Moku-Moku” Meeting Tokyo #3 Alloy Appc official Ti MVC Framework

Slide 3

Slide 3 text

Titanium “Moku-Moku” Meeting Tokyo #3 Alloy 1. XML based UI 2. Backbone.js based data modeling 3. Style sheet based decoration

Slide 4

Slide 4 text

Titanium “Moku-Moku” Meeting Tokyo #3 Alloy 1. Awesome Style sheet 2. Good Model 3. (‘A`) XML and Complicated Coding

Slide 5

Slide 5 text

Titanium “Moku-Moku” Meeting Tokyo #3 Carbon Apperson Labs other approach Ti Fw

Slide 6

Slide 6 text

Titanium “Moku-Moku” Meeting Tokyo #3 Carbon 1. Native JSON UI 2. Useful and Little helper method 3. Easy to use

Slide 7

Slide 7 text

Titanium “Moku-Moku” Meeting Tokyo #3 JSON UI ? UI structure, CSS selector * Current ID only (Class is in the plan)

Slide 8

Slide 8 text

Titanium “Moku-Moku” Meeting Tokyo #3 { "TabGroup": { "id": "tabGroup", "tabs": [{ "Tab": { "id": "leftTab", "title": "Left Tab", "window": { "id": "leftWindow", "title": "Left Window", "backgroundColor": "#FFFFFF", "children": [{ "Label": { "id": "firstLabel", "class": "sampleLabels", "color": "#666666" } }] } JSON Add ID prop Structured UI

Slide 9

Slide 9 text

Titanium “Moku-Moku” Meeting Tokyo #3 { "TabGroup": { "id": "tabGroup", "tabs": [{ "Tab": { "id": "leftTab", "title": "Left Tab", "window": { "id": "leftWindow", "title": "Left Wind "backgroundColor": "children": [{ "Label": { "id": "firs "class": "s "color": "# } }] } Carbon = require("appersonlabs.carbon"); UI = Carbon.UI.open("UI.json"); leftTab = Carbon.UI.find("#leftTab"); leftTab.title = "Hoge"; var lbl = Carbon.UI.create({"Label" : { id: "inlineLabel", text: "Inline Create Element" }}); (Carbon.UI.find("#leftWindow")).add(lbl); UI.open(); Use in JS CSS selector access Inline Create Element

Slide 10

Slide 10 text

Titanium “Moku-Moku” Meeting Tokyo #3 Native ? 1. Not convert to JavaScript 2. Not “cross the bridge” 3. App will be faster * It seems that Apperson Labs says

Slide 11

Slide 11 text

Titanium “Moku-Moku” Meeting Tokyo #3 Testing 1. Create 2 Tabs 2. Left Tab window have Label 3. Rewrite Label text 300 times 4. Create new Label 300 times 5. Open Detection Area

Slide 12

Slide 12 text

Titanium “Moku-Moku” Meeting Tokyo #3 Result Carbon JavaScript 43 ms 30 ms

Slide 13

Slide 13 text

Titanium “Moku-Moku” Meeting Tokyo #3 ( ƅдƅ )

Slide 14

Slide 14 text

Titanium “Moku-Moku” Meeting Tokyo #3 However 0. Too severe a test 1. Carbon is Version 0.1 2. Not optimization (maybe) 3. Code is simple and Use helper func! 4. Hoping for evolution :-)

Slide 15

Slide 15 text

Titanium “Moku-Moku” Meeting Tokyo #3 CODESTRONG