BUILD NATIVE MOBILE APPS WITH JAVASCRIPTLeo Farias

ABOUT ME

CO-FOUNDERLEO FARIAS

http://about.me/leofarias

WHAT DO YOU USE TO BUILD MOBILE APPS?

ATWOOD’S LAW

any application that can be written in JavaScript, will eventually be written in JavaScript.

- Jeff Atwood - 2007 (Stack Overflow & Coding Horror)

The Rule of least Power http://www.w3.org/2001/tag/doc/leastPower.html

!=

• Titanium is a platform to build native iOS, Android, and Windows

• Titanium apps are written in Javascript.• Created by Appcelerator • Alloy (MVC Framework) • Open Source

WHAT IS TITANIUM?

ABSTRACTION LAYER• A way of hiding the implementation details of a

particular set of functionality

• Assertions• There is a core of mobile development APIs which

can be normalized across platforms. These areas should be targeted for code reuse.

• There are platform-specific APIs, UI conventions, and features which developers should incorporate when developing for that platform. Platform-specific code should exist for these use cases to provide the best possible experience.

Native APIs

Native-JavaScript Bridge (Kroll)

JavaScript runtime (JavaScriptCore, V8)

Application Code - JavaScript

Titanium API, Custom Modules

OS SDK

HOW DOES IT WORK?

Crossing the Bridge

Native APIs

Native-JavaScript Bridge (Kroll)

JavaScript runtime (JavaScriptCore, V8)

Application Code - JavaScript

Titanium API, Custom Modules

OS SDK

HOW DOES IT WORK?

Crossing the Bridge

ACCESS NATIVE SDK• Geolocation • Camera • In-App Purchases • Calendar • Contact • Media / Photo Gallery • Gesture / Accelerometer • Maps • Notifications • TouchID / WatchOS • Custom Modules

DEV ENVIRONMENT

Studio

• Use any IDE with Titanium SDK Node-based CLI • Appcelerator Studio is fully integrated Eclipse-based

IDE with code profiler, debugger and analyzer • iOS Simulator / Genymotion / Devices • LiveView - Allows to see changes near real time in

native platform. TiShadow Open Source Equivalent.

Sublime Text

MVC FRAMEWORK

View

Model

Controller.xml

.tss

.js

.js

VIEWS & STYLES

CONTROLLERS

MODELS• Inherits from Backbone • Keep models in memory & synced to a store • Easily extend BackboneJS classes • Local storage sync adapters • Migrations • Model-View binding

BUILT INTO ALLOY• Underscore.js • Moment.js • Common.js Modules* • Widgets • Themes • Free and Open Source

CODE REUSE• 100% of non-UI code is reusable • 80-85% of UI code (Alloy) is reusable • The more experience, the more code reuse

(experience and patterns)

ADVANTAGES / PROS• Smaller learning curve for JS Devs • Native Interface Controls • Reduce Maintenance for multiple platform apps • Easier and faster development because of

normalization of APIs and environment. • Community Support • Great Documentation

NOT WRITE ONCE RUN ANYWHERE!

WRITE ONCE ADAPT ANYWHERE

LEARN ONCE, WRITE ANYWHERE

OR

DISADVANTAGES / CONS • Not 100% API Coverage • New feature & bug fix delays • Hard to troubleshoot Titanium SDK bugs • Performance?

PERFORMANCE• JavaScript is not thread safe. • Single threaded execution • Crossing the bridge takes a “toll”. When a

Titanium.* element is called in JS • Follow best practices

APPCELERATOR PLATFORM• Appcelerator University • Mobile Analytics / Insights • Push Notifications • Arrow (MBaas)

• Arrow Builder (Build APIs) • Arrow Cloud (Elastic cloud service)

• App Preview (AdHoc App Deployments) • App Designer (drag-and-drop UI

Designer for Studio) • Hyperloop

HYPERLOOP• 100% Native API coverage • Converts JavaScript code into Native code / Compiler • Created to speed up Appcelerator Titanium

Development / 4th Generation • Made available to community as preview (labs) • Use within Titanium

HYPERLOOPAPPLE TOUCH ID EXAMPLE

WHAT’S NEXT?• http://www.appcelerator.com/ • http://tidev.io - Titanium Community News Site • http://gitt.io - NPM for Titanium Modules and Widgets • TiSlack - Titanium Slack Community

THANK YOU! QUESTIONS?

AND SWAG