leaving interface builder behind

89
Leaving Behind

Upload: john-wilker

Post on 12-May-2015

3.351 views

Category:

Technology


0 download

DESCRIPTION

Want to squeeze every last bit of performance out of your apps? I will show you how to let go of using Interface Builder to create better performing, more optimized, and leaner apps. I'll walk you through why it's better, how to create and move projects off of IB, building your UI in code, and how to gain a better understanding of how your code works from the ground up.

TRANSCRIPT

Page 1: Leaving Interface Builder Behind

Leaving Behind

Page 2: Leaving Interface Builder Behind

Hello.

• Jake Behrens

• iPhone/Mobile Developer

• UI Designer

Page 3: Leaving Interface Builder Behind

Hello.

• Freelancer (as of last Friday!)

Page 4: Leaving Interface Builder Behind
Page 5: Leaving Interface Builder Behind
Page 6: Leaving Interface Builder Behind
Page 7: Leaving Interface Builder Behind

Moments

• Choose, but choose wisely.

• Do it for the experience.

Page 8: Leaving Interface Builder Behind

30,000 Ft.

Page 9: Leaving Interface Builder Behind
Page 10: Leaving Interface Builder Behind
Page 11: Leaving Interface Builder Behind

Why?

• Knowledge.

• Code reuse.

• Performance.

• Custom = code.

• Tidbits here and there...

Page 12: Leaving Interface Builder Behind

A Story

Page 13: Leaving Interface Builder Behind
Page 14: Leaving Interface Builder Behind
Page 15: Leaving Interface Builder Behind

Delegates

Page 16: Leaving Interface Builder Behind

Delegates

Outlets

Page 17: Leaving Interface Builder Behind

Delegates

Outlets

Location

Page 18: Leaving Interface Builder Behind

Time

Page 19: Leaving Interface Builder Behind

Code Reuse

Page 20: Leaving Interface Builder Behind

Code vs. GUI

CGRect submitButtonFrame = CGRectMake(10.0, 276.0, 300.0, 130.0);UIImage *tempSubmitButtonUp = [UIImage imageNamed:@"SubmitButton_Up.png"];UIImage *tempSubmitButtonDown = [UIImage imageNamed:@"SubmitButton_Down.png"];submitButton = [UIButton buttonWithType:UIButtonTypeCustom];[submitButton setImage:tempSubmitButtonUp forState:UIControlStateNormal];[submitButton setImage:tempSubmitButtonDown forState:UIControlStateHighlighted];[submitButton setFrame:submitButtonFrame];[submitButton addTarget:self action:@selector(submitReport)

forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:submitButton];

Page 21: Leaving Interface Builder Behind

Snippets

www.snippetapp.com

Page 22: Leaving Interface Builder Behind

Performance

Page 23: Leaving Interface Builder Behind

Performance

• Benchmarks.

Page 24: Leaving Interface Builder Behind

Performance

• View-based application

Page 25: Leaving Interface Builder Behind

Performance

• View-based application

• With IB: 37ms

Page 26: Leaving Interface Builder Behind

Performance

• View-based application

• With IB: 37ms

• Without IB: 23ms

Page 27: Leaving Interface Builder Behind

Performance

• View-based application w/ UIImageView

Page 28: Leaving Interface Builder Behind

Performance

• View-based application w/ UIImageView

• With IB: 47ms

Page 29: Leaving Interface Builder Behind

Performance

• View-based application w/ UIImageView

• With IB: 47ms

• Without IB: 25ms

Page 30: Leaving Interface Builder Behind
Page 31: Leaving Interface Builder Behind
Page 32: Leaving Interface Builder Behind

Performance

Page 33: Leaving Interface Builder Behind

Performance

Page 34: Leaving Interface Builder Behind

Performance

1. Build your app.2. Run

> Run with Performance Tool > Core Animation

Page 35: Leaving Interface Builder Behind

Performance

Page 36: Leaving Interface Builder Behind

Performance

Page 37: Leaving Interface Builder Behind

Performance

• 14 elements in each cell.

Page 38: Leaving Interface Builder Behind

Performance

• 14 elements in each cell.

• With IB: 13-23 FPS

