UCCSC 2016
- 1. Next Generation Campus Mobile Applications UC San Diego
- 2. Campus Apps
- 3. Campus Apps • Mass audience focused • Static • Informational • User directed look-ups
- 5. Differences • Personalized • Conversational • Up-to-the-minute information, active, actionable • Peer assistance, digital assistance
- 6. User Experience Goals • Better connect students with campus • Better meet student expectations for applications
- 7. Technical Goals • Leverage the capabilities of mobile • Enable distributed development
- 15. 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
- 16. Choosing a Technology Platform
- 17. 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
- 18. React Native Features (1/2) • Develop in Real Time with NodeJS • Native Components • Styling with Flexbox • Asynchronous Execution • Standardized APIs
- 19. React Native Features (2/2) • Touch Handling • Extensibility • NPM and RNPM • Debugging & Performance • Code Base Commonization
- 20. Development Process • Leveraging Web Development Background • Tools 1. Xcode 2. Android Studio 3. Device Simulator 4. Text Editor/IDE (Sublime) 5. Chrome Debugger • Version Control • Backing & Support
- 21. Development Process Demo • Initializing a new React Native project: HelloUCCSC
- 24. 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
- 28. Common Code • Folders: app, ios, android • App: 13 common JavaScript files • iOS: AppDelegate.m, index.ios.js • Android: AndroidManifest.xml, index.android.js
- 29. Android Demo
- 30. 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
- 32. Amazon Web Services Lambda API GatewaySimple Storage Service
- 33. Amazon Web Services: S3 • News • Events • Surf [{ "date": "Mon, 6 Jun 2016 05:55:00 PDT", "link": "http://www.surfline.com/rss/rssredirect.cf "description": "A slow go, Bird with the report for M "title": "TORREY PINES STATE BEACH : 1-2 ft - knee }, ….
- 34. Amazon Web Services: Lambda • Weather • Shuttle Stops • .. 8 functions “Run code without thinking about servers”
- 35. 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
- 36. Amazon Web Services: Lambda
- 37. Amazon Web Services: Lambda
- 38. Amazon Web Services: Lambda
- 39. API Gateway Amazon Web Services Shuttle Stop Service
- 40. API Gateway Amazon Web Services Shuttle Stop Service
- 41. API Gateway Amazon Web Services Shuttle Stop Service Caching
- 43. Amazon Web Services • Lessons learned with Lambda; Java vs Node.js stats
- 44. Amazon Web Services Weather Lambda Function (Feb 2016) Java 29.8 MB 8 seconds cold start Node.js 751 bytes 4 seconds cold start
- 46. Tools • ReactNative • iOS • Android • (Windows) • Mac • Windows • AWS
- 47. 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
- 48. Who’s Using ReactNative • Facebook • Events Dashboard for iOS • Ads Manager • Facebook Groups (hybrid)
- 49. F8 App
- 50. Ads Manager
- 51. 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
- 52. 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
- 55. Q&A Jeremy Wiles Charles Bryant Alex Wu UC San Diego