![Page 1: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/1.jpg)
Next Generation Campus Mobile Applications
UC San Diego
![Page 2: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/2.jpg)
Campus Apps
![Page 3: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/3.jpg)
Campus Apps
•Mass audience focused• Static• Informational•User directed look-ups
![Page 4: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/4.jpg)
Millennial Apps
![Page 5: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/5.jpg)
Differences
•Personalized•Conversational•Up-to-the-minute information, active, actionable•Peer assistance, digital assistance
![Page 6: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/6.jpg)
User Experience Goals
•Better connect students with campus•Better meet student expectations for applications
![Page 7: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/7.jpg)
Technical Goals
• Leverage the capabilities of mobile •Enable distributed development
![Page 8: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/8.jpg)
![Page 9: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/9.jpg)
![Page 10: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/10.jpg)
![Page 11: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/11.jpg)
![Page 12: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/12.jpg)
![Page 13: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/13.jpg)
![Page 14: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/14.jpg)
![Page 15: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/15.jpg)
Where we're headed
•Personalization based on individual behavior modeling•Push notification•Conversational information feeds – a campus-wide chatbot• Foundation of a whole host of cards
• Dining info based on time, place and personal preference• Instant surveys to campus or segments• Student elections with real-time results
![Page 16: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/16.jpg)
Choosing a Technology Platform
![Page 17: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/17.jpg)
React Native Overview
• Launched with iOS support in March 2015 Android in October
• Supports all iOS 8.0+ and Android 4.1+ devices
•Open-source
• Leverages modern web development technologies
• Learn once, write anywhere
![Page 18: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/18.jpg)
React Native Features (1/2)
•Develop in Real Time with NodeJS
•Native Components
• Styling with Flexbox
•Asynchronous Execution
• Standardized APIs
![Page 19: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/19.jpg)
React Native Features (2/2)
•Touch Handling
•Extensibility
•NPM and RNPM
•Debugging & Performance
•Code Base Commonization
![Page 20: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/20.jpg)
Development Process• Leveraging Web Development Background
• Tools
1. Xcode2. Android Studio3. Device Simulator4. Text Editor/IDE (Sublime)5. Chrome Debugger
• Version Control
• Backing & Support
![Page 21: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/21.jpg)
Development Process Demo
• Initializing a new React Native project: HelloUCCSC
![Page 22: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/22.jpg)
![Page 23: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/23.jpg)
![Page 24: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/24.jpg)
React Native Common Questions
• Facebook has a full-time staff of 30 people working on React Native, and over 1000 contributing developers since launch
• The goal of React Native is not to just solve the cross platform problem, but to be a better developer environment than the way you build iOS and Android apps natively today
• Facebook is currently using it for apps in production (Ads manager and Groups app). Over 500 iOS and 200 android apps live
• There is no WebView, it is JavaScript running in a virtual machine and controlling a native UI. At the core of React Native is a bridge to Objective-C or Java that lets native code call JavaScript and vice versa.
• React Native releases a new version every two weeks. So far each version upgrade has been packed with new native features and overall improvements. We are currently running version .29, and started on version .13 last December
![Page 25: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/25.jpg)
![Page 26: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/26.jpg)
![Page 27: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/27.jpg)
![Page 28: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/28.jpg)
Common Code
• Folders: app, ios, android•App: 13 common JavaScript files• iOS: AppDelegate.m, index.ios.js•Android: AndroidManifest.xml, index.android.js
![Page 29: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/29.jpg)
Android Demo
![Page 30: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/30.jpg)
Android Build
•Edited index.android.js ~45 lines of code•Added ACCESS_FINE_LOCATION permission to AndroidManifest.xml• Some image path updates•Run in emulator
![Page 31: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/31.jpg)
![Page 32: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/32.jpg)
Amazon Web Services
Lambda API GatewaySimple Storage Service
![Page 33: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/33.jpg)
Amazon Web Services: S3
•News•Events• Surf
[{ "date": "Mon, 6 Jun 2016 05:55:00 PDT", "link": "http://www.surfline.com/rss/rssredirect.cfm?id=107951", "description": "A slow go, Bird with the report for Monday morning at 5:55 ", "title": "TORREY PINES STATE BEACH : 1-2 ft - knee to thigh high and poor "}, ….
![Page 34: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/34.jpg)
Amazon Web Services: Lambda
•Weather• Shuttle Stops• .. 8 functions
“Run code without thinking about servers”
![Page 35: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/35.jpg)
Amazon Web Services: Lambda• No charge when code is not running• Node.js, Python, Java• Timeout setting from 1 second to 5 minutes• Stateless• Event Driven
• API Gateway• AWS IoT• CloudWatch Events – Schedule• CloudWatch Logs• DynamoDB• Kinesis• S3• SNS
![Page 36: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/36.jpg)
Amazon Web Services: Lambda
![Page 37: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/37.jpg)
Amazon Web Services: Lambda
![Page 38: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/38.jpg)
Amazon Web Services: Lambda
![Page 39: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/39.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
![Page 40: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/40.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
![Page 41: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/41.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
Caching
![Page 42: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/42.jpg)
Lambda: Past week
706ms
1.2s
![Page 43: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/43.jpg)
Amazon Web Services
• Lessons learned with Lambda; Java vs Node.js stats
![Page 44: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/44.jpg)
Amazon Web Services
Weather Lambda Function (Feb 2016)
Java 29.8 MB 8 seconds cold startNode.js 751 bytes 4 seconds cold start
![Page 45: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/45.jpg)
Node.js
ReactNativeAWS
![Page 46: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/46.jpg)
Tools
•ReactNative• iOS•Android• (Windows)
•Mac•Windows
•AWS
![Page 47: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/47.jpg)
Timeline
• iOS took 6 months to production•Android alpha took less than a day to run on an emulator and device
… and they are both native apps
![Page 48: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/48.jpg)
Who’s Using ReactNative
• Facebook• Events Dashboard for iOS• Ads Manager• Facebook Groups (hybrid)
![Page 49: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/49.jpg)
F8 App
![Page 50: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/50.jpg)
Ads Manager
![Page 51: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/51.jpg)
Who’s Using ReactNative
•Tencent QQ messenging app•April 2016, Microsoft announced support for Universal Windows
Platform (UWP) ; 10 releases since June 2016•https://github.com/ReactWindows/react-native-windows•https://facebook.github.io/react-native/showcase.html
![Page 52: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/52.jpg)
What’s Next
•Continue to collaborate with campus groups•More data and features•Chatbot•Push notification•Personalized Analytics•Pushing data (vs pulling data)•CodePush integration• SSO integration
![Page 53: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/53.jpg)
What’s Next
iOS App
APIs
SMSVoice
![Page 54: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/54.jpg)
Open Source
•https://github.com/UCSD/now-mobile
![Page 55: Next Generation Campus Mobile Applications - UCCSC … · Next Generation Campus Mobile Applications UC San Diego. ... •Launched with iOS support in March 2015 Android in ... API](https://reader031.vdocuments.us/reader031/viewer/2022022517/5b096b9f7f8b9a992a8d9f31/html5/thumbnails/55.jpg)
Q&A
Jeremy WilesCharles BryantAlex Wu
UC San Diego