Carbon - Introduction of Other Titanium Framework

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