Your SlideShare is downloading. ×
0
Kranium	  Webifying	  Titanium	  Development	                Jacob	  Waller	  
+!   +!   +!   →!
+
http://flic.kr/p/9wLZkJ!               Kranium•    Webifying Titanium Development!
"    Cross platform apps using javascript!"    Shared business logic!"    Native UI!"    Device API:s!
Why cross-platform?"    One codebase!     "    Faster development → cheaper development!     "    Less code → less bugs!  ...
Why not cross-platform?"    Potential bugs in cross-platform frameworks!"    Somewhat harder stepping outside the box!"   ...
Cross Platform is Hard "    iOS!                "    Android!      "    Objective-C!   "    Java!      "    XCode!        ...
Titanium takes the hit              http://flic.kr/p/91Zydu!
Cross Platform Medicine                          http://flic.kr/p/8dZbk4!"    Must use lowest common denominator!"    Go wi...
Low-level                  http://flic.kr/p/75b2DJ!Means powerful!
Low-level                    http://flic.kr/p/5JDvZM!Also means annoying to build large stuff!
Low-level                   http://flic.kr/p/nyxCW!Is it therefore wrong?!
NO
High-level"    Low level building blocks let us build high-     level abstractions!"    Upon which we can build awesome st...
High-level         http://flic.kr/p/8ovJYH!
Titanium"    Titanium Mobile has a low-level     core API:s for each platform it     supports!"    Lets cover it in platfo...
But how?    http://flic.kr/p/9wfuUh!
Parallel"    Web development has low-level API:s!     "    document.createElement!     "    element.style.backgroundColor!
Web developmentif (el.addEventListener) {	    el.addEventListener("mouseover", myFunction, false);	    el.addEventListener...
Web development $(el).bind("mouseover mouseout", myFunction);	Is now pleasant, quick and sexy!
Ecosystem
Titanium developmentvar tabGroup = Ti.UI.createTabGroup(),	          shadowColor: #fff,	                                  ...
Welcome Kranium        http://flic.kr/p/9wLZkJ!
Titanium development      K({	          type: tabgroup,	          tabs: [{	              cls: myTab,	              window:...
Titanium development          .myTab { 	              icon: path/to/my/icon; 	          }	          window {	             ...
Titanium development                                     StylusK(	                              .myTab	  type: "tabgroup"	...
Kranium"    Lovechild of the following stunning web frameworks:!     "    jQuery / Zepto!     "    Backbone!     "    Jade...
Comparison
jQuery / Zepto"    Easy access selector engine!     $(.content > .label, .hello).text(hello!);	     $(el).find(.content);	...
jQuery / Zepto"    Chainable collections with helper functions!     $(el)	         .text(hey)	         .css({ color: #f00 ...
jQuery / Zepto"    Simplified API:s!     $.ajax({	          type: GET,	          url: http://some/url,	          success: f...
Titanium"    Let’s see how these look in the low-level     Titanium API!
Titanium"    Easy access selector engine?!     N/A
Titanium"    Chainable collections with helper functions?!     el.text = hey;	     el.color = #f00;	     var parent = el.g...
Titanium"    Simplified API:s?!     var xhr = Ti.Network.createHTTPClient();	     xhr.open(GET, http://some/url);	     xhr....
Kranium"    Lets look at the same functionality using     Kranium!
Kranium"    Easy access selector engine!     $(.content > .label, .hello).text(hello!);	     $(el).find(.content);	     $(...
Kranium"    Chainable collections with helper functions!     $(el)	         .text(hey)	         .css({ color: #f00 })	    ...
Kranium"    Simplified API:s!     $.ajax({	          type: GET,	          url: http://some/url,	          success: function...
Kranium                                 http://bit.ly/bW1zP5!"    Tries to invent as few wheels as possible!"    Instead p...
What to piggyback?                               "    jQuery / Zepto!                               "    Backbone!        ...
What IS Kranium?"    A utility library to include in your app!"    A command line program!
Utility library"    Exposes a jQuery-like object called K (or $)!"    Exposes Backbone integration!"    Exposes Jade templ...
Command line program "    Built on NodeJS and NPM! "    Initiates Kranium resources in project! "    Pipes live updates! "...
Template engineA great template engine is a hugehelp in keeping your code:!"    DRY!"    separated!"    consise!
Jade"    Lightweight!"    Supports custom compilers!"    Compiles templates to functions!"    Beautiful syntax!"    Consis...
Jade example
// test.jade	view.board	  label.boardTitle Board	  view.boardMessages	    - each msg, user in users	      label.boardMessa...
K.jade(test.jade, { 	     users: { 	         jacob: yeah,	         david: what,	         conny: hi, 	         aida: hello,...
.board {	    top: 10;	    left: 10;	}	.boardMessages {	    top: 30;	    layout: vertical;	}	.boardMessage {	    height: 20...
JSS"    Great feature in theory - gives Separation of     Concerns!"    Hasn’t always been working well !"    Not powerful...
KSS"    A styling layer implemented in the javascript     context!"    Everything created using K function is styled     a...
KSSlabel {	    color: #000;	    font-size: 16dp;	}	label:android {	    font-size: 17dp;	    text-align: left;	}	tableview:...
KUI                              http://flic.kr/p/6a3wzw!"    Extendable UI Modules!"    Simple Inheritance!"    Automatic ...
Examplekui/loginstatus.js!   exports.Class = Label.extend({	       className: "loginstatus",	       init: function(opts) {...
Examplekui/loginstatus.kss!   .loginstatus {	       color: #f00;	   }
Exampleapp.js!   K({	       type: window,	       children: [{	           type: loggedinstatus	       }]	   }).open();	   v...
Exampleapp.js!   K({	       type: window,	       children: [{	           top: 10,	           type: loggedinstatus	       }...
Backbone supplies structure to JavaScript-heavyapplications by providing models with key-valuebinding and custom events, c...
Code walkthrough
// Define model	RowModel = Backbone.Model.extend({	     type: tableviewrow	});	// Define collection	RowCollection = Backbo...
// kui/todolist.js	exports.Class = BackboneView.extend({	    type: tableview,	    editable: true, 	       events: {	      ...
exports.Class = Window.extend({	    navBarHidden: true,	    init: function(o){	             this.titleLabel = K.createLabe...
Polyfill missing UI"    Android lacks many simple UI modules!     "    Navbar!     "    TabbedBar!     "    ButtonBar!     ...
Polyfill missing UI
Polyfill missing UI
Extend Base UI    K.createTableview({	        pullToRefresh: true,	        refresh: function(){	            K.ajax({	     ...
Livetanium"    Kranium integrates Livetanium!"    Gives you live updates of KSS style changes as     well as module updates!
Jasminedescribe(Demo, function() {	    describe(Titanium Object, function(){	        it(Ti == Titanium, function(){ expect...
Console
Summary"    Consists of a command line program and an     includable library!"    Ports the best web development libraries...
Available now"    Currently in open beta!     "    Source under MIT License!     "    Hosted on GitHub!     "    Pull requ...
Available now"    Beware!     "    There will be bugs!     "    API far from frozen!
Available now"    Works best with iOS, but Android getting     there!"    CLI works best on Mac OSX!     "    Will be test...
http://kraniumjs.com
Installation"    1. Install NodeJS and NPM!"    2. Run `npm install kranium`!"    3. There is no step 3!
Questions?  http://flic.kr/p/7vB7fR!
Thank you                   +       @litenjacob!   jacob@krawaller.se!jacob.waller@logica.com!
Go contribute please!           http://flic.kr/p/9C7DZZ!
Jacob Waller: Webifying Titanium Development
Jacob Waller: Webifying Titanium Development
Jacob Waller: Webifying Titanium Development
Jacob Waller: Webifying Titanium Development
Jacob Waller: Webifying Titanium Development
Jacob Waller: Webifying Titanium Development
Upcoming SlideShare
Loading in...5
×

Jacob Waller: Webifying Titanium Development

1,803

Published on

What if we could bring the good parts of web development to Titanium? I'm talking about the realtimeness of web development - changing files and being able to see results on the fly, both visually and regarding application logic. Compare it to Firebug's live CSS editing abilities and Chrome's live code changes. I'm also talking about bringing the beauty of web frameworks to Titanium - Stylus, SASS and Less for styling, CoffeeScript and its cousins to enhance development, Jasmine for testing, Backbone for MVC and jQuery and friends to simplify element creation, communication and handling. What if we could use all these techniques on top of Titanium to create native apps even faster and with better structure?

The solution is Kranium - the result of merging Titanium with web development techniques, creating a cyborg which is greater than just the sum of its parts. It will significantly speed up development and styling, and is useful both for prototyping and production apps. It will be release under the MIT license during the conference. The session is meant as an introduction of Kranium for all Titanium developers, but will be especially thrilling for those with a web development background.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,803
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Jacob Waller: Webifying Titanium Development"

  1. 1. Kranium  Webifying  Titanium  Development   Jacob  Waller  
  2. 2. +! +! +! →!
  3. 3. +
  4. 4. http://flic.kr/p/9wLZkJ! Kranium•  Webifying Titanium Development!
  5. 5. "  Cross platform apps using javascript!"  Shared business logic!"  Native UI!"  Device API:s!
  6. 6. Why cross-platform?"  One codebase! "  Faster development → cheaper development! "  Less code → less bugs! "  Focus on one language and one tool!
  7. 7. Why not cross-platform?"  Potential bugs in cross-platform frameworks!"  Somewhat harder stepping outside the box!"  Might still need platform branching!"  Less speed and more memory usage!
  8. 8. Cross Platform is Hard "  iOS! "  Android! "  Objective-C! "  Java! "  XCode! "  Eclipse!
  9. 9. Titanium takes the hit http://flic.kr/p/91Zydu!
  10. 10. Cross Platform Medicine http://flic.kr/p/8dZbk4!"  Must use lowest common denominator!"  Go with a low-level API!"  Must focus on getting the “atoms” behave the same across platforms!
  11. 11. Low-level http://flic.kr/p/75b2DJ!Means powerful!
  12. 12. Low-level http://flic.kr/p/5JDvZM!Also means annoying to build large stuff!
  13. 13. Low-level http://flic.kr/p/nyxCW!Is it therefore wrong?!
  14. 14. NO
  15. 15. High-level"  Low level building blocks let us build high- level abstractions!"  Upon which we can build awesome stuff!
  16. 16. High-level http://flic.kr/p/8ovJYH!
  17. 17. Titanium"  Titanium Mobile has a low-level core API:s for each platform it supports!"  Lets cover it in platform- independent high-level awesome-sauce!
  18. 18. But how? http://flic.kr/p/9wfuUh!
  19. 19. Parallel"  Web development has low-level API:s! "  document.createElement! "  element.style.backgroundColor!
  20. 20. Web developmentif (el.addEventListener) { el.addEventListener("mouseover", myFunction, false); el.addEventListener("mouseout", myFunction, false); } else if (el.attachEvent) { el.attachEvent("onmouseover", myFunction); el.attachEvent("onmouseout", myFunction); } else { el.onmouseover = myFunction; el.onmouseout = myFunction; } Used to be painful, slow and ugly!
  21. 21. Web development $(el).bind("mouseover mouseout", myFunction); Is now pleasant, quick and sexy!
  22. 22. Ecosystem
  23. 23. Titanium developmentvar tabGroup = Ti.UI.createTabGroup(), shadowColor: #fff, shadowOffset: { win1 = Ti.UI.createWindow({ y: -1, backgroundColor: #ccc, x: 0 barColor: #00a, }, title: My window font: { }), fontSize: 20, fontWeight: bold tab1 = Ti.UI.createTab({ } icon: path/to/my/icon, }); title: My tab, window: win1 win1.add(label1); }), label1.addEventListener(click, function(e){ alert(You clicked me!); label1 = Ti.UI.createLabel({ }); text: Hello world!, textAlign: center, tabGroup.addTab(tab1); color: #333, tabGroup.open(); Used to be somewhat painful, slow and ugly!
  24. 24. Welcome Kranium http://flic.kr/p/9wLZkJ!
  25. 25. Titanium development K({ type: tabgroup, tabs: [{ cls: myTab, window: { cls: myWindow, children: [{ text: Hello world!, cls: mylabel, click: function(){ alert(You clicked me!); } }] } }] }).open(); Is now more pleasant, quick and sexy!
  26. 26. Titanium development .myTab { icon: path/to/my/icon; } window { background-color: #ccc; bar-color: #00a; } .myLabel { text-align: center; color: #333; shadow-color: #fff; shadow-offset-y: -1; font-size: 20; font-weight: bold; } Is now more pleasant, quick and sexy!
  27. 27. Titanium development StylusK( .myTab type: "tabgroup" icon path/to/my/icon tabs: [ className: "myTab" window window: background-color #ccc className: "myWindow" bar-color #00a children: [ text: "Hello world!" .myLabel className: "mylabel" text-align center ] color #333 ] shadow-color #fff ).open() shadow-offset-y -1 font-size 20 font-weight bold With lots of possibilities!
  28. 28. Kranium"  Lovechild of the following stunning web frameworks:! "  jQuery / Zepto! "  Backbone! "  Jade! "  Livetanium / Livereload! "  Sizzle / mini.js! "  Jasmine! http://bit.ly/3vVcI! "  JSS / Stylus / Sass / LESS! "  JSConsole / Weinre!
  29. 29. Comparison
  30. 30. jQuery / Zepto"  Easy access selector engine! $(.content > .label, .hello).text(hello!); $(el).find(.content); $(.content, el);
  31. 31. jQuery / Zepto"  Chainable collections with helper functions! $(el) .text(hey) .css({ color: #f00 }) .parent(.row) .bind(click, onClick) .append(stuff);
  32. 32. jQuery / Zepto"  Simplified API:s! $.ajax({ type: GET, url: http://some/url, success: function(data, status, xhr){ alert(data); } });
  33. 33. Titanium"  Let’s see how these look in the low-level Titanium API!
  34. 34. Titanium"  Easy access selector engine?! N/A
  35. 35. Titanium"  Chainable collections with helper functions?! el.text = hey; el.color = #f00; var parent = el.getParent().getParent().children().filter (function(el){ return /(^|s+)row(s+|$)/.test(el.className); }); parent.addEventListener(click, onClick); stuff.forEach(function(toAdd){ el.add(toAdd); });
  36. 36. Titanium"  Simplified API:s?! var xhr = Ti.Network.createHTTPClient(); xhr.open(GET, http://some/url); xhr.onload = function(data, status, xhr){ alert(data); }); xhr.send();
  37. 37. Kranium"  Lets look at the same functionality using Kranium!
  38. 38. Kranium"  Easy access selector engine! $(.content > .label, .hello).text(hello!); $(el).find(.content); $(.content, el);
  39. 39. Kranium"  Chainable collections with helper functions! $(el) .text(hey) .css({ color: #f00 }) .parent(.row) .bind(click, onClick) .append(stuff);
  40. 40. Kranium"  Simplified API:s! $.ajax({ type: GET, url: http://some/url, success: function(data, status, xhr){ alert(data); } });
  41. 41. Kranium http://bit.ly/bW1zP5!"  Tries to invent as few wheels as possible!"  Instead piggyback on the ideas and momentum of existing great web frameworks!
  42. 42. What to piggyback? "  jQuery / Zepto! "  Backbone! "  Jade! "  Livetanium / Livereload! "  Sizzle / mini.js! "  Jasmine! "  JSS / Stylus / Sass / LESS! http://flic.kr/p/7dpmyF! "  JSConsole / Weinre!
  43. 43. What IS Kranium?"  A utility library to include in your app!"  A command line program!
  44. 44. Utility library"  Exposes a jQuery-like object called K (or $)!"  Exposes Backbone integration!"  Exposes Jade template engine!"  Implements simple selector engine!"  Implements enhanced styling!"  Implements extendable modules!
  45. 45. Command line program "  Built on NodeJS and NPM! "  Initiates Kranium resources in project! "  Pipes live updates! "  Two-way console! "  Jasmine reporter!
  46. 46. Template engineA great template engine is a hugehelp in keeping your code:!"  DRY!"  separated!"  consise!
  47. 47. Jade"  Lightweight!"  Supports custom compilers!"  Compiles templates to functions!"  Beautiful syntax!"  Consise!"  In active development!
  48. 48. Jade example
  49. 49. // test.jade view.board label.boardTitle Board view.boardMessages - each msg, user in users label.boardMessage= user + says + msg
  50. 50. K.jade(test.jade, { users: { jacob: yeah, david: what, conny: hi, aida: hello, calle: yup } });
  51. 51. .board { top: 10; left: 10; } .boardMessages { top: 30; layout: vertical; } .boardMessage { height: 20; top: 10; } .boardTitle { top: 0; height: auto; font-weight: bold; }
  52. 52. JSS"  Great feature in theory - gives Separation of Concerns!"  Hasn’t always been working well !"  Not powerful and extendable enough!
  53. 53. KSS"  A styling layer implemented in the javascript context!"  Everything created using K function is styled appropriately!"  Style based on Types, Classes and IDs!"  Platform branching using psuedo selectors!"  Variable evaluation!
  54. 54. KSSlabel { color: #000; font-size: 16dp; } label:android { font-size: 17dp; text-align: left; } tableview:ios { style: Ti.UI.iPhone.TableViewStyle.GROUPED; }
  55. 55. KUI http://flic.kr/p/6a3wzw!"  Extendable UI Modules!"  Simple Inheritance!"  Automatic KSS loading!
  56. 56. Examplekui/loginstatus.js! exports.Class = Label.extend({ className: "loginstatus", init: function(opts) { this.events = { app: { authchange: this.updateStatus.bind(this) } }; this._super.call(this, opts); this.updateStatus(); }, updateStatus: function(e) { this.el.text = "Logged " + (e && e.loggedIn ? "in" : "out"); } });
  57. 57. Examplekui/loginstatus.kss! .loginstatus { color: #f00; }
  58. 58. Exampleapp.js! K({ type: window, children: [{ type: loggedinstatus }] }).open(); var i = 0; setInterval(function(){ Ti.App.fireEvent(authchange, { loggedIn: !!(++i % 2) }); }, 1000);
  59. 59. Exampleapp.js! K({ type: window, children: [{ top: 10, type: loggedinstatus }, { bottom: 10, type: loggedinstatus }] }).open(); var i = 0; setInterval(function(){ Ti.App.fireEvent(authchange, { loggedIn: !!(++i % 2) }); }, 1000);
  60. 60. Backbone supplies structure to JavaScript-heavyapplications by providing models with key-valuebinding and custom events, collections with a richAPI of enumerable functions and views withdeclarative event handling...
  61. 61. Code walkthrough
  62. 62. // Define model RowModel = Backbone.Model.extend({ type: tableviewrow }); // Define collection RowCollection = Backbone.Collection.extend({ model: RowModel, comparator: function(model) { return model.get("title"); } }); // Create todos collection todos = new RowCollection(); todos.add([ { title: "An example todo" }, { title: "Another example todo" }, ]); // Create todolist var todolist = K.create({ type: todolist, collection: todos });
  63. 63. // kui/todolist.js exports.Class = BackboneView.extend({ type: tableview, editable: true, events: { click: function(e){ var model = todos.getByCid(e.rowData._modelCid); model.set({ hasCheck: !model.get(hasCheck) }); }, "delete": function(e){ var model = todos.getByCid(e.rowData._modelCid); todos.remove(model); } } });
  64. 64. exports.Class = Window.extend({ navBarHidden: true, init: function(o){ this.titleLabel = K.createLabel({ className: titleLabel }); todos.bind(all, this.updateTitleLabel.bind(this)); this.updateTitleLabel(); this.children = [{ type: toolbar, className: todoToolbar, items: [{ type: textfield, className: todoInputTextField, events: { "return": function(e){ todos.add({ title: e.value }); } } }, spacer, this.titleLabel] }, todolist]; this._super(o); }, updateTitleLabel: function(){ var completed = todos.filter(function(m){ return m.get(hasCheck) }).length; this.titleLabel.text = completed + / + todos.length + todos; } });
  65. 65. Polyfill missing UI"  Android lacks many simple UI modules! "  Navbar! "  TabbedBar! "  ButtonBar! "  Toolbar! "  Extendable TabBar""  Kranium implements these!
  66. 66. Polyfill missing UI
  67. 67. Polyfill missing UI
  68. 68. Extend Base UI K.createTableview({ pullToRefresh: true, refresh: function(){ K.ajax({ url: http://example.com/service.json, success: this.render }); }, render: function(data){ this.setData(data.rows.map(this.createRow)); }, createRow: function(o){ return K.createTableViewRow({ title: o.name }); } });
  69. 69. Livetanium"  Kranium integrates Livetanium!"  Gives you live updates of KSS style changes as well as module updates!
  70. 70. Jasminedescribe(Demo, function() { describe(Titanium Object, function(){ it(Ti == Titanium, function(){ expect(Titanium).toEqual(Ti); }); it(Ti.App, function(){ expect(Titanium).toBeDefined(); }); }); describe(TabGroup, function(){ it(Has tabgroup, function(){ expect(K(tabgroup).length).toBeGreaterThan(0); }); it(TabGroup.activeTab.title === "test", function(){ expect(K(tabgroup).get(0).activeTab.title).toEqual("test"); }); }); });
  71. 71. Console
  72. 72. Summary"  Consists of a command line program and an includable library!"  Ports the best web development libraries and technologies to Titanium!"  Polyfills parts missing between platforms!"  Helps you with your KISS:ing and keeps you DRY!
  73. 73. Available now"  Currently in open beta! "  Source under MIT License! "  Hosted on GitHub! "  Pull requests and co-maintainers welcome""  http://github.com/krawaller/kranium!
  74. 74. Available now"  Beware! "  There will be bugs! "  API far from frozen!
  75. 75. Available now"  Works best with iOS, but Android getting there!"  CLI works best on Mac OSX! "  Will be tested and fixed for Linux and Windows !
  76. 76. http://kraniumjs.com
  77. 77. Installation"  1. Install NodeJS and NPM!"  2. Run `npm install kranium`!"  3. There is no step 3!
  78. 78. Questions? http://flic.kr/p/7vB7fR!
  79. 79. Thank you + @litenjacob! jacob@krawaller.se!jacob.waller@logica.com!
  80. 80. Go contribute please! http://flic.kr/p/9C7DZZ!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×