This document summarizes a presentation about building native mobile apps using JavaScript with Titanium. The presentation covers Appcelerator and how it allows JavaScript code to be compiled to native iOS and Android apps rather than web views. It also discusses Titanium's SDK and cross-platform APIs, Alloy's MVC framework for Titanium, and Hyperloop which allows accessing any third party APIs from JavaScript. The slides from the presentation will be shared on Twitter the next morning.
An introduction the big picture of the Appcelerator Platform and the architecture and principles behind Titanium and Alloy to get you started. Created and presented by myself and Pierre van de Velde at meetup.com/TitaniumNL.
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
An introduction the big picture of the Appcelerator Platform and the architecture and principles behind Titanium and Alloy to get you started. Created and presented by myself and Pierre van de Velde at meetup.com/TitaniumNL.
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
Cross-platform Native App ontwikkeling met AppceleratorFokke Zandbergen
Lezing voor de SIG Apps en de Regio Den Haag van Ngi-NGN op De Haagse Hogeschool over cross-platform native app ontwikkeling met Appcelerator Titanium en Alloy.
An introduction to PhantomJS: A headless browser for automation test.BugRaptors
PhantomJS has a whole set of features that testers love and use for many purposes. It is primarily used for a headless testing of web applications. PhantomJS fits for both as a part of a constant integration system and universal command-line based testing. It is important to recall that PhantomJS itself is not a testing framework, it is only engaged to launch the tests through a suitable test runner.
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014Andrew McElroy
Acceptance testing has become a crucial step of software development,
but it has been a noticeably missing piece of the Titanium mobile
application development puzzle. TiCalabash is a new tool, developed
specifically for Titanium to bring mobile development a significant step
forward in reducing time and resource risk and increasing user acceptance
and overall quality of development. Fully automated, using human-readable
language, and offering full end-to-end acceptance testing, TiCalabash should
be a major part of your mobile development toolbox.
Firefox OS is a new mobile operating system, developed by Mozilla,which lets users install and run open web applications created using HTML, CSS, and JavaScript.We'll explain the best practices for a cross platform porting to Titanium Mobile Web and the guidelines for the deployment on this new cool platform.
“The call to kill Adobe’s Flash in favour of HTML5 is rising...” This and similar statements mean that many web applications might now contain old and vulnerable SWF files as their developers have to concentrate on developing non-Flash contents. We may all hope that we never have to see Flash files ever again! However, as long as web browsers continue their support for Flash, web applications can be vulnerable to client-side issues and it is important for a penetration tester or a bug bounty hunter to have the right skills to find vulnerable SWF files. This presentation aids eager testers to identify security issues in the SWF files manually and automatically using certain techniques and tools.
PowerPoint File:
https://soroush.secproject.com/downloadable/flash_it_baby_v2.0.pptx
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Rob Friesel
Jasmine is a mature BDD test framework for JavaScript, and though powerful and feature-rich in its own right, you are often still shackled to a browser window to conduct your tests. Tools like Selenium WebDriver make automated testing possible, but they are difficult to set up, cumbersome to use, and worst of all slow. Wouldn't it be nice if you could execute your tests as part of your build? And have those tests before completed in seconds? With PhantomJS ("the headless WebKit") that wish has come true. In this talk we will introduce the Jasmine BDD test framework, introduce PhantomJS, and demonstrate how to execute your Jasmine tests in PhantomJS for lightning fast results.
The code and discussion points from this talk appear on Github: https://github.com/founddrama/vt-code-camp-2012
UPDATE (July 2014): this talk became the seed for this book that I wrote: "The PhantomJS Cookbook" - http://goo.gl/NJnFq1
With the big delays in the time it takes until an iOS jailbreak is public and stable, it is often not possible to test mobile apps in the latest iOS version. Occasionally customers might also provide builds that only work in iOS versions for which no jailbreak is available. On Android the situation is better, but there can also be problems to root certain phone models. These trends make security testing of mobile apps difficult. This talk will cover approaches to defeat common security mechanisms that must be bypassed in the absence of root/jailbreak.
How QCLean Works? Introduction to Browser ExtensionsQing-Cheng Li
* Introduction to QCLean and browser extensions.
* How to write a simple chrome extension and how QCLean removes suggested pages and posts on Facebook newsfeed.
* How to inject code and override DOM prototype on webpages.
UI Testing Automation - Alex Kalinovsky - CreamTec LLCJim Lane
Presentation by CreamTec CEO Alex Kalinovsky at the March NoVA UX meetup at AddThis. Alex talks about the importance of visual interface testing, current tools and methodologies, and introduces his company's solution called Screenster.
Cross-platform Native App ontwikkeling met AppceleratorFokke Zandbergen
Lezing voor de SIG Apps en de Regio Den Haag van Ngi-NGN op De Haagse Hogeschool over cross-platform native app ontwikkeling met Appcelerator Titanium en Alloy.
An introduction to PhantomJS: A headless browser for automation test.BugRaptors
PhantomJS has a whole set of features that testers love and use for many purposes. It is primarily used for a headless testing of web applications. PhantomJS fits for both as a part of a constant integration system and universal command-line based testing. It is important to recall that PhantomJS itself is not a testing framework, it is only engaged to launch the tests through a suitable test runner.
TiCalabash: Fully automated Acceptance Testing @ TiConf EU 2014Andrew McElroy
Acceptance testing has become a crucial step of software development,
but it has been a noticeably missing piece of the Titanium mobile
application development puzzle. TiCalabash is a new tool, developed
specifically for Titanium to bring mobile development a significant step
forward in reducing time and resource risk and increasing user acceptance
and overall quality of development. Fully automated, using human-readable
language, and offering full end-to-end acceptance testing, TiCalabash should
be a major part of your mobile development toolbox.
Firefox OS is a new mobile operating system, developed by Mozilla,which lets users install and run open web applications created using HTML, CSS, and JavaScript.We'll explain the best practices for a cross platform porting to Titanium Mobile Web and the guidelines for the deployment on this new cool platform.
“The call to kill Adobe’s Flash in favour of HTML5 is rising...” This and similar statements mean that many web applications might now contain old and vulnerable SWF files as their developers have to concentrate on developing non-Flash contents. We may all hope that we never have to see Flash files ever again! However, as long as web browsers continue their support for Flash, web applications can be vulnerable to client-side issues and it is important for a penetration tester or a bug bounty hunter to have the right skills to find vulnerable SWF files. This presentation aids eager testers to identify security issues in the SWF files manually and automatically using certain techniques and tools.
PowerPoint File:
https://soroush.secproject.com/downloadable/flash_it_baby_v2.0.pptx
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Rob Friesel
Jasmine is a mature BDD test framework for JavaScript, and though powerful and feature-rich in its own right, you are often still shackled to a browser window to conduct your tests. Tools like Selenium WebDriver make automated testing possible, but they are difficult to set up, cumbersome to use, and worst of all slow. Wouldn't it be nice if you could execute your tests as part of your build? And have those tests before completed in seconds? With PhantomJS ("the headless WebKit") that wish has come true. In this talk we will introduce the Jasmine BDD test framework, introduce PhantomJS, and demonstrate how to execute your Jasmine tests in PhantomJS for lightning fast results.
The code and discussion points from this talk appear on Github: https://github.com/founddrama/vt-code-camp-2012
UPDATE (July 2014): this talk became the seed for this book that I wrote: "The PhantomJS Cookbook" - http://goo.gl/NJnFq1
With the big delays in the time it takes until an iOS jailbreak is public and stable, it is often not possible to test mobile apps in the latest iOS version. Occasionally customers might also provide builds that only work in iOS versions for which no jailbreak is available. On Android the situation is better, but there can also be problems to root certain phone models. These trends make security testing of mobile apps difficult. This talk will cover approaches to defeat common security mechanisms that must be bypassed in the absence of root/jailbreak.
How QCLean Works? Introduction to Browser ExtensionsQing-Cheng Li
* Introduction to QCLean and browser extensions.
* How to write a simple chrome extension and how QCLean removes suggested pages and posts on Facebook newsfeed.
* How to inject code and override DOM prototype on webpages.
UI Testing Automation - Alex Kalinovsky - CreamTec LLCJim Lane
Presentation by CreamTec CEO Alex Kalinovsky at the March NoVA UX meetup at AddThis. Alex talks about the importance of visual interface testing, current tools and methodologies, and introduces his company's solution called Screenster.
Getting started with Appcelerator TitaniumTechday7
Techday7, Cross platform application development using Appcelerator Titanium event's Getting started with Appcelerator Titanium By Naga Harish M, Lead Developer of Anubavam Technologies
Busy Developer's Guide to Windows 8 HTML/JavaScript AppsJAX London
With the upcoming release of Windows 8, Microsoft decided to bring HTML+Javascript into the world of Windows-platform application development as a first-class citizen. But make no mistake, this isn’t an attempt to somehow subvert Web developers—it’s more about enabling Web developers to leverage those skills in building “native” Windows applications running on the Windows 8 laptops, desktops, and slates. In this presentation, we’ll go over the basics of building a Windows 8 app using HTML and JavaScript, including a brief overview of what’s possible—and what’s not—for the Web developer seeking to “go native” on Windows.
Cross Platform Mobile Apps with the Ionic FrameworkTroy Miles
What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps.
Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions.
In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device.
Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin
Do you want to build native mobile apps for iOS and Android? Are you a web developer? Then NativeScript is the perfect framework for you. NativeScript is an open source framework for creating native mobile apps using the skills of the web developer: JavaScript, CSS and simple tag-based markup. Create rich, high-performance iOS and Android apps with 100% native UI using many of the skills you already have.
Topics covered include:
NativeScript framework core concepts and getting started
Accessing native device capabilities with JavaScript
Building native mobile apps with Angular 2
Common app patterns (login, settings, data bound list and more)
Styling NativeScript with CSS
Targeting specific devices and screens
Debugging and deploying to devices
There has never been a better (and easier) way for web developers to create native mobile apps.
Hyperloop is not only a super cool high speed tube drive train by Elon Musk. It’s also a new exciting compiler from Appcelerator. Appcelerator is known for their cross-platform product Titanium. Hyperloop lets you write your apps in JavaScript and compiles it into optimized native code, you can even call native SDKs on the supported platforms (Android, iOS, Windows 8 and Windows Phone 8). This makes it conceptually close to Xamarin but the additional benefit of having Titanium’s cross-platform API on top of it so you can write cross-platform UI code. The compiler is part of Ti.Next the complete re-envisioning of the Titanium platform. But you can already start playing with this new cool technology as Hyperloop is open sourced on github. Com and hear more about it and see it in action!
Hyperloop will make Titanium more native then ever, but also more standard JavaScript at the same time. As an example, the API will now be fully prototypal, and because it’s all (Hyperloop) JavaScript you can extend every bit of it without touching Objective-C or JAVA.
Similar to Building Native Mobile Apps using Javascript with Titanium (20)
Lessons from helping developers integrate 1,000 APIs with ZapierFokke Zandbergen
Talk at a Nordic APIs webcast (LiveCast) on API Usability & Developer Experience
https://nordicapis.com/sessions/lessons-helping-developers-integrate-1000-apis-zapier/
Introduction Cross-Platform Native App development with JavaScript using Appcelerator Titanium and Alloy for an internal developer forum of a European multinational.
Presentation on August 19 for Hamburg Titanium (DE) about Appcelerator's Open Source Software and Platform. The difference, how to start and why consider switching.
I gave this talk at Connect.JS in Atlanta, October 17-18 20014
See: http://fokkezb.nl/tag/ticonnect
Though Studio has improved a lot, the CLI has as well - allowing you to use your own favourite editor instead and even increase your productivity by using some community-developed tools like TiShadow, gitTio, Grunt, TiCons, Ti-Inspector, STSS and many more.
A short presentation I have at the TitaniumNL.org meetup on October 1st, 2014. It goes through what you need to get your development environment and apps ready for iOS 8 and iPhone 6 and 6 Plus.
Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.
An in-depth look at the new Alloy MVC-framework for Appcelerator's Titanium platform.
Check the demo source code and links to resources to get you started on Alloy at: http://fokkezb.nl/alloy
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
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
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.
28.
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