×
Copy
Open
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Go Native(-ish)! ! Tim G. Thomas
Slide 2
Slide 2 text
Go Native(-ish)! PrairieDevCon 2014 Photo Source: Wikipedia User Magnus Manske
Slide 3
Slide 3 text
Tim G. Thomas frog
[email protected]
@timgthomas
Slide 4
Slide 4 text
#nativeish
Slide 5
Slide 5 text
Today Web apps
Slide 6
Slide 6 text
Today Web apps Mobile devices
Slide 7
Slide 7 text
Your Options Native ! Hybrid ! Web
Slide 8
Slide 8 text
Your Options Native ! Hybrid Native(-ish) Web
Slide 9
Slide 9 text
Why to Go Native-ish Build with web tools No approval process Rapid deployment
Slide 10
Slide 10 text
However... Limited discoverability Some missing hardware APIs High standards for comparison
Slide 11
Slide 11 text
Agenda Design Development Debugging
Slide 12
Slide 12 text
Design
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Experience Design
Slide 15
Slide 15 text
Experience Design Navigation Bars !
Slide 16
Slide 16 text
Experience Design Navigation Bars “Stacks”
Slide 17
Slide 17 text
Experience Design Navigation Bars “Stacks” Long-Presses
Slide 18
Slide 18 text
Experience Design bit.ly/prdc-apple bit.ly/prdc-android
Slide 19
Slide 19 text
Visual Design
Slide 20
Slide 20 text
Visual Design Skeuomorphism !
Slide 21
Slide 21 text
Visual Design Skeuomorphism Bold, bright colors
Slide 22
Slide 22 text
Visual Design Skeuomorphism Bold, bright colors Translucency
Slide 23
Slide 23 text
Demo Off-the-Shelf Options
Slide 24
Slide 24 text
Development
Slide 25
Slide 25 text
Development Pin Apps Simulate Behavior Tweak UI Go Offline
Slide 26
Slide 26 text
Step 1 Pin Apps
Slide 27
Slide 27 text
App Pinning Mobile Safari Google Chrome
Slide 28
Slide 28 text
To-Do: Pin Apps Remove browser frame Prevent resizing and scrolling Prevent links from opening a new window
Slide 29
Slide 29 text
Remove Browser Frame
Slide 30
Slide 30 text
Remove Browser Frame
Slide 31
Slide 31 text
Prevent Resizing
Slide 32
Slide 32 text
Prevent Scrolling $(document).on('touchmove', function() { return false; });
Slide 33
Slide 33 text
Demo Step 1: App Pinning
Slide 34
Slide 34 text
Step 2 Simulate Behavior
Slide 35
Slide 35 text
To-Do: Simulate Behavior Use custom keyboards Support additional user inputs
Slide 36
Slide 36 text
Custom Keyboards
Slide 37
Slide 37 text
Custom Keyboards Text ! !
Slide 38
Slide 38 text
Custom Keyboards Text Email !
Slide 39
Slide 39 text
Custom Keyboards Text Email Date
Slide 40
Slide 40 text
Custom Keyboards Text Email Date Numeric Range
Slide 41
Slide 41 text
Additional Inputs File !
Slide 42
Slide 42 text
Additional Inputs File Location
Slide 43
Slide 43 text
Additional Inputs File Location
Slide 44
Slide 44 text
Additional Inputs: Location navigator .geolocation .getCurrentPosition(function(position) { ! // position.coords.latitude; ! // position.coords.longitude; ! });
Slide 45
Slide 45 text
Additional Inputs: Acceleration bit.ly/prdc-accel
Slide 46
Slide 46 text
Tweak UI Step 3
Slide 47
Slide 47 text
To-Do: Tweak UI Add home screen icon Use device fonts
Slide 48
Slide 48 text
Home Screen Icons 196x196 ! 152x152
Slide 49
Slide 49 text
Home Screen Icons ! ! !
Slide 50
Slide 50 text
Device Fonts -apple-system-headline ! -apple-system-subheadline ! -apple-system-body ! ! -apple-system-font
Slide 51
Slide 51 text
Demo Step 3: Tweak UI
Slide 52
Slide 52 text
Go Offline Step 4
Slide 53
Slide 53 text
To-Do: Go Offline Cache infrequently-changing files Store data locally
Slide 54
Slide 54 text
Application Cache (AppCache)
Slide 55
Slide 55 text
AppCache CACHE MANIFEST ! LOCAL: /apple-touch-icon.png ! NETWORK: * ! FALLBACK: /login /offline.html
Slide 56
Slide 56 text
AppCache ! !
Slide 57
Slide 57 text
AppCache http://bit.ly/prdc-appcache
Slide 58
Slide 58 text
Local Storage localStorage['tea'] = '{ "type":"Earl Grey" }'; ! console.log(localStorage['tea']); ! //> { "type":"Earl Grey" } ! console.log(JSON.parse(localStorage['tea']); ! //> Object { type: 'Earl Grey' }
Slide 59
Slide 59 text
The Story So Far
Slide 60
Slide 60 text
Demo Debugging
Slide 61
Slide 61 text
Thanks! @timgthomas tiny.cc/prdc14 Photo source: Wikipedia user Hequals2henry