Date post: | 06-May-2015 |
Category: |
Technology |
Upload: | jamessugrue |
View: | 2,615 times |
Download: | 5 times |
Get there together
10 Golden Rules For Outstanding Titanium Apps
@sugrue www.jamessugrue.ie
Lead Architect / Growth Hacker
Author of Beginning Backbone.js
James Sugrue
Using Titanium since 2010
Carma Carpooling
Founded in early 2007, Carma is the world’s first social transportation network.
Choose a match & get in touch
Tap ‘Start Trip’ & log your journey
Tap ‘End Trip’ & share the Carma
How the App Works
Native to Native to Hybrid to Native
2010 2012 2013 2014
Replace your tables with list views
1
The Trouble With Tables
TableViews for tabular data seems natural !As row count increases, performance suffers !Use ListView for a performance boost !
ListView !== TableView!!Templates for each ‘row’ bound to a data object !Overall list events: no row events !Use lazy loading so that the template compilation doesn’t slow down your app !
http://www.shockoe.com/blog/titanium-tableview-listview-retrospective/
Beware of the single thread
2
The Most Frustrating User Experience Customers will not accept your excuses for an unresponsive app !
Keep Your App Moving
Ensure that multiple clicks does not mean multiple invocation Always keep the user informed, even if they have to wait
1
_.defer for UI blocking operations _.throttle to prevent duplicate actions2
Use activity indicators when necessary 3
4Try out graviton.TaskManager from Ronald Treur
Obsess over memory management
3
Don’t Leave It Until The EndSome developers assume there’s no need to worry about memory management in JavaScript !
!
!!
Some Quick Tips
Keep event listeners at a minimum Use call-backs instead of global event listeners. !!!
1
2 Create a module to manage global state
3 Dispose objects when you are finished with them.
Use require statements only when needed
4
Modules: A Delicate Balancing ActIt is tempting to add all require statements at the top of each Alloy controller. !!
Lazy Loading Modules
Ensure that you only require essential modules at the beginning !
1var event = require("/tracking/tracking_event"), analytics = require("/tracking/tracking_manager");
or
3Use require(“<path>”).<function> inline with your code !
require("facebook/facebook_manager").getFacebookId();
Store your module reference within the function !
2function loginFacebook(fbManager) { var eventTracker = require(“/tracking/tracking_event");
Embrace native modules
5
Writing native modules is not cheating
Use your Objective-C/Swift/Java skills
Multiple Layer Scroller
Be Careful Crossing That Bridge
Reacting to every scroll event was really slow
Use fonts rather than images
6
Slim Down Your App With Icon Fonts
Don’t overload your app with images
Add Font To Project
1
2 Update app.tss//// Icon Font// --------------------------------------------------".icon": { font: { fontFamily: "splinico" }}!".icon-camera": { text: "a"}!".icon-facebook": { text: "f"}!".icon-envelope": { text: "b"}
Use Your Font
3
<Button id="btnSignupWithFacebook" class="btn btn- fb-blue btn-lg col-abs-11”> <Label class="icon icon-facebook btn-icon”/> <View class="btn-vr"/> <Label class="lbl-large btn-text" text=“L(‘widget_home_btn_signup_facebook')"> </Label></Button>
Get consistent styling with app.tss
7
Keep Your Designer HappyKeep all your common app styles in one place !!!Use this image: http://upload.wikimedia.org/wikipedia/commons/3/3e/RedBikeLane.JPG
Keep Your Designer HappyKeep all your common app styles in one place: app.tss !!!!
!"Label":{ font: { fontFamily: 'Helvetica Neue Light', fontSize: '14dp', }, color: '#333333'}"Button":{ font: { fontFamily: 'HelveticaNeue-Light', fontSize: '14dp' }, height: '44dp', width: '100%'}"TableView":{ backgroundColor: 'transparent', width: '100%', height: Ti.UI.FILL}
Use TiShadow for Rapid Development
8
Speed Up Development ExponentiallyHow much time do you waste in the cycle of building and deploying? !What about installing updated builds on all test devices?
You Have To See It to Believe It
1
titanium build -p android -T device --shadow !
HAPPY BIRTHDAY
DAVID
Start with Android
9
Cross Platform Development Is DifficultThe greatest appeal of Titanium is cross platform !With Titanium, iOS support has always been superior
3
Lessons Learned The Hard WayUse density pixels to gracefully handle varying resolutions !When adding events remember to use singletap for Android click for iOS ! !!!! if (OS_ANDROID) {!! ! textfield.addEventListener("singletap", textfield.clearError);!! }!! else {!! ! textfield.addEventListener("click", textfield.clearError);!! }!
!!!!!
Making Android More Appealing!Use Genymotion as your emulator !!!!!!
1
2 Ensure every developer has at least two phones
3 Utilise tishadow to easily deploy to all devices in real time
Go for the latest OS features
10
Push Your App to Be Cutting EdgeNever limit yourself to the lowest common denominator
"The reasonable man adapts himself to the
conditions that surround him... The unreasonable man adapts surrounding
conditions to himself... All progress depends on the
unreasonable man.” !
- George Bernard Shaw
Be Unreasonable
Get Involved in the Titanium CommunityDon’t be afraid to submit a pull request
Ask Ingo for what you need
@ronaldtreurCredits
Keeping Your App Responsive
@davidbankierTiShadow
@skypantherMemory Management
@acktie
@dawsontothTandemScroll
wriststrap
Get there together
Carma Prize Your chance to make it big
What is the Carma Prize?
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party developer who enables +10,000 daily carpool trips
$500,000 to start-ups to take on the challenge
What is the problem?
The average annual cost of driving a sedan in the US = $9,122
The average passenger vehicle emits 5.1 tons of CO2 per year, making our car culture responsible for 33% of US emissions
The typical American spends a whole week and wastes 19 gallons of fuel sitting in traffic every year
Most of us drive to work alone, i.e. with three empty seats!
Highways full of “riderless cars”A road can be 100% full, but with only 25% capacity used. !
Once we know who the commuters are, and where they are going,
the game changes entirely.
Carma - a better way to commute
Save up to 75% on the cost of driving
Reduce your carbon footprint and fuel dependency
Get access to carpool/HOV lanes and get your free time back
Spend more time with your neighbours and colleagues
Paul | Sean
Open APIs for real-time carpool verification
Open APIs for real-time carpool matching
Open APIs for building occupancy-based apps
The Carma API
api.carmacarpool.com
Inspiration
api.carmacarpool.com
Plug-in for concerts / eventsSystem for sport teams/arenas
Competition for “school-pools” for kids / moms & dads
Ride Board for large campus / colleges
Systems for large employers
App for connected vehicles - Automotive companies
App to open parking garages / toll barriers when carpool comes
$1 million Third party developer
+10,000 daily carpool trips
Get there together
$1 million Carma employee
+1,000 daily carpool trips
Get there together
$500K Accelerator program funding for startups
Get there together
The Carma Prize
$1 million to Carma employee who enables +1,000 daily carpool trips
$1 million to 3rd party developer who enables +10,000 daily carpool trips
$500,000 to start-ups to take on the challenge
www.carmacarpool.com/prize