Developing Webapps for Firefox OS

Video thumbnail (Frame 0) Video thumbnail (Frame 11590) Video thumbnail (Frame 23180) Video thumbnail (Frame 24937) Video thumbnail (Frame 28507) Video thumbnail (Frame 29088) Video thumbnail (Frame 29883) Video thumbnail (Frame 30595) Video thumbnail (Frame 31776) Video thumbnail (Frame 33363) Video thumbnail (Frame 34813) Video thumbnail (Frame 35479) Video thumbnail (Frame 36023)
Video in TIB AV-Portal: Developing Webapps for Firefox OS

Formal Metadata

Developing Webapps for Firefox OS
The Efficient & Simplistic Approach
Title of Series
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date

Content Metadata

Subject Area
This session will mostly concentrate on tips for designing and developing apps for the web as a platform while using the latest development tools and resources for Firefox OS in an efficient way. With each passing day we see the web becoming more and more popular as a platform. What makes these apps so special? How can someone build such apps which aesthetically appeal to users? This session would be mostly concentrate on tips for designing and developing apps for the web as a platform while using the latest development tools and resources for Firefox OS such as the App Manager in an efficient way
Web page Point (geometry) Mobile app Context awareness Server (computing) Computer file Code Multiplication sign 1 (number) Amsterdam Ordnance Datum Web 2.0 Different (Kate Ryan album) Computer programming Electronic visual display Energy level Descriptive statistics Scripting language Home page Addition Touchscreen Mapping Software developer Projective plane Electronic mailing list Data storage device Bit Line (geometry) Variable (mathematics) Cartesian coordinate system Type theory Subject indexing Uniform resource locator Computer animation Personal digital assistant Website Quicksort Local ring Row (database)
Group action Mobile app Computer file Code Patch (Unix) Black box Disk read-and-write head Number Software bug Fraction (mathematics) Web 2.0 Error message Social class World Wide Web Consortium Software developer Sound effect Line (geometry) Measurement Web application Data management Digital rights management Word Computer animation Logic Query language Personal digital assistant Normal (geometry) Website Library (computing) Asynchronous Transfer Mode
Dataflow Addition Computer file Observational study Divisor Electronic mailing list Computer simulation Insertion loss Water vapor Mereology Cartesian coordinate system Dimensional analysis Type theory Data management Mathematics Web service Goodness of fit Computer animation Different (Kate Ryan album) Video game Website Marginal distribution Descriptive statistics
Mobile app Computer animation Computer simulation
Web page Computer animation ACID Water vapor Mereology God
Noise (electronics) Computer animation Boundary value problem Mereology
Mobile app Computer animation Profil (magazine) View (database) Damping Video game console Streaming media Orbit
Web page Standard deviation Touchscreen Computer animation Multiplication sign Computer simulation
Slide rule Data management Computer animation Multiplication sign
Web page Android (robot) Mobile app Wrapper (data mining) Multiplication sign Software developer Computer simulation Control flow Similarity (geometry) Web browser Web 2.0 Web application Process (computing) Different (Kate Ryan album) Website Right angle Asynchronous Transfer Mode
so for for being here um who of you has developed its web apps that already so there's a few which is good so I don't need to explain that much about what the ah we're concentrating on how to do things in a in a in a simple way and to understand what you're doing in the the level of getting started basically and it's not so much on when you already know everything because then you probably don't need an introduction talk anyhow and then we will take a look at the tools that Firefox has to work with where that's a sort of I'm Cairo's society this itself and so what is aware that for those of you who were really that have have done some you probably know this already and I'll start off with we have 2 types of web it's basically hosted in packaged one-celled all come back to the packaged once later the holes that ones are just normal websites basically HTML CSS JavaScript with the all the addition of having a small app manifest that describes it the package steps are the same thing just take a step in this SIP into to download them locally to the device when you install them which means it's easier to deal with offline capabilities because you already have all the files offline 4 holes the gaps there's stuff to to make them work offline as well but that's a bit more complicated so let's look at the main difference between a website in a way that that's the up manifest and on this project I find the whole manifest if it's on the screen that's nice that's the manifest from my plants you maps of application it's this is exactly the the manifest that did not strip anything of it's just the Jason file that describes what this FB is and what uh what it can do so it has a name it has a description that tells what what the what the ATPase doing then in the HTML file that is being cold when the app happens being launched which just as index xhtml here so that case path just for offline capabilities of fools the ABS you can do that you can break off line with stuff that refers to a web server that's HTML 5 epeeist uh if you want to learn more of that there's a lot of resources out there but it's a bit complicated but I won't go into detail on that and then you have some permissions that the app needs In this case storage and you location it's this this is a map of the description says displays maps and records GPS tracks so of course if we want to recorded TPS TREC would probably want to know your location so we need the permission fortune location and we need a permission for story so that we can actually save those paths of locals GPS strikes expands to store to catch maps on this so you have the maps offline at the next time you go somewhere and and that's in this is description so that that's the PAL cast uh caching of that of the map the description right now use therefore reviewers so we it once you upload it of the the up to the marketplace then it gets reviewed by about our read your team just like we have 4 for adults as well and right now the description of tells reviewers why you need this permission in the future we want to have some way to display that in the UI for users as well so if you write this description be aware that previewers our uh determining if you're doing the right thing by reading the description and keep in mind that it might be displayed to users at some point we don't do that yet but we have that in the plans for for the future some sometimes then them at manifest also describes the developer and in this case that's me with the name in the URL to to my home page and then it describes some items that's 1 thing that that a web page by itself doesn't have a list of items in different sizes so that's something we need in the in the UK manifest because of course you want to display on on the phone screen forfeited step so the main reason why we have this it is because once you install the the we need to have some idea of what to display on a nap screen and things like that and and that's what's in so that that's the main difference what that we have to web web pages and that's that's the whole the whole secret behind basically to you you do a web page you put up a manifest and magically you have a web that's nice right and but that's what Mozilla's all about we're using web technologies to do all the stuff that others have created proprietor stuff for so that's a nice thing so I want to give you some some idea of best practices for 4 at developments basically that's not too much difference there and best practices for program general and and the most important thing with everything you program and this where that's as well is when writing the when writing the cold also the fact that you probably need to have someone yourself or someone else maintain this thing later on maybe be extended maybe think spots whatever so keep that in mind when writing the cold and works the the the most important thing is if you keep in mind that it needs to be maintained later on someone not completely familiar with the cold should be able to read it that someone might even be you but I know for a fact that I've been looking at the all the cold enough written and I'm not a big colder but I've looked at all this scripts an and all the stuff that i've written and I thought what was this doing exactly so it's a good idea to consider yourself a someone unfit familiar with the cold later on because you don't remember everything that so keep that in mind uh the when writing stuff and that makes it makes it much easier use variable names that explain themselves so that you know later on what this variable does it's not very helpful to have a F equals the substring X you know you probably don't know anymore what that what that is a few years down the road and someone else will know use descriptive different variable names use comments with explanations for everything that's none of not obvious it is obvious by reading the cold a common this useless but if it's not obvious but looking at the code and that's something that we need to use your judgment of what someone not
familiar with this uh we'll see there that use commons rather you do things that are non-obvious especially if you use a few hours to find out what went wrong to fix a bug it's usually a good idea to mark where you fixated uh with with the comments of why you're doing this they know that you're putting for fixing it because that might not be obvious because you wrote it wrong in the 1st place right at any keep in mind that's that's not only true for and reverbs that's true for CSS and HTML as well as having a CSS class somewhere in there where nobody knows where what is needed for is not really helpful so use comments but there's well in and it and also use grouping especially in in CSS prove that use grouping things together that out logically fit together it doesn't make too much sense to have things that belong together spread all across the files logical grouping can be done in different ways just make sure you have 1 logic and stick to it so in the end to summarize this but just think of how coach should look if you want to contribute to project out into a patch what you expect there to find your way in and to write a patch there exactly that's how you should write your own code the I end with their heads I also want to use the word on libraries I everyone doing Web site development almost everyone uses some kind of JavaScript libraries with web let's be careful with those and when starting to learn things in general so it's good to know what every line that you ride does usually with libraries that's not necessarily the case you import some black box in the past that black box to something when you want to learn how things work it's better to do it yourself and not have it as beautiful and things like that but you at least know what it's doing later on when you understand everything it might make sense to the to put a library in for some things but I start off without it and start off with with knowing what the code does in web apps especially in in especially with menus package steps that need some advanced emissions and that if if you need some advanced emissions that normal holes the gaps normal websites don't care but then you have stronger restrictions on what you can do in in in in your code uh especially through the sea is p the what was the name contents security policy of think and you have restrictions on what you can do libraries were written for normal websites usually and those libraries might not apply to those restrictions so I Spy registered a thing of last week or so uh where someone tried to use the query in and out and get some strange errors about something that was not a lot but by C is and he did not write the code because that was the query coal bed that violated that's so be careful with that with that you might have stuffing there doesn't actually work and whether it's uh because libraries our for example using evil which you are not allowed to use and things like that so be careful with those things size inefficiencies 1 topic there but you want Web apps especially on those constrained devices that were using for Firefox OS right now you 1 Web to be small libraries can be large and you might only use a tiny fraction of it so that's probably not the most efficient way to do things if you just want something to be smoothly displayed is might be better to use the CSS transition than a JavaScript library of because you using only a very small portion of the library and so it's easier to picture on cold and libraries actually because you understand your own course hopefully you put the comments and you may be understandable you cannot be guaranteed that you can do it with the library and once you run into updating libraries and you have done because the modifications that's not nice so that if you need to fix something it's very you fix if it's your own code that you fix and as a last thing the of licenses FIL the library licence might not be compatible with you with the license of the stuff you 1 of you so paid careful to only use library use if the licenses match what you wanted we so to summarize dead it's not bad to use libraries in general but only use them if you really trust what they're doing if you use a big enough portion of them and if you really know what you are doing but once you have understood everything that you're doing it's easier to put it on and that also means ideally you have the basic logic of your of your app working without library and then you can put it in to do some icing on the cake basically to to do some nice effects that make things work without it and you probably are happier in the long run I know there might be things that don't work with a without the library but tried to to have it working with without it if possible and that said the when you are developing there's a number of tools we have in Firefox um that way you understand the colored uh are good to use 2 D back and that's what no be talking about it that which thank you good could about so the 1 of the 2 so that we have out there for billing traffic trace acts of about mission it is something that is known as that manager and the mode try something ridiculous what's that of like so hopefully it looks so good so what is the bad managers physically the AP manager is nothing but something that is added of 2 5 octets of which allows you to add and this into a lot of stuff you called different so to start that of from Firefox trace onwards at measure comes of it in Firefox itself or that you need to do is to develop a 2 and we will not manager
so this is below home screen for lab manager that is you you so it's basically divided into it it can just after she bought 1 would be the life span of this you can see in you of 1 in the aspects and the other part is that it's not invisible that addition of a data that been no losses the so how does this all yeah though easiest they also adding an out of 2 that managers would be to add the manifest file our knowledge of at margin so we basically as just funded of the tool of different types of Absolon is what we call was that and the other is something that we call package so I'll start with an example of flow and was set up so the example that example at mentions that religion was that of his math application of called 90 so I'm just adding them all remove part
for his manifest registered on the and button and the the think so that's that's the study on the right in as you know in the English and you didn't say 0 that should come of European the OK so that's something that me definition data than it do not be prevent the agent is not to so I just go ahead and I'll show you how it looks for a package that is as easy as clicking on this blessing for packages I have of them laugh or you're in my list of understanding of gesture forehead and the 1 and the so this is basically an up on this factors that that use your you as soon as I added of act is displayed in the up around you there are basically 2 particular sites on 1 side and all you can see the names of the asset being added and on the other side you can see the destruction of the act itself so than the restriction but you can't you know I cannot go out those details about the water flow and and also there's something really need to wear you that is called dimensions Data now the manifest data is something that already does you that of its good service manager initially it allows you to manifest your applications of and the so you can do the genes of a description of your and you contains so many of you have already in the lounge part of something that I want to I can just who coherent eigengenes to something and using the on the goal you have to the description for your ass OK so non and try to show 1 more thing that is the simulator itself I have a similar
running already so if you take 1 of data
here your app is dynamically installed on your simulator all our in here will realize directly connected to your reader and it looks just like this and so if I wanted the book to use have it's as simple as
the water and you have the would loose popping up so this is the familiar dialog would proves that ideas almost most of you would be nice although there is a a with so all of on intimidation of 5 pages of it just uses all Johnston banished era so providing can show you this I use the condom convention of the inspector and
I God in part of the beach that is independent of the background acid that's why
it's of didn't understand what this I invite you click on this part of this and this but you see this it'll boundary coming over here which I don't think this is in with here noise yeah so under a good
example would be if I use undoing modifications of CSS itself so
I think I'll just try and use of Barranquilla to something like to an have dynamically change the background of my MIT do opportunities this is the dual of the orbitals all you can do anything if the CSS and therefore for your app this is a very tall handy all feature of foreign aid and a lot of them are active again use the convention view of the profiler you don't have a scratch battle you and then you can also take for the console the no finally as showing you
also want them all of of hold of a few more pollution so if you can't see the whole stream is also the thing when fighter that so if I think the Monday book for the home screen and the the shows so the 1st half the and I have a new and so I should to thank the this a little so thank you have a background
about abortion so the funding so I don't have much time now so as this of will and try to be looking down on so if I go to the standard again and if I want to show something will the the and so I can just change the font size for those use increases the spontaneous so that just shows you that this is nothing but a scam of 5 it's as easy as editing of that page and everything that you do is directly reflected on the simulator which can also be reproduced on the device itself so these are some tools that can be used for developing own apps and of
final thing would be in the this home that we have a lawyer if I take on this screen
shot it shows me the screenshot of you asked so you're going to get involved in your camera and try to take a picture of fear of falling all you need to manually Dagoes device screenshot again as those of you that have to In this screenshot and that was at the door and
manager so you I I give it go out to the the for any questions so that the time that you can go it to the last slide on the other side of actually so and that's a
surprise of the have any questions to let's say at the mode are what I was talking about the yeah of you that I have here by so the question is uh to have it on on their does the simulator it support up putting sounds in web apps so it's a as basically the same simulator that you're using although as the previous oceans hopefully for it if public site for that and if it was fixed and it should be up and they'll 120 motion of those military but the 1 by intuition is the same as the previous fascinated and you had to but it would I think I can actually never tried some of the simulated but the surely if it doesn't break make sure about this filed you know the the is so that yeah that guy's good to ask a because freaking on developer tools the the at any other questions all the and the uh can you talk with a microphone is easier to understand for here and when you run up on the device this everywhere Weber get its own of processes or is just same and process for all weapons on the device every apparatus in this on process and on the slave I'm actually not sure to but I'm not sure about it but I think it's the same process as a single literature on this yeah I think the similarity is not multiprocessors yet so that's that's 1 big difference but on the device usually have different processes for every app not for every webpage insert the local even for every webpage inside the browsing only the browser wrappers right is not running in a separate process and now I think that's about to be changed in the future that's not there it anything else the all the deploying better of some different voices and pitfalls and so you actually can run web apps pretty well on in uh Firefox for Android or on any device that has Firefox Frankfurt installed the end we think we even in shifting final releases of Firefox on desktop the support for running a web apps natively it's not create protests as well but it should work even though the marketplace does not right now in the alliance lesion on desktop I think but if there some work around for doing that even from the marketplace I don't remember exactly but that's there some documentation up on on the Mozilla Developer Network for debts nothing out of time so thank you all for being here it was nice to talk to you