Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOS for Web Developers

iOS for Web Developers

Bdd5d90c48d9d0762878782e16a05992?s=128

Ben Howdle

August 22, 2014
Tweet

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/

  5. None
  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…