iOS for Web Developers

Transcript

1. iOS for web developers site: http://benhowdle.im twitter: @benhowdle
2. 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
3. Why give this talk?
4. http://benhowdle.im/2014/04/24/ios-for-web-developers-building-permeate/
6. Objective-C .page > #menu li:nth-child(2n+1) ~ a:focus Not so fast on the hatin’
7. Classes & Objects
8. 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
9. 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
10. Variables
11. JavaScript var myNum = 2; var myDictionary = { foo: "bar" } var myArray = ["foo", "bar"];
12. Objective-C NSNumber *myNum = @2; NSDictionary *myDictionary = @{ @"foo": @"bar" } NSArray *myArray = @[@"foo", @"bar"];
13. Methods (functions)
14. 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
15. 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
16. Anatomy of an iOS app
17. View Controllers
18. Objective-C @interface FooViewController : UIViewController ! @end #import "FooViewController.h" ! @interface FooViewController () ! @end ! @implementation FooViewController ! - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor whiteColor]; } ! @end
19. 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; ! }
20. UIViewController UITableViewController UINavigationController
21. Views
22. 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);
23. 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];
24. New things to learn
25. Multithreading
26. 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 }); });
27. Dependency Management
28. Delegates
29. 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; }
30. No HTML
31. Typed language
32. Warm, fuzzy familiar things
33. Handling Events
34. JavaScript document.querySelector('#myButton').addEventListener('click', handleClick); ! function handleClick(){ console.log('I was clicked'); }
35. Objective-C UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)]; ! [self.myButton addGestureRecognizer:singleFingerTap]; ! - (void)handleSingleTap:(UITapGestureRecognizer *)recognizer { NSLog(@"I was tapped"); }
36. Blocks
37. 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); });
38. 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); }];
39. Package Management
40. Images
41. HTML <img src="/images/face.png" /> <img src="http://www.placecage.com/g/200/300" />
42. 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
43. AJAX & JSON
44. 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();
45. 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];
46. Greener pastures
47. Fewer screen sizes
48. Xcode
49. Documentation
50. Views (vs. HTML)
51. Pain points
52. Learning curve
53. Deployments & updating
54. Provisioning Portal
55. Thanks for listening…