Page 39: Leaving Interface Builder Behind

Performance

• 14 elements in each cell.

• With IB: 13-23 FPS

• Without IB: 43-60 FPS

Page 40: Leaving Interface Builder Behind

Customizing

Iʼm a button!!

Page 41: Leaving Interface Builder Behind

Customizing

Iʼm a

button!!

Page 42: Leaving Interface Builder Behind

Customizing

[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:0];[UIView setAnimationDelegate:self];myButton.transform = CGAffineTransformMakeRotation

([Utilities degreesToRadians:45]);[UIView commitAnimations];

Page 43: Leaving Interface Builder Behind

Customizing

Iʼm a button!!

Page 44: Leaving Interface Builder Behind

Customizing

Iʼm a

button!!

Page 45: Leaving Interface Builder Behind

Tidbits & Food 4 Thought

Page 46: Leaving Interface Builder Behind

Source Control

Page 47: Leaving Interface Builder Behind

<string key="NSFrame">{{20, 20}, {280, 37}}</string>

Page 48: Leaving Interface Builder Behind

<string key="NSFrame">{{20, 20}, {280, 37}}</string>

Page 49: Leaving Interface Builder Behind

myButton.frame = CGRectMake(20.0, 20.0, 280.0, 37.0);

Page 50: Leaving Interface Builder Behind

myButton.frame = CGRectMake(20.0, 20.0, 280.0, 37.0);

Page 51: Leaving Interface Builder Behind

Refactor...

• When changing a method name.

• IB doesnʼt fix your action.

Page 52: Leaving Interface Builder Behind

Bug Report

• Great opportunity to tell Apple.

Page 53: Leaving Interface Builder Behind

“Premature optimization is the root

of all evil.”

Page 54: Leaving Interface Builder Behind

So now what?

Page 55: Leaving Interface Builder Behind
Page 56: Leaving Interface Builder Behind
Page 57: Leaving Interface Builder Behind

Tutorials!

Page 58: Leaving Interface Builder Behind

View-based Application

Page 59: Leaving Interface Builder Behind
Page 60: Leaving Interface Builder Behind
Page 61: Leaving Interface Builder Behind
Page 62: Leaving Interface Builder Behind

Resources

• Remove .xib files.

Page 63: Leaving Interface Builder Behind

main.m

#import <UIKit/UIKit.h>

int main(int argc, char *argv[]) { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; int retVal = UIApplicationMain(argc, argv, nil, nil); [pool release]; return retVal;}

Page 64: Leaving Interface Builder Behind

main.m

#import <UIKit/UIKit.h>

int main(int argc, char *argv[]) { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; int retVal = UIApplicationMain(argc, argv, nil, @”AppDelegate”); [pool release]; return retVal;}

Page 65: Leaving Interface Builder Behind

AppDelegate.h

#import <UIKit/UIKit.h>

@class DemoViewController;

@interface AppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; DemoViewController *viewController;}

@property (nonatomic, retain) IBOutlet UIWindow *window;@property (nonatomic, retain) IBOutlet DemoViewController *viewController;

@end

Page 66: Leaving Interface Builder Behind

AppDelegate.h

#import <UIKit/UIKit.h>

@class DemoViewController;

@interface AppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; DemoViewController *viewController;}

@property (nonatomic, retain) UIWindow *window;@property (nonatomic, retain) DemoViewController *viewController;

@end

Page 67: Leaving Interface Builder Behind

AppDelegate.m

