Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Do you really want to delete this prezi?
Neither you, nor the coeditors you shared it with will be able to recover it again.
Make your likes visible on Facebook?
You can change this under Settings & Account at any time.
Cross-platform mobile development using Web technologies
Transcript of Cross-platform mobile development using Web technologies
1) Problem, motivation, goals
2) Solution developed
3) Conclusions and future work
using Web technologies
July 9, 2013
Faculty of Engineering of Oporto University
Supervisor: Rui Maranhão (PhD)
Have ideas for
(but lets focus on mobile)
The usual suspects
and your boss
Major mobile operating systems support HTML5
Single code base
different UI and UX
Most popular libraries and frameworks provide a consistent look&feel across all platforms
Read: the same look&feel everywhere!
Users don't care if you use HTML5
Good integration with their smartphone
Great user experience
But, developers and managers care.
Because it helps to:
Reduce costs by reducing the time it takes to build an application
that can run on the major mobile platforms
So we want to:
Build a framework
for building cross-platform mobile
that look and feel (almost) native,
using well-known technologies:
The Meems Framework
The developed solution
Application overall design
Require.js to organize the code (AMD)
Meems UI is used as view engine
Meems Utils AJAX methods are used to communicate with the back-end server
PhoneGap to build the native mobile wrappers for Android and iOS
Adobe PhoneGap Build
all the views
all the view-models
images and logos for each platform
PhoneGap configuration file
external libraries (meems, require.js)
images the application uses
style sheets, for Meems and custom
helper scripts, ex: minification
General UI Concepts
Contains all visual, layout and organizational widgets to build an user interface
Can be extended to add more widgets
Outputs DOM elements
Simulates the scrolling of elements like in Android, iOS and others
Paging and Snapping
Dynamic child dimensions
Older implementations of Android and iOS don't support scrolling of some elements
Uses hardware acceleration through CSS3
Arrays, Maps, Iterators
DOM manipulation, with batch commit of changes
Library for manipulating DOM events
Also supports custom events
API that abstracts the programmer from different event models in different browsers
The demonstration application
User interface is built using widgets
Widgets have attributes and facets
Widgets implement the necessary cross-platform logic and generate their HTML DOM representation
All styling and effects are achieved using CSS3. Inline styles are used only when strictly necessary, being replaced with CSS class names
Page holders contain one or more pages, only one is visible at a time
Programmers can change the visible page. May trigger CSS animations.
Observables can be used to bind data to widgets (data bindings)
Group, TabGroup, Tab
Button, Slider, Switch,
Application overall design
Node.js as platform
Express serving a REST API
MongoDB as database
and Future Work
Developing mobile applications
using Web technologies:
Is possible, but hard. HTML is for sites.
Is not a solution for all applications
Lacks proper developer tools (debugging mostly)
Is the future! HTML5 apps as first-class citizens:
Windows 8 (not Windows Phone 8)
HTML5 and JS implementations will improve and converge,
increasing the performance of web apps to native-like.
The Meems Framework helps, but...
Performance must be improved
Support more mobile platforms and design patterns
Deal with different device resolutions automatically
Add more widgets
There is still work to be done.
The Meems Framework is open-source!
Fork it at GitHub!
to development of mobile applications