Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Don't Fear The Hybrid!
Search
Patrick Seda
October 17, 2014
Technology
4
1.4k
Don't Fear The Hybrid!
Making Kickass Mobile Enterprise Apps
Patrick Seda
October 17, 2014
Tweet
Share
More Decks by Patrick Seda
See All by Patrick Seda
The API of Your Company Culture
pxtrick
3
970
Lightning Talk - Enhancing Vue and Vuex for Complex Application State
pxtrick
1
1.1k
Swift - Beyond Beginner
pxtrick
0
1.3k
Crossing the Chasm of Swift
pxtrick
0
1.4k
Architecting Your Project with a Finite-State Machine
pxtrick
1
2.1k
Your Code is Terrible (I Love It!)
pxtrick
0
1.2k
An Introduction to Location-Based Technologies (for Business & Marketing)
pxtrick
0
600
The Passion of Lazy - Enterprise Mobile App Design Patterns
pxtrick
0
2.2k
10 Tips for Kickass Enterprise Mobile Apps
pxtrick
0
1k
Other Decks in Technology
See All in Technology
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
Culture Deck
optfit
0
330
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
170
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Automating Front-end Workflow
addyosmani
1367
200k
The Cult of Friendly URLs
andyhume
78
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Designing Experiences People Love
moore
139
23k
Rails Girls Zürich Keynote
gr2m
94
13k
Being A Developer After 40
akosma
89
590k
Designing for humans not robots
tammielis
250
25k
Transcript
ConnectJS/TiConnect – October 17, 2014 – Atlanta, GA Don’t! FEAR!
The HYBRID!
Patrick Seda @pxtrick
[email protected]
• Lead Mobile Architect @propelics •
Titanium Fanboy … Appc Titan • Creator of Mr. Edison Children’s App
What! Is! HYBRID! ?!
Hybrid Native App Wrapper + Web Application
Hybrid Combine two things BADASS!
Hybrid so BADASS NOT QUITE!
Hybrid
vs. Consumer! ENTERPRISE!
What is Enterprise? • A Business with multiple divisions •
Business strategy is based upon cohesive interaction • Divisions are financially dependent on each other • Core set of metrics and measures
What is Enterprise? • A Business with multiple divisions •
Business strategy is based upon cohesive interaction • Divisions are financially dependent on each other • Core set of metrics and measures
Enterprise vs. Consumer “Enterprise” Apps == B2E / B2B (ish)
Enterprise vs. Consumer “Consumer” Apps == B2C / B2B (ish)
in Enterprise! EXPECT! What to!
Reasonable Expectations • Heightened Security • Interact with Existing Data
Sources • Handle offline / poor connection, intermittent data sync • App architecture had BETTER support future expansion • Charts and graphs!
Reasonable Expectations
Reasonable Expectations
CHARTING! Techniques!
Charts and Graphs
Charts and Graphs
Charts and Graphs
HELP !! Charts and Graphs We need!
Charting Libraries Google Charts
Charting Libraries Google Charts Common Charts : Visual Styling :
Interactivity : Cost : NOTE : Where: Excellent Excellent Excellent FREE Must be online to use ! (developers.google.com/chart)! !
Charting Libraries D3.js
Charting Libraries D3.js Common Charts : Visual Styling : Interactivity
: Cost : Where: Excellent Excellent Excellent FREE ! (d3js.org)! !
Charting Libraries Highcharts
Charting Libraries Highcharts Common Charts : Visual Styling : Interactivity
: Cost : Where: Excellent Excellent Excellent Freemium … $390 - $4500 ! (highcharts.com)! !
Charting Libraries gRaphael
Charting Libraries gRaphael Common Charts : Visual Styling : Interactivity
: Cost : Where: Good Limited Limited FREE ! (g.raphael.com)! !
ANATOMY! Of the Hybrid!
Application WebView HTML / CSS / JS JS Chart Library
Composition
HTML Composition JS Window WebView Creation Sequence: <Window>! <WebView />!
</Window>!
Interaction HTML JS App-to-Chart Communication: App Ti.App.fireEvent(…);! WebView with Events
Interaction HTML App WebView Chart-to-App Communication: Ti.App.fireEvent(…);! JS with Events
Interaction HTML JS WebView App-to-Chart Communication: App webView.evalJS(…);! without Events
Interaction HTML App WebView Chart-to-App Communication: // NOPE! JS without
Events
Interaction // Event handler in HTML/JS.! function render(e) {…};! Ti.App.addEventListener(‘renderChart’,
render);! (In HTML/JS) // Send data to the chart.! Ti.App.fireEvent(‘renderChart’, {…});! (In App) App-to-Chart Communication: with Events
Interaction // Event handler in app.! function chartCB(e) {…};! Ti.App.addEventListener(‘chartTapped’,
chartCB);! (In App) // Send data to the app.! Ti.App.fireEvent(‘chartTapped’, {…});! (In HTML/JS) with Events Chart-to-App Communication:
Interaction // No event handler, just the method to render
data.! function render(chartInfo) {…};! (In HTML/JS) // Send data to the chart.! var data = JSON.stringify(chartInfo);! webView.evalJS(‘render(‘ + data + ‘)’);! (In App) App-to-Chart Communication: without Events
WELCOME! To the Real World!
The Real World
The Real World WTF! WTF!
The Real World
The Real World “The WebView is one of the most
EXPENSIVE components to create in terms of resources” - Titanium docs
The Real World
The Real World Labels! & Views! WebView!
The Real World “Including WebViews in your TableViewRows is a
RECIPE FOR SLUGGISH performance.” - Titanium docs
The Real World
The Real World Section! Headers!
The Real World
WebView Event Quiz When is the “load” event fired? A.
After the WebView contents have loaded B. After the WebView contents have rendered C. Never
WebView Event Quiz When is the “load” event fired? A.
After the WebView contents have loaded B. After the WebView contents have rendered C. Never
WebView Event Quiz When do the contents start loading? A.
After the Window has been laid out B. After the WebView has been laid out C. Before the WebView has been laid out
WebView Event Quiz When do the contents start loading? A.
After the Window has been laid out B. After the WebView has been laid out C. Before the WebView has been laid out * “postlayout” event
WebView Event Quiz When is the WebView laid out? A.
Before the Window “postlayout” event B. After the WebView “focus” event C. Whenever the OS feels like it
WebView Event Quiz When is the WebView laid out? A.
Before the Window “postlayout” event B. After the WebView “focus” event C. Whenever the OS feels like it
WebView Event Quiz Order of events: 1. “postlayout” 2. “beforeload”
3. “load” (App lays out Views As-Needed)
Performance Views are being laid out …
Performance “postlayout” and “load” “postlayout” and “load”
Performance “postlayout” and “load”
Performance “postlayout” and “load” “postlayout” and “load” “postlayout” and “load”
Performance WebView loads are throttled … NO big spikes! NO
crashes!
Reasonable Expectations • Kickass Charts • Performance • Don’t Be
So Lazy Enterprise Charting! ✔ ✔ ✔
SUMMARY! Amazing charts!! Happy clients!! Don’t FEAR the HYBRID! Great
performance!!