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

34 views

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. http://syr.js.org
  2. 2. Who Are We? http://syr.js.org
  3. 3. Goal!What are we gonna talk about? http://syr.js.org
  4. 4. Behold the FUTURE! PayPal wanted a Native Experience http://syr.js.org
  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 http://syr.js.org
  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 http://syr.js.org
  7. 7. Decision time!!! http://syr.js.org
  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 http://syr.js.org
  9. 9. What this looked like With React Native! http://syr.js.org
  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. http://syr.js.org
  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. http://syr.js.org
  12. 12. and Syr was born.. Light Dynamic UI Engine for Everywhere. http://syr.js.org
  13. 13. What’s good about Syr? http://syr.js.org
  14. 14. Borrowing the best Decisions Using and Composing components http://syr.js.org
  15. 15. Simultaneously Rendering xPlatform http://syr.js.org
  16. 16. Easy to write and integrate native modules (iOS) http://syr.js.org
  17. 17. Easy to write and integrate native modules (Android) http://syr.js.org
  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 http://syr.js.org
  19. 19. Syr - What’s Moar Different? http://syr.js.org
  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 http://syr.js.org
  21. 21. Reducing Surface Area http://syr.js.org ● 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. http://syr.js.org 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 http://syr.js.org
  24. 24. Syr React-Native http://syr.js.org
  25. 25. Syr Android Syr iOS http://syr.js.org
  26. 26. !!DEMO TIME!! http://syr.js.org
  27. 27. Syr, what we’re trying to do different http://syr.js.org
  28. 28. IAW (Eye-Aww) http://syr.js.org ● Design Philosophy ● iOS First ● Android ● Web (not a bolt on)
  29. 29. Multi App Single Container Environments http://syr.js.org
  30. 30. Register an App on the Bus http://syr.js.org
  31. 31. Call into an App on the Bus http://syr.js.org
  32. 32. Multiple Apps Sending and Receiving on Bus http://syr.js.org
  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. http://syr.js.org
  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.orghttp://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 http://syr.js.org
  36. 36. Thanks You!!! SYR DOCS - https://syr.js.org/ #twitter - @syr_js #twitter - @msiddharthreddy #twitter - @dmikeyanderson

×