- (void)applicationDidFinishLaunching:(UIApplication *)application { // Override point for customization after app launch [window addSubview:viewController.view]; [window makeKeyAndVisible];}

Page 68: Leaving Interface Builder Behind

AppDelegate.m

- (void)applicationDidFinishLaunching:(UIApplication *)application { window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];!! viewController = [[DemoViewController alloc] init];! // Override point for customization after app launch [window addSubview:viewController.view]; [window makeKeyAndVisible];}

Page 69: Leaving Interface Builder Behind

Custom Xcode Templates

Page 70: Leaving Interface Builder Behind

Why?

• Set it up the way you want it.

• Include libraries you use.

Page 71: Leaving Interface Builder Behind

Path of Originals

Page 72: Leaving Interface Builder Behind

AppDelegate.h

#import <UIKit/UIKit.h>

@class ___PROJECTNAMEASIDENTIFIER___ViewController;

@interface ___PROJECTNAMEASIDENTIFIER___AppDelegate : NSObject <UIApplicationDelegate> { UIWindow *window; ___PROJECTNAMEASIDENTIFIER___ViewController *viewController;}

@property (nonatomic, retain) IBOutlet UIWindow *window;@property (nonatomic, retain) IBOutlet ___PROJECTNAMEASIDENTIFIER___ViewController *viewController;

@end

Page 73: Leaving Interface Builder Behind

Points of Interest

• Delete the build folder.

• .xcodeproj

Page 74: Leaving Interface Builder Behind

Issues with updates...

Page 75: Leaving Interface Builder Behind

Path to Customs

Page 76: Leaving Interface Builder Behind

http://github.com/withfoam

Page 77: Leaving Interface Builder Behind

Graphical Elements In Code

Page 78: Leaving Interface Builder Behind

.h

#import <UIKit/UIKit.h>

@interface DemoViewController : UIViewController {! UILabel *displayText;}

@property (nonatomic, retain) UILabel *displayText;

@end

Page 79: Leaving Interface Builder Behind

.m#import "DemoViewController.h"

@implementation DemoViewController

@synthesize displayText;

#pragma mark -#pragma mark Application lifecycle

- (void)loadView {! [super loadView];!! displayText = [[UILabel alloc] init];! [displayText setFrame:CGRectMake(20.0, 20.0, 280.0, 30.0)];! [displayText setText:@"Hello 360iDev!"];! [displayText setFont:[UIFont fontWithName:@"Helvetica" size:14.0]];! [self.view addSubview:displayText];}

Page 80: Leaving Interface Builder Behind

.m

- (void)dealloc {! [displayText release]; [super dealloc];}

Page 81: Leaving Interface Builder Behind

Yay...

Page 82: Leaving Interface Builder Behind

.m

- (void)loadView {! [super loadView];!! displayText = [[UILabel alloc] init];! [displayText setFrame:CGRectMake(20.0, 20.0, 280.0, 30.0)];! [displayText setText:@"Hello 360iDev!"];! [displayText setFont:[UIFont fontWithName:@"Helvetica" size:24.0]];! [displayText setBackgroundColor:[UIColor blackColor]];! [displayText setTextColor:[UIColor greenColor]];! [displayText setTextAlignment:UITextAlignmentCenter];! [self.view addSubview:displayText];}

Page 83: Leaving Interface Builder Behind

Yay...

Page 84: Leaving Interface Builder Behind

UIButton...again.

CGRect submitButtonFrame = CGRectMake(10.0, 276.0, 300.0, 130.0);UIImage *tempSubmitButtonUp = [UIImage imageNamed:@"SubmitButton_Up.png"];UIImage *tempSubmitButtonDown = [UIImage imageNamed:@"SubmitButton_Down.png"];submitButton = [UIButton buttonWithType:UIButtonTypeCustom];[submitButton setImage:tempSubmitButtonUp forState:UIControlStateNormal];[submitButton setImage:tempSubmitButtonDown forState:UIControlStateHighlighted];[submitButton setFrame:submitButtonFrame];[submitButton addTarget:self action:@selector(submitReport) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:submitButton];

Page 85: Leaving Interface Builder Behind

RE:cap

• Increased performance.

• Organization.

• Little things.

Page 86: Leaving Interface Builder Behind

Tuts

• Revert apps created for IB.

• Create customized project templates.

• Create graphical elements and objects in code.

Page 87: Leaving Interface Builder Behind

Yell at me.

• http://jakebehrens.com

• @withfoam

• http://withfoam.com

• http://github.com/withfoam

Page 88: Leaving Interface Builder Behind

Feel lucky?

• R634EJ39MA44

• 77Y7YEL9F6AR

• 3EKR3FAETJPF

• 4KT7EMWHP47P

• EMM4H9XTF6JT

• ERMFPKRR69X6

Page 89: Leaving Interface Builder Behind

Hecklers? Questions?