iOS for Web Developers

A presentation comparing and contrasting front-end web development with front-end iOS development.

Transcript

1. Good morning. 1 Tuesday, June 26, 12
2. Who's a web dev? 2 Tuesday, June 26, 12 I’ve been doing web development way longer than native development. I still consider myself a web developer, even though I’m doing mostly native apps right now.
3. Who’s done native iOS? 3 Tuesday, June 26, 12
4. iOS for Web Developers Kevin Smith 4 Tuesday, June 26, 12
5. What’s ahead Front-end web vs. front-end iOS Compare & contrast Demos Tuesday, June 26, 12
6. Mental Map 6 Tuesday, June 26, 12
7. What is front-end? 7 Tuesday, June 26, 12
8. UI Creation 8 Tuesday, June 26, 12 used to be about web pages. more and more: app development.
9. Aspects of UI 9 Tuesday, June 26, 12
10. Style Setting the appearance of elements Tuesday, June 26, 12
11. Layout Setting the position and size of elements Tuesday, June 26, 12
12. Behavior Responding to user input and actions (clicking, hovering, etc.) Tuesday, June 26, 12
13. Animation Changing style or layout of elements over time Tuesday, June 26, 12
14. Typography Style and layout that is specific to text Tuesday, June 26, 12
15. Style Layout Behavior Animation Typography 15 Tuesday, June 26, 12
16. Declarative vs Programmatic 16 Tuesday, June 26, 12 http://en.wikipedia.org/wiki/Declarative_programming http://en.wikipedia.org/wiki/Imperative_programming
17. Declarative Specifying what you want, not how you want it accomplished Tuesday, June 26, 12
18. Programmatic Specifying what and how you want something accomplished Tuesday, June 26, 12
19. 19 Declarative Programmatic Style Layout Behavior Animation Typography Tuesday, June 26, 12
20. Front-end Web 20 Tuesday, June 26, 12
21. What are the pieces? 21 Tuesday, June 26, 12
22. 22 HTML CSS JavaScript Tuesday, June 26, 12
23. 23 Declarative Declarative Programmatic Declarative or Programmatic? Tuesday, June 26, 12
24. Style Declarative Tuesday, June 26, 12
25. Layout Declarative Tuesday, June 26, 12
26. Behavior Declarative & Programmatic Tuesday, June 26, 12
27. Animation Declarative & Programmatic Tuesday, June 26, 12
28. Typography Declarative Tuesday, June 26, 12
29. 29 HTML, CSS, JS Declarative Programmatic Style Layout Behavior Animation Typography Yes No Yes No Yes Yes Yes Yes Yes No Tuesday, June 26, 12 So we can see that traditional front-end web development is heavy on the declarative side
30. What are we missing? 30 Tuesday, June 26, 12
31. 31 Canvas Tuesday, June 26, 12 How many people have done stuff with canvas element?
32. Canvas Resolution-dependent bitmap canvas Powerful Most iOS-like piece of front-end web Tuesday, June 26, 12
33. 33 Canvas Declarative Programmatic Style Layout Behavior Animation Typography No Yes No Yes No Yes No Yes No Yes Tuesday, June 26, 12 http://code.google.com/p/jqcanvas/ http://js-fireworks.appspot.com/ http://www.html5rocks.com/en/tutorials/canvas/texteffects/ http://desandro.com/articles/prototyping-with-the-canvas-element/
34. Front-end iOS 34 Tuesday, June 26, 12
35. 35 HTML CSS JavaScript Tuesday, June 26, 12
36. So what do we have? 36 Tuesday, June 26, 12
37. 37 Canvas Tuesday, June 26, 12 Well, not quite.
38. 38 Core Graphics Tuesday, June 26, 12 Core graphics is the base drawing layer for iOS and OS X. Also referred to as Quartz. It’s awesome.
39. All about drawing. 39 Put your programming hat on. Tuesday, June 26, 12 At the core. Higher level objects available. Still use images for things you don’t want to draw. If you get that iOS is very much like using canvas for everything, you’re grokking!
40. Pieces of front-end iOS 40 Tuesday, June 26, 12
41. UIView & CALayer Core Graphics Objective-C 41 Tuesday, June 26, 12 UIKit encompasses the higher level objects that all sit on top of Core Graphics. Objective-C is the language that ties it all together.
42. UIView & CALayer 42 High-level building blocks for UI Tuesday, June 26, 12
43. UIView Rectangular area on the screen Interface for managing content and events Many standard subclasses: buttons, labels, etc. Tuesday, June 26, 12
44. CALayer Provide content for display Heart of animation Every UIView instance has one Awesome Tuesday, June 26, 12
45. Core Graphics 45 Low-level drawing APIs Tuesday, June 26, 12
46. Declarative 46 Tuesday, June 26, 12 Done through a limited set of object properties and interface builder.
47. UIView Declarative Properties alpha frame backgroundColor Tuesday, June 26, 12 more properties for each particular subclass
48. CALayer Declarative Properties frame opacity cornerRadius border shadow Tuesday, June 26, 12 shadow properties are available in 3.2+
49. Programmatic 49 Tuesday, June 26, 12
50. Programmatic Drawing UIView drawRect: CALayer drawInContext: Tuesday, June 26, 12
51. 51 iOS Declarative* Programmatic Style Layout Behavior Animation Typography Yes Yes Yes Yes No Yes Yes Yes Yes Yes *much more limited than web Tuesday, June 26, 12
52. Compare & Contrast 52 Tuesday, June 26, 12
53. Layout 53 Tuesday, June 26, 12 CSS: float, percentage size and position, margin, padding, position (absolute, relative) iOS: few declarative items: frame = origin + size. always position relative.
54. CSS Float Margin Padding Absolute and relative positioning Tuesday, June 26, 12 Also: HTML elements have a natural positioning or flow depending on where they are placed in the DOM.
55. CSS Tuesday, June 26, 12
56. iOS Frame origin size Autoresizing mask Tuesday, June 26, 12
57. Important Difference Always absolutely positioned Tuesday, June 26, 12
58. iOS Tuesday, June 26, 12 x, y, width, height (x,y) coordinates specify absolute position relative to the containing view
59. Tuesday, June 26, 12
60. y x x=50 y=50 x=482 y=417 Tuesday, June 26, 12
61. Style 61 Tuesday, June 26, 12 CSS: lots of declarative properties iOS: some declarative properties, can be fully controlled with drawing
62. CSS Tuesday, June 26, 12
63. iOS Tuesday, June 26, 12
64. Images still used a lot. 64 Tuesday, June 26, 12
65. Behavior 65 Tuesday, June 26, 12
66. JavaScript Tuesday, June 26, 12
67. iOS Tuesday, June 26, 12
68. Animation 68 Tuesday, June 26, 12
69. Web Tuesday, June 26, 12
70. iOS Tuesday, June 26, 12
71. Typography 71 Tuesday, June 26, 12
72. CSS Tuesday, June 26, 12
73. iOS Tuesday, June 26, 12 line height is no able to be set with UILabel instances. Have to resort to Core Text or web view.
74. This class does not support multiple styles for text. The font, color, and text alignment attributes you specify always apply to the entire contents of the text view. To display more complex styling in your application, you need to use a UIWebView object and render your content using HTML. Tuesday, June 26, 12 UITextView class documentation: http://developer.apple.com/library/ios/ #DOCUMENTATION/UIKit/Reference/UITextView_Class/Reference/UITextView.html
75. But remember… 75 Tuesday, June 26, 12
76. All about drawing. 76 You can draw your text, too. Tuesday, June 26, 12 using Core Text
77. Demos 77 Tuesday, June 26, 12
78. Canvas vs Core Graphics Click & Grow Falling Leaves Tuesday, June 26, 12
79. Thanks. 79 Tuesday, June 26, 12
80. http://kevinsmith.cc @kvnsmth 80 Tuesday, June 26, 12