Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start 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.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Cross-platform mobile development using Web technologies

No description
by

Diogo Costa

on 9 July 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Cross-platform mobile development using Web technologies

Cross-platform mobile development
Agenda
1) Problem, motivation, goals
2) Solution developed
3) Conclusions and future work
Problem
using Web technologies
Diogo Costa
July 9, 2013
Faculty of Engineering of Oporto University
Supervisor: Rui Maranhão (PhD)
Individuals
and
Companies
Have ideas for
applications
Available everywhere
(but lets focus on mobile)
The usual suspects
Common approaches
Parallel
1
2
3
4
Series
versus
Motivation
Consumers
and developers
and your boss
Enters HTML5
Major mobile operating systems support HTML5
Single code base
different platforms
But
different UI and UX
Most popular libraries and frameworks provide a consistent look&feel across all platforms
Read: the same look&feel everywhere!
Sencha Touch
jQuery Mobile
Users don't care if you use HTML5
They want:
Good integration with their smartphone
Great user experience
But, developers and managers care.
Because it helps to:
by
Reduce costs by reducing the time it takes to build an application
that can run on the major mobile platforms
So we want to:
UX
Goals
Build a framework
for building cross-platform mobile
applications
that look and feel (almost) native,
using well-known technologies:
HTML5, CSS3 and JavaScript
PhoneGap
The Meems Framework
The developed solution
Application overall design
Model

View

ViewModel
JavaScript
JavaScript Objects
Meems UI
Require.js modules
MVVM approach
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
Code structure
tools
www
css
img
js
lib
view
viewmodel
res
index.html
config.xml
all the views
all the view-models
entry point
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
Meems UI
Meems Scroll
Meems Utils
Meems Events
Meems Framework
Meems Framework
Require.js
Contains all visual, layout and organizational widgets to build an user interface
Can be extended to add more widgets
Developers build UI in JavaScript
Outputs DOM elements
Simulates the scrolling of elements like in Android, iOS and others
Supports:
Bouncing
Paging and Snapping
Axis Lock
Dynamic child dimensions
Older implementations of Android and iOS don't support scrolling of some elements
Uses hardware acceleration through CSS3
Several utilities for manipulating JavaScript data structures and miscellanea
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
RSS Reader
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
Widgets
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)
Navigation and
Organization
PageHolder, Page
Aside
Layout
Header, Footer
Form, ButtonGroup
Group, TabGroup, Tab
UI controls
Button, Slider, Switch,
Textfield, Html
Screenshots
Mobile front-end
Application overall design
Node.js as platform
Express serving a REST API
MongoDB as database
Back-end
r.js optimizer
Conclusions
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:
Firefox OS
Ubuntu Touch
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.
Questions?
Diogo Costa
ei07150@fe.up.pt
@h4evr
The Meems Framework is open-source!
Fork it at GitHub!
https://github.com/h4evr/meems-ui
to development of mobile applications
Full transcript