UCCSC 2016
Transcript of UCCSC 2016
![Page 1: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/1.jpg)
Next Generation Campus Mobile Applications
UC San Diego
![Page 2: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/2.jpg)
Campus Apps
![Page 3: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/3.jpg)
Campus Apps• Mass audience focused• Static• Informational• User directed look-ups
![Page 4: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/4.jpg)
Millennial Apps
![Page 5: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/5.jpg)
Differences• Personalized• Conversational• Up-to-the-minute information, active, actionable• Peer assistance, digital assistance
![Page 6: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/6.jpg)
User Experience Goals• Better connect students with campus• Better meet student expectations for applications
![Page 7: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/7.jpg)
Technical Goals• Leverage the capabilities of mobile • Enable distributed development
![Page 8: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/8.jpg)
![Page 9: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/9.jpg)
![Page 10: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/10.jpg)
![Page 11: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/11.jpg)
![Page 12: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/12.jpg)
![Page 13: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/13.jpg)
![Page 14: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/14.jpg)
![Page 15: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/16.jpg)
Choosing a Technology Platform
![Page 17: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/19.jpg)
React Native Features (2/2)
• Touch Handling
• Extensibility
• NPM and RNPM
• Debugging & Performance
• Code Base Commonization
![Page 20: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/20.jpg)
Development Process
• Leveraging Web Development Background
• Tools1. Xcode2. Android Studio3. Device Simulator4. Text Editor/IDE (Sublime)5. Chrome Debugger
• Version Control
• Backing & Support
![Page 21: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/21.jpg)
Development Process Demo• Initializing a new React Native project: HelloUCCSC
![Page 22: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/22.jpg)
![Page 23: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/23.jpg)
![Page 24: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/25.jpg)
![Page 26: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/26.jpg)
![Page 27: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/27.jpg)
![Page 28: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/29.jpg)
Android Demo
![Page 30: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/31.jpg)
![Page 32: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/32.jpg)
Amazon Web Services
Lambda API GatewaySimple Storage Service
![Page 33: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/34.jpg)
Amazon Web Services: Lambda• Weather• Shuttle Stops• .. 8 functions
“Run code without thinking about servers”
![Page 35: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/36.jpg)
Amazon Web Services: Lambda
![Page 37: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/37.jpg)
Amazon Web Services: Lambda
![Page 38: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/38.jpg)
Amazon Web Services: Lambda
![Page 39: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/39.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
![Page 40: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/40.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
![Page 41: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/41.jpg)
API Gateway
Amazon Web Services
Shuttle Stop Service
Caching
![Page 42: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/42.jpg)
Lambda: Past week
706ms
1.2s
![Page 43: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/43.jpg)
Amazon Web Services• Lessons learned with Lambda; Java vs Node.js stats
![Page 44: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/44.jpg)
Amazon Web ServicesWeather Lambda Function (Feb 2016)
Java 29.8 MB 8 seconds cold startNode.js 751 bytes 4 seconds cold start
![Page 45: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/45.jpg)
Node.js
ReactNativeAWS
![Page 46: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/46.jpg)
Tools• ReactNative• iOS• Android• (Windows)
• Mac• Windows
• AWS
![Page 47: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/48.jpg)
Who’s Using ReactNative• Facebook• Events Dashboard for iOS• Ads Manager• Facebook Groups (hybrid)
![Page 49: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/49.jpg)
F8 App
![Page 50: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/50.jpg)
Ads Manager
![Page 51: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/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: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/53.jpg)
What’s Next
iOS App
APIs
SMSVoice
![Page 54: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/54.jpg)
Open Source• https://github.com/UCSD/now-mobile
![Page 55: UCCSC 2016](https://reader034.fdocuments.in/reader034/viewer/2022042707/58e873621a28ab60318b4d87/html5/thumbnails/55.jpg)
Q&A
Jeremy WilesCharles BryantAlex Wu
UC San Diego