Using JavaScript to write Native Mobile Applications

Using JavaScript to write
Native Applications for iOS,
Android and the Web.
http://syr.js.org

Goal!What are we gonna
talk about?
http://syr.js.org

Behold the
FUTURE!
PayPal wanted a Native Experience
http://syr.js.org

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

● 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

Decision time!!!
http://syr.js.org

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

What this looked like
With React Native!
http://syr.js.org

● 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

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

and Syr was born..
Light Dynamic UI Engine for
Everywhere.
http://syr.js.org

What’s good about Syr?
http://syr.js.org

Borrowing the best Decisions
Using and Composing components
http://syr.js.org

Simultaneously Rendering xPlatform
http://syr.js.org

Easy to write and integrate native modules (iOS)
http://syr.js.org

Easy to write and integrate native modules (Android)
http://syr.js.org

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

Syr - What’s Moar Different?
http://syr.js.org

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

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

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

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

Syr React-Native
http://syr.js.org

Syr
Android
Syr
iOS
http://syr.js.org

!!DEMO TIME!!
http://syr.js.org

Syr, what we’re trying to do
different
http://syr.js.org

IAW
(Eye-Aww)
http://syr.js.org
● Design Philosophy
● iOS First
● Android
● Web (not a bolt on)

Multi App Single Container Environments
http://syr.js.org

Register an App on the Bus
http://syr.js.org

Call into an App on the Bus
http://syr.js.org

Multiple Apps Sending and Receiving on Bus
http://syr.js.org

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

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

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

Thanks You!!!
SYR
DOCS - https://syr.js.org/
#twitter - @syr_js
#twitter - @msiddharthreddy
#twitter - @dmikeyanderson

Using JavaScript to write Native Mobile Applications

More Related Content

What's hot

Similar to Using JavaScript to write Native Mobile Applications

Recently uploaded

Using JavaScript to write Native Mobile Applications

Editor's Notes