Slide 1
Slide 1 text
iOS for web developers
site: http://benhowdle.im twitter: @benhowdle
Slide 2
Slide 2 text
Today’s menu
• Why give this talk?
• An Objective-C crash course
• The building blocks of an iOS app
• New things
• Warm & fuzzy familiar things
• Greener pastures & pain-points
Slide 3
Slide 3 text
Why give this talk?
Slide 4
Slide 4 text
http://benhowdle.im/2014/04/24/ios-for-web-developers-building-permeate/
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Objective-C
.page > #menu li:nth-child(2n+1) ~ a:focus
Not so fast on the hatin’
Slide 7
Slide 7 text
Classes & Objects
Slide 8
Slide 8 text
JavaScript
//definition
!
function MyClass(name){
this.name = name;
}
!
myClass.prototype.sayName = function(){
console.log(this.name);
}
!
// usage
!
var myClass = new MyClass("woz");
myClass.sayName(); // woz
Slide 9
Slide 9 text
Objective-C
// definition
!
// MyClass.h
@interface MyClass : NSObject
!
@property NSString *name;
!
- (id)initWithName:(NSString *)name;
- (void)sayName;
!
@end
// MyClass.m
#import "MyClass.h"
!
@implementation MyClass
- (id)initWithName:(NSString *)name {
if ((self = [super init])) {
_name = name;
}
return self;
}
!
- (void)sayName {
NSLog(@"%@", self.name);
}
@end
!
// usage
!
MyClass *myClass = [[MyClass alloc] initWithName:@"woz"];
[myClass sayName];
Interface (header) file Implementation file
Slide 10
Slide 10 text
Variables
Slide 11
Slide 11 text
JavaScript
var myNum = 2;
var myDictionary = {
foo: "bar"
}
var myArray = ["foo", "bar"];
Slide 12
Slide 12 text
Objective-C
NSNumber *myNum = @2;
NSDictionary *myDictionary = @{
@"foo": @"bar"
}
NSArray *myArray = @[@"foo", @"bar"];
Slide 13
Slide 13 text
Methods (functions)
Slide 14
Slide 14 text
JavaScript
function takeMyMoney(amount, inCurrency){
console.log(inCurrency + amount);
}
!
function takeMyMoney(amount, inCurrency, withAReceipt){
console.log(withAReceipt);
return inCurrency + amount;
}
!
takeMyMoney(42, "£"); // £42
takeMyMoney(42, "£", true); // £42
Slide 15
Slide 15 text
Objective-C
- (void)takeMyMoney:(NSNumber *)amount inCurrency:(NSString *)currency
{
NSLog(@"%@%@", currency, amount);
}
!
- (NSString *)takeMyMoney:(NSNumber *)amount inCurrency:(NSString
*)currency withReceipt:(BOOL)receipt {
NSLog(@"%@", receipt ? @"YES" : @"NO");
return [NSString stringWithFormat:@"%@%@", currency, amount];
}
!
[self takeMyMoney:@42 inCurrency:@"£"]; // £42
NSString *monies = [self takeMyMoney:@42 inCurrency:@"£"
withReceipt:YES]; // £42
Slide 16
Slide 16 text
Anatomy of an
iOS app
Slide 17
Slide 17 text
View Controllers
Slide 18
Slide 18 text
Objective-C
@interface FooViewController : UIViewController
!
@end
#import "FooViewController.h"
!
@interface FooViewController ()
!
@end
!
@implementation FooViewController
!
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
}
!
@end
Slide 19
Slide 19 text
Objective-C
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
!
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen
mainScreen] bounds]];
UIViewController *vc = [[ViewController alloc] init];
self.window.rootViewController = vc;
[self.window makeKeyAndVisible];
return YES;
!
}
Slide 20
Slide 20 text
UIViewController
UITableViewController
UINavigationController
Slide 21
Slide 21 text
Views
Slide 22
Slide 22 text
JavaScript
var button = document.createElement('div');
button.innerHTML = "Click me";
button.style.backgroundColor = "#f7f7f7";
button.style.color = "#222";
button.style.borderRadius = "4px";
button.style.width = "100px";
button.style.height = "25px";
document.querySelector('#mySidebar').appendChild(button);
Slide 23
Slide 23 text
Objective-C
UIButton *myButton = [[UIButton alloc] init];
myButton.frame = CGRectMake(0, 0, 100, 25);
[myButton setTitle:@"Tap me" forState:UIControlStateNormal];
myButton.layer.cornerRadius = 4;
myButton.backgroundColor = [UIColor blueColor];
myButton.titleLabel.textColor = [UIColor whiteColor];
[self.view addSubview:myButton];
Slide 24
Slide 24 text
New things to learn
Slide 25
Slide 25 text
Multithreading
Slide 26
Slide 26 text
Objective-C
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKG
ROUND, 0), ^ {
// intensive stuff, maybe a network request, or resizing an image
dispatch_async(dispatch_get_main_queue(), ^{
// back on the main thread to update the UI
});
});
Slide 27
Slide 27 text
Dependency
Management
Slide 28
Slide 28 text
Delegates
Slide 29
Slide 29 text
Objective-C
- (void)viewDidLoad
{
[super viewDidLoad];
self.passwordTextField = [[UITextField alloc] initWithFrame:CGRectMake(10, 316,
300, 44)];
self.passwordTextField.placeholder = @"Password";
self.passwordTextField.secureTextEntry = YES;
self.passwordTextField.delegate = self;
[self.view addSubview:self.passwordTextField];
}
!
-(BOOL)textFieldShouldReturn:(UITextField *)textField {
if(textField == self.passwordTextField){
[textField resignFirstResponder];
// do what we want now
return NO;
}
return YES;
}
Slide 30
Slide 30 text
No HTML
Slide 31
Slide 31 text
Typed language
Slide 32
Slide 32 text
Warm, fuzzy familiar
things
Slide 33
Slide 33 text
Handling Events
Slide 34
Slide 34 text
JavaScript
document.querySelector('#myButton').addEventListener('click', handleClick);
!
function handleClick(){
console.log('I was clicked');
}
Slide 35
Slide 35 text
Objective-C
UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer
alloc] initWithTarget:self action:@selector(handleSingleTap:)];
!
[self.myButton addGestureRecognizer:singleFingerTap];
!
- (void)handleSingleTap:(UITapGestureRecognizer *)recognizer {
NSLog(@"I was tapped");
}
Slide 36
Slide 36 text
Blocks
Slide 37
Slide 37 text
JavaScript
function someTask(callback){
// do some stuff
callback();
}
!
someTask(function(){
// someTask has been completed
});
!
function someTaskThatReturnsAName(callback){
callback("Neo");
}
!
someTaskThatReturnsAName(function(name){
console.log(name);
});
Slide 38
Slide 38 text
Objective-C
- (void)someTask:(void (^)(void))callback {
// do some stuff
callback();
}
!
[self someTask:^{
// someTask has been completed
}];
!
- (void)someTaskThatReturnsAName:(void (^)(NSString *))callback {
// do some stuff
callback(@"Neo");
}
!
[self someTaskThatReturnsAName:^(NSString *name){
NSLog(@"%@", name);
}];
Slide 39
Slide 39 text
Package Management
Slide 40
Slide 40 text
Images
Slide 41
Slide 41 text
HTML
Slide 42
Slide 42 text
Objective-C
// local
UIImage *img = [UIImage imageNamed:@"bg.jpeg"];
!
// remote
UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:
[NSURL URLWithString:@"http://www.placecage.com/g/200/300"]]];
!
UIImageView *bg = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:bg];
https://github.com/nicklockwood/AsyncImageView
Slide 43
Slide 43 text
AJAX & JSON
Slide 44
Slide 44 text
JavaScript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.reddit.com/r/earthporn.json', true);
!
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log(JSON.parse(xhr.responseText).data.children);
}
}
!
xhr.send();
Slide 45
Slide 45 text
Objective-C
NSURL *url = [NSURL URLWithString:@"http://www.reddit.com/r/earthporn.json"];
!
NSURLSessionDataTask *dataTask = [[NSURLSession sharedSession] dataTaskWithURL:url
completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if(error == nil){
id json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];
NSArray *results = [json valueForKeyPath:@“data.children”];
NSLog(@"%@", results);
}
}];
!
[dataTask resume];
Slide 46
Slide 46 text
Greener pastures
Slide 47
Slide 47 text
Fewer screen sizes
Slide 48
Slide 48 text
Xcode
Slide 49
Slide 49 text
Documentation
Slide 50
Slide 50 text
Views (vs. HTML)
Slide 51
Slide 51 text
Pain points
Slide 52
Slide 52 text
Learning curve
Slide 53
Slide 53 text
Deployments &
updating
Slide 54
Slide 54 text
Provisioning Portal
Slide 55
Slide 55 text
Thanks for listening…