Mobile at Scale

Grace Hopper Panel on Mobile Development

Transcript

1. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY #GHC16 2016 Mobile at Scale: Building a Lasting Architecture Moderator: Wendy Lu Panelists: Kasia Hayden, Ayaka Nonaka, Kristina Thai, Jenny Yuen @wendyluwho @kasiahayden @ayanonagon @kristinathai @jennyyuenz
2. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Introduce Yourself!
3. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Facebook Omega Logistics Kasia Hayden
4. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
5. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Which platform would you choose?
6. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
7. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY What’s the dev environment? • Xcode, Android Studio • Chrome • Atom, vim, emacs
8. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY What auxiliary tools and libraries can I use? • Flexbox • Flow • Any javascript libraries that don’t depend on Node core • Native code
9. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY What is my data pipeline? • Relay • GraphQL
10. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Where can I see a fully built example of a RN app? • F8 2016 App, from Facebook’s annual developer conference: • https://github.com/fbsamples/f8app • Walkthrough of app: • http://makeitopen.com/tutorials/building-the-f8- app/planning/
11. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Try ReactNative!
12. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Facebook Jenny Yuen
13. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
14. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
15. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Animations Building for delight Faces Easier to identify Brings personality Design used After Effects High fidelity animations
16. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Animations Scaling Challenges Resizable High fidelity Performance Frame Rate Load Time File size
17. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Animations Explorations Resizable High Fidelity Compact Size Performa nce PNG ✗ ✓ ✗ ? GIF ✗ ✓ ✗ ? WebP/ WebM ✗ ✓ ✗ ? SVG ✓ ✓ ✗ ? ~850KB / face Resizable High Fidelity Compact Size Performa nce PNG ✗ ✗ ✓ ? GIF ✗ ✗ ✓ ? WebP/ WebM ✗ ✗ ✓ ? SVG ✓ ✓ ✗ ?
18. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Our solution What now? Use Adobe ExtendScript Extract all visible information
19. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Our solution What we got? Animation Layers Transform keyframes and transitions Key Information Shape Layers Path vertices and transitions Path metadata Nested Layers Shape Layer (Red BG) Animation Layer (Scale) Shape Layer (Heart)
20. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Our solution Final Format Resizable High Fidelity Compact Size Performa nce PNG ✗ ✗ ✓ ? GIF ✗ ✗ ✓ ? WebP/ WebM ✗ ✗ ✓ ? SVG ✓ ✓ ✗ ? Resizable High Fidelity Compact Size Performa nce PNG ✗ ✗ ✓ ? GIF ✗ ✗ ✓ ? WebP/ WebM ✗ ✗ ✓ ? SVG ✓ ✓ ✗ ? Faceboo k! ✓ ✓ ✓ ? ~850KB / face ~1KB / face
21. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Intuit QuickBooks Self-Employed Kristina Thai
22. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
23. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Title Text Body text Imag e Configurable font, size, color Adjustabl e height Adjustabl e size
24. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
25. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Authorization Client (internal) OCR Receipt Capture (internal) Charts (external)
26. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Workflow Ayaka Nonaka
27. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
28. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
29. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
30. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
31. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Workflow • Main app • Houses all of our Swift code (for now)
32. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY ActionKit, Interchange • WFAction, ICAction • WFVenmoAction, ICPostToInstagramAction
33. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY WorkflowUI • All of our reusable UI components • UIColor+Workflow, UIFont+Workflow • WFGlyphView, WFVibrantButton
34. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY WFLogging • Analytics via Mixpanel
35. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY ContentKit • Manages our “content graph”
36. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
37. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
38. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Pinterest Wendy Lu
39. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY
40. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Pin: - Image URL - Title - Pinner - User Image URL - Board
41. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY More complex cells = frame drops
42. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY UI Framework - AsyncDisplayKit • In iOS, usually UI work confined to “main thread” • With AsyncDisplayKit, we can initialize, configure, and layout views on background threads • Serial -> Concurrent
43. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Pin: - Image URL - Title - Pinner - User Image URL - Board
44. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Immutable Models
45. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY How has your codebase changed as your team has gotten larger?
46. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY How do you make an app work well for users in all parts of the world?
47. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Things we can do to keep accessibility in mind?
48. PAGE | GRACE HOPPER CELEBRATION 2016 | #GHC16 PRESENTED BY THE ANITA BORG INSTITUTE AND THE ASSOCIATION FOR COMPUTING MACHINERY Thank you Feedback? Download at http://bit.ly/ghc16app or search GHC 16 in the app store Rate and review the session on our mobile app