This is a old presentation I gave in a Meetup group dating from january 2013 when I lived in Boston area.

1. Global overview
Cross-Platform technologies
for the Web and Mobiles
January 21st, 2013,
Boston

2. ABOUT ME
Excited and love Mobile modular architecturesand cutting-edge technologies
3 years and half experience at Schneider.
Started mobile dev. 3 years ago
Adept of Hackathon, Code Camping, Startup
Weekends… & co-founding aBee Buzz
Olivier Eeckhoutte
2
Olivier Eeckhoutte – January 2013

3. 3
Agenda
1. Terminology
2. Development strategy
3. Technologies & concepts used
4. Demo
5. Recommendations
Olivier Eeckhoutte – January 2013

4. Start with… Terminology
- App is a basic functionality of a particular feature
●Very similar to Apps from AppStore
●No bigger than 2-3 tablet sized pages of information
●App is a combination of a client side and a lightweight middleware
server component
- Application Platform is a platform such as
Power Monitoring Expert (IONe), PowerSCADA Expert and
Enery Operations
1
Olivier Eeckhoutte – January 2013
4
Confidentiel

5. Development strategy
2
HTML5 NATIVE
• High Performance
• Offline Mode
• Findability
• Native user experience
• Monetization
• Rapid development
• Instant update
• A binary“executable
image”
• Executed directly by the
operating system
• Makes explicit use of
operating-system APIs
• Native Languages
• Entirely written using
web technologies
• Code is executed by the
browser, not by the OS
• Limited access to
features of the device
(camera, microphone,
vibration…)
Objective-C, Java,
C# /XAML, C++,
JavaScript
CSS / HTML / JS
5
Olivier Eeckhoutte – January 2013

6. Development strategy
●Future Trends
●Future device fragmentation
●Accelerated enterprise adoption
●New features and complementing technologies
●New distribution channels
2
6
Olivier Eeckhoutte – January 2013

7. Why don’t we use the best qualities of
each technology ?
7
Olivier Eeckhoutte – January 2013

8. Development strategy
2
HYBRID
• A Hybrid App is a native appwith
embedded HTML
• Selected portions of the app are
written using web technologies
• It has all the benefits of native app:
full access to APIs, etc
• App Stores presence
• Taking the future into consideration
NATIVE
Objective-C, Java,
C# /XAML, C++,
JavaScript
HTML5
CSS / HTML / JS
Native code +
HTML5
8
Olivier Eeckhoutte – January 2013

9. Development strategy
2
HybridApp
Web Portion of App
Native Portion of App
HTML, CSS, JS
Rendering Engine
HTML
API
Calls
Mobile Operating
System
OS-Specific-APIs
Wide Range
of Services
Hybrid App – Client Side
GSM Network
Microphone
Speaker
Camera
Vibration
Accelerometer,
Compass
Wifi
Touch Screen,
Keyboard
GPS
Storage
APIs Calls
APIs Calls
Graphics
Touch Events
Data
Calls, Data
Audio
Audio
Images, Video
Activation
Orientation
Location
Data
PhoneGap
9
Olivier Eeckhoutte – January 2013

10. Development strategy
Application Source Code
=
1 Core Web App Wrapped
=
1 Hybrid App
Hybrid App – Dev.Process
WEB Source
Code
Native Source
Code
Software Source
Code + Wrappers
Resources
(e.g. images)
SDK Tools
Compiler, Linker Packager
Executable
(Binary)
Distributable
Package
DEV
2
Platforms
connection
App available in different Stores
10
Middleware Server
Developers
Olivier Eeckhoutte – January 2013

11. Firefox
Marketplace
Development strategy
2
Core Web
“App”
Liferay
MarketPlace
(=S= App Store)
StruxureWare
Portal (Liferay)
Windows 8
Wrapper (=S=)
Desktop Web
Browser
Mobile Wrapper
(PhoneGap)
Google Play AppleAppStore Windows StoreWindows Desktop
Automobile OS
(Renault Rlink)
App World
(BlackBerry 10)
MAC App Store TVs Tizen
Chrome Store
11
Olivier Eeckhoutte – January 2013

12. Technologies & concepts used
- Responsive Design
●The App design reacts according to the size of the screen
●Elements of the UI (menus, colors, positions etc) change dynamically
across each device
- “Tombstoning”
●Tombstoning is the concept of remembering state of an application
when it is unexpectedly terminated
●Apps are expected to have “Enhanced Tombstoning (ET)” support
●ET support is our concept of allowing the user to leave the browser
version of our app, login to mobile version of the app and see the exact
same context state of the browser
3
12
Olivier Eeckhoutte – January 2013

13. Demo
●Building the KPI Library integrated in Liferay
●Allow customers to simply install KPIs in their Vizelia
implementation
●Kind of Apple App Store or Google Play
●Flexibility to move into Mobile space quicker
4
13
Olivier Eeckhoutte – January 2013

14. Recommendations
●Keys to successful Hybrid Apps
● Make the experience feel like a native application
● Take advantage of the enhanced features of HTML5
! Optimize performance !
● Don’t simply release a hybrid version of the mobile web
● Be careful with responsive design. It can become a nightmare
● Be careful with the JS framework you use
● Do not rely on the device but more on the HTML5 support
5
14
Olivier Eeckhoutte – January 2013

15. Appendixes
15
Olivier Eeckhoutte – January 2013

16. Core Web App built as a “Single Page App”
●What is a Single Page App ?
●Web application contains only one HTML page
●Rich and responsive as a desktop app but built with very portable
web technologies (HTML5, CSS3 and JavaScript)
●Application logic in the client
●Navigate without reloading of web pages à o a d views and
datadynamically on demand
3
16
Olivier Eeckhoutte – January 2013

17. Technologies in the middleware server
●Adopted a technology called NodeJS
● Asynchronous/ Event Driven technology ! Scalable for I/O
interactionsfrom client to server or vice-versa
● Technology based of Google V8 engine. Google chrome uses it.
● Javascript is used for development ! A l l o w s efficient language
transitionbetween client and server for developers
● Runs on any OS and is Open Source
●Socket.IO for the communication
● Cross-Browser framework that implement HTML5 WebSockets to build real time apps
● Double sense persistent TCP connection
! Faster than Ajax
3
17
Olivier Eeckhoutte – January 2013

18. App Development Comparison
Native
Hybrid
Web
Device
Access
Speed
Development
Cost
App Store
Approval
Process
Full Very Fast Expensive Available Mandatory
Full
Native Speed
As Necessary
Reasonable Available
Low
Overhead
Partial Fast Reasonable
Not
Available
None
18
Olivier Eeckhoutte – January 2013