Carbon - Introduction of Other Titanium Framework

Titanium Mobile "MokuMoku" Meetup #3 Lighting Talk (2012/11/16)

Transcript

1. Titanium “Moku-Moku” Meeting Tokyo #3 Carbon Carbon Native JSON UI Titanium Framework
2. Titanium “Moku-Moku” Meeting Tokyo #3 Alloy Appc official Ti MVC Framework
3. Titanium “Moku-Moku” Meeting Tokyo #3 Alloy 1. XML based UI 2. Backbone.js based data modeling 3. Style sheet based decoration
4. Titanium “Moku-Moku” Meeting Tokyo #3 Alloy 1. Awesome Style sheet 2. Good Model 3. (‘A`) XML and Complicated Coding
5. Titanium “Moku-Moku” Meeting Tokyo #3 Carbon Apperson Labs other approach Ti Fw
6. Titanium “Moku-Moku” Meeting Tokyo #3 Carbon 1. Native JSON UI 2. Useful and Little helper method 3. Easy to use
7. Titanium “Moku-Moku” Meeting Tokyo #3 JSON UI ? UI structure, CSS selector * Current ID only (Class is in the plan)
8. 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
9. 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
10. 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
11. 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
12. Titanium “Moku-Moku” Meeting Tokyo #3 Result Carbon JavaScript 43 ms 30 ms
13. Titanium “Moku-Moku” Meeting Tokyo #3 ( ƅдƅ )
14. 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 :-)
15. Titanium “Moku-Moku” Meeting Tokyo #3 CODESTRONG