Firefox OS : JavaScript Everywhere!

A talk for Mallorca JS . Introductory talk about Firefox OS. Why? How? and the system use of JS APIs

Transcript

1. FIREFOX OS: JAVASCRIPT EVERYWHERE! 23-02-2015 @ MallorcaJS
2. CONSOLE.INFO(VOYLINUX) Pablo Bernardo - Web developer Open Web Evangelist & speaker Twitter user Active member @ Blogger @ Github @ @voylinux Mozilla Hispano voylinux.com @voylinux
3. WHERE IN THE WORLD IS FIREFOX OS? A reality in more than 25 countries World map
4. IS THIS NECESSARY? Focus in new markets Affordable hardware No third party accounts Just web. No propietary languages
5. FIREFOX OS SYSTEM LAYERS
6. WHAT DO I NEED? Firefox Browser Text editor Some HTML, CSS and JS Everywhere!
7. LET'S BEGIN! Manifest file
8. MANIFEST FILE: DEFINES THE APP AND PERMISSIONS { " v e r s i o n " : " 1 " , " n a m e " : " M a l l o r c a J S ­ F i r e f o x O S B o i l e r p l a t e A p p " , " l a u n c h _ p a t h " : " / i n d e x . h t m l " , " d e s c r i p t i o n " : " B o i l e r p l a t e F i r e f o x O S a p p w i t h s o m e e x a m p l e s " , " i c o n s " : { " 1 2 0 " : " / i m a g e s / l o g o 1 2 0 . p n g " , " 1 2 8 " : " / i m a g e s / l o g o 1 2 8 . p n g " } , " d e f a u l t _ l o c a l e " : " e n " , " p e r m i s s i o n s " : { " d e s k t o p ­ n o t i f i c a t i o n " : { " d e s c r i p t i o n " : " T o s h o w n o t i f i c a t i o n s " } , " g e o l o c a t i o n " : { " d e s c r i p t i o n " : " M a r k i n g o u t u s e r l o c a t i o n " } , " a l a r m s " : { " d e s c r i p t i o n " : " S c h e d u l i n g a l a r m s " }
9. PERMISSIONS SYSTEM AND APPS TRUST SYSTEM Untrusted apps only those Web APIs that contain sufficient security mitigations to be exposed to untrusted. Privileged apps have permissions to a subset of the Web API operations accessible to Certified apps. Certified apps have permissions to most Web API operations. mdn docs
10. ANDROID FRIENDLY APPS
11. WEB APIS TO BE STANDARD battery camera vibration contacts...
12. PICK AN IMAGE v a r p i c k I m a g e = d o c u m e n t . q u e r y S e l e c t o r ( " # p i c k ­ i m a g e " ) ; i f ( p i c k I m a g e ) { p i c k I m a g e . o n c l i c k = f u n c t i o n ( ) { v a r p i c k = n e w M o z A c t i v i t y ( { n a m e : " p i c k " , d a t a : { t y p e : [ " i m a g e / p n g " , " i m a g e / j p g " , " i m a g e / j p e g " ] , / / I n F x O S 1 . 3 a n d b e f o r e t h e u s e r i s a l l o w e d t o c r o p t / / i m a g e b y d e f a u l t , b u t t h i s c a n c a u s e o u t ­ o f ­ m e m o r y i / / s o w e e x p l i c i t l y d i s a b l e i t . n o c r o p : t r u e / / d o n ' t a l l o w t h e u s e r t o c r o p t h e i m a g e } } ) ; p i c k . o n s u c c e s s = f u n c t i o n ( ) { v a r i m g = d o c u m e n t . c r e a t e E l e m e n t ( " i m g " ) ; i m g . s r c = w i n d o w . U R L . c r e a t e O b j e c t U R L ( t h i s . r e s u l t . b l o b ) ; v a r i m a g e P r e s e n t e r = d o c u m e n t . q u e r y S e l e c t o r ( " # i m a g e ­ p r e s e n t e r i m a g e P r e s e n t e r . a p p e n d C h i l d ( i m g ) ; i m a g e P r e s e n t e r . s t y l e . d i s p l a y = " b l o c k " ; } ;
13. DEMO SHOW ME THE CODE And the simulator... of course
14. SOME REFERENCE LINKS Flame : reference phone Firefox OS developer center Hacks Mozilla
15. WANT TO KNOW MORE?... Ask me how. I'm here to share
16. THANKS... QUESTIONS? Mozilla Hispano Mallorca JS Slides: http://voylinux.github.io/mallorcaJS-FirefoxOS-JSEW/ Mozilla Hispano (colabora)