Write iOS apps in Javascript! JavaScriptBridge provides the way to write iOS apps with JavaScript. JavaScriptBridge bridges Cocoa touch to JavaScriptCore (JavaScriptCore.framework is introduced in iOS 7).
// Retrieve the prepared context
JSContext *context = [JSBScriptingSupport globalContext];
// Add framework support if needed.
// ('Foundation', 'UIKit', 'QuartzCore' enabled by default.)
[context addScriptingSupport:@"MapKit"];
[context addScriptingSupport:@"MessageUI"];
// Evaluate script
[context evaluateScript:
@"var window = UIWindow.new();"
@"window.frame = UIScreen.mainScreen().bounds;"
@"window.backgroundColor = UIColor.whiteColor();"
@"window.makeKeyAndVisible();"
];Class name
- Same as Objectige-C
Variable declaration
- Get rid of
Typeinstead usevar
UILabel *label;var label;Properties
- Use dot syntax
UISlider *slider = [[UISlider alloc] initWithFrame:frame];
slider.backgroundColor = [UIColor clearColor];
slider.minimumValue = 0.0;
slider.maximumValue = 100.0;
slider.continuous = YES;
slider.value = 50.0;var slider = UISlider.alloc().initWithFrame(frame);
slider.backgroundColor = UIColor.clearColor();
slider.minimumValue = 0.0;
slider.maximumValue = 100.0;
slider.continuous = true;
slider.value = 50.0;Invoking method
- Use dot syntax
- All colons are removed from the selector
- Any lowercase letter that had followed a colon will be capitalized
UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];var window = UIWindow.alloc().initWithFrame(UIScreen.mainScreen().bounds);Struct (CGRect, NSRange, etc.)
- Use Hashes
UIView *view = [UIView new];
view.frame = CGRectMake(20, 80, 280, 80);
CGFloat x = view.frame.origin.x;
CGFloat width = view.frame.size.width;var view = UIView.new();
view.frame = {x: 20, y: 80, width: 280, height: 80};
var x = view.frame.x; // => 20
var width = view.frame.width; // => 280###Hello world on JavaScriptBridge
This is the most simple way.
@implementation JSBAppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
JSContext *context = [JSBScriptingSupport globalContext];
[context evaluateScript:
@"var window = UIWindow.new();"
@"window.frame = UIScreen.mainScreen().bounds;"
@"window.backgroundColor = UIColor.whiteColor();"
@""
@"var navigationController = UINavigationController.new();"
@"var viewController = UIViewController.new();"
@"viewController.navigationItem.title = 'Make UI with JavaScript';"
@""
@"var view = UIView.new();"
@"view.backgroundColor = UIColor.redColor();"
@"view.frame = {x: 20, y: 80, width: 280, height: 80};"
@""
@"var label = UILabel.new();"
@"label.backgroundColor = UIColor.blueColor();"
@"label.textColor = UIColor.whiteColor();"
@"label.text = 'Hello World.';"
@"label.font = UIFont.boldSystemFontOfSize(24);"
@"label.sizeToFit();"
@""
@"var frame = label.frame;"
@"frame.x = 10;"
@"frame.y = 10;"
@"label.frame = frame;"
@""
@"view.addSubview(label);"
@"viewController.view.addSubview(view);"
@""
@"navigationController.viewControllers = [viewController];"
@""
@"window.rootViewController = navigationController;"
@"window.makeKeyAndVisible();"
];
return YES;
}
@end###Writing apps with only JavaScript
See the UICatalog example.
###Define custom classes
You can define custom class in JavaScript. It is needs to interact system provided framework.
var MainViewController = JSB.define('MainViewController : UITableViewController <UITableviewDataSource, UITableviewDelegate>', // Declaration
// Instance Method Definitions
{
viewDidLoad: function() {
self.navigationItem.title = 'UICatalog';
},
tableViewNumberOfRowsInSection: function(tableView, section) {
return self.menuList.length;
},
tableViewCellForRowAtIndexPath: function(tableView, indexPath) {
var cell = UITableViewCell.alloc().initWithStyleReuseIdentifier(3, 'Cell');
cell.accessoryType = 1;
cell.textLabel.text = self.menuList[indexPath.row]['title'];
cell.detailTextLabel.text = self.menuList[indexPath.row]['explanation'];
return cell;
},
tableViewDidSelectRowAtIndexPath: function(tableView, indexPath) {
var targetViewController = self.menuList[indexPath.row]['viewController'];
self.navigationController.pushViewControllerAnimated(targetViewController, true);
}
});###Modules
JavaScriptBridge provides simple module system require/exports funcitons, like Node.js.
See example.
var ButtonsViewController = JSB.require('buttonsViewController');
var ControlsViewController = JSB.require('controlsViewController');
var WebViewController = JSB.require('webViewController');
var MapViewController = JSB.require('mapViewController');
var MainViewController = JSB.define('MainViewController : UITableViewController', {
viewDidLoad: function() {
self.navigationItem.title = 'UICatalog';
// 〜〜
});
JSB.exports = MainViewController;- iOS 7 or later
- JavaScriptCore.framework
JavaScriptBridge is available through CocoaPods, to install it simply add the following line to your Podfile:
pod "JavaScriptBridge"
kishikawa katsumi, [email protected]
JavaScriptBridge is available under the MIT license. See the LICENSE file for more info.