Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Using JavaScript to write Native Mobile Applications


Published on

This talk was given at MidwestJS2018 by Siddharth Reddy Malkireddy and Derek Anderson.

Published in: Engineering
  • Be the first to comment

Using JavaScript to write Native Mobile Applications

  1. 1. Using JavaScript to write Native Applications for iOS, Android and the Web.
  2. 2. Who Are We?
  3. 3. Goal!What are we gonna talk about?
  4. 4. Behold the FUTURE! PayPal wanted a Native Experience
  5. 5. Why JS? ● Uhhh… because it’s awesome!!! ● Rapid Development cycles ● Dynamically updatable UI’s ● Less Friction with merchants ● P.S: because it’s awesome!!! “As Software Engineers we need to look at what works best for the problem and not play favourites” - My Manager
  6. 6. ● Easy to Integrate ○ Drag and Drop, fewest lines. ● Light ○ Negligible amount of Space of possible. ● Complete ○ Ship Enough Features to be able to be dynamic and stable (LTS). ● Dynamic ○ Update logic, and UI without the need for re-integration or deploy. Goals
  7. 7. Decision time!!!
  8. 8. Because... ● Large ecosystem & large community. ● Multi-Platform Friendly (iOS, Android, Windows). ● Common JavaScript Design (ES Classes, JSX via Babel) ● Easily extendable Natively. ● Dynamically updatable. (Without the need for rebuilding Native Code) React Native, What We Liked
  9. 9. What this looked like With React Native!
  10. 10. ● Moved really fast, we made no decisions. ● Things changed a lot. ● Integration as an SDK wasn’t the best. ● Already big, grew heavier over time. What didn’t work for us.
  11. 11. 2nd and 3rd Party Developers were apprehensive.. Goals ● Too many libraries, hard to internalize, required NPM to distribute. ● Ambitious, bloated the SDK ● Release train was too quick What was painful.
  12. 12. and Syr was born.. Light Dynamic UI Engine for Everywhere.
  13. 13. What’s good about Syr?
  14. 14. Borrowing the best Decisions Using and Composing components
  15. 15. Simultaneously Rendering xPlatform
  16. 16. Easy to write and integrate native modules (iOS)
  17. 17. Easy to write and integrate native modules (Android)
  18. 18. Dynamically updatable ● UI still in JS, so that can be hosted on a Remote server. ● Syr-Push. (one of the best parts) ○ Deterministic Chunking using Webpack ○ Incremental Diffing for Patches
  19. 19. Syr - What’s Moar Different?
  20. 20. Bye Bye JSC - Hello Native JS Engine ● Host Platform First Approach ○ Consistent Performance no longer as big of an issue ■ Small Segment of A7 CPUs produced in Snapdragon 210 (sub $50 phones) ○ Built in use of JavaScript bridges ■ WKWebView in iOS ■ WebView in Android
  21. 21. Reducing Surface Area ● Wanted to use less code to accomplish our mission ● Create a smaller paradigm that is easier to grasp for contributors ● Demystify the magic
  22. 22. Debugging Tools ● Uses built in Dev Tools for Target platforms ● Use built in timing and performance tools ● Browse deterministic chunks thanks to webpack and source maps
  23. 23. 2nd and 3rd Party Developers were warming up.. ● Easy to Integrate ○ Drag and Drop (aar, or .framework) ○ Cocoapods, Maven, Npm ● Light ○ Core Syr is under 300kb Native and Javascript ● Complete ○ Syr has a Release Train features a Long Term Cycle Our Biggest Gains with Syr
  24. 24. Syr React-Native
  25. 25. Syr Android Syr iOS
  26. 26. !!DEMO TIME!!
  27. 27. Syr, what we’re trying to do different
  28. 28. IAW (Eye-Aww) ● Design Philosophy ● iOS First ● Android ● Web (not a bolt on)
  29. 29. Multi App Single Container Environments
  30. 30. Register an App on the Bus
  31. 31. Call into an App on the Bus
  32. 32. Multiple Apps Sending and Receiving on Bus
  33. 33. Testing ● Test Using preferred Runner ● Syr uses a headless Renderer ● Look for UI variations before you run native expensive tests. ● Set device specifications, such as DPI, Resolution, Orientation etc.
  34. 34. Headless, Qt, more.. Syr Native Raster Web Syr Native Raster Android Syr Native Raster iOS Syr javaScript Bridge [webpack and babel + Syr Core library] App Source JavaScript How is this possible? http://syr.js.org
  35. 35. Syr, where are we going? On the way... ● Increasing our commitment to Developer Tooling ● Increasing commitment to built in distribution ● Increasing commitment to platform portability
  36. 36. Thanks You!!! SYR DOCS - #twitter - @syr_js #twitter - @msiddharthreddy #twitter - @dmikeyanderson