Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Carbon - Introduction of Other Titanium Framework

Carbon - Introduction of Other Titanium Framework

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

Dd17014e380450cfed5d55ff20fa3dfd?s=128

Ryutaro Miyashita

November 16, 2012
Tweet

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