Firefox OS allows web applications to access device capabilities through standardized web APIs. This bridges the gap between native and web applications. Mozilla is proposing and approving APIs that give web apps access to features like vibration, geolocation, and more. Web apps can also work offline through caching. Developers can create hosted or packaged apps and debug them on the Firefox OS emulator or devices.
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
The final demo for this presentation can be downloaded at:
https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip
SESSION ABSTRACT
=================
Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.
But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.
This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.
We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.
Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.
Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry
The final demo for this presentation can be downloaded at:
https://www.dropbox.com/s/9j09wip6wz84b61/JSDevConMobile-JQM-PhoneGap-Demo.zip
SESSION ABSTRACT
=================
Write Once, Run Everywhere. How many times have we been promised true cross-platform development? HTML5 seems to be the closest we’ve ever been to writing applications once and running them on multiple mobile devices, such as iOS, Android, Windows Phone or Blackberry.
But native mobile apps have taken all the spotlight in recent years thanks to the introduction of hundreds of thousands of apps in various app stores from Apple, Google, Microsoft and BlackBerry. Apps offer a great native platform experience, but they can be expensive to build and require specific languages, SDKs and skill sets across multiple platforms. Mobile web sites offer a great way to engage with consumers and corporate workers alike without requiring the installation of any app, and can in turn be adapted as deployable "hybrid" apps.
This session explores the fundamentals of native vs. web apps, and how to choose the right approach for any given scenario. We begin with an exploration of the benefits of web development for smartphones using the most popular HTML5 & JavaScript framework for mobile: jQuery Mobile (JQM). We’ll go over a quick primer on HTML5, CSS3 and JavaScript, followed by everything you need to get started with JQM. We’ll cover the most common development environment options, how to build your first jQuery Mobile page, and how to debug your mobile web code with some of the available tools. We’ll also discuss how to develop a native-like experience on each mobile platform thanks to JQM’s adaptive rendering, and how to save and retrieve data with the cloud using Microsoft Azure Mobile Services.
We'll then learn how to leverage PhoneGap to wrap our mobile web UI into a native smartphone or tablet app. Discover how PhoneGap exposes native device hardware like cameras, sensors, GPS and more. We’ll also discuss the pros and cons of PhoneGap-based apps, how to deal with the UI design guidelines across platforms, and learn some do’s and don’ts of cross-platform mobile development.
Native mobile apps have their place for mass market revenue-generating models, but you also need to master cross-platform techniques when the situation calls for it such as in enterprise mobility scenarios and other niche areas. Web development is a critical skill required by every mobile developer; come learn how to get started and reach hundreds of millions of users through a smart mobile web & hybrid approach.
BBM Social Platform and App MonetizationKyle McInnes
BlackBerry Messenger is an incredibly popular app that is becoming a social platform. With the BBM Social Platform, developers can leverage the millions of connected users to spread their applications virally and further monetize their apps.
SD Forum Java SIG - Service Oriented UI ArchitectureJeff Haynie
Presentation given by Jeff Haynie at the SD Forum Java SIG in Palo Alto, CA on 12/02/2008. Service Oriented UI Architecture in the world of web, desktop and mobile applications. How the web has gone beyond the browser and we’re headed back to Client/Server.
Mobile Development Importance, Survey of mobile based application development, Mobile
myths, Third party frameworks, Mobile Web Presence and Applications, Creating consumable
web services for mobile, JSON, Debugging Web Services, Mobile Web Sites, Starting with
Android mobile Applications.
Presentation covers the concept of hybrid mobile application development as well the examples, A better way to start developing applications for all platform in amount of just one, The future of application development.
Open Source World : Using Web Technologies to build native iPhone and Android...Jeff Haynie
Presentation given by Jeff Haynie, CEO of Appcelerator, at Open Source World 2009 in San Francisco, CA on August 13, 2009.
Jeff talks about the state of the mobile smart phone application marketplace and how you can build native iPhone and Android applications using the open source platform, Appcelerator Titanium, and web technologies such as HTML, CSS and JavaScript.
BBM Social Platform and App MonetizationKyle McInnes
BlackBerry Messenger is an incredibly popular app that is becoming a social platform. With the BBM Social Platform, developers can leverage the millions of connected users to spread their applications virally and further monetize their apps.
SD Forum Java SIG - Service Oriented UI ArchitectureJeff Haynie
Presentation given by Jeff Haynie at the SD Forum Java SIG in Palo Alto, CA on 12/02/2008. Service Oriented UI Architecture in the world of web, desktop and mobile applications. How the web has gone beyond the browser and we’re headed back to Client/Server.
Mobile Development Importance, Survey of mobile based application development, Mobile
myths, Third party frameworks, Mobile Web Presence and Applications, Creating consumable
web services for mobile, JSON, Debugging Web Services, Mobile Web Sites, Starting with
Android mobile Applications.
Presentation covers the concept of hybrid mobile application development as well the examples, A better way to start developing applications for all platform in amount of just one, The future of application development.
Open Source World : Using Web Technologies to build native iPhone and Android...Jeff Haynie
Presentation given by Jeff Haynie, CEO of Appcelerator, at Open Source World 2009 in San Francisco, CA on August 13, 2009.
Jeff talks about the state of the mobile smart phone application marketplace and how you can build native iPhone and Android applications using the open source platform, Appcelerator Titanium, and web technologies such as HTML, CSS and JavaScript.
Dreamweaver CS6, jQuery, PhoneGap, mobile designDee Sadler
A session talk for #NAGW2012 on:
Mobile app, choices
Dreamweaver’s place
Creating Mobile Design (actual design, not code)
Other helpful Adobe tools to create HTML/CSS
jQuery Mobile in DW
PhoneGap Build in DW
Introduction to hybrid application developmentKunjan Thakkar
The presentation I prepared for in-house skill building. Introduction to Hybrid development. Understanding different frameworks and choosing the right one.
We can know about what is mobile application. Especially we can know about Hybrid Mobile Application.
Hybrid mobile Application's Overview information and few thing about Native and Web mobile applications.
Adding intelligence to your LoRaWAN deployment - The Things Virtual ConferenceJan Jongboom
LoRaWAN devices are typically simple, they grab some sensor data and deliver it back to the network. By adding some embedded machine learning we can make them a lot more intelligent!
Teaching your sensors new tricks with Machine Learning - CENSIS Tech Summit 2019Jan Jongboom
We collect more sensor data than ever, but throw most of it away due to cost, bandwidth or power constraints. In this presentation we'll look at embedded machine learning, pushing intelligence directly to the sensor edge. Given during the CENSIS Tech Summit 2019 in Glasgow, Scotland.
Adding intelligence to your LoRaWAN devices - The Things Conference on tourJan Jongboom
Want to get started? Check the tutorial here: https://www.edgeimpulse.com/blog/adding-machine-learning-to-your-lorawan-device/
Talk about machine learning for IoT devices (TinyML), and everything that it entails. From signal processing to neural networks to classic ML algorithms. Presented in Reading, UK and Hyderabad, India during The Things Conference on Tour.
Machine learning on 1 square centimeter - Emerce Next 2019Jan Jongboom
Machine Learning is widely applied, but the models operate on digital data and run in big data centers. But there's more to the world. This is my presentation from Emerce Next 2019 about pushing ML to the smallest of devices.
Fundamentals of IoT - Data Science Africa 2019Jan Jongboom
As data scientists your job is to create order in the data chaos. But where does this data come from? Real-world data does not magically appear cleanly in your Matlab scripts. This is a talk about the fundamentals of IoT, and how to retrieve data from the real world using sensors and devices. Given during Data Science Africa 2019 in Addis Ababa.
Recording: https://www.youtube.com/watch?v=DxTetwYsXvo&index=1&list=PLiVCejcvpsevQ_I9oDIK6eIgau45fWje2
The Mbed Simulator allows you to cross-compile Mbed OS 5 applications and run them on your computer.
LoRaWAN is great, but it requires so much hardware. As I live on a plane I want something better. Presentation about simulating LoRaWAN devices. Here's a video of the simulator: https://www.youtube.com/watch?v=C1S8knMlX7w
Firmware Updates over LoRaWAN - The Things Conference 2019Jan Jongboom
IoT deployments last for ten years, but that's a long time. Requirements change, vulnerabilities are found, and standards evolve. You'll need a firmware update solution.
Talk during The Things Conference 2019.
Faster Device Development - GSMA @ CES 2019Jan Jongboom
Presentation about interesting open source developments that can be used in conjunction with LTE Cat-M1 and NB-IoT. Presentation from the GSMA IoT workshop at CES 2019.
3. One of the main problems that we're facing when developing mobile applications with web
technologies, is that phone specific features aren't available yet in the browser APIs. And why
would we; vibrating your desktop computer was not really an issue when the web standards
were decided upon.
4. To accomodate for the changing landscape parties like PhoneGap have already tried to bridge
the gap between 'native' and the web on platforms like iOS and Android;
5. but Mozilla is taking this one step (maybe two or three) further by proposing standardized
solutions to access phone specific APIs.
6. No more ‘native’
And this is necessary because there is literally no difference between a 'native' app and a web
app. Everything on the screen,
8. and from the web browser (yes! the web browser) to the camera are written in HTML / CSS /
Javascript. And this means that APIs needed to be defined to access these features from your
shiny web app.
9. Decouple web and online
Another problem that we need to solve in this space is the fact that 'web' basically means
'online'. But with a mobile application you can't fully rely on a user having a data connection
at all time.
10. How can we adjust a current application to also be available when the user is on a plane?
11. Overview
1. Oeh shiny, an overview of Web APIs
2. Offline support
3. First app in 5 minutes
4. Adding 'native' capabilities
5. And off to the market place
So here's the list of subjects that we're going to tackle in this talk:
12. Regular APIs
• Vibration • PushNotifications
• ScreenOrientation • WebFMApi
• GeoLocation • WebPayment
• MouseLock • IndexedDB
• OpenWebApps • AmbientLightSensor
• NetworkInformation • ProxyimitySensor
• BatteryStatus • Notification
• Alarm
• WebActivities
Yellow = Approved by W3C
These are all ‘basic’ APIs that have been proposed by Mozilla to the World Wide Web
consortium. Even better, a bunch of them have already been approved. Requires sometimes
permission.
16. The list I showed you before is the list of all APIs that you can use from any web application.
However, some websites are more equal than others and thus require additional APIs
17. Think the phone application. Not every simple website should be able to make phone calls or
send text messages.
18. Jeg bruker bare
sertifiserte
API’er!
These are the 'certified' APIs. They go through the same W3C process as the other APIs but
require your app to be certified.
20. Webactivities
Connecting apps
Webactivities are a way to loosely couple applications to eachother. They work in a pub/sub
way where every application can register itself as a listener for certain activities.
21. Hey I need an
image!
Sure, I can provide
you with one!
For example, the camera application will register itself as 'hey I can provide images'. When
your application needs an image from the user,
22. Web activities
the user will be provided with the choice between all applications (camera, gallery, yourapp)
that provide that. This can not only go for media, but in the future also for choosing which
phone app should be used to dial, or which web browser to surf.
23. I NEED AN ADULT!
Because when you start devving this you might need some help ('i need an adult' image)
25. Offline
Offline is a hard problem to solve. Web applications are mostly built for connectivity but that
is not always available on your shiny phone.
26. Dealing with offline
• Have the necessary application files
available
• Cache server side data
• Store app state on device
Data can be expensive, people are roaming, etc. The ways that you have to deal with offline
usage is:
27. Two types of apps
• Hosted
• Assets on the server
• Cacheable via appcache
• Packaged
• ZIP archive with assets
Withing Firefox OS there are two types of apps that you can develop:
1. Hosted apps, that have their assets on a server; cachable via appcache
2. Packaged apps; that are a zip archive
34. The web browser will now fetch your whole page, then read the appcache and load all
resources described there.
35. ZIP
• One big zip file
• Resources loaded from zip file
• Still requires manifest file
The zip approach doesn't require this but has all dependencies in the zip archive.
36. The app manifest file
• Part of your packaged app
• Has metadata (name, description, version)
• Can define required permissions
https://marketplace.firefox.com/developers/docs/manifests
37. web = default app, permissions limited to open web api’s specified in there
priviliged = has to go through app store review process, has access to some more sensitive
api’s
certified = system critical apps
38. web = default app, permissions limited to open web api’s specified in there
priviliged = has to go through app store review process, has access to some more sensitive
api’s
certified = system critical apps
39. web = default app, permissions limited to open web api’s specified in there
priviliged = has to go through app store review process, has access to some more sensitive
api’s
certified = system critical apps
40. web = default app, permissions limited to open web api’s specified in there
priviliged = has to go through app store review process, has access to some more sensitive
api’s
certified = system critical apps
41. Storing data
• Local Storage
• IndexedDB
• Limited storage!
• Manifest file can increase
For storing data rely on local storage or IndexedDB, which has limited storage but these limits
can be improved by specifying this in the manifest file.
42. Writing first app
Let's get this thing rolling. [Mortar](https://github.com/mozilla/mortar) is a set of projects
that can bootstrap you in creating Web Apps.
43. Mortar
• HTML5 Web App
• Files
• Caching
• Manifest
• Everything to get started fast!
It does not only contain all relevant files for your project, but also does the caching for you
and has the manifest files that are required to get your app in the marketplace.
44. The application now runs and you can use any browser to access the application and start
using it.
45. Mortar contains stubs for applications, a game, list-detail views, and tab view. These samples
are ready and free to use, and very easy to manipulate into your own application.
46. Of course, everyone has the emulator installed; so let's go into Firefox. Tools -> Web
Developer -> Firefox OS.
47. The emulator shows up and the easiest way to get started: unlock the phone and click the
browser icon, go to http://localhost:8008. This is it. Your app now runs in the emulator.
48. Debugging time
• Install Firefox Nightly and go to the app
page, debug with default tools
• Remote connection via emulator
• This breaks often!
• Weinre
Because your app is 'just another' web application, we can use the default firefox developer
tools to debug the application. You can do this from two sources.
49. Connect to emulator
• Go to about:config
• Toggle devtools.debugger.remote-enabled
• In the emulator
• Settings -> Device Information -> More
information -> Developer
• Toggle ‘Remote debugging’
about:config devtools.debugger.remote-enabled true
50. This doesn’t work on recent builds of the debugger, and breaks often. Doesnt work on real
device.
51. https://github.com/robnyman/
Firefox-OS-Boilerplate-App
So your app runs on the emulator, but it doesn't use any capabilities that Firefox OS offers
additionally. Here is https://github.com/robnyman/Firefox-OS-Boilerplate-App