Building Native Mobile Apps using Javascript with Titanium

Building Native Mobile Apps using Javascript with Titanium

Introducing Titanium, Alloy and Hyperloop to the JavaScript Lab Meetup on January 18th, 2016.

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

January 18, 2016
Tweet

Transcript

  1. JavaScript Lab January 18, 2016 Building Native Mobile Apps using

    Javascript with Titanium
  2. Fokke Zandbergen Developer Evangelist Appcelerator @FokkeZB

  3. Program 1. Appcelerator: More than Apps 2. JS2Native: No WebView

    3. Titanium: SDK & Cross-Platform API 4. Alloy: MVC for Titanium 5. Hyperloop: Access any (3P) API in JS Slides will be linked from @FokkeZB tomorrow morning
  4. Appcelerator: More than Apps

  5. And Why This is Great News for All

  6. None
  7. None
  8. None
  9. 2 Native

  10. NO!

  11. HTML Apps  !

  12. HTML Apps

  13. JS2Native

  14. Titanium

  15. Architecture Alloy Codebase Development JavaScript Package Run-time Titanium Module APIs

    Titanium Core APIs Hyperloop APIs Kroll (iOS/Android) HAL (Windows) 3P APIs OS Device & UI APIs Platform
  16. Hello World var window = Ti.UI.createWindow({ backgroundColor: “white" }); var

    label = Ti.UI.createLabel({ text: “Hello World” }); label.addEventListener(“click”, function open() { alert(“Hello World”); } ); window.add(label); window.open(); Ti API
  17. Ti.createMyFartApp() Ti.UI.createX() // Cross-platform UI View factories Ti.UI.X // The

    UI View proxy the factory creates Ti.UI.iOS.X // Platform specific UI View factories Ti.X // Cross-platform device APIs Ti.Android.X // Platform specific device APIs require(“ti.map”).X // CommonJS & Titanium Modules
  18. docs.appcelerator.com

  19. File Structure ▾ Resources ▾ images logo.png app.js main.js utils.js

    tiapp.xml config code
  20. None
  21. Alloy MVC

  22. Classic Spaghetti var window = Ti.UI.createWindow({ backgroundColor: “white" }); var

    label = Ti.UI.createLabel({ text: “Hello World” }); label.addEventListener(“click”, function open() { alert(“Hello World”); } ); window.add(label); window.open(); style logic markup
  23. <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy> ”Window”: { backgroundColor:

    “white” } function open() { alert(“Hello World”); } $.index.open(); index.xml index.tss index.js Alloy
  24. ▸ app ▾ Resources ▾ alloy ▾ controllers index.js backbone.js

    CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.js tiapp.xml ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml ▾ app ▾ assets ▾ images
 logo.png ▾ controllers index.js ▾ lib utils.js ▾ styles index.tss ▾ views index.xml ▾ widgets alloy.js config.json tiapp.xml File Structure
  25. What happens to your XML and TSS? <Foo> <Foo ns=“Ti.bar”>

    <Foo module=“bar”> <Require src=“foo”>
 <Widget src=“foo”>
 <Foo id=“bar”> <Foo bar=“zoo”>
 
 “#bar”: {
 color: “white”
 } Ti.UI.createFoo(); Ti.bar.createFoo(); require(“bar”).createFoo(); Alloy.createController(“foo”)
 .getView(); Alloy.createWidget(“foo”)
 .getView(); $.bar = Ti.UI.createFoo(); Ti.UI.createFoo({
 bar: “zoo”
 }); $.bar = Ti.UI.createFoo({
 color: “white”
 });
  26. A lote more.. • Platform specific code blocks and assets

    • Platform/Environment specific config file • Underscore + Moment.js: built-in libraries • Backbone.js: events, models and data-binding • Alloy Themes: Ideal for white label apps • Alloy Widgets: Re-use code across apps • …
  27. None
  28. None
  29.  var blur = require('bencoding.blur'); var view = blur.createBasicBlurView({ blurRadius:

    5, image: '/images/background.png' }); var window = Ti.UI.createWindow(); window.add(view); window.open(); How you used to extend Titanium
  30. Hyperloop for Windows var Window = require('Windows.UI.Xaml.Window'), TextBlock = require('Windows.UI.Xaml.Controls.TextBlock'),

    Colors = require('Windows.UI.Colors'), SolidColorBrush = require('Windows.UI.Xaml.Media.SolidColorBrush'); var text = new TextBlock(); text.Text = 'Hello, world!'; text.FontSize = 50; text.Foreground = new SolidColorBrush(Colors.Red); var window = Window.Current, window.Content = text; window.Activate();
  31.  var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var

    UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment"); var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor()); var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label); TiApp.app().showModalController(viewController, false); Hyperloop for iOS
  32.  var Hyperloop = require("hyperloop"); var TiApp = require("TiApp"); var

    UIViewController = require("UIViewController"); var UILabel = require("UILabel"); var UIColor = require("UIColor"); var UIScreen = require("UIScreen"); var CGRect = require("CGRect"); var NSTextAlignment = require("NSTextAlignment"); var label = UILabel.initWithFrame(CGRect.Make(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height )); label.setText('Hello World!'); label.setTextColor(UIColor.redColor()); var viewController = UIViewController.init(); viewController.view.setBackgroundColor(UIColor.whiteColor()); viewController.view.addSubview(label); TiApp.app().showModalController(viewController, false); Hyperloop for iOS
  33. Hyperloop for Android var TextView = require('android.widget.TextView'), Activity = require('android.app.Activity'),

    Color = require('android.graphics.Color'), RelativeLayout = require('android.widget.RelativeLayout'), Gravity = require('android.view.Gravity'), TypedValue = require('android.util.TypedValue'); var text = new TextView(activity); text.setText("Hello World!"); text.setTextColor(Color.RED); text.setTextSize(TypedValue.COMPLEX_UNIT_PX, 60); var layout = new RelativeLayout(activity); layout.setGravity(Gravity.CENTER); layout.setBackgroundColor(Color.BLACK); layout.addView(text); var activity = new Activity(Ti.Android.currentActivity); activity.setContentView(layout);
  34. var text = Ti.UI.createLabel({ text: "Hello, world!", font: { fontSize:

    60 }, color: 'red' }); var window = Ti.UI.createWindow(); window.add(text); window.open(); Abstraction can be good
  35. labs.appcelerator.com

  36. www.appcelerator.com/signup

  37. Slides will be linked from @FokkeZB tomorrow morning Thank You

    !